創造更好的WEB表單:良好的使用者體驗設計原則和範例

來源:互聯網
上載者:User

文章描述:現在的WEB設計出現了許多新的設計趨勢。最新的CSS3正在越來越多的被設計師們所採用,表單設計也不例外的需要設計師們投入更多的關注和思考。

設計師不再只是為互連網創造漂亮美觀的圖形那麼簡單了,作為一個WEB設計師,我們還需要考慮一些其他的問題,比如使用者體驗,演算法,代碼等等。如今使用者體驗設計越來越重要,對於WEB表單的設計尤其如此。

WEB表單設計的目標是設計出一套讓使用者能夠從填表到點擊提交按鈕的最簡單的流程。這個過程中不需要太多的炫目效果,雖然jQuery的表單外掛程式一直都很受歡迎。在這片文章中我們只關注於表單的使用者體驗和互動過程。這裡的概念也能夠有效協助你減少使用者在填表過程中的挫折感。

保持醒目和簡潔

我聽過不計其數的使用者抱怨註冊表單需要太多的資訊。如果你正在想辦法增加註冊使用者數量,那麼你必須保證你的表單儘可能的易於填寫。這點同樣適用於其他地方的資料輸入。

根據項目的不同,使用者需要填寫的資訊數量也有所不同。註冊表格可能會要求使用者輸入使用者名稱,電子郵件地址,然後兩次輸入密碼,這樣當然很合理並且是使用者所期待的註冊方式。但是也有特殊情況,看看WordPress的預設註冊頁面。

這裡使用者只需要填寫使用者名稱和電子郵件地址,之後系統會自動產生一個密碼並發到你所填寫的電子郵件地址當中,這樣做減少了原始表格的數量,並且將惡意註冊者擋在了門外。你不需要去郵箱點擊啟用連結,但是你必須在你的郵箱中取得新的登陸密碼。

始終與使用者的期待保持同步

使用者們最討厭的事情就是頁面有出乎他們意料的跳轉。你絕對希望你的表單行為保持自然,並且將額外的JavaScript代碼減到最少,彈出氣泡和Ajax都是很有用的東西。好用的表單不應該被劃分成許多小的項目,用隔斷將他們彼此分離,那不是好辦法。

另一個我們經常犯的錯誤是錯過了HTML的tabindex屬性。這個屬性從可用性角度來說真是棒極了,因為通過它使用者不使用滑鼠就能填寫完整個表格。但是如果你沒有保持tabindex屬性的有序性,或者只在某些輸入框中使用了這個屬性,而另外一些沒有使用,那麼整個系統一定會出亂子。這一點適用於所有的註冊表單,而且同樣適用於其他的輸入頁面,特別是網上購物的資訊輸入頁面。

保密性是最重要的

不論使用者輸入的是他們的信用卡號碼還是電子郵件地址,你都應該將保證這些資料的安全放在第一位。使用者信任你的網站和後端代碼正確的收集了他們的資訊並將之儲存在一個安全的地方。

如果可能的話我建議在你的整個網站中都使用SSL認證,這不僅僅保護了使用者的註冊資訊,使用者瀏覽網站的整個過程都被HTTPS保護了。這可能會有點麻煩,但是有些WEB主機會輔助你安裝這些功能。當然並不是每個網站都必須這麼做,但是你只需要多費一點兒時間和精力就能保護使用者資料的安全,你的使用者會因此而覺得安全,你和使用者之間也能建立起一種相互信任的紐帶,何樂而不為呢?

另外,不要使用那些很容易被探測的資訊。除非資訊是完全非“個人”的,都需要使用POST資料類型。只有在URL結構能夠從資料中獲益的時候(比如說搜尋網頁面中的search.php?q=my+search+terms)才使用Ajax的GET requests。

更大的輸入框

我聽過很多關於WEB表單輸入框大小的爭論。vBulletin,Joomla!和Drupal使用的都是相當小的輸入框,大都是10px-12px的文字和很小的內邊距。

Diigo的註冊表單結構就很大氣!你需要緩和不同輸入元素之間的衝突。加粗的文字提示你哪些地區已經填寫了,哪些地區還空著,當啟用某一輸入框時,它會變成淡藍色,提示你游標現在所處的位置。

傳統的Digg註冊表單就是用很相似的方法來設計的。Twitter的註冊表單同樣都很大,你不會錯過任何東西。他們不會吝嗇於用大量白色的空間來突出輸入地區。他們的標籤系統也很獨特,空的輸入框中會有預先設定的佔位文字,通過顏色的變換,你也可以清楚的將使用者輸入的文字和系統預設文字區分開來。

結論

現在的WEB設計出現了許多新的設計趨勢。最新的CSS3正在越來越多的被設計師們所採用,表單設計也不例外的需要設計師們投入更多的關注和思考。

我希望這些使用者體驗背後的指導原則能夠指引你創造更好的WEB表單。對於後端資料來說,即使是PHP這樣簡單的語言也能夠很好的處理。但是通過一到兩個星期的時間,你應該能創造出一套你自己的系統。網路開發人員們,不論是前端還是後端,都應該儘力去理解這些設計原則和範例。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。