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

作者:周思博 (Joel Spolsky)
譯:Paul May 梅普華
Tuesday, April 18, 2000 A part of Joel on Software, http://www.joelonsoftware.com

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

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

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

Kai_Is_Cool.jpg

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

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

Legalese.gif

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

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

情境支持(Affordances)

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

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

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

Kodak_DC290_2.jpg Kodak_DC290.jpg

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

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

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

ETrade.gif

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

Window_Gripper.gif

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

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

Old_Control_Panel.gif

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

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

Mac_Display_Settings.gif

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

bullet.gif 下一章:一致性及其他怪東西

這些網頁的內容為表達個人意見。
All contents Copyright 1999-2002 by Joel Spolsky。All Rights Reserved.