從七個經(jīng)典童話中學(xué)到的用戶體驗知識

3 評論 8705 瀏覽 48 收藏 25 分鐘

編劇大師羅伯特·麥基曾經(jīng)這樣寫道:故事是人類交流的貨幣。故事是我們對周圍世界的感知的方式。我們越是了解周圍的環(huán)境,我們就越有可能有生存的機會,我們通過講故事來交換這些賴以生存的知識。每個被分享的故事都有我們從真實世界學(xué)到的教訓(xùn)。

今天,我們的故事被混雜在了數(shù)字和現(xiàn)實的世界當(dāng)中。我們無間隙的穿梭在兩者之間,常常忘記了數(shù)字世界不一定會吻合現(xiàn)實世界的規(guī)律,這可能會讓我們感到困惑。

童話受歡迎以及能夠被流傳至今的原因很大程度上是因為它的簡單明了:它們看起來是在教導(dǎo)我們一個關(guān)于我們生活著的真實世界的教訓(xùn)。但是這些教訓(xùn)同樣也可以用在虛擬的數(shù)字世界中,接下來我會從另外一個角度來講述這些故事。

1,三只小豬

UX知識:建立在一個堅實的基礎(chǔ)上是很重要的

很多時候,網(wǎng)站和移動應(yīng)用省略了諸如創(chuàng)建工作流,分類,分析網(wǎng)站分布,內(nèi)容矩陣等計劃和架構(gòu)的工作,而從概念很快的推進到UI設(shè)計。想象一下試圖從內(nèi)部設(shè)計一個還沒有建成的房子。

UX設(shè)計5要素中的3個直接被網(wǎng)站的組織和構(gòu)架影響。正如三只小豬的故事提醒我們,如果計劃太匆忙沒有被充分的準(zhǔn)備可能會導(dǎo)致不穩(wěn)固的基礎(chǔ),在數(shù)字 的世界里這意味著粗制濫造的用戶旅程、雜亂的內(nèi)容和難以駕馭的網(wǎng)站。一旦這些問題產(chǎn)生了,他們基本不可能自己消失。網(wǎng)站/應(yīng)用程序的所有者將會被迫留在這 個不穩(wěn)定的結(jié)構(gòu)上,并且修補磨平裂縫直到永遠(yuǎn)。

好消息是,網(wǎng)頁的歷史告訴我們好的構(gòu)架主要是需要牢記以下基礎(chǔ)知識:創(chuàng)建內(nèi)容的層級;組織內(nèi)容邏輯;逐步的去展示內(nèi)容;使用與結(jié)構(gòu)一致并且實用的導(dǎo)航;提供明確的指示標(biāo)。維基百科之所以能夠被使用這么長的原因是因為——它將上面的基礎(chǔ)執(zhí)行的非常好。

th201607055

△ 一個網(wǎng)站內(nèi)容的邏輯層級

我發(fā)現(xiàn)抵御大野狼毀掉你的網(wǎng)站/app最好的方法是:1. 制作一個站點地圖。2. 寫一個“標(biāo)準(zhǔn)”文檔。這兩個文檔都應(yīng)當(dāng)是可視化的。站點地圖應(yīng)當(dāng)將內(nèi)容的層級分組可視化,而標(biāo)準(zhǔn)文檔應(yīng)該列出內(nèi)容管理的規(guī)則。例如標(biāo)準(zhǔn)23:所有的頁面/ 屏幕都應(yīng)該有一個無所不在的主導(dǎo)航。一個網(wǎng)站只有靠這兩個文檔來武裝,才有可能贏得更大的生存機會。

花時間去建立一個穩(wěn)定的結(jié)構(gòu)。

th2016070514

2,豌豆公主

UX知識:不要去挑戰(zhàn)用戶的預(yù)期

傳統(tǒng)的網(wǎng)站由三個關(guān)鍵的UI結(jié)構(gòu)組成:一個 header,一個 body,和一個 footer。這些都是為設(shè)計師準(zhǔn)備的一塊久經(jīng)考驗的畫布。

隨著時間的推移,這些組件都包含了用戶的預(yù)期在里面。例如,一個header通常會包含:網(wǎng)站名稱(和logo),主導(dǎo)航,功能導(dǎo)航,搜索功能,登錄等。此外header區(qū)域遵循一個模式:品牌logo通常被放置在header的最左側(cè)。

并不是所有的網(wǎng)站都這么做,有些人認(rèn)為,打破規(guī)則會開拓更好更獨特的數(shù)字體驗。我不打算反對這些觀點,但是事實證明絕大多數(shù)的網(wǎng)頁遵循著這樣的模式。

全球互聯(lián)網(wǎng)的一致性增加了用戶看到這種模式的可能,他們越是看到一個logo被放在網(wǎng)頁的左側(cè),越是希望它在那里。這意味著用戶在看到一個新網(wǎng)站之前就會對它有所期待。而這被稱之為心智模式,而在數(shù)字產(chǎn)品的UX中心智模式意味著:

數(shù)字產(chǎn)品中的心理模式是為了識別含義和節(jié)約時間。

舉個栗子,一個房子的心智模型是有四個墻,一個屋頂,一扇窗戶和一扇門。當(dāng)你走近任何一棟房子,你都知道要找一個最像門的地方進去,而不是窗戶。這節(jié)省了你的時間,你不會去評估任何一個可以進去的入口。同樣對于用戶來說,一個網(wǎng)站也包含著類似這樣的心智模型。

th2016070512

△ 一座房子的心理模型

豌豆公主的故事告訴我們,不要把事物放在用戶期望的地方之外。像公主一樣,如果一個東西不在她的期望之中,就會帶來一個糟糕的體驗。

同樣,創(chuàng)建一個標(biāo)準(zhǔn)文檔也可以幫助避免創(chuàng)建一個不符合期望的網(wǎng)站。我們可以通過競品分析和用戶測試來了解這些。競品分析常常被視為一種在競爭中保持領(lǐng)先的方式,但事實上它們還能幫助你在用戶使用你的網(wǎng)站或者app前預(yù)測用戶的心理模型。

比如說你是一個汽車制造商,幾乎每一個你的目標(biāo)用戶訪問你的網(wǎng)站的同時也會訪問競爭對手的網(wǎng)站。如果競爭對手都把它們的導(dǎo)航放在header上,而 你偏偏非要把導(dǎo)航放在左側(cè)。你的目標(biāo)用戶訪問你網(wǎng)站的時候就會感到困惑和混亂。忽然間,瀏覽你的網(wǎng)站需要付出思考和努力。一個本來很簡單的任務(wù)變得艱巨而 復(fù)雜,這些都是因為他們的期望受到了不必要的挑戰(zhàn)。

用戶是敏感的,要像對待公主那樣對待他們。

th201607054

3,糖果屋

UX知識:用戶總是在尋找回家的路

最著名的影響界面設(shè)計的童話是《糖果屋》,一個關(guān)于兩個小孩走進了森林,被一個女巫欺騙,最終靠著面包屑找到回家的路的故事。面包屑現(xiàn)在是網(wǎng)頁設(shè)計 的一個共同特點,尤其是對于那些內(nèi)容必須分成欄目和子欄目的大型網(wǎng)站。面包屑導(dǎo)航服務(wù)于三個主要用途:定位、導(dǎo)航和讓用戶安心。他們通過網(wǎng)站結(jié)構(gòu)來告訴用 戶他們現(xiàn)在在哪里,然后用超鏈接讓他們能夠返回到之前的位置。

th201607051

△ Argos.co.uk上面包屑的例子

最最重要的是面包屑導(dǎo)航能讓人安心。大多數(shù)的網(wǎng)上活動都會涉及一種叫信息覓食的行為——是對知識的搜尋。想想看你在IMDB(互聯(lián)網(wǎng)電影數(shù)據(jù)庫)上 找了多少次那個你記不起名字的演員。通常來說,這種“覓食”的行為需要比一個搜索結(jié)果頁面更深入的東西。而這種情況下,面包屑是最管用的。

試想一下,你想給你的禮物找一個紅色的蝴蝶結(jié)包裝一下。你用你最喜歡的搜索引擎搜索蝴蝶結(jié),并且到達了一個網(wǎng)上零售商店的頁面。如果這個網(wǎng)站有面包屑導(dǎo)航,那么它看起來可能是這樣:

禮品 > 包裝材料 > 蝴蝶結(jié)(Bows)

面包屑會提供你所看到的信息的上下文,并且向你保證你在正確的位置上。如果一個面包屑看起來像這樣:

禮品 > 體育休閑 > 射箭工具 > 弓(Bows)

……那么你顯然會失去信心。

th201607057

4,金發(fā)女孩和三只熊

UX知識:錨點有助于提供信息環(huán)境和重點

我們其實在借這個童話的名義說一個老掉牙的UX原理:金發(fā)女孩效應(yīng)。這個效應(yīng)常常發(fā)生在同時展現(xiàn)給用戶三個相似的但是在量上有所區(qū)別的選項的時候。舉個例子,三碗溫度不同的粥。

這種三個按照特定規(guī)模組成的選項會導(dǎo)致兩個重要的狀況被創(chuàng)建:1)形成高低兩個錨點。2)一個確定的中間選項。( 這里不要跟誘餌效應(yīng)混淆,這是一種認(rèn)知偏差,目的類似,但是實施起來并不相同)。

錨點是我們?yōu)榱死斫庹鎸嵉氖澜缍鴦?chuàng)建的一個測量的基準(zhǔn)線。

例如,你打算買一個你從未買過的昂貴的寶石,你從經(jīng)銷商A那得到£5,000的報價。從經(jīng)銷商B那得到£10,000的報價??雌饋斫?jīng)銷商A是更好的交易。

th2016070515

但是當(dāng)你從經(jīng)銷商C那得到£100,000的報價時,經(jīng)銷商A雖然還是最好的選擇,但是經(jīng)銷商B忽然就顯得沒那么糟糕了。如果你買了這塊寶石當(dāng)禮物,在其它更貴的寶石的襯托之下,甚至?xí)X得經(jīng)銷商A的報價很便宜。

th201607059

引入A和B兩個錨點判斷出背景環(huán)境。理想的情況下我們會去尋找更多的信息,在這個例子來說會去尋找更多的報價,這樣我們就可以去判斷A和B是正常報價,而C是特例了。但是,當(dāng)面對的信息有限時,我們只能從已知的內(nèi)容里做出判斷。

在數(shù)字產(chǎn)品中,金發(fā)姑娘效應(yīng)可以用來鼓勵用戶去選擇特定的選項,以完成我們的業(yè)務(wù)目標(biāo)。如果我們在網(wǎng)上銷售服務(wù)或者產(chǎn)品,我們希望突出其中一個。那 就在它的旁邊加上另外兩個選項。這么做會提升它在用戶眼中的吸引力。如果額外的選項被選中了也沒有關(guān)系,不過它們在頁面中的主要作用是為了支持和強調(diào)明星 產(chǎn)品而存在的。

th201607058

assembla.com采用金發(fā)姑娘效應(yīng)來給自己的3個包月計劃定價

設(shè)計在這個效應(yīng)里仍然起著重要的作用。顏色,距離,位置和字體粗細(xì)都用來在視覺上提升明星產(chǎn)品。但是這些選項是舞臺上設(shè)置的錨。

錨點一旦被設(shè)定了,它就很難被改變。這就是為什么大家都覺得跟過去相比現(xiàn)在的一切都如此的貴。這是應(yīng)為價格隨著通貨膨脹增加,但是我們并沒有改變我 們的錨點。例如,我記得我第一次買一包薯片花了20便士?,F(xiàn)在,20年過去了,當(dāng)我花75便士買一包薯片的時候還是跟最初的那個錨點比較。

借用笛卡爾注明的主張“我思故我在”。錨點在我們?nèi)绾胃兄@個世界上的作用告訴我們,我們是任何給定時間里知識的總和。

th201607053

5,丑小鴨

UX知識:美是相對的

丑小鴨故事的主旨是什么?是關(guān)于怎樣克服挑釁行為,抑或宣揚內(nèi)在美?坦白說我也不是很確定。

對我來說,領(lǐng)會丑小鴨故事中所包含的相對性的概念,是能給UX設(shè)計帶來幫助的最重要之處。丑小鴨,作為在同類比較中最差的那個錨點,如果沒有他的存在,其他的伙伴們不會像他們看起來那樣出色。

同樣的邏輯也適用于網(wǎng)頁的復(fù)數(shù)個CTA(行為召喚按鈕)設(shè)計。設(shè)想你在頁面上有一個單一的CTA按鈕(按鈕1),用來提示用戶執(zhí)行某種操作,比如 說,買一件商品或是把商品加入購物籃中。一名瀏覽該頁面的用戶必須做所謂的“Hobson選擇”,即排他性的二選一:a)買或者b)不買。面臨這種選擇的 時候,大多數(shù)用戶會選擇b)不買。

th2016070518

現(xiàn)在設(shè)想,我們在頁面上增加了一個額外的按鈕(按鈕2),它被故意設(shè)計成一種需要用戶付出更多努力,但仍然可以給我們的商業(yè)行為帶來正面效果的選 項,比如說分享這件商品的鏈接到用戶的社交渠道這樣一個操作選項。這個按鈕就是這個例子中的“丑小鴨”。研究表明,當(dāng)把按鈕2放置在按鈕1相鄰的位置時, 會給按鈕1的點擊率帶來提升。這就是所謂的“Hobson+1效應(yīng)“。

th201607056

6,狼來了

UX知識:不要用虛假的信息去誤導(dǎo)用戶

當(dāng)用戶與網(wǎng)站或應(yīng)用發(fā)生交互時,信息會以多種方式向用戶傳達。從內(nèi)容群組化,到所選擇的顏色,用戶總是被我們所創(chuàng)造的標(biāo)示所引導(dǎo)和影響,這便是符號理論的基石概念。(關(guān)于符號的研究,及符號學(xué)和UX設(shè)計的更多討論詳見:icon需要配上文字么?)

一個關(guān)于符號學(xué)應(yīng)用的顯著例子便是設(shè)計準(zhǔn)則之一的功能可供性(affordances)。由UX教父Don?Norman提出,功能可見性被定義為 提供引發(fā)行動的誘因。比如,汽車門把手是被設(shè)計用來讓汽車用戶拉開車門用的,所以其設(shè)計特別鼓勵并輔助了這一類行為的實施。在這個例子中,與用戶溝通的標(biāo) 示含義就是:這是用來拉開的。

th2016070510

汽車門把手提供了“拉開”這一功能可供性

在網(wǎng)絡(luò)設(shè)計的二維世界中,功能可供性的實施要難的多。網(wǎng)絡(luò)設(shè)計的早期年代里,在鏡像真實世界的嘗試中,人們提出了擬物化的準(zhǔn)則。比如曾經(jīng)應(yīng)用在iOS6上的景像深度設(shè)計,大家還記得么?

th201607052

但是后來隨著扁平化設(shè)計的應(yīng)用,原來的方案中留下了很多看起來無法再點擊的按鈕。這些按鈕已經(jīng)完全失去了他們的功能可供性,以至于他們的含義難以解讀。

這給用戶們留下了一個關(guān)于信任的議題。是否所有矩形都是按鈕?這要求接下來的網(wǎng)頁設(shè)計師們,必須負(fù)起艱巨的責(zé)任來保證他們的設(shè)計是經(jīng)過深思熟慮的, 更重要的是保持一致性的。畢竟對含義的釋讀來自于經(jīng)歷的重復(fù)這一過程。如果一個頁面中的藍(lán)色下劃線文字標(biāo)識的是可點擊的鏈接,那么我們就會據(jù)此推測在另一 個頁面中的相同樣式文字提供了同樣的功能。如果這一點被再次驗證,我們的思維過程就會歸納出簡化的模式來應(yīng)對這一特定樣式,即“藍(lán)色?+?文字?+?下劃 線?=?可點擊的鏈接”。

如果我們接收的是虛假的信號,正如狼來了的寓言所提醒的,問題就來了。絲毫不顧及行動帶來的后果,小男孩對狼群到來的虛警和村民趕來后的一無所獲,兩次,便足以讓村民們對示警視而不見,以至于當(dāng)狼真的來了的時候釀成了悲劇。

th2016070519

Lyondell?Basell在標(biāo)題,信息和文字鏈接中都使用了藍(lán)色文字,造成了混淆

當(dāng)用戶訪問站點卻接收到了非本意和錯誤的指示時,同樣的事情便發(fā)生了。如果網(wǎng)站本身的擁有者是知名品牌時,造成的不良效果會得到增幅,因為知名品牌本身具有權(quán)威的性質(zhì)。因此關(guān)鍵在于設(shè)計的一致性,而值得再強調(diào)的是,一份規(guī)范的文檔總是助益良多的。

記?。喝藗兲烊坏男湃螜?quán)威,但是如果權(quán)威說謊,他們就再也不會給予其信任。

th2016070516

7,皇帝的新裝

UX知識:不要害怕挑戰(zhàn)成見

比起弄出一份聲明把之前所有的啟示再特意羅列一遍,這是多好的一種結(jié)束方式?。?/p>

皇帝的新衣是一則告誡人們不要為驕傲所陷的寓言,它提醒著人們應(yīng)該時刻質(zhì)疑自己所被告知的信息。

還記得圖片滾筒么?作為UX設(shè)計早期出現(xiàn)并十分流行的一種元素,幾乎每個網(wǎng)站都對其趨之若鶩,希望在把其放在主頁上以展示圖片庫,宣傳和商品。而至今為止仍有很多網(wǎng)站在這樣做。

th2016070513

但是數(shù)據(jù)表明這些并沒有什么效果,甚至可以說是令人覺得丑陋的。之所以失效主要的原因在于,圖片滾筒的主要設(shè)計意圖是實現(xiàn)內(nèi)容的隱藏和再現(xiàn),而這違背了用戶啟發(fā)中最重要的原則:召回場景中的再識別。

“將對象,行為和選項可視化,來最小化用戶的記憶負(fù)擔(dān)。用戶沒有必要記取當(dāng)前段落之外的信息?!?/p>

當(dāng)用戶翻轉(zhuǎn)滾筒時,他們被強制的記取每一個選項的位置才能做出所預(yù)設(shè)的決定。更糟糕的是,我們?nèi)祟愄焐拖M谧鰶Q策前能看到事物的全貌。這意味著,如果我們知道有25個選項提供給我們,那么我們很可能會看完他們?nèi)吭僮鲞x擇。這對用戶來說并不友好。

正如現(xiàn)實世界一樣,我們創(chuàng)造的數(shù)字世界也是在不斷變化的。這一副景象絕不會持續(xù)太久。在物理的世界和數(shù)字世界的交纏愈發(fā)緊密的當(dāng)下,為了探知用戶體驗是如何參與其中的,周期性并基于證據(jù)的學(xué)習(xí)才是唯一的正確方式。

歷史告訴我們,每當(dāng)一個新的數(shù)字界面問世(臺式電腦,觸摸屏設(shè)備,可穿戴技術(shù)和虛擬現(xiàn)實)我們心目中關(guān)于UX的真理都會被質(zhì)疑。

在這樣的情況下,UI設(shè)計被迫回到原點去付出額外的努力來幫助用戶采用新的技術(shù)。

還記得最開始的時候ios推出擬物化的界面設(shè)計,蘋果這么做是特意通過真實世界來幫助用戶更快的熟悉數(shù)字世界。

扁平化設(shè)計現(xiàn)在已經(jīng)成為了網(wǎng)頁和app的設(shè)計規(guī)范,但是在VR(虛擬現(xiàn)實)的世界中卻沒法這么做。在虛擬世界中一個文件被展示成一本書放在書架上可能是更好的選擇。擬物化可能并沒有死,而是周期性的繼續(xù)存在著。

我們在這里能夠?qū)W到的是,我們無法確定今天知道的知識能夠繼續(xù)在未來被使用。

隨著時間的推移,“輪播圖”可能會被取消。但是我們要知道挑戰(zhàn)慣例是困難的(蘋果花了6次迭代才有信心推出扁平化設(shè)計)。

其中一個解決辦法是采用逐步減少的方式,這個想法最早是由Allan Grinshtein提出。這個方法的前提是,需要用戶熟悉界面到已經(jīng)不需要明顯的設(shè)計線索。設(shè)計最終是由用戶對于界面的熟悉程度來決定的。

隨著曝光的增加,會越來越少的需要設(shè)計去手把手的引導(dǎo)用戶。這會使UX需要迎合大眾的部分去掉,取而代之的是越來越個性化的用戶體驗。

如果我們要創(chuàng)建圖表去說明這一點,它可能看起來像一個這樣的公式?x+y=10。X軸用來代表用戶的專業(yè)水平,1代表用戶不怎么熟悉UI,10代表用戶非常熟悉UI。Y軸代表我們需要在界面上引導(dǎo)用戶的程度。1代表不怎么需要,10代表非常需要。

th2016070511

很容易想象在未來,響應(yīng)式設(shè)計不僅僅是關(guān)于網(wǎng)頁如何適配尺寸。而是一個界面去適應(yīng)不同類型的用戶,高水平的用戶和低水平的用戶將會有不同的為他們定制的體驗。

從某種方面來說這是?CRM(客戶關(guān)系管理)的自然過程,在這個過程當(dāng)中,隨著對其掌握的寶貴客戶關(guān)系的不斷累積,這些商業(yè)關(guān)系可以化作商業(yè)關(guān)系資 產(chǎn)而被加以利用,最終在交互層面呈現(xiàn)給用戶更加有意義的訊息。這才是正宗意義上的個性化設(shè)計,一種由數(shù)據(jù)驅(qū)動的追求影響化最大化的設(shè)計模式。

如果說故事是人類接觸的貨幣,那么UX設(shè)計就是鑄幣的過程。創(chuàng)造了一種可以讓交易成功發(fā)生的機制。

 

原文地址:uxdesign.cc

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 清晰,好記

    來自四川 回復(fù)
  2. ??

    來自北京 回復(fù)