# 【人機互動設計】08 資訊架構

> **閱讀資料**
> - Information Architecture: For the Web and Beyond [name=Rosenfeld, Louis; Morville, Peter; Arango, Jorge. O'Reilly Media]
> - 資訊架構學：網站、App與資訊生態系統規劃（第四版）[name=中文版]
>

## Introduction
資訊架構的目標：如何「組織」用例，幫助使用者「找到」做這些用例的「地方」。
例如：way-finding system（尋路系統）就是一種協助使用者找到東西的系統。
- 電梯的樓層簡介
- 書本或雜誌的目錄、封面大綱
- 有線電視的節目介紹台

### 為何需要資訊架構？

因為資訊超載，且同樣的資訊會出現在不同裝置，因此「使用資訊的方式不一致」，導致混雜的使用經驗。因此會需要設計出一致的使用經驗。但是，在不同的裝置本來就會產生不同的使用體驗，因此資訊架構設計追求的是設計出讓使用者達到「一致的心理層面經驗」。

### 使用資訊的場景不同時，設計的考量是什麼？

- 使用者是誰？
- 用例的重要性與差異

### 資訊與資訊的載體

資訊與資訊的載體，兩者必須被分離，同樣的資訊能存在於不同的載體上（例如：電子書 vs 實體書）。
唯有分離資訊與載體，才有辦法根據資訊實現資訊架構的設計。

## 資訊空間 ＝ 資訊架構

- 由許多介面組成的空間
- 裡面放「用例」

> 資訊 vs 用例，用例的介面元件也是資訊的一種。
>

### 好的資訊空間是？

- 符合使用者對空間的心理與需求：本能的、行為的、反思的
- 能引導使用者注意該注意的或該知道的東西
- 建立完整、統合的心理模型（讓使用者不迷路）
- 當使用者遇到錯誤，能循著指標修正

### Placemaking 空間營造

在任何地方，使用者必須知道
- 這是哪裏？
- 這裡有什麼？（概覽）
- 這裡能做什麼？（功能）

這是活動／任務／行動的一部分。因此我們能以活動／任務／行動分析使用者，協助設計資訊空間的空間營操，循著心理歷程七階段判斷使用者的目標是否有完成。

> 借用自 sense making :point_right: 人隨時將周遭的一切「條理化」，不停的形式匹配、對應、完形組織。**一種賦予意義的心理活動，例如分類、澄清、了解意向。**
>

### 協助資訊空間營造的工具

- 組織體系
- 命名體系
- 導覽體系
- 搜尋體系

## 資訊架構的組織體系

必須先瞭解使用者的資訊需求，才能建立組織體系。定義組織體系的方式，有兩種

- 定義組織規則 scheme（依據特性），例如顏色、字母、姓氏
- 定義結構類型（依據關係）：Top-down, bottom-up, hypertext

### 關於組織分類的考量

- 分類的顆粒程度（granularity）：指的是資訊區塊的相對大小或粗糙程度。
- 組織型態
- Top-down（通常以人的注意力負荷程度為考量）
- 窄而深（步驟多），例如聽覺資訊
- 廣而淺（步驟少），例如視覺資訊
- bottom-up（類似關係式資料庫）
- 一種再建構的過程
- 連結資料的多種屬性
- 依據不同需求使用動態過濾
- Hypertext(連結)
- 資訊的連結不需要理由
- 可補充其他組織方式的不足，較彈性
- 通常作為捷徑／補充，較難成為主要方式

## 資訊架構的命名體系

命名是種符號性的代表，就是指意（signifier），是資訊抽象畫的結果，也是資訊溝通的基礎。命名體系重視以下兩種效能：

- 命名的有效程度在於 signifier 與 signified 的對應，是否能成功喚起人的心理對應？
- 命名之間是否有清楚的區別？

### Card Sorting 卡片分類法

用來理解人的心理資訊架構。根據研究目的，可以有以下卡片分類的方式：

- 開放／閉鎖式：受試者能否自己寫新卡片，重新命名分類？
- 措辭 phrasing：用詞（動、名詞）必須一致
- 顆粒程度 granularity：層級高低、單位大小
- 交叉關係：是否考量到交叉連結（hypertext）的可能性

card sorting 可以是質化／量化研究：affinity models, confusion matrix, clustering。

### 命名的一般指導原則

1. 限制命名的範疇，讓命名可辨識
2. 考慮對象，配合使用者的知識（避免專有名詞）
3. 資訊集合的完整（是否有遺漏的項目？）
4. 一致命名體系（寫作格式、文法、視覺設計、對應性、顆粒程度）

有種特殊的命名方式：圖像命名，但須考量圖像的通用性，因為圖像命名的通用性與使用者的文化背景有關，相同圖像對不同文化背景的使用者而言，可能有不同意義，這時圖像就不具備通用性。因此圖像通常會加上文字標籤，避免使用者剛開始接觸時錯誤理解，等建立使用者的心智模型後，再拿掉文字標籤。

## 資訊架構的導覽體系

為使用者「指路」，通常能採取以下策略完成，但每種策略各有優點與限制
- 內嵌式導覽系統
- 全域 global
- 區域 local
- 內文導覽
- 附加式導覽系統
- 空間地圖
- 索引

### 內嵌式導覽系統

通常跟隨層級資訊架構，但其中的內文導覽則跟隨資訊相關性。

- 全域 global：在整個區域／網站都能見到
- 區域 local：只能在某個區域，某部分才能見到
- 內文導覽

### 附加導覽系統

當嵌入式導覽失效時，可使用附加導覽系統，通常在教科書內最常見：索引、註腳。網站的附加導覽系統則是 sitemap。當附加導覽系統也失效時，就使用搜尋系統。

## 資訊架構的搜尋體系

建立搜尋體系前，可以先思考：
1. 需要搜尋功能嗎？
2. 用什麼找？
3. 怎麼傳達搜尋結果？

### 需要導覽功能嗎？

- 如何知道是否需要：如果網站資訊不複雜、資訊量較少，或許不用；如果導覽設計得好，或許不用。
- 切成不同主題的搜尋功能，簡化搜尋功能，例如分成以交通工具／路線搜尋
- 使用者對搜尋功能有期待嗎？

### 用什麼找？

- 避免使用者拼錯字，使用詞幹
- 以自然語言處理理解使用者意向，界定搜尋範圍
- 控制詞彙與同義詞，例如將相關詞彙關聯起來

### 怎麼傳達搜尋結果？（如何呈現搜尋結果）

呈現方式是依據資訊需求而決定，而資訊需求可以分為四種：
1. 找到所有相關東西
2. 撈到一些有用的就好
3. 要找到目標／最佳解答
4. 已找到東西，要再縮小尋找範圍

#### 視覺搜尋的基本動機

| | Target known | Target unknown |
| ---------------- | -------------------------- | -------------------------------------------------------- |
| **Location known** | 查字典（清楚的資訊架構） | 翻閱 IKEA 型錄（有清楚的資訊特徵和關聯性，且有翻閱經驗） |
| **Location unknown** | 尋找 Wally（特徵容易辨別） | 逛街（資訊探索經驗） |

## Progressive Disclosure 漸進揭露

discoverability 是容易使用的基礎，不論如何，一定要先讓使用者「先看得到」，才有被使用的可能性。當要讓功能被看到，又要保持介面簡單，該如何做？

- 掌握使用場景
- 採用漸進揭露原則

### 策略

- 每個階段，使用者「能夠」注意的到事情只有幾件
- 每個階段，使用者「需要」注意到的事情只有幾件

因此每一個介面中，只呈現最只要、最有代表性的資訊，讓最常用到的資訊最容易被見到，所以常會在呈現資訊有限的手機介面上，有以下設計：

- 漢堡選單
- Nested Lists 分層選單
- Tab：具備全域導覽功能（注意：絕對不要使用 invisible tab，因為缺乏 discoverability）
- hub-and-spoke：缺少關聯性，但能節省空間
- bento box 便當分隔：hub-and-spoke 的變形，同時顯示資訊與導覽功能
- filtered view 過濾：借用 meta-data 過濾資訊，例如音樂播放器

以上設計型態可以自由組合，根據不同的介面需求選擇不同模式，但避免在同個層次混合使用不同的模式。通常在最高層介面重視導覽模式。

## IA 的資訊生態學


IA 的目標是幫助使用者找到需要的資訊，但 IA 專案計畫背後，必須考量到商業目標與可用資源。而現在的資訊架構中心，就是 Google 搜尋引擎。

### 商業脈絡

- 產品性質
- 未來動向
- 市場的相對位置

以上三點會決定 IA 的設計目標。

- 組織本質
- 利害關係人
- 內容的來源、管理、更新
- 資源、技術、法規的限制

以上會決定設計 IA 的方式、誰要買單、設計後的運營與維持。

###### tags: `NCCU` `HCI` `人機互動設計課程`
> 2020 年政治大學數位內容【人機互動設計】課程筆記
>
> 週四 09:00-12:00｜授課老師：陳宜秀