《web表單設(shè)計(jì):點(diǎn)石成金的藝術(shù)》筆記

封面來(lái)源于網(wǎng)絡(luò)俭缓,侵刪

由內(nèi)而外的表單基于業(yè)務(wù)川慌,由外而內(nèi)的表單基于用戶

【寫在前邊】本文是閱讀《web表單設(shè)計(jì):點(diǎn)石成金的藝術(shù)》的讀書筆記,內(nèi)容既包括原文的摘錄,也有自己的總結(jié)坷衍,內(nèi)容比較散亂,后期會(huì)不斷完善分尸。

【轉(zhuǎn)載】請(qǐng)標(biāo)注原文作者和出處UС!丛楚!


Part 1 表單設(shè)計(jì)原則

表單設(shè)計(jì)原則

Part 2 表單的結(jié)構(gòu)

2.1 表單的組織

選取問(wèn)題

表單實(shí)際上就是Q&A模式族壳,通過(guò)與用戶的一問(wèn)一答獲得想要的信息。

考慮問(wèn)題是否必須趣些,時(shí)機(jī)是否合適

【保留决侈,刪除,延遲喧务,解釋】

先考慮人再考慮像素

創(chuàng)建對(duì)話

根據(jù)場(chǎng)景創(chuàng)建符合場(chǎng)景的對(duì)話赖歌,注意語(yǔ)氣、話術(shù)等

內(nèi)容組織

通過(guò)web慣例調(diào)查總結(jié)設(shè)計(jì)模式

2.2 如何完成表單

表單的命名

清晰地告訴用戶現(xiàn)在在哪里功茴,在做什么

起始頁(yè)

當(dāng)表單需要花費(fèi)大量時(shí)間時(shí)庐冯,可以用起始頁(yè)營(yíng)造一個(gè)氛圍,說(shuō)明為什么填寫坎穿,填寫時(shí)間等信息

清晰的瀏覽線

盡量減少閱讀時(shí)間

注意力分散最少

進(jìn)程指示

告訴人們當(dāng)前位置展父,但是表單未必是嚴(yán)格的線性結(jié)構(gòu)返劲,可能導(dǎo)致三步變成六步


Part 3 表單元素

3.1 標(biāo)簽

標(biāo)簽如何對(duì)齊?

頂對(duì)齊

輸入框50%-75%的高度作為相鄰輸入框的間距

右對(duì)齊

左對(duì)齊

用戶不熟悉表單要收集的數(shù)據(jù)或問(wèn)題無(wú)法分成易處理的內(nèi)容組時(shí)使用

有目的地讓用戶放慢填寫速度栖茉,仔細(xì)思考

框內(nèi)標(biāo)簽

填寫時(shí)需要通過(guò)標(biāo)簽確定內(nèi)容時(shí)不宜使用=>解決:把標(biāo)簽縮小到頂對(duì)齊到交互

注意把標(biāo)簽和輸入/選擇到內(nèi)容區(qū)分開(kāi)

3.2 輸入框

輸入框類型

輸入框長(zhǎng)短

通過(guò)輸入框長(zhǎng)短暗示用戶回答字?jǐn)?shù)的多少篮绿,但是當(dāng)輸入框無(wú)法受益于暗示,就應(yīng)該使用一致的長(zhǎng)度

必填項(xiàng)

表單中可選項(xiàng)和必選項(xiàng)那個(gè)多不一定吕漂,一般表明少的內(nèi)容亲配,用*總有人不確定是什么意思,不如直接用文字寫清楚惶凝。

輸入組

反映了不同輸入框之間的關(guān)聯(lián)

彈性輸入框

有時(shí)候過(guò)于復(fù)雜

3.3?動(dòng)作

主動(dòng)作次動(dòng)作

旨在完成表單的動(dòng)作是主動(dòng)作吼虎,其他如撤銷、保存苍鲜、預(yù)覽等為次動(dòng)作思灰,次動(dòng)作可能和完成表單的目的相悖。

可以用顏色區(qū)分主次動(dòng)作

進(jìn)程中的動(dòng)作

表單應(yīng)該及時(shí)反饋當(dāng)前狀態(tài)混滔,比如提交中等

3.4?幫助文字

幫助的時(shí)機(jī)

自動(dòng)即時(shí)幫助

自動(dòng)及時(shí)出現(xiàn)的幫助文字可以顯示在輸入框內(nèi)或外洒疚,內(nèi)部的文字需要是概括回答方式的幫助且和輸入內(nèi)容區(qū)分開(kāi),內(nèi)外可以配合出現(xiàn)

用戶激活的即時(shí)幫助

可以是點(diǎn)擊觸發(fā)或是懸浮觸發(fā)(鼠標(biāo)停留在熱區(qū)觸發(fā))

用戶激活的區(qū)域幫助

適用于多次使用的表格坯屿,尤其是復(fù)雜問(wèn)題表單

安全交易

(金融常見(jiàn))處理敏感信息油湖,向用戶保障安全

3.5?錯(cuò)誤與成功

錯(cuò)誤

讓用戶發(fā)現(xiàn)錯(cuò)誤才是關(guān)鍵

配上指導(dǎo)文字告訴用戶如何更正錯(cuò)誤才能讓錯(cuò)誤消失

用顏色區(qū)分時(shí)需要考慮色盲用戶

錯(cuò)誤信息和其他信息要區(qū)分開(kāi)

成功

消滅死胡同

為用戶提供下一步可能的操作,不要丟下用戶愿伴,這又可以促使用戶持續(xù)地使用產(chǎn)品而不是關(guān)閉


Part 4 表單交互

4.1 即時(shí)驗(yàn)證

確認(rèn)

即時(shí)驗(yàn)證注意時(shí)機(jī)肺魁,在用戶輸入完成一個(gè)答案再提示錯(cuò)誤,而不是一開(kāi)始就提示隔节,防止用戶受挫鹅经。

過(guò)多的即時(shí)驗(yàn)證影響用戶注意力

建議

提供輸入建議,如輸入幾個(gè)字母就跳出下拉選框給幾個(gè)有效選項(xiàng)

特定格式的轉(zhuǎn)換發(fā)生在輸入結(jié)束后

限制

如字?jǐn)?shù)限制

4.2 多余輸入

去除問(wèn)題

去掉任何多余信息怎诫,讓用戶盡早開(kāi)始使用產(chǎn)品瘾晃,使用后用戶可能更愿意提供其他信息。

智能默認(rèn)

保證默認(rèn)選項(xiàng)符合大多數(shù)人的選擇

很多情況下人們不會(huì)改正默認(rèn)選項(xiàng)幻妓,所以提供默認(rèn)選項(xiàng)可能導(dǎo)致表單答案不準(zhǔn)確

性別等提供默認(rèn)選項(xiàng)可能導(dǎo)致用戶有壓力蹦误,這時(shí)可以用不想回答作為默認(rèn)

個(gè)性化默認(rèn)

將用戶過(guò)去的選擇作為默認(rèn)選項(xiàng)

需要用戶使用過(guò)至少一次

4.3 額外輸入

即時(shí)增加

用戶不需要增加信息時(shí)不現(xiàn)實(shí),需要增加時(shí)點(diǎn)擊展開(kāi)輸入框

避免后續(xù)輸入內(nèi)容收到即時(shí)增加輸入框的影響兒大范圍下移肉津,這樣可能擾亂用戶對(duì)所處頁(yè)面的感知

解決上述問(wèn)題:內(nèi)容置于一側(cè)或折疊

折疊

將干擾用戶的額外選項(xiàng)信息隱藏强胰,在需要的時(shí)候展現(xiàn)

用戶主動(dòng)觸發(fā)(點(diǎn)擊)或是系統(tǒng)自主觸發(fā)

循序漸進(jìn)

選項(xiàng)過(guò)多時(shí)可以采用循序漸進(jìn)的方式讓用戶選擇,而不是一次性把所有選項(xiàng)呈現(xiàn)在用戶面前

4.4?基于選擇的輸入

基于最初選擇而出現(xiàn)的后續(xù)輸入

頁(yè)面級(jí)選項(xiàng)

后續(xù)表單填寫錯(cuò)誤數(shù)量較少妹沙,眼動(dòng)參數(shù)表現(xiàn)好但是填寫時(shí)間位于第二偶洋,且選項(xiàng)和后續(xù)輸入失去了情景關(guān)系

不適合初始選項(xiàng)較多的情況

水平選項(xiàng)卡

不適合初始選項(xiàng)較多的情況

垂直選項(xiàng)卡

垂直選項(xiàng)卡把選項(xiàng)放在了視線掃面線內(nèi)(水平選項(xiàng)卡不符合),在測(cè)試中表現(xiàn)更好

不適合初始選項(xiàng)較多的情況

下拉列表

下拉列表節(jié)省屏幕空間距糖,保證每個(gè)初始選項(xiàng)問(wèn)題始終可見(jiàn)

單選按鈕下方顯示

保證初始選項(xiàng)問(wèn)題可見(jiàn)玄窝,每個(gè)選項(xiàng)和用戶的選擇始終可見(jiàn)

需要用視覺(jué)等方法指示那些問(wèn)題是基于選擇的輸入

頁(yè)面跳轉(zhuǎn)讓用戶迷失方向

單選按鈕內(nèi)顯示

當(dāng)額外選項(xiàng)問(wèn)題數(shù)量較少時(shí)可以使用

顯示非活動(dòng)選項(xiàng)

顯示所有額外輸入牵寺,只有和初始選擇關(guān)聯(lián)的部分問(wèn)題可以輸入,其他為不可用狀態(tài)

解決了單選按鈕下顯示導(dǎo)致的混亂狀態(tài)恩脂,但是呈現(xiàn)了過(guò)多問(wèn)題讓用戶困惑

組的顯示

彌補(bǔ)了顯示非活動(dòng)選項(xiàng)中初始選項(xiàng)和額外問(wèn)題間關(guān)聯(lián)性弱的問(wèn)題

額外問(wèn)題減弱了初始選擇的視覺(jué)分量帽氓,測(cè)試效果是所有方案中最差的,錯(cuò)誤最多

4.5 循序漸進(jìn)

注冊(cè)表單會(huì)逐步消失俩块,在使用的過(guò)程中加入注冊(cè)內(nèi)容黎休,讓用戶參與其中


Part 5 表單的未來(lái)

消失與變化

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市典阵,隨后出現(xiàn)的幾起案子奋渔,更是在濱河造成了極大的恐慌镊逝,老刑警劉巖壮啊,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異撑蒜,居然都是意外死亡歹啼,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門座菠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)狸眼,“玉大人,你說(shuō)我怎么就攤上這事浴滴⊥孛龋” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵升略,是天一觀的道長(zhǎng)微王。 經(jīng)常有香客問(wèn)我,道長(zhǎng)品嚣,這世上最難降的妖魔是什么炕倘? 我笑而不...
    開(kāi)封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮翰撑,結(jié)果婚禮上罩旋,老公的妹妹穿的比我還像新娘。我一直安慰自己眶诈,他們只是感情好涨醋,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著逝撬,像睡著了一般浴骂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上球拦,一...
    開(kāi)封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天靠闭,我揣著相機(jī)與錄音帐我,去河邊找鬼。 笑死愧膀,一個(gè)胖子當(dāng)著我的面吹牛拦键,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播檩淋,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼芬为,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了蟀悦?” 一聲冷哼從身側(cè)響起媚朦,我...
    開(kāi)封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎日戈,沒(méi)想到半個(gè)月后询张,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡浙炼,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年份氧,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片弯屈。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡蜗帜,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出资厉,到底是詐尸還是另有隱情厅缺,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布宴偿,位于F島的核電站湘捎,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏酪我。R本人自食惡果不足惜消痛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望都哭。 院中可真熱鬧秩伞,春花似錦、人聲如沸欺矫。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)穆趴。三九已至脸爱,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間未妹,已是汗流浹背簿废。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工空入, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人族檬。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓歪赢,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親单料。 傳聞我的和親對(duì)象是個(gè)殘疾皇子埋凯,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 一、表單結(jié)構(gòu) 1扫尖、表單的設(shè)計(jì) -設(shè)計(jì)原則 盡量減少痛苦 說(shuō)明填寫完成途徑 考慮情境 確保一致溝通 2白对、表單...
    ba帝兒閱讀 634評(píng)論 0 0
  • 本書一共14章,講了三部分內(nèi)容:表單結(jié)構(gòu)换怖、表單元素甩恼、表單交互。表單是橫在用戶和企業(yè)之間的一道障礙狰域, 沒(méi)有任何人喜歡...
    2c5994723157閱讀 3,227評(píng)論 0 16
  • 一. 表單設(shè)計(jì)的影響與原則 1.1 表單的產(chǎn)生 由內(nèi)而外媳拴,網(wǎng)站根據(jù)自身信息存儲(chǔ)格式要求黄橘,從數(shù)據(jù)庫(kù)映射成表單兆览。 由外...
    曉夢(mèng)蟬君閱讀 12,075評(píng)論 1 30
  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)塞关,斷路器抬探,智...
    卡卡羅2017閱讀 134,716評(píng)論 18 139
  • HTML表單 在HTML中,表單是 ... 之間元素的集合帆赢,它們?cè)试S訪問(wèn)者輸入文本小压、選擇選項(xiàng)、操作對(duì)象等等椰于,然后將...
    蘭山小亭閱讀 3,419評(píng)論 2 14