如何快速低成本提高web可用性的幾個細節

2022-10-05 12:15:11 字數 3161 閱讀 1658

可用性(usebility),iso 9241-11國際標準對可用性作了如下定義:產品在特定使用環境下為特定使用者用於特定用途時所具有的有效性(effectiveness)、效率(efficiency)和使用者主觀滿意度(satisfaction)。

在實際的產品設計中,有很多標準的方法和技巧可以提高web頁面的可用性,但往往很多方法成本較高,耗時較長。如何快速度低成本的提高可用性呢?我總結了幾個細節給大家分享一下。

1、在傳達資訊的頁面盡量少用紅色

我們在很多時候有乙個誤區,錯誤的認為紅色醒目,可以吸引人,從而可以轉化更多的pv,特別是一些運營編輯同學們,愛用標紅這樣的形式,而且為了達到「目的」,把標題搞的一大片紅。(圖1)

來自網上車市首頁的截圖:

(圖1)

我們可以看到,這樣的體驗非常糟糕,因為紅色是一種起到警示作用的顏色,往往只有出現系統級錯誤,不可恢復操作提示或是嚴重警告性錯誤時才會使用這種顏色,包括日常生活中,紅色代表禁止(圖2),這種顏色會給使用者很緊張esbiafxk焦慮的感覺,而且濫用會使頁面很不和諧。

(圖2) (圖3)

當然,如果紅色處理的得當,還是可以在頁面中可以很好的達到突出顯示的效果,例如上面的圖3。

2、最醒目的顏色是鏈結預設藍色

更詳細的,按最醒目最容易讓人點選的順序排列如下

1)文字是預設鏈結藍色和下劃線的。藍色一般為#0000ff或#0000cc,但在運營頁面這種藍色不適合聚集在一起,可以跟據整體風格做色值上的調整。

2)文字是預設鏈結藍色的。(藍色應用方案同上)見圖4

(圖4)

插入千鳥的文章《使用者喜歡點什麼》

3)文字是反白或是高對比度的文字或是按鈕,一定要符合w3c關於對比度的規範,如圖5就有很好的效果。

來自amazon.com導航中的截圖

(圖5)

插入ami zhang的文章《不要忽略了顏色的可用性》

3、網頁中的英文不要全用大寫

這點主要是說出現在標題,或是說明性文案中的英文單詞,或是主網域名稱超過5個字母的網域名稱,最好不要全用大寫。

舉例:advanced search

如果寫成:advanced search

雖然很簡單的乙個片語,但如果全大寫,會不會讀起來更「累」一些呢?我想對於中國使用者普遍英文水平不高的情況下,這種「累」會更突出。

再比如:www.soufun.com,這個**,如果我們在一些宣傳性的廣告中用小寫,可能更容易讓人記住。

如果改成:www.soufun.com是不是感覺有一點點不舒服呢?

其實這與人們對縮寫名詞的潛意識有關,比如我們說cctv,可能比看到cctv反應起來會快那麼一點點。

所以在頁面中的資訊文案,最好還是遵循一般規律,如果是專有名詞或是品牌,可以用首字母大寫的方式,比如:blackberry

4、網頁中的數字盡量使用阿拉伯數字

這一點與上面類似,也是為了給使用者帶來更直觀的效果。特別是用於說明日期,條目數量等用於數字的地方,一定要使用阿拉伯數字。見圖6

比如:(圖6)

可以想象,如果我們改為:

名博排行前五十

不超過四十個字元

這樣看起來會很累,而且不夠直觀。當然,對於**號碼就更不用說了。

5、注釋性文案要盡量簡短

注釋性或是情景提示的文案一定要在表達準確意思的前提下簡短,不需要修飾性的形容詞,建議大家仔細學習好中文,很多朋友知道要簡短,但為了簡短,把要傳達的意思破壞了,甚至有了歧義。

舉例,見圖1

修改之前,文字冗餘。

&nbesbiafxksp;

修改之後,清晰明確。

(圖1)

k3定律之一:把頁面中的文字去掉一半,把剩下的文字再去掉一半。

6、用好alt和title

簡單直白的說:

alt適用於,在瀏覽器中滑鼠懸停在上時有輔助的文字注釋或說明,用在img標籤中

例如:把滑鼠懸停在上

title適用於帶有鏈結的文字,在瀏覽器中滑鼠懸停在鏈結文字時有文字注釋或說明

例如:把滑鼠懸停在鏈結上

www.myzdnet.com.cn

其實這兩個html語法中的屬性,大多數人都知道,但很多**沒有把這兩個屬性用好。

例如一些按鈕,為了設計美觀,在按鈕的中只會寫上乙個關鍵的動詞,例如:search或go

但在一些場景中,可能這個按鈕不足以十分清楚告知使用者它的作用,所以使用alt值做為注釋就可以提高可訪問性。另外,在網路不好或是伺服器問題而導致無法開啟時,alt值也起到的非常關鍵的作用。如下圖2

(圖2)

再例如一些文章標題因為頁面設計整齊的限制,而僅顯示了短標題或是做了擷取,但這樣的標題往往不能很準確的表達意思甚至讓人看不懂,這時候如果用了title屬性就可以很好的解決這個問題,見圖3

(圖3)

關於alt和title的更多技巧,請參閱千鳥的兩篇文章:《使用alt提公升可訪問性 》《使用title提公升可訪問性》

7、超過1秒鐘的等待要有進度顯示

在現實中,我們都有過體驗,如果去銀行排隊,漫長的時間中,如果玩兒著手機,或是看等候區提供的雜誌可能會好過一些。

在web中用的比較早比較普遍的等待進度狀態是上傳,比如我們用web中的郵箱上傳附件或是在**分享**上傳**,這些進度條往往都是由程式判斷,可以給出**性的完成時間或是完成的百分比,讓使用者有一種「期待感&rdquowww.cppcns.com;,見圖4,這些已經成為「web產品標準」的地方,大多數**做的已經都不錯。

(圖4)

但存在一些頁面中的互動,需要等待的時間遠遠沒有上傳乙個檔案那麼長時間,但這種等待又不能控制在非常短的時間內(通常在1秒以內使用者可以忍受)。即便這種「不長不短」的時間,如果完全讓頁面處於空白的等待狀態,哪怕只是2秒鐘,對使用者來講,可能會以為**出了問題頁離開。

比如一些標籤頁的切換會向伺服器提交請求,比如一些檢索器的查詢結果需要查詢資料庫

而這些看似很短暫的等待,如果沒有任何提示,會讓很多使用者離開。

例如,在新版的首頁中有乙個切換各地**的模組,網速好的情況下,切換城市只需要1秒鐘左右的時間。如果沒有加任何切換時的等待提示,切換城市時,這個模組就會空白一片,帶給使用者的體驗就非常不好。

如果我們加上乙個gif動畫和一行文案描述,使用者從心理上在這1秒鐘裡就不會有一種「空白」的等待感,而且會很有耐心。如圖5

(圖5)

而且這種等待進度提示的成本非常低,只需要乙個gif動畫就可以解決。(jiangyang )

本文標題: 如何快速低成本提高web可用性的幾個細節

本文位址: /news/exp/25035.html

Web可用性測試

專案 問題 答案 yes no n a 瀏覽1 對瀏覽者所處網頁有清晰的標記?2 有清楚指向主頁的鏈結?3 各主要部分都可以由主頁進入?4 有 索引,已備需要?5 架構簡單,沒有不必要的分級?6 有易用的搜尋功能,已備需要?功能1 所有功能都有清晰的標籤?2 不需要離開 即可運用各必需的功能?3 沒...

如何提公升系統可用性?

相傳魏文王和名醫扁鵲之間曾經發生過這樣一段對話 魏文王 你們兄弟三人,誰是醫術是最好的呢?扁鵲 大哥最好,二哥差些,我是三人中最差的乙個。魏文王 那為什麼你的名氣最大?扁鵲 大哥治病,是治病於病情發作之前,病人尚未發病即已 使得他的醫術沒有得到認可,沒什麼名氣 二哥治病,是治病於病情初起時,二哥藥到...

交通中的web可用性原則

使用者往往沒有太多耐心在乙個新 上停留過久的時間,如果乙個 表達資訊不明確,不好用,使用者很可能不再訪問該 這也是web可用性中很重要的乙個原則。其實司機比網際網路使用者更沒有 耐性 這還真不能怪他們 對於各種交通資訊牌 訊號燈,司機必須在很短的時間內理解其內容,這就促使了交通資訊可用性的進步,而這...