研討論文:旅遊網站首頁介面設計之研究

旅遊網站首頁介面設計之研究

李育綺*     管倖生**   湯永成***

*國立雲林科技大學視覺傳達設計碩士班 研究生

**國立雲林科技大學視覺傳達設計系 教授

***國立雲林科技大學視覺傳達設計系 副教授

摘要

由於科學技術的提升、文化資訊的交流以及交通的便利化，旅遊風潮已逐漸深入現代人的生活之中，現代人的高旅遊意願，反應出旅遊業不光只是娛樂業，更逐漸成為民生產業，而網際網路的普及，更改變了旅遊業者的經營模式，擁有一個優良的旅遊網站將能帶來更多的商機。本研究主要目的在探索旅遊網站首頁介面操作與設計，依據市場調查找出現今網際網路上較具代表性旅遊網站，進行網站首頁介面滿意度問卷之測量，期望能整理歸納出旅遊網站介面設計之參考原則。

本研究共分為三階段，第一階段為文獻探討及訂定樣本。首先尋找國內外相關研究資料，並根據「Alexa國內旅遊電子商務網站排名」以及「Google搜尋頻率」交叉比對，得出網站流量排名與知名度較高的「雄獅旅遊網」、「易遊網」與「燦星旅遊網」為旅遊網站使用性研究代表樣本；本研究依據此三個樣本進行旅遊網站首頁介面設計之研究。第二階段以焦點團體小組設計問卷內容並實行滿意度問卷施測，本研究將網站首頁分為「網站介面視覺設計」、「網頁介面操作」、「整體滿意度」三部分進行滿意度評估。第三階段則根據評估後之結果，進行介面使用性分析與網頁編輯修正並重新製作旅遊網站首頁介面樣本。

 

 

 

 

關鍵字：旅遊網站、首頁、介面設計

 

 

 

 

壹、前言

由於科學技術的提升、文化資訊的交流以及交通的便利化，旅遊風潮已逐漸深入現代人的生活之中。現代網際網路的普及，改變了旅遊業者的經營模式；許多旅遊業者結合網路的特性，建立旅遊相關服務網站。由於旅遊網站擁有豐富的圖文資訊，同時必須刊登商業廣告和促銷訊息，於是如何在複雜的版面結構中建造一個舒適的網站版面，讓消費者樂於使用進而提升交易機會，是現今旅遊網站必須探討的課題。本研究依據市場調查找出現今網際網路上較具代表性旅遊網站，進行網站首頁介面滿意度問卷之測量，期望能整理歸納出旅遊網站介面設計之參考原則。其研究目的如下：

1. 瞭解使用者對於台灣旅遊網站之意見。

2. 探討旅遊網站視覺介面設計之問題，進而提出修正方案。

貳、文獻探討

一、旅遊網站

根據葉雅慧(2000)[1]依照「功能性」的分類，可將旅遊網站分為「電子商務導向型」以及「內容供應型」兩大類，其分類內容如下：

1. 電子商務導向型：又可依「營運型態」分為旅遊業者（雄獅旅行社、易遊網）；網路科技公司（百羅旅遊網）、入口網站的旅遊頻道（雄獅與PChome、燦星旅遊與Hinet）與集團合資成立（燦星旅遊網）等旅遊網站。
2. 內容供應型：媒體轉型的旅遊網站，像是MOOK雜誌的自遊自在旅遊網；以及以提供旅遊內容為出發的旅遊網站，如政府單位建置的觀光旅遊網─中華民國觀光局。

旅遊網站主要是當作旅行社的宣傳工具，其內容應具有六個構面，分別是：旅遊服務、行程規劃、資訊查詢、線上交易、景點導覽以及交流互動等[2]。

二、網站介面設計

高蓁瑩（2004）[3]提到網站是由許多網頁所架構而成一個整體。在構築一個網站時，包含有介面設計、資訊設計與視覺設計三部分。

蕭銘宏與李傳房（1997）[4]在針對台灣地區網頁設計之操作介面所作研究中提出以下三點建議：

1. 在設計網頁介面時，最好以圖形、彩色、及附加文字說明等三種介面組合類型作為設計的基本架構。
2. 對於網頁介面所要提供的資訊作分類分層時，一些較容易產生誤解或是定義上較模糊的資訊，要以交集的資訊分層方式來加以設定，減少使用者操作錯誤的機會，增加其資訊搜尋上的效率。
3. 設計者對於所設定使用對象的操作習性應該加以瞭解，對於使用者容易出錯的地方應該加以輔助設計。

參、研究設計

一、 網站介面設計研究調查實行步驟

第一階段：

根據全球Alexa[5]排名中，針對國內旅遊電子商務網站排名（2010/6/19當天查詢的六個月平均排名）中，以「雄獅旅遊網」[6]、「易遊網」[7]、「可樂旅遊網」、「燦星旅遊網」[8]與「東南旅行社」為前五名。而其中又以「雄獅旅遊網」、「易遊網」與「燦星旅遊網」為Google搜尋「旅遊網」關鍵字中的前三名旅遊網站。因此，藉由網站流量排名與知名度較高的「雄獅旅遊網」、「易遊網」與「燦星旅遊網」為旅遊網站使用性研究代表樣本並收集文獻資料。

第二階段：

為了解受測者在操作旅遊網站過程中的滿意程度，本階段使用主觀評量項目討論。主觀滿意度評量問卷內容則參考Nielsen[9]所提出的113條網頁首頁設計法則與黃靜純[10]的問卷項目設計，分別包含「網站介面視覺設計」、「網頁資訊內容」、「網頁介面操作」與使用者「主觀滿意度」。其評量採用李克(Likert)尺度量表，讓受測者於完成典型工作之後對該網站之評量項目進行１至5等級評比，並使用「深度訪談」以得知受測者對於網站介面設計的更多意見。

第三階段：

根據第二階段的15位受測者網站操作流程中，了解三個旅遊網站使用介面典型工作的操作情況，並對於主觀性評量問卷項目進行分析與討論，包括：「網站介面視覺設計」、「網頁資訊內容」、「網頁介面操作」與使用者「主觀滿意度」之評比。

二、 抽樣對象與問卷設計

(一)   抽樣對象

由於受測者必須對網路熟識且經常上網的使用者，本研究將「受測者」界定為經常上網，曾經接觸過或未接觸過旅遊網站之使用者，並將其定義為「生手」(Novice user)，本研究以便利抽樣抽取雲林科技大學15位設計學院學生進行研究測試。

(二)   問卷設計

本問卷內容評估之項目，除了參考黃靜純(2003)設計的評估問卷之外，並經由焦點小組成員共同討論，針對研究主題增加評估項目。問卷的題型設計兼採封閉與開放，期能同時獲得客觀的分析資料及主觀的深度思考模式。

肆、施測結果與分析

一、旅遊網站首頁喜好度施測結果

受測者之網站介面視覺設計、網頁資訊內容、網頁介面操作、主觀滿意度的差異分析，如表4-1所示。由表4-1得知在「視覺設計」與「介面操作」上，三個網站之間有顯著性差異。

表2 單因子變異數分析檢定摘要表

因素		平均數(標準差)	F-value	p-value顯著性
視覺 設計	雄獅	3.38(0.86)	4.759	0.030*
	易遊	3.68(0.22)
	燦星	2.62(0.40)
	總合	3.24(0.69)
內容 資訊	雄獅	3.80(0.76)	1.726	0.219
	易遊	3.20(0.91)
	燦星	2.90(0.65)
	總合	3.30(0.82)
介面 操作	雄獅	3.50(0.59)	4.228	0.041*
	易遊	3.55(0.74)
	燦星	2.45(0.69)
	總合	3.17(0.82)
整體滿意度	雄獅	3.40(0.89)	1.826	0.203
	易遊	3.20(1.10)
	燦星	2.40(0.55)
	總合	3.00(0.93)

（* 表示達顯著差異水準，p<0.05） 資料來源：本研究整理

根據附錄一的問卷進行測試，針對三個網站首頁進行喜好排序，其排序結果為雄獅第一、易遊次之，而燦星為最後，如下表3所示。

表3 雄獅與易遊網站喜好排序

	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	總合	排名
雄獅	3	2	3	2	2	3	3	1	2	2	2	3	1	2	1	32	1
易遊	1	1	1	1	3	2	2	2	3	3	3	2	3	1	2	30	2
燦星	2	3	2	3	1	1	1	3	1	1	1	1	2	3	3	28	3

資料來源：本研究整理

本研究根據15位受測者對於首頁的喜好排序與內容，進行口語資料評比彙整，歸納「版面配置」、「搜尋功能」與「配色」三部分，針對三部分的內容分別整理優缺點，詳情見表4：

表4  旅遊網站首頁優缺點分析表

雄獅旅遊網
版面配置	優點	l 版面較簡潔，資訊量不會太多，較整齊 l 版面清楚，可以利用塊狀的顏色找到東西 l 版面乾淨，版面兩邊有留白，字距排列比較舒服 l 字體大小適中，不會大小字不平均
	缺點	l 感覺頁面太小，很擠，不如燦星看起來舒服 l 沒有區分，都是黑黑的字體，找不到視覺重點 l 視覺沒有重點。易遊網會直接標出國內外的標題，雄獅卻還要再點進去
搜尋功能	優點	l 左上是注目區，比較好操作、容易找到目標，馬上即可看到且較無干擾 l 左邊有一塊BAR可以直接點選，他的查詢功能比較詳細，看起來乾淨，且還有一個GOOGLE可供查詢。標題的分項很清楚，可以依照個人預算來選擇 l 雄獅旅遊網頁的搜尋那裡作的很好，區塊標示的很清楚、精準，但版面的 區塊有點亂，找不到重點，又有廣告 l 優點是左邊可以直接看到搜尋的資訊，除此之外都感覺很雜亂 l 登入資料的欄位很清楚，其他網頁的搜尋都不好找，甚至隱藏在網頁中間 l 習慣會從左邊先看起，雄獅把查詢功能放在左邊，所以可以直接進行搜尋 l 介面好操作
	缺點	l 原本一開始會想看，但頁面左下方那些排列讓人很難找東西 l 一進來不能直接看到想選的地區，還要使用快速搜尋去找 l 旅遊時想要直接看到行程，不想再作很細的搜尋
網頁配色	優點	l 字的顏色較突出，顏色深灰，反差大，較好看哪個地方是我想要的。 l 顏色使用上比較輕鬆 l 雄獅的紅色區塊分類很清楚
	缺點	l 顏色區分沒有很好，沒有像燦星那麼完整，必須很認真去看 l 頁面的區塊幾乎都是一樣的顏色，不好區分
易遊網
版面配置	優點	l 在上面與左邊區域都有明顯色塊區分，提升注目性，較容易搜尋資訊。 l 資訊編排比較整齊。 l 介面跟燦星有點像。
	缺點	l 字體與背景都是同色系，跳不出來。 l 上方和左方區塊的顏色一樣，細部沒有再做區分。 l 像是政府機關的網頁，顏色、logo都很像公家機關。 l 資訊量較少，行程感覺很少，感覺沒有像燦星一樣豐富。 l 旅遊行程的描述只用小字感覺比較不吸引人。
搜尋功能	優點	l 左邊有提供「地點」選擇功能較佳。 l 搜尋功能有被強調。
	缺點	l 無
網頁 配色	優點	l 綠色顏色感覺比較舒服
	缺點	l 有一部分的受測者較不喜歡綠色版面，綠色太輕、太亮。
燦星旅遊網
版面配置	優點	l 資訊有區塊區分 l 字體上有區分不同的區塊 l 旅遊廣告很多，感覺很熱鬧 l 只有一個色塊，視覺不容易受到干擾 l 有主題、有大標可以吸引人 l 分類清楚，容易閱讀 l 上方和左方的顏色有區別，容易辨認
	缺點	l 廣告很多而且做得不好看 l 視覺有壓迫感 l 字體大小很亂 l 資訊量太多 l 圖片太多 l 動畫過多 l 版型像YAHOO，比較沒特色 l 首頁橫幅動畫像是廣告，不像燦星首頁抬頭 l 版型像YAHOO，有點亂 l 版面比較粗糙 l 字體大小不一 l 圖文配置感覺比較低俗 l 區塊太多，有點雜 l 區隔不明顯
搜尋功能	優點	l 該有的功能都在首頁上 l 功能完整 l 快速搜尋在最右邊很奇怪，顯不出重點
	缺點	l 搜尋功能不在很明確的位置
網頁 配色	優點	l 顏色好看、討喜 l 調性統一 l 清爽 l 色彩繽紛，操作起來會很愉快
	缺點	l 色彩過多，感覺很亂 l 顏色有廉價感

資料來源：本研究整理

二、旅遊網站首頁比較與分析

(一) 版面配置

一般認為雄獅旅遊網頁版面簡潔乾淨，字體大小適中，字距排列令人感到舒適，且資訊量不會太多，較無壓迫感。缺點是網頁字體顏色沒有區分明顯的區塊，形成沒有重點的視覺感受。

燦星旅遊網站的版面配置受到較多的批評，許多使用者認為網頁資訊量太多太複雜，沒有重點與特色，尤其首頁橫幅動畫像是廣告，不像是燦星首頁的抬頭，由於過度的圖文資訊，導致使用者產生壓迫感。

三個網站的比較中，易遊網的資訊量最少，讓使用者認為不夠豐富，且旅遊行程的描述字體太小，無法吸引使用者觀看，部分使用者甚至認為版面配置過於規矩，在顏色及LOGO的使用上類似公家機關。同時有一些使用者喜愛易遊網明顯區分出來的兩個色塊，認為可以提高注目性，增加搜尋效率。

(二) 搜尋功能

大多數的使用者喜歡雄獅旅遊網頁左邊明顯的「快速搜尋」列表，認  為它依照「由左至右」的視覺動線，將搜尋區塊放置在明顯的位置上。但是也有人認為雄獅旅遊網站應將熱門旅遊地區直接放至在首頁，讓人一進來就可以直接連結，不用再使用搜尋功能去查找。

燦星旅遊網站的搜尋功能較少人作出評斷，本研究推測主因是燦星網站的資訊量過於龐大，色彩搶眼，使用者在第一時間注意到的並非「搜尋功能」，而是其他資訊。部分使用者認為燦星首頁具備完整的功能性，另有部分使用者則認為搜尋功能位置不明顯，位於頁面最右邊違反視覺動線。

易遊網在首頁以色塊區分出旅遊地點，提供使用者可以直接點選，不用透過「快速搜尋」區域一一點選搜尋，許多使用者認為這種直覺性的操作可以增加搜尋效率。

(三) 配色

有些使用者喜歡雄獅旅遊網站的配色，認為乾淨清爽，首頁上方的紅色色塊非常明顯；另一些使用者則認為白色頁面所占面積太多，讓人不容易以顏色來區分詳細的內容。

多數使用者認為燦星網站顏色區分繽紛熱鬧，調性統一，在操作上能給予愉悅的感受，另有一些使用者則認為色彩太多，過於雜亂，會有廉價感。亦有許多使用者不喜歡易遊網的顏色，認為亮綠色過於刺眼，占據的版面太大，並且字體與背景皆是同色系，造成視覺疲勞；但另有部分使用者則持相反意見，認為綠色比較舒服。

 

三、旅遊網站首頁修正建議

表5  雄獅旅遊網修正前後比較

 

 

原始樣本	修正後樣本

資料來源：本研究整理

由問卷歸納得知，雄獅旅遊網主要缺少「國內外旅遊地區」的搜尋功能。由於受測者多次提及依照由左至右視覺動向的搜尋區是雄獅旅遊網的優點，故不作更動。整體而言，網頁的中心重點位置放置大幅廣告，是較為可惜的地方，於是本研究在此異動廣告尺寸與位置，並將「國內外旅遊的搜尋區」移至中心位置。另外並以橫幅的廣告適當區分網頁內容，改善文字排列過於緊密的缺點。

表6  易遊網修正前後比較表

原始樣本	修正後樣本

資料來源：本研究整理

易遊網最具爭議性的問題在於網頁介面色彩，其次是廣告與圖示太多，旅遊的資訊相對使人感到較不豐富。本研究首先降低網頁介面色彩的明度與飽和度，使網頁呈現較為柔和、淡雅的感覺；其次針對使用者反應之同色系文字無法呈現視覺焦點的缺陷，本研究同樣改變網頁上方及左方的字體色彩，增加字體與背景的差異性以便於使用者觀看及瀏覽。最後，減少網頁的廣告版面，同時增加旅遊行程的說明介紹，期望能豐富網站內容。

表7  燦星旅遊網修正前後比較表

原始樣本	修正後樣本

資料來源：本研究整理

受測者對於燦星旅遊網網頁介面之意見呈現兩極化。部分使用者認為介面色彩使用太複雜，廣告動畫太多，導致版面過於雜；部分使用者卻喜愛色彩繽紛的旅遊氣氛。受測者最有共識的缺點在於最右邊的搜尋區不明顯，本研究將「搜尋區」調整至網頁中心位置，並調整區塊配置，將廣告統一排列於網頁右側，突顯網頁的視覺焦點。此外，網頁最上方的橫幅廣告動畫尺寸太大，干擾燦星旅遊網的logo標誌，於是將其尺寸縮小後置於右側，讓使用者更快速簡明的辨識燦星旅遊網的logo標誌。

伍、結論

本研究結果得知，網頁的資訊量應該適中，避免資訊量太多造成視覺干擾。特別的是旅遊網站的屬性較為特別，若是版面過於簡約或是資訊量太少，會對使用者與旅遊網頁的認知產生衝突。旅遊網站可以適度加入廣告，但網頁的標題部分不適合以動畫呈現，會讓使用者易直覺聯想成廣告內容。

若是網頁強調搜尋功能，應將此區放置網頁明顯的區域。一般使用者瀏覽網頁時的視覺動線通常習慣「由左至右」，因此搜尋區域放置在網頁左方會先讓人注意，其次是中間，最後是網頁右方。另外，網頁若有不同的區域時，可使用色塊或是字體色彩作為區分，但必須注意配色及面積的問題，以免造成視覺干擾。另外，某些使用者瀏覽網頁時並無特定目的，故偏好網站首頁直接提供明確的景點或地名，讓使用者可以省略填選搜尋資料的部分，直覺性地進行瀏覽產品內容。

關於網頁色彩的喜好度較趨於個人主觀偏好，有些使用者認為旅行應配合熱鬧的色彩氣氛，有些使用者則喜愛較清爽簡單的配色。

陸、參考文獻

1. 葉雅慧(2000)。應用網際網路推動觀光產業之研究─以南投旅遊網為例，  國立臺灣大學建築與城鄉研究所碩士論文。
2. 鄭心恬(2001)。旅行業者建構旅遊網站決策之研究。中國文化大學觀光事業研究所碩士論文。
3. 高蓁瑩(2004)。不同族群於博物館網站介面操作之研究─以國立自然科學博物館為例。國立雲林科技大學視覺傳達設計系碩士班碩士論文。
4. 李傳房、蕭銘宏(1997)。全球資訊網操作介面設計之研究-以台灣地區網頁介面設計為例。雲林科技大學工業設計研究所碩士論文。
5. Alexa中文官方網站。檢索日期：2010/6/19。取自http://cn.alexa.com/。Marie
6. 雄獅旅遊，網址http://www.liontravel.com/。
7. 易遊網，網址http://www.eztravel.com.tw/。
8. 燦星旅遊，網址http://www.startravel.com.tw/。
9. Tahir編譯、Jakob Nielsen原著(2002)。Homepage完全解構─50個知名網站設計詳析。台北：上奇科技。
10. 黃靜純(2003)。旅遊網站介面設計與使用性之研究─以「易遊網」為例。國立雲林科技大學視覺傳達設計系碩士班碩士論文。