提高網站設計可用性(有效性)的10條原則

文章目錄

• 網頁設計有效性原則
• 使用者是怎麼思考的？
• 1.別讓使用者思考
• 2. 別浪費使用者的耐心
• 3. 抓住使用者的注意
• 4. 盡量使特徵明顯呈現
• 5. 有效書寫
• 6. 盡量簡潔
• 7. 別怕留白
• 8. 用“可視化”語言有效交流
• 9. 規範是我們的朋友
• 10. 早些測試，常常測試。
• 參考文獻

決定一個網站成敗命運的，不是視覺設計，而是設計的可用性和有效性。訪問網頁的使用者們握著滑鼠，決定一切，“以使用者為中心”已然是成功網站的標準設計方向。總之，使用者不用的功能，就不該存在。

　　我們並不打算重複探討操作細節（比如：“搜尋工具列”應當怎麼放置），相反，我們的目光將集中在網站有效設計的核心原則、啟發學習法方法和入門上。這些如果能夠使用得當，可以催產出更豐富的設計作品，且使呈現的資訊更容易被擷取。

網頁設計有效性原則

　　為了能夠合理利用這些原則，我們首先需要理解使用者是怎樣與網頁互動活動的，是怎麼思考的，行為的基本模式又是怎樣的。

使用者是怎麼思考的？

　　通俗地講，使用者在互連網上的行為習慣與日常商店中的顧客們並無二樣。來訪者們掃視每個新頁面，瀏覽其中的一些文本，點擊他們最感興趣的連結，或者隱約覺得能帶他們找到他們想要內容的連結。事實上，頁面的絕大部分，他們根本不看。

　　許多使用者找尋感興趣（或者他們覺得有用）且可以點擊的資訊，只要一些看起來符合期望的目標出現，使用者就會去點擊。如果新頁面沒有滿足使用者的期望，使用者將點擊“後退”，繼續搜尋。

• 使用者看重品質和信譽。如果一個網站向使用者提供了高品質的內容，使用者就演繹忍受廣告和糟糕的設計。這就是為何有些網站設計平平，但提供了高品質內容，就年複一年擁有著驕人的流量。內容重於形式。
• 使用者不是閱讀，而是瀏覽。使用者分析一個網頁的時候，尋找一些重要的節點或者錨點，目的是希望這些連結能夠指引他們到期望的內容。

  
  使用者不是閱讀，而是掃視瀏覽。主要“高亮”地區在頁面內容的中間斷開了。這是典型的掃視瀏覽模式。

   

• 互連網使用者是無耐心且必須立即被滿足的。非常簡單的原則：如果一個網站沒有達到使用者的期望，設計師的工作就失敗了，公司也會有經濟損失。認知負荷越高、導航越不直觀，使用者越傾向於離開這個網站，尋找它的替代品。　　
  
• 使用者不做最優的抉擇。使用者不會尋找最便捷的方法找到他們需要的資訊。他們也不是線性瀏覽一個網頁，按順序從一個網站跳轉到另一個網站。相反，使用者是很容易滿足的，他們通常選擇第一個讓他們滿意的選項。只要他們找到一個他們覺得能指向期望目標的連結，他們通常會立即點擊。最優的抉擇是有難度的，需要花費很多時間。滿意即可非常高效。[ 視頻 ]

  
  兩個圖片都顯示：網頁閱讀模式是非線性。右下方的路徑圖顯示了使用者瀏覽一個網頁的視線軌跡。

• 使用者遵從他們的直覺。在通常的情況下，使用者雜亂無章地掃視而非閱讀設計師們呈現的資訊。根據Steve Krug的研究，最根本的原因是：使用者不關心。“如果我們發現一些東西奏效，我們就會被吸引。這些東西是怎麼運作的對我們來說不重要，我們只要能夠使用它們就足夠了。如果你的受眾喜歡大的公告欄，就要做的就是設計一個更大的，公告欄。” 
• 使用者希望有可控感。使用者想控制他們自己的瀏覽行為本身，且依賴網站呈現的連續的內容。例如，他們不想一個新視窗出乎意料地彈出，他們希望用[上一頁] 按鈕返回剛剛的頁面；因此，從不在一個新的瀏覽視窗中開啟超連結是一個好的行為。

1.別讓使用者思考

　　根據Krug的可用性第一原則，網頁應當清晰且不言自明。當你建立一個網站的時候，你的工作就是避免問題——那些需要使用者反覆謹慎考慮前因後果才能做出決定的選擇。

　　如果網站的導航和結構不是直觀的，產生的問題就會數量大增，且使得使用者很難理解系統是如何工作的，怎樣才能從A點跳轉到B點。一個清晰的架構，中等強度溫和的視覺引導，易於識別的連結，可以協助使用者找到實現目標的途徑。

　　讓我們來看一個案例。Beyondis.co.uk 宣稱自己是“超越欄目，超越產品，超越分布”的。這是何含義呢？自從發現使用者傾向於“F”模式的網頁瀏覽習慣，以上提到“欄目、產品、分布”是使用者瀏覽網頁時，首先必見的三元素。

　　雖然設計本身非常簡單且直觀，但使用者仍然需要去找尋才能明白這個網頁是做什麼的。這就是所謂的不必要的問題。設計師職責是要讓問題降到0。具有視覺效果的解釋已經放在右邊。只要交換左右模組的位置，可用性就會增加。

　　ExpressionEngine 使用了與Beyondi非常相似的結構，但避免了不必要的問題。更進一步的是，宣傳性的口號起到了效果，使用者們會選擇嘗試服務，下載免費試用本。

　　通過減少認知負荷，你可以使訪客更容易擷取系統背後的思想。只要你做到了這一點，你就可以理解為何這個系統是有用的，而使用者又是怎樣從中獲益的。如果人們在你的網頁上迷路的話，他們是不會使用你的網站的。

2. 別浪費使用者的耐心

　　在任何一個你想向使用者提供服務或者使用工具的項目工程了，盡量使你的門檻降低，對使用者的要求減少。一項服務需求使用者付出的越少，越有可能被一個隨機進入的訪者真正嘗試。如果不用填那些他們以後都不會再次用到的長長的網頁表格，首次來訪的使用者都會願意嘗試服務。請讓使用者自由瀏覽網頁，讓他們不用交換私人資訊就能嘗試你的服務。強迫使用者填寫電子郵箱地址來測試使用者特徵是不合理的。

　　正如37Signals team的開發人員Ryan Singe所言，使用者們如果在看到產品之後被要求留下電子郵箱地址的話，可能是願意的，因此他們對於留下電郵的回報是有想法的。

　　Stikkit是一個方便使用的極佳例子，它清晰易懂，且幾乎不向訪客索取任何東西。這也是你在你的網站應當使你的使用者體驗到的。

　　很明顯，Mite就索取很多。但是整個註冊表可以在30秒之內完成——因為網頁是橫向的，使用者不需要滾動頁面。

　　如果要理想化地去除所有的障礙，首先就是不需要貢獻些什麼或者填寫註冊。僅僅一個使用者註冊表本身就足以阻礙使用者在網站的隨意瀏覽行為，且會對網站瀏覽產生很大不利影響。

3. 抓住使用者的注意

　　因為網站都是通常既提供靜態內容又提供動態內容，一些使用者介面就會比另一些更加吸引人。很明顯，映像比文本更吸引眼球——就好像加粗的句子比未加粗的更容易引起注意。

　　人類的眼睛是一個高度非線性運作的裝置，網頁使用者能夠直覺地識別邊界、模式和運動。這是為什麼視頻廣告特別容易引起反感，但是從市場營銷的角度來說，他們的確完美地吸引了使用者的注意。

　　Humanized.com很好地利用了焦點原理。這個頁面上直接呈現給使用者的視覺元素只有一個“free”，它非常地吸引注意力，當仍然非常簡潔且資訊傳遞單純。細小的線索給使用者提供了充分地資訊去找到“free”的產品。

　　使用中等強度的視覺元素來將使用者的注意力吸引到網頁的特定地區，能夠使你網站的訪客不假思索地從A點輕鬆到達B點，忽略背後可能存在的邏輯關係。訪客遇到的問題越少，就越會具有良好的方向感，且會更加信任這個網站呈現的公司。換言之：對於這個螢幕呈現的內容需要琢磨的越少，可用性的首要目標——使用者體驗，就會越好。

4. 盡量使特徵明顯呈現

　　當代網頁設計總是嘲笑用鮮明視覺效果的大按鈕指示使用者：第一步——第二步——第三步……但是從設計的角度來說，這些元素事實上並非化石。相反的，這些導航是極其有效，因為他們能夠以一種非常簡單和友好地方式帶領網頁的瀏覽者在網站內容間穿梭。

　　Dibusoft.com將視覺的宜人性和清晰的網站結構相結合。這個網張有9個主要的導航選擇，都放置在一眼能夠看見的位置上。儘管，這些導航的顏色也許有些太淺了。

　　讓使用者看清楚功能的合理性是成功使用者介面的基準。這個是否達到了，實際上並不重要，重要的是內容是否被很好地理解了，而使用者是否覺得他們與這個系統的互動非常舒服。

5. 有效書寫

　　由於網站與列印出版史不一樣，它需要與使用者喜歡的書寫方式相匹配，且與瀏覽習慣相契合。鼓吹浮誇的文字將不會被閱讀。大段沒有映像、標粗或者斜體關鍵字的文本將被忽略。誇張的語言將被忽略。

　　說正經的。避免太過於高校或者自作聰明的名字，市場導向的名字，公司名，或者不被樹枝的技術名詞。例如，如果你描述了一種服務，需要使用者註冊一個賬戶，“註冊”比“就從這開始吧！”要好，而後者依然好過“探尋我們打服務”。

　　Eleven2.com直擊要害。沒有華麗的語辭，沒有誇張的陳述。取而代之的是一個價格：這就是使用者來此需要的。

有效書寫的最佳化解決方案

• 使用簡短的語句（直擊要害，越快越好）
• 使用鋪陳的方式（將內容分類，使用多層標題，用視覺線索和樹狀圖）
• 使用平白直觀的語言（一個宣傳口號不用聽上去像廣告；給使用者一些理性和客觀的理由，讓他們駐足在你的網站，享用你的服務）

6. 盡量簡潔

　　“簡潔”是網站設計的首要原則。使用者們很少駐足一個網站是因為喜歡它的設計，通常情況下他們是在找尋他們需要的資訊，當然設計為他們提供了尋找協助。盡量簡潔，而不是複雜。

　　Crcbus為網頁訪客提供了一個整潔簡單的設計。也許因為它是意大利語的，你不能明白這個網站是幹嘛的，但是，可以可以清晰地識別出導航，標題，內容地區和腳註。注意，表徵圖都可以清晰地傳遞資訊。只要將滑鼠懸浮在表徵圖上，更多的資訊就自動呈現出來。

　　從使用者的角度出發，好網頁應當是一個純文字的，沒有廣告的，新加內容與使用者尋找目標密切相關的。這也是一個方便列印的網頁帶來使用者良好體驗的原因之一

　　Finch清晰地呈現了網站資訊，讓使用者在沒有無關內容幹擾的情況下，做出進一步瀏覽的選擇。

7. 別怕留白

　　事實上，在網頁上留出空白地區的好處怎麼估計都不過分。它不僅使網頁訪客的認知負荷減少，而且更容易擷取網頁所呈現的資訊。新使用者瀏覽網頁時要做的第一件事情，通常是掃視全頁，將內容地區在心理上劃分成合適的組塊，然後再對資訊進行加工。

　　複雜的結構不易於閱讀，掃視，分析和使用。如果有兩種選擇，一是用明顯的豎線將兩個地區隔開，另一個是使用一些空白達到這種效果，通常比較好的選擇是後者，即留出空白。分層減少頁面複雜感（Simon法則）：視覺上的層次感覺越好，你網頁上的內容資訊就越容易被擷取。

　　空白地區是很好的。Cameron.io用空白地區作為設計的主打元素。這樣就使得主要資訊被層次鮮明地突出了。

8. 用“可視化”語言有效交流

　　Aaron Marcus在“有效視覺表達”一文中，曾經提及過三個基本原則，其中一個就“視覺語言”，即使用者在螢幕上所看到的內容。

• 組織：為使用者提供清晰穩定的概念結構。一致性，頁面配置，模組關係和頁面導航是組織中的重要概念。同樣的表達方式和規則適用於所有元素。
• 經濟化：盡量少地使用視覺元素。簡約、清晰、區別性和重點突出，這四個要點需要被權衡。簡約的含義是：只有表達需要的重要元素才可以被呈現。清晰則指的是：所有的組件都應當與它們傳遞的意義相吻合，不要引起歧義或者表達含糊。區別性是非常重要的，它要求所有元素都應當是獨一無二的。重點突出則是指：關鍵的元素要能夠被認知輕易捕獲。
• 表達：使用使用者能力能夠接受的表達方式。為了使得表達順暢，使用者介面必須在可讀性，易讀性，結構，象徵性，許多的觀點，顏色和材質效果之間來找到一種平衡。在一個頁面裡最多隻能用三種字型,最多隻能用3種字型大小——文本每行最多呈現18個字或者50-80個字元。

9. 規範是我們的朋友

　　使用傳統的元素設計出的網站並非索然無趣。事實上，傳統規範非常有用，因為他們減少了學習的周期且節省了去收集有效性的精力。例如，如果所有網站對於RSS源都啟用不同的視覺特徵，這將是可用性的一個夢魘。這與我們習慣於對資料規範整理，或者對於商場的貨架規律擺放，並無區別。

　　如果你遵從規範，你將獲得使用者的信心，信賴，信任，且證明你的可靠。遵從使用者的希望——理解他們對於一個網站導航、文字結構、搜尋欄位置的期望，等等。（參考Nielsen： Usability Alertbox）

BabelFish in use: Amazon.com in Russian.

　　在可用性測試方面一個典型的例子是：將網頁翻譯成日語（假設你的網站使用者不懂日語，例如，是使用Babelfish的），然後請你的可用性測試被試在異種語言的網頁中尋找一些內容。如果規範被良好的遵從，那麼使用者是可以找到一些不適特別特殊的目標內容的，儘管他們對於這種語言一竅不通。

　　Steve Krug建議僅僅在你確認自己有一個更好的想法的時候再去創新，但是如果沒有的話，好好遵守現有規範。

10. 早些測試，常常測試。

　　TETO原則可被應用於任何網頁設計，因為對於現有布局的重要的問題和細節，可用性測試總是能提供關鍵的洞見。

　　測試不要做的太遲，太少，或是為了不合適的理由而做。“不為了不合適的理由兒測試”的意思是，許多設計方面的決策是為著當下的，你不能普適性地宣布某些布局方式就一定優於其它，因為你需要從一個特殊的角度去權衡（考慮需求，投資者的利益，預算，等等）

一些要點需要牢記於心:

• 根據Steve Krug的研究，測試一個使用者要比一個都不測好一倍，且在項目啟動之初測試一個使用者要比項目告罄的時候測試五十個要好得多。根據Boehm的法則一，錯誤在需求和設計活動中是非常常見的，而越遲被發現，代價就越昂貴。
• 測試是一個迭代的過程。這意味著你需要設計些東西，然後接著就測試它，修正它，然後再接著測試。也許第一輪不能發現一些問題，因為這些問題可能被其它問題所覆蓋，使用者們在其它問題上就已經被絆住了。
• 可用性測試總是帶來有用的結果。無論是被指出現有網站存在的問題或者是沒有觸犯某些主流的設計錯誤，都會使您對於自己的項目做出一個有意義的審視。
• 根據Weinberg’的法則，網站的代碼開發人員不適合做為測試人員。這個原則同樣適用於設計師。因為你對一個網站設計了相當長的時間，你已經不能夠從一個全新的角度去審視它。你知道它是如何搭建的、如何工作的——你比獨立的測試人員和網站訪客們“知道的太多”。

　　基準原則：如果你想做出一個極好的網站，那一定得測試。

參考文獻

• Designing Effective User Interfaces by Suzanne Martin
• Summary on Web Design
• UID presentation (Flash)
• Research-Based Web Design & Usability Guidelines
• “The psychology of computer programming” by Gerald Weinberg
• “Designing Web Usability” by Jakob Nielsen [JN / DWU]
• “Prioritizing Web Usability” by Jakob Nielsen
• “Don’t Make Me Think” by Steve Krug
• “Usability for the Web: Designing Web Sites that Work” by Tom Brinck, Darren Gergle, Scott Wood
• A Summary of Principles for User-Interface Design
  

英文原文:10 Principles Of Effective Web Design

中文原載:Xiaoxiao’s Weblog                 翻譯:熊貓