提升表單設(shè)計(jì)效果的18個(gè)技巧

7 評論 9645 瀏覽 161 收藏 10 分鐘

編輯導(dǎo)語:表單是用戶和應(yīng)用程序之間主要的溝通橋梁,一個(gè)合理、優(yōu)秀的表單模塊不僅能幫助用戶順暢的完成業(yè)務(wù)訴求,更能讓用戶體驗(yàn)到成功感、滿足感,從而提升用戶對產(chǎn)品滿意度。作者分享了18個(gè)提升表單設(shè)計(jì)效果的技巧,我們一起來看看吧。

一、表單始終使用標(biāo)簽

人都喜歡接受確定性的信息,面對不確定的信息,尤其是在輸入不確定的字段,如果用戶忘記了字段的用途并且必須在其外部單擊以再次查看占位符,此時(shí)的體驗(yàn)將是異常糟糕的。

二、避免用戶閱讀路徑呈“Z”字型

“Z”字型的閱讀路徑,是指用戶在閱讀表單的時(shí)候呈現(xiàn)從左到右,再從上到下的規(guī)律,這樣閱讀模式的跳躍感較強(qiáng),導(dǎo)致用戶閱讀的效率降低,表單數(shù)量過多的時(shí)候可能進(jìn)一步導(dǎo)致用戶的反感。

當(dāng)表單分布垂直線上時(shí),用戶可以快速垂直瀏覽表單,從而更容易完成他們的任務(wù)。

三、表單標(biāo)簽選擇頂對齊

當(dāng)表單標(biāo)簽是左對齊 (右對齊),有點(diǎn)像是“Z”字型閱讀路徑的一個(gè)擴(kuò)展,左對齊 (右對齊) 的表單會(huì)自動(dòng)創(chuàng)建一個(gè)“Z”閱讀模式,導(dǎo)致表表單閱讀效率的下降。當(dāng)表單標(biāo)簽字段非常短,左側(cè)的標(biāo)簽字段對閱讀影響不大。

四、使用右對齊標(biāo)簽

表單標(biāo)簽左對齊、右對齊相比較而言,右對齊使得標(biāo)簽和輸入域之間的距離固定,有明確的視覺關(guān)聯(lián),可以讓用戶更輕松地瀏覽頁面,表單的視覺層次也更清晰。

五、親密性強(qiáng)的字段分組整合

較長、平鋪的表單會(huì)增加用戶的填寫壓力,降低用戶的填寫意愿。將親密性強(qiáng)的相關(guān)表單組合成子模塊 (子流程),不僅在視覺上降低長表單帶來的壓力,還會(huì)使表單更具吸引力。

六、尊重用戶的操作習(xí)慣

按一定的邏輯順序一個(gè)接著一個(gè)地填寫每個(gè)字段,然后提交表單,是一個(gè)用戶十分熟悉的操作習(xí)慣 (流程),把操作按鈕放置表單末尾,是符合用戶認(rèn)知和尊重用戶操作習(xí)慣的。

七、表單之間留有足夠的空間

標(biāo)簽應(yīng)該靠近各自的表單輸入域,尤其是選擇標(biāo)簽頂對齊的時(shí)候,利用空間將相鄰表單分割開來,適當(dāng)且合理的空間留白不僅會(huì)提高表單的閱讀效率,更會(huì)使表單更具有美感。

八、避免標(biāo)簽重復(fù)

一般用“*”標(biāo)記必填字段,有時(shí)候“*”是頁面中的標(biāo)簽還是用來描述標(biāo)簽的會(huì)造成一定的誤解,同時(shí)“*”的顏色有時(shí)候也會(huì)引起負(fù)面關(guān)聯(lián),例如:紅色表示錯(cuò)誤。

對于表單來說,省略不必要信息的字段信息會(huì)給表單起到視覺降噪的作用。

3個(gè)表單,其中有1個(gè)選填表單,2個(gè)必填表單,則可在選填表單標(biāo)簽處標(biāo)記選填;1個(gè)必填表單,2個(gè)選填表單,則在必選表單標(biāo)簽處標(biāo)記必填。

九、清晰的描述錯(cuò)誤信息

表單校驗(yàn)出現(xiàn)錯(cuò)誤時(shí),不僅要給用戶提示到哪個(gè)表單填寫錯(cuò)誤,還要給用戶提示到該表單填寫錯(cuò)誤的原因以及如何快速改正錯(cuò)誤。

十、謹(jǐn)慎使用下拉菜單

當(dāng)已知的選項(xiàng)較少 (≤3),建議使用單選按鈕,平鋪完全展現(xiàn)出來的選項(xiàng)會(huì)讓用戶心理更安全,用戶更能清晰的了解自己面對的選項(xiàng),而不是面對未知的選項(xiàng)。較少平鋪的單選按鈕,也會(huì)提升用戶的操作效率。

十一、充分利用占位符

占位符不僅起到引導(dǎo)提示用戶填寫表單的的用作,也可以讓表單字段格式更具有可預(yù)知性。示例型占位符,可以告訴用戶該字段的正確格式,減少用戶輸入錯(cuò)誤的幾率,通用型占位符,則不會(huì)為用戶提供有價(jià)值的格式信息。

十二、保證一個(gè)主操作按鈕

在一個(gè)表單模塊中,始終保持一個(gè)主操作按鈕,若存在多個(gè)按鈕的情況,則需要根據(jù)業(yè)務(wù)去作區(qū)分,嘗試一個(gè)主操作按鈕,其余幾個(gè)則是次級操作按鈕。

十三、更具操作性的按鈕文本

表單的提交按鈕,應(yīng)盡量避免使用“提交”、“下一步”、“繼續(xù)”之類的通用型文本。嘗試使用更具有操作性、更能凸顯接下來即將發(fā)生動(dòng)作的文本,例如:“創(chuàng)建賬戶”、“加入團(tuán)隊(duì)”、“創(chuàng)建新賬號”之類的文本。

十四、選擇正確的輸入類型

不要對所有填寫內(nèi)容都使用文本字段,字段的類型應(yīng)該適應(yīng)其內(nèi)容,針對有特殊類型的內(nèi)容對文本做特殊處理,使之符合用戶日常的使用習(xí)慣。例如:電話號碼(183 **** 0530)、銀行卡 (6222 **** **** 0000)。

十五、文本域顯示限制字符

表單字段有輸入限制的情況,要把限制條件顯現(xiàn)出來,給予用戶明確的提示,增加用戶感知,減少出錯(cuò)率。

十六、告知用戶已啟用大寫鎖定

在用戶沒有意識到大寫鎖定已經(jīng)開啟,尤其在輸入密碼的時(shí)候,錯(cuò)誤消息甚至沒有告訴用戶大寫鎖定已開啟,一直提示用戶的密碼錯(cuò)誤,這是在一次次的挑戰(zhàn)用戶的極限。

十七、確定字符較短的表單使用視覺約束

視覺約束有助于強(qiáng)化用戶所需的信息。例如,如果“項(xiàng)目金額”字段需要的字符不如項(xiàng)目編號那樣長,輸入域則不需要與“項(xiàng)目編號”字段一樣長,否則可能會(huì)導(dǎo)致用戶混淆,同時(shí)也會(huì)增加用戶的錄入壓力。

十八、使用自動(dòng)完成功能

人都是有惰性的,表單錄入過程中能用選擇的就不用輸入的,自動(dòng)填充能使表單錄入速度提高30%,對提高用戶的使用體驗(yàn)來說,自動(dòng)填充無疑是一個(gè)非常有益的選擇。

參考文獻(xiàn):

https://medium.muz.li/15-tips-for-better-ui-forms-744febd107f9

 

本文由@小梗果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 高級產(chǎn)品經(jīng)理飄過??

    來自中國 回復(fù)
  2. 這一篇有點(diǎn)不太好哈哈哈,誰會(huì)把按鈕加在頂部

    來自河南 回復(fù)
  3. 學(xué)習(xí)了,可惜也看晚了,界面已經(jīng)開發(fā),部分布局可能和行業(yè)有關(guān),不過多增加用戶學(xué)習(xí)成本,
    下次迭代更新幾個(gè),謝謝

    來自河北 回復(fù)
  4. 寫的足夠清晰簡單易懂了,有學(xué)習(xí)到。

    來自安徽 回復(fù)
  5. 收藏

    來自北京 回復(fù)
  6. 學(xué)習(xí)了,技巧非常適合工作中使用,棒!

    來自北京 回復(fù)
  7. 深入淺出

    回復(fù)