[客座] 預知: 意料之內的介面設計

Posted by Ka-Yue

 

UI介面設計理論

跟藝術、設計不同,主觀的喜好並不能夠作為判斷介面設計好壞的準則。一個很炫的 UI 未必一定 User friendly,一個簡陋的介面也不一定會難用。而「預知」是家儒常以用來判斷某設計好壞的方法,適用於大部份的設計,在此分享一下。

可預知性

「預知」是指用戶能否在未做出任何動作之前,就已經能估計到某 UI component (如連結、按鈕)的用途、操作方法,以及會帶來的結果。一個設計良好的 UI 應該是可預知的 (Predictable), 會讓用戶感到一切盡在掌握的樣子。如下圖的這個表單,藍色理所當然的是連結;按鈕理所當然是用來提交資料;那個圓型一如以往是個單選項;四方型的 check box 是多選項。一切都是那麼理所當然。也許它不是最漂亮的設計,但起碼使用的時候不會干擾到用戶,用戶不用去重新學習、理解 components 之間的關係。

網頁設計 界面設計
漂亮的設計從來都不是必須的,可用性卻是不可或缺。

要 UI 做到可預知,最基本是要做到讓用戶察覺得到 UI component 的存在。如果 UI component 無法被人察覺,跟本就沒有人會去碰它。長輩經常告誡我們 超連結 的樣式一定要讓人感覺像條 超連結 才行(可以點擊的),千萬不要跟 內文 有所混淆,說的就是這件事。

誤解與一致性

然之後是避免用戶對某 UI component 作出錯誤的估計,不要讓操作的實際結果跟用戶設想的有所出入。舉個例子,下圖是從 aNobii 首頁上截出來的,大家能夠猜到點擊書本封面後會帶你到甚麼地方嗎?

網頁設計 香港 網頁設計師

香港網頁設計 答案是「修改書本資料」,我想好多人都以為是「書本詳細資料」吧。事實上,aNobii 上大部份地方,點擊書本封面都會連結到「書本詳細資料」頁面,而不是修改資料。換言之,這些封面所以會引起誤解,是因為它們破壞了網站的一致性。明明點擊書本封面會連結去詳細資料頁面(這也是業界的一般做法,點擊產品圖片給你看詳細資料),為甚麼這次會不一樣?雖然在滑鼠停留在封面上的時候會有一個提示(如右圖示),但這種粗糙的做法就如臨時要求老闆更改會議地點一樣,並不可取。

始料不及

另一種令人出乎意料的狀況是,軟件自作聰明,做了一些用戶意料以外的動作。最經典的例子是,當用戶在音樂播放器的曲目庫中刪除一首歌,究竟該用戶是想該曲從曲目庫上移除,還是從電腦上刪走呢?

界面設計介面設計網頁設計

寧可讓軟件蠢一些,也不要因自作聰明而犯錯。一個 UI 的好壞,比的不是有多好,而是誰比較少犯錯。

喜歡這篇文章嗎? 分享出去給作者一點鼓勵吧!
  • Kuo

    這些例子都舉的很棒
    尤其是第二個真的是很活在自己的世界裡阿

  • Kuo

    這些例子都舉的很棒
    尤其是第二個真的是很活在自己的世界裡阿

  • iguest

    這篇文章提到的概念一言以蔽之,其實就是︰不要超常於他人。

    大家好不容易習慣了一種操作邏輯,這種操作邏輯的使用者基數也很大,非必要就不要破壞這種公認的方式。

  • iguest

    這篇文章提到的概念一言以蔽之,其實就是︰不要超常於他人。

    大家好不容易習慣了一種操作邏輯,這種操作邏輯的使用者基數也很大,非必要就不要破壞這種公認的方式。