l

2011年8月4日 星期四

HCI 之動線安排

August 04 22:26~23:30

Teddy 有位朋友最近在裝潢住了 10 幾年的房子,廚房安裝了新的櫥櫃與流理台,收納空間增加了不少。有一次朋友告訴 Teddy:『廚房裝潢好之後,我們就在思考如何擺放像是盤子,碗筷,刀叉,湯匙,米缸,電鍋,等廚房用品的位置,使得在使用的時候可以在行走最短路徑的前提下拿取所需的東西。』

看到這邊鄉民們應該知道 Teddy 的這位朋友是念 Computer Science 出身的,不過這不是重點,重點在於,只要有在做家事或是經常需要在廚房走動的人,一定可以體會『最短路徑』或是『動線流暢』的重要性。例如,要煮飯的時候,米缸,量杯,裝米的鍋子,水槽(洗米與裝水),和電鍋,就應該要可以讓人在『移動距離最短』的情況下完成整個煮飯的任務。

當然廚房不是只有用來洗米這項任務,包括切菜,做菜,切水果,做蛋糕,加熱食品,打果汁,泡咖啡,洗碗,洗抹布等等活動,都要一併考慮進去(讀到這邊應該可以看得出來 Teddy 是一個經常做家事的好男人...XD)。套句 pattern languages 的術語,如果一個廚房使用起來很『順手』,無論這個廚房的大小,中式或是西式,廚具高級或是平價,我們就說這個廚房具有 Quality without a Name 的特性。

***

扯了一堆,其實『最短路徑』或是『順手』這件事,都在在反應了人類的一個特性,那就是一字曰之『』。正所謂『需要為發明之母』...錯,應該改成『懶惰為發明之母』,所以說,一個『設計』的好壞,其中有一項很重要的因素,就是能不能夠讓人類變得更懶惰一點。能夠少走幾步路,就少走幾步路(所以網路購物會大紅大紫這是必然的)。能少打幾個字,少按幾次 mouse click,少捲動幾次 scrollbar,少讓眼珠子上下移動幾次,這些看起來小不拉機的事情,其實往往都是決定使用者買不買單的因素。

舉個例子,有一個老師傅手工打造的網頁長成下面這個鳥樣子:


這是一個顯示某種『趨勢圖』的畫面,使用者在畫面下方勾選要顯示的內容(圖中的 X, Y, Z... U, V, W, T),然後在 Time 欄位選擇要顯示多久的資料(例如,30分鐘,1小時,1天等等),最後下 Query 按鈕資料就會顯示在畫面上方的圖形元件中。另外,畫面上還有一個 Show Avg. 的 check box,點選之後在趨勢圖上會自動畫出一條平均線。

這個設計有一個小問題,就是可以選擇的顯示的內容太多了,會超出一頁畫面,因此畫面右方會出現 scrollbar。當使用者要選擇,例如說, C 的時候,就要把 scrollbar 往下拉才可以看到 C 這個選項。問題來了,雖然選到 C,但是趨勢圖也因為之前拉了 scrollbar 的緣故跑出畫面之外,使用者又要在把 scrollbar 往上拉才可以看到圖形。

切,你可能會想,這個問題很簡單啊,爭什麼,摻在一起做成撒尿牛丸啊,笨蛋...嗯嗯....把畫面切成兩半不就好了。以下為某中切割的結果:



這樣子拉 scrollbar 的時候,就完全不會影響上面的圖形元件了,也就是說不管選了畫面下方的那一個項目,立即可以看到相對應的趨勢圖了。

錯,為什麼?因為 scrollbar 往下拉的時候,雖然不會動到上方的圖形元件,但是 Time,Query button 和 Show Avg. 卻會跟著往上被捲動。也就是說,使用者還是要把 scrollbar 往上拉,才可以按下 Query button 更新上方圖形元件的資料。這個設計還是有改善的空間,留給鄉民們自由發揮。

如果想要以更『科學化』的方式來分析這個使用者介面,可以參考『歪批 GOMS (1) 』,簡單的算一下要達成某個 goal (例如,看到 C 這個項目最近1天的資料,並且要顯示平均線)需要幾個 Operators 就可以算出你到底幫使用者『偷了多少懶』。

介面如果設計的讓人用起來感覺好像在用滑鼠罰跑操場 10 圈,這樣的設計可是沒有人會喜歡滴...除非你想減肥或是想早點得到腕隧道症候群...XD

***


友藏內心獨白:學弟,接下來該怎麼做,知道了吧。

4 則留言:

  1. 學長,他會知道怎麼做地~

    回覆刪除
  2. 您想要的答案,已經提示得很明顯了...
    我以前的網站,比您這個還做得更多...
    如果 Time 僅有 30 分鐘、1 小時及 1 天 三個選項的話,會在畫面不亂、夠大的情況下,考慮做成 Radio button,三個並列,這樣就不必點一下下拉,再往下找到想要的選項再點一下,而是可以直接點選想要的選項。
    當然 Radin button 的缺點就是比較佔空間,而且目前選擇項目是哪個,比較不明顯。仍然可以使用下拉式選擇,我的網站是採用滑鼠移過就自動下拉的模式,如此可以省下必須點一下展開的那一點。
    另外,在查詢效能可接受的情況下,我會直接拿掉 Query 按鈕,點選任何選項,都會自動查詢,如此就更方便了。
    針對下方選項太多,必須要捲軸這一點,還有可能有改善的方法。一樣可以考慮滑鼠移過,或需要明確點一下,該 Panel 自動展開,蓋過上方圖表。等選擇完畢,滑鼠移開或按關閉,該 Panel 就收回。在一個畫面內可完整顯示所有選項的情況下,就完全避掉捲軸了...

    回覆刪除
  3. 咦!? 先前我留的一堆意見,怎麼不見了???

    回覆刪除
  4. To ChrisTorng:

    Teddy 昨天也發現了,還以為是您自己把留言刪除了。不知道是不是這個 blog 系統的問題,這個現象已經發生過大概 3 次了。不過沒關係,當有人留言的時候系統會寄一封信到 Teddy 信箱。Teddy 把你之前的留言再貼一次。

    ChrisTorng 已針對您的文章「HCI 之動線安排」留下新意見:

    您想要的答案,已經提示得很明顯了...
    我以前的網站,比您這個還做得更多...
    如果 Time 僅有 30 分鐘、1 小時及 1 天 三個選項的話,會在畫面不亂、夠大的情況下,考慮做成 Radio button,三個並列,這樣就不必點一下下拉,再往下找到想要的選項再點一下,而是可以直接點選想要的選項。
    當然 Radin button 的缺點就是比較佔空間,而且目前選擇項目是哪個,比較不明顯。仍然可以使用下拉式選擇,我的網站是採用滑鼠移過就自動下拉的模式,如此可以省下必須點一下展開的那一點。
    另外,在查詢效能可接受的情況下,我會直接拿掉 Query 按鈕,點選任何選項,都會自動查詢,如此就更方便了。
    針對下方選項太多,必須要捲軸這一點,還有可能有改善的方法。一樣可以考慮滑鼠移過,或需要明確點一下,該 Panel 自動展開,蓋過上方圖表。等選擇完畢,滑鼠移開或按關閉,該 Panel 就收回。在一個畫面內可完整顯示所有選項的情況下,就完全避掉捲軸了...

    回覆刪除