靠右對齊的導航菜單減慢閱讀速度
阿恆
網頁的導航菜單 (navigation menu) 的設計有甚麼要訣?有名的網頁介面顧問 Jakob Nielsen 的研究發現,文字靠右對齊的菜單令用戶讀起來更容易,除此以外,他還有幾項有關導航菜單的設計指引,見解獨到精闢,值得我們參考。
Jakob 表示,從「眼睛追蹤」的研究知道,用戶的眼睛往往迅速地沿著菜單的左手邊向下移動,只有當最左邊的一個或兩個字詞吸引了他們的注意,他們才會閱讀菜單項目的其餘部分。
因此,我們有以下的菜單設計指引,這至少對於垂直設計的菜單是有效的:
- 菜單項目應該靠左對齊,使用戶的眼睛可以沿著一條直線移動,無須在每一個項目尋找新的起始點。
- 每一個菜單項目都由包含最多訊息的一個或兩個字詞開始。
- 避免使用相同的幾個字詞作為菜單項目的開頭,因為這樣做使它們更難被掃瞄。
把菜單項目靠右對齊可能看起來很酷,但由此產生的破爛左邊界嚴重降低閱讀的速度,用戶是藉著掃描菜單的這部份,並選擇他們屬意的選項。
(當然,靠左對齊的指引只適合由左到右閱讀的語言,相反方向閱讀的語言,應該反轉這項指引:你應該把菜單靠右對齊。在這兩種情況下,重點是使用戶從上向下掃描菜單時閱讀得更容易。)
考慮一下下面的畫面,雖然這裏用一所大學的網站做示範,但是靠右對齊的毛病在商業網站也可以見到。
注意掃描這個菜單是何等的難,矛盾的是,教育學院為在同一個畫面有另一個正確靠齊文字的菜單:掃描上面的菜單比下面的菜單快得多。
有些網站甚至會把問題進一步複雜化,他們違反了「不要使用全部大寫」的指引,全部大寫的文字使易讀性降低約 10%。在混合大小寫的情況下,字母向上和向下的凸出部分組成有變化的形狀,全部大寫卻做成「箱狀」的字型,若果你使用傳統的字型,用戶可以讀得更快。
最後,香港教育學院菜單的文字和背景顏色的對比度太低,違反了 W3C 網頁內容易讀性指引中有關文字對比度的建議,使菜單特別難以閱讀,尤其是對弱視的用戶。
菜單文字的對齊方向無可否認是一樁小事,並不屬於重新設計優先事項中高回報的項目,但搞定它十分容易──只要不要靠右對齊便行了。