第一篇先來介紹一下什麼是UI/UX?

在數位產品設計領域，使用者介面 (UI) 與使用者體驗 (UX) 的優化是不可或缺的一環。為了確保產品不僅美觀，更能讓使用者順暢、直觀地操作，多樣化的測試方法應運而生。本文將為您介紹七種常見且有效的 UI/UX 測試方式，協助您在開發流程的不同階段，系統性地檢視並改善您的產品。

那其中我最常用的是易用性測試(Usability Testing)
易用性測試是 UI/UX 領域最核心的測試方法之一，旨在觀察真實使用者在操作產品時遇到的困難與反應。

核心原則： 讓具代表性的使用者，在有指引或無指引的情況下，完成一系列預設的任務。測試人員則在一旁觀察、紀錄使用者的行為、表情、口頭回饋，以及完成任務的效率和成功率。

適用情境： 從早期的線框稿 (Wireframe)、互動原型 (Prototype) 到已上線的產品，各階段皆可進行。

執行步驟：

1. 定義目標與任務： 明確想要驗證的產品功能與使用者場景。
2. 招募測試者： 尋找符合您目標客群輪廓的參與者。
3. 準備測試環境： 無論是實體實驗室或遠端測試，都需確保環境能讓使用者專注。
4. 執行測試： 請使用者邊操作邊說出自己的想法 (Think Aloud Protocol)。
5. 分析與報告： 彙整觀察到的問題，並提出改善建議。
6. 優點： 能直接發現使用者操作上的痛點、直觀了解使用者行為與預期的落差。
7. 缺點： 招募使用者可能耗時且成本較高、測試環境可能影響使用者自然行為。

而且所有人都可以，所以我很常使用易用性測試，就是因為可以很快速地去定位我們的UIUX是否好用、能用等等
就在原型prototype上面讓小組成員時系去使用想像這個產品，在做介面的優化以及改善

這邊我就讓ai幫我模擬一個短短的給大家看，讓大家也有點概念

好的，這是在 code block 中的完整易用性測試模擬腳本，方便您複製。

好的，這是在 code block 中移除所有 ** 符號的內容。

### 模擬易用性測試：Gemini Coffee App

1. 測試背景

* 產品：Gemini Coffee App (一個讓使用者預訂咖啡、稍後到店取餐的應用程式)
* 目標：評估新使用者首次使用 App 點餐流程的順暢度與直觀性。
* 參與者：
    * 主持人 (Facilitator): 我 (AI)
    * 使用者 (User): 小陳 (28歲上班族，有使用其他 App 點餐的經驗)
* 測試原型：一個可以點擊互動，但功能尚未完全開發的 App 原型。

2. 測試前導說明

主持人：「嗨，小陳，非常感謝你今天抽空來參與我們的測試。我是今天的主持人。」

小陳：「你好。」

主持人：「今天我們想請你試用一款新的咖啡點餐 App 原型。我想強調，今天測試的對象是這個 App，完全不是在測試你。所以沒有任何錯誤的操作，你的一切反應對我們來說都是非常寶貴的回饋。」

主持人：「在接下來的過程中，我會請你完成幾個簡單的任務。最重要的一點是，希望你一邊操作，一邊把你心裡的想法說出來。比如說『嗯...我在找拿鐵在哪裡』、『喔，這個按鈕顏色很奇怪，我不太想按』之類的，任何想法都可以。這能幫助我們了解你的真實感受。」

小陳：「好的，沒問題。」

主持人：「過程中我可能不會回答你的問題，因為我們想觀察在沒有協助下，App 本身是否足夠好用。測試大約會進行10-15分鐘。那麼，我們準備好就可以開始了。」

---

3. 情境與任務

主持人：「好的，請你想像一個情境：現在是下午三點，你有點睏，想在下班經過公司樓下那間 Gemini Coffee 時，順便拿一杯咖啡。請你用這個 App 先預訂一杯『大杯、半糖的冰拿鐵』。」

小陳：「好。」

(測試開始，小陳看著 App 首頁)

小陳：(邊滑動邊說) 「嗯...首頁看起來有很多活動廣告。我要點咖啡，應該是...這個『線上點餐』的按鈕吧？我點點看。」

(小陳點擊了『線上點餐』，進入菜單頁)

小陳：「進來了。上面有『本季限定』、『經典義式』、『手沖精選』...拿鐵應該是義式咖啡，我猜是在『經典義式』裡面。」

(小陳點擊『經典義式』，看到了美式、卡布奇諾、拿鐵等選項)

小陳：「找到了，拿鐵在這裡。我要冰的...上面有冷/熱的圖示，我點這個雪花圖案...」 (點擊了冰飲圖示) 「好，我現在要選大杯、半糖... 我點一下『拿鐵』這個品項看看。」

(點進拿鐵的商品頁，頁面顯示了中杯價格，下方有『容量』、『甜度』、『冰塊』三個選項)

小陳：「OK，進來了。容量預設是中杯，我點一下...有中杯跟大杯可以選，我選『大杯』。」 (點選大杯) 「價格有變動，很好。再來是甜度...預設是正常甜，我點開，有正常、半糖、三分糖、無糖。我要『半糖』。」 (點選半糖)

小陳：「冰塊預設是正常冰，我就不動它了。嗯...該怎麼把它加到購物車？我找一下...」 (視線在頁面下方來回掃視) 「啊，右下角這個『加入購物車』的按鈕顏色有點淺，我剛剛第一時間沒注意到。」

(小陳點擊了『加入購物車』)

小陳：「點了...好像沒什麼反應？喔，右上角的購物車圖示多了一個『1』，所以是加進去了。我個人比較習慣點完會跳出一個小視窗說『已成功加入』之類的。」

主持人：「了解，謝謝你的回饋。那麼，最後請你試著前往結帳頁面。」

小陳：「好，那我應該就是點右上角這個有『1』的購物車圖示了。」 (點擊購物車圖示)

(成功進入購物車/結帳頁面)

主持人：「好的，太好了！我們今天的任務就到這邊全部完成了。」

---

4. 測試後訪談與分析

主持人：「非常感謝你，小陳。想請問一下，整體操作下來，你覺得最困難或最讓你猶豫的地方是哪裡？」

小陳：「主要是最後那個『加入購物車』的按鈕，顏色不太顯眼，而且點完之後的回饋感有點弱，讓我猶-豫了一下，不確定是不是成功了。」

主持人：「了解。那有沒有覺得哪個部分做得特別好、讓你覺得很順暢的？」

小陳：「分類還蠻清楚的，我很快就在『經典義式』裡找到拿鐵。還有客製化甜度冰塊的選項也很直觀。」

主持人：「好的，非常感謝你寶貴的意見，這對我們的產品改進非常有幫助！」

---

5. 從這個模擬測試中得到的洞見 (Insights)

1. [發現問題] 「加入購物車」按鈕的色彩對比度可能不足 (Criticality: High)，導致使用者第一時間難以發現。
2. [發現問題] 點擊「加入購物車」後，系統缺乏立即且明顯的回饋 (例如：彈出視窗、按鈕動畫)，讓使用者產生不確定感 (Criticality: Medium)。
3. [驗證優點] 產品的資訊架構（菜單分類）是清晰的，使用者能依循心智模型快速找到目標品項。

根據這些洞見，設計團隊接下來就可以針對按鈕的視覺設計和互動回饋，提出具體的優化方案。

下一章我會來講解user story