易用性

完美的內容是用來使用的,不管您的內容多麼精彩,如果它們很難訪問,用戶照樣會離開,易用性不僅僅牽扯到技術,更多的是良好的 Web 創作習慣,易用性包含34條規則,它們是:

只使用成熟,簡單,相容的技術

Web 技術一直在發展,因為 Http 協議最初只是為了表現簡單的超文本,當人們賦予 Web 越來越多的使命的時候,Web 的局限性就表現出來了,為了解決這些問題,人們在 Web 上面附加了很多新技術以增強 Web 的表現能力,Cookie, Javscript, DHTML, ActiveX, Applet, CSS 一直到現在炙手可熱的 AJAX 技術,然而這些新技術很快帶來了相容性問題,因為 Web 內容要靠流覽器解釋,不同的流覽器加不同的安全配置,導致這些新技術並不能被如期地渲染出來,比如,很多在 IE 中成熟運行的 ActiveX 在非 IE 內核的流覽器中根本無法使用,隨著眾多流覽器以及 Web 用戶對這些新技術的揀選,我們慢慢得到了一個大家都認可的清單,現在,各大流覽器都支援,而且用戶也樂於接受的 Web 附加技術是:

Cookie, Javascript, CSS

如果您希望您的企業網站能在絕大多數環境下被無障礙的訪問,請謹慎使用除此之外的技術,這裏我們需要特別說一下 AJAX 和 Flash,它們也被很多人認可,而且 AJAX 事實上是基於 Javascript 的,然而,AJAX 同時要使用在某些流覽器安全配置下容易被禁用的 XMLHTTPRequest 物件,事實上,我的 IE 流覽器的安全配置就禁用 XMLHTTPRequest ,所以,除非加入到可信任站點,否則我連 Google Map 都無法順暢訪問。Flash 是一種偉大技術,線上廣告幾乎是它最完美的使命,作為易用性規則,我們不排斥以 Flash 技術提供廣告,但 Flash 絕對不可以用在站點導航等站點基礎結構中。

不使用任何網頁特效

雖然網頁特效並不一定涉及不相容技術,但網頁特效對絕大多數人來說是非常厭煩的,企業網站絕對不應該使用那些僅僅為了好玩的網頁特效,除非您還生活在90年代(現在已經是2007年),或者您只有14歲。最令人厭煩的網頁特效包括,要求設為主頁,接連彈出的視窗,全屏視窗,改變滑鼠游標,在狀態條上滾動的廢話,頁面內容禁選,禁止查看源代碼,閃爍的文字,離開時的彈窗,顏色古怪的視窗捲軸,聲音背景。看看 Builder.com 怎樣看待這些愚蠢的網頁特效

需要記住一條,訪問者永遠都不會因為您使用了一種自認為很 Cool 的特效而覺得您了不起。

清晰,統一的導航

用戶在您的企業網站找到有用內容的唯一途徑是通過站點的導航系統,您需要花大力氣來組織您的內容,保證讓用戶以最快的速度找到它們。導航系統必須清晰,他們應該和站點的其他內容用不同的顏色搭配以便在網頁上突出出來,同時,每個頁的導航系統應該完全一致,從一個頁面進入另一個頁面看到完全陌生的導航系統是非常令人沮喪的。

導航深度不超過三級

雖然很多人覺得這太絕對,事實上,用戶需要點三次才能找到自己想要的內容仍然太多,那種一級一級下潛的導航菜單是令人生畏的,很多人會產生進去以後便找不到路回來的恐懼,如果您能夠很好地組織自己的內容,結合分頁機制,Tag機制,對絕大多數網站,三級導航深度已經足夠使用了。

導航鏈結中必須包含文字

為了美觀,許多人喜歡圖片按紐式的導航鏈結,如果您堅持這樣做,也無可厚非,但一定在圖片上同時加上文字,讓文字體現該鏈結的含義,因為除了設計者,外人往往很難猜測您的圖片按紐的含義,文字是最直接,最精確的。

必須有純文本版本的站點地圖

當用戶在您的令人眼花繚亂的站點導航中徹底迷失的時候,純文字版的,簡單直接的站點地圖還可以救急,站點地圖可以幫助用戶快速找到他們想要的內容,這是對導航系統的補充,甚至對有些站點來說,比導航系統更有效。另外,純文本版的站點地圖非常容易被搜索引擎抓取並以此遍曆您的整個站點。

必須有麵包屑導航條

麵包屑導航(Breadcrumb Navigation)這個概念來自童話故事"漢澤爾和格雷特爾",當漢澤爾和格雷特爾穿過森林時,他們在沿途走過的地方都撒下了麵包屑,讓這些麵包屑來幫助他們找到回家的路,所以,麵包屑導航的作用是告訴訪問者他們目前在網站中的位置以及如何返回。

每頁都有自己的標題

許多企業網站的所有頁的標題都是企業的名字或者一句口號,這會讓用戶不知道他們訪問的當前頁是說什麼的,每頁都應有一個和本頁內容匹配的標題,這樣,即使用戶打開了很多視窗,仍然可以通過標題知道哪一頁是說什麼的。從 SEO 的角度看,在標題中使用本頁內容中某些關鍵字是非常好的習慣,而且,當您的頁面出現在搜索引擎的搜索結果中時,您的頁面標題應當明確地告訴搜索者他們搜到的頁面是關於什麼的。

任何頁都有一個鏈結指向首頁

人們進入一個陌生的地方,當感到迷失或不安的時候,會立刻想到返回入口位置,訪問者進入您的網站也是這樣,每頁都有一個指向首頁的鏈結可以幫助用戶在感到迷失的時候,迅速返回入口重新開始。

網站的 Logo 指向首頁

這一條似乎沒有什麼道理,但幾乎所有望站都遵守這樣的約定,當很多人都這樣約定的時候,您沒有理由例外。

對於連貫性內容(sequential content),應提供嚮導式導航

比如說,您在網站上發表很長的系列文章,您應該將文章分成多個章節,用戶看完這一章以後,下面應該有兩個鏈結,分別指向上一章和下一章,這樣,用戶不必滾動回頁面上方訪問導航系統,他/她可以直接點這兩個鏈結在文章中前進或後退,這樣不僅節省用戶的時候,還可以帶來連貫閱讀的快感。

全文搜索

如果用戶不願一頁一頁地翻看您的網站,您應當提供全文搜索功能,雖然您的搜索功能比起專業的搜索引擎還差很多,但可以幫助您的用戶快速找到他們感興趣的內容,不要使用 Google 等商業引擎的搜索代碼進行搜索,與其那樣還不如讓用戶直接到 Google 中去搜索,您應當提供一個本地搜索功能,不需要象 Google 那樣強大,因為您不需要支撐那麼大的用戶量,也不需要搜索那麼龐大的海量資訊,您網站的本地搜索功能對用戶來說,可能比 Google 更有幫助。

不使用歡迎頁

當 Flash 如火如荼的時候,設置一個歡迎頁,向用戶播放一段精美的動畫是很多企業網站的追求的模式,然而這種想法實在糟糕,很多人沒有耐心等待那段漫長的動畫下載完畢便離開了,您能想像去超市買東西前,需要先在門口看一段歡迎影片才能進去嗎?您應當讓用戶直接進來,一進來就看到實質的內容,不要用您的浪漫想法浪費用戶的時間,而且,由於搜索引擎也要首先經過這個歡迎頁面才能深入到網站內部,一個讓搜索引擎無法解讀的 Flash 動畫會讓搜索引擎認為您的網站上什麼東西都沒有。

任何圖片必須設置 ALT 和 TITLE 屬性

在您的圖片完全下載之前,流覽器無法把它們顯示出來,或者,某些流覽器可能關閉了圖片顯示,或者您的圖片資源可能丟失了,這個時候,ALT 或 TITLE 屬性會讓流覽器將圖片的描述性文字顯示在圖片的位置,讓用戶至少知道那個位置準備將要顯示的是什麼。這個屬性也幫助搜索引擎更好地理解您的圖片。

如果圖片要以縮略圖形式顯示,使用真正的降低了尺寸的縮略圖,不要只是改變圖片的寬度和高度屬性

這可以顯著降低頁面尺寸。

鏈結必須擁有可標識的視覺特徵

藍色字體加下劃線是所有人都認可的鏈結的視覺特徵,人們會用滑鼠去點這樣的地方,然而每個網站都有自己的配色風格,您的頁面背景可能導致藍色字體無法清楚地顯示,這沒有關係,您應當為全站的鏈結設置一致的視覺特徵,已經訪問過的鏈界要與不同的視覺特徵。

任何頁都有一個列印友好版本

網頁是用來在螢幕上顯示的,不是設計為用來列印的,所以,使用 IE 流覽器的列印功能列印出來的網頁總是不理想,如果您希望用戶能順利地列印您的內容,您應該對每個頁面都提供一個列印友好版本,列印友好版本中可以將導航系統等過分浪費空間的東西隱藏起來,讓真正的內容成為頁面主體,同時,要使用白底黑字,不要使用背景圖案。

請注意,如果用戶想到要列印您的內容,說明他/她對您已經非常感興趣了,他們是非常有價值的用戶,一定要幫助他們實現這個願望。

頁面都使用一致的配色和一致的結構

和全站使用一致的導航系統一樣,所有頁面使用一致的配色和結構可以幫助用戶將注意力只集中在內容上面,您不應該強迫用戶在新頁面中重新適應新的佈局。

您的站點應當避免讓絕大多數用戶左右滾動視窗

現在(今天是2007年9月1日)的主流顯示器尺寸是 1024 x 768,您可以比較安全地假設,絕大多數用戶的螢幕尺寸至少是這個值,但我確實看到不少仍然使用 800 x 600 解析度螢幕的用戶,無論如何,您的頁面佈局應儘量避免讓小螢幕用戶左右滾動,上下滾動已經夠麻煩,再加上左右滾動簡直是個噩夢。您可以讓您的網業自動適應螢幕尺寸,從技術上說,這並不困難;也可以假設一個寬度,這個假設的寬度照顧到您認為已經適度的用戶群,這是一個權衡問題,事實上,對小尺寸螢幕過分絕對地照顧也未必是好事,一個低於 800 圖元寬度的頁面在 1024 寬度的螢幕上顯示尚可,在 1280 寬度的螢幕上會顯得很不協調。

但無論如何,90年代盛行的那種使用 Javascript 判斷螢幕尺寸,然後根據不同尺寸輸出不同佈局的做法已經行不通了,現在的螢幕尺寸已經無法嚴格 QVGA, VGA 那樣劃分,很多非標準尺寸的螢幕大量出現,您幾乎無法預料您的網站將來會遇見什麼尺寸的螢幕。

站點必須在第一級導航深度處,讓用戶看到您的完整聯繫方式

對於陌生的企業網站,如果不能在第一頁就看到企業的聯繫方式,甚至,聯繫電話如果不是固定電話號碼,我都會感到不放心,您應當在第一級導航深度的頁面中,便提供企業的詳細聯繫方式,要讓用戶看到您的位址,聯繫電話,同功能變數名稱下的郵件地址,在到處都有欺騙存在的網路世界,您應當非常確切地將您現實中真實的聯繫方式體現出來,這會讓用戶放心。

每個頁面的尺寸應當小於50K

必須承受,如果算上圖片,外部 Javascript, 外部 CSS,我們自己的網站有很多頁面的尺寸也無法低於50K,但這是一個目標,您應當盡可能降低頁面尺寸,不管如今的寬度速度已經多麼快,要知道,多數人的 ADSL 接入速度不低於 120KBS 並不意味著人們能以這樣的速度訪問您的網站,不同網路運營商之間還存在著網路瓶頸,您的網站的外地訪問速度可能遠遠低於本地訪問速度。

在所有主流流覽器中擁有一致的表現

IE內核的流覽器在今天(今天是2007年9月1日)的市場份額已經降低到 60% 左右,另外的 40% 被 Mozilla,Firefox, Safari, Opera 等佔據,您的網站應該服務 W3C 標準,這樣,可以被所有主流流覽器無障礙地訪問,如果您的網站只支持 IE,就可能將 40% 的用戶擋在門外。

在用戶操作現場提供幫助,而不是進入專門的幫助系統

網站的幫助系統應當分散到各種操作現場,不需要象常規軟體那樣使用專門的幫助系統,隨時隨地為用戶提供有用的幫助資訊,讓幫助簡單化,改善用戶的訪問體驗。

用戶可以對某些內容進行評論或回饋

在 Web2.0 時代(今天是2007年9月1日),應當注重用戶的參與,網站上的絕大多數內容應該允許並鼓勵用戶參與評論和回饋,讓用戶不必註冊就可以參與評論,如果用戶必須註冊才可以參與某些內容,註冊過程也應該盡可能簡單。

頁面不可過分擁擠

不要象現在的某些門戶網站那樣,將令人眼花繚亂的資訊塞滿首頁,即使您必須放那麼多內容,也要留出足夠多的空白和邊界,否則用戶會覺得很累,Web 頁面的媒介是螢幕,不是紙張,您實在沒有必要去節省螢幕的空間,讓內容之間寬鬆地分佈在頁面上,給用戶以閒適感。

用不同色彩標識未訪問和已訪問過的鏈結

Web 公認的配色為,未訪問過的鏈結使用藍色(Blue),訪問過的鏈結使用紫色(Purple),但您可以根據您全站的色彩搭配設定自己的配色,只要保持全局一致即可。

使用所有人都可以正確顯示的字體

一定不要使用生僻或美術字體,您的訪問者使用和您不同的系統,可能是不同版本的 Windows,可能是 Mac 機,或 Linux 甚至掌上電腦,您無法保證在您這裏正常顯示的某種字體,在用戶那裏也正常顯示,盡可能使用標準字體,並在不同環境下進行測試,保證您的字體不會給任何人帶來麻煩。

除非真正必要,否則不用新視窗打開鏈結

自動用新鏈結打開視窗常常讓很多人生氣,因為他們的桌面上會有幾十個開啟的視窗,如果用戶想使用新視窗打開鏈結,他們可以自己按 SHIFT 鍵。只有新視窗是用來顯示一些提示性的消息,或者輔助性的內容的時候,它們才是必要的。

不使用滿屏模式顯示網頁,讓用戶自己決定視窗的大小

不要自動為用戶打開全屏視窗,很多用戶並不知道應該怎樣從全螢幕狀態轉回來,全屏視窗可能讓用戶感到恐慌,因為出了什麼問題,不管怎樣,全屏視窗是非常糟糕的事情,一定不要使用。

不要彈出視窗

許多流覽器,或者它們的插件會阻止彈出視窗,如果您必須使用彈出視窗以便向用戶顯示某個意外消息,如嚴重錯誤消息,或者通知等等,您可以考慮使用 Lightbox,Lightbox 是一種具有很好的視覺效果,又相容各種主流流覽器的技術,適合在網站上顯示通知,錯誤消息等等彈出內容,然而它並不使用彈窗技術,它彈出的內容仍然位於母表單,任何流覽器彈窗阻止系統都不會組織這種彈出內容。關於 Lightbox 的原理和應用,您可以參考 huddletogether.comLightbox JS v2.0 項目。

用戶註冊的時候,只填寫必要的內容

事實上,應該只填寫用戶名和密碼就夠了,完全沒有必要要求用戶提供更多詳細資訊,因為多數人會提供假的。除非您的系統是一些類似 B2B, B2C 的系統,需要用戶提供真實身份開展業務。

網頁上的廣告需要有明確的廣告標誌

要告訴用戶那是廣告,廣告要和您的內容有一定的分隔邊界,免得二者混在一起讓用戶迷惑,請記住,用戶在不知情,或被欺騙時點擊的廣告是沒有任何效用的,帶不來任何銷售,即使您的廣告是來自 Google Adsense 那樣的點擊付費廣告,也不要欺騙用戶點擊,這是一個從業者最基本的操守。

廣告不可使用欺騙伎倆,欺騙不熟練的用戶點擊

您一定遇到過這樣的廣告,頁面上突然彈出一個小視窗,說您的系統感染了某某流行病毒,請點擊該按紐清除;或者說某某人給您發來一個消息云云,這種明顯的欺詐性廣告是非常低劣的,是對用戶明顯的愚弄,不要挑戰您的用戶的智商,尤其當很多人都上過當並怒不可遏的時候。

剝離了 Javascript, CSS 等支持檔,您的網頁仍然能準確的顯示

在某些情況下,用戶可能禁用 Javascript,CSS 檔可能丟失,這時您的網站頁面仍能正常顯示。網頁設計的一個基本原則是,首先不使用任何 CSS 裝飾將內容正確顯示,然後套用 CSS 將內容修飾。另外,Javascript 不應該用在導航等關鍵場合,一旦 Javascript 被禁用,用戶可能導航都使用不了。






 上頁: 內容爲王完美企業網站的101項指標下頁: 設計 
  發送給朋友| 打印友好
7 x 12 小時服務熱線
0532 - 83669660
微信: comsharp
QQ: 13885509
QQ: 592748664
Skype: comsharp