Don’t Make Me Think 書摘

06/21 | 使用者介面留言(0)

s4357645

第一次讀到這本關於使用者體驗的經典書籍大概是四年前的事了,當時看完後不知道借給了那位朋友,就再也沒有回來過了,日前逛三民書局的簡體中文館發現了新版的它,除了原有的內容還更新了例子,甚至還加上行動裝置體驗的章節,二話不說立刻敗入,為了以防那天又被人借走回不來,趕緊寫下文章備份。

 

本書分為四個大方向:

一、基本原則

二、網站導航系統的重要性

三、簡易使用性測試

四、行動體驗

以下就各章節做重點摘錄。

一、基本原則

 

「Don’t make me think」不要設計出會讓使用者感到困惑或猶豫不曉得要點那裡的介面。網站分類要明確,選單出現於固定位置、使用統一名稱、使用常見名稱、按鈕要像按扭、系統的回饋要符合使用者所預期的。

 

使用者在網站上的每一次錯誤點擊,雖然不致於造成立即性的客戶流失,但使用者體驗是會堆疊的,只有做好每一個細節,使用者才能在極短的時間感受到企業要傳達的東西,這對於品牌的建立是關鍵。

 

使用者體驗檢查清單:

  • 我在什麼位置
  • 我從那裡開始好
  • 他們把XX放在什麼地方了
  • 這個頁面上最重要的是什麼
  • 為什麼他們把這個項目叫做這個
  • 這是廣告還是網站的內容

 

使用者看網頁是用掃描的,眼裡只會出現他們感興趣與最想找的關鍵字,他們不會花時間去選擇最正確的答案,而是第一眼看到有相關性的就會點擊,所以保留瀏覽器上的返回按鈕是非常重要的。

 

使用者不在乎運作原理,只要能滿足他們的需求,就會一直使用它。因此介面要符合使用者的瀏覽習慣來製作,以掃描式閱讀來設計,而非以雜誌或書籍閱讀的方式來設計。

 

參考做法:

(一)盡量利用慣例

任何東西要讓人能瞬間理解,遵循習慣和慣例是一種好方法,譬如 LOGO 出現在左上角、主選單在網頁的上方或左邊,視覺元素的外觀、播放影片的 icon、搜尋、社群分享。如果想創新慣例,要確保使用者容易理解以及一併提供他們熟悉的慣例。

 

(二)建立視覺上的層次

越重要的部份越突出、邏輯相關的內容在視覺上也要相關、邏輯上屬於子分類的項目在視覺上可以用包圍的方式。

 

(三)把頁面劃分成明確定義的區域

可以讓使用者說出:這是今日頭條的連結、這是這個公司銷售的產品、他們正在向我推銷東西、這是連到其它頁面的選單。Banner Blindness :為了可以快速找到他們想要的,使用者發展出一種會忽略看起來像是廣告的技能,所以重要的內容不要做得像廣告,而廣告可以做成像內容。

 

(四)明顯標示可以點擊的地方

統一可以點擊的視覺元素,譬如底線、顏色,如果底線代表的是連結,那在內容強調文字時就不要使用底線。

 

(五)將可能會干擾掃描的元素最小化

如果所有東西都要強調,就等於沒有東西在強調。

 

(六)幫內容設計清楚易掃描的格式

充分使用標題、保持每個段落的簡潔、使用符號列表、強調關鍵字詞。

 

使用者的點擊次數常規法則:三次不用思考、結果正確的點擊,所花費的心力相當於一次需要思考的點擊,所以重點不是在追求幾次點擊內讓使用者找到想要的內容,而是每一次的點擊有沒有更接近他們想要的。

 

省去多餘的歡迎詞、說明文字,只在有需要的時候以最精簡的方式呈現。

 

二、網站導航系統的重要性

二、網站導航系統的重要性

如果在網站上找不到方向,使用者就會離開你的網站。使用者進入網站後通常是為了特定目標,他們可能會使用搜尋功能或是選單進行瀏覽。

 

在網站上瀏覽感覺不到大小、感覺不到方向、感覺不到位置,所以瀏覽器的書籤以及返回上一頁是非常重要的功能。網站選單可以告訴使用者我們這裡有什麼內容、如何開始使用網站、表達出網站管裡者是否了解自己的網站,進而影響到使用者的信心。

 

全站導覽要出現在每一頁,提供使用者最可靠的方向依尋。主要包含網站 LOGO、內頁連結、常用工具連結、站內搜索。

 

大部份網站很少對內頁中的內頁的選單給予足夠的重視,因為開發時是由上往下進行頁面規劃,但使用者對於內頁選單的依賴程度與全站導覽是同等重要。

 

每個頁面都需要一個名稱,並且出現在合適且相同的位置,設計上要顯眼,進入該頁面的按鈕文字必須與頁面名稱相同,才不會造成使用者誤會。

 

選單要能標示出使用者的現在位置,透過視覺上的明顯差異化來呈現。

 

麵包屑亦能提供使用者了解所在位置,通常置於頁面最上方,使用大於符號進行間隔,強調最後一個項目來標示現在位置,並且不用增加連結。

 

網站選單測試清單:

  • 這是什麼網站(網站 LOGO)
  • 我在那個內容裡面?(網頁名稱)
  • 這個網站主要的內容有那些?(網站選單)
  • 在這個頁面中我還可以去那?(內頁選單)
  • 我在這個網站中的那裡?(所在位置)
  • 站內搜尋在那?

 

網站的首頁要能夠快速回答使用者五個問題:

(一)這是什麼網站?

(二)網站有些什麼內容?

(三)我能在這邊得到什麼?

(四)為什麼我現在這一頁?

(五)從那邊開始?

 

網站首頁要能正確傳達給使用者網站想表達的內容,不然使用者會以模糊錯誤的認知來繼續使用這個網站,進而發生更多錯誤的理解。

 

由於社群與搜尋引擎的發達,使用者入站大多已不是首頁,因此上述四個問題也要盡可能在內頁中傳達清楚,但當使用者對於這網站的內容有興趣時,他們會返回首頁去看全站的內容,因此首頁的重要性還是不容忽視。

 

網站如何傳達企業整體形象?

(一)網站 slogan

(二)主 Banner 放網站目標與內容介紹

(三)更多服務介紹的內容

(四)不要把老闆的精神訓話當成網站 slogan,因為這是給員工看的,而非你的使用者或客戶

(五)最直接的方法,進行使用者測試檢視是否有正確傳達

 

三、簡易使用性測試

三、簡易使用性測試

 

如何解決在會議上每個人對於網站內容、操作方式的不同看法?很簡單,拉個局外人來試試就好。為避免陷入無止盡的主觀意識爭論,我們的問題不該是「這邊是否該用下拉選單」,而是問:「在這頁面中,考量到使用者目的,使用下拉選單或是顯示的文字是否能帶給他們良好的體驗並導引到正確的結果?」

 

使用性測試的結果,往往不是證明開發小組中誰的意見對或錯,而是發現根本性的網站問題,就像是想問人到底要穿紅色的T恤還是白色的襯衫好,卻沒發現褲子根本還沒穿上。

 

焦點小組與使用性測試最大的不同點在於前者僅需要受測者說,而後者在於觀察受測者做了什麼。簡易使用性測試,目的是以最低的成本,來檢測網站開發過程中是否有依循正確的方向走下去。

 

簡易使用性測試 Q&A:

(一)應該多久進行一次測試?

固定每個月上午為最佳測試時間,理由是開發人員上午比較有空(?),以固定每月而非以開發時程的原因在於開發計劃常常會偏離或是改規格,如果用「第一版上線後」才進行使用性測試,很容易被額外工作階段所延誤,固定時間也能養成團隊開發人員參與的習慣。

 

(二)應該測試多少用戶?

理想為三個,因為測試的目的不是在證明什麼,需要證明什麼才會要足夠的資料進行佐證,使用性測試的目的是發現問題,即使只測一位也好過不找任何人測試。

 

(三)如何選擇測試者?

理想上,能找到我們的目標使用族群進行測試再恰當不過,但如果找非該網站領域的人也會有不錯的收獲,因為最大的使用性問題往往不是在於專業知識,而是把每位使用者當成初學者或是非領域的相關人員,讓不懂專業知識的人也能清楚明白,這對於有專業知識的人也會是非常友善的介面。

 

(四)怎麼找到測試者?

透過社群、論壇、網站會員、隔璧鄰居、親朋好友,提供時薪、車馬費等等回饋這些願意付出時間提供意見給我們的朋友,或是透過線上服務進行使用性測試—>http://www.usertesting.com/

 

(五)在那裡測試?

受測者可以在任何有電腦的地方,只要他操作電腦的畫面跟聲音可以傳到開發團隊的面前即可。實務上可以用像 Teamviewer 這樣的遠端桌面軟體進行觀察。

 

(六)應該由誰來引導測試?

使用者測試需要一位主持人來引導開發團隊想要測試的功能與項目,最好是具有同理心、願意傾聽、看到別人犯錯誤時不會想要糾正他的人。主持人的目的是要協助受測者進行測試項目,並能鼓勵受測者勇於嘗試點擊,以及讓受測者說出目前的心理狀態。

 

(七)誰該進行觀察?

所有與該專案相關的人員,從第一線的執行者到上層的決策人員,有預算的話買些吃吃喝喝在觀察的現場中,觀察室需要一面能即時看到受測者操作畫面的大螢幕,以及可以聽到受測現場聲音的喇叭,在測試期間,請觀察人員根據看他們所看到聽到的做筆記,並於測試結束後提出。

 

(八)何時該導入使用性測試?

越早越好,甚至還沒有網站的時候,就能針對同類型網站或競品網站進行測試,如果是需要網站改版,更可以針對現行網站進行測試,這樣就能知道那些功能需要保留或移除。在網站製作階段,從頁面草稿、線框圖、網站原型、mockup 等等,都能做使用者測試。

 

(九)如何制定測試任務?

很簡單,看我們想要測試什麼。像是加入會員的流程、購買商品的步驟、如何找到網站中某個特定的資訊等等。在設計任務的同時,也可以預留一些空間讓受測者自由發揮,像是「找一本你想買的書」會比「找一本兩百塊以下的書」來得更能觀察到受測者的使用行為。

 

(十)使用性測試的 SOP

  1. 見面寒喧喇低賽。
  2. 打開網站讓受測者隨意逛逛並鼓勵他說出他看到的內容
  3. 開始任務,主持人告知任務內容,並請受測者完成。全程主持人不可詢問意見或引導性的提問,受測者卡關時不要協助他們,而是鼓勵他們說出卡關的點,主持人最主要的工作是發掘出任何使用上的問題給觀察室中的人了解。
  4. 完成所有受測任務,主持人可向受測者提問測試中所發生的問題,以及提出事前開發人員委託詢問的問題。
  5. 關門送客。

 

(十一)使用性測試中的典型問題:

  1. 受測者不明白這個內容或功能是什麼意思,或是完全理解錯誤。
  2. 受測者找不到他們常用的字眼,這代表開發人員所用的字彙與受測者不同。
  3. 明明就在顯眼的地方但受測者就是沒看到。

 

(十二)該如何決定修復那些問題?

  1. 收集問題列表,寫在白版上,紀錄相同的問題出現過幾次。
  2. 挑出10個最嚴重問題,請大家表決那些問題最重要、最需要被優先解決,或是根據出現次數進行優先修改順序。
  3. 問題評級,針對每項問題打分數,一到十分決定嚴重程度。
  4. 建立修復清單,針對問題該如何修復、所需時間、負責人進行彙整。可針對快速解決的問題再列一份清單,並且盡量在不添加現有內容或功能的原則下來解決使用性的問題。另外不要太看重受測者所提出的新功能,因為這大多代表著他們所面臨的問題沒有被妥善解決,如果他們真的提出一個很棒的解決方案,身為專業開發人員的我們一定會知道。

 

(十三)那些理由讓人不做使用者測試?

  1. 沒時間—>有測試可以避免冤枉路以及回過頭來花更多時間打掉重練。
  2. 沒有錢—>清潔阿姨都可以抓來做使用者測試了,測試的硬體成本一般公司的會議室、咖啡廳都能運用,不用再額外花錢。
  3. 不知該何做—>根據本書的方法多做幾次就能抓到技巧,重點是否有心從使用者身上學習還是只是把使用者體驗掛在嘴邊
  4. 沒有實驗室—>只要有兩臺可以上網的電腦就行。
  5. 不知如何解讀結果—>最重要的問題誰都看得出來,如果沒人看出來那網站還是收收關了。

 

四、行動體驗

c9e42240

 

行動體驗的設計原則:

(一)允許縮放:不管是否有提供行動版網頁,能讓使用者自由縮放頁面大小非常重要,縱使我們覺得已將字體放到不能再大,還是會有人覺得字太小

(二)導引到正確的網址:如果網頁的電腦版與手機版是分開製作,務必確認內頁的連結可以導引到正確的版本,而非回到首頁。

(三)提供完整網站的連結:不管行動內容設計得多完整、多豐富,使用者的經驗可能還停留在電腦版,他們會用電腦版的記憶來尋找他們想要的功能,所以務必提供版本切換的功能,慣例是在頁面底部。

(四)不要隱藏該有的介面線索:按鈕要看起來可以點,輸入框看起來可以輸入。

(五)介面需要容易學習並且可記憶性。

 

提高網站使用好感度的方式:

(一)知道使用者想在我們的網站上做什麼,並讓他們不費吹灰之力達成他們想要的。

(二)告訴使用者他想知道的東西。

(三)減少達成目標的步驟。

(四)知道使用者可能那邊會碰到問題,並且提供解答。

 

個人心得

在專案的過程中,總是會聽見業主許多對於網站設計的建議與想法,他們會根據自己的使用習慣來判斷公司網站也要以自己熟悉的方式來設計,這事實上也沒有對或錯,因為當網站完成後,最頻繁的訪問者可能就是老闆自己。

 

會關心到使用者體驗,就是當他發現網站沒有流量、沒有達成預期目標,才會開始在意是不是網站那裡沒做好,那裡沒有符合使用者的期待,而這一切都是一種學習的過程。衷心希望有越來越多的企業主能夠盡早體悟到使用者體驗跟業蹟是正相關,微不足道的小細節累積起來都能帶給使用者截然不同的感受,真正去了解他們並解決他們的問題,才是能讓公司長久經營之道。

 

回覆文章