網站交互設計的小細節：表單必填項設計思考

　　相信每個用戶面對頁面中洋洋灑灑的表單都會倍感煩躁，有的用戶甚至直接選擇放棄，那麼該如何讓用戶面對表單時避開信息干擾，直接注意到他們的必填信息呢?

　　如上圖，表單信息的表現類別分為：

　　41%的網站使用標簽右對齊 (YouTube， Facebook， Metacafe)

　　30%的注冊表單使用頂端對齊(Behance.net， Wufoo， Tickspot， Mixx， DZone)

　　29%使用的是標簽左對齊((Digg， Ning， Wykop.pl， 43things， StudiVZ)

　　表單中的必填項主要有以下幾種表現形式：

　　首先就是我們熟知的以*展現形式

　　*在信息標簽的左側

　　*在信息標簽和填寫信息的當中位置

　　*在信息標簽和填寫信息的右側

　　*在信息標簽右側

　　那麼關於*的位置應該如何設定才能達到理想效果呢?

　　從下面圖片可以看出用戶對於表單的視覺走向：

　　上圖表明對於表單類別的視覺走向是以左邊標簽為主向右延展。大部分用戶集中在標簽位置，通常用戶填寫順序也是從上至下的，從左至右，較少用戶會選擇跳躍式的填寫模式。

　　從上圖用戶視線流可以看出，*的位置應該在標簽附近，並且能夠整齊排列(這個可能還需研究)會更一目了然的展示出必填項。

　　因此，標簽左對齊的時候，*直接出現在標簽前面，明顯比較優，但是由於標簽左對齊對於表單來說，標簽項和填寫項位置離開太遠，可能會讓用戶搞不清楚到底哪個標簽對應哪個文本框，因此此類標簽方式不太贊成出現。那麼標簽右對齊的時候，*出現在標簽與文本框當中，個人認為相對前一種來說要舒服很多了。不僅使得標簽項和*標志和文本框等都離得很近，而且*的位置還可以成一直線對齊。如果*出現在文本框或者其他項的後方，會使得用戶不得不跳躍視線，並且他們在填寫完成時才意識到哪些是必填哪些非必填。標簽頂對齊，此類方式，經常出現在寬度有限制的時候，也是目前經常看到的表現方式。按照之前的理論來說此類方式為了視線流更好的展示，個人認為標簽前面帶*會比較好，這樣使得*、標簽、文本框位置最近，也使得*能成直線展示。

　　還有一類需要特別指出的，就是表單一行有多個填寫項，這種方式*如果位置不當，很容易讓人誤解*的位置，如下圖：

　　姓名前的*很容易讓人誤解為是下拉框出的*。因此這時候*位置如果在標簽和文本框當中可以很好的規避此類誤解。

　　其次，非*必選標志主要有：

　　a)非*icon表現形式

　　b)無必填項標志(都是必填項)

　　c)標注非必填項

　　d)暗提示

　　*作為一個用戶習慣已經存在了很多年，現在用戶只需要看到文本框前面的*就基本知曉其為必填項，有些網站已經將“*為必填項”之類說明文字也直接隱藏了。那麼對於這個用戶基本不需要太多思考就知曉的圖標，對於需要簡化用戶思考的表單來說確實要優於一些其他的非“*”icon的出現了。

　　在決定如何標注必填項非必填項上，分享以下幾個要點：

　　1、 在沒有必填項標志的時候，大部分人會有兩種不同的理解，一類人會認為，這些均為必填項，而另一類人則會理解為此處均為非必填項，那麼在這種情況下，如果標記了必填項可以滿足不同人群的思考。

　　2、 當一個頁面大部分為必填項時，而只有少量非必填項時，非必填項如果做的太弱化會導致整頁無法區分必填還是非必填;而如果非必填項做的太過突出的話又反過來突出了頁面中需要弱化的信息項，用戶反而會去焦點關注在他們可填可不填的項中，有點適得其反。因此筆者認為頁面中的表單，無論是全部都是必填項還是大部分必填項，還是以“*”標出，這樣也能使各類用戶都不產生理解性的錯誤。

　　3、 文本框內暗提示，也是一個比較清晰標志必填項的方式，並且還很節省空間。

　　必填項看似是一個微不足道的細節，其實存在很多特殊問題。交互設計就是讓我們思考頁面中每個細小的環節，這樣才能使用戶在整體頁面體驗中獲得最優最快捷的操作方式。

　　部分內容節選自《細節思考表單交互設計之必選項思考》

　　作者：ypp

　　文章來源：365ucd.com