![]()
設(shè)計師不再只是為互聯(lián)網(wǎng)創(chuàng)造漂亮美觀的圖形那么簡單了,作為一個WEB設(shè)計師,我們還需要考慮一些其他的問題,比如用戶體驗,算法,代碼等等。如今用戶體驗設(shè)計越來越重要,對于WEB表單的設(shè)計尤其如此。
WEB表單設(shè)計的目標是設(shè)計出一套讓用戶能夠從填表到點擊提交按鈕的最簡單的流程。這個過程中不需要太多的炫目效果,雖然jQuery的表單插件一直都很受歡迎。在這片文章中我們只關(guān)注于表單的用戶體驗和交互過程。這里的概念也能夠有效的幫助你減少用戶在填表過程中的挫折感。
保持醒目和簡潔
我聽過不計其數(shù)的用戶抱怨注冊表單需要太多的信息。如果你正在想辦法增加注冊用戶數(shù)量,那么你必須保證你的表單盡可能的易于填寫。這點同樣適用于其他地方的數(shù)據(jù)輸入。
根據(jù)項目的不同,用戶需要填寫的信息數(shù)量也有所不同。注冊表格可能會要求用戶輸入用戶名,電子郵件地址,然后兩次輸入密碼,這樣當然很合理并且是用戶所期待的注冊方式。
始終與用戶的期待保持同步
用戶們最討厭的事情就是頁面有出乎他們意料的跳轉(zhuǎn)。你絕對希望你的表單行為保持自然,并且將額外的JavaScript代碼減到最少,彈出氣泡和Ajax都是很有用的東西。好用的表單不應(yīng)該被劃分成許多小的項目,用隔斷將他們彼此分離,那不是好辦法。
另一個我們經(jīng)常犯的錯誤是錯過了HTML的tabindex屬性。這個屬性從可用性角度來說真是棒極了,因為通過它用戶不使用鼠標就能填寫完整個表格。但是如果你沒有保持tabindex屬性的有序性,或者只在某些輸入框中使用了這個屬性,而另外一些沒有使用,那么整個系統(tǒng)一定會出亂子。這一點適用于所有的注冊表單,而且同樣適用于其他的輸入頁面,特別是網(wǎng)上購物的信息輸入頁面。
保密性是最重要的
不論用戶輸入的是他們的信用卡號碼還是電子郵件地址,你都應(yīng)該將保證這些數(shù)據(jù)的安全放在第一位。用戶信任你的網(wǎng)站和后端代碼正確的收集了他們的信息并將之保存在一個安全的地方。
如果可能的話我建議在你的整個網(wǎng)站中都使用SSL認證,這不僅僅保護了用戶的注冊信息,用戶瀏覽網(wǎng)站的整個過程都被HTTPS保護了。這可能會有點麻煩,但是有些WEB主機會輔助你安裝這些功能。當然并不是每個網(wǎng)站都必須這么做,但是你只需要多費一點兒時間和精力就能保護用戶數(shù)據(jù)的安全,你的用戶會因此而覺得安全,你和用戶之間也能建立起一種相互信任的紐帶,何樂而不為呢?
另外,不要使用那些很容易被探測的信息。除非信息是完全非“個人”的,都需要使用POST數(shù)據(jù)類型。只有在URL結(jié)構(gòu)能夠從數(shù)據(jù)中獲益的時候(比如說搜索頁面中的search.php?q=my+search+terms)才使用Ajax的GET requests。
更大的輸入框
我聽過很多關(guān)于WEB表單輸入框大小的爭論。vBulletin,Joomla!和Drupal使用的都是相當小的輸入框,大都是10px-12px的文字和很小的內(nèi)邊距。
Diigo的注冊表單結(jié)構(gòu)就很大氣!你需要緩和不同輸入元素之間的沖突。加粗的文字提示你哪些區(qū)域已經(jīng)填寫了,哪些區(qū)域還空著,當激活某一輸入框時,它會變成淡藍色,提示你光標現(xiàn)在所處的位置。
傳統(tǒng)的Digg注冊表單就是用很相似的方法來設(shè)計的。Twitter的注冊表單同樣都很大,你不會錯過任何東西。他們不會吝嗇于用大量白色的空間來突出輸入?yún)^(qū)域。他們的標簽系統(tǒng)也很獨特,空的輸入框中會有預(yù)先設(shè)置的占位文字,通過顏色的變換,你也可以清楚的將用戶輸入的文字和系統(tǒng)預(yù)設(shè)文字區(qū)分開來。
結(jié)論
現(xiàn)在的WEB設(shè)計出現(xiàn)了許多新的設(shè)計趨勢。最新的CSS3正在越來越多的被設(shè)計師們所采用,表單設(shè)計也不例外的需要設(shè)計師們投入更多的關(guān)注和思考。
我希望這些用戶體驗背后的指導(dǎo)原則能夠指引你創(chuàng)造更好的WEB表單。對于后端數(shù)據(jù)來說,即使是PHP這樣簡單的語言也能夠很好的處理。但是通過一到兩個星期的時間,你應(yīng)該能創(chuàng)造出一套你自己的系統(tǒng)。網(wǎng)絡(luò)開發(fā)者們,不論是前端還是后端,都應(yīng)該盡力去理解這些設(shè)計原則和范例。