好UX設計案例分享 (上) — 七大基本使用情境 Good UX Design Examples: 7 Basic User Scenarios
【本文適合對用戶體驗、產品開發 & 設計有興趣的讀者】
「小蔡啊，如果我們系統出錯，需要一個404頁面」
「小蔡啊，錯誤訊息要放在哪比較好？」
「小蔡啊，如果使用者刪除所有訊息，是不是應該在這畫面放些什麼？」
「小蔡啊，我們產品好像使用率不高，要怎麼讓註冊戶使用我們的產品？」
如果你有遇過工程師、產品經理常常問這些問題，搞得你神經兮兮，也許是該重新檢視設計流程了！因此，這次想與大家分享七個基本的用戶情境，在設計時盡可能的考量不同狀態，設計一個更完整、全面的用戶體驗。
上集我們著重在基本的使用情境，下集會分享特殊情境設計 :)
本文大綱 Table of Contents
- 什麼是好的使用者經驗？ What is Good User Experience ?
1.1 定義 Definition
1.2 產品開發流程 Product Development Process - 七大基本用戶情境 Seven Basic User Scenarios
- 優質UX範例分享 Good UX Examples
3.1 註冊 Sign up
3.2 導覽 Onboarding
3.3 空白 Empty State
3.4 創建 Creation Flow
3.5 載入 Loading
3.6 成功/確認/分享 Success / Share
3.7 錯誤 Error - 小結 Conclusion
- 參考資料 References
1. 什麼是好的使用者經驗？What is a Good User Experience
1.1 定義 Definition
在開始分享範例前，我想先來談談這次分享的標準，好的UX設計是什麼？
- Usability 易用性：產品設計符合使用者的習慣與需求，用最少的努力發揮最大的效能
- Beautiful 美觀：產品能達到目的後，視覺上有好的比例、構圖、重要資訊放在適當的位置，都能讓用戶體驗更好
- Pleasurable 愉悅：讓用戶體驗提升到另一個層次，加上一些小巧思，不論是文案、插圖、細微動畫，讓使用者驚喜、感到開心
1.2 產品開發流程 Product Development Process
在這裡，稍微提到產品開發流程，一個好的使用者經驗設計，不只是用戶研究和設計，到執行層面，產品經理必須了解、定義問題、引導團隊到正確的方向，設計師與工程團隊緊密合作，才能將呈現用戶完整的體驗。
記住，設計師跟工程師是好朋友，要手牽手才能優質的產品 😉
另外，也盡量不要有”一次到位”的想法，許多好的設計是經過不斷迭代更新、學習使用者行為的。儘管做了使用者研究，但到產品真正推出市場時，常常會有意想不到的回饋、狀態，必須去做相對應的調整。
2. 七大基本用戶情境 Seven Basic User Scenarios
在設計時，我們常常一開始都以最完美的情境下進行設計(Happy Path)，忽略了不同用戶情境，造成使用者的困惑或挫折感，與開發部門來回的溝通成本。因此，在開始著手設計時，若能考量不同情境(Unhappy Path/Edge Cases)，更能全面地確保使用者經驗的一致性。
因此這次的文章，想要向大家介紹七個基本的使用狀態：
1. 註冊 Sign up
2. 導覽 Onboarding
3. 空白 Empty State
4. 創建 Creation Flow
5. 載入 Loading
6. 成功/確認/分享 Success / Confirmation / Share
7. 錯誤 Error
除了常見、花最多時間設計的Creation Flow，別忘了還有使用者一開始登入時的空白狀態、載入及正、反回饋。
分享一個小故事，當在設計Fevo的check out flow時，發覺總是有些不對勁，花了兩個小時跟工程師討論，一起設計載入動畫，結果整個感官完全不同，讓轉換畫面變得順暢許多 🤣 可見設計小細節也是使用者體驗的一部分。
- 延伸閱讀 Reading list
3. 優質UX範例分享 Good UX Examples
＊分享案例前提 Conditional statement1. 在線產品：上市的產品，並非Dribble, Behance等prototype2. 個人使用過的產品：本人有實際操作過，並非廣告或是設計案例3. 焦點在個別/獨立功能：這次著重於單獨的階段，並非整體產品4. UX不只是美觀，還有流程和技術：千萬不要覺得介面好看就好，還有其中細微的流程，和背後的技術。設計師跟工程師是好朋友，缺一不可（除非你想當兩個）5. 主觀意見：我認為好的UX，並不代表你也喜歡。就像我喜歡臭豆腐，但不是每個人都愛
3.1 註冊 Sign up / Registration
Zeplin, Connected space for product teams
不論任何產品，註冊幾乎是必備流程。在個人註冊過這麼多產品後，Zeplin算是數一數二流暢又讓人愉悅的。仔細觀察簡單的註冊畫面，它包含：
- 即時反饋 Instant feedback
不論是成功或是輸入錯誤，Zeplin利用顏色及圖示告知使用者目前的狀態 - 鼓勵語氣 Encouraging tone
當輸入完畢時，「不錯喲 Looks good！」、「讚喔Aweome！」，右方的確認訊息十分正面，肯定使用者的輸入動作，讓用戶感覺良好 - 提供有用的資訊Informative message
當在輸入電子郵件、名稱及密碼時，同時提供使用者相關資訊
3.2 導覽 Onboarding
大家對Boarding Pass登機證、Boarding Time登機時間這兩個名詞應該不陌生，On board在英文一般指的是搭乘交通工具，如船或是火車；或者第一天上班，老外會跟你說 ”Welcome on board”來歡迎新進員工。在產品設計中，On board是指使用者首次”登入”產品。
當用戶第一次見到你的產品時，敘說內部功能及導覽，讓使用者了解內部的功能及目的十分重要。想像第一次去餐廳、圖書館、甚至是認識新朋友，如何讓自我介紹有趣又易懂，是維繫用戶關係的關鍵時刻。
Making them understand the value of your product as soon as possible is KEY.
— Rafayel Mkrtchyan
Dropbox, creative collaboration space
相信大家在下載新的App，第一次打開總是有很多美麗的插畫，或是動畫等，但我個人總是習慣順手一滑，整個完全忽略產品介紹，連看都不看 😂
Dropbox的onboarding用戶引導流程真的做得很好。第一次登入後，馬上出現可愛的插畫Illustration親切地歡迎使用者的到來。再來，利用放大鏡的焦點，將使用者的目光聚集在關鍵功能，並用大幅的畫面下欄說明檔案存取及共用文件Paper，讓人不忽略也難，十分簡潔、易懂、美麗的設計。
除了使用放大鏡的方法一個一個步驟指示功能，同時可以參考：
- Craft：步驟+截圖+視窗+簡短文字說明
- Instagram Stories：簡潔圖示+文字
- iOS Siri：舉例說明產品目的（我個人也滿愛的，因為非常實用地告知使用者此產品可以如何幫助你的生活，提供產品價值）
3.3 空白狀態 Empty State
在 2015 Andrew Chen 蒐集125 million的手機數據，研究指出在用戶下載App的前三天，每日活躍用戶 (DAUs, Daily Active Users) 會據減77%；在90天內，只會剩下5%的每日活躍用戶。
「在下載過後的三至七天，使用者會嘗試大量的app，去決定那些app是不必要的。對於 “像樣” (decent)的apps，大部分的使用者會持續使用一個禮拜後，仍繼續保留。成功的關鍵在剛開始的三至七天，就讓使用者迷上(hooked)你的產品。」
— Ankit Jain, Founding Partner at Gradient Ventures
因此，若能在使用者ㄧ剛開始接觸你的產品，善用空白狀態立即表現出產品價值，能夠觸發用戶的使用動機。
一般而言，空白狀態的情形主要有三種：
- 首次登入First-Use：尚未有任何資訊、行為
- 清空/刪除/完成工作：刪除郵件、檔案等，或是完成待辦事項
- 沒有任何搜尋、配對結果 No Results
一個好的空白狀態設計包含：
- 具有教具性 Educate：教導用戶如何使用產品 (What, Where, and When)
- 讓用戶愉悅 Delight：也許教導用戶太過嚴肅，可以試著用可愛、幽默、有趣的口吻、視覺提升用戶的興趣
- 誘導行動 Prompt：說明產品功能後，最後仍須讓使用者與你的產品互動，不論是上傳、瀏覽、創建檔案，記得加上一個有意義的CTA進行動作
3.4 創建/新增 Creation Flow
創建流程是產品價值的核心，使用者如何運用你的產品達到目的，一般而言是投入最多心力、繁複的項目，一個產品內大多有數個創建/新增流程。如： Instagram和Facebook po文的過程、Amazon線上購物、Venmo匯款轉帳、Airbnb訂房等功能。
至於如何設計開發一個清晰無負擔的創建流程？必須透過了解問題、使用者研究、prototype、蒐集回饋數據，才能驗證一個好的設計，在此文我們不多加說明。不過，可以提到一個交互設計領域基本、不成文的原則 —
三點擊原則 Three Click Rule
如果用戶在三次點擊之後，仍無法找到有用訊息和完成產品功能，用戶就會離開你的產品
users of your services will not leave your site or application if they can not find the information they are looking for in 3 clicks.
使用者是沒有耐心的，假如他們沒辦法在時間內與你的產品有共鳴，不論是達到他的目的、或是提升興趣，使用者會受挫，而離開頁面。
也許你會問，如果功能很複雜，也要步驟也要減少到三次點擊嗎？其實未然，Joshua Porter, Director of UX at Hubspot 的研究指出，使用者在三次點擊後，如果找不到該功能，還是會繼續點擊，甚至多達25次。重點不在於減少越多越好，而是讓每次點擊都是有意義，提供導覽列、將訊息有效的組合在一起、建立清晰的資訊架構，讓用戶可以有效率的完成目的。
Invision, Project Creation Flow
在Invision的新增項目流程中，運用飽和度濃厚的粉紅色作為CTA，並放置在螢幕上端引人注目，當用戶按下新增後，有簡單的兩個步驟：選擇類型及裝置，Invision利用簡單的插畫，讓創建流程更有溫度，同時預防錯誤。
- 延伸閱讀 Reading List
3.5 載入 Loading
於2005年時，Jakob Nielsen (co-founder, Nielsen Norman Group)提出的十項使用者體驗設計優化原則，其中之一即是系統狀態呈現/顯示 (Visibility of system status)。
舉例來說，假如今天要去排永康街的鼎泰豐小籠包，店員會跟你說，你是 “第幾號”、”前面有多少人”、”大概要等多久”，至少讓你有排隊的心理準備，或者利用叫號機提醒客戶。在產品設計時，也是相同的道理，目的是為了
- 減少不確定性 Reduce user’s uncertainty
- 降低用戶的感知時間 reduce users’ perception of time
為了減少使用者的焦慮，產品應提供回饋，讓使用者了解即將會發生的情形、預期多久會發生。
一個好的進度顯示器，通常會告知使用者
- 現在狀態 Current Status：正在載入畫面、資料、數據等
- 未來狀態 Future Status：即將呈現的結果
最常見的手法包含
- 進度條 Progress Bar：告知目前狀態，到下一個狀態前大概要多久
- 載入動畫 Loading Animation：一個簡單沒有負擔的動畫，可以轉移使用者的注意力，不覺得等待時間有這麼長
Slack, Loading Screen
細微動畫 ＋ 狀態 ”Connecting to Slack”
→ 名言 ＋ 圓形進度條 (Circular Loader) + Content Placeholder
不但告知狀態、轉移注意力，同時為了不要讓畫面過於空白，加上了content placeholder，讓轉換畫面/狀態的過程十分流暢。
當然，最重要的還是最佳化資料載入的速度，使用者是非常沒有耐心的(尤其是我)，別本末倒置囉 😂 😂 😂
- 延伸閱讀 Reading List
3.6 成功/確認/分享 Success/Confirmation/Share
“反饋”是指依據使用者的行為，給予有效資訊，讓使用者了解目前狀態，作為判斷下一步的根據。
不論是正面，或是負面的回饋都是有效的，在產品設計中則是執行功能的成功與否。當使用者完成一項任務後，給予適當的正面回應，可以提升使用者的成就感、讓用戶感到安心&開心。
Shazam, Share Flow
Shazam是搜尋音樂的手機軟體，可以”聆聽”、辨認音樂、取得歌詞。當完成時，綠色的大螢幕佔據整個畫面，告訴使用者搜尋成功，並提供Spoitfy的短捷鍵，讓用戶可以直接加入音樂清單。
最讓我驚豔的是，我通常很懶得開不同的app，會直接截圖存到相簿，或分享。Shazam了解使用者行為，在截圖後，上方的視窗顯示”Tap to share”，真的是非常貼心的設計 😍 👍
其他我滿喜歡的成功狀態包含Mailchimp, Meetup和Overflow。
- Mailchimp：UX經典案例，當用戶成功發送一組郵件後，吉祥物大猩猩會跟你擊掌，或是規劃郵件發送日期，“Rock on!”訊息也讓人會心一笑
- Meetup：美國流行的地方性社交網站，讓來自各地的人找到志同道合的朋友。當完成註冊活動時，成功視窗雖然看似平凡，但其中的視覺層級設計得相當好：打勾 → 分享 → 活動概要 → 加入日曆，畫面清晰簡要
- Overflow：用戶流程展示工具，當註冊完畢後，除了正面的積極的訊息、社交分享捷徑，有趣的是利用獎勵(誘因)誘導使用者分享產品，在新產品推出時，是很棒的用戶體驗。
3.7 錯誤 Error State
相信大家都有過，手機當機、螢幕凍結、上傳失敗等負面的經驗，還記得當下多麽挫敗、生氣、不解嗎？用戶可能因此離開你的產品、流失客群。為了確保用戶停留，我們可以重新思考錯誤訊息設計。
錯誤訊息常常被忽略，但確保正面的使用者經驗是非常重要的
個人最痛恨的就是”Something happened” or “Something went wrong”，
OK ～ 到底你想表達什麼 😂 這對我有幫助嗎 😂 請你告訴我怎麼解決 😂
一個好的錯誤訊息包含：
- 問題是什麼 What the problem was
- 發生原因 Why it happened
- 解決方法 How to solve for it
以下的例子，都有清楚地說明原因及下一步指示，甚至利用可愛的插畫，稍稍平復使用者不開心的狀態。
- 延伸閱讀 Reading List
4. 小結 Conclusion
這次的文章大略的帶過產品設計的七個基本使用情境，是我在剛入門產品設計時，常忽略的狀態；直到稍有經驗後，會把這些情境納入考量，做更完善、全面性的設計。包含：
1. 註冊 Sign up
2. 導覽 Onboarding
3. 空白 Empty State
4. 創建 Creation Flow
5. 載入 Loading
6. 成功/確認/分享 Success / Confirmation / Share
7. 錯誤 Error
感謝大家看完這次的長篇案例分享，很開心能把平常所學跟觀察分享給讀者，如果喜歡這次的分享的話，別吝嗇按Likes和分享喔！有任何好的案例也可以在底下留言 👇 See you next time 😎
＊下集預告 Coming Soon... ✨✨✨• 節慶主題 Holiday Theme
• 電子商務 Ecommerce
• 推薦 Recommendation
• 遊戲化 Gamification
• 整合化用戶體驗 Holistic UX
• 資訊安全 Security
• 科技反思 Screen Time
