當(dāng)前位置:首頁 >  站長 >  建站經(jīng)驗(yàn) >  正文

對(duì)于網(wǎng)站W(wǎng)eb端表單的交互式設(shè)計(jì)思考

 2022-03-10 11:10  來源: 網(wǎng)絡(luò)綜合   我來投稿 撤稿糾錯(cuò)

  域名預(yù)訂/競(jìng)價(jià),好“米”不錯(cuò)過

每當(dāng)頁面中出現(xiàn)洋洋灑灑的表單,用戶就會(huì)開始感到頭疼,有些用戶就會(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é)果來源于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)無必選項(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)”之類說明文字也直接隱藏了。那么對(duì)于這個(gè)用戶基本不需要太多思考就知曉的圖標(biāo),對(duì)于需要簡(jiǎn)化用戶思考的表單來說確實(shí)要優(yōu)于一些其他的非“*”icon的出現(xiàn)了。

b)有人會(huì)疑問一個(gè)表單,如果都是必填項(xiàng),還有必要用*去標(biāo)志出每個(gè)必填項(xiàng)嗎?在沒有必填項(xiàng)標(biāo)志的時(shí)候,大部分人會(huì)有兩種不同的理解,一類人會(huì)認(rèn)為,這些均為必填項(xiàng),而另一類人則會(huì)理解為此處均為非必填項(xiàng),那么在這種情況下,如果標(biāo)記了必填項(xiàng)可以滿足不同人群的思考。

還有人,會(huì)疑問在一個(gè)表單中大部分項(xiàng)為必填項(xiàng)只有少部分為非必填項(xiàng)時(shí),我們是否可以直接在非必填項(xiàng)旁標(biāo)志出非必填的標(biāo)志呢?當(dāng)一個(gè)頁面大部分為必填項(xiàng)時(shí),而只有少量非必填項(xiàng)時(shí),非必填項(xiàng)如果做的太弱化會(huì)導(dǎo)致整頁無法區(qū)分必填還是非必填;而如果非必填項(xiàng)做的太過突出的話又反過來突出了頁面中需要弱化的信息項(xiàng),用戶反而會(huì)去焦點(diǎn)關(guān)注在他們可填可不填的項(xiàng)中,有點(diǎn)適得其反。

因此,我還是認(rèn)為當(dāng)頁面中的表單,無論是全部都是必填項(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ì)造成任何理解性問題,那么作為精簡(jiǎn)原則來說,通常可以去掉*。

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、下拉框的必填來說也沒有很好的解決方案。因此,在使用必填項(xiàng)暗提示時(shí),在表單形式為文本框,并且文本框內(nèi)無其他暗提示語句的時(shí)候也可以使用。

2) *思考

a)用戶對(duì)于表單的視覺走向

從這張熱點(diǎn)圖中可以看出,對(duì)于表單類別的視覺走向是以左邊標(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ì)于表單來說,標(biāo)簽項(xiàng)和填寫項(xiàng)位置離開太遠(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ì)前一種來說要舒服很多了。不僅使得標(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)方式。按照之前的理論來說此類方式為了視線流更好的展示,個(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ì)如下圖:

申請(qǐng)創(chuàng)業(yè)報(bào)道,分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處,共同探討創(chuàng)業(yè)新機(jī)遇!

相關(guān)標(biāo)簽
web服務(wù)器

相關(guān)文章

熱門排行

信息推薦