前言
在MIT不知不覺已經過完第一年了，雖說我的研究領域主要在人機互動(Human-Computer Interaction, HCI)上，但一直很少寫關於HCI的文章。說實在HCI的資訊和課程在台灣非常稀少，大多數人對於HCI的了解和想像也停留在電影裡才會看到的那種很fancy的操作介面，或是multi-touch之類的新興操作模式。但除了這些很炫的東西外，其實有更多會直接影響到我們目前正在使用的人機介面的基礎研究和理論存在。
以操作介面(user interface)的設計來說，這是在軟體開發流程中最容易被忽略的一環。一般公司和軟體工程師把寫UI視為一種苦工，於是常隨便抓個菜鳥去用VB之類的快速開發工具把元件拉一拉就結束了。但不幸的是使用者開始用軟體時，第一眼接觸到的就是UI，如果UI設計的不好，使用者容易感到挫折，甚至嘗試一兩次後就把軟體給丟了。於是，不管裡面有多巧妙多厲害的功能都沒用。因為使用者根本就沒辦法看到軟體裡面花了多少心血，使用者只能透過最外層的介面來感受到軟體的內涵。所以說，介面如果做爛了，底下的功夫不就只能包在裡面白白浪費了嗎？
最近幾年因為Apple的iPod、iPhone開始走紅，越來越多人注意到好的介面設計帶給使用者的影響是非常巨大的，甚至也對於產品的銷路有決定性的影響。很多人能感覺到Apple設計的介面比較好看而且也比較好用，但其實說不出來為什麼，所以工程師也很難複製Apple所創造出來的使用者體驗(user experience)。
圖形介面(Graphical User Interface, GUI)的快速開發工具將軟體介面設計的難度大大降低到像用小畫家畫畫一樣的程度，所有的標準GUI元件都是手到擒來，滑鼠一拉就能擺到任何想擺的位置。這項工作看似簡單，但要做得好其實並不容易。每個元件的長相、顏色、位置、大小、相對關係，甚至要選用什麼元件來呈現資訊，背後都有一套學問在。許多人誤解介面只要好看就好，但其實好看的介面不見得好用（常常還比較難用）。「好看」這件事目前還有很多藝術成份在裡面，但「好用」這件事其實已經有很多HCI研究發展出的理論能告訴我們怎樣設計會比較「好用」。
這個領域可以談的東西實在太多了，所以我打算慢慢把HCI中比較重要且有趣的概念分享出來，希望在台灣設計UI的公司和工程師們能做出更簡單易用的產品出來。（這不只是軟體而已，其實所有的人造產品都需要設計「介面」！不管是你家的冰箱還是門把都一樣有好不好用的問題。）
Usability – 易用性
這篇文章我打算從設計UI最核心的概念Usability開始，之後再慢慢另闢新文詳細介紹各個部份。
Usability的定義是人可以用某樣工具達到一個特定目標的容易程度。目前常用的中文翻譯有可用性和優使性兩種，前者給人的感覺像只有描述可用或不可用兩種狀態，後者則看不太出是什麼意思。我覺得比較好的翻譯是「易用性」，但我還是比較喜歡用原文稱呼就是。
Usability包含了下面五項要素：
- Learnability: 使用者在第一次用就能學會的容易程度
- Memorability: 經過一段時間之後再重新使用這UI還能熟練操作的容易程度
- Efficiency: 使用者能用這個UI多快完成任務
- Errors: 包括使用者有多容易出錯、錯誤有多嚴重、以及有多容易從錯誤中回復回來
- Satisfaction: 使用者用這個UI時會覺得愉快的程度
Learnability指的是使用者在第一次用就能學會的容易程度。（沒通用的中文翻譯，或許可以叫「易學性」。）如果一個UI的learnability越好，使用者就越能輕鬆的學會如何使用它。相反地，如果learnability很差，使用者就容易搞不清楚到底要怎麼用。如果一個UI或產品的目標對象是一般大眾，包括幼稚園的小朋友到老阿媽，learnability通常是決定這個產品被接受程度的關鍵。至於要怎麼設計具有優良learnability的UI也不容易，目前大多是靠一些基本原則和低成本的測試方法來反覆設計，這部份以後再另闢專文介紹。
Memorability指的是經過一段時間之後再重新使用這UI還能熟練操作的容易程度。（中文姑且可以叫「藝妓易記性」吧。）memorability和learnability常有密切關聯，如果learnability夠好，其實就沒有memorability的問題了，因為每次都重頭學起也是很容易。但稍微複雜的介面都不是很好學，所以要怎麼在使用者第一次學會以後讓他們不容易忘記就是memorability關注的事了。
Efficiency指的則是使用者能用這個UI多快完成任務。（efficiency就是效率。終於不用想新翻譯了…(汗)) efficiency是五項usability要素中最容易定義和測量的，但這並不代表要設計有效率的UI就是很簡單的事。舉個簡單的例子，下面的圖分別是Windows XP和Windows 98的開始紐，雖然看起來只是一個按鈕，但這個紐在efficiency上有著極大的差異，有興趣的人不妨自己先想想看再往下看說明。
好，這兩個開始紐的差別在哪呢？
說起來很好笑，其實關鍵的差異只有1個pixel的差別：Windows 98的開始紐最外圈的1個pixel是不能按的。也就是說，如果你把滑鼠移到最左下角想按開始，你會發現按下去什麼事都不會發生；你得把滑鼠往右上移回1 pixel以上(而且還不能超過按鈕的大小!)，才能按到那個紐。(這問題在Windows 2000前都有，一直到XP才被解決。) 這個設計其實造成兩個問題，第一是使用者不能快速把滑鼠甩往左下角，而必須「瞄準」開始紐再移動，這兩種動作的時間差距大約是log(移動距離/按鈕大小)。（這是透過Fitt’s Law計算出來的。Fitt’s Law是HCI領域中很重要的一個定律，之後我會再另闢新文介紹。）第二，這1個pixel會讓直接移到最左下角的使用者得到一個沒有任何feedback的error(期望的事情沒有發生)，使用者很容易會搞不清楚怎麼回事而產生挫折感。所以說，別小看設計中的小地方，即使是1個pixel，也可能造成很大的影響。
再來是usability的第四個要素，errors（錯誤）。errors的範圍比較廣，包含使用者有多容易出錯、這些錯有多嚴重、以及有多容易從錯誤中回復回來。usability的要素常常是緊密相連的，以上面那個Windows開始紐的例子來說，那1個pixel也會造成error，但其實並不算嚴重，而且也容易恢復。比較嚴重的error像是程式結束時沒問使用者要不要存檔就直接結束，可能會讓人損失重要的資料。
最後是第五個要素satisfaction（滿意度），它指的是使用者用這個UI時會覺得愉快的程度。一般的UI通常不會太注意satisfaction，只要讓使用者用起來不會想罵髒話就好。但以軟體來說，遊戲的UI設計是特別需要考量satisfaction的，因為玩遊戲重要的就是要開心，如果達不到這目的其他都是枉然。
Usability的五項要素是評估一個介面好不好用的基礎指標。下回設計介面時，不妨先逐一檢查每一項要素，看看其中是不是有些會影響到usability的問題存在。
Windows的Start按鈕也有這麼大的學問啊，不過我還是習慣傳統介面。
有興趣的人可以參考一下 http://www.joelonsoftware.com/uibook/fog0000000249.html
另外, 文章裡也有提到, start push button 是 2 pixels 的間隙.
謝謝你的推薦, 這篇文章蠻不錯的 😀
start button旁邊的”dead border”我查到的文章都說是1 pixel，實際上到底是多寬我現在也沒辦法測試。（有人還有Win 2000嗎?XD）anyway, 那個寬度是幾個pixel其實不重要，只要有1個pixel以上就會造成問題。
@vgod, 在下用的正是Windows 2000 XD
抓了張圖來測確實是2 pixels
@Maoke Jackson, 感謝:D
我大學是心理背景，在認知心理學課堂上老師曾提過人機互動中，心理學所扮演的角色，在下對此很有興趣!期待您的新文章!
以前就一直覺得 UI 設計, 不應該只是請美術人員畫一畫圖,配一配色而已.
但又苦於自己無相關的知識, 無法說明其他人重視這一塊領域,
很高興可以看到你寫這一類的文章, 希望以後可以看到更多介紹HCI相關文章! 加油
PS : 我對這個題材很有興趣, 不知有沒有什麼書藉可以推薦的呢?
謝謝囉!
的確, 視覺設計只佔UI設計中的一小部份，並不是全部。好的UI除了好看以外，好用是更重要的。
我也想能讓更多人重視這個領域，台灣在這邊還落後國外太多，希望我的文章能起到一些拋磚引玉的效果。
我不確定你想要多深入的書，但提到相關書我首推Donald Norman的設計日常生活(The Design of Everyday Things)，這本書講了很多日常生活都會碰到的usability問題，是本輕鬆又好讀的經典書籍。
台灣軟體公司視UI為苦工之因是公司都不做原創的UI設計,代工嘛, 抄改而已
想起 Jakob Nielsen’s 10 …
Nielsen的10條heuristic evaluation principles的確是評估usability的經典 😀
1. 你的許多翻譯 我都很同意 比如:
Usability – 易用性
Learnability – 易學性
Memorability – 藝妓易記性
等等
2. 我覺得一個介面設計上的重要的特性 格主沒有提到:
一個介面必須要容易操作
使用者只要用本能或常識
就可使用大部份的功能
而不須事先學習
(99%以上的人都想一入手就開始操作 )
也許這個特性 跟前面所提的 -ilities 或多或少有一點相關
但是我認為它的重要性 不在任何一個之下
不知格主意見如何?
您說的只要用本能就能操作，其實就是learnability所關注的內容。
learnability的極端情況就是「不需要」學習就能夠操作，這也是每個設計UI的設計師都想達到的境界 😀
再補充一點
根據 80/20 法則
80% 的功能只需使用到 20%的UI
所以至少這 20% 要能做到 容易操作 不須事先學習
不知格主意見如何?
你說的沒錯，現代軟體功能越來越複雜，但其實一般人會用的都是少數的基本功能而已，所以要如何在UI上呈現這些最基本、最常用的功能是非常重要的。
很有趣的概念。
雖然我念的科系完全不相關。
但是相反的 正是也最一般人大眾的看法吧？
剛剛看了這篇 覺得很有趣 也很有道理（一直點頭呢）～
期待你繼續經營blog噢
🙂
謝謝你的支持:-D 我很開心一般人都能看懂我的文章，我會認真點多寫點東西的..XD
0rz.tw壞了
會跳出視窗說錯誤連結
謝謝你的回報, 已經更新。
請至0rz.tw Dashboard Widget下載。
學長，最近購置了一台Macbook pro 也讓我重新思考了UI的重要性
然而，想請教的是，究竟硬體與軟體的介面整合是否有相關理論
例如，multi-touch ，Wii的遙控器
還有，AI的問題，最近的許多網路應用都出現了AI的應用
所以究竟往後的UI發展會不會更趨向大量的AI應用，使得介面更趨簡化
我不確定你說的”硬體與軟體的介面整合”是什麼意思, 但你提到的multi-touch、wiimote都是HCI領域的研究範圍。Apple雖然是第一個成功把multi-touch商業化的公司，但multi-touch其實是20年前就有的技術，只是當時並不清楚有什麼killer application而已。有興趣的話可以找找CHI和UIST的paper，這些UI相關的技術已經有很多人投入研究很久了。
AI是讓UI簡化的方法之一，但並不是唯一的方法。以Apple為例，他們的UI一直以來也都很簡潔，但他們是用design來去除不必要的東西，而留下真正重要的。話雖如此，HCI一直以來都有很多AI的技術參雜在裡面，所以AI在這個領域的重要性是毋庸置疑的。
Pingback: [HCI] 費茲定律(Fitts’ Law)與使用者介面設計 | vgod’s blog
获益匪浅, 看完你的好多文章之后被你的经历折服. 希望能够在以后的日子里看到你更多的好文章
謝謝 🙂
Pingback: 被HCI所震撼 « 风云骤起, 我自不动
恕冒昧, 此處所談的HCI好像比較算是GUI+Usability. HCI可以還包括了更多心理與社會層面的思惟.
的確，就如我文章中講的，HCI可以談的東西太多，我只能先從usability起個頭 🙂
我是在準備研究所的非本科系學生 看了你的文讓我收穫良多 謝謝你打了這篇網誌 🙂
在台灣HCI的相關資訊不會說非常的稀少，在台灣想要最快理解一個未知領域，得到其相關基本知識，最快的方法就是到全國博碩士論文網，關鍵字搜尋一下，就有中文的paper可以看，想要進階，就從它的文獻中找。當然，國外的研究通常都比台灣還要快速、深入，這是天生的資源就不對等。
其實台灣比較多關於HMI的文件，和HCI真的可以互相呼應，很感謝格主分享的文章，很有發想的空間和未來
想涉獵一些HMI方面的知識, 這是我用”人機介面”在Google上搜尋看到的第一篇文章, 謝謝vgod分享!
小弟的認知是一般人使用產品都不喜歡翻閱使用手冊, 好的HMI設計應該可以讓人在不看說明書的狀況下, 就可以上手八成的功能!
若要進行Multi-Touch方面的UI設計(Linux)不知是否有什麼入門書籍或聖經可以推薦的?
我正在做一些gesture HCI相关的东西，运行在TV/Desktop/Projector上，不得不用了LED手套，因为算法不行，damn shame on me 🙁
下面是我对HCI发展的一些看法，写出来权当抛砖引玉了。不知道楼主是怎么想的？
(1) handheld/small device: touch
(2) big screen/TV/projector: gesture and(or) remote
(3) desktop/laptop computer: mouse+keyboard=mainstream; touch? not sure…
(1) and (2) can be combined together using some kinda cable or wireless network.
淺顯易懂,獲益良多…希望這個主題可以繼續寫下去! 😀
感謝你! 獲益良多
期待更多新文章
謝謝!
Pingback: all electronics tutorialsAll embedded projects
Pingback: reverse phone call lookup
Pingback: syllubus
Pingback: Article about Human-Computer Interaction (HCI) « Overthetree's Blog
Pingback: Baju bayi
Pingback: Perlengkapan Bayi Murah
Pingback: Perlengkapan Bayi Murah
Pingback: New Android Market
Pingback: New Android Market
Pingback: New Android Market
Pingback: New Android Market
Pingback: New Android Market
Pingback: New Android Market
Pingback: New Android Market
Pingback: New Android Market
Pingback: Sarung tangan bayi
Pingback: Sarung tangan bayi