Joel on Software 周思博趣談軟體

程式師的使用介面設計手冊
第1章
第2章
第3章
第4章
第5章
第6章
第7章
第8章
第9章

其他Joel on Software文章( 繁體中文)

其他Joel on Software文章(英文)

與作者聯繫 (英文)

當麥金塔剛出來時, Bruce "Tog" Tognazzini 在Apple的開發者雜誌寫了一個關於使用介面的專欄. 大家寫了很多有趣的使用介面設計問題到這個專欄讓他回答. 這些專欄一直持續至今, 現在已經是放在他的網站上. 同時也被修潤後收錄在許多好書裡, 像是 Tog on Software Design , 這本書非常有趣而且對使用介面設計有很好的介紹(Tog on Interface更棒, 不過已經絕版了.)

Tog創造了哩高功能表的概念來解釋, 為何麥金塔功能表(總是在螢幕最頂端)比Windows功能表(放在各個應用程式視窗內) 好用許多. 當你要在Windows裡叫用檔案功能表時, 必須點到一個寬約半吋高約1/4吋的目標區域. 你必須在水平和垂直兩個方向精確地把滑鼠移到定位.

可是在麥金塔上可以把滑鼠猛向上推到螢幕頂端, 不必費心要推多高, 滑鼠自然會在螢幕頂端(也就是使用功能表的正確垂直位置)停住. 所以實際上雖然目標區域的寬還是只有半吋, 不過高度卻有1哩. 現在你只要注意游標的水平位置, 不需要管垂直方向, 所以點選功能表的動作變得容易許多.

基於這個原理, Tog出了一題隨堂測驗: 螢幕上最容易用滑鼠抓到(點到)的五個點在哪裡? 答案: 螢幕的四個角落(基本上只要把滑鼠猛推過去, 完全不必定位), 再加上滑鼠目前的位置, 因為已經到位了.

哩高功能表的原理相當有名, 不過一定還不夠容易理解, 因為Windows 95團隊設計"開始"按鈕時完全搞錯重點了. "開始"按鈕幾乎是放在螢幕的左下角, 不過並沒有放得剛剛好. 事實上是放在螢幕由左由下算各2個像素的位置. 所以只因為這幾個像素, Microsoft就變成弄巧成拙了(Tog如此形容), 結果讓"開始"按鈕變得很難使用. 本來寬高都有一哩, 用滑鼠隨便按都可以. 卻因為我不知道的原因變成這樣子. 我的天啊.

我們在前一章說過, 使用者有多麼討厭閱讀, 除非完全無法完成工作否則儘量避免閱讀. 同樣的:

我說的並不是字面上的意思. 我真正的意思是, 你應該把程式設計成不必常常靈活操控滑鼠就能正常使用. 這裡列出六個主要的原因:

1. 有時候人們並沒有用最好的指向裝置, 他們可能在用軌跡球或軌跡板, 或是ThinkPad上的紅色小東西, 這些裝置都比真正的滑鼠難控制.
2. 有時候人們使用滑鼠的環境並不好: 擁擠的桌面; 滾球髒了所以滑鼠會跳動; 也有可能用的是只值5塊美元的仿製品, 動作根本就不正常.
3. 有些人剛接觸電腦, 還沒有發展出正確使用滑鼠的技巧.
4. 有些人根本就沒有精確使用滑鼠的技巧, 而且永遠都不會有. 他們可能有關節炎, 手抖, 腕道症狀; 他們也可能很小或很老; 或是有其他的殘障.
5. 很多人發現連按兩下又不動到滑鼠是非常困難的. 而動到滑鼠會讓啟動應用程式變成拖放物件. 這種人很容易認, 他們的桌面都會亂成一團, 因為他們想啟動程式時常會變成移動圖示.
6. 即使是在最佳的狀況下, 人們用滑鼠時還是會感覺慢很多. 如果你強迫人們用滑鼠進行多個步驟, 他們會覺得自己被卡住了, 結果會讓使用介面感覺起來反應遲鈍, 然後會讓他們不快樂(這點你應該會知道).

以前我在Excel團體時, 手提電腦還沒有附指向裝置, 所以Microsoft造了一個卡在鍵盤旁邊的夾式軌跡球. 要知道滑鼠是由手腕和多根手指操控. 用起來很像寫字, 而你可能在小學就已經發展出很精準的寫字技巧了. 可是軌跡球完全是用姆指控制的. 所以要把軌跡球用到像滑鼠一樣是很困難的. 大部份人可以把滑鼠控制到只差一兩個像素, 不過用軌跡球就會變成3或4個像素了. 我在Excel團體裡一直主張大家要用軌跡球來測試他們的新使用介面, 不可以只用滑鼠, 這樣才能理解無法把滑鼠移到所想位置的感覺.

下拉式組合清單是困擾我最深的使用介面元件之一. 就是長相如下的元件:

當你點到向下箭頭時, 清單就會展開:

想想看要選一個項目(假設選Times New Roman好了)得要多少個精確的滑鼠點選動作. 首先得按向下箭頭. 然後要用捲軸小心的向下捲, 直到看到Times New Roman為止. 這種下拉清單常會不小心設計成只能同時顯示二或三個項目, 所以這個捲動操作也不太容易, 如果字型很多時更是困難. 你必須小心的拖動捲軸(移動範圍這麼小, 實在不可能做到), 或者重複按第二個向下箭頭, 或是點捲動標記和向下箭頭間的區域(如果捲動標記很低時也不能用, 只會讓你更煩). 最後當你好不容易看到Times New Roman之後, 還必須點到它才行. 如果點錯了就要從頭來過. 如果你想把著作裡每一章的第一個字母都設成某個美觀的字體, 你真的會很不爽. 

正因為有著很簡單的解決方法, 所以我覺得這個該死的下拉式控制元件更討厭了: 只要讓下拉清單長到能容納所有項目就好了. 可是外頭90%的組合框根本沒有運用所有可以的空間來顯示清單內容, 這實在是不像話. 如果主編輯框到螢幕底沒有足夠空間用的話, 下拉清單應該要往上長到能容納所有選項, 長到頂到螢幕上下邊緣也沒關係. 如果這樣還放不下所有項目, 當滑鼠接近邊緣時清單就會自動捲動, 而不是要可憐的使用者去用那個小得可憐的捲軸.

更重要的是, 顯示清單時不要點編輯框右邊那個袖珍箭頭, 應該按組合框上任何一處都可以. 這樣要按的區域就會變大約十倍, 用滑鼠應該就能很容易地點到目標.

讓我們看看另一個滑鼠使用的問題: 編輯框. 你可能已經注意到了, 在麥金塔上幾乎所有的編輯框都是用一種名叫Chicago的肥胖粗體字, 這種字看起來有些醜, 會讓繪圖設計師痛苦得不得了. 繪圖設計師(與使用介面設計者不同)被教導的是細瘦而間距不固定的字比較美觀優雅而且好讀. 這當然都是對的. 不過繪圖設計師的技巧都是在紙上而非在螢幕上學到的. 當你要編輯文字時, 與間距不固定的字相比, 等間距字有個很大的優點: 就是像"l"和"i"這種很細的字比較容易閱讀或選取. 我是在可用性測試中看到一位60歲老人很辛苦地試著編輯街名(好像是Fillmore Street之類的)時才學到這件事. 我們用的是8點的Arial字體, 所以編輯框的長相如下:

注意字母I和L都只有一個像素寬. 小寫I和小寫L間只差一個像素.(另一個類似狀況是幾乎不可能分辨出小寫"RN"和"M"間的差異, 所以編輯框的內容其實可能是Fillrnore).

只有極少數人會注意到自己把Fillmore錯打字Flilmore或Fiilmore或Fillrnore, 即使注意到了, 要用滑鼠選到打錯的字母並且修正可能也要花很多的時間. 事實上要用閃爍游標(兩個像素寬)選取單一個字母也是非常困難. 看看如果用肥胖字體(這裡用Courier Bold)會有多簡單吧:

這樣就好了. 沒錯, 對繪圖設計師來說這樣會佔用較多的空間, 看起來也不夠酷. 認了吧! 這樣好用多了; 當使用者打字時會顯示銳利清晰的文字, 感覺還會更好, 而且編輯起來容易多了.

程式員有一個常見的思考模式: 數字只有三種: 0, 1, 還有n. 如果有n的話(非0或非1的數), 所有n大概都一樣. 會有這種思考模式, 可能是因為深信程式碼中不應該有0和1以外的數值常數. (0和1以外的常數被視為"魔術數字". 我才不要那麼偏執呢.)

舉例來說, 程式員習慣上認為, 如果程式允許開啟多個文件, 就必須允許開啟無限多個文件 (只要記憶體足夠), 否則至少也要有2^32個(程式員唯一勉強接受的魔術數字). 程式員習慣以鄙視的眼光看待只能開啟20個文件的程式. 20是什麼意思? 為什麼是20? 20甚至還不是2的乘冪!

所有的n大概都一樣的想法還有另一個證據, 就是程式員習慣上認為如果使用者可以移動視窗並改變視窗大小, 應該就可以完全自由地控制, 可以移到或用到螢幕最邊邊. 所以把視窗放在離螢幕頂端2個像素, 和剛好放在螢幕頂端"似乎是一樣的".

不過這並不是事實. 結果顯示, 有很多好理由可以說明為何應該把視窗放到螢幕最頂端(把螢幕可用區域放到最大), 可是卻完全沒有理由要在視窗上緣和螢幕頂端留2個像素的空隙. 所以實際上0比2合理多了.

Nullsoft(WinAmp的創造者)的程式員終於避開了這個禁錮我們十年之久的思考模式. WinAmp有個很棒的功能. 當你把視窗拖到靠近螢幕邊緣時(距離幾個像素內), 視窗會自動貼齊螢幕的邊緣. 這可能正是你要的狀況, 因為0實在比2合理多了. (Juno的主視窗也有個類似的功能: 它是我看過唯一會"限制在框框內", 不能移超過螢幕邊緣的應用程式.)

你少了些許的彈性, 不過卻因而得到一個能體會精確滑鼠操控不易的使用介面, 為什麼不用呢? 這種創新(每個程式都可以用到)以聰明的方式簡化了視窗管理的負擔. 仔細檢視你的使用介面, 讓大家暫停一下. 假裝我們都是大猩猩或是聰明的長臂猿, 而且真的不會用滑鼠.