中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

遵循本文這10個確立已久（卻又常常被忽略）的可用性建議，可以確保你的用戶順利完成表單任務(wù)。

美國交通安全管理局（TSA）服務(wù)于航空旅客的安全。但由于飛機(jī)延誤、安檢時需在公眾場合脫衣服等原因，也遭到了很多投訴。

第一次看到TSA的投訴表單時，我甚至懷疑他們是不是故意把按鈕設(shè)計成這樣的。表單底部的兩個按鈕分別為 “預(yù)覽” 和 “清空表單”。由于用戶預(yù)期的按鈕是 “提交” 或 “下一步”，所以 “預(yù)覽” 放在這里不是特別理想。最有問題的是按鈕 “清空表單”，一旦點(diǎn)擊，所有鍵入的內(nèi)容將會全部消失。

無論是不是故意的，這無疑會減少投訴量——因為表單設(shè)計不當(dāng)造成用戶無法順利填寫下去。但這樣的設(shè)計也違背了我們15年前就確立的表單設(shè)計規(guī)范：避免使用重置鍵。

TSA的投訴表單：按鈕 “清空表單” 違反了15年前的可用性原則。 “清空表單” 放置的位置更接近輸入?yún)^(qū)，不但容易造成用戶誤點(diǎn)；也違反了 “UI元素與主要操作行為相臨近” 的原則。

直到最近我才發(fā)現(xiàn)，TSA的這兩個按鈕不是有意要設(shè)計得這么糟。因為該網(wǎng)站的另外一個投訴表單就設(shè)計無誤，緊隨輸入?yún)^(qū)之后的是按鈕 “提交”。因此，前者很有可能是不小心造成的。

作為一個納稅人，我并不希望政府機(jī)構(gòu)會拿一個故意弄錯的設(shè)計去阻止我發(fā)表建議。但從UX角度來說，這是對UX缺乏最基本了解的體現(xiàn)，盡管最近幾年人人都在談UX。很多人連基本的設(shè)計原則都不知道或常常將其忽視。

細(xì)致無誤的表單對用戶的理解速度和填寫過程有很積極的影響。最近一份由Seckler和她同事發(fā)布在CHI的報告顯示，如果表單在設(shè)計過程中遵循基本的可用性原則，表單的完成時間會顯著縮短，完成率也幾乎翻倍并且完成結(jié)果正確無誤。（遵循了可用性原則的投訴表單，表單提交率高達(dá)78%；而沒有遵守可用性規(guī)范的投訴表單，提交率僅有42%。）如果你的網(wǎng)站用戶在表單提交時轉(zhuǎn)化率急劇下降，那么這篇文章將對你會有很大幫助：表單如果存在可用性問題，會對業(yè)務(wù)層產(chǎn)生不利影響。
表單設(shè)計的原則

表單設(shè)計與很多因素有關(guān)：表單的長度、所在場景、及相關(guān)數(shù)據(jù)。誠然，需求不同，對表單的處理方法也不盡相同，但忽視表單可用性無論如何都是難咎其責(zé)的。所以，請仔細(xì)閱讀以下原則，用它們指導(dǎo)你的設(shè)計工作。如果非要違背它們，請給出有說服力的理由。

1. 表單要簡短

數(shù)學(xué)家Blaise Pascal有句名言：“I have made this longer than usual because I have not had time to make it shorter.” 這句名言同樣適用于網(wǎng)站設(shè)計，以及詩歌創(chuàng)作。刪掉不必要的字段需要花費(fèi)很多思考時間，但這能減少用戶完成表單耗費(fèi)的精力、提高表單提交率。被去掉的哪些字段所要傳遞的信息：a.可以讓用戶通過其他方式獲取、b.后續(xù)獲取會更方便、c.可以直接忽略。表單中每一個字段的刪除，都會提高表單與用戶之間的對話效率。

2. 將有關(guān)聯(lián)的標(biāo)注和字段在視覺上進(jìn)行分組

標(biāo)注要緊隨其要需描述的字段（通常，移動端表單字段較短，標(biāo)注位于上方；PC中常位于字段的旁邊）。為避免留白混亂影響組織結(jié)構(gòu)，字段和其標(biāo)注之間要等距擺放。如果你的表單含兩組不同話題的字段，那么將它們區(qū)分開。

3. 將所有字段排成一列

多列布局會打斷用戶自上而下的閱讀習(xí)慣。與其讓用戶在多列字段中調(diào)整閱讀習(xí)慣，不如僅做成一列，然后根據(jù)字段的語義關(guān)系進(jìn)行組織，比如在不同語義組的字段之間使用分割線。（特例：非常短、或者邏輯上緊密關(guān)聯(lián)的字段如“城市”、“國家”、“郵政編碼”可以放在同一行。）

4. 通過邏輯定序

無論是表單字段（如“信用卡卡號”、“到期時間”、“安全碼”）還是字段對應(yīng)的選擇值（如“普通配送”、“1日達(dá)”、“2日達(dá)”）都要按邏輯順序嚴(yán)格排列。此外，選擇值的排序還要考慮使用頻率，盡可能列出用戶最常用的選項、并按使用頻率由高到低排列。PC端最好通過Tab鍵一個一個測試表單的順序是否正確。

星巴克iPhone客戶端通過水平移動表單幫助用戶選擇Decaf類型。遺憾的是選擇值“Full Decaf”被隱藏起來了，必須水平滑動才可顯示。如果“Full Decaf”是高頻選項，那么它最好出現(xiàn)在左側(cè)第一個位置。

5. 避免占位文本

（譯者提示：占位文本指當(dāng)一個文本框沒有被光標(biāo)聚焦的時候顯示的是提示文字，當(dāng)光標(biāo)聚焦、即點(diǎn)擊之后顯示的是空白。）有些設(shè)計師喜歡使用占位文本，因為它可以緩解由于元素過多而引起的視覺雜亂問題。但是占位文本存在很多可用性問題（譯者提示：如文本消失后會挑戰(zhàn)用戶的短期記憶、進(jìn)而錯誤反饋時不知錯所，有用戶把文本誤以為是默認(rèn)填寫的數(shù)據(jù)，還有部分用戶會嘗試手動去刪除文本等等），盡量不要使用（欲了解更多，可查閱文章：Placeholders in Form Fields Are Harmful）。

6. 輸入框要與輸入內(nèi)容的類型和大小匹配

如果選擇值只有2-3個，盡量避免使用下拉框，可以把它們設(shè)置成單選。輸入框的長度要與用戶的心理預(yù)期保持一致，要不然輸入框太短、用戶看不到全部輸入內(nèi)容就會容易輸錯。UX大會2130位參與者的所住城市名大多在3個字符（如 Leo, Indianna）到22個字符（如San Pedro Garza Garcia, Mexico）不等。99.9%用戶的城市名含19個字符或更短，所以19個字符的寬度是字段“城市”的最佳填寫寬度。

7. 區(qū)分選填字段和必填字段

首先，選填字段越少越好（請參考第一條原則）。若該字段確定不可刪除、且只適合部分用戶，則不要讓用戶在反復(fù)驗證后才弄明白它該怎么處置。一個表單最好只設(shè)置1-2個選填項，同時要清晰地將“選填”二字標(biāo)注出來。

8. 給出輸入要求或格式規(guī)范

如果需要輸入某種特殊格式，請給出具體要求。不要讓用戶對你含糊不清的密碼輸入要求進(jìn)行猜測。這一原則也同樣適用于句法格式，如電話號碼或信用卡卡號等的標(biāo)點(diǎn)符號的使用、空格的使用。

9. 避免重置按鈕和清空表單按鈕

一不小心誤點(diǎn)，就得重頭再來，用戶之前的所有付出頃刻白費(fèi)。如果表單中含用戶財務(wù)信息之類的敏感字段，可以提供一個“取消”按鈕，讓用戶自行決定是否放棄表單填寫。但要注意的是 “取消” 按鈕在視覺上要比 “提交” 按鈕弱一些，以避免發(fā)生誤點(diǎn)。

10. 提供高亮且精準(zhǔn)的錯誤反饋

用戶犯的錯誤不僅要有顏色提示，還要有文字提示。比如，用戶漏掉了字段AND內(nèi)容的輸入，將AND加紅加粗，防止用戶再將它忽視。

輸錯的信息要讓用戶看到，同時給出錯誤原因，這樣用戶會知道自己犯的是什么錯、以及怎樣改正。

總結(jié)

表單的可用性設(shè)計絕不是什么新話題。很多可用性設(shè)計原則中都有相關(guān)介紹，如NN/g的通用可用性指導(dǎo)規(guī)范、眼動可用性研究、移動端可用性研究等。電商網(wǎng)站購物車的114個UX指導(dǎo)原則中也有詳細(xì)介紹。此外還有表單設(shè)計的相關(guān)書籍、學(xué)術(shù)報告等也對其有專業(yè)說明。

本文的10個建議并不是要徹底取代表單設(shè)計的其他專業(yè)性介紹。如果你對表單設(shè)計有很濃厚的興趣，多處理一些不同場景的復(fù)雜的表單會對你的能力提升有很大幫助。

但很多設(shè)計不當(dāng)?shù)谋韱尾⒎鞘浅鲇趶?fù)雜，僅僅是違背我們上面談到的某個或 某幾個原則。希望你在日后的表單設(shè)計過程中，不會犯上述錯誤。

原文鏈接：Website Forms Usability: Top 10 Recommendations

譯者@小媛

來源@簡書

本文由 @小媛 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理 ，未經(jīng)許可，禁止轉(zhuǎn)載。