在小地方提昇使用者體驗

1. 空白的力量:利用接近法則-當物品被擺放在一起時,會被認為是一個群組。如果你有一排功能按鈕,可以把相似的放在一起,較沒關聯性的就利用空白把他們分開吧。如下圖,看起來就會了解Airlines相較於前面的按鈕是較為不同的。

2. 圓角與直角:圓角不僅僅是好看,也會讓人認為這是物件的邊界,而直角雖然也是邊界,但旁邊有可能接著相同類似的物件,或是表格的下一個表格,見上圖。

3. 以顏色傳遞訊息:通常可以以紅色代表緊急、警告或是破壞性的資訊(錯誤訊息、刪除等);綠色可代表儲存、更新等動作;而藍色代表一些基本功能;讓使用者可以輕易的以顏色來區別功能,。不一定要照著這樣的色調,但在整個網站內必須一致,才不會造成混淆。

4. 提示資訊:當我們有重要的或是新的資訊需要讓使用者注意的時候,可以利用動畫的效果-比起靜態圖文,人眼更容易被動作中的物件吸引。也可以直接把資訊顯示在使用者聚焦的地方(前提:你知道使用者聚焦在哪,比如輸入帳號密碼錯誤直接顯示在密碼欄位下方)。又或者以非常顯眼的方式顯示在頁面上(大字、高對比、紅色等)。

5. 幫助聚焦:如果需要跳出對話框給使用者時,最好把背景淡化,讓使用者聚焦在對話框上。一次完成一件事情,對吧?當然,前提是你的對話框提供足夠的資訊,不需要再從背景取得資訊。

6. 強化你的超連結:比起簡單的文字超連結,利用按鈕或是區塊來達成同樣的功能,對於使用者是比較友善的。原因?可以點擊的區域比較寬廣,並且比較明顯。

7. 強調重要的功能:假設你有一個對話框,目的是訂購一間旅館,那麼重要的是"完成訂購"的功能還是"取消"功能?我們可以把完成訂購設計成一個完整個按鈕,而取消只需要設定為一個簡單的超連結。

8. 多用動詞:按鈕上的文字,如果放的是"是""否",往往使用者需要回頭再看一次動作內容才有辦法執行動作。但如果是"取消""完成""存檔"這些比較明確的動作,則可幫助使用者快速確認他們正在執行的動作。

9. Auto-focus/Re-focus:幫使用者把游標放至頁面中最有可能使用的功能上,ex:當你提示表單時,自動幫使用者把游標放到地一個欄位是個好方法;又或者是當帳號密碼填寫錯誤時,把游標移至錯誤欄位。

10. 表單欄位提示資訊:可以把資訊直接顯示在文字輸入欄位中,直接告訴使用者這個欄位在幹嘛。當然,當游標移到資訊上的時候記得把提示資訊移除,不要製造使用者的麻煩。(HTML5的input物件有個placeholder屬性就是提供這樣的功能)


11. 使用圖示:圖示的好處是簡單且不占空間,但注意沒有文字輔助的圖示有時候不一定會提供足夠的資訊(不同使用者對相同圖示的認知並不一定相同,由其是國際化網站更須注意這問題)。只要圖示能明確的顯示出代表的功能,那麼對介面簡潔度的提升會有很好的效果。

12. 不要讓使用者瞎等: 當有任何功能需要讓使用者等後一段時間時,記得用一個progress bar告訴他們進度如何,儘管他們無法改變等後時間,但使用者不喜歡無法掌控的等候,這會讓他們更快(而且快很多)的失去耐心。

13. 復原功能:第一,重要物件要被刪除時永遠要提示;第二,絕對不要真的幫使用者把物件刪除,至少保留一段時間,並提供他們即時復原的功能。我們永遠都會有做錯事的時候,讓使用者有個回頭的機會。


1 則留言: