Runkeeper- 一個可用性測試研究

本文為譯文,作者:Peter Petrovics

Runkeeper

目的

這個UI/UX案例研究的目的如下:

-分析APP在頭腦風暴階段產生的沖突;

-進行可用性測試以驗證痛點或發現新的痛點;

-設計原型來解決主要的痛點;

-不斷迭代直到可以用數據驗證所有設計;


為什么選擇 Runkeeper?

RunKeeper 是一款GPS功能的健身跟蹤app,讓忙碌的人能夠迅速制定運動目標和朋友一起完成。當我第一次開始使用app時為精心設計的用戶界面感到驚喜。作為一個健身愛好者和產品設計師,我決定看看是否有任何我可以做的以改善用戶體驗!


結果

在可用性測試過程中,我進行的UI更改取得了如下成果:

可用性測試前后數據對比

人物角色

在進行可用性測試之前,我需要了解什么樣的人都有可能使用RunKeeper。這是我的首要任務,因為我知道,對用戶基礎有一個徹底的了解將有助于我在設計過程中做的一切。

在對公司進行研究和閱讀各種用戶的推薦信后,我開始整理一些臨時人物角色。然后,我進一步完善這些人物角色,通過采訪用戶的愛好,目標,以及以前接觸的健身app:


persona

初步觀察

正如我前面提到的,我對RunKeeper的第一印象比較好。界面通過采用大量的留白以及橙色相間呈現給用戶一種干凈,一致的感覺。在信息架構方面,有兩個不同的部分:統計信息部分和底部操作欄。


留白區域

深入挖掘之后,我發現了一些我認為薄弱的地方,例如,設置一個目標和查看我的鍛煉統計是一個有挑戰的點。我還報名參加了一個培訓計劃,并希望快速滾動列表看到一些訓練成果,實際結果是并沒有給我這樣的選擇!

可用性測試

一些直覺的操作。我開始在Westfield商場進行游擊測試(就是到一些公共場所去訪問別人對你的產品的一些看法)來發現是否是真正的痛點。

這是預設的3個獨立任務:

1 夏天來了,你想在海灘上看起來很棒,創造一個目標,在2個月內減肥10磅。

2 查看你上周的5km跑步中燃燒了多少卡路里。

3 你報名參加了培訓計劃,希望能在接下來的幾周里快速地看一看你的健身計劃,找到你目前的8周培訓計劃日程。

親和圖

在可用性測試之后,目標是分析我收集的數據并找出主要的痛點。我采取了視頻的方式,每個用戶與界面交互(已經獲取他們的許可),并收集了各種觀察筆記。接下來,將我的觀察組合在一起創建一個親和圖。此圖是基于用戶正在執行的任務,不同顏色代表不同的用戶。


Affinity Map

2X2矩陣

我做的每一項任務都是基于RunKeeper和用戶的重要性粗略預測。結合親和圖,這個練習幫助我確定哪些痛點集中在什么區域,這些都是我通過研究公司和用戶訪談來驗證的假設。

和市場上其他的健身應用,RunKeeper通過提供用戶選擇購買先進的訓練計劃和更強的進展分析。因此,我認為鍛煉統計和培訓時間表是更重要的業務比為用戶創造一個目標的能力。對于用戶來說,目標設定是用戶期望從一款健身app得到的基本的和必要的功能,他們想要創造并實現這個目標。


痛點

親和圖和2x2矩陣產生了一些非常有趣的結果!以下是2個主要被挖掘出來的痛點:

1 上傳頭像的圖片icon識別性很低,用戶不容易理解;

2 不能瀏覽目前正在進行的訓練完整時間表;


結果和原型

我發現第一個痛苦點可以用以下三個任務來測試,作為參考,這里是用戶執行的任務:

上傳圖片的圖標唯一功能是選擇一張個人頭像,然而,似乎大多數人都不是很明白,在最初使用app 的5個人中,有4個人點擊了照片上傳圖標,而不知道他們試圖要完成的任務是什么。


Ooh, a big red button!

這里是優化前后的兩張圖片,以解決第一個痛點:

‘Me’ Page: Before and Afte

我的第三項任務是非常好,揭示了第二個痛點:用戶不方便瀏覽他最近報名的鍛煉計劃日程表,日程也不能刪除和預覽。當被問及查看正在訓練?的時間表有多重要時,每個用戶都清楚地表明這是必要的。顯然,添加此功能將解決他們的問題。花一點時間對比交互流程變化前后方案:

Before and After: Task Flows

下面兩張圖片是我針對訓練頁面做的UI調整。


Training Page: Before and After

如你所看到的,唯一的方法來查看完整列表的鍛煉是預覽一個具體的計劃,一旦你真的開始了這個計劃,你就不能再查看這個列表(或者預覽它了)!為了讓用戶查看他們已經注冊的計劃的上市進度,我創建了一個單獨的流程:

下面的屏幕顯示是用戶進行的現有流程,在他們還沒有報名訓練計劃之前可以提前預覽訓練課表。注意:我沒有改變任何屏幕的用戶界面。

Existing UI Flow

正如你所看到的,查看完整的訓練列表的方法是先查看一個具體的計劃。一旦你真的開始了這個計劃,你就不能再查看這個列表(或者預覽它了)!為了讓用戶查看他們已經開始的訓練進度,我創建了一個單獨的流程:

New UI Flow

在此流程中的第二個屏幕以前只能作為預覽,然后才開始計劃。我添加了第三個屏幕,你可以在列表視圖和卡片視圖里做同樣的選擇。

驗證和結論

為了可靠地驗證我的UI變化有一個積極的影響,解決了主要的用戶痛點,我需要比較一開始的可用性測試的結果和我的最后一輪測試結果。

請注意,我省略了所有其他迭代,只專注于開始到結束的變量。首先,讓我們觀察最初的游擊測試者能在20秒內完成多少個任務:


最初的可用性測試

現在讓我們來看看這些結果是如何在用戶驗證的最后一輪中改變的,新用戶在每個任務中再次被賦予20秒的時間:


最后,觀察下沒有錯誤選擇照片上傳圖標的人數:


最初的游擊測試


最后的可用性測試

我很高興地看到創建一個包含照相機圖標+添加照片的上傳功能為用戶減輕很多認知負荷。至于完整的時間計劃表,每個人都達到能夠找到他們正在尋找的目標并繼續完成這個功能。


未來計劃

我收到了一些關于用戶培訓計劃的建議,比如盡可能通過在日歷頁面內置一系列的可折疊下拉菜單來展示。這將允許用戶查找所有安排的培訓課程,并以簡潔、互動的方式呈現信息。這是一個有趣的解決方案,我期待著進一步調查!

原文地址:https://uxdesign.cc/runkeeper-a-usability-case-study-2749e2403ef2

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,237評論 25 708
  • 可用性工程閱讀筆記 Nielsen 看這本書和寫下這些筆記總共用了快兩個星期的時間,這段時間事情真的有點多。。 從...
    Witty_28閱讀 2,024評論 1 12
  • 可用性測試是我認為最有效并且有說服力的一種調研方法,其實在工作中很少會有機會做完整的可用性測試,這可能跟你公司的重...
    Chxs閱讀 2,269評論 0 3
  • 行百里者半九十,我好像已經給自己的日精進定好終點了。這幾天寫的艱難,每到晚上,才思枯竭。 罪魁禍首,受人打擾,無法...
    小黃丫閱讀 217評論 0 1
  • “在嗎?” 我看到手機屏突然亮了一下,停下正在敲打鍵盤的手,拿過手機看到她發來的信息。她很少用這樣的開始語找我,一...
    默_言閱讀 256評論 0 4