Joel on Software

Joel on Software 周思博趣談軟體

 

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

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

其他Joel on Software文章(英文)

與作者聯繫 (英文)

 

程式師的使用介面設計手冊
第4章: 情境支持與隱喻


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

要發展一個程式模型與使用者模型一致的使用介面並不容易. 有時候使用者可能對程式運作並沒具體的期望. 這時候你得想方法提示使用者, 告訴他們程式如何運作. 對圖形化介面來說, 要解決這個問題有個常見的隱喻作法. 不過隱喻並不是都一樣的, 而且要先瞭解隱喻為何有用, 才能知道自己是否用了好的隱喻.

最著名的隱喻就是Windows和麥金塔所用的"桌面"隱喻. 桌面上有些小資料夾, 資料夾裡面有些小檔案. 你可以把資料夾和檔案拖來拖去. 你可以把檔案由一個資料夾拖拉移到另一個資料夾裡. 就這種作用而言這個隱喻的確有用, 因為這些小資料夾圖案真的會讓人們想到真正的資料夾, 並且讓人們瞭解可以把文件放在裡面.

下面是由Kai's Photo Soap擷取的畫面. 你能猜到要如何放大嗎? 

這不是很難吧. 放大鏡就是真實世界的隱喻. 大家都知道該怎麼做, 而且也不會擔心放大功能會改變影像的大小, 因為放大鏡並不會改變東西的真實尺寸.

即使是不甚完美的隱喻也比完全不用隱喻好得多. 你能找出在Microsoft Word裡要如何放大嗎?

Word的介面中有兩個小放大鏡, 不過其中一個是在"預覽列印"鈕上(原因不明), 而另一個則是在"文件引導模式"按鈕(不知道是啥). 要改變放大倍率的正確方法是用寫著"100%"的下拉清單. 這裡並沒有要用隱喻的意圖, 所以使用者比較難猜出要如何放大. 這並不一定是缺點; 考量到Kai有那麼多的畫面空間, 放大對文書處理軟體來說可能並沒有那麼重要. 不過可以確定的是Kai使用者中, 會用放大功能的使用者比率一定比Word使用者高.

不過選得不好的隱喻可比完全不用隱喻更糟糕. 記得Windows 95的公事包嗎? 這個可愛的小圖示在每個人的桌面上霸佔約一平方吋的空間, 一佔就是好幾年, 直到Microsoft搞清楚沒人要它才消失. 而沒有人要用是因為它用的隱喻不好. 這應該是個可以把檔案放進去帶回去的"公事包". 可是當你要把檔案帶回家時, 還是得把它們拷進磁片. 所以囉, 你究竟是把檔案放在公事包還是放在磁片裡? 我不確定. 我搞不懂公事包, 我從來都不會用這個東西.

情境支持(Affordances)

設計良好的物件一看就知道要怎麼用. 有些門在大約手的高度裝有大片金屬片. 對這片金屬片唯一能做的是就是推它. 以唐納.諾曼(Donald Norman)的話來說, 金屬片對應產生(afford)推. 別的門會有個大圓把手讓你只想去. 它們甚至還暗示你該如何握住把手. 所以把手就對應產生拉的動作. 它讓你想要去拉.

其他物件的設計沒這麼好, 所以你就不知道該怎麼做. CD盒就是個很典型的例子. 你必須把大姆指在正確位置 然後向某個方向拉. 可以盒子的設計本身完全沒有指示要怎麼做. 如果你不知道訣竅會很沮喪, 因為根本打不開.

要建立情境支持的最佳方法就是在"負空間"配合人手的形狀. 我們仔細看看(優越的)柯達DC-290數位相機的前後蓋:

前方有一個大橡皮把手, 看起來可以把右手手指很舒服放在這裡. 後方左下角的設計更是聰明, 這裡有一個超像姆指印的凹洞. 當你把左手拇指放在這裡, 左手食指會很舒服的彎到相機前方鏡頭和另一個橡皮塊間. 它提供了一種舒適的感覺, 就像在吸吮大拇指(並把手指沿著鼻子彎起來). 

柯達的工程師只是試圖誘使你用雙手握住相機, 這樣可以確保相機更穩, 而且也能避免手指亂放不小心遮到鏡頭. 這些橡皮並沒有其他功用, 唯一的作用就是鼓勵你正確地握住相機.

良好的電腦使用介面也會應用情境支持. 大約十年前起大部份的按鈕都變成"3D"的. 加上各種灰階色調後, 按鈕看起來會突出螢幕. 這不光是看起來酷而已. 它的作用非常重要, 因為3D按鈕對應產生了推的動作. 它們看起來就是突出來的, 會讓人感覺要操作的方法就是去點它們. 不幸的是, 現在很多網站(沒有注意到情境支持的價值)偏好看起來比較 而不是看起來可以按的按鈕; 結果就是有時候會找不到該按哪裡. 看看下面這個網頁橫欄:

"GO"和"LOG ON"按鈕都有突出, 看起來就像可以點的樣子. "SITE MAP"和"HELP"按鈕看起來就不太像能按. 事實上它們和不能按的"QUOTES"標籤長得一模一樣.

大約四年前, 很多視窗開始在右下角長出像是把手的三條小凸紋. 看起來像是刻在滑鈕上增加摩擦力的東西. 它對應產生拖拉動作. 它只是在 你拖拉它來改變視窗大小.

最後要說一個最好的情境支持範例, 就是眾所週知的"活頁式對話框". 記得舊式的Mac控制面板嗎?

它的想法是讓你從左的列表(可捲動)選一個圖示. 點了圖示之後畫面右方就會改變. 雖然原因不明, 不過這種迂迴方式對原本設計的程式員來說非常合理, 可是很多使用者完全搞不懂. 很少有人知道如何捲動列表顯示其他圖示. 不過比較嚴重的是, 大多數人都不知道圖示和右邊對話框是有關連的. 因為圖示看起來只是個選項.

這種介面從大約1992起就開始消失不見, 取而代之的是一種叫活頁式對話框的新發明:

活頁式對話框是個很好的情境支持. 從圖案上可以很清楚地知道你有六個活頁; 也很明確地呈現你在哪一個活頁. 當Microsoft開始測試活頁式對話框的使用性時, 數值由約30%(舊式麥金塔作法)變成100%. 也就是說每一個受測者都能理解活頁式對話框. 這個隱喻實在是非常成功, 另外Windows還內含支援活頁式對話框的程式碼, 而且可以免費使用. 實在很難想像還看得到應用程式沒有運用這個功能. 這些程式因為不想趕時髦, 結果卻產生了真正可度量的可使用性問題.

 



> 第5章

文件來源: User Interface Design for Programmers Chapter 4: Affordances and Metaphors (英文) 

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


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

FogBUGZ | CityDesk | Fog Creek Software | Joel Spolsky