網站可用性評析

網站可用性評析(V2.1a)
By 2003/9/23 Fred Wang (fredwang.blogspot.com)

本內文係根據某科技公司網站進行的可用性評析。
(本文已刪除附圖)
網站建立與網頁製作, 應考慮主要使用者的環境, 習慣與禁忌等, 其次應該多參考業界網站, 以了解相關專業網站設計模式, 不要過度偏離多數人的操作習慣, 將特色建立於產品本身, 網站藉以突顯產品的優越性及差異性, 達到行銷的目的, 或提供另一種服務的管道

1. 首頁及整體問題
1.1 網址用port 8080 (http://www.eXXXXX.com.tw:8080/) , 非標準port 80, 有些公司security policy限定僅可瀏覽port 80

1.2 字型除了圖形字外採用Time New Roman字比較不好看, 建議改用Arial字比較整齊好看
i. This is Arial. 字型許多的圓滑整齊 (參考下面Intel.com)
ii. This is Time New Roman. 字型許多的細角,感覺較為尖銳

1.3 首頁圖片高度建議減小, 讓News, Events可以在不用捲動畫面的狀況就可以看到, 可以用Javascript

來判斷screen.width and screen.height決定使用者的解析度來調整顯示的高度, 1024 x 760 可用區域約為 1006 x 605 , 800 x 600可用區域約為782 x 440, 600 x 480可用區域約為 620 x 310

1.4 若無法使用上面的方法調整, 請用800x600為標準

1.5 中英夾雜, 首頁的News and Events及內頁的Contact Us-->Employee為中文, 但其他部分為英文, 應該建立一組英文版網頁及一組中文版網頁, 在首頁中選擇要進入Chinese or English, 採此種設計, 則首頁不應包含主選項及News等, 應改在中文或英文版的第一頁再顯示

1.6 如果無法如上面建議, 則請以英文為主, 以中文為輔, 中文文字段註明(Chinese), 中文網頁得連結也註明(Chinese), 以提升網站的可用程度

1.7 計數器較少使用在高科技網站, 建議取消, 若要統計使用人數應該利用Server log進行後端的統計, 而不必顯示在首頁上

1.8 增加tag: META HTTP-EQUIV=”keyword” CONTENT=”…., ….”定義文內的關鍵字, 以利搜尋引擎檢索, 這將利於此網站在搜尋引擎上的排名

2. 內頁
2.1 Logo通常應該可以點選, 點選後應該回到首頁

2.2 在Logo右方或下方加一段副標說明網站或公司的性質, 需簡短扼要,e.g., eBay “the world’s online marketplace”

2.3 若上方列採綠色為連結字, 則左方及文內連結建議也改成綠色系列, 色彩較有整體感, 可用墨綠色, 橄欖綠, 深綠等綠色區分不同區域的連結

2.4 文內的分區為粗實線, 過於強硬, 好像上下不相關的感覺, 建議採灰點虛線或捨棄分隔線不用, 僅留下右方的Top感覺較好

2.7 應該統一主標題, 副標題, 次標題, 或次次標題及內文字體的大小及顏色, 例如Company Overview副標題與主標題相同為粗黑字, 而Quality and Reliability的副標題卻為綠色
. 建議採用Cascade Style Sheet的external style sheet技巧, 將特定排版自型及顏色整理成classes,

儲存在外部的CSS檔, 讓這些styles可以在所有的網頁內再用, ex:
.title1 { font-size=12pt; font-family: Arial; font-weight=bold; … }
.title2 { font-size=10pt; font-family: Arial; font-weight=bold;… }
.content { font-size=10pt; font-family: Arial; font-weight=normal;… }

2.8 內文字(非標題字)慣用英文8pt,中文9pt

3. Company Overview
3.1 橘色次標題太淺, 建議改用深色, 彩度及亮度低的顏色

4. Quality and Reliability
4.1 表格做的不好看, 應該要用細黑線

5. Employee Profile
5.1 統計圖應該經過美工, 若沒有美工人員可以用簡單的繪圖軟體如Paint Shop Pro(Freeware)先進行柔邊, 再放上網站

6. Latest News
6.1 有Archived News 嗎? 如果沒有就直接用”News”取代”Latest news”, 若有Archived News則應加上”More…” 連結

6.2 搶攻140億美元MCU商機  XX公司XXXX XX創新問世 為何連結到首頁?應該連結至詳細的新聞內文

6.3 CHARTERED, eXXXXX OFFER PROGRAMMABLE MEMORY SOLUTION, COST-EFFECTIVE OPTION FOR CONVERGENCE-ERA ELECTRONICS 全部大寫的字, 難以閱讀, 應該避免

7. Product Overview
7.1 圖中為何只有PC有圖框? 應該不要圖框

7.2 eM_________ Product Overview 主標題又變成橘色, 請統一標題字型顏色, 紫色已經使用在文中連結, 其他非連結的文字則不該再使用紫色, 這些文字不要再用紫色, 顏色應該用來區分標題及內文, 內文不要用許多的色彩(而且大小也要統一)重點
應該用粗體字或斜體自來強調

8. Programmer Support
8.1 字體超大,而內容很少, 建議整理成表格一頁就可以顯示, 注意字體要與其他內文相同

9. Contact Us
9.1 內容字體太小了, 請統一內文字型
9.2 建築物圖片請用tag: image border=1 src=…顯示邊框

10. 缺乏使用者慣用的Search功能, 藉以快速的搜尋本網站的內容
11. 建議增加Sitemap功能, 增加導覽便利性

本網站的優點:
1. 導覽列明確清楚, 提供Breadcrumb讓操作者清楚知道瀏覽頁的位置
2. 內容分類明確
3. 操作介面單純
4. 內頁使用圖像少, 瀏覽快速

參考資料
1. Tomas A. Powell, “Web Design設計實務—徹底研究”
2. Jakob Nielsen, Marie Tahir, “Homepage完全解構—50個知名網站設計詳析”