Joel on Software

Joel on Software 周思博趣談軟體

 

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

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

其他Joel on Software文章(英文)

與作者聯繫 (英文)

 

程式師的使用介面設計手冊
第7章: 為節省大家的麻煩所作的設計, 第二部份


作者: 周思博 (Joel Spolsky)
譯: 梅普華
2000年4月27日

 

當麥金塔剛出來時, 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的主視窗也有個類似的功能: 它是我看過唯一會"限制在框框內", 不能移超過螢幕邊緣的應用程式.)

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



> 第8章

文件來源: User Interface Design for Programmers Chapter 7: Designing for People Who Have Better Things To Do With Their Lives, Part Two (英文) 

約耳.斯珀儿斯奇是Fog Creek Software (設立在紐約的一家小型軟體公司) 的創立者. 約耳畢業於耶魯大學 (Yale University) ,並曾經在微軟, Viacom 和 Juno 擔任程式人員与管理工作.


這些網頁的內容為表達個人意見
Copyright ©1999-2005  Joel Spolsky. 所有權利皆予保留 使用規定

FogBUGZ | CityDesk | Fog Creek Software | Joel Spolsky