UX · UI

UX和UI到底差在哪裡？

UI處理的是「看起來怎麼樣」，UX處理的是「用起來怎麼樣」。同一個預約按鈕，顏色・形狀・文字是UI的工作；這個按鈕是否放在客人會找的位置，則是UX的工作。

兩者不是分開的工作。通常會先用UX決定客人的動線和畫面順序，再在上面用UI套上顏色和文字。順序反過來的話，很容易做出漂亮卻不好用的網站。

看設計稿時把兩者分開來看，回饋會容易許多。「不喜歡這個顏色」是UI意見，「價格很難找」則是UX意見。

UX也包含畫面之外的體驗。預約後收到的確認簡訊、詢問後多快得到回覆，對客人來說都是「光顧這家店的體驗」。

好的UX要用什麼標準判斷？

好的UX，是客人「不用多想」就能完成想做的事。易用性研究機構尼爾森諾曼集團（Nielsen Norman Group）把這整理成10項原則（易用性啟發法則），很多設計師把它當成檢查表使用。

套用到店家網站上，以下幾點特別重要。這不是艱深的理論，幾乎就是在店裡招呼客人時的常識。

不需要把原則全部背下來。看設計稿時，只要一直問自己「第一次來的客人，在這個畫面能馬上知道要做什麼嗎？」，大部分問題都能篩出來。

• 告訴客人現在在哪裡：如果正在預約，就像「共2步驟中的第1步」這樣顯示進度。
• 用客人的話來寫：與其寫「服務介紹」，不如寫「療程項目・價格」這種客人會找的字。
• 容易返回：選錯日期時，不必從頭重新選。
• 一樣的東西保持一樣：按鈕形狀和位置不要每頁都不同。
• 事先防止失誤：例如公休日直接設定成無法選擇。
• 只呈現真正需要的：與其把所有資訊塞進首屏，不如先呈現最重要的。

怎麼檢查自己店家網站的UX？

最可靠的方法，是看別人實際使用的樣子。即使沒有設計專業知識，照以下步驟做30分鐘，就能發現不少要改的地方。

檢查時重點是不要解釋、不要幫忙，因為客人都是在沒人從旁指點的情況下獨自使用網站。

也可以用數字確認。在訪客統計中查看來到預約頁的人有多少比例真的完成預約，就能推測客人在哪個步驟流失。

1. 01找兩三位不太熟悉店家的親友，年齡層不同更好。
2. 02把手機交給他們，一次給一個任務，例如「預約這週六下午」「找找看能不能停車」。
3. 03在旁邊安靜觀察，記下對方遲疑、按錯、按返回的地方。
4. 04結束後簡短問一句：「哪裡讓你覺得混亂？」
5. 05如果好幾個人都卡在同一個地方，就先從那裡改起。
6. 06改完後，請新的人再做一次同樣的任務來確認。

不同行業的UX重點不一樣嗎？

不一樣，客人進到網站後「最先想做的事」因行業而異。讓這件事能用最短的路完成，就是UX設計的核心。

所以即使使用相同的設計版型，選單順序和首屏按鈕也要依行業調整。直接照抄別的行業的網站，可能不適合自己的客人。

即使是同一行業，也會因客群而不同。年長客人多的店，把字放大、把電話按鈕放前面可能比較合適；20多歲客人多的店，把KakaoTalk・Instagram連結放前面可能更對。

• 咖啡廳：客人最先找的是地點・營業時間・菜單照片。地圖和「導航」放在上方比較好。
• 美髮店：客人會比較各項服務的價格和設計師後再預約。從價目表直接接到預約的流程很重要。
• 工作室：客人會確認課程日期和剩餘名額後報名。選日期的畫面一定要簡單。
• 網路銷售：客人會比較商品並放進購物車。搜尋・分類・結帳步驟要短。

UX會影響搜尋排名嗎？

間接上會有影響。Google搜尋中心表示，會盡量獎勵網頁體驗（載入快速、手機上好瀏覽的畫面、安全連線等）良好的網頁。

不過Google也說明，即使網頁體驗稍有不足，仍會優先顯示和搜尋字詞最相關的內容。意思是當很多內容同樣優質時，網頁體驗才可能造成差異，所以先把客人要找的資訊寫完整才是根本。

比搜尋排名更直接的效果，是詢問・預約數。同樣的訪客數，UX好的話，願意聯絡的客人就會變多。

和網站製作公司合作時，UX・UI常犯哪些錯誤？

最常見的錯誤，是一開始就看設計稿做決定。跳過畫面骨架（線框圖）的話，目光會被顏色和照片吸走，很容易忽略選單順序或按鈕位置這類重要問題。

還有很多人只用電腦畫面確認設計稿。店家的客人大多用手機進站，設計稿也一定要在手機上打開看看。

UI的喜好回饋最好搭配範例。與其說「要有高級感」，不如附上參考網站說「像這個網站一樣留白多、字體細的感覺」，修改次數就會減少。

上線後UX也要持續調整。客人常打電話問的問題，代表在網站上很難找到那項資訊，把相關內容移到更顯眼的位置就可以了。

• 做設計稿前，會先給我看畫面骨架（線框圖）嗎？
• 會另外製作手機畫面的設計稿嗎？
• 能說明客人要按幾次才能完成預約・詢問嗎？
• 上線前會用真的手機實際操作檢查嗎？
• 上線後有辦法依客人反應修改嗎（修改次數・網站維護）？