-1-

蔡明哲 Richard Tsai

• 悠識數位 首席資訊架構師

Chief Information Architect– 專長

• 網站企劃，網路行銷 , 專案管理 , 系統分析 , 資料庫行銷– 過去

• 企劃顧問，專案總監，客服總監，技術總監，行銷企畫經理，知識研究部經理，軟體工程師，專案經理，產品經理，廣告 AE..

• 幫助客戶– 找出網站設計或企劃的問題– 提供網站 Usability 的建議– 提供網站企劃及 Prototype Design 的服務– 提供網站企劃的內功心法 / 秘笈 / 工具

資訊架構學理的發展故事

-3-

Peter Morville

founder of Semantic Studiosa leading information architecture, user experience, and findability consultancy

• 成立 Rosenfeld Media.• IAI (Information Architecture Institute) co-founder (http://iainstitute.org)• UXnet, the User Experience Network (http://uxnet.org)

Louis Rosenfeld

-4-

The Three Circles of Information Architecture

Peter Morville

Facets of the User Experience

-5-

隨意搜尋 Ambient Findability

-6-

-7-

http://iainstitute.org/

http://iainstitute.org

IAI 很利害嗎？•會員 > 1000 •台灣 2 人•加入的好處是…

-9-

Rosenfeld Media

Publisher of user experience design books and webinars

-10-

http://schedule.sxsw.com/events/event_IAP7545

-11-

資訊架構學 - 網站應用Information Architecture for the World Wide Web

• 第一版 1998 年• 第二版 2002 年• 第三版 2006 年• 第三版 ( 中文版 ) 2007 年

1

-12-

1998 internet 發生什麼事情？

• 商業界才剛開始認識 internet• 以為取名為 入口網站 (Portal) 就可以上市 (IPO)

-13-

2008 internet 發生什麼事情？

• 倒過一波 2000 年• Web 2.0 再次瘋狂

2018 internet 會發生什麼事情？•2018 ???

現在 internet 發生什麼事情？

• 現在出現什麼形式的網站，是 2008 年的你無法想像的？

請問，這些網站是否以「資訊架構」的方法跟概念來設計？

• Wikipedia ?• Digg ? ( 書籤網站 )• Twitter ?• Facebook ?

為什麼需要理解資訊架構？

-18-

符合以下狀況者，可以提早下課！• 你做的網站，是給自己用的• 你做的網站，可能只有短短的一頁或兩頁• 你的網站本來就是故意做成「迷宮」

-19-

資訊架構跟什麼有關係 ?

• 認知– 影響網站使用者的認知 ( 或印象 )

• 移動– 與使用者在資訊空間中的移動有關

•我在哪裡？•能去哪裡？•如何回去？•這裡好走？還是哪裡好走？

-20-

資訊架構到處都有

• 交通系統的地圖 方位引導，怎麼去

• 百貨公司的樓層介紹 有什麼，怎麼去

• 電視遙控器的頻道選擇 ( 往前 , 往後 ) 如何去 ( 導航 )

• 餐廳的菜單 有什麼，多少錢

-21-

樓層引導

-22-

-23-

菜單 – 我要點紅燒牛肉麵

-24-

information architecture ( 名詞 ) 1. The structural design of shared information environments. 共

享資訊環境的結構設計2. The combination of organization, labeling, search, and naviga

tion systems within web sites and intranets. 網站內的組織 , 歸類 , 搜尋與導覽系統的組合。

3. The art and science of shaping information products and experiences to support usability and findability. 構築資訊產品和經驗的藝術與科學，用來提供可用性及可尋性。

4. An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape. 一種新興的實務學科與社群，專注於將設計與架構的原則帶入數位領域中。

期待一句簡短的話就捕捉到資訊架構本質與範圍嗎？繼續做夢吧！

-25-

與 IA相關的 基本概念

• 資訊 information– 資料 data 資訊 info 知識 knowledge

• 結構 structuring, 組織 organizing, 命名 labeling, 尋找 finding, 管理 managing

• 兼具藝術性與科學性– 可用性工程 , 行為研究 : 科學性– 依照經驗 ,直覺及創意 : 藝術性

-26-

什麼是網站資訊架構 ?

• 動詞：多種方法的組合及運用的過程– 構築資訊產品和經驗的方法 (藝術與科學 ) ，用來提供可用性及可尋性。

– 將這些方法組合起來 (依其適用及邏輯 ) ，來完成比較有意義的資訊架構。

• 名詞：資訊架構的成品– 網站內的資料組織 , 命名 , 搜尋與導覽系統的組合。– 具體形式：網站架構圖，流程圖，中介資料 (meta d

ata) 的關聯性，導覽系統，搜尋的設計…

什麼是網站資訊架構 ?

網站資訊的組織 , 命名 , 導覽與搜尋

資訊架構直接影響使用者認知

-28-

• 第一類問題：不知道如何找到需要的資訊或功能

eg. 我想要一本書，進入網路書店網站，不知道去哪裡找？ User Task 1: Search User Task 2: Browse Directory

• 第二類問題：找到需要的功能。卻不知道如何使用或使用不易。

eg. 不知道如何完成購買？ User Task : Browser or Search

Home

Page C

Page BPage A

????

Page A

Task Done

????

PROBLEMS

-29-

SOLUTIONS

• 第一類問題 ：不知道如何找到需要的資訊或功能 (屬於 IA 問題 )

Design Solution: Search+ Index + Taxonomy

• 第二類問題 ：找到需要的功能。卻不知道如何使用或使用不易。

(屬於介面及互動設計問題 ) Design Solution: UI, IxD, Flow

Home

Page C

Page BPage A

Page A

Task Done

-30-

Information Architecture

• 分類– 主題式分類– 按角色分類– 按照關鍵字分類 (tags)– 索引 (indexing)– …– Shared Bookmark– Social Recommendation– Rating– User Defined Collection– …

• 搜尋• 導覽• 輔助 (Wizard)• 指南 (Guideline)

網站編輯

使用者

-31-

UI , IxD (Interaction Design), Flow

• UI 簡化• UI 一致性• Usability 5E原則

– Effective – Efficient– Engaging– Error Tolerant– Easy to Learn

-32-

什麼不是資訊架構

• 圖形設計不是資訊架構• 軟體開發不是資訊架構• 可用性工程不是資訊架構• 互動設計不是資訊架構• 經驗設計不是資訊架構• 內容管理不是資訊架構• 知識管理不是資訊架構