网页设计原则网站学习效果评量

陶幼慧、黃曉盈、戴佑珊、羅雅函、陳益能、李瑩貞

義守大學 資訊管理系 E-mail : ytao@isu.edu.tw

摘 要

面對著21世紀知識社會的來臨，是網際網路的普及化的時代，使得越來越多的使用者逐漸重視到網站網頁設計及使用的重要性，而網頁設計原則的應用是網頁設計者的重要工具之一。本專題前身已有一知識網站，蒐集各種不同種類的網頁設計原則，以系統化的方式產生一網頁設計原則知識分類架構出來，並從虛擬社群網站的角度，設計開發一個完整的網頁設計原則之知識網站，網站主要提供了知識之多形性、建立、查詢及傳播方面之技術應用。所以，本專題針對此網頁設計原則知識網站，充實文字網頁設計原則之圖示範例，以期幫助網站網頁的開發者設計者，可以更有效的觀摩實用的網頁設計原則，最後再針對使用者的學習成效來進行一連串的評量，以驗證這樣設計的網站是否能確實地幫助網頁設計者學習網頁設計原則。

關鍵字詞：知識社會、使用性、網頁設計原則、學習觀摩、學習評量

壹、緣由與目的

因為網際網路的越來越普及化，造成了製作網站網頁的工具越來越多，也越來越多元化，令人目不暇給。由於網頁製作工具的進展及普及，使得幾乎會上網的人幾乎通通會製作屬於自己的網站網頁的風氣及大環境大盛行；也由於國內的網頁設計的教學與書籍文獻多偏向程

式技術層面，且系統分析與設計也偏重技術層次，造成的到處都是功能可能不弱但是使用性較低的網頁充斥在網路上；在實務上軟體公司大多缺乏使用者參與的開發程序，而著重於事後的教育訓練，往往讓使用者在系統開發完成，才得以具體了解其功能與實際的介面操作模式，造成使用者的學習成效大為降低或不彰，並且也可能使得軟體公司必須不斷的作修改的的動作而造成麻煩。所以網頁設計原則是企業跨入資訊系統網際網路化，普遍需要但缺乏的一種知識。

網頁設計原則並不是關於程式技術，而是在於系統與介面的設計層次。網頁設計屬於交談式(interactive)系統的一種，Norman (1986)指出促使使用者建立正確的心智模式(mental model)，往往藉助於外在的系統形象(system image)。換言之，也就是外在人機系統介面對使用者接受滿意程度的影響，遠勝隱藏於內部系統複雜的知識內涵與架構。當不瞭解概念性設計或並無適當的設計結果時，網頁的設計往往就傾向於一般性的經驗法則或是自行歸納出的原則（Newman and Lamming, 1995 ），應用原則的最大問題在於如何選擇且如何實際發揮出原則的精神。狹義的設計原則在一般的人機介面書籍多少會記載著多年來的成果。

所以本專題前身已製作了網頁設計原則的知識網站。本研究之目的主要著重於學習者的學習成效的評量，我們要評估使用者在使用了這個關於網頁設計原則的網站後，比未使用之前的學習成效上有何差異並且是否能讓使用者更快速的了解設計原則的意義。另外，為了讓使用者能清楚的了解每一個設計原則所指的意義，我們在此計畫中也相當的著重於文字設計原則的圖示範例，希望能輔助使用者在學習原則時，能經由範例更加的了解如何的應用。

貳、系統的建立

一、網頁設計原則知識分類架構：

本網頁設計原則知識分類架構主要分為四層，是由Johnson (2000)的原則說明、楊欣哲、

王超弘(1999)的www網頁設計原則、Newman and Lamming (1995)的五大原則中，歸納出的網頁設計原則知識架構六大項原則（見下列圖1）：一般性原則、互動格式、介面實用性、畫面佈置、內容資訊及特別原則。

圖1 網頁設計原則知識基本原則實用工程網際網路傳統人機相容性元件彈性操作功能編排格式實用性教學原則企業網頁原則一般性原則互動格式介面實用性畫面佈置內容資訊特別原則網頁設計原則一易致讀..性性了了解解..使目用標者超反連應..結時間多硬媒體..體介面對下軟硬軟硬導搜版功..話拉..體體......體體覽尋面能方選彈彈引塊單性性擎文聲...字音文聲影...字音像教學九...大原則吸引使用者反覆測...試二、雛形系統：

網頁設計原則網站的雛形系統架構中，除教學中心、管理者專區與會員專區，並包含知

識種類、知識建立、知識查詢及知識傳播的功能。教學中心是連結到義守大學資管系陶幼慧老師的教學中心，我們可以透過他的網站學習到很多有關於網路設計與實務方面的教學與專業設計，並且還有許多人因工程的傳授與範例和許許多多的資源資訊提供使用者使用。知識種類則含網頁設計原則與分類，個案，最佳實務及主題論壇等四種，透過不同的知識表達形式，網頁設計原則可以多元化的方式，幫助使用者了解較偏向隱性知識的網頁設計原則。知

識查詢含目錄索引、關鍵字查詢及原則總覽三種，是針對使用者的偏好讓使用者更方便快速的尋找相關之網頁設計原則，並透過簡易教學方式了解該原則之定義說明及可能應用之圖示範例。知識之建立分享則是可由使用者自行提供網頁設計原則的內容，讓網站設計者參考且決定使用與否，達成使用者積極參與之目的。知識傳播以主動廣播之電子郵件與隨時更新之公佈欄、提供最新的知識內容或消息與使用者互相交流。

三、系統示範畫面

下圖2顯示網頁設計原則知識站之首頁，其中之功能按鈕可對應至系統架構之第一層。圖3為原則索引的部分圖示我們可以明顯看出網頁架構分為四層，網頁設計原則的教學表達則以圖4之分類及內容說明敘述，與圖5之圖示範例之畫面呈現給使用者。

圖2 網頁設計原則知識站之首頁圖 圖3 原則索引圖

圖4 網頁設計原則分類及內容圖 圖5 圖示範例

參、實驗評估 一、實驗設計

本專題研究之實驗目的主要著重於學習者學習成效的評量，我們要評估使用者在未使用過我們的網頁設計原則知識管理系統之前，和使用過這個知識管理系統後在學習成效上有無差異，是否能讓使用者能更快速的了解這些網頁設計原則，並且未來在設計網頁時遵循這些原則。

此專題的實驗對象我們是以義守大學資管系三年級A、B班選修陶幼慧老師人因工程的學生共計有42人，男有15人，女有27人；一人一組，共分為42組（共有三次作業）。我們將此次評量分為三階段：第一階段是使用者未選修本堂課之前；第二階段是在使用者做了I、II兩次作業後；第三階段則是在使用者看過並使用過我們的網頁設計原則知識管理系統之後。我們會以此三階段分成兩次的評量分析，第一次得評量是客觀的評量（評量者）主要是針對第一、二階段進行比較分析，然後製作一個學習評鑑表；第二次評量則是主觀的評量（受訪者），此次評量則是針對第一、二、三階段去進行問卷調查，然後對所有的問卷進行統計和評分製成一份問卷調查資料表。最後我們將會分析第一次測驗和第二次測驗兩部分的資料來得知學習者的學習成效結果。

二、實驗內容

第一次的評量是我們將學生依節日慶典去製作的網頁，共分成42個題目下去做的兩次作

業（作業I –文字版面編排作業及作業II -動畫製作及動畫+語音作業）由本組兩名成員對這兩份作業進行評鑑製作而成的，主要是針對問題定義、設計原則、網頁設計三者做出評量而分析出來的，目的是為了得知使用者在仍未接觸我們的網頁設計原則網站之前是否了解設計原則的程度。第一次評量主要是依三大項目：問題定義、設計原則、網頁設計來進行評分，每一個項目分數皆為1~5分，評量方法: 1分代表劣； 2分代表不佳； 3分代表尚可； 4分代表佳； 5分代表優。首先我們會根據作業中的問題定義對使用者、活動內容、支援程序、解決程度等部分是否形容適當而給予不同等級的分數來進行評分，其次則依設計原則的敘述是否正確評分、最後我們會針對網頁設計內容是否符合這些原則評分，其中評分3分即是表示使用者有符合條件標準；3分以下即不符合標準，在標準之下；3分以上意指符合標準，在標準之上，此外此次評量為了避免一人評分過於主觀，所以我們從組員上抽出兩人來做評分製作了兩個學習評鑑表，最後取其平均值作了下列的學習評鑑平均表（見表1），以符合其客觀性，而不會導致過於主觀。

表1 學習評鑑平均表

組姓名 別 1 張育瑋 2 劉榮 3 楊粟妝 4 陳月雲 5 陳幸香 6 趙玫玲 7 簡美瑛 8 陳怡珍 中國節日由來 作業 I 作業 II 問題定義 設計原則 網頁設計 平均 問題定義 設計原則 網頁設計 平均 藥師節--國1/1 臘八節--農12/8 祭灶神--農12/23 除夕--農12/29 農民節--農2/4 春節--農1/1 ~ 1/5 元宵節--農1/15 和平紀念日--國2/28 2.5 3 3.5 3 4 3.5 3.5 4 2 3.5 4 2.5 4 3.5 4.5 4 2.5 2.5 4 3 4.5 3.5 4 4 2.33 3.00 3.83 2.83 4.17 3.50 4.00 4.00 3.5 4 4 3 2.5 3 5 4 3.5 1.5 4 3 3 3 4 4 3 4 5 4 4.5 4.5 5 5 3.33 3.17 4.33 3.33 3.33 3.50 4.67 4.33 9 郭亭均 1陳巧釧 1陳鈺雯 1陳玉珊 1鳳清渝 1何金龍 1張嘉玲 1施建安 中國童子軍節--國3/5 國醫節--國3/17 青年節--國3/29 婦幼節--國 4/4 清明節--國4/5 世界衛生節--國4/7 天后誕--農3/23 國際勞動節--國5/1 4 3.5 3 3 4 2.5 4 3 1 3 3.5 4 3.5 4 3 3.5 4 4 2.5 3 4 4 3 4 3 4 4 4 3 4 4 3 3 4 4 3.5 3.5 3 2 4.5 3 1 2 3.5 4 4 4 3.5 4 3.5 4 3 3.5 4 4 4 3 3 4 4 4 3.5 5 3 3 4 4 4.5 4 3 3.5 3 4 3 4 4 4.5 3 4 4.5 2.5 4 4 3 3 2.5 3.5 3 3.5 3 2 3.5 4 4 3 4 4 3.5 3.5 4.00 4.00 3.50 3.17 3.50 2.50 4.17 3.00 2.00 3.00 3.83 3.67 3.83 4.17 3.00 3.83 3.83 3.67 2.83 3.00 3.83 3.67 3.50 3.33 2.67 3.83 4.00 4.00 3.17 4.33 3.67 3.17 3.50 4 4.5 4 2.5 4 3 4.5 3.5 4 4 4 1 4 5 3 4 4.5 4 3 4 4 3 4 4 3 4.5 2 4.5 2 4.5 4 3 4 3 4.5 3 3.5 4 3 4 3 3 3 3 1 4 4 3 4 4 4 4 3 4 1 4 4 4 4 2 4.5 2 4.5 5 4 4 4.5 4 3.5 3.5 3.5 2.5 4 2 4 3.5 3.5 3.5 4.5 4.5 3 3.5 3.5 4.5 3 3.5 4.5 4.5 4.5 3 3.5 3.5 3 4 3.5 3 4 3.5 4 3.83 4.33 3.50 3.17 3.83 2.83 4.17 2.83 3.67 3.50 3.50 1.83 4.17 4.50 3.00 3.83 4.00 4.17 3.33 3.50 4.17 2.83 4.17 3.67 3.50 4.00 2.33 4.33 2.50 4.00 4.33 3.50 4.00 1柯榆楣 母親節--國5月第2個星期日 1黃煥雲 1黃瓊緻 國際護士節--國5/12 禁煙節--國6/3 2吳居璋 工程師節(水利節)--國6/6 2秦燕君 2周耿南 2林祐業 2薛博仁 2郭秋君 端午節(詩人節)--農5/5 航海節--國7/11 父親節--國8/8 七夕情人節--農7/7 中元節--農7/15 2王亮蘋 鄭成功誕辰紀念日--國8/27 2陳匯欣 2陳雅雯 2范月玲 3黃涵鈴 3黃聖惠 抗戰勝利紀念日--國 9/3 軍人節--國9/3 中秋節--農8/15 教師節--國9/28 重陽節(敬老節)--農9/9 3賴宏忠 國慶日(雙十節)--國10/10 3薛智華 3楊惟傑 3黃惠意 3劉秋玉 聯合國日--國12/24 台灣光復節--國10/25 工業節--國11/11 地政節--國11/11 3張雅嵐 國父誕辰紀念日--國11/12 3林怡君 3潘伃倫 4吳志偉 4林佳男 保眼愛盲日--國12/5 紀界人權日--國12/10 冬至--國12/22(23) 行憲紀念日--國12/25 4王榮惠 聖誕節--國12/25 總 平 均 3 3.40 3.5 3.51 3.5 3.52 3.33 3.48 4 3.67 3.5 3.44 3 3.50 3.77 3.63 第二次評量我們則是在使用者使用過網頁設計原則知識管理系統後對使用者進行問卷調查，然後再將回收回來的問卷進行資料分析，我們主要是希望透過問卷調查的方式來得知使用者在第一、二、三階段的差異，並且得知使用者認為自己在學習成效上是否在接觸此網頁後有顯著的改變且能幫助自己更快速的了解學習設計原則。我們在問卷設計九個問題，評量方式如下：

第1題：主要是為了解使用者的網頁製作能力，評分範圍1-5分，1分代表很差；2分代

表差；3分代表普通；4分代表佳；5分代表優。

第2題：此題則是為了解使用者在階段一時是否聽過網頁設計原則，1表是（聽過）；0

表否（沒聽過），答否的人即跳至第4題。

第3題：此題則是為了得知使用者在未選修本門課之前大多在何處獲得網頁設計原則的

資訊，評量範圍由1~7：1表專業書籍資料；2表相關網站；3表報章雜誌；4表其他課程；5表親朋好友告知；6表BBS；7表示其他。

第4~6題：此三題分別是評量第一階段、第二階段、第三階段三個階段，主要是為了得

知使用者對設計原則的了解程度以及實際應用程度，評分範圍皆為1-5分，使用者的了解程度：1分代表完全不了解；2分代表很低；3分代表低；4分代表普通；5分代表高。使用者的實際應用情形：1分代表不曾使用；2分代表很少；3分代表偶而；4分代表經常；5分代表常常使用。

第7~9題：此三題是為了得知使用者在第一階段、第二階段、第三階段時分別知道幾個

設計原則，評分範圍皆為1-6，第一階段的評量方式如下：1分代表沒有；2分代表1~5；3分代表6~10；4分代表11~15；5分代表16~20；6分代表20個以上。第二階段的評量方式如下：1分代表沒有；2分代表1~10；3分代表11~20；4分代21~30；5分代表31~40；6分代表40個以上。第三階段的評量方式如下：1分代表沒有；2分代表1~20；3分代表21~40；4分代表41~60；5分代表61~80；6分代表80個以上。

三、學習評鑑分析結果與結論：

表2 得分比率表

得分為負 得分為0 得分為正 問題定義 16.67% 26.19% 52.38% 設計原則 38.10% 30.95% 30.95% 網頁設計 26.19% 26.19% 47.62% 在第一次的評量中我們將針對每個人的學習成效進行分析。首先我們將第一階段的學習評量平均表（表1）中的作業II裡把每個人的問題定義、設計原則、網頁設計這三個項目去減作業I的三項目，在經由計算我們可以得知在42個受試者中的三項評量項目得分為負分數者、沒得分及得分為正者的百分比例（見下表2）。得分為負分數者即表示在學習成效上很明顯的是退步的；而得分為0則是表示沒有進步的；得分為正者表示在學習成效上有顯著的進步。最後我們對第一次評量的分析結果如下：在問題定義中只有16.67%是退步的表示學習成效佳；然而在設計原則方面佔有38.10%的人士退步的，這顯示學習後應用之成效不佳；在網頁設計方面佔有26.19%的人士退步，但是有47.62%的進步這顯示學習成效也是佳的。

在第二次的問卷評量中我們可以經由問卷的資料分析得知下列結果與結論:

1. 在網頁製作能力方面：1人為很差；7人為差；28人為普通；5人為佳；1人為優。在平均上大多數的人皆認為本身網頁製作能力為普通，即表示大家在網頁製作方面並無困難，顯示大家在學習網頁設計原則時不會有太大的難處。

2. 在問題二中有13人在未選修本門課之前曾聽過設計原則；29人不曾聽過。由於不曾聽過的人佔的比率較高，表示大多數的人對這方面知識涉獵極少，有學習之必要。另外在13人當中大多數的人是在專業書籍論文及相關網站得到設計原則的知識，也有一些人在報章雜誌、其他課程、親朋好友、BBS得到此知識。

3. 在階段一、二、三中使用者對了解程度的發展情形如下列圖6，由表中我們得知在第一階段平均的了解程度為低，第一到第二階段的進步情形最快以普遍了解和高度了解，第二到第三階段了解程度也有明顯的進步。顯示在這一連串的學習過程中，使用者的學習成效是不斷的向上成長的，並且透過這一個網站，能讓使用者的學習成效繼續的向上提昇。

4. 在實際應用方面使用情形如下列圖7所示，第一階段應用的情形在很少及偶而使用的程，度第二階段則上升至偶而和經常使用的程度，第三階段則和第二階段同，，但使用情形明顯的下滑了一點此即可能表示使用者在使用此網頁後，雖然能夠了解更多的設計原則，但並不會經常的使用到這些原則，不過我們相信對於使用者而言它學習到的是更多的知識，而知識是永遠不會嫌少的。

543210階段一階段二階段三2.93了解程度4.214.2443.532.521.510.503.572.53.43實際應用

階段一階段二階段三

圖6 三階段之了解程度曲線圖 圖7 三階段之實際應用曲線圖 5. 在得到上述3、4對了解程度及實際應用的個別分析後，接下來我們將進行在不同階段了解程度及實際應用的相減差異情形，分析的方法主要是將每個人在各個階段的了解程度和實際應用情形互減（取絕對值）後平均得到下表3，範圍在0-4之間（數值越大表示兩者之間的差異越大），從表中我們可以看到在第一階段、第二階段時差異的數值是明顯的往下降，顯現出受試者在經過第二階段的訓練後學習成效是往上提昇的情形，表示第二階段的課程訓練對他們學習網頁設計原則方面是有助益的，至於在第二階段和第三階段時差異數值是向上提昇，顯示使用者在第三階段時在學習成效方面是沒有幫助的結果，表示這個網站需要再改進才能讓使用者透過這個網站能學習到更多的原則，但是大家也不要太氣餒，因為在3對了解程度的分析中明顯的顯示出其實受試者的學習成效是不斷的往上成長的，只是因為在第三階段時使用者能了解這些設計原則，但是因為有些設計原則對於使用者而言在實際應用上並不是常常會使用到的，所以大家應該再繼續的充實這個網站，讓更多的使用者學習到更多的知識，並且去應用它們，才能讓世界上更多更多使用網際網路的人都能受惠。

表3了解與應用程度之三階段差異平均值

(了解程度一實際應用) 平均值 第一階段 0.7619 第二階段 0.7381 第三階段 0.8571 6. 在階段一時使用者平均大概知道1~10個設計原則；階段二時使用者則大概知道20~30個原則；階段三時則大概知道40~60個原則。此資料是由問卷題目7~9所分析出來的，這個數據能讓我們更加的確定使用者的學習成效是有相當大的進步的。並且也確定使用者透過了這個教學網站得知更多的網頁設計原則，對他們去學習如何設計網頁有莫大的幫助。

肆、結論

本專題評量結果發現，經由課堂作業實際操作應用網頁設計原則之成效是顯著的，之後觀摩知識穩站的了解程度是遞增、應用程度卻是遞減的，但幅度小且不顯著。由此推論，能參與課堂學習與應用練習的學習效益是顯著的，知識網站雖然無法顯著地提昇邊際效益，但善加開發與利用，當能相對地提昇未學習網頁設計原則課程之設計者了解與應用效益。此部份能須後續實驗驗證之。

參考文獻

1. 楊欣哲、王超弘 (1999)，WWW網頁設計原則之準則與應用，中國工業工程學刊，Vol.16， No. 2，265-275頁。

2. Johnson, J (2000), GUI bloopers, Morgan Kaufmann, U.S.A. 3. Neilson, J. (2000), Designing Web Usability.

4. Norman, D. A. (1986), Cognitive engineering. In User Centered System Design (Norman, D. A. and Draper, S. W., eds.) Hillsdale HI: Lawrence Erlbaum Associates, pp. 31-65.

5. Pearrow, M. and Niles, J. (2000), Web-site Usability, p129-161.

6. Shneiderman, B. (1998), Design the user interface: strategies for effective human-computer interaction, Addison-Wesley.