每當(dāng)頁(yè)面中出現(xiàn)洋洋灑灑的表單,用戶就會(huì)開(kāi)始感到頭疼,有些用戶就會(huì)直接選擇放棄,而我想討論的是,如何面對(duì)表單時(shí)讓用戶直接注意他們需要填寫的必填項(xiàng),減少不需要的信息的干擾。
必選項(xiàng)是以什么形式出現(xiàn)在現(xiàn)如今的表單中的呢?
1、 表單信息的表現(xiàn)類別 下面是一個(gè)關(guān)于web表單設(shè)計(jì)的調(diào)查報(bào)告,這個(gè)結(jié)果來(lái)源于100個(gè)令人矚目的網(wǎng)站。
41%的網(wǎng)站使用標(biāo)簽右對(duì)齊 (YouTube, Facebook, Metacafe)
30%的注冊(cè)表單使用頂端對(duì)齊(Behance.net, Wufoo, Tickspot, Mixx, DZone)
29%使用的是標(biāo)簽左對(duì)齊((Digg, Ning, Wykop.pl, 43things, StudiVZ)
2、 表單的應(yīng)用范圍 1) 注冊(cè)
2) 登陸
3) 填寫信息(支付,訂單填寫,個(gè)人信息填寫等)
4) 發(fā)布
3、 必選項(xiàng)顯示形式 1)以*展現(xiàn)形式
a)*在信息標(biāo)簽的左側(cè)
b)*在信息標(biāo)簽和填寫信息的右側(cè)
c)*在信息標(biāo)簽和填寫信息的當(dāng)中位置
d)*在信息標(biāo)簽右側(cè)
2)非*必選標(biāo)志
a)非*icon表現(xiàn)形式
b)無(wú)必選項(xiàng)標(biāo)志(都是必選項(xiàng))
c)標(biāo)注非必選項(xiàng)
d)暗提示
4、 必選項(xiàng)的深入思考 1)*和非*思考
a)*作為一個(gè)用戶習(xí)慣已經(jīng)存在了很多年,現(xiàn)在用戶只需要看到文本框前面的*就基本知曉其為必選項(xiàng),有些網(wǎng)站已經(jīng)將“*為必填項(xiàng)”之類說(shuō)明文字也直接隱藏了。那么對(duì)于這個(gè)用戶基本不需要太多思考就知曉的圖標(biāo),對(duì)于需要簡(jiǎn)化用戶思考的表單來(lái)說(shuō)確實(shí)要優(yōu)于一些其他的非“*”icon的出現(xiàn)了。
b)有人會(huì)疑問(wèn)一個(gè)表單,如果都是必填項(xiàng),還有必要用*去標(biāo)志出每個(gè)必填項(xiàng)嗎?在沒(méi)有必填項(xiàng)標(biāo)志的時(shí)候,大部分人會(huì)有兩種不同的理解,一類人會(huì)認(rèn)為,這些均為必填項(xiàng),而另一類人則會(huì)理解為此處均為非必填項(xiàng),那么在這種情況下,如果標(biāo)記了必填項(xiàng)可以滿足不同人群的思考。
還有人,會(huì)疑問(wèn)在一個(gè)表單中大部分項(xiàng)為必填項(xiàng)只有少部分為非必填項(xiàng)時(shí),我們是否可以直接在非必填項(xiàng)旁標(biāo)志出非必填的標(biāo)志呢?當(dāng)一個(gè)頁(yè)面大部分為必填項(xiàng)時(shí),而只有少量非必填項(xiàng)時(shí),非必填項(xiàng)如果做的太弱化會(huì)導(dǎo)致整頁(yè)無(wú)法區(qū)分必填還是非必填;而如果非必填項(xiàng)做的太過(guò)突出的話又反過(guò)來(lái)突出了頁(yè)面中需要弱化的信息項(xiàng),用戶反而會(huì)去焦點(diǎn)關(guān)注在他們可填可不填的項(xiàng)中,有點(diǎn)適得其反。
因此,我還是認(rèn)為當(dāng)頁(yè)面中的表單,無(wú)論是全部都是必填項(xiàng)還是大部分必填項(xiàng),我們還是以“*”標(biāo)出,這樣也能使各類用戶都不產(chǎn)生理解性的錯(cuò)誤。
當(dāng)然了,不同情況下的運(yùn)用當(dāng)然也有所不同,例如:用戶在登陸時(shí)的認(rèn)知,通常用戶在登陸時(shí)輸入項(xiàng)如用戶名,密碼等信息,而且此些項(xiàng)也基本是必填項(xiàng),在這種認(rèn)知的基礎(chǔ)上,即使不出現(xiàn)*也不會(huì)造成任何理解性問(wèn)題,那么作為精簡(jiǎn)原則來(lái)說(shuō),通??梢匀サ?。
c)文本框內(nèi)必填項(xiàng)暗提示,也是一個(gè)比較清晰標(biāo)志必填項(xiàng)的方式,并且還很節(jié)省空間。
但是現(xiàn)在很多網(wǎng)站都在文本框中對(duì)文本框填寫方式做其他暗提示,這個(gè)時(shí)候必填項(xiàng)暗提示就相對(duì)會(huì)被限制使用的范圍了。作為必填項(xiàng)暗提示標(biāo)志,還有兩個(gè)致命的缺陷就是,當(dāng)我填寫完成時(shí),我并不了解哪些是必填項(xiàng)哪些為非必填項(xiàng),還有就是對(duì)于radiobox、checkbox、下拉框的必填來(lái)說(shuō)也沒(méi)有很好的解決方案。因此,在使用必填項(xiàng)暗提示時(shí),在表單形式為文本框,并且文本框內(nèi)無(wú)其他暗提示語(yǔ)句的時(shí)候也可以使用。
2) *思考
a)用戶對(duì)于表單的視覺(jué)走向
從這張熱點(diǎn)圖中可以看出,對(duì)于表單類別的視覺(jué)走向是以左邊標(biāo)簽為主向右延展。大部分用戶集中在標(biāo)簽位置,通常用戶填寫順序也是從上至下的,從左至右,較少用戶會(huì)選擇跳躍式的填寫模式。
b)*位置
從上述用戶視線流可以看出,*的位置應(yīng)該在標(biāo)簽附近,并且能夠整齊排列(這個(gè)可能還需研究)會(huì)更一目了然的展示出必填項(xiàng)。
這個(gè)時(shí)候作為:
標(biāo)簽左對(duì)齊的時(shí)候,*直接出現(xiàn)在標(biāo)簽前面,明顯比較優(yōu),但是由于標(biāo)簽左對(duì)齊對(duì)于表單來(lái)說(shuō),標(biāo)簽項(xiàng)和填寫項(xiàng)位置離開(kāi)太遠(yuǎn),可能會(huì)讓用戶搞不清楚到底哪個(gè)標(biāo)簽對(duì)應(yīng)哪個(gè)文本框,因此此類標(biāo)簽方式不太贊成出現(xiàn)。
那么標(biāo)簽右對(duì)齊的時(shí)候,*出現(xiàn)在標(biāo)簽與文本框當(dāng)中,個(gè)人認(rèn)為相對(duì)前一種來(lái)說(shuō)要舒服很多了。不僅使得標(biāo)簽項(xiàng)和*標(biāo)志和文本框等都離得很近,而且*的位置還可以成一直線對(duì)齊。如果*出現(xiàn)在文本框或者其他項(xiàng)的后方,會(huì)使得用戶不得不跳躍視線,并且他們?cè)谔顚懲瓿蓵r(shí)才意識(shí)到哪些是必填哪些非必填。
標(biāo)簽頂對(duì)齊,此類方式,經(jīng)常出現(xiàn)在寬度有限制的時(shí)候,也是目前經(jīng)??吹降谋憩F(xiàn)方式。按照之前的理論來(lái)說(shuō)此類方式為了視線流更好的展示,個(gè)人認(rèn)為標(biāo)簽前面帶*會(huì)比較好,這樣使得*、標(biāo)簽、文本框位置最近,也使得*能成直線展示。
當(dāng)然還有一類特例,就是表單一行有多個(gè)填寫項(xiàng),這種方式*如果位置不當(dāng),很容易讓人誤解*的位置,如下圖:
此圖中,姓名前的*很容易讓人誤解為是下拉框出的*。因此這時(shí)候*位置如果在標(biāo)簽和文本框當(dāng)中可以很好的規(guī)避此類誤解。
雖然目前,我們認(rèn)為標(biāo)簽右對(duì)齊,*出現(xiàn)在標(biāo)簽與文本框當(dāng)中方式較優(yōu),但是也會(huì)出現(xiàn)特例,比如當(dāng)出現(xiàn)radiobox的時(shí)候如果*出現(xiàn)在標(biāo)簽和radio當(dāng)中,那么就會(huì)如下圖:
我們專注高端建站,小程序開(kāi)發(fā)、軟件系統(tǒng)定制開(kāi)發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開(kāi)發(fā)、各類API接口對(duì)接開(kāi)發(fā)等。十余年開(kāi)發(fā)經(jīng)驗(yàn),每一個(gè)項(xiàng)目承諾做到滿意為止,多一次對(duì)比,一定讓您多一份收獲!