作者：Momoh Silm
表格對(duì)于企業(yè)的采集個(gè)人信息至關(guān)重要。 收集數(shù)據(jù), 表單設(shè)計(jì)形式方向變得至關(guān)重要秩命。 因此, 創(chuàng)建方便友好用戶的填寫表單是提高表單完成率的主要因素。
剖析表單基本元素
表單在目的褒傅、內(nèi)容和大小上各不相同, 但是有一些基本的元素可以幫助你的用戶毫不費(fèi)力地填充表單弃锐。
?亞馬遜"創(chuàng)建賬戶"形式的設(shè)計(jì)元素剖析
第一.表單名稱或位置:?這些元素幫助用戶瀏覽表單, 幫助他們完成整個(gè)過程。 當(dāng)你將要收集的數(shù)據(jù)歸類到不只一個(gè)表單類別時(shí)尤其有用殿托。
第二. 標(biāo)簽:?標(biāo)簽告訴用戶在任何特定的輸入框中應(yīng)該從他們那里得到什么數(shù)據(jù)拿愧。
第三. 輸入框:?對(duì)標(biāo)簽的輸入內(nèi)容描述。
第四. 錯(cuò)誤信息提示:?給用戶反饋為什么他們的輸入信息是錯(cuò)誤的碌尔，錯(cuò)在什么位置。
第五.下一步點(diǎn)擊按鈕:?用戶在表單輸入結(jié)束后需要一個(gè)按鈕（完成/下一頁(yè)）券敌。
表單狀態(tài)
基本上, 在用戶交互過程中, 你的表單應(yīng)該經(jīng)歷三個(gè)階段;
默認(rèn)狀態(tài):?這是在用戶輸入之前表單的樣子唾戚。
焦點(diǎn)狀態(tài):?這個(gè)方法強(qiáng)調(diào)用戶與表單交互的輸入?yún)^(qū)域的精確性。 這有助于提高用戶注意力和減少反復(fù)掃描屏幕時(shí)間待诅。
反饋狀態(tài):?這是用戶接收反饋的地方(大多數(shù)時(shí)間錯(cuò)誤消息)叹坦。 有時(shí), 這種狀態(tài)可能發(fā)生在用戶移動(dòng)到下一個(gè)輸入域之后。 但如果數(shù)據(jù)無(wú)法立即驗(yàn)證, 于是當(dāng)用戶試圖通過點(diǎn)擊一個(gè)按鈕提交表單時(shí)就會(huì)進(jìn)行驗(yàn)證卑雁。
亞馬遜的默認(rèn), 焦點(diǎn)和反饋狀態(tài)
最佳做法
1. 保持簡(jiǎn)單
讓你的表格簡(jiǎn)潔明了募书。 只收集必要的數(shù)據(jù), 避免以驗(yàn)證的名義重復(fù)輸入字段绪囱。不要重復(fù)密碼字段, 讓用戶查看他們選擇創(chuàng)建的密碼。
在 Jumia 和 Amazon 上驗(yàn)證用戶密碼的不同選項(xiàng)
2. 使用及時(shí)驗(yàn)證反饋
當(dāng)用戶給出錯(cuò)誤輸入的反饋時(shí), 最好將反饋附加到它所處理的特定字段上莹捡。
?feedback?和 Amazon 采用了兩種不同的驗(yàn)證反饋技術(shù)
3. 相關(guān)聯(lián)的字段信息輸入
對(duì)于關(guān)聯(lián)字段進(jìn)行組合, 并對(duì)其進(jìn)行邏輯排序具有重要意義鬼吵。 這可以幫助用戶輕松地填寫所需的數(shù)據(jù), 而不需要太多的認(rèn)知負(fù)載和最小的注意力。
4. 標(biāo)簽位于上方和輸入框左對(duì)齊
總是把標(biāo)簽放在輸入框上方(如上面的亞馬遜表格所示)篮赢。 不要用標(biāo)簽替換輸入框文本齿椅。 沒有標(biāo)簽, 用戶會(huì)發(fā)現(xiàn)在提交表單之前很難交叉核對(duì)他們的輸入, 因?yàn)檫@會(huì)讓他們思考很多問題。
使用標(biāo)簽時(shí), 始終將它們排列在輸入字段之上启泣。 有一個(gè)全面的研究報(bào)告指出涣脚，這對(duì)于用戶來(lái)說 是最有效的方法,?
在其輸入框上方左邊放置一個(gè)標(biāo)簽（左對(duì)齊 右對(duì)齊）, 允許用戶用單眼運(yùn)動(dòng)捕捉這兩個(gè)元素?zé)狳c(diǎn)圖研究結(jié)果。
5. 將輸入框與輸入字段的長(zhǎng)度成正比匹配
簡(jiǎn)單來(lái)說, 一定要確保輸入域的長(zhǎng)度與預(yù)期輸入的類型成正比寥茫。輸入字段的輸入域應(yīng)該比郵箱的輸入域長(zhǎng)遣蚀。
輸入字段大小與預(yù)期輸入的長(zhǎng)度成正比
Payporte的輸入域與預(yù)期的輸入數(shù)據(jù)不成比例
6. 按鈕
所有表單的末尾都應(yīng)該有一個(gè)按鈕, 它是一個(gè)提交按鈕或一個(gè)下一個(gè)按鈕。 在必須有多個(gè)按鈕的任何場(chǎng)景中, 應(yīng)當(dāng)強(qiáng)調(diào)主要按鈕, 而次要按鈕應(yīng)該不那么突出纱耻。
?亞馬遜在更加強(qiáng)調(diào)主按鈕方面做得很好
當(dāng)使用網(wǎng)頁(yè)來(lái)收集數(shù)據(jù)(在浮層形式)時(shí), 另一個(gè)按鈕是一個(gè)關(guān)閉按鈕芭梯。 另一種方法是在右上角使用 x 圖標(biāo)作為替換按鈕, 如下圖所示。
?在模態(tài)中, Medium 的符號(hào)使用 x 圖標(biāo)來(lái)關(guān)閉模態(tài)而不是'關(guān)閉'按鈕
7. 搜索框
不要隱藏你的搜索表單, 特別是如果你的網(wǎng)站內(nèi)容太多, 搜索可能是下一個(gè)重要的選擇膝迎。
?亞馬遜的搜索框非常突出
此外, 在用戶執(zhí)行搜索之后, 在提交并顯示結(jié)果之后不要清除搜索框粥帚。 這使得用戶下一次可以很容易獲得歷史搜索記錄, 知道他 / 她最初搜索了什么。
在顯示結(jié)果后, Medium 在不清除搜索欄方面做得很好
第八. 清晰
向用戶清楚地傳達(dá)信息限次。 告訴用戶期望他們填寫什么, 并且盡可能清楚, 這樣就不會(huì)有任何模棱兩可的余地芒涡。 沒有人喜歡填寫表格, 更沒有人喜歡填兩次。
在盡可能清晰的標(biāo)簽方面, Cowrywise 做得很好 & 甚至連按鈕的文字都是很好的描述
感謝閱讀Ｂ袈费尽！
Peace ???
原文鏈接：https://blog.prototypr.io/creating-user-friendly-forms-46e3f7f4eef2
本文允許非商業(yè)轉(zhuǎn)載，請(qǐng)保留譯文鏈接羊始，注明來(lái)自“UI頭條”
