接低成本提高web可用性的幾個(gè)細(xì)節(jié)(一)

5、注釋性文案要盡量簡(jiǎn)短

注釋性或是情景提示的文案一定要在表達(dá)準(zhǔn)確意思的前提下簡(jiǎn)短，不需要修飾性的形容詞，建議大家仔細(xì)學(xué)習(xí)好中文，很多朋友知道要簡(jiǎn)短，但為了簡(jiǎn)短，把要傳達(dá)的意思破壞了，甚至有了歧義。
舉例，見圖1
修改之前，文字冗余。 

修改之后，清晰明確。

(圖1)
K3定律之一：把頁(yè)面中的文字去掉一半，把剩下的文字再去掉一半。

6、用好alt和title

簡(jiǎn)單直白的說：
alt適用于圖片，在瀏覽器中鼠標(biāo)懸停在圖片上時(shí)有輔助的文字注釋或說明，用在img標(biāo)簽中
例如：把鼠標(biāo)懸停在圖片上

title適用于帶有鏈接的文字，在瀏覽器中鼠標(biāo)懸停在鏈接文字時(shí)有文字注釋或說明
例如：把鼠標(biāo)懸停在鏈接上
www.myzdnet.com.cn

其實(shí)這兩個(gè)html語(yǔ)法中的屬性，大多數(shù)人都知道，但很多網(wǎng)站沒有把這兩個(gè)屬性用好。
例如一些按鈕，為了設(shè)計(jì)美觀，在按鈕的圖片中只會(huì)寫上一個(gè)關(guān)鍵的動(dòng)詞，例如：Search或Go
但在一些場(chǎng)景中，可能這個(gè)按鈕不足以十分清楚告知用戶它的作用，所以使用alt值做為注釋就可以提高可訪問性。另外，在網(wǎng)絡(luò)不好或是服務(wù)器問題而導(dǎo)致圖片無(wú)法打開時(shí)，alt值也起到的非常關(guān)鍵的作用。如下圖2

(圖2)
再例如一些文章標(biāo)題因?yàn)轫?yè)面設(shè)計(jì)整齊的限制，而僅顯示了短標(biāo)題或是做了截取，但這樣的標(biāo)題往往不能很準(zhǔn)確的表達(dá)意思甚至讓人看不懂，這時(shí)候如果用了title屬性就可以很好的解決這個(gè)問題，見圖3

(圖3)
關(guān)于alt和title的更多技巧，請(qǐng)參閱千鳥的兩篇文章：《使用Alt提升可訪問性》《使用Title提升可訪問性》

7、超過1秒鐘的等待要有進(jìn)度顯示

在現(xiàn)實(shí)中，我們都有過體驗(yàn)，如果去銀行排隊(duì)，漫長(zhǎng)的時(shí)間中，如果玩兒著手機(jī)，或是看等候區(qū)提供的雜志可能會(huì)好過一些。
在web中用的比較早比較普遍的等待進(jìn)度狀態(tài)是上傳，比如我們用web中的郵箱上傳附件或是在視頻分享網(wǎng)站上傳視頻，這些進(jìn)度條往往都是由程序判斷，可以給出預(yù)測(cè)性的完成時(shí)間或是完成的百分比，讓用戶有一種“期待感”，見圖4，這些已經(jīng)成為“web產(chǎn)品標(biāo)準(zhǔn)”的地方，大多數(shù)網(wǎng)站做的已經(jīng)都不錯(cuò)。

(圖4)
但存在一些頁(yè)面中的交互，需要等待的時(shí)間遠(yuǎn)遠(yuǎn)沒有上傳一個(gè)文件那么長(zhǎng)時(shí)間，但這種等待又不能控制在非常短的時(shí)間內(nèi)(通常在1秒以內(nèi)用戶可以忍受)。即便這種“不長(zhǎng)不短”的時(shí)間，如果完全讓頁(yè)面處于空白的等待狀態(tài)，哪怕只是2秒鐘，對(duì)用戶來(lái)講，可能會(huì)以為網(wǎng)站出了問題頁(yè)離開。
比如一些標(biāo)簽頁(yè)的切換會(huì)向服務(wù)器提交請(qǐng)求，比如一些檢索器的查詢結(jié)果需要查詢數(shù)據(jù)庫(kù)
而這些看似很短暫的等待，如果沒有任何提示，會(huì)讓很多用戶離開。
例如，在新版的首頁(yè)中有一個(gè)切換各地報(bào)價(jià)的模塊，網(wǎng)速好的情況下，切換城市只需要1秒鐘左右的時(shí)間。如果沒有加任何切換時(shí)的等待提示，切換城市時(shí)，這個(gè)模塊就會(huì)空白一片，帶給用戶的體驗(yàn)就非常不好。
如果我們加上一個(gè)gif動(dòng)畫和一行文案描述，用戶從心理上在這1秒鐘里就不會(huì)有一種“空白”的等待感，而且會(huì)很有耐心。如圖5

(圖5)
而且這種等待進(jìn)度提示的成本非常低，只需要一個(gè)gif動(dòng)畫圖片就可以解決。

原文：http://www.myzdnet.com.cn/?p=44