1. 什么是好的用戶體驗(yàn)？

1.1 定義

在開始分享案例前，我想先來談?wù)労玫腢X設(shè)計(jì)是什么？

Usability易用性：產(chǎn)品設(shè)計(jì)符合符合用戶的習(xí)慣與需求，用最少的努力發(fā)揮最大的能量。

Beautiful美觀：產(chǎn)品功能達(dá)到目的后，視覺上有好的比例、構(gòu)圖、重要信息放在適當(dāng)?shù)奈恢茫寄茏層脩趔w驗(yàn)更好

Pleasurable愉悅：讓用戶體驗(yàn)提升到另一個(gè)層次，加上一些小心思，不論是文案、插圖、細(xì)微動(dòng)畫，讓用戶驚喜、感到開心。

好的用戶體驗(yàn)金字塔Good User Experience Design

1.2 產(chǎn)品開發(fā)流程

在這里，稍微提一下產(chǎn)品開發(fā)流程，一個(gè)好的用戶體驗(yàn)設(shè)計(jì)，不只是用戶研究和設(shè)計(jì)，到執(zhí)行層面，產(chǎn)品經(jīng)理必須了解、定義問題、引導(dǎo)團(tuán)隊(duì)到正確的方向，設(shè)計(jì)師與工程團(tuán)隊(duì)緊密合作，才能將呈現(xiàn)用戶完整的體驗(yàn)。

記住，設(shè)計(jì)師跟工程師是好朋友，要手牽手才能優(yōu)質(zhì)的產(chǎn)品。

另外，也盡量不要有”一次到位”的想法，許多好的設(shè)計(jì)是經(jīng)過不斷迭代更新、學(xué)習(xí)用戶行為的。盡管做了用戶研究，但到產(chǎn)品真正推出市場(chǎng)時(shí)，常常會(huì)有意想不到的回饋、狀態(tài)，必須去做相對(duì)應(yīng)的調(diào)整。

產(chǎn)品開發(fā)流程Product Development Process

2. 七大基本使用情境

在設(shè)計(jì)時(shí)，我們常常一開始都以最完美的情境下進(jìn)行設(shè)計(jì)(Happy Path)，忽略了不同用戶情境，造成用戶的困惑或挫折感，與開發(fā)部門來回的溝通成本。因此，在開始著手設(shè)計(jì)時(shí)，若能考慮不同情境，更能全面地確保用戶體驗(yàn)的一致性。

因此這篇的文章，要向大家介紹七個(gè)基本的使用狀態(tài)：

1.注冊(cè)Sign up

2.引導(dǎo)Onboarding

3.空白Empty State

4.創(chuàng)建Creation Flow

5.載入Loading

6.成功/確認(rèn)/分享Success / Confirmation / Share

7.錯(cuò)誤Error

除了常見、花最多時(shí)間設(shè)計(jì)的“創(chuàng)建”，別忘了還有用戶一開始登入時(shí)的空白狀態(tài)、載入及正、反回饋。

七大基本用戶情境Seven Basic User Scenarios

3. 優(yōu)秀的UX范例分享

＊分享的案例符合：

1.已上線的產(chǎn)品：上市的產(chǎn)品，并非Dribble, Behance上的概念設(shè)計(jì)

2.個(gè)人使用過的產(chǎn)品：本人有實(shí)際操作過，并非廣告或是設(shè)計(jì)案例

3.焦點(diǎn)在個(gè)別/獨(dú)立功能：這次著重于單獨(dú)的階段，并非整體產(chǎn)品

4. UX不只是美觀，還有流程和技術(shù)：千萬不要覺得界面好看就好，還有其中細(xì)微的流程，和背后的技術(shù)。設(shè)計(jì)師跟工程師是好朋友，缺一不可

5.主觀意見：我認(rèn)為好的UX，并不代表你也喜歡。就像我喜歡臭豆腐，但不是每個(gè)人都愛。

3.1 注冊(cè)登錄Sign up / Registration

產(chǎn)品：Zeplin

不論任何產(chǎn)品，注冊(cè)幾乎是必備流程。在個(gè)人注冊(cè)過這么多產(chǎn)品后，Zeplin算是數(shù)一數(shù)二流暢又讓人愉悅的。

仔細(xì)觀察簡(jiǎn)單的注冊(cè)畫面，它包含：

-即時(shí)反饋：不論是成功或是輸入錯(cuò)誤，Zeplin利用顏色及圖示告知用戶目前的狀態(tài)

-鼓勵(lì)語氣：當(dāng)輸入完畢時(shí)，「不錯(cuò)喲Looks good！」、「贊！」，右方的確認(rèn)信息十分正面，肯定用戶的輸入動(dòng)作，讓用戶感覺良好。

-提供有用的信息：當(dāng)在輸入電子郵件、名稱及密碼時(shí)，同時(shí)提供用戶相關(guān)信息

Zeplin注冊(cè)畫面十分流暢及令人愉悅

3.2 引導(dǎo)Onboarding

大家對(duì)Boarding Pass登機(jī)證、Boarding Time登機(jī)時(shí)間這兩個(gè)名詞應(yīng)該不陌生，On board在英文一般指的是搭乘交通工具，如船或是火車；或者第一天上班，老外會(huì)跟你說”Welcome on board”來歡迎新進(jìn)員工。在產(chǎn)品設(shè)計(jì)中，On board是指用戶首次”登入”產(chǎn)品。

當(dāng)用戶第一次見到你的產(chǎn)品時(shí)，說明內(nèi)部功能及導(dǎo)覽，讓用戶了解內(nèi)部的功能及目的十分重要。想像第一次去餐廳、圖書館、甚至是認(rèn)識(shí)新朋友，如何讓自我介紹有趣又易懂，是維系用戶關(guān)系的關(guān)鍵時(shí)刻。

產(chǎn)品：Dropbox

相信大家在下載新的App，第一次打開總是有很多美麗的插畫，或是動(dòng)畫等，但我個(gè)人總是習(xí)慣順手一滑，整個(gè)完全忽略產(chǎn)品介紹，連看都不看。

Dropbox的onboarding用戶引導(dǎo)流程真的做得很好。第一次登入后，馬上出現(xiàn)可愛的插畫親切地歡迎用戶的到來。再來，利用放大鏡的焦點(diǎn)，將用戶的目光聚集在關(guān)鍵功能，并用大幅的畫面下欄說明檔案存取及共用文件，讓人不忽略也難，十分簡(jiǎn)潔、易懂、美麗的設(shè)計(jì)。

Dropbox的用戶引導(dǎo)流程，親切又易懂

除了使用放大鏡的方法一個(gè)一個(gè)步驟指示功能，同時(shí)可以參考：

-Craft：步驟+截圖+視窗+簡(jiǎn)短文字說明

-Instagram Stories：簡(jiǎn)潔圖示+文字

-iOS Siri：舉例說明產(chǎn)品目的

其他Onboarding設(shè)計(jì)(Craft, Instagram Stories, and iOS Siri)

3.3 空白狀態(tài)Empty State

在2015 Andrew Chen搜集125 million的手機(jī)數(shù)據(jù)，研究指出在用戶下載App的前三天，每日活躍用戶(DAUs, Daily Active Users)會(huì)據(jù)減77%；在90天內(nèi)，只會(huì)剩下5%的每日活躍用戶。

「在下載過后的三至七天，用戶會(huì)嘗試大量的app，去決定那些app是不必要的。對(duì)于“像樣” (decent)的apps，大部分的用戶會(huì)持續(xù)使用一個(gè)禮拜后，仍繼續(xù)保留。成功的關(guān)鍵在剛開始的三至七天，就讓用戶迷上(hooked)你的產(chǎn)品。」

— Ankit Jain , Founding Partner at Gradient Ventures

因此，若能在用戶剛開始接觸你的產(chǎn)品，善用空白狀態(tài)立即表現(xiàn)出產(chǎn)品價(jià)值，能夠觸發(fā)用戶的使用動(dòng)機(jī)。

一般而言，空白狀態(tài)的情形主要有三種：

-1-首次登入：尚未有任何信息、行為

-2-清空/刪除/完成工作：刪除郵件、檔案等，或是完成待辦事項(xiàng)

-3-沒有任何搜尋、配對(duì)結(jié)果

一個(gè)好的空白狀態(tài)設(shè)計(jì)包含：

-1-具有教具性：教導(dǎo)用戶如何使用產(chǎn)品(What, Where, and When)

-2-讓用戶愉悅：也許教導(dǎo)用戶太過嚴(yán)肅，可以試著用可愛、幽默、有趣的口吻、視覺提升用戶的興趣

-3-誘導(dǎo)行動(dòng)：說明產(chǎn)品功能后，最后仍須讓用戶與你的產(chǎn)品互動(dòng)，不論是上傳、瀏覽、創(chuàng)建檔案，記得加上一個(gè)有意義的CTA進(jìn)行動(dòng)作

Asana & IconJar 善用空白狀態(tài)，說明產(chǎn)品功能并誘導(dǎo)用戶行為

在Asana的例子中(圖左)，利用大型圖示、漸層色彩吸引用戶目光，并說明產(chǎn)品的價(jià)值(團(tuán)隊(duì)有效溝通)。IconJar一目了然的CTA，用戶了解下一個(gè)動(dòng)作是什么，具有促發(fā)行動(dòng)性，也是挺好的案例。

3.4 創(chuàng)建/新增Creation Flow

創(chuàng)建流程是產(chǎn)品價(jià)值的核心，用戶如何運(yùn)用你的產(chǎn)品達(dá)到目的，一般而言是投入最多時(shí)間、繁復(fù)的項(xiàng)目，一個(gè)產(chǎn)品內(nèi)大多有數(shù)個(gè)創(chuàng)建/新增流程。如： Instagram和Facebook po文的過程、Amazon線上購(gòu)物、Venmo匯款轉(zhuǎn)帳、Airbnb訂房等功能。

至于如何設(shè)計(jì)開發(fā)一個(gè)清晰無負(fù)擔(dān)的創(chuàng)建流程？必須透過了解問題、用戶研究、原型設(shè)計(jì)、搜集回饋數(shù)據(jù)，才能驗(yàn)證一個(gè)好的設(shè)計(jì)，在此文我們不多加說明。不過，可以提到一個(gè)交互設(shè)計(jì)領(lǐng)域基本、不成文的原則—

三點(diǎn)擊原則Three Click Rule

如果用戶在三次點(diǎn)擊之后，仍無法找到有用訊息和完成產(chǎn)品功能，用戶就會(huì)離開你的產(chǎn)品。

用戶是沒有耐心的，假如他們沒辦法在有限時(shí)間內(nèi)與你的產(chǎn)品有共鳴，不論是達(dá)到他的目的、或是提升興趣，用戶會(huì)受挫，而離開頁面。

也許你會(huì)問，如果功能很復(fù)雜，也要步驟也要減少到三次點(diǎn)擊嗎？其實(shí)未必，Joshua Porter , Director of UX at Hubspot的研究指出，用戶在三次點(diǎn)擊后，如果找不到該功能，還是會(huì)繼續(xù)點(diǎn)擊，甚至多達(dá)25次。重點(diǎn)不在于減少越多越好，而是讓每次點(diǎn)擊都是有意義，提供導(dǎo)覽列、將訊息有效的組合在一起、建立清晰的資訊架構(gòu)，讓用戶可以有效率的完成目的。

產(chǎn)品：Invision

在Invision的新增項(xiàng)目流程中，運(yùn)用飽和度濃厚的粉紅色作為CTA，并放置在頁面上端引人注目，當(dāng)用戶按下新增后，有簡(jiǎn)單的兩個(gè)步驟：選擇類型及裝置，Invision利用簡(jiǎn)單的插畫，讓創(chuàng)建流程更有溫度，同時(shí)預(yù)防錯(cuò)誤。

?Invision Project Creation Flow利用插畫跟三點(diǎn)擊原則，增添新增項(xiàng)目流程的趣味

3.5 載入 Loading

2005年，Jakob Nielsen提出的十項(xiàng)用戶體驗(yàn)設(shè)計(jì)優(yōu)化原則，其中之一即是系統(tǒng)狀態(tài)呈現(xiàn)/顯示(Visibility of system status)。

舉例來說，假如今天要去排永康街的鼎泰豐小籠包，店員會(huì)跟你說，你是“第幾號(hào)”、”前面有多少人”、”大概要等多久”，至少讓你有排隊(duì)的心理準(zhǔn)備，或者利用叫號(hào)機(jī)提醒客戶。在產(chǎn)品設(shè)計(jì)時(shí)，也是相同的道理，目的是為了減少不確定性和降低用戶的感知時(shí)間。

為了減少用戶的焦慮，產(chǎn)品應(yīng)提供回饋，讓用戶了解即將會(huì)發(fā)生的情形、預(yù)期多久會(huì)發(fā)生。

一個(gè)好的進(jìn)度顯示，通常會(huì)告知用戶：

-現(xiàn)在狀態(tài)：正在載入畫面、資料、數(shù)據(jù)等

-未來狀態(tài)：即將呈現(xiàn)的結(jié)果

最常見的手法包含：

-進(jìn)度條：告知目前狀態(tài)，到下一個(gè)狀態(tài)前大概要多久

-載入動(dòng)畫：一個(gè)簡(jiǎn)單沒有負(fù)擔(dān)的動(dòng)畫，可以轉(zhuǎn)移用戶的注意力，不覺得等待時(shí)間有這么長(zhǎng)

產(chǎn)品：Slack?

不但告知狀態(tài)、轉(zhuǎn)移注意力，同時(shí)為了不要讓畫面過于空白，加上了內(nèi)容占位符，讓轉(zhuǎn)換畫面/狀態(tài)的過程十分流暢。

當(dāng)然，最重要的還是頁面載入的速度，用戶是非常沒有耐心的。

Slack & Gmail Loading 載入動(dòng)畫減少用戶的焦慮

3.6 成功/確認(rèn)/分享Success/Confirmation/Share

“反饋”是指依據(jù)用戶的行為，給予有效資訊，讓用戶了解目前狀態(tài)，作為判斷下一步的根據(jù)。

不論是正面，或是負(fù)面的回饋都是有效的，在產(chǎn)品設(shè)計(jì)中則是執(zhí)行功能的成功與否。當(dāng)用戶完成一項(xiàng)任務(wù)后，給予適當(dāng)?shù)恼婊貞?yīng)，可以提升用戶的成就感、讓用戶感到安心&開心。

產(chǎn)品：Shazam

Shazam是搜尋音樂的app，可以”聆聽”、辨認(rèn)音樂、獲取歌詞。當(dāng)完成時(shí)，綠色的大頁面占據(jù)整個(gè)畫面，告訴用戶搜尋成功，并提供Spoitfy的短捷鍵，讓用戶可以直接加入音樂清單。

最讓我驚艷的是，我通常很懶得開不同的app，會(huì)直接截圖存到相簿，或分享。Shazam了解用戶行為，在截圖后，上方的視窗顯示”Tap to share”，真的是非常貼心的設(shè)計(jì)? ?

Shazam貼心的分享流程設(shè)計(jì)

其他我滿喜歡的成功狀態(tài)包含Mailchimp , Meetup和Overflow。

Mailchimp：UX經(jīng)典案例，當(dāng)用戶成功發(fā)送一組郵件后，吉祥物大猩猩會(huì)跟你擊掌，或是規(guī)劃郵件發(fā)送日期，“Rock on!”訊息也讓人會(huì)心一笑

Meetup：美國(guó)流行的地方性社交網(wǎng)站，讓來自各地的人找到志同道合的朋友。當(dāng)完成注冊(cè)活動(dòng)時(shí)，成功視窗雖然看似平凡，但其中的視覺層級(jí)設(shè)計(jì)得相當(dāng)好：打勾→分享→活動(dòng)概要→加入日歷，畫面清晰簡(jiǎn)要

Overflow：用戶流程展示工具，當(dāng)注冊(cè)完畢后，除了正面的積極的訊息、社交分享捷徑，有趣的是利用獎(jiǎng)勵(lì)(誘因)誘導(dǎo)用戶分享產(chǎn)品，在新產(chǎn)品推出時(shí)，是很棒的用戶體驗(yàn)。

Mailchimp , Meetup , Overflow的確認(rèn)畫面有清楚的視覺層級(jí)和令人愉悅的設(shè)計(jì)元素

3.7 錯(cuò)誤Error State

相信大家都有過，手機(jī)卡頓、屏幕凍結(jié)、上傳失敗等負(fù)面的經(jīng)驗(yàn)，還記得當(dāng)下多么挫敗、生氣、不解嗎？用戶可能因此離開你的產(chǎn)品、流失客群。為了確保用戶停留，我們可以重新思考錯(cuò)誤消息設(shè)計(jì)。

錯(cuò)誤消息常常被忽略，但確保正面的用戶經(jīng)驗(yàn)是非常重要的。

一個(gè)好的錯(cuò)誤訊息包含：問題是什么，發(fā)生原因，解決方法。

以下的例子，都有清楚地說明原因及下一步指示，甚至利用可愛的插畫，平復(fù)用戶不開心的狀態(tài)。

Headspace, Muzli, Slack的錯(cuò)誤訊息，除了告知用戶目前狀態(tài)外，也提供有效資訊及指示

4. 小結(jié)Conclusion

這次的文章簡(jiǎn)要講解產(chǎn)品設(shè)計(jì)的七個(gè)基本使用情境中的用戶體驗(yàn)設(shè)計(jì)，剛?cè)腴T產(chǎn)品設(shè)計(jì)的設(shè)計(jì)師常忽略的狀態(tài)。希望看完文章后，設(shè)計(jì)師們能將這七個(gè)情境考慮進(jìn)去，做更完善、全面性的設(shè)計(jì)。