網站資訊結構¶²路資訊...4...

1

網站資訊結構網站資訊結構

謝寶煖謝寶煖

台灣大學圖書資訊學系副教授台灣大學圖書資訊學系副教授

20062006年年99月月77日日http://http://www.lis.ntu.edu.tw/~pnhsiehwww.lis.ntu.edu.tw/~pnhsieh

[email protected]@ntu.edu.tw

第第2828屆醫學圖書館工作人員研討會屆醫學圖書館工作人員研討會

網站設計的演進

• 第一代– Build it, and they will come.– 一人包辦的網站，不知道顧客怎麼用網站，也不知道網站與組織目標的關係

• 第二代– Advertise that you sell it online, and they will come.– 花大錢為網站打廣告，希望顧客上網交易

• 第三代：Customer-Centered Website– 建立powerful website，提供真正有用的內容，創造顧客的正向經驗

2

內容大綱

• 資訊結構與資訊結構師• 視覺化資訊結構• 首頁設計原則

Information Architecture, IA

• 資訊結構• What is information architecture?• What does an information architect do?• The user experience• Flow and tasks• Deliverables

– List of content and organization– Description of fuctionality– Wireframes

3

資訊結構是什麼?• 網站資訊結構是一個新領域，也才只有幾年的時間而

已，但是其未來的需求與成長是可以預見。

• 網站這個新媒體的蓬勃發展，使得整理大量資訊的需求也愈來愈殷切。

• 資訊結構是以圖書館學與人機互動為基礎，所發展出來的一門學問。（Van Dijck, 2003, 8）

• 資訊結構是網站設計的新領域。– 資訊結構和視覺設計(visual design)或程式設計是不一樣的，

因為資訊結構關心的不只是網站的外觀，也不只是網站的功能（functionality）。

• 資訊結構的目的是建立好用、滿足站主也滿足使用者需求的網站。

• 資訊結構不是美工，也不是程式，而是溝通。

好的資訊結構是簡單、清楚、優雅，是很容易使用的網站。

4

不好的資訊結構是迂迴的、不一致的、複雜的，是很難用的網站。

IA Definition — Quotes • “Architecture: The art or science of building […] a unifying

or coherent form or structure.”—Webster’s Dictionary

• “Information is data endowed with relevance and purpose.”—Peter Drucker, Economist

• “[An IA is] 1) the individual who organizes the patterns inherent in data, making the complex clear; 2) a person who creates the structure or map of information which allows others to find their personal paths to knowledge.”

—Richard Saul Wurman, Information DesignerInformation Architects

5

資訊結構師做什麼?

• “Information architect”這個詞是「資訊焦慮」的作者Richard Saul Wurman 在1975年提出來的，但是一直到近年來國外才有人自稱為資訊結構師。

• 資訊結構師的主要工作是組織網站資訊，讓使用者可以找到想要的資訊，可以完成任務。讓使用者更高興，買更多的東西，在網站停留更多的時間，讓公司賺更多的錢。

資訊結構師做什麼?• 資訊結構師要做的事

– 使用者研究（User research）使用者想在網站上做什麼事？完成什麼樣的任務？

– 定義內容（content）和功能（functionality）什麼樣的內容和功能可以幫助使用者和組織達成其目的？

– 發展組織架構（organization schemes）網站該如何組織？

– 與視覺設計或美工設計人員，共同發展介面（interface）

– 監督網站的建置

6

餐廳網站：依餐點分類

餐廳網站：依客群分類

7

餐廳網站：依流程群組

餐廳網站：依功能組織

8

• 資訊結構師的大部份產出（deliverables）是溝通資訊，maps 和diagrams只是溝通工具而已，不可本末倒置。因為資訊結構師在網站設計團隊（web design team）中扮演重要的溝通角色，所以傾聽（listen）是必要能力。

使用者經驗（User experience）

• 使用者經驗是使用者訪問網站當時的感覺與想法的加總。

– 如果是正向的訪問經驗，感覺應該很有成就感、很滿足。

– 不好的使用經驗會驅使訪客快快離開網站，殘留的沮喪和生氣感受會讓訪客不再回到這個網站。

– 資訊結構師要關心使用者經驗。在網站設計團隊的討論中，資訊結構師要站使用者這邊，為網站預設的客群發聲。

9


• 訪問一個網站時感覺是不是愉快，取決於很多因素– 視覺設計（look and feel）– 內容（文字和圖片）– 功能性（能做什麼）– 績效（速度）– 如果訪客找不到想找的東西或無法完成他想做的事，上面所舉的每一項要素都無法讓訪客留下正向的使用經驗。訪客最常抱怨的是，「我想不到我想找的東西」。人們對網站的認知，大半來自於是否可以達成其上網的目的。所以，好的資訊結構是網站成功的關鍵。


• 要將使用者的任務和目的設計到網站中，資訊結構師要做的第一件事是真切地了解網站的使用者是誰，他想要上網做什麼。所有的設計決策都源自了解訪客。

• 對使用者目標的理解與對組織目標的理解之間，必須取得平衡。通常，組織要的，可能和使用者要的是不一樣的。例如：組織希望蒐集個人資訊，個人卻想要保護個人隱私。資訊結構師的挑戰，就是怎麼樣同時關照兩方的需求。

10

流程與任務（Flow and tasks）• 資訊結構師設計網站，而不只是網頁• 訪客對網站的訪問經驗，不是由一個網頁決定的，而是由所訪問過的所有網頁來共同決定。

• 網站中的每一個網頁都必須– 很美（beautiful）– 很好用（easy to use）– 內容很豐富（rich in content）– 但是如果這些網頁沒有連貫沒有條理，那麼整體的訪問經驗還是很糟糕的

流程與任務（Flow and tasks）• 流程（Flow）連結網頁，支援任務（tasks）。任務是訪客上網打算完成的一系列動作（actions），例如發email、買書、或研究某個主題。

• 大部份的任務需要資訊結構師設計一個流程，讓訪客可以循序逛過幾個螢幕後完成任務。任務流程是經過設計的。這就是為什麼我們必須以使用者的立場來思考訪客上站來要做什麼，然後我們才能為訪客設計流程。任務可以很複雜，可以再細分成幾個小任務（sub-tasks）。例如：發email這個簡單的任務，還可能包括一個小任務—拼字檢查（spell check）。

11

流程與任務（Flow and tasks）• 如果網站只設計給一個人使用，只做一件事，要設計一個完美的網站就很容易。但是網站的使用者通常包括各種不同類型的使用者，所以必須能夠支援多重任務（multiple tasks）和小任務（sub-tasks）。設計流程來支援最重要的任務，不是一件簡單的事。

產出（Deliverables）• 內容和組織的清單（List of content and organization）– 資訊結構師通常必須負責研擬一份網站內容及其結構的清單，而且通常是以網站地圖（sitemap）和內容表（content table）的方式呈現。

• 網站地圖和內容表是兩種不同的網站內容呈現方式，各有優缺點

– 網站地圖可以清楚地展現網頁結構– 內容表則可以呈現長串的網頁內容，而且可以提供更多詳細的資訊

12

• 功能性描述（Description of functionality）– 功能性描述和任務流程（task flows）是要說明網站是如何運

作的，個別的網頁間是如何連結運作，訪客上網可以執行什麼任務。

– 呈現的方式可以有很多種，包括scenarios和流程圖（flow chart）。

• Wireframes– Wireframes就像是使用者介面的草圖，展現介面設計

（interface design），只是少了視覺設計（visual design）– Wireframe在一個頁面展示按鈕（buttons）、連結

（links）、內容（content）和其他的介面項目，同時顯示各項目之間的關係

– Wireframes是由資訊結構師和視覺設計師共同發展出來的成果

– Wireframe很有用，因為它讓看的人可以關注使用者介面的結構，反複修改，而無需浪費時間修改視覺設計。

content table

13

sitemap

flow chart

14

Wireframes

Information-seeking behavior

• How do people find information on the web?– Searching: enter queries into search systems– Browsing: navigating from link to link– Asking: email someone, chat with someone

online, contact someone subsequent to looking online

• Might use one or more of these methods in a single information-seeking session

15

Information Architecture

• Organization systems 組織系統– Classification and metadata

• Labeling systems 標示系統• Navigation systems 導覽系統• Search Systems 搜尋系統

• Layout & design

顧客導向網站設計

顧客導向網站設計

好用

效能

品牌價值滿意

內容

16

Good Information Architecture

• Is based on:– User Goals– Business Goals– Classification of Content

• Good information architecture is invisible to the user.

17

全校內容時事內容

Academics

組織系統

搜尋系統導覽系統

18

視覺化資訊結構

• Visual design 視覺設計– Colors– Font styles– Image selection

• Information design 資訊設計– Three columns– Uses icons for main options: home, index, help,

search• Interaction design 互動設計

– Linked images, About Dartmouth, Teaching & Research

– Pull-down menu for “quick links”

視覺化資訊結構

• 訪客總是帶著問題上網– 我在那裏？– 我要如何找到相關資訊?我可以在站上找到什麼？– 我知道我要找什麼，但我要如何搜尋到？– 除了網站，我可以怎樣與組織溝通？– 組織有什麼事情發生?– 現在組織有什麼事情發生?– 組織的人有什麼很棒的東西放在網站上?– 我該如何回到首頁或者重新來過？– 我可以在網站或組織的什麼地方可以得到協助？– 我知道我要什麼（我曾經到過）我可以怎麼直接跳到那裏嗎？這個網站有什麼？

19

我在Dartmouth

我可以在這個網站上找到：

我知道我要什麼，我可以搜尋：寫信打電話都嘛會通

Dartmouth有這些事情發生

Dartmouth有這些事情正在發生

Dartmouth人的酷料

我可以回到首頁重新來過

我可以直接跳到：

20

資訊結構要素

• 瀏覽輔助• 搜尋輔助• 內容與任務• 「看不見的」要素

( “invisible” components)

21

資訊結構要素

• 瀏覽輔助– 組織系統

• 分類網站內容（taxonomies and hierarchies）– 全站導覽系統(site-wide navigation systems)

• 主要導覽系統，幫助訪客知道身在那裏、可以到那裏– 局部導覽系統(local navigation systems)

• 主要導覽系統，幫助訪客在網站的特定部分（subsite）知道身在那裏、可以到那裏

– 網站地圖（sitemaps）/目次（tables of contents）– 網站索引（site indexes）– 網站指引（site guides）– 網站精靈（site wizards）– 文內連結系統（Contextual linking systems）

資訊結構要素

• 搜尋輔助– Search interface– Query language– Retrieval algorithms– Search zones– Search results

22

資訊結構要素

• 內容與任務– Headings– Embedded links– Embedded metadata– Chunks– Lists– Sequential aids– identifiers

資訊結構要素

• 「看不見的」要素( “invisible”components)– Controlled vocabularies– Thesauri– Rule sets

23

首頁設計原則

• 建立正向的第一印象• 首頁要看起來像首頁• 呈現所有的主要選項• 頁頁連首頁• 以一個螢幕顯示

建立正向的第一印象

圖書館網站首頁

• 最多人訪問• 最多人經過

• 吸引/誘惑顧客• 留住顧客

• 顧客多元• 需求多樣

24

Homepage PortalPortal• 建立正向的感官體驗

look and feel• 塑造網站形象與品牌

Build site identify and brand• 提供有用的內容• 讓導覽很容易• 版面聚合合邏輯• 下載速度快

Homepage Portal• 建立正向的感官體驗

look and feel– Style 風格

• 網站的顏色、圖片、文字、用語不對，顧客的感覺就不對，會讓顧客質疑是不是連錯站了。

– 好用性測試

– 例：http://www.library.yale.edu/http://libraries.mit.edu/http://www.princeton.edu/main/library/

25

Homepage PortalPortal• 塑造網站形象與品牌

Build site identify and brand– 顧客要知道這個網站是有用的，是有價值的，是可以信任的

– 顧客會記住這個網站，繼續用這個網站，向朋友介紹這個網站

– 用文字、logo、照片、插圖來強調我們是值得信任的，我們是專業的

– 網站的每一個網頁都要強化一致的網站認同，建立信任

26

Site Branding

• Yale、Princeton大學圖書館網站非常一致地塑造其網站品牌，幫助顧客辨識目前在網站的什麼地方，幫助顧客建立圖書館的形象

• 品牌是顧客認得、記得– Think, Feel, Do

27

• 網站評估– 內容品質：這個網站有沒有我要的東西？– 好用：很容易很快找到我想要的？– 效能：速度快不快？– 滿意：整體的經驗是否滿意？– 品牌價值：這個網站有沒有提供重要的、特別的東西？

XX圖書館網站形象

• 請用一個形容詞來描述您希望XX圖書館網站傳達的形象

– 例：專業friendly……

28

Brand Identity

• 顧客透過brand image來識別網站– 如果顧客到了一個網站，可是無法辨識身處何方，那麼如何建立網站品牌

– 如果顧客逛到網站的任何一頁，卻不知道身處何方，那麼網站品牌是無法強化的

網站品牌識別設計

• 一致– 網站識別標籤無論在何時出現均應採用同樣的字體、顏色、圖片、相對的位置、比例

– 重複有助於顧客回想• 大小

– Logo要夠大，最好是網頁中第二或第三顯目的項目• 位置

– 放在左上角，顧客已經很習慣到左上角看網站標籤了

• 重複使用圖片– 提高下載速度（cached）– 與導覽列整合

29

☼ Logo☼ Logo

☼ Logo☼ Logo

建立強勢的網站品牌

首頁要看起來像首頁

• 首頁不要與子頁混淆• 使用者期望在首頁可以

– 找到重要的連結– 連到網站地圖或網站索引、網站導覽– 直接搜尋– 、、、

31

呈現所有的主要選項

• 使用者不必點到第二層或第三層才知道網站有那些內容

• 確保放在首頁的選項和連結是最重要的• 資訊組織

32

Yale University Library首頁資訊架構

Yale University Library研究工具主頁

33

Yale University Library館藏目錄查詢

Homepage PortalPortal• 提供有用的內容

– 顧客進到網站幾秒間就決定要不要待在這個網站

– 網站只有幾秒時間可以吸引顧客、留住顧客– 生動的文字與視覺化設計是關鍵

34

• 顧客進到XX圖書館網站最想看到的是：

35

大學圖書館網站的顧客

• 學生• 老師• 職員

• 未來的學生（考生）• 過去的學生（校友）

• 年輕人• 老年人

– 12點文字– 無精確瞄準

• 科技愛用者• 科技緩用者• 科技難用者

• 嘗新• 接受• 抗拒

頁頁連首頁

• 確保使用者在網頁的任何一頁都可以連回首頁

• 設計– 點Logo回首頁– Logo加Alt文字說明– 設計Home（回首頁）選項

36

網站好用性

Visibility

FindabilityPredictability

37

大學圖書館網站好用性

• Crowley等（2002），Texas A & M大學圖書館網站，老師和學生焦點團體– one-stop shopping approach – Subject portal– tailor-made menu – 在首頁直接連結滿足其研究需求– 常用的資料庫能夠放在前面– 很快地連結到館藏目錄查詢– 更清楚、更簡單的詞彙（terminology）助其導覽和做決策

大學圖書館網站好用性

• McGills 和Toms（2001）– 學生對功能列的標示語言的解釋上有相當的困難

– 組織架構無法回應使用者的資訊任務，當使用者上圖書館網站來要解答特定問題時，通常無法在網頁上找到對應的選項，也沒有辦法找到可以幫助他們的工具或服務

– 「點選成本」（click cost）：除非很確定點選後會看到的內容，否則一般訪客是很不願意點選的，這就是所謂的「點選成本」。

39

Search Catalog

40

進一步閱讀書目

• Rosenfeld, L.,& Morville, P. (1998) .Information Architecture for the World Wide Web: Designing Large-Scale Web Sire.Sebastopol, CA : O'Reilly .


• Lynch P. J., & Horton, S.(2001).Web Style Guide: Basic Design Principles for Creating Web Sites(2nd ed.). New Haven [Conn.] : Yale University Press.

41


• Nielsen, J.(2000). Designing Web Usability : The Practice of Simplicity. Indianapolis, Ind. : New Riders.


Duyne, D. K. V., Landay, J. A., & Hong, J. I. (2003). The design of sites : patterns, principles, and processes for crafting a customer-centered Web experience. Boston : Addison-Wesley .

42


• Dijck, P. V. (2003). Information architecture for designers : structuring websites for business success . Mies, Switzerland ; Hove : RotoVision.


• Nielsen, J., & Tahir, M.(2002). Homepage Usability: 50 Websites Deconstructed.[Indianapolis, IN] :New Riders.

43


Wurman, R. S. (2001). Information anxiety 2. Indianapolis, IN: Que.


• Reiss, E. L.(2000). Practical Information Architecture: A Hands-On Approach to Structuring Successful Websites.Addison-Wesley Pub Co.

44


• Krug, S., & Black ,Roger.(2000). Don't Make Me Think: A Common Sense Approach to Web Usability. New Riders.


• Garrett, J. J. (2003). The Elements of User Experience: User-Centered Design for the Web. New York : American Institute of Graphic Arts.

45

Q & AQ & A

網站資訊結構¶²路資訊...4...

Documents