美食部落格介面的使用性評估初探 Primary Investigation of Food Blog Interface Usability Evaluation

(1)

美食部落格介面的使用性評估初探

Primary Investigation of Food Blog Interface Usability Evaluation

吳彥宏 Yen-Hong Wu

輔仁大學圖書資訊學研究所研究生

Graduate Student, Department of Library and Information Science, Fu Jen Catholic University

E-mail: [email protected]

吳政叡 Cheng-Juei Wu

輔仁大學圖書資訊學系專任教授

Professor, Department of Library and Information Science, Fu Jen Catholic University

E-mail: [email protected]

【摘要】

本研究試圖建立一個美食部落格介面的使用性評估模型，做為使用性評估的指引。首先收集部落格介面設計準則與使用性評估的相關研究，並從中彙整出內容易用性、介面互動性、版型設計等 3 個構面，合計含有 21 個項目的部落格介面評估模型。本研究的樣本是從個人美食部落格、公司美食部落格及 Alexa 排名美食部落格等 3 類中選取 15 個樣本。評估結果顯示，首先，3 個類群的代表性樣本均比同類型一般隨機樣本的表現優良；其次，整體來說，Alexa 排名美食部落格表現較其他 2 類為優，個人美食部落格和公司美食部落格則相差不多。以個別評估項目來看，3 個類群在適當使用圖像和網站區塊二個項目上均有嚴重的使用性問題。個人美食部落格另外在一致性、易於瀏覽的頁面長度、連接的穩定性、主題一致性、個別文章點擊之人氣數量等 5 個項目上有嚴重的使用性問題；公司美食部落格則是在一致性和部落客自身意見等 2 個項目上有嚴重的使用性問題；Alexa 排名美食部落格則只有在文章分類 1 個項目上有嚴重的使用性問題。

(2)

壹、前言

部落格（Blog）是一種電子媒體，

臺灣部落格應用技術從 2005 年開始萌芽（洪淑芬，2005），人們利用部落格的特性將興趣、經驗及專業知識聚集起來，在使用者間互相交流，讓部落格成為訊息傳播的公眾媒介。自從部落格盛行以來，人們可藉由各種類型的部落格來傳達生活資訊，例如：旅遊、美食、

教育、社群、商業等，資訊的傳遞可透過部落格來分享，部落格也漸漸成為個人經驗交流或抒發情感的重要工具之

一。

在眾多的部落格服務商（Blog Service Provider，以下簡稱 BSP）競爭之下促使部落格蓬勃發展，至今更衍生出微型部落格，如：twitter、plurk 等。

2008 年同樣具有網誌撰寫功能的社群網站，如：facebook、google+ 引進臺灣後（維基百科，2012），文章撰寫平台的選擇更為多元，也對部落格服務商帶來很大的衝擊。

雖然部落格現在面臨微型部落格（如：twitter）和社群網站（如：

facebook）的強力競爭，但是相較於微

【Abstract】

In this work, based on related researches of user interface design and usability evaluation in food blogs, we first develop a usability evaluation model, incorporating three perspectives: content usability, interactive interface, and layout design, with 21 evaluation items in total. The 15 evaluation samples are chosen from three types of food blogs: personal food blogs, company food blogs, and Alexa food blogs. This investigation proposes several important findings. Firstly, in each of these three types of food blogs, the most famous blog is better designed than those randomly selected blogs.

Secondly, Alexa food blogs are overall performed better than the other two types of food blogs. In addition, personal food blogs are scored more or less equal to company food blogs. From the perspective of each individual evaluated item, all three types of blogs have severe usability problems in two items: improper use images and website blocks.

In addition, personal food blogs have severe usability problems in five other items:

consistency, navigable age length, stable connection, consistent theme, and individual article cumulative popularity. Company food blogs have severe usability problems in two other items: consistency and opinionated blogger articles. Alexa food blogs have severe usability problem in only one more item: article classification.

關鍵字：使用性；使用性評估；使用者介面；美食部落格 Keywords： usability; usability evaluation; user interface; food blog

(3)

型部落格與社群網站部落格仍有其自身的優勢，如限制較少，像是版型編排、

圖文使用，和文章分類等，都可以自由的操作配置，例如：一般來說部落格文章篇幅大多在 600 字至 1500 字之間，

且常以圖文並茂的方式呈現文章（陳登報，2008），若是同樣的文章在微型網誌上，卻會因字數和圖片上的數量限制，而無法呈現完整的內容，表 1 是部落格、微型部落格、社群網站三者的詳細特性比較。以研究者是美食資訊之經常使用者和愛好者的親身經驗來說，至少在美食資訊這一塊，部落格的重要性仍然屹立不搖。

表 1：部落格、微型部落格、社群網站三者的特性比較表

部落格微型網誌

社群網站字數不限 130-210

個字不限

圖片張數不限受限於

字數不限

字體設計可更換

樣式限定

樣式限定樣式

文章分類有無無

版面任意

配置固定

版面固定版面

美食是臺灣最受歡迎的部落格主題之一，透過美食部落格可以凸顯出多元的飲食文化，不僅提供讀者閱讀的媒介，也是具有商業潛力的推薦平台（林淑芬，2008）。臺灣美食和小吃佳餚聞

名於各地，但人們常常因資訊不足而不得其門而入，因此經常透過美食部落格作為獲取資訊的管道，這是由部落客

（Blogger）率先品嘗美食後，再撰寫文章去引發閱讀者前往消費。此外，在

《部落格最愛人氣 Blog》（BloggerAds 市調中心，2010）以及《輕熟女拓展交友圈最倚重部落格》（BloggerAds 市調中心，2011）的報告中均指出，以美食作為主題的部落格是最常被瀏覽之部落格類型，女性也熱愛將美食消息作為聊天的話題，且多半受調者表示會以美食部落格作為吃或買的參考指標。

在美食部落格中發佈文章，任何人都能成為美食鑑定家、美食記者、美食導覽員，美食部落格也因此成為資訊散播的重要工具，且更須具備高度的使用性，所以本研究試圖依據網站介面設計原則和使用性來評估美食部落格的介面，希望藉此提高美食部落格的使用價值和親和力。

貳、部落格介面設計準則與使用性評估

Shneiderman（2003）針對使用者互動介面提出設計準則，並歸納出八大要點：保持一致性、提供操作捷徑給慣用使用者、提供有意義的回饋訊息、告知使用者動作狀態、提供簡單的錯誤處理、允許取消動作、提供使用者適當的控制權、減低使用者短暫的記憶負擔，

其設計方法至今仍廣泛應用於不同設計領域，包括電子產品、軟體設計、網站設計、智慧型手機應用程式等，被譽為

(4)

使用者介面設計的「黃金定律」。

部落格雖然也是網站的類型之一，

但是部落格的特性與一般網站相差甚遠，因此須要有適用於其自身的介面設計準則。

一、部落格介面設計準則

Nielsen（2005）曾說明部落格與

一般網站的不同之處，在於網頁的設計、資訊呈現模式、和部落格圈

（Blogosphere）聯絡體系，因此若依一般網站的使用性準則來評估部落格，將會導致介面設計錯誤。故部落格應具有一套適用於自身使用的介面設計準則，

下面 3 篇是部落格介面設計準則的相關研究。

首先，Hsu 和 Lee（2012）從部落

表 2：Hsu 和 Lee 的部落格介面設計準則

構面項目細項

資訊質量

內容

具有深度的文章與圖片內容內容管理

多元內容 ( 內文與圖片 ) 社群

社交層面建立線上社群結交朋友

系統質量

易於管理

初學者容易使用相對獨立的網站維護

親和性與下載速度

頁面具有較高的下載速度功能

選項互動性

服務質量

客製化服務

個別使用者需求的適應性個人化

響應性

情感

美學吸引力愉悅性娛樂性

設計質量

清晰的版面

元素的排列方式 ( 字體、圖形、顏色 ) 可讀性

類別使用

充足的字體大小使用性

容易取向使用方便易於瀏覽

(5)

格的資訊、系統、服務和設計等 4 個角度，提出如表 2 的部落格介面設計準則

（Hsu & Lee, 2012）。

其次，Chiang（2013）從部落格的可靠性、使用性、吸引力與新穎性等 4 個面向，提出如表 3 的部落格介面設計準則（Chiang, 2013）。

表 3： Chiang 的部落格介面設計準則

構面細項

可靠性

快速讀取速度連接的穩定性版型

易於使用

充足的媒體功能

使用性

增加 HTML 文章分類文章隱藏 / 密碼好友列表 / 喜好連結持續更新的首頁

吸引力

個別文章的點擊之人氣數量造訪者數量

同儕聚集同儕推薦

部落格具有很高的名譽

新穎性

預先發佈自動搜尋文章自動保存

部落格每週人氣增長圖部落客自身意見

最後，部落格整體版型的視覺性設計，亦會對讀者有很大的影響力。許峻誠與朱若慈（2010）指出部落格介面風格可對讀者傳達出部落格的意向，且意向的接受程度受限於讀者的偏好（許峻誠、朱若慈，2010）。楊柔琳（2011）

指出部落格主題類型與版型設計具有關聯性，並利用情感維度加以分析，說明不同類型的部落格主題適用不同風格的版型，最後歸納出表 4 的四種版型風格

（楊柔琳，2011）。

表 4：楊柔琳的四種部落格版型風格

版型標準

構面版型種類版型說明

清晰平衡

清楚明亮強調清晰、簡潔、便於瀏覽、

不雜亂。

簡單洗滌冷靜平衡

流行繽紛

流行親切注重設計感，

容易提高使用者的興奮度和輕鬆感，激勵並鼓舞人心。

乖巧可愛活力繽紛樂觀希望

高雅傳統

高雅華麗實用性強的設計觀點，注重條理性及簡單排列的文字選經典傳統單。

虛幻神祕

緊張銳利以沈重色調為主，通常以科幻、另類與充滿藝術感的表現形式為主。

強而有力虛幻未來神祕渺茫

(6)

二、使用性評估

ISO 9241-11（1998）對使用性（Usability）

的定義為「the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use」，表明使用性是指一項產品被特定使用者利用特定方法以有效、效率、和滿意來達到指定的目標。

使用性評估是系統介面評量的一種重要方法，許多針對使用介面的相關研究，均利用使用性評估的方法及準則，

來評估其介面設計上的優劣，並建議介面修正方法，使之系統介面能夠達到最佳化的功效。( 邰婉貞，2001) 透過使用性評估來進行系統設計的評估和測試，可確保使用者的需求獲得滿足。

啟發式使用性評估法於 1990 年由 Nielsen 和 Molich（1990）率先提出，

亦稱為「專家式評估法」。專家式評估法是由擁有使用者設計或人機介面工程相關經驗的研究者來進行系統評估的研究方法。

Nielsen（2005）曾利用使用性評估法來檢測部落格的使用性，並從中舉出 10 項問題（Nielsen, 2005）。

1. 無作者簡介（No author biographies）：

在不知名或非企業型部落格，會因沒有部落客自身的介紹，如「about me」，讓瀏覽者不知道他們所閱讀的部落格出自於何人。

2. 無作者的相片（No author photo）：

一張簡單的照片也成為網路世界中的

一個簡單事實，可以增強部落格的可信度，且人類的對於人臉的記憶與辨識更優於姓名。

3. 難以名狀的文章標題（Nondescript posting titles）：部落客經常會使用命名不符文章內容的標題，且標題本身即屬於一種微型的文章內容，瀏覽者往往只依據搜尋引擎上的標題來決定是否點進查看完整內容。

4. 未提示連結的目的地（Links do not say where they go）：不應浪費瀏覽者的時間去點擊未告知目的地的連結。

5. 經典文章被埋沒（Classic hits are buried）：應在部落格整體頁面導覽中，標示出經典文章，來凸顯這些文章的價值。

6. 僅提供月曆式的導覽（The calendar is the only navigation）：多數部落客僅利用預設的月曆式導覽架構來記錄文章，應使用詳細的文章分類方法來引導讀者，10 至 20 個類別就足以建構出許多主題。

7. 不定期發佈文章（Irregular publishing frequency）：滿足讀者需求是使用性的基本原則之一。因此，時常更新，

甚至定期更新部落格更可以維持部落格的到訪頻率，反之則將失去讀者對部落格的忠實。

8. 混合式的主題（Mixing topics）：混合式的議題較不容易吸引讀者，應當提供專業化的資訊內容，這對於商業型部落格尤為重要。

9. 言論的批評（Forgetting that you write for your future boss）：任何資訊內

(7)

容，包括分享和評論，在發佈前請三思而後行。

10. 使用部落格服務商所擁有的網域名稱（Having a domain name owned by a weblog service）：這代表部落格服務商可以操控你在網路的命運，如任意提高服務費用和強制增加廣告等。

其他部落格介面之使用性評估的相關研究，如管倖生針對「無名小站」

部落格做介面的使用性評估（管倖生，

2007），他訂定典型的模擬情境來進行一般瀏覽者的使用性測試，並利用非結構式的啟發式評估法，即每個專家不遵循特定的準則或方法，以自身的使用經驗來評估部落格的使用性問題，最後彙整分析網頁使用者與專家的看法與意見，提出建議的設計模型。

張惠菁針對不同部落格的個人化設定進行使用性研究，首先進行「無名小站」、「Yahoo 部落格」與「Yam 天空部落」的使用滿意度調查，再利用 Nielsen 的特徵檢驗來評估部落格的使用性問題（Nielsen, 1995），即讓使用者執行一系列的任務，並以使用者的使用特徵來評估使用性問題（張惠菁，

2008）。

王衍仁以 Nielsen 的啟發式評估法則，再彙整各種不同網站類型適用的使用性指標，來探究介面影響瀏覽者的因素（王衍仁，2009）。

參、研究的評估模型、方式和樣本

本研究以上述 Hsu、Chiang、與楊柔琳等人提出的模型為基礎（Hsu

& Lee, 2012；Chiang, 2013；楊柔琳，

2011），依據美食部落格的特色，重新整理出以下表 5 的 3 個設計構面：內容易用性、介面互動性、版型設計（總共 21 個項目）的評估模型，做為本研究的評估依據。3 個設計構面分別說明如下：

1. 內容易用性：部落格須具備多元豐富的資訊內容，且應持續更新。再者，

能提供重要的相關連結和資訊，來提高使用的便利性。

2. 介面互動性：部落格介面功能應以使用者為設計導向，包括簡單的介面架構與易於使用的互動功能，以避免使用者在操作瀏覽時遇到瓶頸，且須將資訊內容分類加值，利於使用者檢索，提高文章的易搜性。

3. 版型設計：版型設計應避免使用過於複雜，設計風格必須符合部落格主題所傳達的意向，且需適當的使用圖像與文字大小，而版型佈局應以實用做為設計觀點，避免不必要的設計物件，來增加讀者閱讀上的疲憊與困惑。

本研究的評估方式是將評估等級分為 3 個級別，如表 6，並使用統計量表來記錄結果，然後將評估的統計數據製作成報表。

(8)

表 5：本研究的評估模型和準則

評估項目評估細節說明

內容易用性

(1) 多元媒體資訊

多元的文章、圖片與影音內容，使得部落格有充足的資訊量，容易滿足讀者的資訊需求與視覺享受。

(2) 個別文章點擊之人氣數量部落格網站提供讀者個別文章點擊數量之訊息，容易顯示文章熱門指數。

(3) 社群推薦

同儕之間透過社群平台，以及利用部落格的引用功能，互相推薦特定之部落格，增加部落格曝光率，吸引更多讀者閱讀部落格文章。

(4) 部落客自身意見

部落客利用片段字詞以及圖片（即圖文並茂的方式）來表達自身心情，而不須發佈一篇完整的文章。

(5) 好友列表 / 喜好連結

部落格網站提供清單或外部鏈結，讀者可以獲取部落格提供的訊息，以及透過外部鏈結得知更多消息來源或官方資訊。

(6) 持續更新的首頁

部落客持續更新部落格首頁之資訊，如：

定期將新增文章或圖片發佈至首頁最新文章或熱門文章之區塊。

介面互動性

(7) 自動搜尋部落格網站提供關鍵字自動搜尋之功能，

減少使用者查找文章的時間。

(8) 文章分類

將部落格的文章、圖片或影像依某一特定性質分門別類，便於使用者查看與回應，

如：文章依地區來分類。

(9) 連接的穩定性

減少不必要的資訊物件、圖案、動畫等，

提高頁面下載速度，避免不正確的資訊連結，降低資訊複雜度。

(10) 功能易於使用

部落格網站的功能操作簡單容易，資訊內容呈現要清晰簡單，使任何到訪部落格之使用者均能一目瞭然，避免介面提供太多的選擇和複雜的方法，以免造成使用者困惑。

(9)

評估項目評估細節說明

(11) 清晰的佈局以簡單的層次排列方式，讓使用者瀏覽全部資料的內容概況，再點選所需的內容。

(12) 一致性

部落格的頁面、內容的組織以及資訊先後順序具有一致性，以及 HTML 與文字的呈現方式，讓使用者容易接近資訊，且能直覺的選取頁面，清楚頁面的順序。

(13) 訊息傳達明確

將各種部落格的說明內容和傳達資訊分門別類，明確指引方向，使得讀者容易獲取所需的資訊。

(14) 易於瀏覽的頁面長度

重要的部落格訊息需放置於首頁區塊，且應避免冗長的頁面資訊，長時間使用捲軸會造成閱讀疲憊的情況發生。

版型設計

(15) 實用設計

強調實用性強與符合使用者習慣的設計觀點，容易讓使用者的注意力集中在網頁內容上，使用由左至右的版型配置可以提高使用效率。

(16) 色彩配置

背景底色與文字圖片的色彩配置應適當，

避免造成閱讀困難。濃度與明亮度應相互搭配。

(17) 字體大小適中充足的字體大小，以免影響閱讀。

(18) 主題一致性

版型風格與色系搭配必須合理，並襯托出部落格的主題內容。如：環保主題網站以綠色色系來襯托部落格意象。

(19) 選項互動

選項的視覺回饋，當使用者點擊選項時，

能瞬間改變色彩，使得視覺有所落差而能讓使用者正確點擊所要的資訊。

(20) 適當使用圖像

避免過多廣告或動畫干擾閱讀，圖片不可過小，且應挑選適當圖片以呈現明確的主題。

(21) 網站區塊

部落格應將文章分類後，於首頁設計不同類型的區塊，以吸引更多讀者閱讀，使得使用者更輕易地搜尋出精選文章，如 : 網誌公告、熱門排行、最新資訊等。

(10)

表 6：本研究的評估等級

級別級別說明

1 無此項設計或服務。

2 有使用性問題。

3 無使用性問題。

為求較廣泛的代表性，本研究的樣本將分為個人美食部落格、公司美食部落格及 Alexa 排名美食部落格等三大類分群樣本，分別說明如下：

1. 個人美食部落格：個人日誌、旅遊雜記，以及經驗分享之部落格等，其部落格文章為個人自由思想創作，且文章總篇數具有 50 篇以上，以及美食類文章較於其他類文章具有明顯比重者，均屬於此分類。

2. 公司美食部落格：國內企業以及媒體組織等，對外宣傳或行銷之部落格。

凡具有商業性質、文章總篇數具有 50 篇以上，以及美食類文章較於其他類文章具有明顯比重者，均屬於此分類。

3. Alexa 排名美食部落格：Alexa 網站排名的計算是以網站的每天平均使用人數、人均存取頁面數、與其他網站的連結或曝光數、網友所留言討論的訊息篇數等資訊為基礎，並以加權平均數來排名。而正式名次是基於最近三個月內資料的平均值，Alexa 世界排名可依「國家」與「網站類型」來分類排名（Alexa, 2013）。臺灣「上網族」網站以 Alexa 世界排名為依據，濾除情色、簡體、香港及英文等網站，將臺灣繁體網站做成臺灣熱門

網站排行榜，並從中分類出臺灣部落格排行榜（上網族，2013），部落格排行榜包括繁體網站總排名與 Alexa 統計值，其數據按月份更新。本研究依據此排行，篩選出依美食為主題之部落格作為研究樣本。

樣本的選取過程如下：

1. 臺灣地區有提供網路申請者 Blog 使用空間與技術支援的部落格服務提供商（BSP）共有 9 間，但在扣除無建立美食主題類別、分類結果不明確、和重複出現機率高的 BSP 後，

剩下痞客邦、新浪、Xuite 隨意窩、

UDN、PCHome 個人新聞臺等 5 間 BSP 可作為本研究的分析樣本。

2. 接著再從上述 5 間 BSP 隨機抽取 3 間，結果中選的有：痞客邦、Xuite 隨意窩、PCHome 個人新聞臺，再依照個人美食部落格、公司美食部落格、Alexa 排名美食部落格來建立分群樣本。

3. 經實際調查發現，3 間 BSP 中個人美食部落格的數量均遠大於公司美食部落格的數量，因此從每間 BSP 中各隨機抽取 2 個個人美食部落格樣本和 1 個公司美食部落格樣本，共計有 6 個個人美食部落格樣本和 3 個公司美食部落格樣本。

4. Alexa 部落格排名中，發現以「美食」為主題的部落格共有 11 筆可用樣本，從中隨機抽取 3 個樣本。

5. 在代表性樣本方面，以公司的到訪人數、個人美食部落格的到訪人數與 Alexa 美食部落格排名最高者等方式，從 3 群中各取 1 個樣本作為代表

(11)

性樣本，共計 3 個樣本。

最後選出的 15 個美食部落格樣本，其編號和名稱如表 7：其中編號 7、11 和 15 為代表性樣本。

本研究總計有 15 個樣本來進行介面的使用性評估。這種取樣的方法應該可以同時兼顧一般性和代表性，同時各群集的代表性樣本與一般隨機樣本，也會進行詳細分析與比較，來了解代表性美食部落格與一般美食部落格之間是否有差異。

由於研究者本身具有豐富的美食部落格使用經驗和使用性評估相關的研究

知識，因此本研究採取啟發式評估法，

由研究者直接來進行評估。評估期間為 2014 年 6-9 月。

肆、美食部落格介面評估結果與分析

表 5 的評估模型和準則，將評估項目分為內容易用性、介面可用性，以及版型設計三大構面，再細分為 21 項評估項目。15 筆美食部落格樣本編號 1 至 15 號。整體樣本評估結果如表 8 的美食部落格介面使用性評估統計表，其

表 7：本研究 15 個美食部落格評估樣本清單

美食部落格樣本群編號美食部落格樣本名稱

個人美食部落格

1 小瓶子好吃遊記

2 ivy 的おしゃれ部落

3 島民食庫

4 Enjoy Wine 品酒誌 5 YOYO 愛生活

6 Bestof 美食餐廳必吃排行榜 7 Vavian 的美食樂園

公司美食部落格

8 六堆釀興業有限公司

9 松竹梅茶行

10 義大利廚房 11 用點心做點心

Alexa 排名美食部落格

12 MASA 料理 ABC 13 迴紋針

14 橘子 15 Yuki’s Life

(12)

中等級 1 為無此項設計或服務；等級 2 為有使用性問題；等級 3 為無使用性問題。

以下將個人美食部落格、公司美食部落格，和 Alexa 排名美食部落格等 3 類型的評估結果，分別整理分析如表8。

表 8：美食部落格介面使用性評估統計表

樣本編號　

　評估項目 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

內容易用性

(1) 多元媒體資訊 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 (2) 個別文章點擊之人氣數量 2 2 2 2 3 3 1 3 2 3 3 1 1 1 1 (3) 社群推薦 2 2 3 3 3 3 3 2 2 3 3 2 3 3 3 (4) 部落客自身意見 3 3 3 3 3 3 3 2 2 3 2 3 3 3 3 (5) 好友列表 / 喜好連結 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 (6) 持續更新的首頁 3 3 3 2 3 3 3 3 3 3 3 2 3 3 3

介面互動性

(7) 自動搜尋 3 1 3 1 3 3 3 3 3 3 3 2 3 3 3 (8) 文章分類 3 3 3 3 3 2 3 3 3 3 3 2 2 2 3 (9) 連接的穩定性 3 2 3 3 2 2 2 2 2 3 3 3 3 3 3 (10) 功能易於使用 2 2 3 3 2 3 3 2 2 3 3 3 3 3 3 (11) 清晰的佈局 3 3 2 2 3 3 3 3 3 3 3 3 3 3 3 (12) 一致性 2 2 2 2 2 2 3 3 2 2 2 3 2 3 3 (13) 訊息傳達明確 3 3 3 3 2 2 3 3 3 2 2 3 3 2 3 (14) 易於瀏覽的頁面長度 2 2 2 2 2 3 3 2 3 3 3 3 3 3 3

版型設計

(15) 實用設計 3 3 2 2 2 3 3 3 3 2 3 3 3 3 3 (16) 色彩配置 3 3 3 2 3 3 3 3 2 3 3 3 3 3 3 (17) 字體大小適中 3 3 3 3 2 3 3 3 3 3 3 3 2 3 3 (18) 主題一致性 3 2 2 2 3 2 3 3 2 2 3 3 2 3 3 (19) 選項互動 3 3 3 3 2 2 3 3 3 2 3 3 3 3 3 (20) 適當使用圖像 2 2 2 3 2 2 2 2 2 2 2 2 2 2 2 (21) 網站區塊 2 2 2 3 3 2 2 2 2 2 2 2 2 2 2

(13)

一、個人美食部落格評估結果分析

表 9 為個人美食部落格評估等級統

計表，主要顯示各項評估等級的個數總和，意即樣本編號 1 至 7 號的評估統計結果。

表 9：個人美食部落格評估等級統計表

評估等級　　評估項目

1 2 3

欠缺有使用性問題無使用性問題

內容易用性

(1) 多元媒體資訊 0 0 7

(2) 個別文章點擊之人氣數量 1 4 2

(3) 社群推薦 0 2 5

(4) 部落客自身意見 0 0 7

(5) 好友列表 / 喜好連結 0 0 7

(6) 持續更新的首頁 0 1 6

介面互動性

(7) 自動搜尋 2 0 5

(8) 文章分類 0 1 6

(9) 連接的穩定性 0 4 3

(10) 功能易於使用 0 3 4

(11) 清晰的佈局 0 2 5

(12) 一致性 0 6 1

(13) 訊息傳達明確 0 2 5

(14) 易於瀏覽的頁面長度 0 5 2

版型設計

(15) 實用設計 0 3 4

(16) 色彩配置 0 1 6

(17) 字體大小適中 0 1 6

(18) 主題一致性 0 4 3

(19) 選項互動 0 2 5

(20) 適當使用圖像 0 6 1

(21) 網站區塊 0 5 2

總　計 3 52 92

(14)

根據表 9 可發現有 2 個評估項目中出現等級 1（無此項設計或服務），和 17 個評估項目中出現等級 2（即有使用性問題），以比例來說，使用性較嚴重的項目（合併等級 1 和 2）為：適當使用圖像、一致性、網站區塊、易於瀏覽的頁面長度、連接的穩定性、主題一致性、個別文章點擊之人氣數量等 7 個項目，其使用性問題比例均超過 50％，

以下是這 7 個有使用性問題項目的詳細說明：

1. 適當使用圖像：評估時發現部落格側邊欄位多數呈現的是廣告圖片鏈結，

其資訊內容與該部落格主題並無任何相關聯性，而實際測試時，亦發現這些外部鏈結無法提供正向的資訊回饋，且未清楚告知鏈結目的。

2. 一致性：美食部落格在文章頁面、分類頁面和首頁的介面架構雖符合一致性，但在媒體功能上，如相簿、影音、地圖和留言板等的介面設計，包括選項和版面區塊方面，沒有採用相同組織架構，操作步驟也有所差異，

容易造成使用者困惑。

3. 網站區塊：多數部落格雖已建置不同類型的區塊，且會按時間或點閱次數等特性來設定區塊類型，如熱門文章和最新文章等，但仍有某些區塊並非該部落格所需呈現的資訊，如廣告區塊、好康分享、活動區塊等。因此，

這些區塊不能提供正向資訊，同時也無法作為資訊取得的捷徑。

4. 易於瀏覽的頁面長度：首頁文章區塊一次呈現超過 15 篇文章，容易造成瀏覽器的頁面拖曳捲軸過長，雖能一

覽所有首頁文章，但容易降低頁面的瀏覽效率，拖曳過程也會衍生出操作上的厭倦或疲乏。

5. 連接的穩定性：首頁文章區塊一次呈現過多或過大的圖片，容易造成網頁讀取速度降低，且部份文章中出現外部連結錯誤，導致無法顯示正常的圖像，易造成資訊錯誤，且無任何回報訊息，難以從錯誤中復原。

6. 主題一致性：雖然文章、分類、首頁等頁面的版型風格、區塊配色、背景等均符合一致，但仍有某些頁面並非使用相同主題版型，如相簿、留言板。因此，頁面的視覺差異，容易造成頁面操作錯誤或困惑。

7. 個別文章點擊之人氣數量：首頁文章區塊並無標示單篇文章點擊數量，需點選進入文章頁面後才會顯示點閱次數統計。當指標性的功能介面未標示清楚時，會降低檢索欲望。

二、公司美食部落格評估結果分析

表 10 為公司美食部落格評估等級統計表，主要顯示各項評估等級的個數總和，意即樣本編號 8 至 11 號的評估統計結果。

根據表 10 可發現有 0 個評估項目中出現等級 1（無此項設計或服務），

和有 14 個評估項目中出現等級 2（即有使用性問題），以比例來說，使用性較嚴重的項目（合併等級 1 和 2）為：

網站區塊、適當使用圖像、一致性、部落客自身意見等 4 個項目，其使用性問題比例均超過 50％，以下是這 4 個項

(15)

目的詳細說明：

1. 網站區塊：該部落格雖有不同類型的區塊，如熱門文章、最新文章，但部份區塊並非該部落格所需呈現的資

訊，如廣告區塊、動畫區塊。因此，

這些區塊不能提供正向資訊，同時也無法作為資訊取得的捷徑。

2. 適當使用圖像：首頁側邊欄位、文章

表 10：公司美食部落格評估等級統計表

1 2 3

內容易用性

(1) 多元媒體資訊 0 0 4

(3) 社群推薦 0 2 2

(5) 好友列表 / 喜好連結 0 0 4

介面互動性

(7) 自動搜尋 0 0 4

(8) 文章分類 0 0 4

(9) 連接的穩定性 0 2 2

(10) 功能易於使用 0 2 2

(11) 清晰的佈局 0 0 4

(12) 一致性 0 3 1

(13) 訊息傳達明確 0 2 2

版型設計

(15) 實用設計 0 1 3

(16) 色彩配置 0 1 3

(17) 字體大小適中 0 0 4

(18) 主題一致性 0 2 2

(19) 選項互動 0 1 3

(20) 適當使用圖像 0 4 0

(21) 網站區塊 0 4 0

總　計 0 29 54

(16)

內文、分類頁面均有過多的廣告圖片或鏈結，甚至在各頁面設置了持續閃動的動畫圖片，這些圖片的資訊內容與該部落格並無任何相關聯性，易干擾閱讀。

3. 一致性：雖然在文章、分類、首頁的切換過程的介面架構等方面符合一致，但在媒體功能上，如相簿、影音的介面並非使用相同組織架構，且不同頁面之間因為物件的不同，會增加操作記憶的負擔。

4. 部落客自身意見：部落格多半提供的是官方資訊，並非個人意見，其用詞遣字較不貼近使用者生活中的慣用語，如產品資訊和活動消息。內文通常只有單一的廣告圖片或純文字介紹，且較少以圖文並茂的方式呈現。

此外，剛好有 5 個項目其使用性問題比例為 50％：主題一致性、訊息傳達明確、功能易於使用、連接的穩定性、社群推薦等，以下是這 5 個有使用性問題項目的詳細說明：

1. 主題一致性：雖然文章、分類、首頁的切換過程版型符合一致，但其它頁面並非使用相同主題版型，包括背景色彩、選項設計等，且部分部落格使用的選項或文字色彩與背景色彩相近，使得操作時不易察覺區塊的內容與功能。

2. 訊息傳達明確：首頁文章區塊通常以時間排序，若有重要內容需長時間放置在首頁中，會利用文章置頂功能作為標示，但部分部落格並未明確說明或區分首頁第一篇文章為置頂文章。

又部落格在切換頁面時，並無任何選

項或說明可連結回首頁或是顯示目前頁面位置。

3. 功能易於使用：主選單部分提供的功能與該部落格無任何相關性，使用者也無法透過該功能來提升閱讀效率或取得資訊，且該功能複雜難以操作，

易造成使用者困惑。

4. 連接的穩定性：部分文章中出現外部連結錯誤，導致無法顯示正常的圖像，且首頁的側邊欄位還有不必要的物件，易產生視覺上的影響，降低資訊的能見度。

5. 社群推薦：部落格在單篇文章中並無提供外部社群推薦功能，僅提供隸屬相同服務商的社群網站推薦功能，而該功能只能分享單張圖片，無法選擇整篇文章，如利用 kait 功能分享照片至 KAZA 社群平台，且使用時需切換頁面，導致操作步驟不一致。

比較公司美食部落格和個人美食部落格在使用性評估等級 1 和 2 的評估結果，發現公司美食部落格有使用性問題的項目數（14 項），雖少於個人美食部落格（19 項），但在使用性較嚴重的項目數方面則較多（公司 9 項、個人 7 項）。

三、 Alexa 排名美食部落格評估結果分析

表 11 為 Alexa 排名美食部落格評估等級統計表，主要顯示各項評估等級的個數總和，意即樣本編號 12 至 15 號的評估統計結果。

根據表 11 可發現有 1 個評估項目

(17)

中出現等級 1（無此項設計或服務），

和有 9 項評估項目中出現 18 筆評估等級 2（即有介面使用性問題者），以比例來說，使用性較嚴重的項目（合併等

級 1 和 2）為：個別文章點擊之人氣數量、文章分類、適當使用圖像、網站區塊等 4 個項目，其使用性問題比例均超過 50％，以下是這 4 個有使用性問題

表 11：Alexa 排名美食部落格評估等級統計表

1 2 3

內容易用性

(1) 多元媒體資訊 0 0 4

(3) 社群推薦 0 1 3

(5) 好友列表 / 喜好連結 0 0 4

介面互動性

(7) 自動搜尋 0 0 4

(8) 文章分類 0 3 1

(9) 連接的穩定性 0 0 4

(10) 功能易於使用 0 0 4

(11) 清晰的佈局 0 0 4

(12) 一致性 0 1 3

(13) 訊息傳達明確 0 1 3

版型設計

(15) 實用設計 0 0 4

(16) 色彩配置 0 0 4

(17) 字體大小適中 0 1 3

(18) 主題一致性 0 1 3

(19) 選項互動 0 0 4

(20) 適當使用圖像 0 4 0

(21) 網站區塊 0 4 0

總　計 4 17 63

(18)

項目的詳細說明：

1. 個別文章點擊之人氣數量：欠缺此項資訊，使用者將無法得知個別文章受歡迎程度。

2. 適當使用圖像：首頁頂部、文章分類頁面、文章內容及各種功能頁面均使用過多的外部廣告圖片，其資訊內容與部落格無關聯性，容易造成部落格訊息的能見度降低。

3. 網站區塊：部落格已建置不同類型的區塊，可以更快篩選出精選文章，以吸引讀者閱讀，如熱門文章、最新文章，但有些區塊並非該部落格所需呈現的資訊，如廣告、博客來搜尋引擎。因此，提供太多的選擇和複雜的方法，易造成使用者困惑。

4. 文章分類：文章雖有按某一性質作為分類準則，但其分類並非由作者自行建置，而是利用搜尋功能代入分類字詞作為檢索，其檢索結果即分類結果，因此分類文章可能較不正確。又部份部落格沒有依據某一性質分門別類，且分類項目過多，造成檢索時間的浪費，甚至影響頁面的長度。

以 3 個類群在使用性評估等級 1 和 2 的評估結果比較來說，Alexa 排名美食部落格中出現使用性問題的項目少於公司與個人美食部落格兩群（Alexa 10 項、公司 14 項、個人 19 項），且評估比例超過 50％的嚴重項目也是當中最少的（Alexa 3 項、公司 9 項、個人 7 項）。

就 3 個類群共通的使用性問題項目來分析，可觀察出三群中，有 1 個是比例超過 80％的共同項目，即適當使用

圖像（個人 86％、公司 100％、Alexa 100％），同時也是各群中比例最高的項目，反映出美食部落格在該項目的使用性問題最嚴重。其次是網站區塊項目，其比例均超過 70％（個人 71％、公司 100％、Alexa 100％）。

四、一般隨機樣本和代表性樣本的評估結果比較

從表 12 可以清楚看出 3 個類群的代表性樣本（表 12 中粗體數字 7、

11、15）均比同類型一般隨機樣本的表現較為優良，這可從評估等級 3（符合介面設計原則且無使用性問題）的數目比較得知。首先，個人美食部落格的代表性樣本（編號 7）有 17 項等級 3，

而一般隨機樣本（編號 1-6）平均只有 12.5 項等級 3。其次，公司美食部落格代表性樣本（編號 11）有 16 項等級 3，

而一般隨機樣本（編號 8-10）的平均值為 13。最後，Alexa 排名美食部落格的代表性樣本（編號 15）有 18 項等級 3，

而一般隨機樣本（編號 12-14）平均只有 14.7 項等級 3。

伍、結語

由於目前國內外關於部落格使用性評估的文獻不多，更無美食部落格使用性評估的研究文獻，因此本研究彙整先前一些其他類型部落格介面設計準則與使用性評估的相關研究後，設計了一個有內容易用性、介面互動性、版型設計等 3 個構面，合計含有 21 個評估項目

(19)

的介面模型。使用性評估方式採用 3 個等級：等級 1 為無此項設計或服務，等級 2 為有使用性問題，等級 3 為無使用性問題。

從上述的表 12 可以清楚看出，整體而言，Alexa 排名美食部落格的表現較優於個人美食部落格和公司美食部落格，個人美食部落格和公司美食部落格則相差不多。同時，3 個類群的代表性樣本均比同類型一般隨機樣本的表現優良。

以個別評估項目來看，適當使用圖像和網站區塊這二個項目的使用性

問題，不但是 3 個類群共有，而且在 3 個類群中其比例上也是最高的二項，

適當使用圖像項目的比例分別為個人 86％、公司 100％、Alexa 100％，網站區塊項目的比例分別為個人 71％、公司 100％、Alexa 100％，顯示所有類型美食部落格在這二個項目上有嚴重的使用性問題，亟待改善。

其他評估項目方面，使用性問題比例超過 50％者，個人美食部落格另有 5 個項目：一致性、易於瀏覽的頁面長度、連接的穩定性、主題一致性、個別文章點擊之人氣數量；公司美食部落格另有 2 個項目：一致性和部落客自身意見，但是另有 5 個項目的比例為 50％：主題一致性、訊息傳達明確、功能易於使用、連接的穩定性、社群推薦；Alexa 排名美食部落格則只另有文章分類 1 個項目。

雖然臉書的出現確實在很多方面對部落格造成很大的衝擊，不過在不同的領域其影響性有很大的差異。由於研究者本身即是美食資訊的經常使用者和愛好者，而從自己的親身體驗中知道，至少就美食資訊而言，美食部落格不但仍然經常被使用，其重要性也依然屹立不搖。因此在國內外無美食部落格使用性評估的研究文獻下，希望藉此初探性的研究能收拋磚引玉之效，激起更多這方面的研究，例如將此評估模型和準則應用於其他使用性評估的研究方法（如使用者訪談或問卷調查），如此一來，可進行不同研究方法間的比較。

表 12：樣本各評估等級數目統計表

樣本編號

等級3 數目

等級2 數目

等級1 數目

1 14 7 0

2 11 9 1

3 13 8 0

4 12 8 1

5 12 9 0

6 13 8 0

7 17 4 0

8 14 7 0

9 11 10 0

10 14 7 0

11 16 5 0

12 14 6 1

13 14 6 1

14 16 4 1

15 18 2 1

(20)

誌謝

感謝審查者的評審意見和指正，使本文更為完善。

參考文獻

BloggerAds 市調中心（2010）。部落客最愛人氣 blog。上網日期：2012 年 12 月 11 日，檢自 BloggerAds 市調中心：http://www.bloggerads.net/AdsPortal/BlogTell/38 BloggerAds 市調中心（2011)。輕熟女拓展交友圈最倚重部落格_{。上網日期：2012}

年 12 月 11 日，檢自 BloggerAds 市調中心：http://www.bloggerads.net/AdsPortal/

BlogTell/62

Pollster 波仕特線上市調（2010）。何種部落格心得分享文章最能吸引你呢。上網日期：2012 年 11 月 7 日，檢自 Pollster 波仕特線上市調：http://www.pollster.com.

tw/Aboutlook/lookview_item.aspx?ms_sn=1253

上網族（2013）。臺灣部落格排名。上網日期：2013 年 1 月 9 日，檢自 http://www.

pig.tw/CwP/P/P15695.html

王衍仁（2009）。部落格介面設計之使用性探討。未出版之碩士論文，國立臺中技術學院多媒體設計系，臺中市。

林淑芬（2008）。美食當道－美食部落格行銷與消費者滿意度研究。未出版之碩士論文，淡江大學大眾傳播學系，新北市。

邰婉貞（2001）。公共圖書館網站介面評估：以臺灣地區縣（市）級以上圖書館為例。未出版之碩士論文，天主教輔仁大學圖書資訊學系，新北市。

洪淑芬（2005）。部落格 (Blog) 之特質與發展現況：應用於圖書館服務之探討。國家圖書館館刊 (2)，27-71。

張惠菁（2008）。使用者對 Blog 個人化設定之使用性研究。未出版碩士論文，國立臺北教育大學教育傳播與科技學系，臺北市。

許峻誠、朱若慈（2010）。個人化部落格介面之意象與偏好分析。工業設計，122，

108-113。

陳登報（2008）。博客寫作特徵及其雙重效應研究。河南師範大學學報（哲學社會科學版），35(4)，197-199。

創市際市場研究顧問（2007）。部落格經營傾向與滿意度調查。上網日期：2012 年 11 月 3 日，檢自創市際市場研究顧問：http://www.insightxplorer.com/specialtopic/

self_blog200710.html

楊柔琳（2011）。部落格版型設計與文章類別關聯性之研究。未出版之碩士論文，

世新大學資訊傳播學系，臺北市。

(21)

管倖生（2007）。「無名小站」部落格介面之使用性評估。科技學刊，16(1)，61-74。

維基百科（2012）。部落格。上網日期：2012 年 11 月 3 日，檢自 wikipedia: http://

zh.wikipedia.org/zh-tw/Blog

Alexa. (2013). Alexa. Retrieved January 3, 2013, from http://www.alexa.com/topsites/

countries

Chiang, Y.-H. (2013). Using a combined AHP and PLS path modelling on blog site evaluation in Taiwan. Computers in Human Behavior, 29 (4), 1325-1333.

Hsu, C.-C., & Lee, Y.-S. (2012). Exploring the critical factors Influencing the quality of blog interfaces using the Decision-Making Trial and Evaluation Laboratory (DEMATEL) Method. Behaviour & Information Technology, 184-194.

ISO/IEC,9241-11 Ergonomic requirements for office work with visual display terminals (VDT)s-Part 11 Guidance on usability. 1998: ISO/IEC 9241-11: 1998 (E).

Nielsen, J. (1995). Usability inspection methods. CHI '95 Conference Companion on Human Factors in Computing Systems, 377-378.

Nielsen, J. (2005). Weblog usability:The top ten design mistakes. Retrieved January 10, 2014, from http://www.useit.com/alertbox/Weblogs.html

Nielsen, J., & Molich, R. (1990). Improving a human-computer dialogue. Communications of the ACM, 33 (3), 338-348.

Shneiderman, B. (2003). Designing the user interface. India: Pearson Education.

美食部落格介面的使用性評估初探 Primary Investigation of Food Blog Interface Usability Evaluation