好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