資訊架構(Information Architecture,IA)是把內容組織、標籤、導覽與搜尋四套系統整合成使用者能理解的結構,它決定的不是介面好不好看,而是使用者「找不找得到」。一個按鈕的顏色錯了頂多讓人皺眉,但分類邏輯錯了,使用者會在你精心設計的畫面裡迷路、放棄、離開。IA 是介面底下那張看不見的地圖,使用者從不會稱讚它,卻會被它默默地引導或阻擋。
IA 難做,是因為它處理的是「意義的歸屬」而不是像素的位置。同一份內容,工程師想按資料表分、行銷想按活動檔期分、使用者卻按「我要達成的目的」分——這三種心智模型往往互相衝突。好的 IA 設計者不是替內容想一個最聰明的分類,而是把使用者腦中既有的分類挖出來,讓介面去貼合它。今天這篇把 IA 的四套系統、卡片分類法、資訊氣味與四種導覽模式一次講透。
📖 學(核心)
四套系統:組織、標籤、導覽、搜尋
Rosenfeld 與 Morville 在經典的《資訊架構學》裡把 IA 拆成四套互相支撐的系統，理解這個框架，你才不會把 IA 誤當成「畫一張網站地圖」而已。組織系統(organization) 決定內容怎麼分群、用什麼結構——可以按主題、按任務、按受眾、按時間或字母序，也可以是階層式、矩陣式或線性。分類的「基準」選錯,後面全錯:電商若按「供應商」分類商品,對使用者毫無意義,因為使用者腦中是按「我要買什麼」在想。
標籤系統(labeling) 決定每個分類、每個連結叫什麼名字。標籤是 IA 最容易被輕忽、卻最致命的一環,因為它直接對應到後面要講的「資訊氣味」。「解決方案」「服務項目」這種空泛標籤幾乎不傳遞任何訊息,而「退換貨」「發票查詢」這種具體標籤,使用者一眼就知道點下去會通往哪。導覽系統(navigation) 是使用者在結構裡移動的路徑與工具,也是四套系統裡使用者最有感的一套。搜尋系統(search) 則是給那些不想沿著導覽逐層點下去、直接想跳到答案的使用者一條捷徑——搜尋不是導覽的替代品,而是互補品,兩者服務的是不同的使用心態。
這四套系統的關鍵在於「一致」。組織系統決定了某內容屬於「帳戶設定」,標籤系統就該一路用「帳戶設定」而非在導覽叫「個人資料」、在麵包屑叫「會員中心」。使用者對結構的信任,來自於這種跨頁面的命名一致性;命名一亂,再漂亮的層級也會讓人懷疑自己是不是走錯地方了。
心智模型與卡片分類法:讓使用者替你分類
IA 最核心的原則是:分類要貼合使用者的心智模型,而不是組織的內部邏輯。心智模型是使用者腦中對「這類東西應該怎麼歸類」的既有預期,它來自過去用過的無數個網站與 App。當你的分類違背這個預期(例如把「聯絡我們」藏進「關於我們」的子選單),使用者不是學不會,而是每次都要多花一次認知成本去對抗直覺。
要把使用者的心智模型挖出來,最直接的方法是卡片分類法(card sorting)。做法是把每一則內容寫成一張卡片,請使用者依自己覺得合理的方式分群。開放式卡片分類(open sort) 讓使用者自由分群並自己替每一群命名——這能同時產出「怎麼分」與「叫什麼名字」兩種洞察,適合從零建構 IA。封閉式卡片分類(closed sort) 則給定既有的分類,只請使用者把卡片放進去,適合驗證現有結構。依 NN/g 的定義,卡片分類是用來「生成」IA 構想的方法,幫你發現使用者自然的歸類傾向。
但卡片分類只做了一半。它告訴你「使用者會怎麼分」,卻沒告訴你「使用者能不能在你分好的結構裡找到東西」。這時要用樹狀測試(tree testing) 來補上:把你的分類層級做成純文字的樹(沒有任何視覺設計),給使用者一個任務(「找到退貨政策」),看他們會點進哪一條路徑、在哪一層迷路。NN/g 明確區分兩者——卡片分類用來「生成」結構,樹狀測試用來「評估」結構,兩者一前一後才構成完整的 IA 驗證流程。實務上最常見的錯誤,就是只做了卡片分類就上線,卻從沒驗證過使用者找不找得到。
資訊氣味與四種導覽模式
資訊氣味(information scent) 這個概念來自資訊覓食理論(information foraging),意思是使用者像動物覓食一樣,靠沿途的「氣味」(連結標籤、視覺線索)來判斷「往這條路走,能不能通到我要的東西」。氣味夠濃,使用者會有信心點下去;氣味太淡或誤導,使用者會猶豫、退回、或乾脆離開。NN/g 有一篇專門講「三個常見 IA 錯誤,全都源於資訊氣味太弱」——空泛的標籤、扁平到沒有引導的結構、以及點進去發現內容跟預期不符,都會讓氣味斷掉。實務準則很簡單:使用者在「點下去之前」就該清楚知道會通往哪,而不是點了才知道。
導覽系統依作用範圍分成四種互補的模式,理解它們的分工是導覽設計的基本功。全域導覽(global navigation) 出現在每一頁,提供通往主要區塊的固定入口,就像高速公路系統,無論你在網站哪個角落都能快速跳到大分區。區域導覽(local navigation) 則在你進入某個大區塊後接手,提供該區塊內部的細分選項,像下了高速公路後的區域道路,做的是區塊內的細部指路(wayfinding)。
情境導覽(contextual navigation) 是嵌在內容裡的連結,例如文章結尾的「相關文章」、商品頁的「常一起購買」——它不屬於固定的導覽框架,而是依當下內容動態產生,引導使用者橫向探索。麵包屑(breadcrumbs) 則專門回答「我現在在哪」:它是一串代表當前頁面與其所有祖先層級的連結,支援使用者的定位感與回溯。依 NN/g 的麵包屑準則,它應該是輔助性的次要導覽、不該取代主要導覽,層級要用清楚的分隔符,且當前頁面通常不做成可點連結。這四種模式不是選一個用,而是分工協作:全域給宏觀入口、區域給細部選項、情境給橫向連結、麵包屑給定位回溯——缺了任一個,使用者的空間感就會出現盲點。
🧠 記
- IA = 組織 + 標籤 + 導覽 + 搜尋四套系統,搜尋是導覽的互補品而非替代品。
- 分類的「基準」要貼合使用者心智模型(按目的分),而非組織內部邏輯(按供應商/資料表分)。
- 卡片分類「生成」結構、樹狀測試「評估」結構;只做卡片分類就上線是最常見的錯誤。
- 開放式卡片分類同時產出「怎麼分」與「叫什麼」;封閉式用來驗證既有分類。
- 資訊氣味:使用者在點下去「之前」就該知道會通往哪;標籤空泛=氣味斷掉。
- 四種導覽模式分工:全域(宏觀入口)、區域(細部選項)、情境(橫向連結)、麵包屑(定位回溯)。
- 命名一致性是信任來源:同一內容從導覽到麵包屑都該用同一個標籤。
✍️ 實踐
- 拿你手上產品的主導覽選單,逐項檢查標籤:哪些是「解決方案」「服務」這種空泛詞?各改成一個具體、能傳遞資訊氣味的名字。
- 把 30～50 則核心內容寫成卡片,找 5 位目標使用者做一次開放式卡片分類,記錄他們自己取的群組名稱——那往往比你原本的分類更貼近心智模型。
- 把現有分類層級做成純文字樹,設計 5 個真實任務跑一次樹狀測試,標出使用者「走錯路」與「迷路回頭」的節點,那就是要優先修的 IA 缺口。
- 檢查產品是否四種導覽模式都到位:有沒有全域入口?進入子區塊後有沒有區域導覽?內容頁有沒有情境連結?深層頁面有沒有麵包屑?補上缺席的那一種。
- 挑一個三層以上的深層頁面,按 NN/g 準則檢查麵包屑:是否為次要輔助、分隔符是否清楚、當前頁是否設為不可點。
🔗 延伸學習
- Information Architecture: Study Guide — NN/g
- 3 Common IA Mistakes (that Are All Due to Low Information Scent) — NN/g
- Card Sorting vs. Tree Testing — NN/g
- Breadcrumbs: 11 Design Guidelines for Desktop and Mobile — NN/g
- Information And Information Architecture: The BIG Picture — Smashing Magazine
💬 問 AI
我正在為｛請填入產品/網站類型｝設計資訊架構,目標使用者是｛請填入使用者輪廓與主要任務｝。
目前的主導覽分類是｛請填入現有分類清單｝。
請幫我:
1. 逐項評估每個分類標籤的「資訊氣味」強弱,指出哪些太空泛、並各給一個更具體的替代標籤。
2. 判斷我目前的分類基準(按主題/任務/受眾…)是否貼合使用者心智模型,若不貼合,提出更合適的組織方式。
3. 針對我這組內容,設計一份「開放式卡片分類」的卡片清單與 5 個「樹狀測試」任務。
4. 檢查我是否四種導覽模式(全域/區域/情境/麵包屑)都到位,指出缺口。