|
Jakob
Nielsen 在1996年指出網頁設計常犯的十項錯誤，2000年後後知後覺的我在相關演講中曾加以摘述，之後只要有機會更是不斷重申，但在研究國內圖書館網站時，仍常看到類似的網頁設計，故而再一次詳加整理，就教諸位先進同道。
1.
頁框（frames）
當網頁切割成頁框時，不僅使用者混淆，也違背一般網頁的使用模式。什麼樣的使用模式呢？
-
Bookmark：突然之間，使用者沒有辦法bookmark現在正在看的網頁，因為bookmark所指向的通常是標題框而不是內容框，而使用者想要放到我的最愛的卻是內容框，而不是標題框。所以無論使用者在那一頁mark，下回再進來的都是同一頁，多令人氣餒啊！我心愛的那一頁在那裏？
-
URL：通常我們看到很棒的網頁內容，會把URL記下來或編輯成主題資源。可是因為有了頁框，所以UR永遠都停在標題列上，所以無法都沒辦法提供一個stable的URL與同好溝通。結果「貓就在鋼琴上昏倒了」（Hint:司迪麥的意識形態廣告，不知道，那表示您太young了）。
-
Email：好東西要與好朋友分享（麥斯威爾咖啡），捷徑的分享方式當然是email囉！按下檔案功能之「傳送」，如果我要以電子郵件傳送畫面，outlook就會問我「這個文件含有無法編輯的HTML框架，要當作附檔案或唯讀郵件來傳送嗎？如果是要與我分享的話，請選擇「附加檔案」，如果想要吊我胃口的話，請選擇「唯讀」。結果如何，要有實驗精神（自己寄給自己，不要拿我當實驗對象喔）
那我不要以電子郵件傳送畫面，太浪費網路資源了，以「電子郵件傳送連結」好了。鐵齒喔，不是告訴您URL不會變嗎？除了第一頁以外，收信人看到的和寄信人看到的是不同的網頁。
-
Print：至於列印出來的內容也不是您要的，就看您有多清醒囉！我是常印了一堆東西回家邊看電視邊sort，然後常會發現白癡的我印了一大堆標題，內容則是不可考。不知看倌是否曾有相同的經驗。
-
不相信我說的。我告訴您喔，上這個網址（http://lib.klcc.gov.tw/page/index.htm）可以找到基隆市的作家檔案喔，試試看吧！
其實我很喜歡這個網站的標題，設計得超典雅的，可惜我印出來的網頁總是無名，真是可惜啊！
2.
過度使用超新技術
不要企圖用最新的網頁技術來吸引使用者。也許您可以吸引到一些搶鮮的新顧客，但是主流的使用者更在乎的是有用的內容和您提供的優質顧客服務。採用最新、最炫的技術，有時是會讓使用者很沮喪的。想想看，如果使用者在拜訪您的網站時當機了，您想他們還會再回來嗎？除非您本身就是在賣Internet產品或服務的，否則最佳策略是等這些新技術已經累積了相當的正向經驗後，再採用。還記得當桌上出版（desktop
publishing）開始的時候，有人用20點的字編排文件；希望同樣的錯誤不要發生在網頁上。
3.
捲動的文字、跑馬燈和持續閃爍的動畫
請千萬不要設計動個不停的網頁元件。移動的影像對人類視覺的週邊視（human
peripheral vision）會產生很大的的影響。網頁不應該像紐約的時代廣場一樣，不停的刺激人的感官。請給使用者一點視覺的寧靜，讓使用者定下來好好讀您的文字！
所以，＜BLINK＞根本就不需要存在；還有遊標後面那一長串尾巴更是要不得（除非您設計的是您個人的首頁，我是不需要造訪的，否則請不要以視覺暴力殘害我不再明亮的靈魂之窗）。
4.
複雜的URLS
雖然URL這種機器語言層次的位址，根本不應該出現在使用者介面上，但是它確實存在，而且有很多使用者事實上是解讀URL來推測網站結構。使用者會這樣做其實也是很無奈的，因為很多網站並沒有提供很好的導覽輔助，使用者無法得知自己身在何處，只好抓住那唯一的一根稻草－－URL。因此，URL應該包括人可以辨讀的目錄（human-readable
directory）和檔案名稱，以反映資訊空間的特性。例如：這個名稱為Untitled
document的網頁（http://www.lib.ntu.edu.tw/catalog/union/uc.htm）是個弧兒，根本沒有導覽列，除了browser的上一頁外，沒有任何的資訊可以幫助我辨識方向，好在還有URL。
同時，使用者有時需要輸入URL，所有儘量用簡短的名稱（全部小寫，不要用特殊符號），以減少可能的打字錯誤。有關URL的管理，下回再分解。
5.
孤兒頁
使用者可能是透過搜尋引擎或超連結等方式進到網頁，而不是循著您的首頁瀏覽，所以請確定您的每一個網頁都有清楚的隸屬關係；換句話說，讓每個網頁都可以找到父母，而不要成為孤兒。為了相同的理由，每一頁都應該能連回首頁（home
page），以及資訊空間所在位置之指示。最簡便的方式就是設計一致的網頁標題和導覽列，將導覽列放在每個網頁的頂端和底端（如果網頁需要捲動卷軸的話）。
6.
長篇網頁
據Nielsen的調查，只有10%的使用者會捲動捲軸，因此，所有重要的內容和導覽選項（navigation
options）都應該放在網頁的頂端。
雖然1997年12月Nielsen所做的一項研究顯示，使用者比以前更願意捲動卷軸，但是還是儘可能將重要資訊放在網頁的第一個螢幕。因為如果第一個螢幕的資訊都不吸引我，何苦勞動玉指捲動捲軸呢！
7.
沒有導覽輔助
不要假定使用者和您一樣了解您的網站。使用者總是很難找到想要的資訊，所以使用者需要網站結構和所在位置的輔助。從資訊空間（information
space）的結構開始您的網站設計，並將這個結構清楚的向使用者溝通。提供網站地圖（site
map），讓使用者永遠知道自己在那裡和可以到哪裡去。就算最好的導覽輔助也永遠是不夠的，所以需要提供很好的檢索功能（雖然您沒有提供站內檢索，我還是可以請Google幫忙，如果有的話，使用者會更愛您的網站，但可不要輸入什麼字都找不到喔）。
8.
不標準的連結顏色
使用者未檢視過的網頁連結是藍色的，已檢視過的網頁連結是紫色或紅色。不要把這些顏色搞混了，因為這是大部份browser標準的導覽輔助。要教使用者連結的顏色所代表的意義，一致性是很重要的。所以請不要擅自修改超連結的顏色。
9.
過時的資訊
編列預算聘請一位網頁園丁做為團隊的一份子。當網站修改時您需要有個人除草和換換花圃，使網頁常保青春。但是大部份的人比較願意花時間建新的內容，而不願意維護。實際上，維護是比較便宜的網頁內容強化方法，因為很多舊網頁之間是彼此相關的，而且必須連結到新網站。當然，有些網頁到期後最好是全部移除。
10.
超長的下載時間
這點放在最後面，不是因為它最不重要，而是很多人應該都知道了。傳統人因工程的建議是：回應時間最多超過10秒，使用者就已經失去興趣了。而在網上，使用者被訓練成忍受更長的時間à15秒。
就算是新手逛的網站，也要考慮下載時間。很多B2B的顧客是在晚上從家裡上網，因為他們白天太忙沒時間上網。
這是Jakob
Nielsen 1996年所提出的網頁設計十誤，經過三年之後，網頁科技和可用性觀念的普及，情況是否有改觀呢？1999年5月16日，Nielsen的結論是，這十誤依然是應該要避免的網頁設計錯誤。
令人欣喜的是，大部份重要的網站都避免了這些錯誤。Nielsen調查了十家大型企業（General
Motors, Ford, Wal-Mart, Exxon, General Electric, IBM, Citigroup,
Boeing, AT&T，和BankAmerica）和十大熱門網站（AOC.Com,
Yahoo, MSN, Go, GeoCities, Netscape, Excite, Microsoft, Lycos, 和Angelfire）發現，平均犯錯率是16%。換句話說，大型的網站只達反網頁設計常犯錯誤中的兩項（不幸的是，小公司所設計的新網站通常犯錯率遠高於大公司）。十誤之違反情況，詳如下表。
|
設計錯誤
|
錯誤率
|
|
下載時間長
|
84%
|
|
連結顏色不標準
|
17%
|
|
長篇網頁
|
15%
|
|
捲動文字或閃爍動畫
|
12%
|
|
頁框
|
11%
|
|
孤兒頁
|
10%
|
|
超新科技
|
7%
|
|
複雜的URL
|
6%
|
|
缺少導覽輔助
|
4%
|
|
過時的資訊
|
1%
|
|
平均
|
16%
|
由上表可知，這20家公司網站最常犯的錯誤是下載時間過長，最少犯的錯誤是過時的資訊。但是Nielsen特別說明，因為這些網站都是大型網站，網頁內容相當多，只能抽樣檢視，而大部份過時資訊可能都埋在網站深層，而未被發現。
大型公司的網站比熱門網站更常犯錯，這正是為什麼這些網站成為熱門網站的原因。
l
十大企業的平均犯錯率是20%。
l
十大熱門網站的平均犯錯率是13%。
正因為這些網站很好用，才能集結這麼大的訪客流量成為熱門網站。十大企業中，是哪家企業的網站設計得最棒呢？答案是IBM（11%）。藍色巨人終究還是電腦界的巨人（雖然在台北市政府那兒的大樓前欠債不還的條子還掛著）。十大熱門網站中又是哪家的設計最棒呢？得獎的是Go(6%)；其實Yahoo、Excite、Lycos也都緊跟在後，犯錯率只有8%。
企業網站和熱門網站的最大區別是：下載時間和頁框。
l
企業網站首頁的平均下載時間是19秒，而熱門網站只消8秒鐘。
資料來源："Top
Ten Mistakes in Web Design," Jakob Nielsen"s Alertbox for
May 1996. http://www.useit.com/alertbox/9605.html
"Who Commits the 'Top Ten Mistakes' in Web Design?" Jakob
Nielsen"s Alertbox for May 16, 1999. http://www.useit.com/alertbox/990516.html
Usability Week. http://www.nngroup.com/events/uw2003/tutorial_11.html | 