目錄
1. 前言
2. 目標
3. 角色
4. 問題
4. 設計方向
5. 流程測試迭代 - 新增配件
6. 結論
7. 學到什麼
前言
Smart Home App 是一款智慧家庭控制 App。在進公司前已經有第一代 App，可以控制家中窗簾、電燈、插座等硬體。隨著硬體升級，我要負責重構一個 App 來控制新的硬體。
目標
幫助第一次使用智慧家庭控制 App 的住戶快速上手。
角色
Wireframe, UI Flow, Prototype, Mockup
問題
第一代的 App 的問題如下：
1. 缺乏告知用戶操作當下的回饋的交互效果。Donald Norman 在《設計心理學》提到 Seven Stages of Action，其中的感知 (Perceiving the state of the world) 。在智慧物聯中，我認為物件的回饋更為重要。
2. 第一代 App 內的用字沒有統一，甚至出現行話，對於不熟悉的用戶來說學習成本也提高了。
3. 視覺色彩配置過於複雜，在不必要畫面功能設計了比重過於突出的視覺。
4. 操作流程過於省略。
5. 缺乏硬體裝置操作引導。這類型產品除了在 App 上操作外，還需要操作硬體裝置。
設計方向
1. 增加「載入中」「空白狀態」「錯誤狀態」等 UI 視覺狀態。研讀硬體操作說明手冊，盤點操控配件的流程會遇到哪些狀態，繪製 UI Flow 後，將所有狀態設計出相對應的交互視覺出來，再加上狀態資訊，協助用戶可以判別。
2. 整合專有名詞，App 上盡量使用平易近人的詞彙。
3. 視覺上降噪，減少不必要的色彩配置和視覺干擾。用色採 7:2:1 配置。讓用戶能有效地完成任務是最重要的！希望能讓整體介面和交互更為安靜。
4. 優化完善操作流程，幫助第一次使用 App 的住戶降低操作的負擔。
5. 在適當的位置上，增加硬體操作流程的文案或插圖說明。
ZTRON HOME App UI Flow
配件控制的視覺狀態優化
在操控配件（Device）時，機制是透過 App 呼叫主機（Gateway）來操控配件（Device），操控配件（Device）的時間是不定的。而且有可能操控失敗或沒有反應。原本的設計只有開和關兩種狀態，但是其實不夠用的。所以新增了「開啟中」「暫停中」等狀態。
原本的配件控制視覺狀態
新的配件控制流程和狀態視覺
新增配件的流程優化
新增配件（原本畫面稱呼為「新增設備」）到主機時，原本畫面只顯示「設定中，請稍候... 50秒...」。但實際操作，用戶必須點擊硬體上的按鈕來新增。
因此除了要告知用戶當前 App 畫面在做什麼外，也把場域需要做的事情告知用戶。
原本的「新增配件」流程
優化後的「新增配件」流程
新增設定名稱的功能在新增配件的流程中
同事去住家幫忙安裝的反饋中，提到新增完配件要命名時，無法得知要對哪個配件設定名稱。
因此在設定名稱的頁面上，加上控制器。
四合一配件的資訊呈現調整
原本的首頁有一個欄位是顯示四合一配件的資訊，上面有溫度、亮度、PIR、大門開關以及外出回家的切換鈕。
剛接觸到這個產品時，對於這個功能的敘述是：一鍵切換，迅速了解家中的溫度、亮度，切換到外出模式，可以知道家中是否有人移動，大門是否被開啟。
我在思考把上述資訊表現得更好的時候，發現盲點：
1. PIR 一般人不知道是什麼意思。
2. 不像溫度，亮度的數值變化對人是無感。
3. 溫度感測的時間點是有人移動時才偵測。
4. 外出和回家其實是情境模式的一種，可以拆分回去到情境功能內。
因此我對四合一配件的運用有疑慮，上面的數值不是呈現給使用者看的，應該是數值到了自身設定的值，去觸發配件開或關。和主管溝通後，由於公司已和業主承諾將有這些資訊呈現在產品上，時間上也來不及開發相對應的功能，所以這部分保持不變。
原本的四合一配件
流程測試迭代 - 新增配件
環境
在 showroom（配置好的客廳環境）擺出主機和配件。
測試方式
採用 wizard of oz。A 同事在手機上操控新增配件的 prototype 時，B 同事同時拿原本的 App 實際地進行新增配件的流程。
發現
1. 點擊配件三下跟點擊頻率有關，速率必須提高才會連上。如果速度不夠快，會連不上。連不上，硬體也不會吐出相對應的資訊出來。
2. 命名配件時，不會想到可以透過開關來確認。
3. 按完配件三下後，不會直接加入成功，還需要一段時間來判定。
解決方案
1. 調整文字說明。
2. 透過新增文字說明，讓用戶知道可以透過配件的開關來確認。
3. 等待的時候，多增加一個過場畫面，減緩等待的焦慮感。
新增「迅速」二字
新增說明文字
結論
測試時，特地安排兩輪是剛到職還不了解產品的實習生測試，過程中，第一代 App 出現的問題，皆沒有出現。其他測試，安排使用過第一代 App 的同事，也評論操作起來比第一代 App 要清楚許多，並沒有之前操作第一代 App 覺得不順暢的地方。
迭代測試的次數雖少，且還有更深入的空間，但是已經起了作用。
學到什麼
導入測試的重要性
在開發前期，透過 wizard of oz 測試 Prototype，方便在 App 開發到可以實際串連配件前，及早發現流程或畫面上有什麼需要調整的地方。測試過程中，透過觀察受測者操作時的表情和行為，這些真實反應設計師是否成功解決了原本的問題。
