UX Audit — 幫產品做個健康檢查吧！以 VoiceTube HERO 為例
好，還要更好！如何運用視覺語言一致性與強化獎勵機制讓學英文的體驗更加流暢
在美國工作三年以來，所需要的英文能力絕對不只課本上教的 “How are you?” “I’m fine. Thank you. And you?”（題外話：如果我回答同事 ”I’m fine” 的話大家會覺得我今天心情很差，通常要回答 “Good!” 或 “Great!” 才表示我今天心情正常，美國人很浮誇的🤷♀️）
但也不會說到像考托福、多益或是 GRE 那種很艱澀的專業領域用字，像是岩層礦物的名稱，或是抽象的哲學字眼。
如我在 UX設計師的美國新創工作心得 所述，在公司當唯一一個非英文母語人士，最困難的其實是跟上他們的文化脈絡。而這通常要透過聊當下熱門的話題，或是分享一些輕鬆的日常知識，才能讓自己融入同事的閒聊圈以增進感情。
看影片學英文
VoiceTube HERO 課程跟一般背單字、寫作文的傳統學習方式不同，他是利用大量的影音進行教學，更符合現代每天花 2.5 小時看 Youtube 的年輕人資訊吸收方式。
HERO 提供的影片很道地，像我的第一堂課是美國知名影音頻道 Vox 的影片，而且內容是我最有興趣的行為科學與遊戲化，跟 UX 設計不謀而合，太喜歡了，聽著聽著都差點忘記自己要截圖😂
聽說能力再強化
另外，聽說能力是非母語人士普遍的弱項，但是在國外工作的日常卻是以聽說為主，更不用提身為設計師需要跟客戶開會、跟其他職能溝通，沒有足夠的英聽英講能力很難說服別人。
HERO 提供的學習方式正是為了解決這個問題，根據影子跟讀法（shadowing）等學習理論，利用互動式口說練習提供系統性的學習方法，讓我們在家就可以練出流利的聽說能力。
VoiceTube App
喜歡在生活中利用零碎時間學習？VoiceTube 手機版讓你隨時隨地都可以學英文，升級為 VoiceTube Pro 訂閱用戶還可以無上限觀看影片。其中還有 AI 發音分析的特別功能，運用 AI 幫學生抓出發音的弱點，進一步加強口說能力。運用 UX Audit 持續更新使用者體驗
這次很高興跟 VoiceTube 合作進行了一次簡單快速的 UX Audit，中文直翻是 UX 稽核，但更直白的講法應該是 UX 健康檢查😂
UX Audit 的目的是讓設計師戴上 UX 的有色眼鏡使用數位產品，找出其中使用者經驗還未臻完美的部分，提供改版時優化產品體驗的著眼點。
這是在 redesign 類型專案初期的工具，對工作室而言甚至有可能透過 UX Audit，給客戶看既有產品中有哪些部分值得成為一樁設計案。
這次我以全新使用者的角度跑過一次上課的流程，從 onboarding 到答題完畢，這中間有哪些 UI/UX 或產品設計方面可以讓 HERO 更上層樓。
Onboarding
在課程開始之前有一段 onboarding，教我一些基本的操作、主要元件在哪些地方。
Onboarding 的一個項目還包含已上過課程會放在哪裡，不過我還沒開始上課，等上完課時可能就忘記這個按鍵在哪裡了。如果可以把這個項目放在上完第一堂課之後再顯示，或許會更符合使用旅程的脈絡。
延伸閱讀：
使用者與產品的初次約會（上篇） — 理論與心法
使用者與產品的初次約會（下篇） — 實戰與例子觀看影片
開始上課啦！HERO 的介面非常簡潔，主角影片放在頁面正中央，次要的按鍵一概放置在畫面邊邊角角，讓使用者可以完全專注在眼前的影片段落。
接下來開始 UX Audit，第一件事情當然就是先把所有看起來重要的按鍵都按一次，發現了幾點值得注意：
- 設計師的強迫症 — 建議將離開課程與其他按鍵對齊，保持視覺上的平衡
- VoiceTube HERO 因為顧及大部分初學者可能還不適應過快的語速，因此設計了慢速播放的功能，不過對於較高等級的學生可能無法調整更快的語速，如果能有加快語速或是自行調整速率的功能或許會更好，期待可以更加優化。
- 熟悉的影片右下方按鈕似乎不是全螢幕，hover 過去才知道這是開字幕的意思，可以理解字幕開關對於學英文是重要的輔助功能，不過影片還是看全螢幕比較舒適，或許可以再加一個按鍵？
身為好學生的我當然要勤做筆記，但是筆記本是用 modal 的形式出現，不方便邊看邊寫筆記，以下是我的建議：
若是將影片和輔助工具用 side-by-side 的方式呈現，就可以讓使用者在寫筆記、查單字或是提出問題時，都可以不用切換情境，保持連貫而流暢的使用者體驗。
解習題
VoiceTube HERO 不只是影片類型很多元，練習題目也是各型各色，包含影片理解、字彙聽打、拼字測驗、單句口說、字彙配對、字彙表、慣用語、延伸寫作、以及口說對話等全方位的學習方式，聽說讀寫各範疇都涵蓋到了。
由於目的不同，每種題型也都有不太一樣的設計，現在讓我們來看看吧！
- 我一進到解題頁面，右側的影片就開始自動播放，我會建議將預設選項設為暫停影片，然後讓使用者自行決定播放與否。
（讀者文茜回饋說，或許這樣的設計是為了配合多益的考題方式，讓使用者可以習慣邊聽語音邊讀題並思考答案，我覺得也很合理） - 當時我選了答案之後，除了選項字體變粗之外沒有反應，可能會造成困惑，後來滾動了滑鼠才發現送出鍵在頁面下方，將 CTA 放在更顯眼的位置可能會更好。
空白鍵的重複功用
字彙聽打
聽母語人士講話很容易感覺所有字都黏在一起，無法抓關鍵字去理解句子。而字彙聽打的環節能有效訓練到大部分人最需要練習的「連音」，以及藉由影片中口語化的英文，進而真正運用到生活中，聽懂日常英文對話。HERO 為了整體的一致性，將空白鍵設計為暫停影片或繼續播放（Youtube 也是如此），這是滿普遍的機制，在大部分的時候都很直覺順手，省去了使用者要操控滑鼠去點影片的步驟。
然而在這個環節，由於英文在每個詞彙之間都需要使用空格，每次想打下一個字時都會造成影片暫停，還滿值得思考一下該如何避免空白鍵的重複功用。
拖曳（Drag and Drop）
- 延伸寫作不需要錄音，可以把「錄音有問題？」之類跟題型無關的資訊移除。
- 這種題型是要把字彙方塊一個個用拖曳或點擊的方式答題，如圖所示那樣需要大幅修改時，似乎無法一次選取多個方塊同時移位，反而要一塊一塊慢慢改，使用者只好努力答對題目了XD
統一視覺語言
答題的過程中，我發現每種類型的題目都有不同的視覺語言：
- 正解有時候是藍字，有時候卻是綠字
- 錯誤普遍都是使用紅字，但紅字在口說對話題中變成標明學生要錄音的那一句話，不太確定為什麼這個句子會用紅色呈現
- 解答正確時通常是用藍/綠字顯示答對了，但偶爾會出現其他形式的回饋
統一視覺語言的好處是要讓使用者得到明確的回饋。如果正解就是綠字，錯誤就是紅字，在每一題都不斷地反覆強化顏色與答題結果的關聯性，使用者自然會逐漸養成看到綠字會欣喜、看到紅字會覺得可惜的反射性情緒。
如此一來答題時都可以期待在按下送出鍵的時候可以看到綠色字，正確時那種「YES 我答對了！」的滿足感也就比較高。
強化正解獎勵機制
當答題正確時，右下角的熊熊會跳出來恭喜我答對了，並顯示 exp（經驗值）加了多少分，然後瞬間消失。
好不容易拍到超難截的熊熊回饋圖，雖然連續答題正確得到 combo，卻因為看起來跟一般答題正確一樣，稍微可惜了一點。
利用視覺強化讓獎勵機制更誘人，能激勵使用者更想答對題目。就像遊戲化實戰全書提到的，吃角子老虎機絢麗的聲光效果是刻意設計的，讓玩家得到強烈的回饋，進而提升接下來對同樣回饋的期待感。
比如說將 exp 具象化成累積經驗的實況經驗條，讓使用者對於自己答題正確更有成就感；或是熊熊可以在達成 combo 時做些特殊動作或是跳支舞(?)之類的，讓 combo 變成一種特殊體驗。
題目做到一半的時候，我想看看目前累積的經驗值，想說因為答對的時候熊熊會跳出回饋，它應該是跟分數有所連結的，那點擊它應該可以得到跟分數相關的資訊吧？
結果 hover 到熊熊身上才發現 — 它其實跟分數沒有關係，反而是測驗說明，點擊它之後跳出 modal 講解此題型的答題方式。
眾裏尋他千百度之後才發現累積經驗值的分數位於首頁，點擊個人資料才看得到，與其將經驗值藏在這裡，不如像前幾段所提到的，讓經驗條變成在答題過程中激勵使用者正確答題的誘因，讓使用者看到不斷上升的成就，享受慢慢升級的樂趣，遊戲化整個學習體驗。
VoiceTube HERO 第五屆零元挑戰
對於快速發展的新創產品而言，很容易將狂加額外新功能當成首要之務。但產品設計師的觀點反而是將一件擅長的事做到最好，讓最核心的功能體驗變好、黏著度變高，一路上不斷學習、精進才是產品設計的王道。
所以我很感謝 Voice Tube 願意合作 UX Audit（還是公開在 Medium 上進行😂），也由此可見他們想把 HERO 做好、想不斷精進改善核心功能的決心！
最近 VoiceTube HERO 第五屆零元挑戰開跑了，只要在時限內完成挑戰，符合挑戰規則就能全額退費。像我上的是高級的課程，原本三個月 30 堂課的費用是 3600 臺幣，零元挑戰成功的話直接免費，而且還紮紮實實學了英文，超划算！
如果想直接訂購課程的話，Jasmine 的讀者們可以使用專屬折扣碼「jasmine」購課，享 9 折優惠，兩套及以上享 81 折優惠。只要是新生，在 8/28 以前用折扣碼購課都可以享有購課優惠以及零元挑戰參加資格！（目前只有電腦版購課才能參加零元挑戰喔！手機版還沒有開放）
歡迎跟我分享你們認不認同以上建議，或是對 HERO 整體產品的 UI/UX 有沒有什麼其他的看法喔！
如果喜歡這篇文章，請幫我拍手 1-10 下。
如果喜歡閱讀關於設計師的產品健檢，請幫我拍手 10-30 下。
如果單純喜歡我的文字，希望看到更多的話，請幫我大力拍手 30-50 下。也請記得 Follow 我 Jasmine Lin ，或是數位產品設計 Medium 文章平台 As A Product Designer，讓我們與你們分享更多好文章 😊更歡迎你在文章底下留言，我很樂意也很期待跟你討論或聊天！
