表單可用性測(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ā)人員輸入框的訪問順序

?
輸入框內(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)單方式提供最常見的答案
標(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ò)誤消息
對(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é)果
確認(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)可操作
組的顯示
?
注冊(cè)??參與?