WEB表單設(shè)計(jì)簡(jiǎn)單整理

表單的設(shè)計(jì)

表單可用性測(cè)試獲取信息:錯(cuò)誤或問題的數(shù)量和位置

??????????????????????? 錯(cuò)誤或問題的嚴(yán)重程度

??????????????????????? 完成率

??????????????????????? 完成整個(gè)表單或部分表單的時(shí)間

??????????????????????? 滿意度評(píng)分

??????????????????????? 任務(wù)主觀評(píng)價(jià)


優(yōu)秀表單依賴于商業(yè)目標(biāo)、用戶需求以及表單情境,還取決于可用性測(cè)試、實(shí)時(shí)網(wǎng)站指標(biāo)或者其他數(shù)據(jù)反映出來的問題或機(jī)會(huì)。


設(shè)計(jì)原則:盡量減少痛苦(填寫過程簡(jiǎn)潔、容易)

????????? 說明填寫完成路徑

????????? 考慮情境

????????? 確保一致溝通

表單的組織

選取問題(篩選問題)———構(gòu)建對(duì)話(標(biāo)簽:負(fù)責(zé)提出問題的表單要素;輸入框:負(fù)責(zé)收集人們回答的答案;當(dāng)標(biāo)簽含糊不清時(shí)可使用清楚明確的對(duì)話語(yǔ)言)———內(nèi)容的組織----———?dú)w納區(qū)別(內(nèi)容組之間的差別不需要大量視覺差異,使用最少的視覺信息有助于保持焦點(diǎn)在表單內(nèi)容


完成之路

表單名稱 與要求人們采取的行動(dòng)保持一致——起始頁(yè) 說明填完表單的路徑,需要花費(fèi)大量時(shí)間填寫的表單可考慮應(yīng)用——清晰的瀏覽線 提供貫穿表單的單一路徑,使人們可以迅速對(duì)問題作出答復(fù)并完成任務(wù);一般可采用輸入框高度約50%~75%作為問題之間的間隔——注意力分散最少,去除與表單填寫沒有直接關(guān)系的界面元素——進(jìn)程指示問題分散在多個(gè)網(wǎng)頁(yè)可用,表單頁(yè)數(shù)(范圍),表明所處網(wǎng)頁(yè)(位置),保存并返回進(jìn)程(狀態(tài))【進(jìn)程指示并不能準(zhǔn)確反映表單所要求的頁(yè)數(shù)】1.避免使用進(jìn)程指示2.市容沒有明確設(shè)置期望值的進(jìn)程顯示——Tab鍵跳轉(zhuǎn)易失去方向,所以避免輸入框之間存在的任何跳躍,應(yīng)告訴開發(fā)人員輸入框的訪問順序




表單元素

標(biāo)簽


?

輸入框內(nèi)標(biāo)簽 ???缺點(diǎn):光標(biāo)放入輸入框,標(biāo)簽有時(shí)會(huì)消失造成填寫內(nèi)容的遺忘,有時(shí)留在輸入框成為答案的一部分

???????????????屏幕空間有限可用


輸入框

輸入框的類型?

具體參考《用戶界面模式》

選擇特定交互行為的輸入框是優(yōu)秀表單挑戰(zhàn)之一

通常需要平衡有效點(diǎn)擊率和出錯(cuò)率、學(xué)習(xí)能力和效率、普遍情況和個(gè)別情況,及彈性和明確性。平衡最終取決于設(shè)計(jì)團(tuán)隊(duì)的判斷,對(duì)特定受眾和使用模型的優(yōu)化。


輸入框的長(zhǎng)度

有效暗示


必填項(xiàng)

??? ?表單包含很多輸入框,但只有一小部分是必填,標(biāo)明必填項(xiàng)十分有用

???????????? 若多數(shù)問題必填,少數(shù)問題可選,標(biāo)明可選項(xiàng)就十分有用。

標(biāo)明必填或可選,文字是最清晰的辦法,但“*”代表必填項(xiàng)相對(duì)容易理解,使用時(shí)需用圖例解釋其含義

將必填項(xiàng)或可選項(xiàng)標(biāo)識(shí)與輸入標(biāo)簽相關(guān)聯(lián)


彈性輸入框

優(yōu)點(diǎn):可以接受多種有效答案形式

缺點(diǎn):無法讓人們以簡(jiǎn)單方式提供最常見的答案


動(dòng)作

標(biāo)簽——列出表單要求人們回答的問題;

輸入框——填寫答案

動(dòng)作——完成表單的單一職責(zé)


主動(dòng)作和次動(dòng)作

主動(dòng)作——完成表單上最重要行為

次動(dòng)作——例如取消 重置?返回??保存 預(yù)覽 導(dǎo)出等,與填完表單的主要目標(biāo)相悖


動(dòng)作順序

主動(dòng)作與上方輸入框和標(biāo)簽對(duì)齊可提供明確路徑完成表單且減少填完表單所花的時(shí)間


進(jìn)程中的動(dòng)作

處理表單時(shí)應(yīng)明確表達(dá),避免重復(fù)提交。

不要依賴幫助文字提醒人們勿進(jìn)行兩次點(diǎn)擊主動(dòng)作,應(yīng)當(dāng)通過禁用主動(dòng)作按鈕來阻止用戶進(jìn)行



幫助文字

“告訴”用戶應(yīng)該如何回答問題


可使用簡(jiǎn)潔幫助文字的情況:

用戶不熟悉表單要求填入的數(shù)據(jù):什么是PAC代碼?

用戶質(zhì)疑為何要填入特定數(shù)據(jù):為什么要知道我的出生日期

用戶可能會(huì)關(guān)心數(shù)據(jù)安全或者隱私:填寫信用卡號(hào)碼安全嗎

系統(tǒng)推薦數(shù)據(jù)填寫方式:請(qǐng)用逗號(hào)分開標(biāo)簽

說明可填項(xiàng)


自動(dòng)即時(shí)幫助

適用于人們能回答但不清楚如何回答的問題

在幫助信息最合適的時(shí)間和位置顯示幫助信息。例如點(diǎn)擊或用Tab激活輸入框,相關(guān)幫助文字就出現(xiàn)在輸入框的旁邊或者下方。


輸入框內(nèi)幫助文字

只能用于提供回答問題的方式


用戶激活的即時(shí)幫助

適用于表單所含問題復(fù)雜或者表單會(huì)被相同的人重復(fù)使用

在人們需要時(shí)立即提供幫助,這種方式通常采用一致的圖標(biāo)、按鈕、圖片或者文本鏈接,便于人們知道有幫助可供使用。

采用懸浮觸發(fā)來顯示幫助文字:不會(huì)造成內(nèi)容下移,頁(yè)面跳動(dòng),但只有當(dāng)指針固定在觸發(fā)熱點(diǎn)時(shí),幫助文字才會(huì)顯示。


用戶激活的區(qū)域幫助

適用于多次使用的表格,尤其是復(fù)雜問題表單

幫助面板打開后,幫助內(nèi)容會(huì)根據(jù)人們?cè)谳斎肟蛑g移動(dòng)的情況自動(dòng)更新

用戶激活的幫助文字顯示在表單中的一致位置,而不顯示在相關(guān)輸入框的毗鄰區(qū)域。

可以利用更大顯示面積,提供廣泛的幫助文字和內(nèi)容


安全交易

處理敏感信息時(shí),需要額外幫助文字向人們保證信息安全


錯(cuò)誤與成功

錯(cuò)誤消息

對(duì)比色?醒目的視覺要素?突出位置

[if !supportLists]1.?????[endif]突出消息,表明發(fā)生錯(cuò)誤

[if !supportLists]2.?????[endif]雙重視覺強(qiáng)調(diào)產(chǎn)生錯(cuò)誤的輸入框

[if !supportLists]3.?????[endif]同時(shí)在兩處給出清晰的解釋和操作,幫助人們迅速解決錯(cuò)誤

成功

不能阻礙人們的進(jìn)程,而是鼓勵(lì)人們采取更多行動(dòng)。

還包括與剛完成任務(wù)關(guān)聯(lián)的有用后續(xù)操作


采用動(dòng)態(tài)成功消息突出表單提交成功的結(jié)果


表單的交互

即時(shí)驗(yàn)證

確認(rèn)建議有效答案,并幫助人們?cè)?b>限制范圍內(nèi)輸入

適用于錯(cuò)誤率高或有特定格式要求的問題,適用于有大量可供選擇有效答案的情況

即時(shí)質(zhì)量指示條(例如密碼強(qiáng)度條)能引導(dǎo)人們更好回答復(fù)雜問題

在人們輸入答案完成后進(jìn)行即時(shí)驗(yàn)證或轉(zhuǎn)換特定格式

輸入限制應(yīng)采用實(shí)時(shí)、動(dòng)態(tài)更新的方法傳遞


多余輸入

去除問題

智能默認(rèn)

個(gè)性化默認(rèn)保持客戶之前的選擇

?

額外輸入

滿足有需要的用戶,同時(shí)不妨礙不需要的用戶

即時(shí)增加

?

疊層

?

循序漸進(jìn)

?

基于選擇的輸入

彈性輸入——允許人們按照希望的方式回答問題

額外輸入——允許人們補(bǔ)充回答想回答的問題

基于選擇的輸入——根據(jù)對(duì)初始問題的回答要求人們繼續(xù)回答

頁(yè)面級(jí)選項(xiàng)

適用于每個(gè)初始選項(xiàng)的額外輸入選項(xiàng)數(shù)量很多

第一步/第一頁(yè)——向人們顯示初始選項(xiàng),選擇其中一個(gè),就會(huì)出現(xiàn)相關(guān)的選擇性輸入,取代初始選項(xiàng)。


水平選項(xiàng)卡

將水平選項(xiàng)卡放在面板上方,不僅顯示了一組初始選項(xiàng),而且還發(fā)揮了當(dāng)前選擇的強(qiáng)大指示作用。

[if !vml]

[endif]

垂直選項(xiàng)卡

?

下拉列表

適用于初始選項(xiàng)列表較長(zhǎng)


單選按鈕下方顯示??單選按鈕內(nèi)顯示

適用于每個(gè)初始選項(xiàng)只有幾個(gè)額外的輸入選項(xiàng)


顯示非活動(dòng)選項(xiàng)

保持所有額外輸入可見,但一次只有一組選項(xiàng)可操作

組的顯示

?

循序漸進(jìn)

注冊(cè)??參與?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這個(gè)序可能會(huì)有些長(zhǎng) 先作個(gè)自我介紹,我是一名交互設(shè)計(jì)師,90后。我并不怎么喜歡編輯文章或?qū)扅c(diǎn)什么,就是因?yàn)閼校?..
    IxDKN閱讀 11,279評(píng)論 16 160
  • 一. 表單設(shè)計(jì)的影響與原則 1.1 表單的產(chǎn)生 由內(nèi)而外,網(wǎng)站根據(jù)自身信息存儲(chǔ)格式要求,從數(shù)據(jù)庫(kù)映射成表單。 由外...
    曉夢(mèng)蟬君閱讀 12,369評(píng)論 1 30
  • ??JavaScript 最初的一個(gè)應(yīng)用,就是分擔(dān)服務(wù)器處理表單的責(zé)任,打破處處依賴服務(wù)器的局面。 ??盡管目前的...
    霜天曉閱讀 763評(píng)論 0 3
  • 本書一共14章,講了三部分內(nèi)容:表單結(jié)構(gòu)、表單元素、表單交互。表單是橫在用戶和企業(yè)之間的一道障礙, 沒有任何人喜歡...
    2c5994723157閱讀 3,329評(píng)論 0 16
  • 一、表單結(jié)構(gòu) 1、表單的設(shè)計(jì) -設(shè)計(jì)原則 盡量減少痛苦 說明填寫完成途徑 考慮情境 確保一致溝通 2、表單...
    ba帝兒閱讀 680評(píng)論 0 0

友情鏈接更多精彩內(nèi)容