Web程式設計師常見的5個錯誤及解決方案

2016-01-18    分類:WEB開發、程式設計開發、首頁精華2人評論發表於2016-01-18

我是那種脾氣暴躁的web使用者,但我認為正是如此才驅使我成為一名良好的web開發人員。我會對那些會導致使用網站變得困難的事情惱火,我認為事情越簡單越方便越好。這裡有五個常見的可用性錯誤,以及如何避免它們的解決方案。

使用submit 代替 click 事件;使用<Form>標籤!

我自己也不知道有多少次我曾試著用 ENTER 鍵(或移動方向/enter鍵)提交表格,然後卻什麼都沒發生。然後我點選或使用提交按鈕,表格才肯做一些事情。這是我對可用性這個領域的問題中最不滿的一個。跳格到提交按鈕,關閉移動鍵盤並滾動到提交按鈕,完全是不需要存在的令人煩不勝煩的多餘步驟。因為只需使用submit,一切煩惱就煙消雲散:

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

	// ... Do processing here.  Yay for "enter" key submission!

	return false;
});

如果你曾在任何地方犯下這一暴行,請立即修復它。

點選事件:當[CONTROL]或 [META] 也按下的時候,不要阻止

最近我正在網上找新房子,我習慣於開啟一串新標籤。我看到一個列表頁面和命令點選我想要瀏覽照片的幾幢房子,然後會被重定向到在同一個標籤頁面:點選監聽和window.location變化的受害者。在你在任何連結上使用preventDefault時,一定要檢查meta 和control 屬性:

document.getElementById("myLink").addEventListener("click", function(e) {
	// e.preventDefault();  (bad)

	if(e.meta || e.ctrlKey) return; // Don't block user if they want to open a new tab
	e.preventDefault();
});

不要讓你的使用者在你的網站上玩點選後退點選後退的遊戲!

給帶有text-overflow: ellipsis的元素新增標題屬性

新的CSS text-overflow: ellipsis屬性和值真不錯。開發人員習慣於排除萬難地複製這種效果。我完全贊成使用text-overflow: ellipsis,但如果我將滑鼠懸停於使用它的元素上,你最好丟擲一個title屬性,這樣我才可以很快地看到整個文字:

<div class="ellipsizeMe" 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來動態地設定標題。不管你做什麼……請為你的使用者著想。

不要忘記:focus:active

很多人在樣式化元素和假設使用者有滑鼠的時候,忘記了這些宣告。還得使用:focus:active宣告:

a:hover, a:active, a:focus { /* change _all_ the pseudos! */
	color: #900;
}

請記住:下次你建立網站的時候,要給所有頁面新增tab鍵功能:如果你點選tab鍵,卻不知道什麼元素會得到焦點,那就檢查你的樣式表,看看是否忘了新增這些宣告!

使用型別為search和email的input輸入框

當我嘔心瀝血地完成移動裝置上的表格時,卻因為不得不在鍵盤螢幕之間切換以得到一個“@”,而感受到了令人難以置信的沮喪。請務必使用正確的輸入型別:

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

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

我們需要為移動使用者提供快速更新以及非常大的易用性。

但是,開發人員可能會犯數以百計的常見的可用性錯誤,因此期待以後會有更多關於可用性的文章。令人欣慰的是,大多數可用性問題糾正起來非常簡單,如果你閱讀了以上幾個可用性問題的話。如果你有任何關於有用性的問題和解決方案,也歡迎能和我們一起分享!

相關文章