程式設計師在頁面友好性上常犯的5種錯誤以及改正方法

edithfang發表於2015-01-14
使用表達submit事件,不要用click事件;請用表單標籤form!

我不知道遇到過多少次,當我使用Enter鍵提交一個表單時(或手機上用箭頭/輸入鍵),卻什麼都沒發生。我只好又用滑鼠點選提交按鈕,表單終於有了反應。這是我最痛恨的一個網頁可用性上的問題,一看就是業餘人員做的。用滑鼠點選提交按鈕,或在手機上關閉鍵盤然後滾動到頁面底部找到提交按鈕,這都是討厭的多餘的動作,完全不需要這樣做。你只需要使用submit事件,網頁就會變得友好很多:



如果你在什麼地方犯了這樣的錯誤,請立即糾正。

不要阻止當有[CONTROL] 或 [META] 鍵按下時的點選事件

我是一個非常喜歡在瀏覽器新標籤頁裡開啟網頁的人,我最近在找一個新房子,我會同時開啟很多網站頁面,點選裡面的圖片觀看,但不幸的是,開啟的這些頁面都進入了同一個標籤頁。很討厭。在你對任何連結使用preventDefault方法前,請先檢查使用者是否按下了[CONTROL] 或 [META] 鍵:



我在我的網站上就是這樣做的,使用者在開啟新標籤頁時就不會遇到類似的問題。不要迫使你的使用者在你的網站上不停的點選後退鍵!

在設定text-overflow: ellipsis的時候,請在你的網頁元素上新增title屬性,

有些新的CSS屬性或屬性值是非常的有用,例如text-overflow: ellipsis。程式設計師以前經常會使用什麼方法來實現這種效果。我贊同使用text-overflow: ellipsis,但是,當我用滑鼠懸停在這個元素上時,你最好用title屬性顯示出完整的資訊:



如果你不想把相同的內容輸出兩次,你可以使用Js動態的設定title。不管怎麼實現,請為使用者著想。

不要忘了:focus 和 :active!

很多人在給頁面元素設計樣式時忽略了它們的狀態,只考慮了使用者使用滑鼠操作,忘記了使用者也許是用鍵盤操作。請用:focus 和 :active 標明它們的狀態:



給使用者做一件好事吧:下次當你開發一個網站,請用tab鍵遍歷頁面上所有的元素;如果你按動tab不鍵後,頁面沒有任何聚焦點變化,請檢查你的樣式表,看看是否忘了給它們新增一些狀態樣式!

請使用search/email文字框型別

當在手機或平板等移動裝置上填充表單資訊時,我遇到了超級麻煩的問題,因為我必須切換鍵盤模式才能找到“@”字元。我希望Web開發人員都能成熟點,學會使用正確的文字框型別:



稍微修改一下,就能給你的手機使用者帶來巨大的便捷。

(英文:5 Common Usability Mistakes and Solutions For Avoiding Them.)
相關閱讀
評論(1)

相關文章