做好用戶體驗(yàn),掌握這些要素就夠(二)

8 評(píng)論 24620 瀏覽 91 收藏 22 分鐘

有時(shí)我們?cè)谧鲇脩趔w驗(yàn)或交互設(shè)計(jì)時(shí),怎樣做到易用性?怎么才會(huì)讓用戶覺得這是好體驗(yàn)?其實(shí)這個(gè)要遵循一些設(shè)計(jì)原則,懂些設(shè)計(jì)思想,然后將這些要素融入產(chǎn)品中,才能讓用戶感受到好的體驗(yàn)。

結(jié)合我之前上一篇文章【做好用戶體驗(yàn),掌握這些要素就夠(一)】,繼續(xù)往下寫。分享這些知識(shí)的目標(biāo)很簡單,幫助對(duì)用戶體驗(yàn)有興趣的朋友,系統(tǒng)整理下用戶體驗(yàn)相關(guān)知識(shí)。

因?yàn)樯掀恼聦懥?0個(gè)要素,這第二篇自然是從“11”開始了。廢話少說,看下圖:

金字塔圖2

11. 可預(yù)見

人生下來就有各種害怕,也就是說缺少安全感。生活中,怕餓、怕生病、怕老、怕死;工作中,怕自己被取代、怕被開除、怕領(lǐng)導(dǎo)對(duì)自己有看法,也怕當(dāng)眾演講;談對(duì)象,怕對(duì)方和自己分手,怕情敵挖墻腳。所以我們有了醫(yī)院、有了保險(xiǎn)公司的巨額利潤,有了各種職業(yè)培訓(xùn)機(jī)構(gòu),等等。

正是我們太多的不安感,所以才希望對(duì)事情的把控感,希望事情是可預(yù)見的。否則,我們的不安感隨之出現(xiàn),產(chǎn)生負(fù)面情緒。

假設(shè)吧,我的老友孫敏斌,從廣州來北京,自己請(qǐng)客吃飯,然后找了家環(huán)境好點(diǎn)的飯店吃飯。拿起菜單要點(diǎn)菜,看菜都不錯(cuò),圖片好看有檔次,讓人很有食欲,可是每個(gè)菜的后面都沒標(biāo)明價(jià)錢。我心里這會(huì)可不踏實(shí)了,會(huì)犯嘀咕:這菜一盤得多少錢?最后算賬錢不夠這可咋辦…。沒法預(yù)見最后總價(jià),很不友好(當(dāng)然飯店都標(biāo)價(jià)了,只是比方而已)。

還有,之前單位組織后天爬山,大家是不是也會(huì)想了解這山多高???后天天氣怎樣,會(huì)下雨嗎…。為什么想了解這么多,是不是把控感?希望事情是可預(yù)見的?可預(yù)見自然有了安全感,心理踏實(shí)了,體驗(yàn)好了。

運(yùn)用到產(chǎn)品設(shè)計(jì)中也一樣,本質(zhì)不變,也希望產(chǎn)品是可控的,比如我(公眾號(hào):用戶體驗(yàn)張銘),現(xiàn)在還有多久能注冊(cè)完,又或者,打車預(yù)計(jì)多少錢,司機(jī)預(yù)計(jì)多久能來接我,剛下訂單大概多久能寄到…,都希望是可以預(yù)見到的,然后心里踏實(shí)。

可預(yù)見

再發(fā)幾張自己設(shè)計(jì)過的吧:

可預(yù)見-自己

12. 拆分

春天我有時(shí)會(huì)去爬香山,順著石頭臺(tái)階一直往山頂走,有個(gè)習(xí)慣,就是在山腰的平臺(tái)歇上個(gè)五六分鐘,然后再繼續(xù)到山頂。當(dāng)然有時(shí)和朋友比速度,我也會(huì)中間不帶歇爬山山頂。但是好累人的。說到這,我在想,當(dāng)時(shí)設(shè)計(jì)香山登頂路線的時(shí)候,為什么中間會(huì)有個(gè)平臺(tái)?這種設(shè)計(jì)也是比較人性化的。從用戶體驗(yàn)角度考慮,不想登山者太累。

延伸到咱們的產(chǎn)品設(shè)計(jì),就很容易理解,有些頁面內(nèi)容,明明能一頁搞定的,可他就是分成兩頁或三頁,寧可增加跳轉(zhuǎn)頁面的麻煩,也不讓你在一個(gè)頁面讓你全部操作完。理由就是:減少用戶的認(rèn)知壓力,同時(shí)也將麻煩的操作分開,會(huì)讓用戶顯得輕松舒服些。

下面,是我之前參與設(shè)計(jì)過的產(chǎn)品

拆分

13. 一致性

為什么要設(shè)計(jì)一致性?

因?yàn)槟軌颍?/p>

  • 熟悉了產(chǎn)品,因?yàn)橐恢滦?,到別的模塊,更易理解產(chǎn)品,給用戶省事;
  • 交互操作的一致性,熟練之后,遷移到別的模塊,更易上手,省事;
  • 統(tǒng)一風(fēng)格使用戶感覺舒服、提升產(chǎn)品體驗(yàn);

這里主要說的是界面色調(diào)、布局、交互操作、風(fēng)格等,這些風(fēng)格的一致性。

稍微說下,如果界面、布局的一致性,在這個(gè)界面的布局是一個(gè)結(jié)構(gòu)的,在另一個(gè)界面則變成了完全不一樣的,雖然也不說會(huì)沒法看懂,但是總覺得不那么流暢,需要定定神,適當(dāng)?shù)膶W(xué)習(xí),多少還是給用戶造成了不便,所以盡量統(tǒng)一風(fēng)格。

操作的一致性,應(yīng)該顯得更為重要了,各個(gè)地方的操作不一樣,顯而易見的是,用戶得各種學(xué)習(xí)成本,而且更增加操作錯(cuò)誤的概率。

關(guān)于風(fēng)格一致性,那就更好理解,試想,在歐式的別墅里,設(shè)計(jì)裝潢,處處體現(xiàn)巴洛克風(fēng)格,的家具,可是在這里面有部分家具是中式風(fēng)格的,顯得不倫不類,有點(diǎn)別扭。更別談舒服了。

自然,這種風(fēng)格的不統(tǒng)一,那這別墅到底是歐式還是中式風(fēng)格,會(huì)讓人覺得奇怪。

14. 常識(shí)

要充分利用常識(shí),這樣更容易設(shè)計(jì)出好用的產(chǎn)品。大家生活在一起獲得的常識(shí),在產(chǎn)品中他同樣也是常識(shí),可能就是表現(xiàn)的形式有點(diǎn)兒變化,但常識(shí)的性質(zhì)是不變的。

“王婆賣瓜,自賣自夸”這話,是有點(diǎn)貶義、諷刺的意思吧。要是王婆賣瓜,買家都夸,這就說明,王婆家的瓜確實(shí)好,用句互聯(lián)網(wǎng)思維來說,這是口碑好啊。

把這個(gè)生活中的常識(shí),映射到產(chǎn)品里,這就是大眾點(diǎn)評(píng),里面店鋪,如小肥羊火鍋店,大家的評(píng)論,有說好吃,環(huán)境好,服務(wù)好。看的用戶,就會(huì)覺得,這家店確實(shí)好,因?yàn)榇蠹叶颊f好嘛。當(dāng)然,要是大部分人說不好的,那看到這些評(píng)論的人,可能就不會(huì)去這家店了。

還有京東、淘寶、美團(tuán)、餓了么等待,都把這種常識(shí)搬到產(chǎn)品里,因?yàn)榫€下消費(fèi)是人,互聯(lián)網(wǎng)中的線上消費(fèi)還是人,人有人性,人性中的常識(shí)還是常識(shí),是不變的。

如下圖:

常識(shí)

15. 不輕易改變

前年我回了趟母校,我們班慶祝畢業(yè)十年,回到母校。轉(zhuǎn)了一圈,自己兩個(gè)感覺,第一個(gè)感覺是:好像少點(diǎn)什么;第二個(gè)感覺是:欣慰。先說欣慰,看到母校建了不少新樓,圖書館也是新的,又高又大,從外面看,宏偉漂亮,畢竟母校又向前發(fā)展了,所以感覺欣慰。再說說好像少點(diǎn)什么吧,我熟悉的很多地方,都變樣了,承載我記憶的小路,樹蔭等,不是記憶的模樣了。記憶中有快樂、悲傷,可這就是我的記憶啊。但是沒了,就覺得少點(diǎn)什么。

下圖是之前在母校拍的兩張照片

母校照片

當(dāng)然還得從產(chǎn)品的另一個(gè)角度說,就是易用性、易操作性,之前的界面布局以及操作方法,用戶都很習(xí)慣了,突然變化比較大,之前用產(chǎn)品所學(xué)習(xí)的內(nèi)容都沒用,又得重新學(xué)習(xí),必然會(huì)增加用戶學(xué)習(xí)成本,甚至有用戶會(huì)放棄該產(chǎn)品。

所以市場(chǎng)上的一般習(xí)慣是,產(chǎn)品在更新版本時(shí),要是沒有特殊理由,一般不會(huì)有大的改變。更多的是優(yōu)化調(diào)整。

16. 無需學(xué)習(xí)

其實(shí),之前的文章已經(jīng)提到過,設(shè)計(jì)產(chǎn)品盡量不讓用戶學(xué)習(xí),但我還是當(dāng)做一個(gè)要素,提一下,算是重點(diǎn)強(qiáng)調(diào)下吧。

打開手機(jī),應(yīng)用商店里,產(chǎn)品成千上萬,競爭相當(dāng)激烈。選了一款理財(cái)產(chǎn)品,進(jìn)入之后界面比較陌生,操作還比較麻煩,要花不少時(shí)間學(xué)習(xí)才能使用,用戶覺得太麻煩,會(huì)直接下另一個(gè)靠譜、易上手、利率相當(dāng)?shù)睦碡?cái)產(chǎn)品。試想,直接刪掉那個(gè)需要學(xué)習(xí)的產(chǎn)品,也是分分鐘的事吧。

所以,盡量設(shè)計(jì)的產(chǎn)品是,盡量符合用戶預(yù)期、習(xí)慣、熟悉操作的產(chǎn)品,讓用戶無需學(xué)習(xí),就能夠使用的產(chǎn)品。

17. 輔助記憶

再認(rèn)比回憶更容易,選擇題比填空題咱們大腦壓力更小。

輔助記憶常用的方法有:寫日記(幫助自己記憶之前的事情),警方破案備案錄(輔助警察記憶案件內(nèi)容及細(xì)節(jié)),定時(shí)器(做菜怕忘關(guān)火等),日歷里的計(jì)事功能(會(huì)議太多,怕腦子記不過來)、導(dǎo)航(幫助自己知道現(xiàn)在在哪個(gè)地方)

比如:在百度搜過絞股藍(lán)的功效與作用,過會(huì)又忘了,這時(shí)又想再重新輸入絞股藍(lán)的功效與作用,你鼠標(biāo)一點(diǎn)擊輸入欄,你會(huì)看見,下拉框,系統(tǒng)幫你記住了之前輸入的信息,包括這條,就列在下拉列表最上方。是不是也讓人挺高興的。

我經(jīng)常會(huì)在京東商城購書,在頁面的下方,會(huì)有個(gè)我的足跡,把我之前點(diǎn)擊瀏覽過的書籍,都會(huì)列在下面,雖說這個(gè)用的不是很頻繁,但有時(shí)會(huì)迷糊,自己好像對(duì)剛才瀏覽的一本書有興趣,可就是記不起名字,這時(shí)候,我的足跡就能幫上我的忙了。

輔助記憶

18. 現(xiàn)實(shí)原則

現(xiàn)實(shí)生活中什么樣,搬到線上,還是一樣的欲望。人性是不變的,不會(huì)因?yàn)閺木€下轉(zhuǎn)到線上,需求就變了,最多也只會(huì),因?yàn)楝F(xiàn)實(shí)道德法律等的約束,而控制或壓抑一些欲望。

比如:好色的人,線上必然會(huì)去找黃色圖片,找AV視頻。但是在現(xiàn)實(shí)中,她也不敢去偷窺,因?yàn)橛械赖潞头杉s束著。

喜歡閱讀的人,手機(jī)里,怎么著也得裝微信讀書、京東閱讀類似閱讀軟件。喜歡散打的人,自然也會(huì)在網(wǎng)絡(luò)上搜散打、武術(shù)的視頻。

說個(gè)具體點(diǎn)的功能:收藏,逛街到西單,看見一雙鞋,愛不釋手,花錢買下來了。先收藏在鞋柜里,哪天需要穿的時(shí)候,就派上用場(chǎng)。有收藏字畫的,有收藏郵票的,就是因?yàn)橄矚g或投資,這些郵票、字畫,對(duì)他們來說是很有價(jià)值的。

同理,延伸到互聯(lián)網(wǎng)產(chǎn)品,如“人人都是產(chǎn)品經(jīng)理”的文章收藏功能,也是覺得這文章對(duì)自己能力提升有價(jià)值,所以才先收藏,下次繼續(xù)閱讀學(xué)習(xí)。再比方,知乎的文章收藏;京東看到本書,覺得挺好,先收藏,等合適機(jī)會(huì)再下單。淘寶看上了件衣服,蠻喜歡,先收藏,下次再買,等等。所有這些都是遵守現(xiàn)實(shí)原則,而開發(fā)出的線上功能。

下圖是人人都是產(chǎn)品經(jīng)理的收藏夾:

現(xiàn)實(shí)原則

19. 相關(guān)性

意思簡單說,關(guān)系比較密切的東西,一般都放在一起。一類的東西一般都放在一個(gè)區(qū)域。

如咱們家里的廚房,放的是油鹽醬醋,碗筷勺子,灶臺(tái)油煙機(jī),等等。其中油鹽醬醋相關(guān)性更緊密,所以我們一般放一塊,灶臺(tái)和油煙機(jī)相關(guān)性強(qiáng),自然也是放一塊。

那涉及到互聯(lián)網(wǎng)產(chǎn)品中,相關(guān)性也幾乎是處處體現(xiàn)著。閱讀軟件里,熱門推薦欄目下的內(nèi)容都是,最近熱門的書籍。投資欄目下,都是怎么理財(cái)投資相關(guān)的書籍。

20. 化繁為簡

記得初中、高中時(shí)代,覺得做數(shù)學(xué)題很復(fù)雜很難,現(xiàn)在想想都頭大。數(shù)學(xué)題復(fù)雜在哪?無非是把N個(gè)公式套在一道題上。其實(shí),我們單獨(dú)計(jì)算一個(gè)公式,并不復(fù)雜,但是套在一道題上,就復(fù)雜的很。這種化繁為簡的方法是10.6模塊化。

如何化繁為簡,還真不是很輕松就能說清楚的,因?yàn)樯婕暗膬?nèi)容相對(duì)繁瑣、復(fù)雜些。為了說的清楚些,所以我分成以下10小點(diǎn)來說:

20.1 化繁為簡 – 約束

說起約束,讓我想起在上篇文章里,說到的另一個(gè)要素:封閉式(有興趣看連接),都是防止用戶發(fā)生其他操作為目的,在別的設(shè)計(jì)領(lǐng)域可能會(huì)有各種區(qū)別,但是在交互設(shè)計(jì)中,個(gè)人理解功能時(shí)一樣的,所以在這不細(xì)說了。

20.2 化繁為簡 – 標(biāo)準(zhǔn)化

這也是我在前一篇文章里說到了,有興趣請(qǐng)看上篇文章連接,在這也不重復(fù)說。

20.3 化繁為簡 – 輔助記憶

在上面第17 輔助記憶,這個(gè)要素里,已經(jīng)說了,在這不再細(xì)說

20.4 化繁為簡 – 轉(zhuǎn)移

這個(gè)在移動(dòng)端產(chǎn)品中用的比較多,有移動(dòng)端和PC端的產(chǎn)品中,為了方便用戶,在移動(dòng)環(huán)境下使用產(chǎn)品,所以咱們看到手機(jī)里的APP很多,但是從用戶體驗(yàn)考慮,又不方便把所有功能都嵌入在APP中,所以,我們將一些不是特別必須的功能,轉(zhuǎn)移到了PC端中。比如“人人都是產(chǎn)品經(jīng)理”中的移動(dòng)端,我看就有不少功能,只有在PC的網(wǎng)站有,而移動(dòng)端呢,更多的只是偏向于閱讀為主的功能。

20.5 化繁為簡 – 分類

將復(fù)雜的內(nèi)容分成不同種類,不同種類有可能繼續(xù)分成更細(xì)的種類。

比如,咱們手機(jī)裝了上百個(gè)軟件,這樣不分類,得多復(fù)雜?找起來可費(fèi)勁了。所以優(yōu)酷、騰訊視頻、愛奇藝這些,咱們會(huì)建一個(gè)視頻的文件夾。新聞?lì)惖能浖蹅円矔?huì)建個(gè)文件夾等。還有咱們的分類導(dǎo)航等。

20.6 化繁為簡 – 模塊化

這也就是開始說的數(shù)學(xué)題,將這道復(fù)雜的數(shù)學(xué)題,分成一個(gè)個(gè)簡單的獨(dú)立公式,將整體模塊化。

20.7 化繁為簡 – 刪除

理由和上面的隱藏類似,因?yàn)闁|西太多,把一些可有可無的內(nèi)容刪掉,目的也是為了簡化界面與操作,使產(chǎn)品更易掌握。

20.8 化繁為簡 – 隱藏

大家都明白,復(fù)雜在某種意義上,是東西多,繁雜,讓人大腦處理信息比較累。所以,我們?cè)谠O(shè)計(jì)的時(shí)候,將一些不是特重要,或不是那么頻繁的操作或內(nèi)容,隱藏在一個(gè)按鈕中,或者在二級(jí)界面中,或者在特定的操作行為里。隱藏的目的是,使界面視覺看起來比較簡潔。用戶也會(huì)因?yàn)榭雌饋砗啙?,顯得產(chǎn)品更易上手、更友好。

下圖,是微信隱藏功能的具體圖

隱藏

20.9 化繁為簡 – 明確指引

我是走在地鐵里,稍微不注意就蒙圈了。但是,這時(shí)候我并不用擔(dān)心,只要稍微抬抬頭,看見引路牌上,就知道,這是去13號(hào)線,往那邊走是去4號(hào)線的。

還有我們參加一個(gè)展會(huì),第一次來不熟,要去某某品牌館,不知道路怎么走。這時(shí)工作詢問工作人員,幫著指引等。

在互聯(lián)網(wǎng)產(chǎn)品中,用的比較多的是,用戶第一次使用該產(chǎn)品,出現(xiàn)的新手引導(dǎo),也有版本更新后,有些不錯(cuò)的新功能,會(huì)出現(xiàn)引導(dǎo)等。所有的這一切目的無非就是滿足用戶需求或產(chǎn)品需求。

20.10 化繁為簡 – 用戶心理模型

又在說用戶心理模型:復(fù)雜是什么?想再多討論下,設(shè)計(jì)產(chǎn)品時(shí),得考慮到什么才叫復(fù)雜,從用戶角度思考,在這分兩種復(fù)雜形勢(shì)。

第一種是:用戶主觀上認(rèn)為復(fù)雜,客觀其實(shí)并不算復(fù)雜,我們也稱為復(fù)雜。比如:我父母在家看電視都覺得有些復(fù)雜(用的是小米盒子連接電視),他們一直以來,只習(xí)慣于使用傳統(tǒng)電視的方式換頻道,而使用智能電視之后,遙控器連換臺(tái)的數(shù)字都沒有了。所以,他們認(rèn)為,這種電視也太復(fù)雜了。但是,當(dāng)我們用智能設(shè)備多的人來說,小米電視盒子,剛裝上那天,我?guī)缀蹙蜁?huì)使用了,也不需要看說明書。

第二種是:主觀上認(rèn)為簡單,而客觀上是比較復(fù)雜的,比如:修理汽車的老工程師,修車他覺得很簡單,他只要聽聽聲音,稍微一測(cè)量就知道問題在哪,然后輕松搞定。而對(duì)我們普通司機(jī)來說,修理汽車太復(fù)雜,根本沒法下手。

所以,在這又重申之前那篇文章說到的,用戶心理模型。只要我們?cè)谠O(shè)計(jì)的時(shí)候,充分考慮到用戶心理模型,也就是說在用戶的習(xí)慣、熟悉、文化環(huán)境等的認(rèn)知,我們有較準(zhǔn)確的了解基礎(chǔ)上,盡量把產(chǎn)品設(shè)計(jì)的,讓用戶主觀上認(rèn)為簡單,站用戶的角度思考,最后就有可能設(shè)計(jì)出好用的產(chǎn)品。

總結(jié)

這些要素,是我在工作過程中,感覺到用的相對(duì)較多的,而且對(duì)用戶來說,確實(shí)能提升用戶體驗(yàn)的關(guān)鍵要素?;ㄟ@么多時(shí)間,系統(tǒng)的整理出來,更希望的是,熟透這些要素,展開聯(lián)想,會(huì)發(fā)現(xiàn),咱們一直生活的世界原來這么有趣味。同時(shí),我們又多了雙開悟的眼睛。

 

作者:張銘,微信公眾號(hào):用戶體驗(yàn)張銘。本人從事設(shè)計(jì)12年,經(jīng)歷過金山軟件、中科院等。希望溝通。

本文由 @張銘 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 感覺分析的可好了,挺有用的啊,謝謝學(xué)長,咱兩絕對(duì)是一個(gè)學(xué)校的!

    來自北京 回復(fù)
    1. 是嗎,請(qǐng)問同學(xué)是哪個(gè)學(xué)校的? ??

      來自北京 回復(fù)
  2. 感覺作者分析的很詳細(xì),可是中間我不知道為什么覺得相互重復(fù)的有點(diǎn)多。很多都可以合并。

    來自北京 回復(fù)
  3. 哈哈,化繁為簡那部分和簡約至上那本書里講的一樣

    來自北京 回復(fù)
    1. 是嗎?太好了,求書名全稱?我也去看看

      來自北京 回復(fù)
    2. 而且,說實(shí)話,當(dāng)時(shí)本來化繁為簡部分寫的比較多,后來一看這篇文章,已經(jīng)快6000字了,刪了很多內(nèi)容,自己感覺這部分寫的還是比較簡要,之后我會(huì)針對(duì)化繁為簡,寫篇具體點(diǎn)的文章的。

      來自北京 回復(fù)
  4. 不知道筆者對(duì)于蘋果本和win系統(tǒng)電腦中關(guān)于鼠標(biāo)滑輪操作網(wǎng)頁上下移動(dòng)會(huì)產(chǎn)生相反的結(jié)果,有何看法?

    來自湖北 回復(fù)
    1. 有趣的問題,這是你看了我上篇文章的映射吧?在這寫不了太多字,我會(huì)在我公眾號(hào):用戶體驗(yàn)張銘,單獨(dú)寫篇文章說這個(gè)有趣的問題。謝謝

      來自北京 回復(fù)