10步讓你做出引人入勝的用戶體驗(yàn)
設(shè)計(jì)師 Irene Pereyra 總結(jié)了10大技巧幫助你實(shí)現(xiàn)令人驚嘆的交互式用戶體驗(yàn)。
近來(lái),設(shè)計(jì)一款能夠吸引并留住用戶的web和App越來(lái)越成為一門學(xué)問(wèn)。
由于很多人對(duì)于計(jì)算機(jī)數(shù)字領(lǐng)域不是很很了解,我會(huì)經(jīng)常拿我們UX設(shè)計(jì)師和建筑師作比較。通常建筑師是負(fù)責(zé)設(shè)計(jì)你的房子的,而我們的UX設(shè)計(jì)團(tuán)隊(duì)需要建立一個(gè)網(wǎng)站全面詳盡的藍(lán)圖,里面包含網(wǎng)站的特性和功能,以及其他方方面面的內(nèi)容。
但這些設(shè)計(jì)通常不是一稿就能搞定的。要想實(shí)現(xiàn)直觀又吸引人的用戶交互需要很多步驟。下面我自己總結(jié)了10個(gè)小建議希望可以幫助你設(shè)計(jì)出令人驚艷的交互式用戶體驗(yàn)。
1.實(shí)實(shí)在在的為用戶而設(shè)計(jì)
在線上交互還處在初級(jí)階段的時(shí)候,我們其實(shí)沒(méi)有太多考慮用戶體驗(yàn),用戶也很愿意花時(shí)間學(xué)習(xí)如何使用網(wǎng)站。如果真的遇到實(shí)在不會(huì)的,人們也只會(huì)抱怨計(jì)算機(jī)水平 不行或?qū)ヂ?lián)網(wǎng)還不夠了解。而隨著越來(lái)越多的網(wǎng)站,移動(dòng)設(shè)備和平板電腦的出現(xiàn),用戶顯然不愿再像以前一樣耗費(fèi)學(xué)習(xí)成本在網(wǎng)站操作上面?,F(xiàn)在的用戶可不像以 前那么容易討好了,那些不合格的產(chǎn)品最終只會(huì)被用戶拋棄的。
設(shè)計(jì)師當(dāng)然是希望能夠按自己的喜好和審美來(lái)設(shè)計(jì)產(chǎn)品。但很多時(shí)候這樣做對(duì)提升用 戶體驗(yàn)沒(méi)有太多的幫助,設(shè)計(jì)師和用戶的偏好和需求有時(shí)候是天差地別的。應(yīng)該多想想用戶真正需要的是什么,然后用最直觀有效的方法幫助他們實(shí)現(xiàn)需求。用戶在 網(wǎng)上的活動(dòng)是多種多樣的:瀏覽、搜索、玩游戲、看視頻、辦公或者想找一些專業(yè)的信息,這些用戶行為是設(shè)計(jì)師需要考慮的。UX設(shè)計(jì)團(tuán)隊(duì)的工作就是要著眼用戶 體驗(yàn)的整體,然后確保用戶的需求得到滿足。
“為用戶設(shè)計(jì)”是我們?cè)O(shè)計(jì)Civil War 150專 題網(wǎng)站的基礎(chǔ),我們做的每一步設(shè)計(jì)都要從用戶本身出發(fā)。在項(xiàng)目設(shè)計(jì)中,我們遇到最大的挑戰(zhàn)是要處理數(shù)量龐大的歷史事件和統(tǒng)計(jì)數(shù)據(jù)。為了能讓網(wǎng)站與用戶產(chǎn)生 共鳴,我們使用了顏色豐富的信息圖引導(dǎo)用戶了解南北戰(zhàn)爭(zhēng)的史實(shí),這里面包括“Who They Were”,“Weapons of War”,“How They Died”,“ 5 Deadliest Battles”, “Paying for the War” and “West Point Warriors”幾大主題。通過(guò)給用戶提供需要的信息,無(wú)論是南北戰(zhàn)爭(zhēng)的狂熱達(dá)人還是7年級(jí)的歷史學(xué)生,都能在學(xué)習(xí)南北戰(zhàn)爭(zhēng)的過(guò)程中得到豐富的知識(shí)和十 足的樂(lè)趣。
2.做足功課
學(xué)習(xí)和吸收。你和客戶溝通的越多,你了解的就越多。設(shè)計(jì)之前要深入 閱讀需求文檔,對(duì)客戶的領(lǐng)域也要做好研究調(diào)查,同時(shí)詳盡地檢查好所有內(nèi)容,全面徹底地理解客戶希望達(dá)到的目標(biāo)(無(wú)論這個(gè)目標(biāo)有多小),如果可以的話和各個(gè) 部門的人員溝通了解,當(dāng)然是越多越好了。在這些前期工作做好之后,我們也對(duì)項(xiàng)目有了最全面準(zhǔn)確的了解,就可以進(jìn)行下一階段的工作了。
另外一個(gè)比較重要的,同行可能會(huì)有類似的產(chǎn)品案例分析,我們要善于從中學(xué)習(xí)??纯磩e人的作品是否有閃光點(diǎn)可以學(xué)習(xí)?里面有沒(méi)有什么錯(cuò)誤是自己可以避免的?你們的產(chǎn)品之間是否有共通的地方?他們的設(shè)計(jì)有沒(méi)有什么缺陷?這些問(wèn)題的答案會(huì)成為你項(xiàng)目的靈感來(lái)源之一。
你 可以分析的案例類型中有些也許會(huì)讓你覺得富有戲劇性??赡苣阏谠O(shè)計(jì)一款音響設(shè)備的App,卻要參考一個(gè)賣貓糧的產(chǎn)品。但是這對(duì)你的設(shè)計(jì)也會(huì)有幫助,因?yàn)?在貓糧網(wǎng)站和音響設(shè)備網(wǎng)站上的用戶行為很可能是十分相似的。除此之外,你也可以從不同的行業(yè)當(dāng)中學(xué)到非常寶貴的用戶體驗(yàn)方面的實(shí)踐經(jīng)驗(yàn)。
3.做用戶的擁護(hù)者
我們時(shí)常把用戶當(dāng)做客戶,雖然實(shí)際上不完全是這樣的。任何項(xiàng)目都會(huì)要求達(dá)到一些商業(yè)目標(biāo),UX設(shè)計(jì)師的職責(zé)就是實(shí)現(xiàn)這些目標(biāo),同時(shí)又要讓客戶了解用戶的需求。一個(gè)好的數(shù)字產(chǎn)品總是能在滿足商業(yè)目標(biāo)和用戶需求之間找到平衡。
4.忘掉Nancy,多想想用戶類型
當(dāng) 我們開始構(gòu)建內(nèi)容時(shí),人物角色(persona)就變得很重要了??v觀網(wǎng)站全部?jī)?nèi)容,思考用戶想要的是什么。這樣可以幫助確定內(nèi)容的優(yōu)先級(jí)并確保我們構(gòu)建 的內(nèi)容是以用戶為中心的。但是傳統(tǒng)的人物角色是這樣構(gòu)建的—“南希,一個(gè)28-35歲的婦女,開著一輛經(jīng)濟(jì)適用車,有一臺(tái)用了4年的電腦,主要用來(lái)發(fā)郵 件,年薪30K-50k,她想到比價(jià)商店買便宜的機(jī)票去看望弗羅里達(dá)的媽媽。”— 這樣的人物角色構(gòu)建方式對(duì)實(shí)際的用戶行為沒(méi)有深入了解和表現(xiàn)。
譯者注:Persona 即人物角色,是指針對(duì)網(wǎng)站目標(biāo)群體真實(shí)特征的勾勒,是真實(shí)用戶的綜合原型。我們對(duì)產(chǎn)品使用者的目標(biāo)、行為、觀點(diǎn)等進(jìn)行研究,將這些要素抽象綜合成為一組對(duì) 典型產(chǎn)品使用者的描述,以輔助產(chǎn)品的決策和設(shè)計(jì)。簡(jiǎn)單說(shuō)來(lái),Persona是在大量調(diào)研的基礎(chǔ)上經(jīng)過(guò)處理的真實(shí)有效的數(shù),抽象出角色、場(chǎng)景、劇情的特征, 形成一個(gè)或多個(gè)虛擬角色。(來(lái)源:百度百科)
相反的,我們根據(jù)用戶在網(wǎng)上的行為來(lái)給不同的用戶類型分組,例如“瀏覽信息”、“比價(jià)購(gòu)物”、 “消磨時(shí)間”、“查找專業(yè)信息”等行為。這樣分組會(huì)讓你更容易理解我們的用戶出于什么原因而使用網(wǎng)站和App,以及文本的使用情況,用戶搜尋的內(nèi)容以及時(shí) 間的使用。掌握了這些信息后,你可以基于用戶的行為模式設(shè)計(jì)出更好的網(wǎng)站或App,這時(shí)用戶的網(wǎng)名,年齡,職業(yè)和收入水平這些信息也就變得無(wú)關(guān)緊要了。
5.少即多
相 信這個(gè)道理大家都了解了,很多人會(huì)覺得沒(méi)有解釋的必要。但是很多網(wǎng)站和App仍然不能正確的應(yīng)用這一原則。其實(shí)關(guān)鍵點(diǎn)在于將用戶所需的內(nèi)容刪減到最低限 度。那些沒(méi)有價(jià)值、混淆用戶的內(nèi)容應(yīng)該果斷刪除。你要十分清楚你希望用戶怎樣來(lái)使用你的網(wǎng)站或應(yīng)用,引導(dǎo)他們?cè)谀愕木W(wǎng)站中穿游。還有,用戶總是希望操作越 簡(jiǎn)單越好,速度越快越好。如果不用點(diǎn)按鈕就可以自動(dòng)跳出下面的內(nèi)容,用戶一定是非常歡迎的。
舉個(gè)例子吧! 我們和Google團(tuán)隊(duì)一起做過(guò)一個(gè)項(xiàng)目—“20 Things ILearned About the Web and Browsers”。 這個(gè)項(xiàng)目的難點(diǎn)在于要讓在線用戶感受實(shí)際閱讀中的觸覺體驗(yàn)。我們?cè)陧?xiàng)目中加入了很多互動(dòng)功能:即時(shí)搜索,翻頁(yè)動(dòng)畫,增強(qiáng)頁(yè)面的插畫,離線模式,書簽和熄燈 模式。我們盡量做得簡(jiǎn)單,有趣,內(nèi)容又充實(shí),讓用戶獲得舒適的閱讀體驗(yàn)。正是我們的設(shè)計(jì)從能從用戶的角度出發(fā),用戶才能在瀏覽網(wǎng)頁(yè)的過(guò)程中愉快地獲取知 識(shí)。
?6. 把自己當(dāng)做是在為FisherPrice工作
譯者注:原文的標(biāo)題是“Pretend you’re working for FisherPrice”,這里的FisherPrice應(yīng)該是指美國(guó)的第一玩具品牌—費(fèi)雪。如果翻譯有誤歡迎批評(píng)指出。
我 們的CEO David Martin說(shuō)過(guò)這樣一句話我很贊同—“All interaction should feel like FisherPrice?!睋Q句話講,當(dāng)你設(shè)計(jì)一些大號(hào)的物品(比如兒童玩具)或?yàn)椤按质种浮钡挠脩袅可矶ㄗ龅臄?shù)字體驗(yàn)時(shí),你會(huì)發(fā)現(xiàn)它同樣會(huì)被其他用戶所 接受。
設(shè)計(jì)中,試著使用尺寸較大的按鈕,滑塊,字段來(lái)代替?zhèn)鹘y(tǒng)的輸入字段。這樣可以有效的提高用戶參與度并降低跳出率。這不也就是一個(gè)UX設(shè)計(jì)師所追求的嗎!
標(biāo)簽的設(shè)計(jì)也相當(dāng)重要。當(dāng)你需要提示用戶提供注冊(cè)信息時(shí),措辭要簡(jiǎn)單、直接、準(zhǔn)確,這樣可以減少很多不必要的麻煩。而且會(huì)讓用戶在情感上強(qiáng)迫自己完成一整套注冊(cè)流程。當(dāng)然了,這也就意味著用戶量、流量、訂單、收益率的增長(zhǎng)。
日本發(fā)生9.0級(jí)地震時(shí),全世界都伸出了援手。我們和Google團(tuán)隊(duì)開發(fā)了一個(gè)平臺(tái),讓全世界的用戶一起分享日本的消息(Message for Japan)。在Fisher Price的啟發(fā)下,我們的網(wǎng)站用很大的按鈕將這些消息分為兩大類別——“Love”和“Hope”,同時(shí)也用了大尺寸的輸入字段號(hào)召人們“Write Your Message”和“Make a Donation”。
7. 從平板電腦得到啟發(fā)
譯者注:原文標(biāo)題“Take cues from tablet”。
鑒于現(xiàn)在平板電腦的普及度越來(lái)越廣,簡(jiǎn)化我們的交互設(shè)計(jì)也變得很有必要。問(wèn)問(wèn)自己的設(shè)計(jì)是否能在平板電腦上完美運(yùn)行。如果答案是肯定的,那么恭喜你,你的設(shè)計(jì)已經(jīng)具備一個(gè)強(qiáng)大的用戶體驗(yàn)所需的2個(gè)基本構(gòu)建塊:清晰的層次結(jié)構(gòu)和直觀的方式表達(dá)。
我們?cè)?a target="_blank">CBSNews.com聯(lián)手為美國(guó)的觀眾創(chuàng)建一個(gè)“elegant and visually rich online news experience(優(yōu)雅并且視覺豐富的在線新聞體驗(yàn))”——60 minutes,在設(shè)計(jì)過(guò)程中我們考慮了結(jié)構(gòu)上的層次和視覺上的直觀表達(dá)等問(wèn)題 。
8.設(shè)計(jì)你的UX
設(shè)計(jì)不是簡(jiǎn)單的排個(gè)版,加些占位文字然后再來(lái)個(gè)導(dǎo)航條就夠了。這里面涉及到的視覺層級(jí)結(jié)構(gòu)、內(nèi)容編排、留白、定位和尺寸等等一系列的問(wèn)題在線框圖設(shè)計(jì)階段就要解決好。在線框圖設(shè)計(jì)階段,如果能按照真實(shí)的設(shè)計(jì)標(biāo)準(zhǔn)來(lái)設(shè)計(jì)的話,那你的方向就是正確的。
9.和各個(gè)部門通力合作
孤立地做用戶體驗(yàn)設(shè)計(jì)不能造就一個(gè)好的作品,而且設(shè)計(jì)上的很多問(wèn)題也不能得到解決。學(xué)會(huì)傾聽、協(xié)作并成為客戶、用戶和內(nèi)部團(tuán)隊(duì)之間溝通的橋梁。只有這樣才能為用戶設(shè)計(jì)出最好的用戶體驗(yàn)同時(shí)又滿足客戶的商業(yè)需求。
記住,你不是一個(gè)人在做設(shè)計(jì)。UX設(shè)計(jì)師,視覺設(shè)計(jì)師還有交互設(shè)計(jì)師共同造就了一個(gè)項(xiàng)目的成功——這是需要多方協(xié)作,多部門共同努力才可以完成的目標(biāo)。當(dāng)每個(gè)人都能在工作中一起分享激情,各盡其能,暢所欲言,往往就能創(chuàng)造奇跡。
10.不給自己的作業(yè)評(píng)分
設(shè) 計(jì)是很少可以一擊命中的,在項(xiàng)目的跟進(jìn)過(guò)程中要做好迭代設(shè)計(jì)的準(zhǔn)備。我始終堅(jiān)持認(rèn)為設(shè)計(jì)師對(duì)自己的作品應(yīng)該只做定量分析。跟蹤產(chǎn)品性能表現(xiàn)并理解哪里用戶 量正在下降是非常重要的,這些工作應(yīng)該在內(nèi)部完成。而且只有讓第三方來(lái)進(jìn)行用戶數(shù)據(jù)的定性分析才能保證項(xiàng)目測(cè)試環(huán)境的客觀性。如果這也由內(nèi)部來(lái)完成,就會(huì) 好像你做好作業(yè)然后自己修改一樣,很難得到想要的真實(shí)數(shù)據(jù)。所以,設(shè)計(jì)師要想獲得真實(shí)的客觀的答案,就讓別人來(lái)做用戶測(cè)試,然后將測(cè)試得到的數(shù)據(jù)應(yīng)用到下 一次迭代設(shè)計(jì)中。
原文來(lái)自:ui中國(guó)
- 目前還沒(méi)評(píng)論,等你發(fā)揮!