網頁設計原則之相關文獻

本研究主要想要了解美術教師在網路尋找教學資源的經驗模式，在文獻探討中搜尋與網頁 設計及使用性相關的設計原則，以此作為後續分析的背景基礎。

Nielsen 在 1999 年提出十個好的網站設計特點(Ten Good Deeds in Web Design)，並強調適用 於所有的網站。(Nielsen，1999)

(1) 在每個網頁標籤上安置你的名字和標識，並且使標誌能夠直接與首頁連結，但並不包括首 頁上的標誌。

(2) 如果網站超過 100 個頁面就要提供搜尋引擎。

(3) 寫簡單的標題和頁面大標題，這樣可以清楚的解釋頁面所關於的資訊。而且被用於搜索引 擎結果目錄上時也會讓人能夠容易了解。

(4) 網頁架構使搜尋閱覽變得容易，並且幫助使用者在大量的資訊中容易找尋，例如，使用歸 類和小標題把一個長的目錄轉化成為幾個更小的單位。

(5) 不要將全部的內容放置在同一個頁面，使得頁面過長，應該將文章分段放置在次頁面並在 主頁面(同一個主題)作連結，這可以避免使用者花太多時間在閱讀不相關的內容上。

(6) 使用圖片，但是避免使用過多的照片膨脹網頁頁面。

(7) 使用小圖示作為連結，使用者可以點進去看更大更詳細的圖片。

(8) 利用超連結的名稱，可以讓使用者敲擊進次頁面時，預先知道內容。

(9) 在重要的頁面中，讓沒有使用經驗或是殘障的使用者也可以輕易的上手。

(10) 做與其他的每人相同(Do the same as everybody else)︰如果大多數大型的網站以相同的 模式製作網頁，我們可以學習他們的優點，不要背道而馳。

Nielsen於2004年再提出十個最容易在網頁設計發生的錯誤 (Top Ten Mistakes in Web

Design)，提出使用者對於網站介面的使用，會遇到哪些困難，並將這些經驗分析歸納成為準則，

提供日後網頁設計師的參考依據(Nielsen，2004)，詳細說明如下：

(1)不好的搜尋系統(Bad Search)中，其研究認為不好的的搜尋引擎，包括過度的文字降低搜索 引擎的可用性，這樣的搜索引擎對於年長者尤其困難。當搜尋資料的過程失敗時，搜尋引擎 是使用者的救生索，簡單的搜尋通常能有最好的結果。

(2)線上閱讀PDF檔案(PDF Files for Online Reading)中，提到使用者不喜歡在瀏覽時開啟一個 PDF文件，因為它中斷他們的使用流程。PDF的編排通常被控制在一張紙內，但這很少與使 用者的瀏覽器視窗的尺寸相合。閱讀時要不斷的從上捲下，造成閱讀的困難。

(3)連結過的超連結不會變色(Not Changing the Color of Visited Links)，在此提出連結過的選項 變色可以幫助使用者了解自己去過哪些頁面，對使用連結是有幫助的，使用者可以知道已經 點選過哪些地方，而避免重複點閱。

(4)非掃描的文字(Non-Scannable Text)，提出閱讀一連串大量的文字令人感到痛苦，可以使用 一些好的訣竅，例如章節的標題(subheads)、目錄(bulleted lists)、突顯關鍵字(highlighted keywords)、簡短的段落(short paragraphs)、倒轉的金字塔結構(the inverted pyramid)、簡單的書 寫風格(a simple writing style)、不用過度裝飾花俏的語言(de-fluffed language devoid of

marketese) 。

(5)固定的文字尺寸(Fixed Font Size)，是指一般的網站不給使用者選擇字體大小的權利，過小 的文字的閱讀對40歲以上的使用者是很吃力的。

(6)網頁標題在搜尋引擎中不易被查覺(Page Titles With Low Search Engine Visibility)，提出網頁 搜尋是使用者發現網站的重要管道，搜尋網頁系統是透過HTML作關鍵字定位，網頁標題內 含在HTML中並被當作關鍵字來定位，所以可以利用網頁標題吸引新的閱覽者，每一頁都有 屬於自己的網頁標題，可以增加被搜尋的機會，如果你的全部頁標題都是相同的話，將會降 低使用者的可用性。

(7)每個東西看起來都像廣告(Anything That Looks Like an Advertisement)，是說明使用者已經 學習忽略會阻止他們瀏覽網頁的廣告，所以設計網頁時避免設計的像廣告一樣，也避免使用 彈跳式視窗。

(8)違反設計常規(Violating Design Conventions)，其認為一致性是最強有力的可用性原則之 一，當事情總是表現相同時，使用者不必擔心即將會發生什麼事，如果網站的呈現方式與其 他網站不相同，這樣會造成使用上的困難，當使用者不願花太多時間在網站上，他們便會離 開。

(9)開啟新網頁視窗(Opening New Browser Windows)，是指不斷的開啟新視窗會造成使用者的 困擾，使用者厭惡螢幕上占滿瀏覽視窗。

(10)不回答使用者問題( Not Answering Users' Questions)，在不回答使用者的問題中的範例裡 面，最差的就是沒有給產品或服務的價錢，因為價錢是使用者主要評斷物品和服務的依據。

Jakob Nielsen、Marie Tahir 於 2002 年針對五十個知名公司網站首頁作剖析，從中吸取網頁 設計成功之精隨，並給予每個網頁評論與改進方法，其針對首頁設計提出113 個準則(homepage guidelines)，其中許多要領適用於一般的網頁設計，他們提供這些準則作為首頁設計的檢查表，

提供設計者使用。準則分為幾個大標題：準確傳達網站設計的意圖、公司資訊的傳達、內文的 書寫、經由範例來說明內文、檔案資料庫與過期內文搜尋、連結、導覽、搜尋、工具與工作捷 徑、圖像與動畫、圖形設計、使用者介面工具集、視窗標題、網址、頭條提要與新聞稿、彈出 視窗與臨時頁面、廣告、歡迎詞、技術問題與緊急事件處理、讚美、網頁重新載入與重新整理、

既有客戶服務、收集顧客資料、組成社群、日期和時間、股票報價與顯示，本研究整理適合一 般性網站的準則如下，(以下提及之”公司”也意指個人或單位組織)：(Nielsen & Tahir, 2002)

1. 準確傳達網站設計的意圖( Communicating the site’s purpose )

在首頁中必須清楚的傳達網站的意圖，例如：

(1) 清楚而適當的在網頁明顯的版面位置呈現公司名稱與標誌。

(2) 涵蓋一段簡單明確的副標來說明網站或公司性質。

(3) 突顯該網站對使用者而言有哪些服務上的價值，以及相較於競爭同業的優越性為何。

(4) 適度的強調突顯高優先的工作項目，以提供使用者在網頁上明確的起始方向。

(5) 清楚的界定出網站上的官方首頁。

(6) 清楚的設計出與其他附屬頁面有所區隔的網站首頁(仍舊保持網站整體風格的一致 性) 。

2. (公司)資訊的傳達( Communicating information about your company )

(1) 呈現出一致的風貌，因為網站不僅僅只是網站，更是公司對外的其中一個窗口。

(2) 將”Contact Us(聯絡我們)”的連結至於首頁中，並且將它連結到有關公司所有聯絡訊息 網頁。

(3) 假如您提供”建議與回饋”機制，需特別說明這些訊息之目的，以及這些訊息是否會由克 服人員或網站管理者所閱讀。

3. 內文的書寫( Content writing )

(1) 使用會引起消費者(使用者)注意的語言，段落標示是根據消費者的需求而非公司。

(2) 避免重複的內文。

(3) 為了讓使用者易於瞭解您的語意，別使用過於艱澀的成語或行銷術語。

(4) 注意大小寫及風格的一致性 (5) 避免只有一個項目的分類選項存在

(6) 讓長串單字或語言排在同一列，避免換行的狀況的發生，以減少瀏覽時的困擾與誤解。

4. 經由範例來說明內文( Revealing content through examples ) (1) 採用範例來說明網站內容，會比僅用文字敘述效果更好。

(2) 在重點範例旁，提供一個延伸分類的連結。

5. 檔案資料庫與過期內文搜尋( Archives and Accessing Past Content )

讓舊有的資訊訊息，更容易被瀏覽者查詢獲取。舉例來說，將過去兩星期或一個月的資料 加以整理編排，提供一個粗略清單，放入檔案資料庫。

6. 連結( Links )

(1) 突顯連結的差異性並使人容易瀏覽。

(2) 別使用一般性稱呼作為連結

(3) 採用顏色區別，以顯示出已點選和未點選的連結狀態

(4) 如果連結後是指向另一個網站的網頁或其他應用程式，例如 PDF 檔或開啟聲音、影像 程式，就必須在連結前清楚告知。

7. 導覽( Navigation )

首頁目的主要是引導瀏覽者至個網站，因此如何讓瀏覽者輕易找到瀏覽區，並能瞭解選項 之間的差異以及將會連結的內容是相當重要的，千萬不要讓瀏覽者在點選之後才知道選項內 容。導覽區也應該要能揭示網站的重點所在，如此瀏覽者只要看到最上層的分類辦可以對網站 有概略的認識。

8. 搜尋( Search )

搜尋是首頁重要的功能之一，成功的搜尋功能必須讓使用者易於發現且容易使用。首頁的 搜尋功能必須視明確簡單、顯而易見、欄位夠寬和易於操作。最好的搜尋工具當然是取決於搜 尋的功能。

9. 圖像與動畫( Graphics and Animation )

圖像能提升首頁的品質也可能造成凌亂或是傳輸速度的降低，因此對於圖像必須謹慎編排 與應用。同樣地，動畫可以提升線上內容的可看性。可是卻比較適合複雜的內部說明，而不是 一開始的首頁簡述。例如：圖像可用來加強內文說明、不要將網頁上重要的項目製成動畫效果，

譬如商標、標語或主要標題，瀏覽者容易認為太像動畫而忽略它們。

10. 視窗標題( Windows Titles )

每個首頁都需要一個簡單易懂的視窗標題(由 HTML 文件中的 TITLE 標籤所決定)。雖然大 多數的瀏覽者在瀏覽網頁時不會注意到視窗標題，但是當在使用我的最愛以及網站搜尋時他卻 扮演重要的角色，為了方便瀏覽，網站得視窗標題必須儘可能的使用最少的字傳達最多的資訊。

例如視窗標題應該包括對此網站的簡述。

11. 頭條提要與新聞稿( News and Press releases )

好的標題與內文不僅要能吸引瀏覽者的注意，還必須要能夠傳達出足夠的內文訊息。這樣 才能協助使用者排除不感興趣的文章，省去不必要的點選動作。例如標題能點單扼要的說明內 文，並且儘可能的用最少的字傳達最多的資訊。

12. 彈出視窗與臨時頁面( Popup Windows and Staging Page )

避免使用彈出視窗，因為會妨礙使用者讀取網站主要內容，也容易令使用者感到厭煩。

13. 廣告( Advertising )

使用者對於網站上的廣告變得越來越有概念，他們已經學會如何去忽略廣告，甚至忽略看起來 像廣告或是在廣告附近的內容，所以不要把重要資訊放在廣告旁邊，避免用廣告常用的方式來 呈現網站內容。

14. 日期和時間( Dates and times )

瀏覽者需要了解首頁上的資訊是否為最新，清楚的告訴瀏覽者最後更新的時間，而不是目 前電腦的所顯示的時間。

黃朝盟、趙美慧在「.com 的策略規劃與設計」針對使用者介面設計原則有做詳細的討論，(黃 朝盟、趙美慧，2001)，如下：

1. 以使用者的行為模式為核心

為了讓網站能易學、易記、少錯誤、高效率並令使用者滿意，網站的使用者介面應該要以

為了讓網站能易學、易記、少錯誤、高效率並令使用者滿意，網站的使用者介面應該要以