資訊架構(part 1)

26
資資資資 (part-1) (information architecture) 資資 [email protected]

Upload: chris-chang

Post on 13-Apr-2017

154 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: 資訊架構(Part 1)

資訊架構 (part-1)(information architecture)

張崑[email protected]

Page 2: 資訊架構(Part 1)

First…資訊架構 (IA) 只是一環

Page 3: 資訊架構(Part 1)

•這邊想跟大家分享的是每當有一個新議題… 大家會一窩蜂地鑽進 , 但過程中卻忘了 : 這個議題只是其中一環•你不只是要把 IA 搞懂…如何把這一環扣合到其他環節才是真正重要的…

Page 4: 資訊架構(Part 1)

資訊技術• 平台• 伺服器端• 前端

視覺傳達• 介面設計• 藝術指導• 圖像化

資訊架構• 導覽• 資訊組織化• 資訊結構化

別忘記…我們提過體驗是整合性的呈現

Page 5: 資訊架構(Part 1)

資訊技術• 平台• 伺服器端• 前端

視覺傳達• 介面設計• 藝術指導• 圖像化

別忘記…我們提過體驗是整合性的呈現

資訊架構• 導覽• 資訊組織化• 資訊結構化

How about…….

Page 6: 資訊架構(Part 1)

關於資訊架構你得先知道…甚麼叫做資訊

Page 7: 資訊架構(Part 1)

資訊資料 整合

資訊是把散落的資料集合成統一的標準格式

Page 8: 資訊架構(Part 1)

資訊資料 整合

資訊是把散落的資料集合成統一的標準格式已經有統一的資訊…資訊架構 (IA) 用在哪 ?

Page 9: 資訊架構(Part 1)

隨著許多的網站的架構越來越複雜,擁有很多的頁面與分類,而『麵包屑』 ( 或稱導覽路徑 )則扮演了重要的導航角色,它提高使用者能夠更正確的在網站各個層級裡遊走而不迷失方向,甚至更快速的前往各個頁面。若發現點進的結果不是使用者所預期的,麵包屑就能快速的帶領你回到正確的層級,而不是只能靠著瀏覽器的上一頁重複 click!

What is Information Architecture

Page 10: 資訊架構(Part 1)

The goal of Information Architecture•方便用戶:麵包屑的層級連結可以有效的輔助使用者,讓他們永遠找得到回頭的路徑,並且更加瞭解網站的分類架構。 •減少點擊次數:對於架構複雜的網站,若正確的使用麵包屑可以讓使用者容易的前往各個層級,也減少了使用者點擊次數。•降低跳出率:對首次訪問的使用者來說,麵包屑路徑也是一種帶領使用者更進一步瀏覽各網頁的方式,降低了網站的跳出率。

Page 11: 資訊架構(Part 1)

take an example

Page 12: 資訊架構(Part 1)
Page 13: 資訊架構(Part 1)

查詢票卡搭乘紀錄的服務在哪裡 ?

Page 14: 資訊架構(Part 1)

查詢票卡搭乘紀錄的服務在哪裡 ?

你開始猜會在哪裡 ?

Page 15: 資訊架構(Part 1)
Page 16: 資訊架構(Part 1)

你會發現 :• 使用者不知道甚麼叫麵包屑

影響使用者決定以『麵包屑』的方式找尋的關鍵因素是:『麵包屑使用的連結文字與使用者尋找的內容有相關』,這個具相關性的文字連結,會讓使用者願意嘗試、賭賭運氣,看使用麵包屑是否可以用最快的速度,帶領他們找到他們所想要的。因此,對於使用者而言,也許他們根本不知道什麼是麵包屑,最主要的是它對使用者『說了什麼』

Page 17: 資訊架構(Part 1)

So…

Page 18: 資訊架構(Part 1)

資訊資料 整合

資訊是以透過友善的資訊架構呈現給使用者

IA 登場使用者從這開始接收你想傳達的內容

Page 19: 資訊架構(Part 1)

Second…資訊架構 (IA) 的種類

Page 20: 資訊架構(Part 1)

整體規範 ( 上下 )

個別網站 ( 下上 )

• 特色 :1. 以集團為主的設計2.維持品牌基調3.例如 :CMS

• 特色 :1. 主題性強烈2. 更新頻率高3.例如 :活動頁 (campaign)

Page 21: 資訊架構(Part 1)

take an example

Page 22: 資訊架構(Part 1)
Page 23: 資訊架構(Part 1)
Page 24: 資訊架構(Part 1)

Third…資訊架構 (IA) 的準則

Page 25: 資訊架構(Part 1)

Level follows time : 依時間變動作分層易變動

不易變動

地基 : 網域結構 : 網站架構 (IA)

服務 : 規範 ( 如 : 色系 , 命名 )

空間 : 內容布局 ( 如 :RWD)

主體 : 各頁面設計 (page)

Page 26: 資訊架構(Part 1)

next issue…IA 如何融入UX design?