摘自《web表單設計》
0惯悠,少即是多的大原則:去掉不必要的問題,甚至可要可不要的問題竣况。
1克婶、大家都知道用戶在頁面上的視線軌跡是近似Z字形眼動,那么將表單放到用戶可視的第一位。
2情萤、如果有多個并列的問題鸭蛙,一般使用輸入框高度的50%-70%作為問題之間的間隔高度。
3筋岛、問題之間都是有聯(lián)系的娶视,可以進行分塊,有邏輯的組織各個問題泉蝌。
4歇万、表單應該少使用復雜的交互和視覺樣式揩晴,以免增加用戶負擔勋陪。
5、但是各組問題之間需要區(qū)隔硫兰,使用很簡單的方法(比如虛線诅愚、淡背景色)來區(qū)分各組。
6劫映、除了表單自身违孝,頁面其他位置盡可能不要讓用戶注意到,也即是說泳赋,頁面其他地方的信息用戶也不應該注意到雌桑,那么最好不放內容。
7祖今、整體流程欄上不要加表示步驟的數(shù)字校坑,因為在填寫表單的過程中,某個步驟可能會被增加(登錄千诬、選擇支付方式等)
8耍目、只在必要的地方出現(xiàn)表單。表單上每個問題都要多問自己幾次:是不是一定得在這兒讓用戶填寫徐绑?
9邪驮、不要僅僅要顏色來傳遞功能(如出錯時候的提示),各個用戶對顏色的理解是會有偏差的傲茄。姐姐方法是應同時使用文字毅访。
10、如果要使用Tab鍵作為表單內容間的跳轉盘榨,要考慮到對于兩欄表單的從第一欄底部跳到第二欄頂部時的顯示問題俺抽。
11、一定要有表單名稱较曼,并且符合人們的期望磷斧,并簡述表單的目的
12、頂部對齊/左對齊/右對齊,各有優(yōu)劣弛饭。頂部冕末,符合眼動效率。右對齊侣颂,標簽和輸入框距離近档桃。左對齊,方便用戶快速掌握問卷內容憔晒。根據(jù)場景和表單目的來選擇藻肄。
13、如果屏幕空間珍貴拒担,標簽內容放到輸入框中提示嘹屯。但這并不適用于問題很多或答案很長的情況,因為寫完無法check回答的內容是不是符合問題从撼。
14州弟、輸入框的長度要和用戶對答案的預期長度基本符合。
15低零、如果要對“必填項”還是“選填項”進行標注婆翔,那只有在這兩種問題數(shù)量差異懸殊時標注有意義。同時要標注問題少的那個掏婶。
16啃奴、單獨出現(xiàn)“ * ”是沒有意義的,因為沒有圖例說明這是必填還是選填雄妥。直接用文字最蕾。
17、表單完成時有主動作和次動作之分茎芭,一般來說“提交”為主動作揖膜。主動作標示要顯眼。如果可能梅桩,去掉次動作的按鈕壹粟。
18、主動作按鈕和主輸入框對齊宿百。
19趁仙、提交時應有動作提示表單已在提交(特別是網(wǎng)絡不好的時候),避免重復提交垦页。
20雀费、幫助文字在需要時才出現(xiàn),不遮擋頁面其他文字痊焊,與當前輸入框融為一體盏袄》蘧·
21、幫助文字在當前輸入時不能消失辕羽,否則就失去了幫助文字的意義逛尚。
22、如果有多輸入框都需要相同的幫助文字刁愿,該幫助文字保持顯示绰寞。
23、如果輸入有誤铣口,先告知“出錯”滤钱。在出錯的地方用不同的顏色/字號/圖形顯示錯誤
24、多采用即時驗證脑题,比如支付寶的驗證碼件缸。最適合錯誤率高,或有特殊格式要求的表單項旭蠕,但要在輸入完成后驗證停团,不要在輸入過程中驗證旷坦。
25掏熬、減少問題是必要的,但是不能增加其他問題的復雜程度秒梅。
26旗芬、盡可能在所有地方提供默認答案,可以根據(jù)用戶信息或是普遍用戶行為推斷捆蜀,要符合大多數(shù)用戶的預期疮丛。