編輯導(dǎo)讀：我們?cè)谔顚懕韱蔚臅r(shí)候，在輸入框的旁邊或者下面，會(huì)用一句話或者例子來(lái)解釋需要輸入什么數(shù)據(jù)，這就是表單的幫助信息。表單的幫助信息應(yīng)該如何設(shè)置并且顯示呢？本文作者將對(duì)此展開(kāi)分析，希望對(duì)你有幫助。

“一切都是為了幫助用戶完成表單輸入?！?/p>

01 表單的幫助信息是什么?

在輸入框旁邊或者下面，用一句話或者例子來(lái)解釋需要輸入什么數(shù)據(jù)。

02 為什么要有幫助信息?

標(biāo)簽信息與輸入框的形式雖然對(duì)表單填寫提供了線索，

但這些還不夠。

為了讓用戶更好的完成輸入，設(shè)計(jì)師會(huì)在標(biāo)簽或輸入框旁邊放置幫助信息，告訴用戶如何回答問(wèn)題。

03 什么時(shí)候設(shè)置?

人們往往不會(huì)去閱讀屏幕上的提示。

但有些情況下，用戶期待能提供一些信息，幫助自己正確的回答問(wèn)題。

對(duì)要求填入數(shù)據(jù)不熟悉的表單：

△提示用戶卡安全碼是背面的3位數(shù)字，它這里是以圖片方式呈現(xiàn)的，比較有趣；但建議配上文字更清楚

質(zhì)疑為何要填入該數(shù)據(jù)？

△Amazon地址新增頁(yè)面，告訴用戶，收集手機(jī)號(hào)碼只是為了方便配送

擔(dān)心數(shù)據(jù)安全或隱私：

△Dribbble個(gè)人信息頁(yè)面，打消用戶顧慮，告訴用戶社交賬號(hào)信息不會(huì)在個(gè)人資料中展示

系統(tǒng)推薦的填寫方式：

△Dribbble修改密碼頁(yè)面，提示用戶密碼至少需要6位

可填或必填，與表單大部分要求相反時(shí)：

△Youtube上傳視頻頁(yè)面，標(biāo)題為必填

總的來(lái)說(shuō)就是：

如果大部分是必填項(xiàng)，你就只標(biāo)明選填項(xiàng)，反之亦然。

04 怎么顯示?

始終顯示：

△Jira，輸入框下方始終顯示幫助信息

?Tips：

• 字體比標(biāo)簽字體小兩號(hào)大小比較合適。
• 保持信息簡(jiǎn)短扼要，如果信息超過(guò)你的輸入框長(zhǎng)度，大多用戶會(huì)忽略。

輸入焦點(diǎn)時(shí)顯示：

點(diǎn)擊輸入框時(shí)，幫助信息出現(xiàn)在輸入框附近；缺點(diǎn)是，需要人觸發(fā)才能知道是否有幫助信息；

因此，會(huì)讓需要幫助的人望而卻步不愿嘗試去點(diǎn)擊。

所以可以在輸入框中顯示幫助信息。

但這里要注意只有一種情況可以使用該模式，那就是舉例說(shuō)明時(shí)。

△Canva注冊(cè)表單，輸入框內(nèi)信息為舉例說(shuō)明

解釋問(wèn)題是什么，為什么問(wèn)這些問(wèn)題，是否必須回答的幫助信息不應(yīng)該在輸入框里出現(xiàn)。

用戶激活時(shí)顯示：

通過(guò)一致的圖標(biāo)、按鈕、圖片或者文本鏈接，讓用戶知道這里提供的幫助。

圖標(biāo)：

△Jira創(chuàng)建故事頁(yè)面的幫助圖標(biāo)

?這里Jira設(shè)計(jì)得不是很合理（不要學(xué)它），?幫助符號(hào)應(yīng)當(dāng)靠近標(biāo)簽。

這樣有助于人們?yōu)g覽信息。

文本鏈接：

△Amazon登錄頁(yè)的文本鏈接

優(yōu)點(diǎn)避免頁(yè)面跳動(dòng)

懸浮觸發(fā)顯示幫助文字

△Youtube，鼠標(biāo)停留該區(qū)域出現(xiàn)提示信息，解釋說(shuō)明該字段

這種方法的缺點(diǎn)是，只有當(dāng)指針固定在觸發(fā)熱點(diǎn)時(shí)，幫助文字才會(huì)顯示。

推薦擴(kuò)大懸浮激活區(qū)域，人們會(huì)比較容易觸發(fā)幫助文字顯示。

?Tips：

如果人們經(jīng)過(guò)懸浮區(qū)域，就會(huì)出現(xiàn)額外信息，可能需要延長(zhǎng)約500毫秒來(lái)看看人們是否真的需要幫助，而不是因?yàn)槭髽?biāo)偶然通過(guò)觸發(fā)區(qū)。

05 CONCLUSION!

• 不要依賴幫助信息彌補(bǔ)表單缺點(diǎn)
• 幫助信息最適合解釋人們不熟悉的數(shù)據(jù)
• 簡(jiǎn)潔的文字毗鄰問(wèn)題是最清晰的方式
• 如果人們知道表單問(wèn)題答案，但不確定如何回答或者為什么回答，可以考慮使用輸入焦點(diǎn)時(shí)顯示
• 如果表單問(wèn)題人們不熟悉或者復(fù)雜，而且可能同樣的人會(huì)多次使用，可以考慮采用用戶激活時(shí)顯示
• 圖標(biāo)里問(wèn)號(hào)表示幫助認(rèn)可度最高
• 圖標(biāo)、鏈接或者按鈕應(yīng)放在標(biāo)簽旁

作者：Neko，支付產(chǎn)品經(jīng)理/UI/UX；公眾號(hào)：吱了一聲

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

題圖來(lái)自pexels，基于CC0協(xié)議