分類彙整:UI

易用性測試流程介紹Usability Testing step by step

易用性測試 :專注在觀察使用者行為以及尋找如何改善產品的證據

易用性測試一般而言遵循這格式:

易用性測試流程(4W1H)

    1. 設計任務情境(What)
    2. 招募有代表性使用者(Who)
    3. 挑選地點(Where)
    4. 執行測試 (How)
    5. 分析測試結果 (Which)

 

  1. 設計任務情境(What)

設計的任務要明確具體來驗證目的,任務順序要符合使用者操作習慣,測試場景要情境化,並且要寫下來當成額外資訊來完成這任務。

舉例來說,測試化妝品網站時,你可以設計這樣的任務。

任務:

    • 你覺得這網站如何?哪部分讓你印象深刻?你認為這網站是在幹嘛的?
    • 您若在首頁被化妝品產品吸引,您會如何搜尋產品介紹呢?
    • 你若想購買這化妝品,你會如何購買?

2. 招募有代表性使用者

取決您的時間和預算,如果資源允許請招募真實使用者,時間不夠或只想做快速迭代 ,就邀請朋友、同事吧

建議有代表性使用者不要超過5位,盡量執行多次小型測試

為何只需測試五位用戶 by nngroup

3.挑選地點

在何處執行測試影響到成效,關鍵在讓情境驅動任務,舉例來說,如果你想測試生產力應用工具,不妨在類似辦公室環境中執行任務。

4 . 執行測試

    • 記錄工具:盡量選能收集越多資料類型的器材(用戶臉部、觸碰/滑鼠點擊處、眼部追蹤等)
    • 測試前介紹(約三分鐘):設計師需先告知受試者我們是誰、期待收到何種回饋,以及我們是在測試產品而不是測試你。
    • 背景:詢問受試者職業以及多久使用相似產品
    • 任務執行(約20分)
    • 受試者回饋(約3分)

提醒:

    • 假使受試者過程中遇到問題,不要給他們任何協助,問問他們遇到問題時,會產生何種行動
    • 不要帶領受試者操作產品

5. 測試結果分析

還沒忘掉細節前,先把器材無法錄製遇到的問題快速記錄下來,易用性問題嚴重性是由許多因素組合而成:

    • 頻率:問題多久產生一次?
    • 商業優先:這問題對我們商業目標重要嗎?
    • 使用者感覺:這問題使用者容易克服嗎?

使用這些指標分配最多資源在最重要問題上。

史基農生技 案例裡,使用便利貼做用戶問題整理,每種便利貼顏色代表一位受試者回饋。
史基農生技 案例裡,我們把用戶回饋分成X軸、Y軸。
X軸代表對用戶的重要性,Y軸代表對商業目標影響力

結論:
易用性測試是簡單易執行技術,你甚至可在產品開發前期使用像是紙原型低真草圖做測試,它能幫助我們在低成本下重新塑造產品。


相關閱讀Related reading

如何設計好網站:Dont Make Me Think by Steve Krug 

Usability Test on Product Hunt for iPhone by Eric Lee

設計的方法:100個分析難題,跟成功商品取經,讓設計更棒、更好的有效方法 by Bruce Hanington and Bella Martin

破茧成蝶:用户体验设计师的成长之路 by 刘津 and 李月

Information Architecture 100:100個網站規劃必備的知識 by Atsushi HASEGAWA

Tips of Usability Testing step by step

Usability Testing focuses on observing users’ behavior and seeks evidence about how to improve your product.

Usability Testing typically follow this format:

Process of Usability Testing(4W1H)

  1. Design tasks and scenarios (What)
  2. Recruit your representative user (Who)
  3. Choose a place (Where)
  4. Execute your test (How)
  5. Analysis of your test result (Which)

  1. Design tasks and scenarios(What)

Your tasks should be specific and concrete enough to verify the purpose of your work and the order of them should fit users’ operating habits. Scenarios contextualize the task, and should be written to provide an extra information to complete this task.

For example, you could design such tasks when testing a cosmetic website.

Task :

  • What do you think about this website? Which part impress you? What can you do in this website?
  • Imagine you are attracted by this cosmetic product in homepage, what would you do to search this product in detail ?
  • Imagine you want to buy this product ,what would you do to order a cosmetic product?

2. Recruit your representative user

It depends on your time and cost. Recruit the real target user if your resource is acceptable. Invite your friends or coworkers if your time is limited or you just want to do a fast iteration.

The suggested number of your representative users should be no more than 5 users. And you should run as many small tests as possible.

Why You Only Need to Test with 5 Users by nngroup

3. Choose a place

Where you run your test affects how you perform your work. The point is to let context drives the work. For example, if you want to test an productivity application, you might as well test it in an office-like environment.

4 . Execute your test

  • Recording tools: Choose a tool to catch as much data(User face, touch/click points, eye-tracking etc..) as you could.
  • Introduction(3 min): Designers should tell your user who we are, what sort of feedback we’re looking to receive and the purpose of this test is we’re testing the product not you before starting.
  • Background : Ask your user about her/his job description and how usually would your user use this similar product.
  • Task (20 min):
  • User feedback (3 min):

Remind :

  • Don’t give any help if they encounter some difficulties, just ask them what would they do if they encounter it.
  • Don’t lead participants.

5. Analysis of your test result(Which)

Take a quick note of some issues that was not recorded by tools before you forgot the details.

The severity of a usability problem is a combination of many factors including:

  • Frequency : How often does an issue occur ?
  • Business priority : Is this issue important to our marketing goal?
  • User feeling:Is this issue easy for users to overcome?

Use these metrics to allocate the most resources to fix the most important problems.

User issue arrangement using sticky notes in SKIN FARMER’s case.
Each colour of sticky notes represents one user.
We mapped the users’ feedback into x,y-plane in SKIN FARMER’s case. The x-axis represents its importance to user. The y-axis represents its importance to marketing impact.

Final:

Usability testing is an easy-to-perform technique to redefine your UX. You could run this test even in earlier stage using low-fi sketch like paper prototype. It helps us reshape what the product would be at cheap cost.


Related reading

Don’t make me think by Steve Krug

Usability Test on Product Hunt for iPhone by Eric Lee

Universal Methods of Design by Bruce Hanington and Bella Martin

破茧成蝶:用户体验设计师的成长之路 by 刘津 and 李月

IA100 — Information Architecture for User Experience Design by Atsushi HASEGAWA

還是讀原文比較好

設計大舌頭翻譯 UXPin 電子書作者Jerry Cao的一篇文章6 Web Design Trends You Must Know for 2015 & 2016開發網站不可不知:2015~16年的 網頁設計趨勢

不曉得是不是譯者漏掉或是知道原文有瑕疵,所以有一句話沒有翻譯出來:

Placing all your important elements above the fold is now a well-known myth(把所有重要元素放在您首頁螢幕上方現今是個眾所皆知的神話), 結果這句話被外國鄉民在底下留言打臉,如果我們只看翻譯就看不到這麼精彩的對話了。

結論:
問題不在「喚起行動」(Call To Action)按鈕是否明顯可視,關鍵在當用戶開始信服想採取行動的當下是否您的「喚起行動」按鈕明顯意見,也就是

對「喚起行動」按鈕而言時間點比位置更重要(WHEN is more important than WHERE for CTA’s)。

圖一:右方頁面長度是控制組的20倍,但是轉換量多30%

https://twitter.com/lukew/status/541986443598393345
圖二:
較少內容在首頁螢幕上方或許會激勵更多頁面下方的探索。