交互設(shè)計(jì)的5個(gè)常見錯(cuò)誤
艷麗的圖片、順暢的鼠標(biāo)懸停效果和意外的動(dòng)畫，不再那么容易引起用戶注意了。但難題卻沒有解決——如何創(chuàng)造令人愉快的用戶體驗(yàn)，讓用戶面帶笑容完成轉(zhuǎn)化？如果你對常見的設(shè)計(jì)陷阱有所警覺，就能更少犯錯(cuò)。
為了方便——可能也為了讓你知道你不是獨(dú)自一人——以下總結(jié)了最常見的交互設(shè)計(jì)誤區(qū)。
1、鋪天蓋地的創(chuàng)新
網(wǎng)頁設(shè)計(jì)師都非常有創(chuàng)造力。我們希望通過作品來表達(dá)自我。我們總是在尋求創(chuàng)新的設(shè)計(jì)方法來脫穎而出。但是，當(dāng)涉及到交互設(shè)計(jì)時(shí)，創(chuàng)新并不總是好事。甚至?xí)o你的網(wǎng)站帶來壞的影響。用戶渴望熟悉的事物，他們總是會(huì)遵循一些特定的操作方式。
Randy J. Hunt，Etsy的創(chuàng)意總監(jiān)和Product Design for the Web作者，清晰地陳述過：“嘿，設(shè)計(jì)師：別再TM自作聰明了。”在文章中，他詳細(xì)解釋了為什么別在網(wǎng)頁設(shè)計(jì)上過分熱衷創(chuàng)新。
以Iotorama網(wǎng)站為例。它挺漂亮，音樂深情，但是看著滿屏幕移動(dòng)的球，用戶不知所措。不要誤解我的意思，這個(gè)項(xiàng)目非常出色，超級有創(chuàng)造力！我喜歡這個(gè)大膽的創(chuàng)意，但它一點(diǎn)也不直觀。
還有一個(gè)例子。Safety on the Slopes項(xiàng)目背后的創(chuàng)作者想到一個(gè)巧妙的交互式圖形，用來警告用戶冬季運(yùn)動(dòng)的危險(xiǎn)。非常創(chuàng)新，同時(shí)也很直觀、有趣、令人印象深刻。
2、令人困惑的導(dǎo)航
“不要自作聰明”的準(zhǔn)則也可以沿用到導(dǎo)航上。有些設(shè)計(jì)師試圖使用折衷的名稱來尋求新穎。比如Chijoff 網(wǎng)站就讓用戶不知道他們究竟提供什么，如何聘請他們。需要看上好一陣子，才能理解“共同創(chuàng)造”頁面實(shí)際上就等同于“服務(wù)”。甚至還有，通讀整頁后用戶仍然 不知道該怎么做……頁面末尾只有個(gè)小注冊表單用來獲取最新的行業(yè)新聞和提示！在“聯(lián)系”頁面也沒有表單，只有郵編和郵箱地址。使人們聯(lián)絡(luò)或聘用他們非常困 難。
你能猜出“Universe”在Maison Margiela網(wǎng)站中是什么意思嗎？實(shí)際上它鏈接到他們的Facebook主頁。誰能想到？
相反，看看legworkstudio的網(wǎng)站。它的創(chuàng)意與超凡令人震撼。導(dǎo)航非常清晰不含糊。用戶絕對不會(huì)迷路。
3. 雜亂無章
有一段時(shí)期，網(wǎng)站都試圖把一切可能的東西擺上臺(tái)面。那些日子已經(jīng)一去不復(fù)返，但是很多網(wǎng)站仍然在犯這個(gè)錯(cuò)誤?？纯催@個(gè)在線商城：
設(shè)計(jì)師試圖堅(jiān)持一種單色配色，但是大量顏色不同的色塊、logo和字體，在這個(gè)頁面上就足夠讓用戶步履蹣跚。搜索框有著醒目的文案：“那么，今天你想要什么？”，但整個(gè)布局的外觀和感覺非常過時(shí)。
EBay是主要在在線零售商之一，在這點(diǎn)上做得不錯(cuò)。沒有用產(chǎn)品圖片、促銷和各種行動(dòng)召喚塞滿整個(gè)頁面，而是保持它干凈簡潔，強(qiáng)調(diào)他們確實(shí)希望用戶首先關(guān)注的東西，并附上清晰的提示，接下來該怎么做。
4. 注意對比，大哥！
對比是創(chuàng)造視覺層級、吸引用戶注意特定元素的最重要的方式之一。在網(wǎng)頁設(shè)計(jì)中，對比不僅僅意味著顏色使用，也包括尺寸、形狀和位置。
這個(gè)網(wǎng)站是最簡單生動(dòng)的例子。他們做到了統(tǒng)一一致，但整體背景和按鈕并不夠吸引人，尤其是在訂購按鈕上。
相比來看這個(gè)。顏色選用很接近，但結(jié)果卻完全不同。而且，創(chuàng)新的滾動(dòng)效果，流暢地介紹了產(chǎn)品的新功能——反光材料。很酷，對吧？
5. 忽視表單樣式
表單設(shè)計(jì)是用戶體驗(yàn)最基本的部分。每個(gè)網(wǎng)站都有一個(gè)目標(biāo)——無論是樹立榜樣、直接售賣產(chǎn)品或是提供信息。不幸的是，許多網(wǎng)站有著光鮮的首頁，卻寧可用長表單和復(fù)雜的驗(yàn)證碼來使用戶厭煩致死。除非用戶有強(qiáng)烈的先導(dǎo)動(dòng)機(jī)，否則他們就會(huì)離開。
有了JCF這樣的有效的跨瀏覽器的解決方案，是時(shí)候忘記那些丑陋的默認(rèn)表單元素了，轉(zhuǎn)向一種更加沉浸的用戶體驗(yàn)吧。
另一件氣人的事，是表單要求太多信息，或者沒通過完善測試。例如sketchybusiness.io的表單高亮顯示了所有的空白框，甚至包括非必填項(xiàng)。
如果你看了sketchybusiness.io的表單，你絕對會(huì)喜歡它的鼠標(biāo)懸停和按鈕按下狀態(tài)。而且，“別害羞”的提示文案增加了一絲親切幽默的感覺。
最后……
不要懶于測試！對你重要的對于顧客未必重要。他們在哪里遇到問題卡住？是導(dǎo)航、奇特的視覺差滾動(dòng)效果、還是長時(shí)間加載的視頻？用戶測試的最大好處之一，是你可以通過用戶的視角來觀察，關(guān)注他們的需求、做出改進(jìn)。不要抑制你的創(chuàng)造力。要牢記網(wǎng)站訪客可能會(huì)感到困惑和沮喪。
你見過最糟的交互設(shè)計(jì)錯(cuò)誤是什么？可以在評論中分享你的想法和故事。
交互設(shè)計(jì)需要注意什么
1、一看就懂
這個(gè)說起來挺好理解的，就是讓用戶直觀的理解產(chǎn)品功能，而事實(shí)上，這個(gè)概念包含的東西太多了，這里簡單說下常見的2點(diǎn)。
圖形化：圖片相對文字來說，所承載的信息更直觀，也更能渲染氣氛，給用戶留下更深的印象。常見于各種小圖標(biāo)，比如下載按鈕，通常會(huì)看到用一個(gè)向下的箭頭來表示。對于重要的按鈕來說，一般會(huì)將其圖形化，就算沒有采用小圖標(biāo)來輔助表達(dá)，也會(huì)采用“色塊”來講“文字”圖形化。
文字：剛說了圖形化，其實(shí)并不是說，所以文字都可以用圖形來替代，文字的存在還是很有必要的，特別是一些具有“獨(dú)特性”的功能按鈕，用戶接觸得少，沒有相關(guān)的理解經(jīng)驗(yàn)，難以圖形化。大多數(shù)情況，文字不會(huì)刪去，而會(huì)保留，輔助說明圖形內(nèi)容。文字還有一個(gè)很常見的問題，就是文字太多，用戶沒有耐心去看，或者看完后沒有理解到所表達(dá)的核心。在設(shè)計(jì)的時(shí)候，要將文字刪了再刪，把“介紹文段”變成“產(chǎn)品口號”，有助于用戶更好的了解產(chǎn)品。用詞也很重要，如果產(chǎn)品定位是專業(yè)人員使用，那么可以使用一些專業(yè)術(shù)語，如果不是，請把各種專業(yè)術(shù)語“平民化”。
這一點(diǎn)，更偏向產(chǎn)品的表面形式，這需要交互設(shè)計(jì)師跟視覺設(shè)計(jì)師相配合，把產(chǎn)品頁面中，需要突出的重點(diǎn)，更視覺設(shè)計(jì)師溝通好。這一步，也是用戶感覺這個(gè)產(chǎn)品好不好用，最先接觸到的一層，即從視覺效果反饋的結(jié)果。
2、一用就對
這點(diǎn)可以說是”一看就懂“的骨架，更多涉及產(chǎn)品的框架，讓用戶眼中的產(chǎn)品跟設(shè)計(jì)的產(chǎn)品一樣。
歸納：同類功能歸到一起去，這就像電商網(wǎng)站的導(dǎo)航，把各種商品歸納分類。在這里，交互設(shè)計(jì)師需要根據(jù)需求檔，整理產(chǎn)品的框架，然后把同一類型的功能歸到一起去。歸納說起來挺容易的，但是做起來涉及的因素就比較多了。經(jīng)?？吹揭恍┊a(chǎn)品，把同一個(gè)功能，重復(fù)出現(xiàn)在同個(gè)頁面中，這種做法，不一定是不合理的。比如：登陸功能，一個(gè)頁面經(jīng)常有多個(gè)入口，一般也是合理的。在工作中，最常遇到產(chǎn)品經(jīng)理想要突出某個(gè)新產(chǎn)品，明明這個(gè)產(chǎn)品功能應(yīng)該歸到A頁面，但是產(chǎn)品經(jīng)理要求去B頁面宣傳，這時(shí)候就要留意，這個(gè)位置是否合 理了。（這里要展開也討論的話，都可以單獨(dú)寫一篇了，這里就簡單舉個(gè)例子：在電商里，如果把“手機(jī)套”放到“手機(jī)頁面”去宣傳，這里不一定是框架錯(cuò)了，如 果把“手機(jī)套”放到“電腦頁面”去宣傳，這里的框架就有問題了。）
一致性：這是交互設(shè)計(jì)最基礎(chǔ)的知識之一，保證產(chǎn)品各種元素的一致性，不要讓用戶迷茫。比如標(biāo)題的一致性，同一個(gè)功能，這里用A來表達(dá)，到了另一個(gè)頁面，也要用A來表達(dá)。這里保障用戶不會(huì)在使用過程中迷茫的基礎(chǔ)。除了產(chǎn)品本身要保持一致性之外，在于產(chǎn)品所屬的行業(yè)來說，這點(diǎn)還有一些有趣的方面可以討論。對于產(chǎn)品的同行，特別是該行業(yè)中的老大，他們的設(shè)計(jì)是怎 樣的，這點(diǎn)需要交互設(shè)計(jì)師去了解清楚。因?yàn)橛脩糸L期使用這些產(chǎn)品，會(huì)養(yǎng)成一些操作習(xí)慣，比如現(xiàn)在很多信息類APP，下拉代表刷新頁面，如果你設(shè)計(jì)的信息類 軟件，沒有這個(gè)功能，那么在用戶體驗(yàn)上，就會(huì)有所影響。
這點(diǎn)說白了，就是要搭建合理的結(jié)構(gòu)框架，也是交互設(shè)計(jì)師工作的核心之一。保障用戶操作順暢，就靠它了。不過這里的標(biāo)題“一用就對”，其實(shí)也不太嚴(yán) 謹(jǐn)，因?yàn)楫a(chǎn)品一般都允許用戶“試錯(cuò)”，用戶可以通過錯(cuò)誤操作，來學(xué)會(huì)使用產(chǎn)品。這里就引出了下一點(diǎn)反饋的內(nèi)容了，當(dāng)然，這個(gè)錯(cuò)誤不能是“致命錯(cuò)誤”。
3、別發(fā)呆了
這點(diǎn)主要講的是“反饋”，反饋也是交互設(shè)計(jì)的一個(gè)基礎(chǔ)知識，涉及的范圍挺廣，但是核心就是要讓用戶別發(fā)呆，了解當(dāng)前的操作，明白怎么去操作。
錯(cuò)誤各種錯(cuò)誤操作的反饋提醒，這點(diǎn)需要交互設(shè)計(jì)師去發(fā)現(xiàn)，一個(gè)產(chǎn)品可以存在的各種情況，簡單點(diǎn)說，就是找茬，還不能找太少。比如：留言超過100個(gè)字符怎么辦？再極端點(diǎn)，服務(wù)器空間不夠，保存不了留言怎么辦？用戶短期內(nèi)持續(xù)留言，服務(wù)器超負(fù)荷怎么辦？這些情況都需要交互設(shè)計(jì)師考慮好，當(dāng)然有些涉及開發(fā)編程的內(nèi)容，這部分內(nèi)容就需要跟相關(guān)技術(shù)人員溝通下?？紤]后，還需要給出適當(dāng)?shù)囊曈X提醒，比如，提醒“你剛剛已經(jīng)留言了，我們會(huì)盡快回復(fù)，如需補(bǔ)充內(nèi)容，請30秒后重試”。
等待漫漫的等待，是大多數(shù)用戶無法忍受的事，如果還沒有適當(dāng)?shù)奶嵝?，用戶基本不?huì)繼續(xù)等待。對于長時(shí)間的等待，最好有具體時(shí)間倒計(jì)時(shí)，而不是以單純進(jìn)度 條的方式。而對于1-5秒之類的短時(shí)間等待，有時(shí)候采用純進(jìn)度條的方式會(huì)帶來意外的收獲。比如在游戲的跳轉(zhuǎn)過程，因?yàn)樽x取數(shù)據(jù)需要等待，而這個(gè)過程大概要 2-3秒，這時(shí)候，如果采用讀秒的方式，用戶容易產(chǎn)生煩躁，特別是需要重復(fù)操作時(shí)，容易讓用戶覺得，游戲沒優(yōu)化好，怎么這里還要等待2-3秒啊；如果采用 進(jìn)度條的方式，用戶會(huì)把對游戲加載慢的原因，怪罪到自己的設(shè)備配置低。
導(dǎo)航導(dǎo)航相對于產(chǎn)品的游園指南，除了告訴用戶有什么東西外，還承擔(dān)著用戶的指南功能，時(shí)刻告訴用戶，當(dāng)前位置在哪，不要讓用戶迷路了。這也是交互設(shè)計(jì)的基礎(chǔ)之一，適當(dāng)?shù)闹敢?，別讓用戶發(fā)呆。
反饋雖然也是屬于表面層，但是這部分工作卻是交互的重點(diǎn)之一。
4、總結(jié)
一看就懂，通過視覺上的優(yōu)化，讓用戶更直觀的理解產(chǎn)品功能
一用就對，通過產(chǎn)品框架上的優(yōu)化，讓用戶更順暢的使用產(chǎn)品
別發(fā)呆了，通過用戶的眼睛，讓用戶開開心心使用產(chǎn)品
小技巧：
（1）設(shè)計(jì)好一個(gè)產(chǎn)品后，把文字重新讀一篇，思考，如果這段文字刪了，會(huì)不會(huì)對用戶使用造成影響，不會(huì)的話，那就刪了吧。
（2）隨便打開一個(gè)頁面，然后看看有沒有合適的“當(dāng)前位置”指南，會(huì)不會(huì)迷路，如何返回之類的。
（3）重新檢查一次里面的用詞/圖標(biāo)，是否一致。
（4）常見的遺漏情況：軟件/硬件（兼容性問題比較常見）；網(wǎng)絡(luò)狀態(tài)（無網(wǎng)、超時(shí)、慢等）；轉(zhuǎn)場（過程是否可以取消，是否有反饋等）
（5）大必殺，找?guī)讉€(gè)“新用戶”（沒有接觸過該產(chǎn)品的人），看他們操作。
寫在最后，情感化設(shè)計(jì)，從我大學(xué)開始，就一直對這塊內(nèi)容很感興趣，而如今作為一名初級交互設(shè)計(jì)師，我覺得情感化設(shè)計(jì)可以更好的融入產(chǎn)品之中去，就比如各個(gè)網(wǎng)站的404頁面，這個(gè)頁面的設(shè)計(jì)也間接表達(dá)了各個(gè)網(wǎng)站的情懷。
