jiwostudio.com

★ December 31st, 2008 Attention Map 理論

最近上傳了一堆新圖片，想將這些照片合成一個 set，但是進入編輯器以後卻不知道要怎麼新增 set，找了一陣子才找到按鈕。

我的 flickr 上已經新增過 8 組 set，但是上一次使用這個功能已經是好幾個月之前了，所以一時之間不知道功能在那裡。

請看看 flickr 編輯器的介面，這個新增 set 的按鈕在那裡？

如果你一下子就找到了，那八成是因為你前幾天才用過，或者是對這個編輯介面非常熟悉，又或者是因為我問了問題，你就特別用心的去找。

但如果你跟我一樣，很久沒用這個功能，甚至是第一次接觸到這個介面，那就要花一點時間去找按鈕。

相似的例子也發生在 hypo 的結帳頁面上。

有客人會回報填完所有資料後，才發現左上角可以登入，白白浪費了五分鐘，因為只要先登入就不用重新填一次寄送資料了；有的客人一直到結帳完畢都沒有登入，結果他的訂單會就變成匿名訂購。（由於匿名訂購無法追蹤訂單，有時會增加客服負荷。）

DO I SUCKZ?

這兩個例子當然不是說 flickr 編輯器和 hypo 結帳頁面設計不好，只是在某些特定狀況下，介面沒有辦法正確的導引使用者，造成一時錯亂。

為什麼會這樣？

因為傳統的 UI 設計概念「由上到下、由左到右」，並不是使用者第一時間會進行的動作。

使用者會從最吸引他注意力的地方開始。

flickr 編輯器畫面裡，一開始的注意力會集中在中央偏右的地方。（直接到 flickr 編輯器頁面看看的話，會比較有感覺。）

然後目光會從該區域開始向四周延伸，可能是轉移到下方的照片列，再移到左方的文字。

當這些目光掃描的動作都看不到目標時，使用者才會進入傳統的由上到下、由左到右的模式。

這時才會在左上角看到 Add Set 的按鈕（花時間把螢幕上所有內容看一次的話，你還會發現右上角也有一個 Add Set 的按鈕，其實他才是真的，左上角的只是會變動的 tip 而已）。

另一個例子：在 hypo 結帳頁面裡，使用者一開始會將注意力集中在中央的表格。

這個例子更加的極端，因為使用者進來這個頁面就是要結帳付款的，所以他們一看到中央的表格就會開始填，在結帳頁面填寫資料相當合理，可能使用者將表格填完後，都不會注意到可以從左上角登入。

Attention Map （因為講英文比較帥）

注意力轉移的過程一般可以透過 Eye Tracking 的方式來衡量，但不是每個人都有資源做這種測試。

但是只要仔細思考，人類注意力的轉移還是有跡可尋¹，可以透過簡單的方式推測出注意力移動的方向，你看…你的注意力就這樣被輕易的操控了²。

其實只要依照簡單的邏輯，就可以大致分析出一個網頁或介面中使用者可能先注意到的地方。

這些簡單的規則如下：

• 集中在大區塊的注意力會高於小區塊。
• 按鈕或表單高於內文。
• 圖片高於文字。
• 大字高於小字。
• 彩色高於單色
• 超連結高於一般文字。
• 以上會隨使用者動機不同而有不同的優先順序。

依照這些規則，可以畫出注意力的地圖，所以我把它叫做…注意力地圖… Attention Map！（因為講英文會覺得比較強）。

畫的方式也很簡單，首先將網頁截圖的透明度設定為 20% ，並在底部墊上一層黑，這樣整個畫面就會暗下來。

接下來找到網頁上最先注意到的大區塊，畫上一個半透明的方框；接著找到第二個區塊，畫上方框。

每畫上一個方框，就將之前所有的方框複製並貼到原位上；假設你在畫面中畫了 3 個大框框，那麼第一個畫的框應該要有 3 層，第二個畫的有 2 層，最後畫的只有 1 層。這只是我認為最方便加強比重的方式，你也可以用自己的方法來畫。

flickr 編輯器 Attention Map

這是我畫完的 flickr 地圖，點圖可以放大。

因為大區塊高於小區塊，圖片高於文字，所以中間的區域是最先注意到的區塊，接著是下方的區域，然後是左方的大文字區塊，接下來才是上方。

如果使用者跟我一樣想找新增 set 的按鈕，他大概會照這樣的順序掃描過一次，找不到後，再開始「由左到右、由上到下」的找。

hypo 結帳頁面 Attention Map

由於進來這個頁面的使用者都是要結帳的，中間區域密密麻麻的輸入框是會先被注意到，其次是左方的圖片，再來是最上方的登入框。

這個例子跟 flickr 不一樣，由於使用者第一個注意到的地方就是結帳步驟，所以他們不會去管左邊的圖片和登入區塊，而是直接開始填表格，造成之前提到填完才知道可以登入，或者根本沒有登入的狀況。

參考 Attention Map 改進介面

要改進 hypo 結帳頁面很簡單，只要把登入區塊放到中間的大區塊裡，然後再加個「跳過登入」的說明，就可以導引使用者自然而然的登入，避免產生之前提到匿名訂購的狀況，真的不想登入的人也一樣可以跳過。

flickr 編輯器稍微複雜一點，最直覺的作法當然是把「Add Set」的按鈕放到注意力最高的中央區塊，通常這樣的解法也沒錯，但是考慮到編輯器內在的邏輯，也許他們會想讓中間區塊單純的作為拖拉放的功能區，所有的功能鈕都在上方。

若是如此，那就不必將 Add Set 按鈕移動到下方區域，而是想辦法提高他的注意力，加上一個綠色的「+」符號就是很簡單的解決方案；如果他們不想要有圖案，那也可以讓它看起來像個按鈕。

這樣還不行的話，至少至少～、至少把這個功能靠左放，畢竟現在這個靠右放置的按鈕配置在我的螢幕上真的是很難引起注意啊。

結論

利用簡單的規則歸納出基本的注意力轉移方式，就有可能輕鬆的改善使用方式。Attention Map 是使用者最先用來掃描網頁的方式，如果在 Attention Map 裡找不到想要的內容，他們才會依照傳統的「由左到右、由上到下」的方式來看網頁。

使用者依照 Attention Map 瀏覽的階段很短，也許一兩秒內就結束了，這段期間只靠直覺，不需動腦，所以若能將重要的功能放在 Attention Map 的前幾個區塊內，使用者就會覺得用起來很輕鬆。

但是 Attention Map 並不是隨便可以用在每一個地方，同一個頁面依照不同的動機與使用方式，都應該要有不一樣的 Attention Map，如果沒有注意到基本的邏輯，畫出來的圖就沒啥屁用；另外還要注意到，有時候複雜的介面就是要讓使用者進行某種程度的學習，也許一開始用起來不怎麼順，但是一旦熟悉了該介面的操作方式，使用效率就會大幅度提高，那麼這時候 Attention Map 也就沒有那麼重要。

範例與回家作業

利用 Attention Map 重點區域的例子：flickr 編輯器、Things、Coda。

（當然他們不會知道我掰的 Attention Map 是啥東東，只不過他們都在使用者會第一注意到的區塊內說明使用方式，原理相通。）

最後請練習畫一下這個 Attention Map，答案將在下次有空寫 blog 的某天公布…。