技術資訊
表單可用性5原則
2008-11-14 11:06:00
1、關注用戶任務
1.1、告訴我填寫這個表單是做什么的?
如果這是一個注冊表單,你需要告訴我注冊能帶給我什么;如果這是一個聯(lián)系網站管理員的表單,你需要告訴我管理員將如何處理我的信息。
1.2、表單提交后,不要把我晾在一邊
是的,還有很多用戶在提交表單后不知所措,沒有告訴我提交是否成功,或者提示我提交成功,然后就把我晾在某個地方。
雖然很喜歡mister-wong的界面風格,但是當我注冊完了之后,我還是不知道該干什么。Errr...那么我現(xiàn)在要做的就是去收郵件嗎?
1.3、如果表單較長,創(chuàng)建表單導航
在線購物是一個很好的例子,幾乎所有的購物網站都建立了“挑選商品——查看詳細信息——添加購物籃——支付——訂單完成”或與之類似的全局導航。這樣當用戶在購物流程中并不會覺得自己是在一個很長的表單中,而只是為了一個特點的目標而進行的必要的點擊。
即使是在一個表單里,如果表單包含多個任務,也應該將其分步驟進行。參考blogger.com的注冊表單:
為每個任務添加說明。也許你需要了解一下fieldset和legend屬性。
2、必要、簡單
2.1、自以為是技術約束
我實在不能理解要求用戶“必須使用字母是數(shù)字組合作為密碼”有何意義,尤其是在銀行網站上,盡管我能理解這些網站對于安全性的考慮,但我仍然因此必須對于自己的常用密碼進行適當?shù)男薷囊赃m應要求,這由此產生另外一個問題——我經常忘記我的密碼,比如adsense。
2.2、站在你的用戶角度想問題
我同意不能理解當我填寫一個在線表單投訴問題,卻要我留下電話號碼和地址?OMG,你們的營銷人員是第一天上班嗎?如果我愿意電話聯(lián)系,我難道看不到你們網站底部的800電話號碼嗎?
2.3、“我不是很聰明,但也不會太笨”
對不起,我不需要你告訴我郵編是5位數(shù)字。
當web2.0風潮吹遍神州大地的時候,我們的網站設計刮起了一股清新之分,與之相應的,表單設計卻變成了冗余與累贅的試驗田??纯?63或者zhuaxia的注冊表單,你就會明白什么叫過尤不及。
2.4、如果使用email作為用戶名,密碼重復是否必要?
對于傳統(tǒng)的注冊表單而言,密碼重復驗證非常必要,理由很簡單,對于非可見的輸入,在沒有其他取回密碼的機制下,保證用戶不會輸入錯誤只能采用這種簡單的驗證機制。
但是現(xiàn)在很多新的互聯(lián)網服務都開始采用email作為登錄名,這就給表單設計提供了一個新的思考方式:當密碼可以方便的重新取回,那么讓人厭倦的密碼重復驗 證是否還是必不可少?不少網站已經開始將repeat password從頁面上去除了,下面是twitter的注冊頁面,何其清爽:
3、減少信息迷惑
3.1、用星號區(qū)別必填和選填項
盡管這已經是幾乎所有guidelines的標準,仍然有很多網站并沒有在意這一點??纯磒ownce的注冊表單:
為什么不直接告訴我這些是必填的,一定要我點擊提交后再告訴我這些非填不可。
3.2、表單指引務必明確而直接,不要故弄玄虛,不是所有用戶都有興趣和你玩。
在我隨機挑選測試的注冊表單中,xing無疑是做的最糟糕的。糟糕的并非界面設計或代碼結構,而是失敗的本地化。
作為一個讀過十幾年語文并且一直在互聯(lián)網里生活的網民,我對于這個表單的疑問實在太多了。
我可以理解xing原本是國外網站,但是你要在中文圈里混,至少也要適應一下姓在前名在后的中國傳統(tǒng)吧。好吧,姑且認為要你為中文用戶修改頁面比較麻煩,那么能不能請你告訴我,what's the meaning of“城市(商務)” and “身份”?
4、防止用戶錯誤
4.1、與其在提交后檢測,不如在提交前檢測
可以參考3.1里的pownce的案例。事實上,現(xiàn)在推出的大多數(shù)web服務已經越來越多的使用javascript來進行表單驗證,jquery和prototype等也都有很多好用的表單驗證插件。
記得,用戶最厭倦的情況之一就是:當提交表單后刷新頁面,然后告訴他有信息填寫不完整和錯誤,然后密碼部分被清空要用戶重新填寫。
4.2、如果提供驗證碼,不要太過分
之前看“史上最強驗證碼 ”時,其實頗覺理所當然,那些網站本身就是服務某些專業(yè)人士,因此問你Na2S4O6的中文名稱是什么也無可厚非,那大門本來就是對俺們關閉的。但是你要做普羅大眾如我輩的web服務,也忒考驗俺輩的耐心了吧。
4.3、千萬,千萬,千萬不要使用reset按鈕
有什么理由要用戶將剛剛填寫的所有信息全部清空?
5、提供反饋
5.1、對于已完成的任務進行提示和鼓勵
在適當?shù)臅r候給用戶一點掌聲和鼓勵會起到很大的效果,就行《使命召喚2》開始的那個蘇聯(lián)教官在我的射擊課上跟我說的,“很好,就差一點了,繼續(xù)訓練吧”。
對于網站而言,一個典雅而有效的例子就是用百分比來描述表單的完成率,你會發(fā)現(xiàn)用戶有一種使用時的“潔癖”,拒絕任何的不完美,因此當看到這個70%時,他會迫切的要將其變?yōu)?00%,是的,你的目的達到了。
5.2、不要恐嚇用戶
對不起,用語夸張了點,但是大多用戶都遇到過“可怕的”alert窗口的情況。當你提交一個表單,滴的一聲彈出一個灰色窗口,“weqwew32673712323錯誤,請重新輸入”。
于是你心驚肉跳,哪里錯了,哪里錯了?友好一些的就告訴你Email地址填寫不合法,不友好的就干脆就是一個只給程序員哥哥看的錯誤代碼。俺的小命啊,只是填寫一個表單嗎,用得著這樣嚇俺幼小的心靈嗎?
近期更新
- [2023-07-26 14:17:28] 為品牌賦能,海外官網品牌數(shù)字化
- [2023-05-06 10:32:26] 青島網站建設公司,高端網站定制,一站式網站服務——力圖數(shù)字科技
- [2023-04-27 13:47:54] 高端定制網站建設——從滿足預期到走向卓越
- [2023-04-11 09:17:49] H5頁面設計開發(fā)——移動端傳播利器
- [2022-11-16 10:11:43] windows2012程序在哪
- [2022-04-14 11:01:47] 力圖數(shù)字科技配套網站服務支持
- [2021-05-18 10:14:11] 青島網站建設的流程
- [2021-04-29 10:14:38] 企業(yè)定制化官網建設項目
- [2021-03-05 10:34:45] 移動互聯(lián)時代房地產行業(yè)的微信小程序解決方案
- [2021-01-22 17:29:38] 微信小程序有哪些優(yōu)勢?為什么要開發(fā)微信小程序?
- [2021-01-08 17:28:04] 網站建設最容易忽略的人性化設計
- [2020-12-16 16:55:32] 建設一個常規(guī)的公司網站建設成本大概是多少?
延伸閱讀
- [2009-02-18 10:45:00] 互聯(lián)網表單設計—第一章 表單設計(1)
- [2014-08-31 23:08:11] 反饋表單的確認后提交提示
- [2012-02-02 11:40:05] WEB表單設計分析及重要性
- [2012-12-19 22:20:48] 網站反饋表單的用戶體驗
- [2009-02-12 08:58:00] 回車鍵觸發(fā)表單提交的問題
- [2011-11-14 17:38:57] 如何設計好網頁表單的細節(jié)
- [2009-03-23 22:11:00] 互聯(lián)網表單設計 第四章 標簽(3)右對齊標簽
- [2008-11-10 22:28:00] 表單中的重置與取消按鈕
- [2008-08-14 16:13:00] 注冊表單中出錯字段排行榜
- [2009-01-05 23:05:00] 表單設計的最佳體驗
- [2012-08-20 12:29:56] 網站的表單設計要點
- [2008-10-31 11:24:00] web表單按鈕的使用