用戶瀏覽我們的網(wǎng)頁時,并不是通讀所有的內(nèi)容,而是快速地掃描整個網(wǎng)頁。因此,如果用戶來到這個網(wǎng)站,是為了尋找特定的內(nèi)容或者是完成某個任務(wù),那么他們會先瀏覽整個網(wǎng)頁,直到用戶找到了自己想要去的地方,因此,作為一名合格的網(wǎng)頁設(shè)計(jì)以及網(wǎng)站建設(shè)者,你應(yīng)該*清楚在網(wǎng)站制作過程中什么是*忌諱的,下面騰虎網(wǎng)絡(luò)小編為你解答!
1、不要讓用戶等
網(wǎng)站用戶的耐心和注意力是非常小的,當(dāng)用戶在等待內(nèi)容加載時,他們很可能會變的沮喪。如果加載速度很慢,用戶很可能會離開這個網(wǎng)站,即使是足夠漂亮的加載動畫設(shè)計(jì)也無法改變這個結(jié)果。
2、在新標(biāo)簽頁打開鏈接
在新標(biāo)簽頁打開鏈接的設(shè)計(jì)讓用戶無法使用“返回”按鈕返回之前的頁面。這是非常不好的設(shè)計(jì)。
3、整個網(wǎng)站充斥著廣告
促銷和廣告會掩蓋網(wǎng)站里的內(nèi)容,也會讓用戶很難集中注意力去完成任務(wù),更不用說那些看起來像廣告的事情常常會被用戶忽略
4、滾動劫持
滾動劫持是指:網(wǎng)站的設(shè)計(jì)者或***控制滾動條,從而使得用戶在滾動鼠標(biāo)時,會在網(wǎng)站上看到不同的效果,包括動畫效果、固定的滾動點(diǎn)、甚至是重新設(shè)計(jì)過的滾動條。滾動劫持是用戶*不喜歡的設(shè)計(jì)之一,因此,它奪取了用戶控制滾動條的權(quán)利。當(dāng)你設(shè)計(jì)網(wǎng)站時或設(shè)計(jì)用戶界面時,你應(yīng)該讓用戶自己決定自己瀏覽的網(wǎng)頁或APP的位置。
5、自動播放視頻
在后臺自動播放視頻、音樂或聲音文件,都是用戶難以接受的設(shè)計(jì)方式。用戶很少使用這些元素,除非是在適當(dāng)?shù)臅r候。
6、為了網(wǎng)站的美觀犧牲網(wǎng)站的可用性
一個網(wǎng)站或用戶界面的設(shè)計(jì)不應(yīng)該因?yàn)閮?nèi)容影響用戶的消費(fèi)能力。不要在文字后使用繁重的背景、也不要使用讓用戶很難閱讀或顏色對比不明顯的配色方案。
7、使用閃爍的文字或廣告
閃爍的內(nèi)容或閃爍會導(dǎo)致易感人群的癲癇病。這樣的設(shè)計(jì)不僅能引發(fā)癲癇,而且還在網(wǎng)頁設(shè)計(jì)領(lǐng)域中,表單設(shè)計(jì)始終是繞不過去的話題。有的表單設(shè)計(jì)的很無聊,但是有的表單卻設(shè)計(jì)的很有趣,但是無論好壞,用戶總得將表單填完,才能進(jìn)入下一個環(huán)節(jié),所以,表單的交互和體驗(yàn)無比重要。和其他的設(shè)計(jì)工作一樣,表單是設(shè)計(jì)師/產(chǎn)品和用戶進(jìn)行溝通的橋梁,創(chuàng)建易用、**的網(wǎng)頁表單,用戶填寫越方便,轉(zhuǎn)化率也就越高。
表單那可以有趣,可以便捷,真正的難點(diǎn)在于讓整個體驗(yàn)足夠優(yōu)秀。用戶不會因?yàn)橛腥ざ顚懕韱危麄円氖潜韱翁顚懼蟮慕Y(jié)果。因?yàn)樾湃文愕木W(wǎng)站或者APP,用戶才會將他們的信息通過表單提交上來,但是由于種種原因,這些信息的呈現(xiàn)、傳遞和保存*終成為了設(shè)計(jì)師和用戶兩方的痛點(diǎn)。強(qiáng)化表單的功能性,不僅需要更優(yōu)秀的視覺設(shè)計(jì),還需要強(qiáng)大的代碼在后方支持,同時還得對用戶有足夠的了解。今天的文章,為你提供一些設(shè)計(jì)技巧,幫你提升表單的用戶體驗(yàn)和轉(zhuǎn)化率,希望對你有所幫助。
我們拿一個旅游門戶網(wǎng)站的注冊流程作為實(shí)例,幫你更好地理解這些技巧。也許這些技巧聽起來很簡單,但是魔鬼常常藏于細(xì)節(jié),多加小心并不為過。通過這個注冊流程實(shí)例,我們將會說明六個表單設(shè)計(jì)的實(shí)用技巧。
1、人性:圍繞著“信任”來做設(shè)計(jì)
無論是設(shè)計(jì)師還是用戶,都在追求更好的體驗(yàn)。但是產(chǎn)品體驗(yàn)好始終都是有一個重要的前提:目標(biāo)受眾能夠充分地理解設(shè)計(jì)元素和其中內(nèi)容,再才談得上體驗(yàn)是否足夠優(yōu)秀。此外,在設(shè)計(jì)的時候,要有目標(biāo)地讓用戶同品牌本身的產(chǎn)生情感關(guān)聯(lián),而不僅僅是數(shù)據(jù)和程序驅(qū)動下的流程推進(jìn),冰冷的過程所帶來的疏遠(yuǎn)感對于產(chǎn)品本身是不利的,個性、情感化的呈現(xiàn),會有更好的效果,但是需要足夠的時間來打磨。
同時,值得注意的地方在于,插畫、圖像和圖標(biāo)這樣的視覺元素,應(yīng)該是內(nèi)容的補(bǔ)充,這個時候不應(yīng)該喧賓奪主。在下面的案例當(dāng)中,我們使用了圖片來搭配表單。
2、簡明:簡單的布局讓信息更容易被獲取
人的眼睛在閱讀內(nèi)容的時候,其實(shí)非常的挑剔。如果使用了太多的色彩和設(shè)計(jì)元素,用戶一定會注意到它們,同時所帶來的問題,就是用戶難以將注意力集中在關(guān)鍵的信息上了。
淺色的背景和更容易被聚焦的主體內(nèi)容搭配在一起,是有效的設(shè)計(jì)策略,合理地加入一些描述性的內(nèi)容,幫助用戶更好地理解信息也是個好主意,這可以提升整個流程的速度,增加表單的直觀性。在這個案例當(dāng)中,諸如“Username”和“Password”都作為描述性的文本,來幫助用戶了解各個字段需要填寫的內(nèi)容。
3、易懂:提升表單的可理解性
表單是否能夠被用戶所理解,是否為用戶所信任,是設(shè)計(jì)者在這個環(huán)節(jié)需要考慮的首要問題。每個步驟都要足夠的誠實(shí),并且提供充分的說明,這樣可以讓用戶保持耐心,并且做足準(zhǔn)備。相比于隱藏了關(guān)鍵步驟,相對冗長但是內(nèi)容充分的表單,更值得信任,并且不會讓人沮喪。不過請注意,表單應(yīng)當(dāng)盡量提供**必要的信息,充分并不意味著要多而全,“少即是多”的原則同樣在此適用。
4、引導(dǎo):報(bào)錯信息要微妙地處理
無論表單中所承載的信息有哪些,都應(yīng)該讓用戶感受到引導(dǎo)感。用戶所填寫的信息,是你或者你的產(chǎn)品所需要的,所以在設(shè)計(jì)表單中內(nèi)容的時候,保持適當(dāng)?shù)摹皩υ捀小?。?dāng)用戶填寫的信息出錯的時候,尤其如此,不要讓用戶覺得這個錯誤很可怕,而是通過引導(dǎo),降低用戶的沮喪情緒,盡快修改,完成填寫。
在下面的案例當(dāng)中,用戶填寫出錯并且以“Sorry”來開頭,這種委婉的表述方式來緩解用戶情緒,然后提供有用的建議,幫助用戶解決問題。
5、陪伴:始終為用戶提供幫助
當(dāng)用戶在表單填寫過程中出錯,有用的幫助能夠讓用戶更加舒適,增加信任感。幫助可以是任何形式,無論是彈出框、faq頁面,還是即時通訊聊天框,都可以。
在下面的實(shí)例當(dāng)中,我們采用了聊天對話框來為用戶提供幫助,這樣的設(shè)計(jì)讓用戶有一種“始終有人在旁邊提供幫助”的觀感,如果出錯的時候,主動為用戶提供幫助信息,則能夠進(jìn)一步強(qiáng)化對用戶的信任感。
6、獎勵:完成任務(wù)之后祝賀用戶
當(dāng)用戶完成任務(wù)之后,獲得祝賀,大腦中分泌多巴胺,從而獲得愉悅感和滿足感。這種現(xiàn)象是得到臨床驗(yàn)證的。無論是真實(shí)的祝賀,還是完成任務(wù)之后的系統(tǒng)提醒,都會讓用戶產(chǎn)生這樣的反饋。游戲化設(shè)計(jì)當(dāng)中,常常會采用這樣的機(jī)制,看似獲得更多成就,實(shí)質(zhì)上是催發(fā)用戶體內(nèi)產(chǎn)生多巴胺這種“化學(xué)獎勵”,產(chǎn)生快樂的感覺。
雖然很多時候,UI所提供的祝賀和獎勵僅僅只是一個簡單的“Thank You”,但是在用戶那邊則獲得了良好的感覺和真實(shí)的笑臉。
結(jié)語
表單可能是網(wǎng)站或者APP當(dāng)中*簡單、*常見的部分,但是它在整個體驗(yàn)流程和產(chǎn)品當(dāng)中,都起著關(guān)鍵的作用。**再提醒一句,讓表單保持簡短,和用戶保持對話,好設(shè)計(jì)也許會給你帶來意想不到的效果。會因吸引用戶的注意力而惹惱用戶。