為什么大爺大媽們總對排隊情有獨鐘,為什么平常不想要的東西一打折就買一堆……震驚!原來套路你的竟然都是自己的大腦!
如今想要成為一名合格的用戶體驗設(shè)計師,首要就是對目標用戶的理解和把控。而為了實現(xiàn)這一目標,掌握一些心理學(xué)知識就顯得尤為重要。當我們能在設(shè)計中合理利用心理學(xué)的時候,就離創(chuàng)造出讓用戶感慨「深得朕心」的體驗不遠了。
這次要介紹的是設(shè)計心理學(xué)中與我們?nèi)粘I蠲芮邢嚓P(guān)的認知偏差 (Cognitive bias) ,了解它的基本定義之后再結(jié)合相關(guān)案例探討如何在設(shè)計中利用認知偏差來創(chuàng)造更好的用戶體驗。
網(wǎng)絡(luò)上的定義是這樣的:人們在知覺自身、他人或外部環(huán)境時,常因自身或情境的原因使得知覺結(jié)果出現(xiàn)失真的現(xiàn)象。
簡單來說,就是大腦創(chuàng)造了一些快捷方式,在處理信息時自然地去調(diào)用這些快捷方式,只是這種操作在快速的同時,也會對我們的決策過程產(chǎn)生危害,比如我們會選擇性忽略一些信息,或是自發(fā)地對信息進行腦補。這樣的認知模式導(dǎo)致我們產(chǎn)生了非理性的偏差。
△ 圖:大腦的操作
認知偏差種類豐富,已經(jīng)被提出的就有幾百種,有很多尚未被完全驗證。下圖總結(jié)了現(xiàn)有的認知偏差,它們大概可以分為四類:信息過載,信息的意義不明確,大腦來不及認真作出反應(yīng)以及大腦存不下所有的記憶。通過這張圖,我們可以更清晰地了解不同認知偏差背后的成因。
△ 圖:認知偏差寶典
那我們該怎么在設(shè)計中利用認知偏差呢?我根據(jù)日常工作中經(jīng)常接觸的消費場景和學(xué)習(xí)場景總結(jié)了以下幾個方面:
△ 圖:章節(jié)概覽,也叫懶人速讀版
作為體驗設(shè)計師,我們需要為用戶的決策創(chuàng)造合適的環(huán)境,來引導(dǎo)其按照我們設(shè)計的方向去達成他們的目標。
錨定效應(yīng)
錨定效應(yīng)(Anchoring)是比較常見的一個被利用在消費場景中的認知偏差。它指的是人在做決定的時候,會在很大程度上依賴于其接觸到的信息。
比如商場里原價 2000 現(xiàn)價 500 的商品,原價的存在會讓人覺得這件商品的價值就是 2000,現(xiàn)在 500 簡直是撿了大便宜。
在體驗設(shè)計中可以借鑒這種做法,通過前后對比放大來優(yōu)惠感知,進而促進用戶做出有利于我們的決策。
△ 圖:利用錨定效應(yīng)推薦會員套餐,對比差價確實誘人
從眾效應(yīng)
從眾效應(yīng)(Bandwagon Effect)是另外一個常見的用于消費場景的認知偏差,指的是人們做決定時通常會和他人保持一致。
下圖是售前頁一般的設(shè)計技巧,通過展示購買人數(shù)和滾動播放購買信息來體現(xiàn)出該商品的熱門,讓正在猶豫的用戶「隨大流」下單購買。
基于此,我們在設(shè)計中可以營造出一種群體選擇的效果來吸引更多的用戶。
△ 圖:這么多人選擇,跟隨大家不會錯,買它
內(nèi)群體偏差
前面提到的認知偏差之外,內(nèi)群體偏差 (ingroup bias) 也一般被用來引導(dǎo)用戶決策,它是指人們會在認知上傾向于自己所屬的群體。
比如 Booking 在查看評論的區(qū)域加入了篩選評論語言這一按鈕,雖然設(shè)計的本意可能是為了方便用戶更好地理解評論內(nèi)容,但是在真實的使用過程中可以發(fā)現(xiàn),用戶更加信任自己所選標簽內(nèi)的評論內(nèi)容,因為同語言往往意味著來自相同的國家或者相近的文化背景,用戶通過這種方式找到一個小群體,然后被影響進而做出與群體內(nèi)人們更為相似的決策。
△ 圖:同胞的評價更可靠
因此在體驗設(shè)計中利用內(nèi)群體偏差的關(guān)鍵點在于打造群體歸屬感,借由小群體的力量影響用戶的決策。
引導(dǎo)用戶做出于我們有利的決策之外,同樣,我們可以利用認知偏差提高用戶粘性,增強用戶和產(chǎn)品之間的聯(lián)系,使他們對產(chǎn)品「愛不釋手」。
宜家效應(yīng)
宜家效應(yīng) (The Ikea Effect) 是指消費者對于自己投入勞動、情感而創(chuàng)造的物品的價值產(chǎn)生高估的價值判斷偏差的現(xiàn)象,消費者對于一個物品付出的勞動(情感)越多,就越容易高估該物品的價值。利用宜家效應(yīng)提高用戶粘性的核心是創(chuàng)造低投入、高回報、高貢獻價值的任務(wù),保證用戶能夠完成任務(wù)的基礎(chǔ)上貢獻自己的價值。
在學(xué)習(xí)場景中我們可以利用宜家效應(yīng)提高用戶粘性,將用戶留下來堅持學(xué)習(xí)。
首先需要保證用戶能夠完成任務(wù)。懂你英語 ®A? 產(chǎn)品中,我們會在用戶設(shè)置目標時描述該目標的表現(xiàn),用戶以此選擇自己的目標。這種方式下的用戶對于任務(wù)結(jié)果的預(yù)見性提高,能清楚的知道如果完成任務(wù)會達到什么效果,更能被促使順利地完成任務(wù)。
△ 圖:目標展示與貢獻積累
其次,用戶對產(chǎn)品粘性增強需要能夠感知到自己所做出的投入,學(xué)習(xí)場景下這種投入感知更多體現(xiàn)在知識的累積上。在懂你英語 ®A? 課程中,我們將用戶與目標之間的距離設(shè)計為學(xué)習(xí)路徑,用戶每完成一個階段的學(xué)習(xí)便會在路徑上明顯前進,日積月累下來用戶能看到自己前進的印記,清晰感知到自身知識的累積,也就因此對產(chǎn)品有更高的價值感受。
負向偏見
由于學(xué)習(xí)的「反人性」,學(xué)習(xí)場景下的用戶在體驗流程中產(chǎn)生消極情緒的概率要大于其余場景,比如學(xué)習(xí)效果不好,難以堅持等。此類消極情緒對于學(xué)習(xí)產(chǎn)品影響很大,是因為負向偏見 (negativity bias) 的存在,人們對不好的事情的記憶比快樂的記憶更加清晰,更經(jīng)?;貞洝?
因此在學(xué)習(xí)場景下我們需要給用戶更多的正面積極的反饋來抵消掉負面體驗的影響。在懂你英語 ®A? 課程設(shè)計中,我們在學(xué)習(xí)結(jié)果頁根據(jù)用戶不同的學(xué)習(xí)表現(xiàn)給出不同的反饋,即使是偏低的成績,也依然會給出一個較為積極的反饋,以期鼓勵用戶堅持學(xué)習(xí)。
△ 圖:做得不好也不要灰心
除了簡單抵消掉用戶的負面偏見,我們甚至可以通過設(shè)計去完全扭轉(zhuǎn)局面,變困境為有趣的體驗。最經(jīng)典例子便是谷歌斷網(wǎng)時的小恐龍游戲,不知道有多少人會故意關(guān)掉網(wǎng)絡(luò)來玩這個游戲。
△ 圖:谷歌的斷網(wǎng)小恐龍
作為設(shè)計師我們可以通過了解和利用認知偏差來創(chuàng)造既讓用戶滿意又平衡商業(yè)的雙贏體驗。但由于設(shè)計師本身也是人類,與用戶擁有同樣的思考機制,因此在日常的調(diào)研分析和設(shè)計的過程中也要警惕認知偏差的影響,不斷深入了解用戶以及使用科學(xué)的測試方法來完善自己的設(shè)計,持續(xù)迭代反思,不因為某個方案自己傾注了很多心血,就覺得它是最好的。用戶可能并不買賬呢。
微信是一種生活方式。作為月活超 10 億的國民級產(chǎn)品,它有著獨特的設(shè)計之道。
同時,微信也是互聯(lián)網(wǎng)界的一個異類,張小龍曾在微信公開課上回應(yīng)道:「我們只是守住了做一個好產(chǎn)品的底線,居然就與眾不同了」。
好產(chǎn)品自然是體驗和價值至上。下面,我就為大家解讀微信的用戶體驗設(shè)計。
先從最簡單的二次確認講起。
微信針對首頁消息和收藏列表的刪除操作,做了二次確認的微創(chuàng)新。像同類 IM 聊天工具,如 iOS 短信、Facebook Messenger、飛聊等等,二次確認都是采用底部系統(tǒng)彈窗。這樣做,從程序架構(gòu)的角度來看兼容性和通用性更強。
而從體驗設(shè)計的角度來看,則剛好相反,因為從第一次刪除操作,到第二次確認系統(tǒng)彈窗。之間的目標距離太長,耗時也就變長了。根據(jù)菲茨定律(Fitts’ Law),獲取目標的時間取決于目標的距離和大小。這意味著提升交互的效率,不僅需要減少距離,同時還要增加目標大小。
△ 收藏列表
回過頭看來微信,就是這樣設(shè)計的。二次確認是在第一次的基礎(chǔ)上延展,距離幾乎為 0,同時,目標按鈕的寬度也增加了幾倍,大大地提升了交互效率。
其實,商業(yè)和用戶體驗往往是有沖突的。而微信廣告很好的平衡了這一點。
通過豐富有趣的互動體驗式創(chuàng)意,或畫圓、或畫方、或畫愛心,吸引大家主動參與互動。
1. 開放首條評論
另外,首條評論功能讓品牌像朋友一樣與大家對話,利用明星效應(yīng),從而帶動更多人參與評論,有效提升評論區(qū)活躍度和廣告點擊率。
△ 朋友圈劉雯廣告
以劉雯發(fā)布的朋友圈廣告為例,大表姐把款的 vivo X30 系列手機交到你手中,并在首條評論中邀請你幫她拍照。數(shù)十萬用戶積極回復(fù)劉雯,評論率高于歷史均值 40 倍+,「你這么漂亮怎么拍都好看」、「天天給你拍」,大表姐的魅力折服了眾多用戶,有效提升了品牌的親和力與好感度。
2. 打開儀式 · 最強震動級別
在交互方面,如果你是 iPhone 用戶,可以體驗到 Taptic Engine 線性震動馬達,通常力度由輕到重分別是 Light、Medium、Heavy。在打開廣告的那一刻,它給你的是最強震動級別,滿滿的儀式感!整個微信應(yīng)該找不到第二個這樣級別的震動了。
再舉一個震動的例子,當你的好友拍攝了時刻視頻后,可以看到 TA 的頭像右上角多了一個藍色的小圈圈,雙擊它就能看到好友的時刻視頻了。
當然,你雙擊沒有拍攝時刻視頻的好友,TA 的頭像會左右晃動,并且會有 Failure 的震動反饋,動畫和震動節(jié)奏完美匹配,這個體驗就像你解鎖 iPhone 輸錯密碼時的震動是一樣的。
△ 沒有時刻視頻時的反饋
我們做產(chǎn)品設(shè)計時也一樣,對于用戶的操作,應(yīng)當給予清晰明了的反饋,幫助用戶更好地理解信息。
微信的起步階段是基于手機來做 App,不基于 PC 來做,PC 端只是輔助,而現(xiàn)在,它的跨平臺能力也逐漸增強。
一周前,微信 PC 版「微信測試版 for Windows」發(fā)布了 2.9.0 的內(nèi)測,同步了移動端的新功能,主要有兩點:
支持打開小程序,也可以玩「貪吃蛇」「跳一跳」等小游戲了。
△ Windows 微信客戶端
另外,此前的微信 PC 端只支持引用文字消息,也沒有達到手機上引用消息的視覺效果。此次更新中,還新增了很多支持的應(yīng)用類型,包括但不限于圖片/視頻、表情包、公眾號鏈接、小程序、文件等。
如此看來,Mac 端的更新也不遠了,可以期待一下。
最近的微信更新了,除了引入深色模式之外。值得一提的是,語音消息的交互體驗得到了優(yōu)化,上滑轉(zhuǎn)文字更方便了。
此前的方式是按住說話,滑到轉(zhuǎn)文字按鈕,說完松開手指后,才把語音解析成文字。
現(xiàn)在交互則少了一步操作,達到了實時邊說邊轉(zhuǎn)文字的功能。別小看這一步界面上的優(yōu)化,它背后代表的是微信語音識別能力上的技術(shù)突破。
△ 語音實時轉(zhuǎn)文字
微信有很多隱性和顯性的錨點,隱性錨點就比如你打開的這篇文章,關(guān)閉后,再重新點進來,還是顯示上次閱讀的位置。
△ 訂閱號列表
顯性的錨點就比如上面這個:當你刷公眾號列表時候,如果有新文章更新,標題欄會出現(xiàn)一個錨點按鈕,點擊它讓你快速回到頂部,方便查看文章。
△ 朋友圈「跳到還沒看的位置」
基于此,在新版微信朋友圈中,增加了一個「跳到還沒看的位置」。很多信息流產(chǎn)品是往下刷內(nèi)容,直到給你一個分界線提示:下面內(nèi)容已經(jīng)看過了。而微信這是一個逆向操作,我認為這個功能還是很有必要的,因為經(jīng)常會有刷朋友圈刷到一半聊天退出去,當回來查看朋友圈時,需要重新拉到底部,費時費力。
《在你身邊,為你設(shè)計》一書中有提到語音聽筒播放的優(yōu)化。大家都知道,手機帶有距離感應(yīng)器,在感應(yīng)到耳邊貼近時,屏幕會關(guān)閉以節(jié)省電力,并且避免由于耳朵與屏幕的觸碰導(dǎo)致的誤操作。
微信在聊天界面中,也啟用了距離感應(yīng),以實現(xiàn)手機貼近耳邊時,自動將語音從揚聲器切換到聽筒進行播放,這樣你可以用最自然的姿勢來聽語音,這是一個很好的體驗。
但要完美地實現(xiàn)這個體驗,就需要解決距離感應(yīng)器的時延問題。播放語音時,如果你非常迅速地將手機移至耳邊,這時候距離感應(yīng)器并不會同樣迅速地對這個動作產(chǎn)生反饋。大約在延遲了 300 毫秒后,感應(yīng)器發(fā)出信號,微信將 iPhone 的屏幕關(guān)閉。而在這個時間內(nèi),你的耳廓極有可能已經(jīng)觸碰到了 iPhone 的屏幕上。觸碰的位置大部分時候是左上角的返回按鈕區(qū)域。于是很容易出現(xiàn)手機移至耳邊,語音戛然而止。
△ 延時響應(yīng)判斷流程圖
為了解決這個問題,微信設(shè)計了一個解決辦法:在響應(yīng)返回操作時,先等待 500 毫秒,這時候如果偵聽到距離感應(yīng)器有發(fā)出信號,則認為是貼耳的動作,此情況下不執(zhí)行返回操作,如上圖所示。而 500 毫秒的延時大部分時候你是不會感知到的。這一解決辦法極大降低了貼耳時候的誤操作。
在微信的產(chǎn)品設(shè)計中,我們看到了交互的細微迭代和背后的技術(shù)突破,我們看到了商業(yè)創(chuàng)意與用戶體驗的平衡。給用戶帶來希望,讓創(chuàng)造者體現(xiàn)價值,這就是微信的設(shè)計之道。
文章來源:優(yōu)設(shè) 作者:洋爺
好的用戶體驗是不會讓用戶注意到并毫無察覺的一種體驗。表面上看似非常簡單,但實際上設(shè)計師已經(jīng)做出了非常多的設(shè)計思考。用戶越少的去思考界面,用戶就越能專注他們要完成的目標。在瀏覽頁面時,用戶的注意力不應(yīng)該停留在界面和設(shè)計上,他們更應(yīng)該關(guān)注的是如何達成他們的目的。所以作為設(shè)計師的首要工作就是通過事先清除障礙,為用戶提供直達目標的途徑。
“通常,飛速行駛的貨車不可能輕松地停下來。因為運用更多的動能去改變運動狀態(tài)是非常困難的。與其強迫人們從他們的主任務(wù)上轉(zhuǎn)移注意力,不如直接帶他們?nèi)ニ麄兿肴サ牡胤??!?
——Luke Wroblewski,谷歌產(chǎn)品總監(jiān)
換個思路來看。復(fù)雜和混亂的界面會迫使用戶去尋找解決問題的方法,而通常情況下,這些方法并不是一目了然的。用戶會因為過多的選項、界面、導(dǎo)航等感到困惑,用戶可能會在思考過程中感到不知所措。即便是很短暫的停頓,也足以讓用戶離開。
這種過度的思考就被稱為認知過載,在這篇文章里,我們將為你解釋如何避免認知過載。首先,我們需要明白我們大腦中存在過載風(fēng)險的原因。
認知超負荷的科學(xué)根源
認知過載是指工作記憶中腦力處理的信息總量過多。當你的工作記憶接收到的信息超出其可以輕松處理的信息時,就會發(fā)生認知過載,從而產(chǎn)生挫敗感。
但這究竟意味著什么?工作記憶到底是什么?針對這些我們又應(yīng)該怎樣進行設(shè)計呢?那就讓我們先來了解一下認知負荷理論的起源吧。
JOHN SWELLER和認知負荷理論
雖然對認知的研究可以追溯到幾個世紀,但直到20世紀80年代,澳大利亞教育心理學(xué)家約翰·瑞勒才將這項研究應(yīng)用于教學(xué)設(shè)計當中。Sweller試圖為每一種類型的學(xué)習(xí)者找出最適合他們的學(xué)習(xí)方法,讓他們可以記住他們學(xué)到的所有知識。換句話說,怎樣的課程設(shè)計才是最佳的呢?
Sweller在1988年出版了“ 認知負荷理論,學(xué)習(xí)難度和教學(xué)設(shè)計 ”,這使他的研究工作達到新的高峰,于1994年重新修改并重新發(fā)表。他的研究中運用了數(shù)據(jù)組織結(jié)構(gòu)中的圖表數(shù)據(jù)庫,講述了有效和無效的教學(xué)方法,而他對于工作記憶負荷極限的研究結(jié)果才是設(shè)計師們找到的最有用內(nèi)容。
Sweller的研究在許多方面擴展了George Miller的信息加工理論。George Miller是一位認知心理學(xué)家和語言學(xué)家,他在20世紀50年代測試出短期記憶的極限。Miller的研究在于數(shù)字化設(shè)計,尤其是分塊技術(shù)方面,這將在后面討論。另外,Miller還創(chuàng)作了論文“ The Magical Number Seven, Plus orMinus Two“,這個理論促使許多設(shè)計師將菜單項的數(shù)量限制在5和9之間。
雖然這些理論最初是針對教育領(lǐng)域的,但它們同樣適用于用戶體驗(UX)設(shè)計。
工作記憶
如果你每次打開冰箱,都必須回答一個像謎語一樣的問題,“什么東西小的時候四只腳走路,長大了以后兩只腳,而老了以后有三只腳?”這是一個老段子。但是,根據(jù)認知負荷理論,使用這種讓人無奈的用戶體驗設(shè)計會讓用戶產(chǎn)生挫敗感。
要理解認知負荷理論,你必須要了解什么是工作記憶,大腦在短時間內(nèi)用于完成任務(wù)的過程便是工作記憶。工作記憶必須借助外部刺激和短期記憶,并在需要時從長期記憶中抽取。通俗一點說,工作記憶相當于計算機內(nèi)存,而長期記憶則相當于硬盤驅(qū)動器。
工作記憶和短期記憶通??梢曰Q使用,但它們略有不同。工作記憶是處理信息的過程,而短期記憶更像是一個信息的便簽本,它雖然重要,但卻沒有長期記憶重要。
讓我們看看這篇文章是如何解釋這些差異的。在你閱讀的時候,你可能會遇到一個用藍色字體書寫的陌生概念。你的工作記憶需要知道藍色文本是什么意思,才能夠理解文章更深層的含義。你的長期記憶知道藍色文本表示鏈接,因此你的工作記憶知道點擊該鏈可以獲得更多信息。與此同時,你的短期記憶會記住你在文章中的位置,這樣當你從外部頁面返回時你不會迷失,但到了第二天早上,該位置就會被遺忘掉。
設(shè)計中的應(yīng)用
Steve Krug(史蒂夫·克魯格)是一位很有影響力的作家,他在網(wǎng)頁設(shè)計中極力推崇認知負荷理論。他的書《Don’t make me think》被許多設(shè)計師認為是有巨大影響力的著作。
書中記錄了許多寶貴的經(jīng)驗,下面就列舉一些的:
1、每一個頁面都要清晰明了。
2、用戶傾向于“滿意” - 也就是說,采取一個最簡單的解決方案來解決他們的問題,而不是最好的解決方案。此外,作為習(xí)慣的生物,用戶將一遍又一遍地使用相同的方法解決問題,而不會刻意尋找一個更好的選擇。
3、當新用戶可以熟練使用該系統(tǒng)來實現(xiàn)他們的目標時,系統(tǒng)的可用性就足夠了。
4、用戶使用網(wǎng)絡(luò)的絕大部分是想要節(jié)省時間。因此,用戶的行為通常會像鯊魚一樣“保持移動,否則就會死亡”。
5、后退按鈕是Web瀏覽器最常用的功能。
6、屏幕上顯示的主頁按鈕即使從來不被用戶使用,但也能讓用戶感到放心。
總之,用戶在瀏覽網(wǎng)站過程中哪怕是一瞬間的思考,也會對他們的工作記憶造成負擔(dān)。例如 “這個可以點擊嗎?“首頁按鈕在哪兒?”和“我怎么保存?”等等問題,都會不同程度破壞用戶體驗。
認知超負荷最常見的原因
許多設(shè)計元素都有可能對用戶的大腦造成超負荷,外界環(huán)境中會有更多的因素它們超出了設(shè)計師的控制范圍。例如:一個用戶瀏覽網(wǎng)站的同時會擔(dān)心第二天的工作報告,或者被窗戶外裝修的噪音所打擾,此時,無論你的網(wǎng)站設(shè)計多么簡單,這些都會耗盡他們的工作記憶。
我們要知道每個用戶的工作記憶能力都不同。隨性的用戶比那些對每一件小事都無比關(guān)注的用戶更能專注于你的網(wǎng)站。不經(jīng)常上網(wǎng)的用戶往往比經(jīng)驗豐富的網(wǎng)絡(luò)用戶思考的更多。
雖然我們無法量化所有的認知過載,但我們可以盡量的去避免他的產(chǎn)生,下面,我們對網(wǎng)頁設(shè)計中最常見的類型以及避免它們的最佳方法進行了分類說明。
1.不必要的操作
用戶的每一步操作都會增加他們的認知負擔(dān)。過多不必要的操作會打斷用戶的思路或者會讓用戶抓狂。因為用戶的工作記憶都集中在完成特定的目標上,所以多余的操作將迫使用戶投入更多的精力,這樣就需要更多的工作記憶才能完成任務(wù),所以,那些不必要的操作步驟很考驗用戶的耐心。
速度和節(jié)奏是讓認知負荷最小化的基本因素。用戶希望以輕快,目的性很強的步驟來完成任務(wù),所以應(yīng)該提前消除一切延遲。
用戶希望在他們提交郵箱地址之前就知道他們將要進入什么網(wǎng)站,但Touch of Modern卻要求用戶在使用之前必須進行注冊!這個強制而又多余的行為將會嚇跑很多的潛在用戶。
解決方案
下面這個方法,可以幫助我們找到不必要的操作有哪些:列出用戶要完成任務(wù)必須要去做的步驟。例如發(fā)送電子郵件:
1、點擊電子郵件圖標。
2、點擊“發(fā)送到”輸入框。
3、輸入電子郵件地址。
4、點擊“主題”輸入框。
5、等等....
現(xiàn)在,重新審視列表并且找出可刪減的操作步驟,想到什么了嗎?你可以通過將光標一開始就自動定位在“發(fā)送到”字段就可以刪除步驟2.這將減少用戶的操作,雖然很微小,但你消除的每一步對于用戶來說都是友好的。
我們來看看谷歌的主頁。光標一開始就在搜索輸入框當中,因此用戶所要做的就是開始輸入文字。這些微小的交互提升了整體的用戶體驗,所以不要忽視它們。
2.過度刺激
雜亂無章的頁面會分散用戶的注意力,使用戶無法專注他們想要完成的目標。就像有好幾個人同時與你交談時你會很難集中注意力,當頁面上太多的圖片、動畫、圖標、廣告、文本類型和鮮艷的顏色奪取你的注意時,就會很難集中注意力。
記住,每個人的工作記憶在完成目標的過程中,會因為外界的刺激對每一步工作重新排序。每一次分心,尤其是視覺上的強烈刺激,都需要消耗用戶的一部分注意力。
LINGsCARS就是個極端的例子,你可以看到有強烈對比的顏色和絢麗的動效沖擊著人們的感官。在屏幕上,即便在兩個不同位置同時進行的動效依然會對用戶造成過度刺激。
解決方法
首先,減少一切不必要的元素。僅保留必要的內(nèi)容通常是最佳的選擇,減少加載時間并簡化體驗。用戶更喜歡視覺簡單的網(wǎng)站,而不是視覺上復(fù)雜的網(wǎng)站。
你還可以進行內(nèi)容區(qū)分以達到平衡的效果。太多相同的內(nèi)容(比如文字或圖像)會讓用戶感到厭煩。所以,視覺內(nèi)容要進行合理的組合,圖像、視頻、信息圖表等,能夠使頁面和諧,并便于用戶理解。
影視網(wǎng)站IMDb本可以在很大程度上輕松地只依靠圖片進行排版,但它反而運用同量的文字內(nèi)容來平衡網(wǎng)站頁面。
在抽取出一個頁面上必須要展示的元素之后,你應(yīng)該采用一種讓用戶立即能夠理解的方式組織這些元素。對稱或者不對稱的信息布局顯示都可以很快的被用戶所理解,也就是說,用一種方式,盡可能的減少大腦的工作。這樣不僅對稱和不對稱都能讓眼睛感覺很舒適,而這樣的結(jié)構(gòu)也能讓界面交互更容易。
下面來看一下Groupon是如何布置頁面的吧。左中是文本類的垂直菜單,右中是一個有特色的凍酸奶交易文本描述,插在文本中間的照片和色塊的使用,分分鐘創(chuàng)造出一個讓人喜愛的沙漏結(jié)構(gòu)。
下面來看看Groupon是如何將它的垂直菜單(中間偏左)和描述凍酸奶的文字(中間偏右)進行布局的吧。大圖居中被文字包圍著,這樣就打造了一個舒適自然的沙漏形狀。
對稱不僅僅是在屏幕的兩側(cè)應(yīng)用相同的布局,它是視覺重心和視覺方向的平衡。通過這種方式,非對稱頁面也能看起來很有組織性,如下圖的OTHR所示。
將你的頁面內(nèi)容精減到只包含簡單的和非競爭性的元素,這只是完成了預(yù)防過度刺激工作的一半。。不要忘記要以簡單的布局呈現(xiàn)這些元素。
3、太多選項(??硕桑?/strong>
這有點自相矛盾:用戶需要更多的選擇,但是往往太多的選擇會使他們的大腦超負荷。
席克定律(選擇困難癥)為我們揭示出了一種現(xiàn)象:用戶擁有的選擇越多,他們做出決定的時間就越長。
作為設(shè)計師要去理解庫克定律,可以把每個選項看作是明亮的閃光燈,如下所示,太多的閃光燈會過度刺激用戶。
甚至像Rakuten這樣的知名網(wǎng)站也會犯類似的錯誤,因為他們沒有真正的理解這個設(shè)計原則。給用戶需要的而不是給他們認為他們需要的。
解決方案
假如你已經(jīng)解決了不必要的和多余的選項,你可以將他們分別放入不同的組進行分類,你可以在百貨商店的網(wǎng)站上看到很多例子,這些網(wǎng)站擁有廣泛的產(chǎn)品選擇。
它不一定是太多的選擇, 只是一次有太多的選擇。如果你可以用隱藏菜單,抽屜和拉出其中的一種方式隱藏一些選項,那么你將獲得兩全其美的效果,這些超級菜單雖然為用戶提供了許多選項,但一定程度上不會給用戶帶來很大的負擔(dān)。
但是,隱藏式的導(dǎo)航欄不利于發(fā)現(xiàn),因此電子商務(wù)和新聞等行業(yè)的設(shè)計人員應(yīng)該注意。你可以通過放置其他類似產(chǎn)品的鏈接使缺點最小化(比方說亞馬遜的“相關(guān)購買”)從而最大限度地減少隱藏菜單的缺點?;蛘吣憧梢詺w納導(dǎo)航菜單的類別,將它們精簡為單行導(dǎo)航(如Apple和CNN那樣)。
你還需要注意應(yīng)該如何組織整個網(wǎng)站的導(dǎo)航。許多與庫克定律有關(guān)的問題可以通過管理信息架構(gòu)(IA)來處理,我們將在下面的“難以查找的頁面和功能”部分中討論。
4.太多內(nèi)容
就像過度刺激和選項過多的問題一樣,提供過多的內(nèi)容會將用戶的工作記憶拉向不同的方向。
顯然,你希望展現(xiàn)的只是重要的內(nèi)容,但對于一些網(wǎng)站來說,一切都是重要的,如果你的網(wǎng)站也有非常多的內(nèi)容,為了避免讓用戶產(chǎn)生困惑,應(yīng)該對內(nèi)容信息進行和里的組織規(guī)劃。
Arngren的問題并不是它展示了很多的產(chǎn)品,而是它同時展示了太多的產(chǎn)品。在組織結(jié)構(gòu)上的調(diào)整將會給網(wǎng)站帶來更好的體驗。
解決方案
如上所述,George Miller的解決策略是“分塊”,將需要展示的大量內(nèi)容以可管理的方式組合起來,以便于記憶,電話號碼分為國家代碼,區(qū)號,一組三位數(shù)和兩組四位數(shù)字便于記憶,而一連串的11個數(shù)字會很難被記住。
你想在商店主頁上放大量產(chǎn)品的圖片嗎?比起將它們?nèi)苛_列出來,不如通過他們的類型將他們分組羅列。Etsy通過根據(jù)不同的店鋪將產(chǎn)品進行分組展示。
還有文本組塊,文本組塊包括簡短的自然段,合理利用標題和副標題以及足夠的留白。
對于需要大量數(shù)據(jù)的長表單字段,可以嘗試采用多步驟表單。長表單可能會令人生畏,有時會導(dǎo)致用戶流失。你可以將表單的信息分在不同的頁面里,減少信息過量給用戶帶來的影響。記得一定要有一個進度標記來讓用戶知道還剩下多少頁。(可以總結(jié)為復(fù)雜的頁面簡單化)
購買機票總是涉及填寫大量的信息,其中沒有一項是多余的。Virgin Atlantic通過將其分解在多個單頁面上填寫來改善其繁瑣的體驗:選擇航班,填寫乘客信息,輸入付款詳細信息等。將所有這些信息放在一個長頁面上會對用戶造成負擔(dān),也有可能會放棄購買。
5.模棱兩可的界面
認知超負荷的罪魁禍首先就是用戶界面混亂。永遠不要讓用戶花費大量的時間來弄清楚他們?nèi)绾尾拍芡瓿上胍哪繕?,以及花費時間來弄清楚圖標的含義是什么。
并非所有用戶都是經(jīng)驗豐富的,從而可以理解SpeedCrunch這種含義模糊的圖標。即使他們能夠識別代表Windows系統(tǒng)和Mac OS X系統(tǒng)的符號,那么位于右下角的那兩個圖標也會讓用戶迷茫。
解決方案
使用用戶已經(jīng)熟知的視覺提示。用戶通常會用他所熟悉的符號來進行操作,即便是在以前從未使用過的網(wǎng)站上也是這樣。如果你覺得沒有新意,可以融合品牌特征巧妙的結(jié)合成為用戶所熟悉的形式。Home Depot雖然運用了較為普遍的圖標,但同時也賦予了他們品牌獨有的橙色。
標準標簽(如“聯(lián)系人”和“提交”)的按鈕比非傳統(tǒng)標簽(如“地址”或“開始”)更容易識別。通常已知的標簽可以提高用戶的瀏覽體驗,而不常見的標簽會讓用戶暫停以了解按鈕的功能。不要為了個性化而喪失了識別性。
另外,你如果真的需要一個從未見過的圖標該怎么辦呢?如果這樣,可以運用現(xiàn)實生活中的場景展示來讓圖標進行自我解釋,這種做法是連接現(xiàn)實和虛擬的橋梁。例如:早期的互聯(lián)網(wǎng)先驅(qū)選擇了一個信封來代表電子郵件,因為信封是郵件系統(tǒng)的明顯標志。
此外,要避免含義模糊的圖標,特別是可能還會被誤認為是其他含義的圖標,就像下列Issuu的圖標,有些是被人熟知的,但有一些卻不是。如果用戶必須通過點擊這個圖標來發(fā)現(xiàn)它的功能,這就會中斷他們的操作進程。
任何一個表意不清的圖標都應(yīng)該附帶說明,告訴用戶怎樣操作。新的并且不常見的用戶界面,就需要更多的分步教程。例如,Slack就給出了一個完整的視頻引導(dǎo)來說明界面的操作流程。
6.難以查找的頁面和功能
即使用戶已經(jīng)擁有他們所需要的一切,但他們可能還是不知道如何去尋找它。這樣就會讓用戶費盡腦力去尋找他們所需要的。作為用戶體驗中不可或缺的元素,導(dǎo)航應(yīng)該放在明顯的地方,給用戶信心去任意瀏覽網(wǎng)站而不會迷失。
如果你覺得漢堡包圖標不好,那可以在看看Mojo Yogurt,它會要求你將鼠標懸停在左上角的徽標上以顯示導(dǎo)航菜單。
雖然圍繞著Logo有個小的動效,但對于整個屏幕的顏色和動效來說,它并不夠明顯。
解決方案
根據(jù)用戶的偏好理順你的信息架構(gòu)。你的目標用戶群可能并不認可你的做法。因此,要想他們學(xué)習(xí)如何組織網(wǎng)站,卡片分類試驗會告訴你你的用戶將會如何對頁面和話題進行分類。
如果你還希望通過組合頁面和菜單項來消除多余的頁面。設(shè)計工作室Waaark通過將其工作室的簡介,團隊成員簡介和聯(lián)系信息這三個頁面合并到一個頁面來簡化他們的導(dǎo)航。
如果某些功能或特征比其他功能或特征更重要,可以運用視覺手段來吸引他們的注意,增加大小,添加動畫以及使用對比色以此來吸引用戶的眼球。
PayPal期望有更多的老用戶而不是新用戶,并通過設(shè)置登錄按鈕與吸引注意力的白色塊背景來迎合前者。
7.內(nèi)部不一致
假設(shè)網(wǎng)站的主頁使用標準的藍色和帶下劃線的文本來表示鏈接,但另一個頁面僅使用藍色而沒有下劃線。當用戶瀏覽其他頁面時就會停下來去想,“它沒有下劃線,這還是個鏈接么?”他們甚至可能不會再去關(guān)心鏈接,而會被其他頁面的不統(tǒng)一分散注意力從而影響整體的用戶體驗。
要記住,最好的用戶體驗是不會被用戶所察覺的,而像上面這樣通常都會被注意到。
總結(jié)
1、認知過載是影響工作記憶的因素。當過多的信息阻礙決策和整體經(jīng)驗時,就會發(fā)生認知過載。
2、使用不同的內(nèi)容類型和結(jié)構(gòu)化頁面組合,可以避免視覺混亂。
3、隱藏式菜單可以幫助用戶一次管理可用選項的數(shù)量,但降低了可發(fā)現(xiàn)性。
4、“分塊”和“步驟”等的方式可以防止認知過載。
5、UI元素和圖標應(yīng)該基于用戶現(xiàn)有的認知上,這樣他們就不需要過多的思考,新的獨特的功能要加上解釋說明。
6、圍繞用戶的實際思考方式構(gòu)建你的信息架構(gòu)??ㄆ诸惖瓤捎眯詼y試可以為你的目標群體揭示最直觀的導(dǎo)航方案。
7、視覺和功能的不一致,以及打字錯誤和語法錯誤,都會分散用戶的注意力。
8、盡可能減少冗余。另外,請留意如何最大限度地減少用戶操作步驟量和他們必須花費的精力。
文章來源:UI中國
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
《點石成金:訪客至上的網(wǎng)頁設(shè)計秘笈》在用戶體驗領(lǐng)域,可以說是一部很經(jīng)典的書籍,該書于2000年出版第一版,現(xiàn)在已經(jīng)更新到第三版,自從問世以來可以說已經(jīng)將近20年了,但一直是備受推崇。這本書主要為我們介紹了產(chǎn)品可用性原則,并用大量的案例來闡述及運用。幾年前我讀過一次,最近再次重溫,準備做一個整理,當做自己的學(xué)習(xí)記錄。
作者史蒂夫·克魯克(簡稱Krug先生)是一名備受尊敬的可用性咨詢師,他把多年的從業(yè)經(jīng)驗,以通俗易懂的方式凝結(jié)成此書,并且篇幅簡短,雖然作者說兩個小時就可以讀完,但如果邊讀邊思考的話,兩個小時還是不夠的,畢竟這是一本工具類書籍,不是小說。本篇文章只是我的一個學(xué)習(xí)記錄,還是非常希望大家能夠讀一讀原著的。
別讓我思考,作為Krug可用性第一定律,意味著,設(shè)計者應(yīng)該盡量做到,當看到一個頁面時,應(yīng)該是不言而喻,一目了然。我能明白它是什么,怎樣使用它,而不需要花費很多精力進行思考。
舉個例子,假如一個你不認識的人,就比如是你隔壁的鄰居,對你的網(wǎng)站毫無興趣,也幾乎不知道如何使用,但是他仍然看一眼你的主頁,就知道這是干什么的,該怎么用。
比如以下這個網(wǎng)站,這是我從網(wǎng)上隨便找的一個網(wǎng)站,之前從來沒有聽說過,點擊鏈接進入后的第一眼,就是很多關(guān)于車的元素,猜測一定是關(guān)于車的網(wǎng)站;右下角兩個大大的按鈕“找新車”“品牌找車”,那這個應(yīng)該是賣車網(wǎng)站,八九不離十了。先不說下面是多么雜亂不堪,起碼第一眼我就可以看出,這個網(wǎng)站是干什么的,該怎么用,這是最基本的。
有可能我們之前訪問過一些網(wǎng)站,打開后茫然不知所措,幾乎把首頁的每個地方都瀏覽過了,才知道是該怎么操作,或者某些元素看起來像按鈕,但是卻不能點擊,也沒有點擊失敗的提示...總之體驗很差。所以當我們創(chuàng)建網(wǎng)站時,就需要去掉這些問號。作為一個用戶,永遠不能讓我花幾秒思考,能不能點擊的問題。
當我們訪問WEB的時候,每個問號都會加重我們的認知負擔(dān),把我們的注意力從要完成的任務(wù)上拉開。這種干擾也許很輕微,但他們會累積起來,有時候這樣的干擾不用太多,就足以讓我們抓狂。這樣會讓我們對網(wǎng)站失去信心。
那么哪些事情是訪問者在訪問網(wǎng)站時不應(yīng)該花時間思考的事呢?
例如:
1、我在什么位置?
2、我該從哪里開始?
3、他們把某某放在什么地方了?
4、這個頁面上最重要的是什么?
5、為什么他們給他取這個名字?
...
我們在設(shè)計網(wǎng)站的前和后,可以把這些作為走查對象審視一下,慢慢的這些習(xí)慣就會變成你的潛意識,再次設(shè)計網(wǎng)站的時候就會自然而然的把這些因素考慮在內(nèi)。
不過,有時候,特別是在進行一項嶄新的,開拓性的或者非常復(fù)雜的頁面設(shè)計時,也許只能做到自我解釋。在一個自我解釋的頁面中,用戶只需要花一點點時間去理解頁面的外觀,精心選擇的名稱,頁面布局以及少量仔細斟酌過的文字。所以,如果不能做到讓一個頁面不言而喻,那么至少應(yīng)該讓它自我解釋,這個非常重要。
我們常常認為用戶會盯著每個網(wǎng)頁,仔細閱讀我們精心制作的文字,領(lǐng)會我們組織頁面的方式,然后,在點擊某個鏈接之前權(quán)衡他們的可選目標。
但是大部分情況卻是,用戶只會在每個頁面上瞥一眼,掃過一些文字,點擊第一個令他們感興趣或者大概符合他們目標的鏈接。通常,頁面上的很多部分他們都不看(想一想,你是不是這樣瀏覽網(wǎng)頁的呢)。
本想舉快手WEB端的例子,沒想到再次打開后發(fā)現(xiàn)已經(jīng)改版了,而且應(yīng)該是近兩個月左右的事情,可惜已經(jīng)不能截圖,不過這次的改版比之前好多了。
上一版本中,幾乎有幾段整段整段的文字,雖然文采不錯,比較優(yōu)美吧,但誰有耐心看呢,總之我打開幾次,一次也沒一字一字的閱讀過。這個直接增加了用戶的負擔(dān),降低了主要元素的層級,畫蛇添足。
所以,如果我們想設(shè)計有效的網(wǎng)頁,必須開始接受關(guān)于網(wǎng)絡(luò)使用的三個事實:
原因有3:
1、我們總是處于忙碌之中;
2、我們知道自己不必閱讀所有內(nèi)容,只對網(wǎng)頁中的一小部分內(nèi)容感興趣,剩下的內(nèi)容我們并不關(guān)心,掃描就是我們找到相關(guān)內(nèi)容的方式。
3、我們善于掃描,在日常生活中,我們不管是看報紙,還是雜志,書籍,基本都是用掃描的方式,找到我們感興趣的部分。
大家想一想,我們在看報紙的時候,是不是先瀏覽一遍,然后看到哪個標題比較吸引才專心去看那篇文章,而且也不會是一字一句的去讀,而是知曉大概內(nèi)容即可。
再舉個貼近的例子,打開站酷的首頁,你們會從左到右,從上到右的一字不漏的去看嗎,我們是不是用眼睛掃一遍,看到吸引你的內(nèi)容,然后再點進去看詳情,對的,這就是互聯(lián)網(wǎng)用戶的掃描閱讀。
在設(shè)計頁面時,我們通常假設(shè)用戶只是掃過整個頁面,考慮所有可能的選項,然后選擇一個最好的。
事實上,大多數(shù)時間里,用戶不會選擇最佳選項,而是選擇一個合理的選項,一旦發(fā)現(xiàn)一個鏈接,看起來似乎能跳轉(zhuǎn)到我們想去的地方,那很大的機會就會去點擊它。
原因有以下幾個:
1、我們總是處于忙碌之中,尋找最佳策略需要的時間很長。
2、如果猜錯了,也不會產(chǎn)生什么嚴重的后果。就算做了錯誤選擇,我們只要點擊幾次返回按鈕就好,所以,返回按鈕,是WEB端用的最多的地方。
3、對選擇進行仔細思考還不如很快多嘗試幾次。
4、猜測更有意思,猜測不會像仔細權(quán)衡那么累,而且如果猜對了,速度會更快。
當然,這并不是說用戶在點擊之前從不進行權(quán)衡,這要取決于時間上的緊迫以及其他因素。
大家想一想,現(xiàn)實中是不是這樣的呢。也許通往一個入口有好幾條路徑,但是第一次進入該網(wǎng)站的時候,不會尋找最佳路徑,而是試探的摸索,只要找到就可以了,不會刻意的找那條最捷徑的。
生活中,人們在使用任何東西,往往不理解它們的運作原理,甚至對它們的工作原理有完全錯誤的理解。
無論面對哪種產(chǎn)品,除了刻意鉆研的,很少有人會花時間閱讀說明書。相反,我們往往是貿(mào)然前進,勉強應(yīng)付。
比如我們買了一臺新款電視機,幾乎從來不會把電視機的零件一個個都拆下來,完全理解了它們的工作原理后才使用,我們甚至連說明書都不看,而是拿著遙控器自己琢磨,完全沒有必要去深究。
為什么會這樣?
1、這對我們來說并不重要。對于大多數(shù)人來說,是否明白背后的工作機制并不重要,只要正常使用即可,這并不是智力低下的表現(xiàn),而是我們并不關(guān)心。
2、如果發(fā)現(xiàn)某個事物能用,我們會一直使用它。我們一旦發(fā)現(xiàn)某個事物能用,很少去找更好的替代品。如果偶然發(fā)現(xiàn)一種更好的方法,我們會換用這種更好的方法,但很少去主動尋找更好的。
舉個我小時候的例子,上學(xué)時我用的第一只中性筆是同學(xué)給我的,雖然可以用,但我發(fā)現(xiàn)比較粗,不太喜歡,但是認為可以用,從來沒想過是否有稍微細一點的。當?shù)谝恢还P芯用完,去文具店購買時,發(fā)現(xiàn)竟然還有0.35的筆芯,很意外,當然我就放棄了之前的筆芯,換作成0.35的,這樣的例子應(yīng)該都會發(fā)生在每個人的生活中。
那如果人們勉強應(yīng)付的時候這么多,有沒有弄明白真的那么重要嗎?答案是很重要,因為有時候可以勉強應(yīng)付,但通常效率不高,而且容易出錯。
如果用戶很清楚,不是勉強應(yīng)付呢?
1、他們會更容易找到自己需要的東西。
2、會更容易理解你的網(wǎng)站提供哪些服務(wù)。
3、你更可能引導(dǎo)他們到你的網(wǎng)站上希望他們看到的地方。
4、在你的網(wǎng)站上,會覺得自己更聰明,感覺更好,這樣他們就會離開讓人勉強應(yīng)付的網(wǎng)站了。
這也是現(xiàn)在競品之間搶奪用戶的一個重要因素,兩個服務(wù)內(nèi)容一樣的產(chǎn)品,一個直觀明了,一個結(jié)構(gòu)比較混亂,不能很快找到目標,對于這兩個產(chǎn)品,那用戶該選擇哪一個呢,可想而知。
前面已經(jīng)說到,現(xiàn)在互聯(lián)網(wǎng)的用戶閱讀都是掃描式閱讀,那么在這種情況下,怎樣才能讓用戶清晰理解你的網(wǎng)站,提高體驗。
需要注意5個方面,保證他們會很容易理解你的網(wǎng)站:
1、在每個頁面上建立清晰的視覺層次;
2、盡量利用習(xí)慣用法;
3、把頁面劃分成明確定義的區(qū)域;
4、明顯標識可以點擊的地方;
5、最大限度降低干擾;
前面已經(jīng)說到,現(xiàn)在互聯(lián)網(wǎng)的用戶閱讀都是掃描式閱讀,那么在這種情況下,怎樣才能讓用戶清晰理解你的網(wǎng)站,提高體驗。
一個視覺層次清晰的頁面有3個特點:
1、越重要的部分越突出;
2、邏輯上相關(guān)的部分,視覺上也相關(guān);
3、邏輯上包含的部分在視覺上游嵌套;
也可以這么說,要把版式設(shè)計的四個原則,親密,重復(fù),對齊,對比,把這幾點做好。
對于習(xí)慣用法可以說是人的一種本性習(xí)慣了,這也是為什么很多競品都很相似的原因了。
舉個常見的例子,比如聊天的icon,都是一種對話框的設(shè)計,因為人們已經(jīng)習(xí)慣了這種圖標設(shè)計,如果換成其他,用戶看到后會不理解這到底是什么東西。
對于設(shè)計師,很多人一直想創(chuàng)新,但是一定要秉持兩個原則:
1、創(chuàng)新的方法同樣也要不言而喻;
2、能夠為用戶帶來很大價值,值得用戶付出一點努力來學(xué)習(xí)新的方法。
Krug可用性第二定律——點擊多少次都沒關(guān)系,只要每次點擊都是無須思考的選擇。
文中說:WEB設(shè)計師和可用性專家一直有一個爭論,用戶在到達目標之前點擊多少次不會覺得有挫敗感,作者認為,真正的問題不是到達目標之前要點擊的次數(shù),而是每次點擊有多艱難,需要多少思考,有多大的不確定性來判斷自己是否在進行正確的選擇。
所以當我們在使用目前一些成功的產(chǎn)品時,會感到自然而然的流暢體驗,雖然有時候因為產(chǎn)品體量大,沒有很快找到目標,但我們也沒有過多挫敗和煩躁。
Krug可用性第三定律——去掉每個頁面上一半的文字,然后把剩下的文字再去掉一半。
好處:
1、可以降低頁面的噪聲。
2、讓有用的內(nèi)容更加突出。
3、讓頁面更簡短,讓用戶在每個頁面上一眼就能看見更多的內(nèi)容,而不必滾動屏幕。
如果有歡迎詞,盡量減少,能不用就不用。
指示性說明盡量不用。
如果指示性說明非常冗長,用戶發(fā)現(xiàn)所需信息的機會很小。
我們應(yīng)該通過讓每項內(nèi)容不言而喻來完全消除指示性說明,當指示文字變得完全沒有必要,就應(yīng)把他們?nèi)咳サ簟?
現(xiàn)在比較成功的App的引導(dǎo)頁都非常簡潔,因為沒有人會在進入的時候看你寫的一長段文字,等待很長時間,除非視覺性很強,比如今年美團變黃的那段視頻,視覺沖擊力很強,我看完一次后,在網(wǎng)上又自己找,看了幾次。所以要做到盡量減少指示性說明。
作者認為,很多網(wǎng)站,一旦到了第二個層次,導(dǎo)航會變得支離破碎,隨意發(fā)揮,以至于很難找到良好的三級導(dǎo)航的例子。
原因有3:
1、好的多級導(dǎo)航本來就很難設(shè)計,同時有很多元素需要安排到頁面中。
2、設(shè)計師即使在設(shè)計前兩個層次也常感到時間不夠。
3、第三個原因是它看起來并不重要,不是主導(dǎo)航,也不是二級導(dǎo)航,而且有一種傾向認為,當人們深入到網(wǎng)站的這一個層次后,會自然明白如何進行操作。
而且就算設(shè)計師提出需求,他們也可能拿不到,因為負責(zé)內(nèi)容的通常不會想的那么深遠。
事實上,用戶在底層頁面上花的時間通常和花在頂層頁面的時間相同,除非從一開始就自頂往下進行導(dǎo)航設(shè)計,否則以后很難再進行添加,也很難保持一致性。
網(wǎng)站主頁是我們打開后第一眼看到的,也是最容易向用戶突出網(wǎng)站的價值等內(nèi)容的,那在主頁該放什么哪些內(nèi)容比較合適呢:
1、站點的標識和使命:告訴我們這是什么網(wǎng)站,做什么的;
2、站點層次:提供服務(wù)概貌,包括內(nèi)容,功能,組織形式;
3、搜索;
4、導(dǎo)讀:主頁最好有“里面有精彩內(nèi)容”的暗示提醒;
5、內(nèi)容經(jīng)常更新;
6、友情鏈接;
7、快捷方式:最常訪問的內(nèi)容片斷;
8、登錄、注冊;
...
除了這些主要的,最好還要滿足這些:
1、讓我看到自己正在尋找的東西;
2、我也許感興趣的精彩內(nèi)容;
3、告訴我從哪里開始;
4、建立可信度和信任感。
比如打開淘寶首頁,你不僅可以看到以上羅列的內(nèi)容,淘寶通過算法,會自動推薦你曾經(jīng)搜索過得商品,最上角的非常醒目的位置,logo動效還會告訴你最近的活動。
對于一個控件的選擇或者其他設(shè)計,很多團隊經(jīng)常在無休止的討論,始終沒有決定,這樣的討論除了浪費時間,也很容易造成緊張氣氛,破壞團隊成員之間的關(guān)系,常常讓團隊無法做出關(guān)鍵的決定.
我們每個人都是用戶,和所有的用戶一樣,對網(wǎng)站上喜歡什么,不喜歡什么有著強烈的感覺。
我們往往認為我們自己喜歡的,絕大多數(shù)用戶也都喜歡。這應(yīng)該是人的一種天性。
同時,在團隊中,由于職位不同,不同崗位的人對網(wǎng)站設(shè)計也有不同的看法。
比如設(shè)計師喜歡視覺上比較好看的網(wǎng)站,而開發(fā)卻喜歡構(gòu)建新穎,有趣,功能出色的網(wǎng)站。所以不同的角色,不同的視角,常常造成不同的看法,繼而不停的討論,讓會議陷入僵局,當然每個人的想法并不是一層不變的,只要有足夠的證據(jù)能打動他,他的想法完全可以反過來。
一旦因個人和職位不同而造成的沖突不分勝負時,討論常常會轉(zhuǎn)化為尋找某種方式(專家的意見、焦點小組或者用戶測試)來決定絕大部分用戶喜歡或不喜歡什么,但是,找出所謂的普通用戶,就是錯誤的想法,因為,本來就沒有什么普通用戶,所有的web用戶都是的。
越是仔細觀察用戶,認真傾聽他們表達自己的想法,越能意識到他們對網(wǎng)頁的個人反應(yīng)和很多不同的變量有關(guān)系。所以,試圖用一些簡單的喜好來形容用戶,既瑣碎又沒有什么作用,另一方面,好的設(shè)計會把這種復(fù)雜性考慮進去。
關(guān)于普通用戶的這個說法,最糟糕的是加強了這種看法,認為好的web設(shè)計主要是找出人們的喜好,這種想法看上去不錯。比如面包屑導(dǎo)航好,要么不好,彈出框好,要么不好,非黑即白。
問題是,對于大部分web設(shè)計問題來說,沒有簡單的“正確”答案,好的設(shè)計能滿足需要,也就是說,經(jīng)過仔細考慮,實現(xiàn)和測試的設(shè)計就是好的。
例如,對于Flash的使用,如果詢問用戶,有些用戶會說他們很喜歡Flash,而另外差不多同樣數(shù)量的用戶會說他們討厭Flash。實際上,他們不喜歡的是使用不當?shù)腇lash,大而復(fù)雜的動畫,需要很長時間下載,沒有帶來任何價值。如果仔細觀察他們,很可能發(fā)現(xiàn)同樣是這些人,喜歡那些使用精心設(shè)計,適當并小規(guī)模使用Flash的網(wǎng)站,增加一些簡約的修飾,或者有用的功能,同時又不帶來麻煩。
并不是說不存在完全錯誤的方法,有些設(shè)計網(wǎng)頁的方法確實是完全錯誤的,只是他們往往并不是設(shè)計團隊通常爭論的那些方法。
解決這種問題的關(guān)鍵方法就是,不要再問這樣的問題“大部分人喜歡這樣的導(dǎo)航嗎”,正確的問題應(yīng)該是“在這個頁面,這種導(dǎo)航會讓可能使用這個網(wǎng)站的大部分人產(chǎn)生一種良好的體驗嗎?”,然后觀察人們對它的看法和使用的方法,再不斷調(diào)整。
爭辯人們喜歡什么既浪費時間又消耗團隊的經(jīng)歷,而通過測試將討論對錯轉(zhuǎn)移到什么有效,什么無效上,更容易緩和爭論,打破僵局,而且測試會讓我們看到用戶的動機,理解,反應(yīng)的不同,從而讓我們不再堅持認為用戶的想法和我們的想法一樣。
在做測試時,往往很多人不清楚什么是焦點小組訪談和可用性測試的的區(qū)別,那就先科普一下。
焦點小組訪談,百度百科的解釋是這樣的:就是采用小型座談會的形式,由一個經(jīng)過訓(xùn)練的主持人以一種無結(jié)構(gòu)、自然的形式與一個小組的具有代表性的消費者或客戶交談。從而獲得對有關(guān)問題的深入了解。
簡單來說就是一個小組圍坐在桌子周圍,主持人拋出問題,針對這一問題,被訪談人說出自己的想法,從而快速得到用戶的意見和反應(yīng)。
焦點小組可以抽象的確定你的目標用戶想要什么,需要什么,喜歡什么。也可以測試出網(wǎng)站的理念是否有意義,價值主張是否吸引人等等。
但焦點小組只是適合用于網(wǎng)站設(shè)計前就應(yīng)該進行的,是一個早期階段方法。
比如電視劇《我的前半生》中,段曉天因得不到主角羅子君而為難她的那個片段,就是一次焦點小組訪談。
可用性測試的百度百科解釋是這樣的:讓一群具有代表性的用戶對產(chǎn)品進行典型操作,同時觀察員和開發(fā)人員在一旁觀察,聆聽,做記錄。
該產(chǎn)品可能是一個網(wǎng)站,軟件,或者其他任何產(chǎn)品,它可能尚未成型。測試可以是早期的紙上原型測試,也可以是后期成品的測試。
簡單說就是向用戶展示一些內(nèi)容,不管是網(wǎng)站還是原型,或是草圖,并且要求用戶說出這是什么,并用他們來完成一項特定的任務(wù)。
如果想建立一個優(yōu)秀的網(wǎng)站,一定要測試。為一個網(wǎng)站工作幾個星期會讓你失去新鮮感,因為你對網(wǎng)站了解的太多,很多細節(jié)都知道,所以清楚網(wǎng)站是否正常運作的唯一方法就是測試。
測試會提醒你,不是每個人的想法都和你一樣,會和你用同樣的方法使用網(wǎng)站。
要記住,測試一個用戶比不做測試好一百倍。測試總是會有效果,哪怕對錯誤的用戶做一次糟糕的測試,也會讓你看到改善網(wǎng)站的一些方面。
在項目中,早做測試,哪怕一位用戶也好過最后測試50位用戶。
一旦一個網(wǎng)站投入使用,要改變就不是很容易了,有些用戶拒絕做出任何變化,所以在開始的時候,有助于防止你犯錯誤的方法都很劃算。
測試的關(guān)鍵不是證明什么或者反駁什么,而是了解你的判斷力。對于用戶的招募也不要太嚴格,如果能夠讓用戶是更接近使用網(wǎng)站的用戶就更好了,但更重要的是,要盡早和經(jīng)常進行測試,這是一個開發(fā),測試,修復(fù),再度測試的過程,沒有什么比現(xiàn)場用戶的反應(yīng)更重要了。
其實做可用性測試沒有想象的那么復(fù)雜,一個簡單的可用性測試完全可以把問題解決。
那么應(yīng)該測試多少用戶呢:
很多情況下,每輪測試用戶數(shù)量應(yīng)該是三個,最多四個。前三個用戶很可能會遇到幾乎所有最明顯的問題,更重要的是多做幾輪測試,只測試三名用戶有助于很快進行下一輪測試。由于你會修正在第一輪測試提出的問題,因此在第二輪測試中,就會發(fā)現(xiàn)新的問題。這樣的話,能夠很快的對測試進行總結(jié),并能很快利用測試結(jié)果進行修正。
很多人不知道該招募怎樣的測試人員,總是很糾結(jié),其實沒那么難。
實際上,我們都是初學(xué)者。就算找一位專家,你也有可能發(fā)現(xiàn)他也在勉強應(yīng)付。
設(shè)計出的網(wǎng)站如果只有你的目標用戶能使用,這通常不是一個好的方法,應(yīng)該既要滿足專家的要求也要滿足新手的要求。
例外:
如果你的網(wǎng)站幾乎由某一類用戶使用,那就只招募這一類用戶。
如果你的目標用戶群體可以分成幾個明顯的陣營,而且這些陣營有著完全不同的興趣和需要,那么至少要從每個陣營里選擇用戶進行一次測試。
同時避免對網(wǎng)站或網(wǎng)站背后的組織架構(gòu)進行預(yù)先討論。
可以找任何人來引導(dǎo)測試,真正需要的工作只是鼓勵測試用戶去嘗試。同時還需要一個觀察人,對于觀察人選,建議如果能讓管理層參與就好了,他們的參加能極大鼓舞團隊的士氣,這是他們第一次看到自己的網(wǎng)站被人使用,而且很多地方和他們想象的畫面并不一樣,這樣的話,團隊也更容易向管理層拿到對測試的投資,可謂是一舉兩得。
測試什么,什么時候測試?
測試:顧名思義,就是讓測試用戶看到網(wǎng)站,然后看他們能否理解這個網(wǎng)站,包括目標,價值主張,組織方法和運行方式等。
可以對用戶進行關(guān)鍵任務(wù)測試,讓用戶完成一些任務(wù),然后觀察他們是怎么做的。
在測試后的討論會議上,主要做以下兩件事:
給問題分類:
回顧大家看到的問題,決定哪些問題需要修正。
解決問題:
找出修正這些問題的方法。
這樣,從其他人的角度看你的作品,常常能為問題提供全新的解決方案,或者讓你用一種新的眼光看待原有的問題。
要記住,這是一個循環(huán)的過程,不能只做一兩次就停止了。
1、用戶不清楚概念:用戶看著網(wǎng)站,要么不清楚他們說的是什么,要么他們以為自己知道,但是理解有誤。
2、他們找不到自己要找的字眼:這通常意味著你組織的內(nèi)容分類不符合用戶的習(xí)慣或者分類符合他們的習(xí)慣,但沒有使用他們期望的名字。
3、內(nèi)容太多了:有時候,他們要找的內(nèi)容就在頁面上,但就是看不到,在這種情況下,你需要減少頁面上的整體干擾或者把他們需要看到的內(nèi)容設(shè)置的更加醒目,讓它們從可視層次結(jié)構(gòu)中更加突出。
在任何測試中,你都可能會遇到這樣的情況,用戶暫時出現(xiàn)錯誤,然后在不需要任何幫助的情況下回到原來的軌道。
只要出現(xiàn)問題的人馬上發(fā)現(xiàn)自己偏離了原來的主體,盡量不需要幫助就能回到原來的方向,這種情況看起來沒有擾亂他們的活動,就可以忽略這些。總的來說,如果用戶關(guān)于在哪里找到他們需要的內(nèi)容的第二次猜測總是對的,就可以了。
這樣的問題總會存在的,因為有些含混之處,總是沒有簡單的解決方法,不管怎么做,都會有一半用戶在第一次猜測的時候出錯,但每個人都會在第二次猜測之內(nèi)找到,這樣就好。
當在測試時清楚看到人們沒有理解某些內(nèi)容時,大部分人的第一反應(yīng)是增加一些內(nèi)容,例如一些注釋或者指導(dǎo)說明。
這樣的方法不對,正確的解決方案往往是去除某個或一些讓人混淆的內(nèi)容,而不是增加另一些干擾。
而且不要太看重人們對新功能的需求,人們常常說“如果它能像某某”就好了,這樣的說法常常被看做是在要求新的功能,如果仔細詢問,常常會發(fā)現(xiàn),他們已經(jīng)找到一個很好的網(wǎng)站,能做某某功能,就算你做了這個功能,他們也不會切換到你的網(wǎng)站,他們只是在告訴你他們的喜好而已。
當大家看到第一個用戶試著勉強應(yīng)付的時候,問題和解決方法都很明顯的那種驚喜,就像是現(xiàn)成的收獲,你應(yīng)該馬上修正它們。
和任何好的設(shè)計一樣,成功的網(wǎng)頁需要巧妙的平衡,要記住,哪怕一個微小的變化都會帶來不小的影響,有時候,真正的挑戰(zhàn)不是修正你發(fā)現(xiàn)的問題,而是修正這些問題的同時不破壞已經(jīng)正常運行的部分。
只要進行改變,就要仔細思考它將會影響哪些其他內(nèi)容。特別是,當你把某些部分調(diào)整的更為突出時,想想看是不是把其他內(nèi)容的重要性降低了。
降低網(wǎng)站好感度有幾種方式:
1、隱藏我想要的信息;
2、因為沒有按照你們的方式行事而懲罰我;
3、向我詢問不必要的信息:大多數(shù)用戶都很介意個人信息,如果網(wǎng)站要求的信息超出當前任務(wù)時,會讓用戶覺得很麻煩。
4、敷衍我,欺騙我:我們都會討厭虛偽的真誠,也討厭假意的關(guān)心,想想每次你聽到“您的電話對我們來說很重要”的時候是什么感覺吧!
5、給我設(shè)置障礙:不得不等待一個長長的flash介紹。
6、你的網(wǎng)站看上去不專業(yè):網(wǎng)站看起來很凌亂,組織很混亂。
就算你有些地方做的不好,也還有可能再度提高我的好感,只要讓我相信你的所作所為是在為我著想。
提高好感的幾種方式:
1、知道人們在你的網(wǎng)站上想做什么,并讓他們?nèi)菀酌靼祝喊延脩糇钕胱龅膸准路旁谧蠲黠@的地方;
2、告訴我我想知道的。
3、盡量減少步驟,讓用戶以最快的途徑到達他們想去的地方。
4、知道我可能有哪些疑問,并且給予解答:可以做一個經(jīng)常更新的常見列表。
5、為我提供協(xié)助。
6、容易從錯誤中恢復(fù):當潛在的錯誤不可避免時,要提供一個快速且清晰的方法快速從錯誤中恢復(fù)。
7、如果不確定,記得道歉:有時候會因為暫時沒有能力或資源做到用戶想要的,如果你做不到,至少讓他們明白你知道你在給他們造成不便。
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
一位高管在餐巾紙上畫了一個新的主頁原型來演示她使用和喜歡的網(wǎng)站。一個開發(fā)人員晚上在公司呆到很晚,并添加了一個他認為很酷的新功能。或者產(chǎn)品經(jīng)理堅持采用與競爭對手相同的設(shè)計模式。
如果這些故事聽起來很熟悉,那么你并不孤單。大多數(shù)設(shè)計師都會收到這種“幫助”。
你的第一直覺可能是以平淡無奇的方式回應(yīng)“不”。但是,一個用戶體驗建議是否來自一個關(guān)鍵的利益相關(guān)者或項目周邊的人,應(yīng)該仔細處理。在您做出反應(yīng)之前,請考慮以下步驟:
你的第一反應(yīng)可能是利索地對對方說“不”。但是,無論UX建議是來自關(guān)鍵的利益相關(guān)者還是項目的外圍人員,都應(yīng)該仔細地處理它。在你做出回應(yīng)之前,考慮以下步驟:
第一步是將消除自己的主觀意識;你可能擁有豐富的設(shè)計經(jīng)驗,但不排除會有更好的想法。不要僅僅因為它是在PowerPoint文件而不是Photoshop原型中呈現(xiàn),所以不要認為一個想法是壞的。
觀點的多樣性可以更有效的構(gòu)思:即使提出建議的人缺乏設(shè)計知識,他們可能會有不同的專業(yè)知識或經(jīng)驗,并且可能會為您正在嘗試解決的問題帶來寶貴的不同視角。
你如果像設(shè)計的上帝一樣扼殺了他人的創(chuàng)造力,最終會導(dǎo)致更糟糕的結(jié)果。
不加考慮就無情地否定別人的想法會阻礙人們在未來提出其他(有價值的)想法。即使一個想法對你來說顯然是錯誤的,但請記住,這個人也試圖讓設(shè)計變得更好,盡管他可能對“更好”的含義有不同的看法。通過允許他們:
您可能會發(fā)現(xiàn),雖然提出的解決方案并不合適,但需要解決的問題很重要。
問問這個人他的設(shè)計理念想要達到什么目標。他在考慮不同的用戶群或業(yè)務(wù)需求嗎?繼續(xù)問“什么?”和“為什么?”(可能以不同的方式),直到你明白他考慮的問題及思考方式是什么。
確定建議和問題和好處。即使是一個壞主意也有一些好處。
例如,在大屏幕版本的網(wǎng)站上使用漢堡包菜單不利于用戶輕松找到導(dǎo)航。這是不使用它的一個非常重要的原因。然而,桌面上的漢堡也有一個視覺上吸引人、整潔的標題。確認想法的成本和收益,以便更準確地評估權(quán)衡,可以通過不同的方法犧牲或?qū)崿F(xiàn)哪些目標。
考慮舉行設(shè)計原型會議(一個設(shè)計原型會議是短,會議期間,團隊成員迅速協(xié)作和草圖設(shè)計,以探索和分享的設(shè)計思路廣闊的多樣性),一起觀看用戶研究視頻,或舉辦其他類型的用戶體驗工作坊,以便這個想法的支持者可以繼續(xù)為這項想法解釋。
解釋一下,現(xiàn)在做一個設(shè)計決定意味著跳過構(gòu)思、研究和用戶反饋。在理想的情況下,轉(zhuǎn)向設(shè)計思維過程,為所解決的問題找到正確的解決方案。
根據(jù)您對目標用戶及其任務(wù)的了解程度,確定一個想法的優(yōu)缺點可能需要:
論證該想法的成本可能會由于潛在的用戶混淆,而導(dǎo)致的用戶體驗問題,以及諸如可能延遲發(fā)布其他更重要功能的開發(fā)計劃中斷等后勤問題。要評估大量想法,請使用對其進行優(yōu)先級排序。
如果您評估確定不應(yīng)該實施該想法,您可以以積極的方式拒絕。
承認其貢獻
你不必著急全盤否定,但不要愚蠢的全去試一遍。找到您相信的有關(guān)他們建議的真實或有效的內(nèi)容,并將其標注出來。這可能是這樣的:
由于這些短語之后都會出現(xiàn)“but”,因此請確保您在所提出的觀點中是真實的。否則,說它們根本不值得。
分享您的評估理由
當人們投入足夠的時間來提出建議時,就是幫助他們學(xué)習(xí)更多關(guān)于用戶體驗的知識,并在整個團隊中傳播更多用戶體驗知識的理想時機。利用這些時間,交流你評估的理由,而不是僅僅告訴他們一個“不”。
1. “這種設(shè)計對于[persona type]用戶可能有意義,因為他們需要[此功能]。但是我們的主要角色可能會有這個問題,因為[原因]?!?
2. “聽起來你想要解決與重要用戶任務(wù)相關(guān)的[特定客戶投訴]。確定信息的優(yōu)先順序可能會有所幫助,但要使其更大,顏色不同可能會導(dǎo)致橫幅失明。我想在第二天做一些調(diào)查,并提出一些替代解決方案的原型?!?
考慮提供原型,案列,設(shè)計原則,模式或研究發(fā)現(xiàn),以幫助他們理解為什么一個設(shè)計可能會導(dǎo)致問題,以及為什么不同的設(shè)計會更好地工作。把每一次互動都看作是灌輸貢獻者設(shè)計理念的機會——這是對未來的一種投資。
當客戶或強大的同事發(fā)出特定請求(或要求)時,即使您給出了解釋,也很難說“不”。但這并不意味著你應(yīng)該放棄自己的觀點并同意有害的建議。相反,與他們討論如何將想法背后的目標和資源結(jié)合在一起,而不必直接實施。
合氣道是一種試圖和平解決沖突的武術(shù),它依靠轉(zhuǎn)彎和樞軸等動作來融合對立的能量。同樣的原則可以應(yīng)用于處理圍繞設(shè)計的沖突:與其直接拒絕一個想法,不如同意繼續(xù)探索這個建議,而不是明確地承諾實現(xiàn)它。
建議召開一次工作會議,在會上你可以提出既能獲得同樣好處又能避免成本的選擇。例如,你可以說:
比優(yōu)雅地轉(zhuǎn)移壞主意更好的方法是主動引導(dǎo)合作進入更有效的軌道。您可以通過在結(jié)構(gòu)化的、戰(zhàn)略性的時間(例如預(yù)定的研討會)尋求輸入,最大限度地利用每個人的貢獻。這種主動的方法減少了在無法有效評估或合并意外更改請求時感到意外的可能性。
每個人都對設(shè)計都自己的看法,這使得UX設(shè)計師的工作充滿挑戰(zhàn)。有些人總喜歡在界面中添加一些令人困惑的元素,比如原型、這會影響產(chǎn)品開發(fā)進度(可能包含UX迭代),以及那些喜歡設(shè)計(甚至認為自己是設(shè)計師)但缺乏任何真正的UX設(shè)計專業(yè)知識的人。
但是,如果您與您的合作者進行深入交流,向他們灌輸設(shè)計理念并引導(dǎo)他們發(fā)揮自己的長處,這種“設(shè)計幫助”的多樣性將是一種寶貴的資產(chǎn)。
最有成效的用戶體驗設(shè)計師在設(shè)計過程中會和許多人合作。他們與各種團隊成員和主要利益相關(guān)者討論業(yè)務(wù)目標,發(fā)展機會和約束,優(yōu)先級,要求和設(shè)計理念。這些人來自許多職能團體;具有不同的UX專業(yè)知識,想法和思考。
要想成為一名優(yōu)秀的用戶體驗設(shè)計師并創(chuàng)作出優(yōu)秀的設(shè)計作品,培養(yǎng)必要的溝通技巧來利用這些信息來源和輸入是必不可少的。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
不要小看一個登錄界面,它內(nèi)里包含很多細微的東西,除去外觀視覺,更多要注意的是交互的操作體驗,比如一些動畫、一些文案提示等細節(jié)都要注意,如果你是UI設(shè)計師,建議看看這次經(jīng)驗文章,附上了大量案例,也許能助你未來更好的去設(shè)計一個用戶體驗友好的APP登錄界面。
下面通過幾個關(guān)于登錄界面的UX策略指南,讓你更好的應(yīng)用和實踐。
如果用戶使用你的服務(wù)必須登錄,那么信息字段是你必須要做的主要功能(即輸入框中的提示語,如:輸入手機號碼,輸入驗證碼。)
使這些字段清楚可視,并且不要強迫用戶到處尋找,或花更多的步驟進到App. 一旦他們進到App, 登錄界面是他們所應(yīng)當見到的第一個事情。
獎勵提示:相比于使用常見的“登錄”“登陸”的按鈕,可以更富有創(chuàng)造性,并要包含可直接輸入?yún)^(qū)域。確保記住用戶的數(shù)據(jù),這樣他們就不需要每次輸入信息。
更多地時候,我們看到注冊和登陸按鈕被放置的靠近彼此,但是這會對用戶產(chǎn)生反作用。
這兩個動作都包含了相同的動詞,并且看起來也很相似,所以他們會混淆用戶的選擇。在有限的時間內(nèi)進入問題,他們可能會感到沮喪并且離開。
基本上,任何界面上不應(yīng)該有使用戶“暫停”和“思考”的元素。
如果你想讓他們的體驗完美無瑕,分開這注冊和登陸兩個區(qū)域,并且使差別清晰可見。另外,你可以使用不同的動詞或者簡單解釋不同的字段是什么。
在登錄和注冊部分,增加不同的輸入字段。
除了動詞“Sign”是事實之外,另一個另用戶感到困惑的是,登錄和注冊部分通常有相同數(shù)量的輸入框(用戶名,密碼,和郵箱)。
為了完全地區(qū)分,最小化新用戶嘗試直接登錄的機會。用不同的輸入字段。
當大多數(shù)用戶的密碼由于安保原因被打了馬賽克,用戶頻繁遇見的另一個問題是打錯他們的密碼。
這甚至?xí)l(fā)生在很有經(jīng)驗的打字員身上,特別是當他們在移動設(shè)備上登錄的時候。
防止這種情況發(fā)生的做法是:在密碼字符旁邊包含一個“顯示密碼”的單選框或圖標。
如果應(yīng)用監(jiān)測到一個錯誤的密碼組合,和用戶名,但是沒有明確的報告給用戶問題是什么,用戶可能會多次嘗試后,很生氣的退出應(yīng)用。
這是為什么你應(yīng)該考慮通用的回復(fù)(例如“你的密碼或郵箱不符合”),并且給他們立馬回復(fù)怎么解決這個問題。
問下郵箱地址或電話號碼,而不是唯一的用戶名
為什么人們登錄時人們很少記住“用戶名”?如果使用用戶名登錄,你會面對很多可避免的困難:用戶名必須是一個唯一的,這意味著人們會重復(fù)嘗試輸入一個系統(tǒng)里目前還沒有的用戶名,或者最終使用其真實姓名。
過了一會兒,用戶想出了一個唯一的登錄名,但是只過了一小會兒就忘記了,因為這個用戶名對他沒有任何的意義。
另一個事情可以促進登錄,是提供給用戶幾個登錄選項,并且給他們機會來選擇和嘗試用戶名而不會沮喪。在這過程中強迫的一部分是允許他們使用郵箱地址和密碼來注冊。
忘記密碼發(fā)生在所有人身上,這也是為什么,你急迫的給到用戶一個機會來恢復(fù)密碼,那么就直接在登錄界面這么做吧。
所要做的就是,在輸入框下增加一個“忘記你的密碼”的鏈接,并讓系統(tǒng)能給用戶的郵箱或電話號碼發(fā)送驗證碼。
為了避免強迫進入和暴力攻擊,許多網(wǎng)頁和應(yīng)用在一系列的錯誤嘗試之后關(guān)閉賬戶。
安全第一,但是你至少要嘗試告訴用戶,在多少次嘗試后,在關(guān)閉賬戶前,他們必須離開。你也可以分享更多的細節(jié),例如,在試錯后的十分鐘才可以再次嘗試的事實。
如果在過去,都是在用相同的無風(fēng)格和定制化的登錄頁。現(xiàn)如今,給你的應(yīng)用,創(chuàng)造一個獨特的登錄頁設(shè)計是非常重要的事情,尤其是你想要圍繞你的應(yīng)用和服務(wù)來創(chuàng)造品牌。
設(shè)計師和開發(fā)人員也有承認意識到登錄表單的重要性。這是事實,特別對于移動環(huán)境下,用戶界面相比于“桌面”網(wǎng)站,扮演了更重要的角色。
當為一個應(yīng)用和移動站設(shè)計這個元素的時候,設(shè)計師花很多的精力,使它既好用又美觀。
在這篇文章里,你會看到很多移動端用戶界面設(shè)計的案例靈感,關(guān)于一個移動端登陸頁面應(yīng)被設(shè)計成什么樣,給你一些線索。
Roostio Login Screen
Login Screen
Job Board – Company Profile / Login
Shopping app
Tailslife: Login
Moody Sign Up/In Screen
Bandio App Login & Sign Up
Parts – login dark side
Login Screens
ZSSK – login and route detail
DailyUI Day001
Skype Redesign
Sign Up Window – Daily UI #001
對用戶來說,登陸已經(jīng)很困難了,所以,使之變得更復(fù)雜,對你的產(chǎn)品來說并不是一個很聰明的決定。避免更大的和不熟悉的形式,并且讓輸入字符簡單可視。這些只是一些為了節(jié)省用戶時間可以考慮的技巧,并且?guī)椭麄兿硎苣闼峁┑姆?wù)。
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
在設(shè)計領(lǐng)域,設(shè)計風(fēng)格總是多變的,也有很多隨著流行趨勢而不斷變化,但是存在著N多的爭議。
對于扁平化和擬物化,說白了,只是風(fēng)格的不同,最終的設(shè)計目的是一樣的,但是,卻還是會有很多的朋友會糾結(jié)于是扁平還是擬物化設(shè)計,爭論是扁平好還是擬物好,怎么說呢,各有各的優(yōu)點,各有各的不足,這是今天,我們要帶大家看的!
Michael Fugoso,一位來自圣地亞哥,加利福尼亞的插畫家和設(shè)計師,帥小伙!
他說,關(guān)于他自己,就各像其他人一樣,他喜歡旅行,他喜歡吃比薩和海鮮,他非常的重視家庭,家庭總是以他的第一位!他也喜歡分享,因為分享會讓別人的生活更容易,幫助別人成功,他覺得,這有助于他成為一個好的設(shè)計師。同時,他也喜歡自私地做自己想做的事情,因為他覺得,這有助于他成為一個好的藝術(shù)家。
今天,帶大家看一組他的作品,在他的這些作品中,很好的反映了扁平與擬物的關(guān)系,扁平的背景,搭配上擬物的元素,其視覺效果非常棒,沖擊力十足,震撼性十足!
扁平與擬物,數(shù)不清的恩怨情仇!道不盡的愛恨糾纏!
這是一張扁平化的插畫!
當它變成擬物后
你覺得哪個的視覺沖擊力更強一些?
我們接著看!
這是一張扁平化作品!
他開始在矢量程序上呈現(xiàn)
開始色彩的調(diào)整與細節(jié)的完善
最終的效果呈現(xiàn)
這是一臺扁平化的車
添加裝飾元素
調(diào)整顏色后,得到一個扁平化的結(jié)果
把車元素單獨提取出來
在矢量程序上呈現(xiàn)
上色,添加細節(jié)
對細節(jié)的刻畫簡直不能再棒
調(diào)整色調(diào)
最終的對比
再往下看,你可能會被美哭
扁平與擬物的碰撞
不一樣的花火
這些火箭,看得人熱血澎湃阿
看了感覺效果如何
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
這是一個以故事形式來展現(xiàn)網(wǎng)站:Oat the Goat,動畫很有感覺,雖然小編目前的水平還做不出這類網(wǎng)站,但看看也可以增加點靈感、閱歷,原來網(wǎng)站還能這樣做的,一個網(wǎng)站,一個溫暖的故事,來一起欣賞電影般的酷站,Enjoy!
網(wǎng)站名稱:Oat the Goat
網(wǎng)站地址:http://oatthegoat.co.nz/
(請在PC端欣賞,瀏覽該網(wǎng)站時記得打開聲音哦~)
故事是從一只羊咩咩的歷險開始,他翻山越嶺,途中遇到一些困難和遇到困難的小伙伴們,接著一起去克服,然后越來越多的小伙伴們一起去冒險,經(jīng)過重重險阻,最終…… (還在讓大家自己欣賞才有 Feel 的)
所有的畫面非常的漂亮,就像在看電影一樣,同時網(wǎng)站還帶有一至交互體驗,讓用戶去選擇。
截圖:羊咩咩遇到第一個有困難的小伙難了哦,我們繼續(xù)看看……
截圖:要選擇你要怎么做了
故事結(jié)局如何?請自行觀賞,同時您可以在下方評論處說出你的想法:)
藍藍設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計
藍藍設(shè)計的小編 http://m.yvirxh.cn