Muse Chang 总结
本文介绍了 Tree Testing 的方法,用于优化网站/App 的导航列和功能菜单,以提高用户体验,并通过案例分析了如何使用这一方法来改善设计。
摘要
文章首先指出,尽管设计师在规划用户旅程时会设计理想路径,但用户可能会在寻找入口和完成旅程时遇到困难,这很可能是由于网站/App 的导航或信息架构不符合用户的期望。为了解决这个问题,设计师可以通过 Tree Testing 来验证和优化网页/App 的导航或信息架构。接着,文章通过两个案例展示了实际问题:Instagram 的菜单设计和中华邮政的导航设计,分别指出了它们在用户体验上的不合理之处。
文章继续介绍了如何进行 Tree Testing,包括所需的样本数、使用的线上工具(如 Optimal Workshop 的 Treejack),以及研究流程。通过一个关于优化 Instagram 功能菜单的案例,文章详细说明了从列出问题和假设、设计测试问题、前测、招募、回收样本和檢視、数据分析,到研究建档和设计优化的全过程。最后,文章提供了一些其他相关文章的链接,供读者进一步学习。
观点
用户体验的重要性 :网站/App 的设计应该符合用户的期望和认知,以便用户能够快速有效地找到所需信息。
Tree Testing 的作用 :Tree Testing 是一种验证和优化网页/App 导航和信息架构的有效方法,可以帮助设计师发现并解决用户体验问题。
案例分析 :通过对 Instagram 和中华邮政的导航设计的分析,揭示了用户体验设计中存在的问题,并提出了改进的可能性。
研究流程 :详细描述了进行 Tree Testing 的步骤,包括样本数的选择、工具的使用、测试问题的设计、前测、招募、数据分析和设计优化。
数据分析的重要性 :强调了在 Tree Testing 中对数据进行分析的重要性,以及如何解读和应用这些数据来改进设计。
设计优化 :提出了在设计优化时应考虑不同用户的信息组织能力和分类逻辑,以及如何平衡不同的用户需求和设计理念。
[量化研究] Tree testing:不再讓使用者迷失,優化導航列與功能選單的最佳工具 當我們在規劃使用者旅程時,都會幫使用者設計好一個理想的路徑。然而實際上使用者可能不如我們預期中那麼順利地找到入口並走完整趟旅程,甚至有可能在旅程中迷失或遇到挫折。其中的原因,很有可能是網頁/App的導航、或是資訊架構不符合使用者的經驗與期待。當設計師遇到這樣的問題時,不妨試試用 Tree-testing 來驗證網頁/App的導航或資訊架構是否需要優化!
本篇文章會先以使用者案例帶大家從實際案例發現問題,再介 Tree-testing 的線上工具,並透過案例來說明如何使用 Tree-testing。
我們的設計,使用者真的覺得合理嗎? 一個網頁/App 可能承載著成千上百萬的訊息,而導航列 (Navigation) 的存在則是讓使用者可以快速且有效率的瀏覽學習到網站的架構,以及推測網站有哪些潛在的資源可以搜尋;一個服務也可能提供多種功能,以及上百種功能及偏好設定,功能選單(Menu, Function Menu) 就是一個透過分群分類後的列表,讓使用者可以根據相似主題搜尋到的功能設定入口。
然而,這個看似只是分群分類很好設計的任務,真的那麼好設計嗎?我們規劃的導航列 (Navigation) 跟功能選單(Menu, Function Menu),真的可以協助使用者找到相對應的資訊嗎?
案例 (1) Instagram 選單:被收錄在「典藏」裡的限時動態?
你曾在 Instagram 裡嘗試找過你po過的限時動態嗎?實際上找歷史限時動態有兩個路徑(如下右圖 ):
a. 選單 -> 你的動態 -> 已典藏 -> 限時動態典藏
b. 選單 -> 典藏 -> 限時動態典藏
但你是否跟我一樣(如上左圖 ),每次想在 Istagram 回顧動態的時候總是會很直覺的到功能選單 (Menu) 裡面按點「你的動態」(your activity),卻發現載入的內容不是歷史動態,而是下一層選單?而必須要再到下一層選單按點「典藏」才可以看到歷史動態。
身為使用者,對於 a. 路徑,除了覺得「你的動態」這個翻譯容易誤導我之外,也不知道「已典藏」跟「典藏」明明是同一個頁面為什麼要有不同的標題?而對於 b. 路徑,明明應該是最理想的路徑,但「典藏」卻完全讓我聯想不到「限時動態」而下意識跳過不選擇按點。所以實際上我的路徑會變成:選單 -> 你的動態 ->(發現走錯)->選單 -> 典藏 -> 限時動態典藏, 這樣的輪迴發生了好幾次,甚至最後我發現這是個我學習不起來的路徑,如此來來回回浪費掉不少的時間。
案例 (2)中華郵政導航:「公告欄」跟「最新消息」不一樣嗎?
政府機關最喜歡在導航列裡喪屍般地加入新項目,這是眾所皆知的事實。放眼過去,光是在訊息中心這一個選單裡,使用者可能會冒出許多問號?
*最新消息會放在公告欄裡嗎,兩者一樣嗎?
*郵政志工招募為什麼不是在「郵局招考」裡?
*優良人員專區為什麼不是在「關於我們」裡?
或許中華郵政有營運或既有架構上的考量,產生分類偏誤而做出這些分類。但這些資訊架構(Information Architect)卻可能不貼近大眾的認知與預期,大眾無法知道中華郵政的脈絡,因此無法對應找到想要的資訊。
其實,不管再多成熟的使用者體驗介面,隨著資訊跟功能的增加、服務架構的改變,都會遇到導航列跟功能選單要重新優化的重要任務。平心而論,設計網頁的資訊架構其實不如我們想像中簡單!
哪裡不合理,要怎麼改善? 在初次設計或加新項目到導航列的時候,可以透過 Card-sorting 搜集多數使用者對網頁資訊架構的想像,而產出對應的導航列;當導航列要進行迭代設計,因為資訊太多必須重新整理架構時,可以透過 Tree-testing 檢視特定定幾個項目是否合理被分配在導航列的不同分類中。
📷 舉例
電商網站中的「退貨說明頁」到底是該被放置在「付款與帳務」子分頁中,還是「訂單與物流」呢? 📚 相關文章 Which comes first: card sorting or tree testing?
Tree-testing 的介紹與案例分析
A. 所需樣本數: 15-20 位受測者
以量化研究來說,理想上能拿到越多的使用者數據越好,但在時間資源有限的狀況下,我認為介於 Card-sorting 與量化研究最小值 (aiming at statistics, not insights) 的低標都還是可以被接受。(📖 參考 How Many Test Users in a Usability Study? )
B. 線上工具: Optimal Workshop 的 Treejack (測驗支援繁中!)
C. 研究流程: 列出疑問與假設 -> 設計測驗題目 -> 前測 -> 招募 -> 回收樣本&檢視樣本 -> 數據分析 -> 研究建檔與設計優化
讓我們以 Instagram 的功能選單優化為例 將下來我們將以一個一個步驟說明目標,以及分享筆者心得。(流程:列出疑問與假設 -> 設計測驗題目 -> 前測 -> 招募 -> 回收樣本&檢視樣本 -> 數據分析 -> 研究建檔與設計優化)
⚠️案例說明
本測驗與分析並非 Instagram 官方設計專案,此測驗為筆者為撰本寫篇文章所創建的範例,非正式專案;另外,因筆者使用 Treejack 試用版,所以只能回收 10 位受測者回饋,因此數據與分析僅供撰文舉例使用,無法提供具可信度的設計研究回饋。 步驟1、列出現有架構並提出議題 (新增項目、疑問或假設) 先把整個 Instagram 功能選單架構放到測驗上後,可以把要待測試項目(無論是將要新增加的項目,或設計師也可以提出心中最納悶、覺得無法分類、使用者有可能會搞錯的項目)列出來,並納入測驗的題目中。
📷 舉例
Task 1 :因應可以透過商家購買商品,本次改版想加入「新增付款方式」功能,放在功能選單的「訂單與付款 -> 付款設定 -> 新增付款方式 」是否符合使用者期待? Task 2 :「過往限時動態」被收錄在「典藏」裡、功能選單的第二層,真的符合使用者的期待嗎?步驟2、針對議題設計測驗題目 設計題目有以下的撇步供大家參考。
A、設計非引導式測驗題目
在做使用者研究時最忌諱用到引導式問答法,例如:針對議題 1,如果設計師/研究員定測試題目為:請去「設定」你的扣款方式,將可能會引導使用者潛意識選擇選單中的「設定」而非「訂單與付款」,所以要怎麼做才比較好呢?
👉 心得:出題時以描述情境(General)取代直述(Specific)功能名稱。
以「最近在 IG 的某個帳號上看到想買的東西,當你想要直接下單時,收到提示說你必須先去綁定其中一種付款方式才能下單,這時候你會去哪裡完成這項任務呢?」取代「請問你會如何設定你的付款方式呢?」 B、設計篩選測驗題
不管作量化或質化研究,都有很高的機率會遇到假使用者,也就是說來做測驗或訪談的這群人,很有可能根本沒有耐心所以亂填答或者甚至不是你要找的有經驗使用者,如果把這些數據納入分析,會影響到測試的準確性。
👉 心得:安插一題基本題,答錯者可以考慮從數據庫裡刪掉。
請問想設定「通知」,該去「設定」裡的哪個項目操作呢? 步驟3、前測 發出任何測驗、問卷前,一定不可審略的步驟是請身旁的同事幫忙做過一次,看看有沒有題目出不好或詞不達意的地方,也可以詢問測驗的難易度,若是連開發人員的覺得難填答,那這樣的測驗可能不適合在使用者身上測試。
👉 心得:請身旁的同事幫忙做過一次並給回饋。
步驟4、招募 測驗設計完後就可以拿到測驗連結,就可以把連結放到想測試的網站,或透過轉發給有意願測驗的人。但確保可以讓正確的客群做到測試是很重要的關鍵,因為有很多點開測驗的人,可能只是在逛網站的粉絲、單純好奇或是為了獎金而點開測驗作答。
👉 心得:搭配招募問卷(ex.Google表單),透過問卷題目篩選掉不符合的使用者,留下目標使用者才可以拿到測驗連結。
步驟5、回收測驗結果&檢視樣本 在 Treejack 裡,沒有完成任務的受測者會直接被丟到 「排除清單」裡。除了這些沒完成任務的受測者外,建議把有完成任務的受測者全部的回覆瀏覽一遍,並把不合理的受測者拿出來跟團隊討論,是否應該排除這樣的數據,例如篩選題答錯、幾乎全部答錯(答案不合理)的受測者。處理這樣的數據時要非常謹慎,雖然我們無法知道為什麼會有些誇張的受測者存在(筆者之遇過所有題目都答錯,並且全部答案都是誇張錯的回覆),但這樣的變異值可能會影響到研究結果。
👉 心得:仔細分析受測者的填答行為後,把篩選題答錯以及表現異常的受測者從清單中刪掉,並記得把被刪除的受測者紀錄在研究報稿裡,說明為什麼他們會被刪掉以便後續追蹤。
步驟6、數據分析 在這一步終於可以踏入 Treejack 提供的各種指標來分析你的受測者回饋了。 Treejack 貼心的提供多種的視覺化分析輔助圖表,以及數據:
例如,透過 Task 2 的圖表,我們可以看到 21% 無法從功能選單裡找到「回顧限時動態」的功能;且 44% 的人來回遊走在功能選單裡無法靠直覺確定正確的位置。 換而言之,在 Task 2 裡,只有 44% (Direct success)的人是完全可以靠直覺找到對的功能的。
從「View the pietree」裡,可以看到確實有使用者第一直覺不認為回顧限時動態是在「典藏」裡,有其他使用者(約為21%)跑到「我的珍藏」與「你的動態」裡面尋找回顧限時動態的功能。由此可見這個功能在選單裡的位置、或是命名的策略還有待改善。
Treejack 也提供了各種數據的定義及運算方法,了解定義有助於設計師更了解怎麼解讀數據。設計師也可以自己提出自己的指標,也可以透過交叉比對不同任務來分析使用者行為。
👉 心得:透過任務成功率(Success)看是不是使用者都可以成功找到此功能,但成功率高不一定代表沒有問題;可以透過間接成功率(Directness)看有沒有什麼其他潛在因素誤導使用者;再進一步透過路徑(View the pietree)看是什麼其他項目誤導使用者走錯路徑。
步驟7、研究建檔與設計優化 在最後,也是最重要的建檔及設計優化步驟,要特別放在心中的態度是:
「無論是設計師先前的設計,或是受測者的測試結果,都沒絕對的對與錯,在做 Tress-testing 的分析時,切勿陷入二分法的思維。因為每個人的資訊組織能力受成長背景與學習過的知識影響,每個人分類的邏輯可能都會有些為差異。」
如果研究解果發現存在著兩個以上的 Mindset,在設計優化時盡量找到符合不同 Mindset 的解法。也可以透過競品研究參考相同產業在處理類似議題的解法。
希望此次的量化研究工具分享對於設計師在優化體驗的過程中有幫助,如果喜歡我的文章記得幫我「拍手」加「分享」讓我知道文章對你有幫助。接下來我會繼續撰寫與「量化研究」相關的文章喔。✨
關於這次的主題你可以參考的其他文章 📚 Tree testing: validating the spine of design
📚 Tree Testing: Fast, Iterative Evaluation of Menu Labels and Categories
📚 How to benchmark your information architecture
📚 10 information architecture resources
📚 Tree Testing Part 2: Interpreting the Results
📚 Quantitative User Research: Study Guide