程序員在頁面友好性上常犯的5種錯誤以及改正方法

　　英文原文：5 Common Usability Mistakes and Solutions For Avoiding Them

　　我是一個性情乖戾的 web 用戶，但我想這也幫助促使我成為了一名優秀的 Web 開發人員。當我看到一個網站上有讓人不爽的設計時就會非常的惱怒，一些很簡單的東西為什么做不好？下面是 5 種常見的可用性方面的錯誤，以及如何糾正這些問題的方法。給自己方便，也與人方便，確保自己不要犯這樣的錯誤。

　　使用表達submit 事件，不要用click事件；請用表單標簽form!

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

document.getElementById ("myForm") .addEventListener ("submit", function (e) {
    e.preventDefault ();

    // ... Do processing here.  Yay for "enter" key submission! return false;
});

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

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

　　我是一個非常喜歡在瀏覽器新標簽頁里打開網頁的人，我最近在找一個新房子，我會同時打開很多網站頁面，點擊里面的圖片觀看，但不幸的是，打開的這些頁面都進入了同一個標簽頁。很討厭。在你對任何鏈接使用preventDefault方法前，請先檢查用戶是否按下了[CONTROL] 或 [META] 鍵：

document.getElementById ("myLink") .addEventListener ("click", function (e) {
    // e.preventDefault ();  (不好) if(e.meta || e.ctrlKey) return;
 // 如果用戶想新開一個窗口，請放行     e.preventDefault ();
});

　　我在我的網站上就是這樣做的，用戶在打開新標簽頁時就不會遇到類似的問題。不要迫使你的用戶在你的網站上不停的點擊后退鍵！

　　在設置 text-overflow: ellipsis 的時候，請在你的網頁元素上添加 title 屬性，

　　有些新的 CSS 屬性或屬性值是非常的有用，例如text-overflow: ellipsis。程序員以前經常會使用什么方法來實現這種效果。我贊同使用text-overflow: ellipsis，但是，當我用鼠標懸停在這個元素上時，你最好用title屬性顯示出完整的信息：

<div class="ellipsizeMe lazy " 
title="I am some really, really long text that's going to be ellipsized"> I am some really, really long text that's going to be ellipsized </div>

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

　　不要忘了:focus 和 :active！

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

a:hover, a:active, a:focus { /* 改變它們的樣式 */     color: #900;
}

　　給用戶做一件好事吧：下次當你開發一個網站，請用 tab 鍵遍歷頁面上所有的元素；如果你按動 tab 不鍵后，頁面沒有任何聚焦點變化，請檢查你的樣式表，看看是否忘了給它們添加一些狀態樣式！

　　請使用 search/email 文本框類型

　　當在手機或平板等移動設備上填充表單信息時，我遇到了超級麻煩的問題，因為我必須切換鍵盤模式才能找到“@”字符。我希望 Web 開發人員都能成熟點，學會使用正確的文本框類型：

<input type="search" value="" /> 
<input type="email" value="" />

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

　　我們程序員常犯的錯誤有很多，以后我還會寫更多這方面的文章，但可以肯定的是，大多數的這些錯誤都很容易糾正，只要你注意到了它們。如果你在使用某個網站或 web 應用時還遇到了其它友好性的問題，請告訴我，我會在下一篇文章里寫出來，謝謝！

                    <span id="shareA4" class="fl">                          </span>