實例分析|表單設計的六個實用技巧
本文作者將以一個旅游門戶網站的注冊流程作為實例,與你分享六個<表單設計的實用技巧。enjoy~
在<網頁設計領域中,<表單設計始終是繞不過去的話題。有的<表單設計的很無聊,但是有的表單卻設計的很有趣,但是無論好壞,用戶總得將表單填完,才能進入下一個環節,所以,表單的交互和體驗無比重要。和其他的設計工作一樣,表單是設計師/產品和用戶進行溝通的橋梁,創建易用、高效的<網頁表單,用戶填寫越方便,轉化率也就越高。 表單那可以有趣,可以便捷,真正的難點在于讓整個體驗足夠優秀。用戶不會因為有趣而填寫表單,他們要的是表單填寫之后的結果。因為信任你的網站或者APP,用戶才會將他們的信息通過表單提交上來,但是由于種種原因,這些信息的呈現、傳遞和保存最終成為了設計師和用戶兩方的痛點。強化表單的功能性,不僅需要更優秀的視覺設計,還需要強大的代碼在后方支持,同時還得對用戶有足夠的了解。今天的文章,為你提供一些設計技巧,幫你提升表單的用戶體驗和轉化率,希望對你有所幫助。 我們拿一個旅游門戶網站的注冊流程作為實例,幫你更好地理解這些技巧。也許這些技巧聽起來很簡單,但是魔鬼常常藏于細節,多加小心并不為過。通過這個注冊流程實例,我們將會說明六個<表單設計的實用技巧。
1、人性:圍繞著“信任”來做設計
無論是設計師還是用戶,都在追求更好的體驗。但是產品體驗好始終都是有一個重要的前提:目標受眾能夠充分地理解設計元素和其中內容,再才談得上體驗是否足夠優秀。此外,在設計的時候,要有目標地讓用戶同品牌本身的產生情感關聯,而不僅僅是數據和程序驅動下的流程推進,冰冷的過程所帶來的疏遠感對于產品本身是不利的,個性、情感化的呈現,會有更好的效果,但是需要足夠的時間來打磨。
同時,值得注意的地方在于,插畫、圖像和圖標這樣的視覺元素,應該是內容的補充,這個時候不應該喧賓奪主。在下面的案例當中,我們使用了圖片來搭配表單。
2、簡明:簡單的布局讓信息更容易被獲取
人的眼睛在閱讀內容的時候,其實非常的挑剔。如果使用了太多的色彩和設計元素,用戶一定會注意到它們,同時所帶來的問題,就是用戶難以將注意力集中在關鍵的信息上了。
淺色的背景和更容易被聚焦的主體內容搭配在一起,是有效的設計策略,合理地加入一些描述性的內容,幫助用戶更好地理解信息也是個好主意,這可以提升整個流程的速度,增加表單的直觀性。在這個案例當中,諸如“Username”和“Password”都作為描述性的文本,來幫助用戶了解各個字段需要填寫的內容。
3、易懂:提升表單的可理解性
表單是否能夠被用戶所理解,是否為用戶所信任,是設計者在這個環節需要考慮的首要問題。每個步驟都要足夠的誠實,并且提供充分的說明,這樣可以讓用戶保持耐心,并且做足準備。相比于隱藏了關鍵步驟,相對冗長但是內容充分的表單,更值得信任,并且不會讓人沮喪。不過請注意,表單應當盡量提供絕對必要的信息,充分并不意味著要多而全,“少即是多”的原則同樣在此適用。
在這個實例當中,用戶輕松地了解,他們需要通過“Identify”、“Address”和“Payment”三個步驟,就能完成這個流程。
4、引導:報錯信息要微妙地處理
無論表單中所承載的信息有哪些,都應該讓用戶感受到引導感。用戶所填寫的信息,是你或者你的產品所需要的,所以在設計表單中內容的時候,保持適當的“對話感”。當用戶填寫的信息出錯的時候,尤其如此,不要讓用戶覺得這個錯誤很可怕,而是通過引導,降低用戶的沮喪情緒,盡快修改,完成填寫。
在下面的案例當中,用戶填寫出錯并且以“Sorry”來開頭,這種委婉的表述方式來緩解用戶情緒,然后提供有用的建議,幫助用戶解決問題。
5、陪伴:始終為用戶提供幫助
當用戶在表單填寫過程中出錯,有用的幫助能夠讓用戶更加舒適,增加信任感。幫助可以是任何形式,無論是彈出框、faq頁面,還是即時通訊聊天框,都可以。
在下面的實例當中,我們采用了聊天對話框來為用戶提供幫助,這樣的設計讓用戶有一種“始終有人在旁邊提供幫助”的觀感,如果出錯的時候,主動為用戶提供幫助信息,則能夠進一步強化對用戶的信任感。
6、獎勵:完成任務之后祝賀用戶
當用戶完成任務之后,獲得祝賀,大腦中分泌多巴胺,從而獲得愉悅感和滿足感。這種現象是得到臨床驗證的。無論是真實的祝賀,還是完成任務之后的系統提醒,都會讓用戶產生這樣的反饋。游戲化設計當中,常常會采用這樣的機制,看似獲得更多成就,實質上是催發用戶體內產生多巴胺這種“化學獎勵”,產生快樂的感覺。
雖然很多時候,UI所提供的祝賀和獎勵僅僅只是一個簡單的“Thank You”,但是在用戶那邊則獲得了良好的感覺和真實的笑臉。
結語
表單可能是網站或者APP當中最簡單、最常見的部分,但是它在整個體驗流程和產品當中,都起著關鍵的作用。最后再提醒一句,讓表單保持簡短,和用戶保持對話,好設計也許會給你帶來意想不到的效果。
原文作者:Lollypop Design Studio
原文地址:uxplanet
譯者:@陳子木
譯文地址:優設網
本文由 @陳子木?授權發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自 Pexels,基于 CC0 協議
這是什么APP?麻煩告訴下 ??