表單互動設計之必選項思考

發表於2011-11-07

每當頁面中出現洋洋灑灑的表單,使用者就會開始感到頭疼,有些使用者就會直接選擇放棄,而我想討論的是,如何面對表單時讓使用者直接注意他們需要填寫的必填項,減少不需要的資訊的干擾。

細節思考表單互動設計之必選項思考

必選項是以什麼形式出現在現如今的表單中的呢?

1、 表單資訊的表現類別

下面是一個關於web表單設計的調查報告,這個結果來源於100個令人矚目的網站。

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

30%的登錄檔單使用頂端對齊(Behance.net, Wufoo, Tickspot, Mixx, DZone)

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

2、 表單的應用範圍

1) 註冊

2) 登陸

3) 填寫資訊(支付,訂單填寫,個人資訊填寫等)

4) 釋出

3、 必選項顯示形式

1)以*展現形式

a)*在資訊標籤的左側

細節思考表單互動設計之必選項思考

b)*在資訊標籤和填寫資訊的右側

細節思考表單互動設計之必選項思考

c)*在資訊標籤和填寫資訊的當中位置

細節思考表單互動設計之必選項思考

d)*在資訊標籤右側

細節思考表單互動設計之必選項思考

2)非*必選標誌

a)非*icon表現形式

細節思考表單互動設計之必選項思考

b)無必選項標誌(都是必選項)

細節思考表單互動設計之必選項思考

c)標註非必選項

細節思考表單互動設計之必選項思考

d)暗提示

細節思考表單互動設計之必選項思考

4、 必選項的深入思考

1)*和非*思考

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

b)有人會疑問一個表單,如果都是必填項,還有必要用*去標誌出每個必填項嗎?在沒有必填項標誌的時候,大部分人會有兩種不同的理解,一類人會認為,這些均為必填項,而另一類人則會理解為此處均為非必填項,那麼在這種情況下,如果標記了必填項可以滿足不同人群的思考。

還有人,會疑問在一個表單中大部分項為必填項只有少部分為非必填項時,我們是否可以直接在非必填項旁標誌出非必填的標誌呢?當一個頁面大部分為必填 項時,而只有少量非必填項時,非必填項如果做的太弱化會導致整頁無法區分必填還是非必填;而如果非必填項做的太過突出的話又反過來突出了頁面中需要弱化的 資訊項,使用者反而會去焦點關注在他們可填可不填的項中,有點適得其反。

因此,我還是認為當頁面中的表單,無論是全部都是必填項還是大部分必填項,我們還是以“*”標出,這樣也能使各類使用者都不產生理解性的錯誤。

當然了,不同情況下的運用當然也有所不同,例如:使用者在登陸時的認知,通常使用者在登陸時輸入項如使用者名稱,密碼等資訊,而且此些項也基本是必填項,在這種認知的基礎上,即使不出現*也不會造成任何理解性問題,那麼作為精簡原則來說,通常可以去掉*。

c)文字框內必填項暗提示,也是一個比較清晰標誌必填項的方式,並且還很節省空間。

但是現在很多網站都在文字框中對文字框填寫方式做其他暗提示,這個時候必填項暗提示就相對會被限制使用的範圍了。作為必填項暗提示標誌,還有兩個致 命的缺陷就是,當我填寫完成時,我並不瞭解哪些是必填項哪些為非必填項,還有就是對於radiobox、checkbox、下拉框的必填來說也沒有很好的 解決方案。因此,在使用必填項暗提示時,在表單形式為文字框,並且文字框內無其他暗提示語句的時候也可以使用。

2) *思考

a)使用者對於表單的視覺走向

細節思考表單互動設計之必選項思考

細節思考表單互動設計之必選項思考

 

從這張熱點圖中可以看出,對於表單類別的視覺走向是以左邊標籤為主向右延展。大部分使用者集中在標籤位置,通常使用者填寫順序也是從上至下的,從左至右,較少使用者會選擇跳躍式的填寫模式。

b)*位置

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

這個時候作為:

標籤左對齊的時候,*直接出現在標籤前面,明顯比較優,但是由於標籤左對齊對於表單來說,標籤項和填寫項位置離開太遠,可能會讓使用者搞不清楚到底哪個標籤對應哪個文字框,因此此類標籤方式不太贊成出現。

細節思考表單互動設計之必選項思考

       那麼標籤右對齊的時候,*出現在標籤與文字框當中,個人認為相對前一種來說要舒服很多了。不僅使得標籤項和*標誌和文字框等都離得很近,而且*的位置還可以成一直線對齊。如果*出現在文字框或者其他項的後方,會使得使用者不得不跳躍視線,並且他們在填寫完成時才意識到哪些是必填哪些非必填。

細節思考表單互動設計之必選項思考

       標籤頂對齊,此類方式,經常出現在寬度有限制的時候,也是目前經常看到的表現方式。按照之前的理論來說此類方式為了視線流更好的展示,個人認為標籤前面帶*會比較好,這樣使得*、標籤、文字框位置最近,也使得*能成直線展示。

當然還有一類特例,就是表單一行有多個填寫項,這種方式*如果位置不當,很容易讓人誤解*的位置,如下圖:

細節思考表單互動設計之必選項思考

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

       雖然目前,我們認為標籤右對齊,*出現在標籤與文字框當中方式較優,但是也會出現特例,比如當出現radiobox的時候如果*出現在標籤和radio當中,那麼就會如下圖:


細節思考表單互動設計之必選項思考

總結:必選項是一個很小的展示方式,但其中還是存在很多很多的特殊問題,互動就是讓 我們思考頁面中每個細小的環節,這樣才能使使用者在整體頁面體驗中獲得最優最快捷的操作方式。當然具體情況還有很多很多,需要我們思考和考慮的地方也有很 多,如果大家有很多的想法可以聯絡我們,讓我們更好的充實我們每個blog文章。

相關文章