昨天談的認知法則,其實都指向同一個結論:人的注意力、記憶、決策速度都有硬上限。米勒定律說短期記憶大約只能處理少數幾個組塊,希克定律說選項越多、決策越慢。既然大腦處理資訊的容量無法擴充,那唯一能動的就是「資訊本身要被組織好」,讓使用者不必費力就能理解與尋找。這門把內容組織成使用者找得到的結構的學問,就是資訊架構(Information Architecture,IA)。它不是畫幾張導覽選單那麼表面,而是決定「什麼放哪裡、叫什麼名字、怎麼找到」的底層骨架。

📖 學

什麼是資訊架構:四大系統

資訊架構的經典定義來自 Louis Rosenfeld、Peter Morville 與 Jorge Arango 的《Information Architecture: For the Web and Beyond》(俗稱「北極熊書」)。他們把 IA 拆成四個彼此協作的系統:

  • 組織系統(Organization):內容如何分類、分群、建立層級。決定「東西放在哪個房間」。
  • 標籤系統(Labeling):每個分類、連結、標題該叫什麼名字。決定使用者看到的「門牌」是否看得懂。
  • 導覽系統(Navigation):使用者在結構中移動的路徑,選單、連結、麵包屑都屬於此。決定「怎麼走過去」。
  • 搜尋系統(Search):讓使用者直接輸入需求、跳過瀏覽路徑找到內容。決定「找不到路時的備援」。

關鍵是這四者不能各自為政。組織分得再漂亮,標籤取得使用者看不懂也是白搭;導覽做得再完整,搜尋結果一片混亂還是會流失。IA 是把這四個系統整合成一致體驗的工作。

為何重要:找不到,等於不存在

資訊架構的價值可以濃縮成一句話:內容找不到,就等於不存在。網站上有再好的功能、再深的文章,只要使用者在你的結構裡繞不到,對他而言就是零。這正是昨天認知負荷的延伸——當使用者要在腦中同時記住「我在哪、要去哪、剛剛看過什麼」時,每一次分類不清、標籤模糊,都是在他有限的工作記憶上再加一筆負擔。好的 IA 讓使用者「不用想」就知道下一步往哪走,把認知資源留給真正的任務。

組織架構:四種基本結構

內容的排列方式大致可歸為四種結構,實務上常混用:

  • 階層(Hierarchy):由上而下的樹狀分類,最常見。首頁 → 分類 → 子分類 → 內容。適合大多數資訊型網站,好處是符合人對「分門別類」的直覺。
  • 矩陣(Matrix):同一批內容允許用多個維度切入,例如同一款商品可依「顏色、價格、品牌」多路徑抵達。彈性高,但要小心使用者迷失。
  • 線性(Sequential):一步接一步的順序,如結帳流程、教學、故事。適合需要引導、不能跳步的情境。
  • 有機(Organic):沒有固定結構,靠連結彼此串接,如維基百科式的知識網。利於探索、不利於系統性尋找。

組織原則:精確性 vs 模糊性

北極熊書把組織方式(organization schemes)分成兩大類,這是規劃 IA 時最實用的一組工具。

  • 精確性架構(Exact schemes):依客觀、互斥的屬性排列——字母(A-Z 索引)、時間(日期、時序)、地理(國家、地區)。優點是規則清楚、切分無爭議,適合使用者「已經知道要找什麼」的情境(例如查某個品牌名)。
  • 模糊性架構(Ambiguous schemes):依主觀、需要判斷的屬性排列——主題(Topic)、任務(Task)、受眾(Audience)、隱喻。切分沒有標準答案,設計難度高,但更貼近使用者「還在探索、不確定要什麼」的真實狀態。多數好用的網站導覽其實是模糊性架構,因為人是用「我想做什麼」而非「首字母」在思考。

實務上兩者並存:主導覽用主題/任務(模糊),輔以 A-Z 索引或搜尋(精確)當備援。

導覽類型:四種各司其職

  • 全域導覽(Global):每一頁都出現的主選單,代表網站最上層結構,讓使用者隨時知道「整個站有哪些大區塊」。
  • 區域導覽(Local):進到某個區塊後,該區塊內部的子選單,回答「這一區還有什麼」。
  • 情境導覽(Contextual):嵌在內容裡的相關連結,如「你可能也想看」,順著當下脈絡延伸。
  • 麵包屑(Breadcrumbs):顯示「你在階層中的位置與回頭路徑」,例如 首頁 > 3C > 筆電。降低迷失感,是階層結構的最佳搭檔。

卡片分類與樹狀測試:驗證 IA

IA 最大的陷阱是「設計者自認合理」,但驗證的唯一辦法是拿真實使用者測。兩個核心方法:

  • 卡片分類(Card Sorting):把內容項目寫在一張張卡片上,請使用者依自己的理解分群、命名。分兩種——開放式讓使用者自由分群並自訂類別名稱,用來「探索」使用者的心智模型、產生分類靈感;封閉式給定既有類別、只請使用者把卡片歸位,用來「驗證」既定分類是否直覺。NN/g 指出卡片分類能讓任務成功率提升可觀幅度。
  • 樹狀測試(Tree Testing):只給純文字的分類結構(不含視覺設計),請使用者在其中找出特定項目該點哪裡。它把「導覽結構好不好用」跟「視覺美不美」隔離開來,是純粹檢驗 IA 骨架的方法。

一句話記憶:卡片分類用來「生成」IA,樹狀測試用來「驗證」IA

心智模型與雅各布定律的呼應

好的 IA 之所以順,是因為它貼合使用者既有的心智模型(Mental Model)——使用者對「這類東西應該怎麼分、放哪裡」的內在預期。而這正呼應前幾天提過的雅各布定律:使用者大部分時間都待在別的網站上,因此期待你的網站運作方式跟他們熟悉的那些一致。這給 IA 的啟示是:別急著發明前所未見的分類法,先尊重同類產品已建立的慣例(電商的購物車、部落格的分類/標籤),把創新留給真正能加分的地方。卡片分類本質上就是在「挖出使用者的心智模型」。

實務常見錯誤:用內部組織架構思考

最常見也最致命的 IA 錯誤,是照「公司的部門/組織圖」來分類內容,而不是照使用者的任務來分。政府網站尤其典型:選單長成「第一科、第二科、企劃處」,但民眾只想知道「怎麼申請補助、去哪繳費」。使用者不在乎你內部誰負責,他只帶著一個任務而來。解法是把導覽標籤從「內部術語」翻成「使用者語言」,並用卡片分類驗證你的分類跟使用者腦中的分類是否對得上。

🧠 記

  • 四大系統:資訊架構=組織、標籤、導覽、搜尋四者協作,缺一不可。
  • 找不到=不存在:IA 的終極價值,是讓好內容真的能被使用者抵達。
  • 精確 vs 模糊:字母/時間/地理是精確架構;主題/任務/受眾是模糊架構,後者更貼近人的思考。
  • 四種導覽各司其職:全域看全站、區域看本區、情境順脈絡、麵包屑防迷路。
  • 生成用卡片分類、驗證用樹狀測試:前者挖心智模型,後者檢骨架是否好走。
  • 別用組織圖分類:照使用者任務而非內部部門來組織,用使用者語言下標籤。

✍️ 實踐

用開放式卡片分類挖一次心智模型。 挑一個你熟悉的網站或你正在做的產品,把它主要的 15~30 個功能/頁面各寫成一張卡片(實體便利貼或 Miro 皆可),找 3~5 個目標使用者,請他們各自把卡片分群並替每群命名。不要引導、不要糾正。做完把大家的分群疊在一起看:哪些卡片幾乎每個人都放同一群(代表分類很直覺),哪些人人放法都不同(代表這裡的 IA 有爭議、需要重新設計標籤或位置)。

盤點自己產品的導覽並抓內部術語。 把你負責的網站或 App 的全域導覽選單逐項列出,對每一個標籤問兩個問題:一是「這是使用者會用的詞,還是我們內部才懂的詞?」二是「這個分類是照使用者任務,還是照我們部門/系統結構切的?」把可疑的項目圈出來,改寫成使用者語言,再用一次封閉式卡片分類或樹狀測試驗證新標籤是否更好找。

🔗 延伸學習

💬 問 AI

把你正在做的產品導覽貼給 AI,請它站在使用者角度挑出「內部術語」與「分類邏輯不符任務」的問題,並提出替代分類:

你是資訊架構(IA)顧問。以下是我產品的全域導覽選單與各分類底下的主要項目:

[貼上你的導覽結構,例如:
關於我們 / 產品服務 / 企劃處 / 客服中心 / ...]

請幫我做三件事:
1. 逐項判斷每個標籤是「使用者語言」還是「內部術語」,把內部術語標出來並提出使用者比較可能搜尋的替代說法。
2. 判斷這套分類是照「使用者任務」還是照「公司內部組織結構」切的,指出不符使用者心智模型的地方。
3. 依常見的使用者任務,重新提出一套 3~5 個主分類的替代導覽架構,並說明每個分類該放哪些項目、為什麼。

最後,設計一份「封閉式卡片分類」的題目,讓我可以拿你的新架構去找 5 位使用者驗證。