Jakob Nielsen’s Homepage實用設計法則筆記

Jakob Nielsen’s Homepage實用設計法則筆記
Fred Wang (fredwang.blogspot.com)
2002/04

About Jakob Nielsen博士
Nielson Norman Group負責人
曾為Sun Microsystem傑出工程師
1995年,Nielsen有關探討網路實用性的專欄就已在http://www.useit.com/刊登
U.S. News & World Report評為全球最權威的網頁應用專家
Chicago Tribune譽為地球上最懂得如何讓網站運作的專家

Outline
準確傳達網站設計的意圖
公司資訊的傳達
內文的書寫
經由範例來說明內文
檔案資料庫與過期內文搜尋
連結
導覽
搜尋
工具與工作捷徑
圖像與動畫
圖形設計
使用者介面工具集
視窗標題
網址
頭條提要與新聞稿
彈出視窗與臨時頁面
廣告
歡迎詞
技術問題與緊急事件的處理
讚美
網頁重新載入與重新整理
既有客戶服務
收集客戶資料
組成社群
日期和時間
股票報價與數量顯示

準確傳達網站設計的意圖
若進入一家商店卻無法辨識賣什麼商品或服務, 就很難吸引顧客上門
1. 清楚而適當的在網頁明顯的版面位置呈現公司名稱與標誌
通常在左上方,不需太大,但應比周遭的物件大
2. 涵蓋一段簡單明確的副標來說明網站或公司的性質
需簡短扼要,e.g., eBay the world’s online marketplace,含糊不清或隱喻性的副標只會讓瀏覽者混淆,(思考：MXIC “Integrated Solution Provider”夠清楚嗎?）
3. 凸顯該網站對使用者而言有哪些服務上的價值,以及相較於競爭同業的優越性為何
4. 適度的強調凸顯高優先的工作項目,以提供使用者在網頁上明確的起始方向
精簡所強調的重點項目
5. 清楚界定出網站上的官方首頁
6. 讓公司的主網頁出現連結其他公司網站的功能
用Website頁連結至其他公司網站,此種連結不要出現在子網頁, 以免誤會成同公司的一部份
7. 清楚的設計出與其他附屬頁面有所區隔的首頁
用些微的差異設計讓瀏覽者明確的知道回到了首頁
仍須保持一致的整體風格

公司資訊的傳達
8. 整合企業資訊如About Us, Investor Relations, Press Room, Employment等於明顯的區域
沒有興趣的可以避開這段
9. 確定有About Us 讓使用者粗略瞭解整個公司, 並可在連結至公司產品, 服務, 公司評價, 與管理團隊等資訊( 建議用About corp.name)
10. 若要發佈公司相關新聞報導請在首頁加上Press Room or News Room
11. 呈現網站與公司一致的風貌
應清楚區分網站與其他通路提供的服務項目
12. 將Contact Us的連結放在首頁,連至提供公司所有聯絡訊息的網頁
若要鼓勵瀏覽者直接與公司聯絡, 請直接將公司地址, 電話, 電子信箱等放在首頁
13. 若提供建議與回饋機制, 應說明目的及這些訊息將由客服人員或網站管理者閱讀
14. 別讓公司內部資料顯示在對外的網站上
15. 若有任何收集瀏覽者資訊就要在首頁提供Privacy Policy 的連結, 如輸入eMail Address
16. 若不能清楚的顯示營利來源( 如商品, 服務或廣告) 就需說明該網站如何創造利潤

內文的書寫
多數瀏覽者只會快速掃讀內文而非仔細閱讀,因此內文需以最少的文字表達最多的資訊
17. 根據消費者需求來區分段落及項目,非賣方
E.g., IBM, Small business, Medium business 使用者不易判定屬於哪類市場區隔
18. 避免重複的內文
以重複出現強調項目的重要性, 反增加網頁擁擠度及互相干擾, 不如清楚地放置在一定的位置
19. 別用艱澀的成語或行銷術語
若需要使用者思考用語背後的含意, 需點選後才知道內容狀況, 則不易吸引使用者使用
20.注意大小寫及風格的一致性
21.若內容或項目本身已可清楚傳達訊息,就不需增加說明區域
22.避免只有一個項目的分類選項存在
23.讓長單字或成語排在同一列以減少誤解
24.需使用者填寫的項目,用肯定的語氣
E.g., 請輸入 或請選擇
25.任何縮寫或檢寫應同時列出全名
26.驚嘆號不會出現在專業的文章中,網站也應避免
27.版面中儘量減少使用全部是大寫的字
28.避免使用空格或逗點作強調: 如L O B S T E R or L.O.B.S.T.E.R.

經由範例來說明內文
29.用範例說明網站內容,效果比僅文字說明好
即時新聞直接放前五大頭條的標題, 並做超連結
產品放上真實圖片, 並做超連結
30. 每個範例應直接連結至他的詳細內容, 不要連到一個分類畫面, 透過另一次的連結才可以達到
31. 重點範例旁提供一個延伸分類的連結
如更多的產品,更多的服務 等
32. 範例連結, 應該與分類的連接有所區別

檔案資料庫與過期內文搜尋
33.讓舊資料訊息容易被瀏覽者存取
提供如Archive 連結及搜尋過期資料的頁面

連結
34.凸顯連結的差異性並使人容易瀏覽
用關鍵字來做連結字,因為瀏覽者常用前一兩個字來辨別比較不同的連結,因此應保持簡明及特別
35.別使用一般性稱呼,例如用click here作為連結字
36.不要在分類說明之後使用通俗性用語,如More..
用More Book Reviews,More News..
37.採用顏色區別以顯示已點選和未點選的連結狀態
38.連結採用有意義的命名且用加底線與藍色字體來表示
39.若連結後指向另一個網站或其他應用程式,如PDF檔或開啟聲音等,就需在連結前告知

導覽
要讓瀏覽者輕易的找到導覽區,且能區分選項的差異及連結的內容;導覽區也要能揭示網站的重點,瀏覽者只要看到最上層的分類就可以對整個網站有概略的認識
40.主導覽列應置於明顯的地方,且緊鄰主要內容
Banner blindness :瀏覽者往往會忽略banner及其上方的內容,因此橫式導覽列不要放置在此
41.類似的項目放在同一區
如購物車,帳戶資訊及客戶服務應歸在同一區
42.類似的連結不要提供多個導覽區
43.首頁上部要使用連結首頁的功能
44.導覽區的分類選項不要用捏造或個人或單位專用術語
E.g., Accenture -Commerce, Disney -Zeether
45. 若提供購物車功能請置於首頁上
46. 能讓使用者立即看出項目所屬分類時才用圖示
若圖示無法協助直觀辨識分類, 只會使網頁更加混亂

搜尋
47.首頁中提供瀏覽者輸入方塊以輸入想要搜尋的查詢詞,非只是提供到搜尋網頁的連結
48.搜尋方塊需有足夠的寬度讓瀏覽者輸入
至少可輸入25 個字元, 可達30 字元更好
49. 搜尋區內不要預設文字
置於網頁最上方, 用Go 作為開始搜尋的按鈕
50. 首頁上提供簡易搜尋, 若有進階搜尋, 附上連結即可
51. 首頁之搜尋功能預設範圍應涵蓋整個網站
52. 不要提供Search the web 功能
瀏覽者會使用自己喜愛的搜尋引擎來做

工具與工作捷徑
53.在首頁上提供瀏覽者直接執行高優先權的工作
E.g.,Travelocity “Book Your Flight New” 功能
54. 不要提供與網站功能無關的工具
James Devaney Fuel Company “The Weather Channel”
55. 不要提供一些替代瀏覽器功能的工具
如設定為預設首頁或加入個人書籤(or 我的最愛)

圖像與動畫
56.圖像加強內文的說明,而非用來裝飾首頁
放置無意義的圖像會分散對重要內容的注意力
57.若圖像無法清楚表達內容可加標示說明
E.g.,人物照片加標籤說明
58.照片及圖表剪裁成適當比例
59.避免浮水印式的圖像(有文字在背景的圖片)
60.動畫會吸引瀏覽者的目光分散對其他項目的注意,很少被放在首頁
61.不要將網頁上重要項目製成動畫,如商標,標語或主要標題
62.不要強迫瀏覽者觀看您的動畫,提供開關的選擇

圖形設計
63.過度設計的文字會降低其重要性
若文字設計的太像圖形會被誤以為是廣告而忽略它
64. 使用對比強烈的文字及背景, 字體儘量清楚
65. 避免在800x600 解析度的網頁出現水平捲動
66. 重要的網頁要素應該在不捲動視窗下呈現
67. 採動態的版面設計, 首頁才可隨螢幕解析度大小而自動調整
68. 審慎地使用商標
只有要吸引瀏覽者目光才使用其他商標

使用者介面工具集
包含下拉式選單,選項列表,及文字盒等
69.確認使用者介面工具都是可點選的
讓項目符號與文字一樣都是可點選的
70. 避免在首頁有多個文字輸入方塊, 尤其是網頁上方, 會被認為是搜尋功能
71. 謹慎使用下拉式選單
若項目太少, 還是直接列在首頁上
避免使用太長的選單, 最好是連結至另一個網頁, 在那個網頁解釋每個選項的差異, 並做分類

視窗標題
視窗標題在使用bookmark(or我的最愛),history及網站搜尋引擎時扮演重要的角色,必須容易辨識及用來搜尋
72.使用公司名稱為起始
不要用”Welcome..”or “Homepage..”也不要加冠詞
73.不需加上網域名稱,如¡§.com¡¨
74.網站上每個網頁都應該有單獨的視窗標題
75.Homepage的視窗標題應該包含對此網站的簡述
E.g., “Dell Computer - Laptop,Desktop,Workstation,Server”
76.不要超過七或八個字且少於64個字母

網址
77.商業網站首頁網址應此www.company.com（或使用www.company.com.tw)
78.地區性的網站,請使用該國家的最上層網域
79.多註冊幾個網域名稱,如不同的拼法及縮寫
80.若有多個不同網域名稱,請選擇一個正式對外公告,其他則導向這個網址

頭條提要與新聞稿
81.標題要能簡單扼要地說明內文
82.特別為首頁上的頭調提要與新聞稿撰寫並編輯摘要
83.使用可點選的標題連結到完整的內容,而不是用文章摘要來連結
若標題不可點選則在摘要最後面加”Full Story”(詳全文)的連結
84.若首頁內容都是最近一週內的消息,則不需每篇文章標明日期(除非是需常常更新的即時頭條)
詳細內文一定要註明日期,文章中避免相對性的時間描寫,如today, next week, last 4 years因為時間會不斷的變動

彈出視窗與臨時頁面
85.一進入首頁不要出現浮貼視窗(splash screen)
86.避免使用彈出視窗(Popup windows)
通常會被當成廣告而忽略
重要訊息若放在彈出視窗若被關掉, 就要再連結一次才看得到, 應該直接放在首頁重要的地方
87. 除非網站有許多語言的版本否則不要用下拉式選單讓使用者選擇他們所在的地區
可以用主要的語言為首頁, 再選擇其他語言

廣告
多數使用者已經學會如何去忽略廣告,有時也會忽略像廣告及廣告附近的內容
88.把和公司無關的廣告放在網頁周圍
重要內容及訊息不要放在這些廣告區旁或上方
89. 使外部廣告相較於首頁核心內容來得小且不引人注意
喪失客戶產生的損失可能比廣告收益大
90. 若廣告不在標準的banner 區, 請註明這是廣告
參考money.cnn.com
91. 避免以廣告常用的方式來呈現網站的內容

歡迎詞
92.不要在首頁顯示出類似”welcome”的歡迎字眼
除非用來確認網站已經辨識出瀏覽者身份

技術問題與緊急事件的處理
93.若網站或網站重要部分無法正常運作時,請在首頁清楚告知相關訊息
不要用 “稍後再試”, 應該像 “我們預計4 點後恢復正常服務” 或其他替代方案, 如”有任何需要請洽客服專線1-800-456-7890”
尚未開放服務的單元也不要只顯示”網站建構中”
94. 重要的網站內容必須事先做好應變措施, 以免遭遇緊急事故
例如事先設計一個輕量的替代版本, 當突然比平常更多的使用者進入網站時, 可以替換
此版本除了告知緊急事故, 且減少圖像, 嵌入物件之使用

讚美
95.不要放置偏愛的瀏覽器廠牌或說明網站背後使用的技術
若以技術為主設計的網站可將How We Run This Website 放在About Us 中
96. 仔細考慮是否要將得過的獎項放在網站中呈現
但不要讓這些表揚感覺過了時效, 這樣會讓人覺得您好像很久沒有獲得好評

網頁重新載入與重新整理
97.不要為了顯示最新資訊就強迫使用者自動更新(reload)首頁
如News Now 網站每五分鐘自動更新網頁, 若瀏覽者正在看某部分時, 將會被打斷, 或該內容因此消失或改變位置
強制性reload 會造成撥接瀏覽者不可預期的斷線
至於比賽得分, 股市行情等可提供小工具讓使用者決定使否要更新資料
98. 重新整理網頁時只要更新如新聞這類需即時更新的部分

既有客戶服務
99.若首頁的某部分一旦知道瀏覽者的相關資料就會顯示既有的客戶服務訊息, 但對初次使用者讓此區域呈現替代內容
歡迎詞, 若不知道瀏覽者是誰就不要顯示
100. 不要提供可修改首頁基本外觀的設定功能, 如色彩組合
尊重使用者瀏覽器的偏好, 字形大小採相對字形

收集客戶資料
101.不要直接提供一個登錄註冊於首頁中,應該告訴瀏覽者(至少有個連結)註冊後有什麼好處
老練的瀏覽者會謹防洩漏個人資訊, 他們知道如此日後可能會收到一堆主動寄來的廣告郵件
102. 詢問電子郵件地址前先解釋能得到的好處
例如提供免費電子報, 應該提供連結, 連結到一個範本網頁, 再要求輸入電子郵件地址, 並解釋他們所擁有的隱私權

組成社群
103.若有提供瀏覽者聊天室或討論區,不要只是單純提供連結,最好在首頁就列出目錄或討論主題供參考
104.商用網站上,不要提供”Guestbook”(留言版)功能

日期和時間
105.會隨時間變化的資訊才需顯示日期和時間
106.告訴瀏覽者最後更新內容的時間而不是目前電腦所顯示的時間
107.請標明時間所參考的時區
108.使用標準的縮寫如p.m.或P.M.
109.拼出月份或使用月份縮寫而非數字
用”Jan. 2, 2003”, 不要用01/02/03

股票報價與數量顯示
110.顯示升降的百分比而非僅是股價的揚升或降低
111.拼出股票縮寫的全名
112.超過無謂數以上的數字請用千位數分隔符號
113.顯示多欄數字時請將小數點對齊