精品主題,實(shí)戰(zhàn)科普,最新行業(yè)熱點(diǎn)話題,隨時(shí)掌握云上咨訊。
交互設(shè)計(jì)從來都不容易。它包括了用戶行為的深度分析,和一絲不茍的規(guī)劃。隨著新技術(shù)和交互設(shè)計(jì)模式的出現(xiàn),事情并不會(huì)變?nèi)菀住?span>
艷麗的圖片、順暢的鼠標(biāo)懸停效果和意外的動(dòng)畫,不再那么容易引起用戶注意了。但難題卻沒有解決——如何創(chuàng)造令人愉快的用戶體驗(yàn),讓用戶面帶笑容完成轉(zhuǎn)化?如果你對(duì)常見的設(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)目非常出色,超級(jí)有創(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)站就讓用戶不知道他們究竟提供什么,如何聘請(qǐng)他們。需要看上好一陣子,才能理解“共同創(chuàng)造”頁面實(shí)際上就等同于“服務(wù)”。甚至還有,通讀整頁后用戶仍然不知道該怎么做……頁面末尾只有個(gè)小注冊(cè)表單用來獲取最新的行業(yè)新聞和提示!在“聯(lián)系”頁面也沒有表單,只有郵編和郵箱地址。使人們聯(lián)絡(luò)或聘用他們非常困難。
你能猜出“Universe”在Maison Margiela網(wǎng)站中是什么意思嗎?實(shí)際上它鏈接到他們的Facebook主頁。誰能想到?
相反,看看legworkstudio的網(wǎng)站。它的創(chuàng)意與超凡令人震撼。導(dǎo)航非常清晰不含糊。用戶絕對(duì)不會(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è)頁面,而是保持它干凈簡(jiǎn)潔,強(qiáng)調(diào)他們確實(shí)希望用戶首先關(guān)注的東西,并附上清晰的提示,接下來該怎么做。
4. 注意對(duì)比,大哥!
對(duì)比是創(chuàng)造視覺層級(jí)、吸引用戶注意特定元素的最重要的方式之一。在網(wǎng)頁設(shè)計(jì)中,對(duì)比不僅僅意味著顏色使用,也包括尺寸、形狀和位置。
這個(gè)網(wǎng)站是最簡(jiǎn)單生動(dòng)的例子。他們做到了統(tǒng)一一致,但整體背景和按鈕并不夠吸引人,尤其是在訂購按鈕上。
相比來看這個(gè)。顏色選用很接近,但結(jié)果卻完全不同。而且,創(chuàng)新的滾動(dòng)效果,流暢地介紹了產(chǎn)品的新功能——反光材料。很酷,對(duì)吧?
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)吧。
另一件氣人的事,是表單要求太多信息,或者沒通過完善測(cè)試。例如sketchybusiness.io的表單高亮顯示了所有的空白框,甚至包括非必填項(xiàng)。
如果你看了mostlyserious.io的表單,你絕對(duì)會(huì)喜歡它的鼠標(biāo)懸停和按鈕按下狀態(tài)。而且,“別害羞”的提示文案增加了一絲親切幽默的感覺。
最后……
不要懶于測(cè)試!對(duì)你重要的對(duì)于顧客未必重要。他們?cè)谀睦镉龅絾栴}卡住?是導(dǎo)航、奇特的視覺差滾動(dòng)效果、還是長時(shí)間加載的視頻?用戶測(cè)試的最大好處之一,是你可以通過用戶的視角來觀察,關(guān)注他們的需求、做出改進(jìn)。不要抑制你的創(chuàng)造力。要牢記網(wǎng)站訪客可能會(huì)感到困惑和沮喪。 交互設(shè)計(jì)從來都不容易。它包括了用戶行為的深度分析,和一絲不茍的規(guī)劃。隨著新技術(shù)和交互設(shè)計(jì)模式的出現(xiàn),事情并不會(huì)變?nèi)菀住?span>
艷麗的圖片、順暢的鼠標(biāo)懸停效果和意外的動(dòng)畫,不再那么容易引起用戶注意了。但難題卻沒有解決——如何創(chuàng)造令人愉快的用戶體驗(yàn),讓用戶面帶笑容完成轉(zhuǎn)化?如果你對(duì)常見的設(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)目非常出色,超級(jí)有創(chuàng)造力!我喜歡這個(gè)大膽的創(chuàng)意,但它一點(diǎn)也不直觀。
Overwhelmed with Innovation
還有一個(gè)例子。Safety on the Slopes項(xiàng)目背后的創(chuàng)作者想到一個(gè)巧妙的交互式圖形,用來警告用戶冬季運(yùn)動(dòng)的危險(xiǎn)。非常創(chuàng)新,同時(shí)也很直觀、有趣、令人印象深刻。
Irwin
2. 令人困惑的導(dǎo)航
“不要自作聰明”的準(zhǔn)則也可以沿用到導(dǎo)航上。有些設(shè)計(jì)師試圖使用折衷的名稱來尋求新穎。比如Chijoff網(wǎng)站就讓用戶不知道他們究竟提供什么,如何聘請(qǐng)他們。需要看上好一陣子,才能理解“共同創(chuàng)造”頁面實(shí)際上就等同于“服務(wù)”。甚至還有,通讀整頁后用戶仍然不知道該怎么做……頁面末尾只有個(gè)小注冊(cè)表單用來獲取最新的行業(yè)新聞和提示!在“聯(lián)系”頁面也沒有表單,只有郵編和郵箱地址。使人們聯(lián)絡(luò)或聘用他們非常困難。
Chijoffco
你能猜出“Universe”在Maison Margiela網(wǎng)站中是什么意思嗎?實(shí)際上它鏈接到他們的Facebook主頁。誰能想到?
Maisonmargiela
相反,看看legworkstudio的網(wǎng)站。它的創(chuàng)意與超凡令人震撼。導(dǎo)航非常清晰不含糊。用戶絕對(duì)不會(huì)迷路。
3. 雜亂無章
有一段時(shí)期,網(wǎng)站都試圖把一切可能的東西擺上臺(tái)面。那些日子已經(jīng)一去不復(fù)返,但是很多網(wǎng)站仍然在犯這個(gè)錯(cuò)誤??纯催@個(gè)在線商城:
Flipkart
設(shè)計(jì)師試圖堅(jiān)持一種單色配色,但是大量顏色不同的色塊、logo和字體,在這個(gè)頁面上就足夠讓用戶步履蹣跚。搜索框有著醒目的文案:“那么,今天你想要什么?”,但整個(gè)布局的外觀和感覺非常過時(shí)。
EBay是主要在在線零售商之一,在這點(diǎn)上做得不錯(cuò)。沒有用產(chǎn)品圖片、促銷和各種行動(dòng)召喚塞滿整個(gè)頁面,而是保持它干凈簡(jiǎn)潔,強(qiáng)調(diào)他們確實(shí)希望用戶首先關(guān)注的東西,并附上清晰的提示,接下來該怎么做。
ebay
4. 注意對(duì)比,大哥!
對(duì)比是創(chuàng)造視覺層級(jí)、吸引用戶注意特定元素的最重要的方式之一。在網(wǎng)頁設(shè)計(jì)中,對(duì)比不僅僅意味著顏色使用,也包括尺寸、形狀和位置。
這個(gè)網(wǎng)站是最簡(jiǎn)單生動(dòng)的例子。他們做到了統(tǒng)一一致,但整體背景和按鈕并不夠吸引人,尤其是在訂購按鈕上。
Modern themes
相比來看這個(gè)。顏色選用很接近,但結(jié)果卻完全不同。而且,創(chuàng)新的滾動(dòng)效果,流暢地介紹了產(chǎn)品的新功能——反光材料。很酷,對(duì)吧?
Bjornborg
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)吧。
Dkkma
另一件氣人的事,是表單要求太多信息,或者沒通過完善測(cè)試。例如sketchybusiness.io的表單高亮顯示了所有的空白框,甚至包括非必填項(xiàng)。
Mostlyserious
如果你看了mostlyserious.io的表單,你絕對(duì)會(huì)喜歡它的鼠標(biāo)懸停和按鈕按下狀態(tài)。而且,“別害羞”的提示文案增加了一絲親切幽默的感覺。
交互設(shè)計(jì)的5個(gè)常見錯(cuò)誤
最后……
不要懶于測(cè)試!對(duì)你重要的對(duì)于顧客未必重要。他們?cè)谀睦镉龅絾栴}卡住?是導(dǎo)航、奇特的視覺差滾動(dòng)效果、還是長時(shí)間加載的視頻?用戶測(cè)試的最大好處之一,是你可以通過用戶的視角來觀察,關(guān)注他們的需求、做出改進(jìn)。不要抑制你的創(chuàng)造力。要牢記網(wǎng)站訪客可能會(huì)感到困惑和沮喪。