網站設計的可用性原則

　　隨著網際網路競爭日益激烈，同質化的網站越來越多，但只有提供了最佳使用者體驗的那一個才會勝出。可用性是一個設計者必須要重視的原則，來自IBM的工程師張群撰文從多個方面闡述了可用性原則在具體網站設計中的細節實現和具體案例，值得網站設計者借鑑。

　　作者首先強調了可用性設計的重要性：

相互競爭的網站通常提供相似的功能，我們經常能感受到視訊網站同質化，團購網站同質化，社交網站同質化，入口網站同質化，它們之間資訊內容重複、服務專案雷同，但只有提供了最佳使用者體驗的那一個才會勝出。在網站設計、開發及釋出過程中，通常可用性專家會幫助評估網站的易用性，收集內部反饋，測試團隊進行可用性測試。最為糟糕的是網站上線階段發現介面錯誤，需要花高昂的代價修復網站介面錯誤。因此分階段設計、及早測試、經常測試是極其有必要的。

　　要實現可用性原則，作者認為要分析使用者的真正需求：未經解構的使用者需求在某種程度上來講是“偽需求”，不能真實體現需求，往往是表面上的需求，洞察使用者表象背後的真實需求是網站設計的第一步。有經驗的網站設計師往往在使用者的顯性需求描述基礎上，探究他們的真實問題是什麼，並打磨需求。

使用者上網的習慣和逛超市基本類似，大量網頁他們幾乎不看一眼，而是掃視頁面尋找感興趣的內容。但使用者願意為高質量的內容而忍受廣告和糟糕的設計。網站設計者不應對使用者的耐心抱有較高的期待，多數使用者都掃視頁面而非閱讀，靠自己的直覺摸索，如果頁面沒有達到使用者預期，使得學習成本負荷越高、直觀性越差，使用者就會很輕易的離開，尋找替代的頁面。

　　以“一致性的視覺設計”為例，作者指出，當一個網站的視覺設計整潔連貫，高度一致時，使用者很容易不費腦力去理解如何使用網站，不一致的視覺設計，有可能會讓人感覺到欺騙，當介面設計得過於跳躍和創新，使用者可能在第一眼難以理解，不得不重新學習如何使用那些他們本已經熟悉的東西。視覺一致性可以提高產品所塑造的品牌形象，一定程度上減少使用者的認知成本。

達到“一致”的介面，並非指介面元素需要“統一”，視覺上可以有很多不同的表現手段，世界上沒有兩個相同的雞蛋，為了一致，網站資訊架構很重要。具體體現在形狀、色彩、介面質感、圖示、畫風、文字描述、提示資訊呈現方式等，使得網站在不同的欄目下，設計一致，而不是不同的欄目下頁面視覺差異大，一眼看上去，不象一個爹媽生出來的。

　　對於“文字對齊”問題，作者分析了兩端對齊的問題：當行的原始長度差異過大時，行與行之間有明顯的疏密變化。而且對英文來說，如果沒有 hyphenation，往往也很難讓行間長度差異適合兩端對齊。

越來越多的瀏覽器開始實現適用於中文的兩端對齊演算法，在可以啟用 CSS hyphenation（斷字）的瀏覽器，我們可以考慮使用 text-align: justify; 來達到漂亮的兩端對齊效果，但如何才是理想效果？需要綜合考慮瀏覽器相容性，良好的斷字是美觀文字的必要條件，但正確的斷字方法是按照單詞的音節將其斷開，這樣使得使用者在閱讀時候不必讀到下一行才能拼出完整單詞，這個問題在單行文字特別長，行間距較小的時候顯得尤其重要。

　　作者指出，排版上一定要儘量兩端對齊的原則不一定適用於現代網站，左端對齊（flush left）、右端參差（ragged right）的排版越來越常見，人們的審美觀也在發生變化。如今的網際網路上，左對齊也是文字的預設設定。純英文文字行的長度錯落有致，強制右側對齊不一定是明智之選。設計師可以綜合利用hyphens; letter-spacing, text-justify等 CSS 技巧達到美觀效果。

　　固定元素保持慣例，作者列舉了幾個例子：

• 網站標題(header）往往會在網站左上方顯示。
• LOGO 通常可以點選，以回到首頁
• 退出登入一般會在網站右上方顯示
• 版權資訊總是位於最下方 footer
• 網站搜尋框經常會出現在網站右上方或中部上方
• 切換網站語言版本的功能經常出現在網站 header 右端並配有國旗顯示更直觀
• 搜尋框必需是一個框
• 註冊通常在頁面的右上角

　　作者提倡僅在必要時使用下拉選單，雖然下拉選單佔較少的螢幕空間，但其缺點也是明顯的，例如選項可見性較低，下拉選單所包含的內容項太多時將造成困擾。然而根據 Jacob Nielsen 對下拉選單的研究，他認為下拉選單並不一定要很小，“巨型”導航下拉選單效果也不錯。近年來，mega menu 成為在網頁設計中成為一種趨勢，尤其是在電子商務網站，如果運用得當，它確實能有效幫助到使用者快速獲取資訊，大的二維下拉皮膚可以對導航選項進行清晰，組織良好的導航分組，將使用者從不得不進行的滾動中解脫出來。運用是否得當成了設計的關鍵。

　　巨型選單的優勢：

• 所有選項一目瞭然
• 可通過分隔線、富文字、圖示、圖片修飾等視覺上手段更加清晰地組織選單結構

　　巨型選單的劣勢：

• 未展開前的 mega menu 不易被使用者發覺
• 大量的選單選項佔據了螢幕空間，遮住了一部分內容
• 縮小瀏覽器尺寸或在小螢幕手持裝置上不易看到全部選單內容
• Load 巨型選單速度有影響
• Accessibility 方面，fly-out 選單很容易導致可訪問性問題，程式碼書寫需要更小心謹慎

　　除此之外，作者還強調不要忘記保護性設計：

我們應該總是設想，使用者不按常理出牌，不會按您的預期使用您的網站，或是誤用。所以我們一定要有保護性設計，比如，刪除一個文件如果沒有確認提示，又沒有提供恢復功能，這將給使用者造成難以接受的後果；再如，如果使用者在輸入註冊資訊時關閉瀏覽器，在沒有詢問之前不要拋棄他們的資料；或是，當使用者請求的一個頁面不存在時，需提供一個有用的 404 頁面。