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

***

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