在 Day03 的設計流程有介紹到『 資訊架構就像蓋房子前的藍圖,這步驟決定資訊要怎麼被整理和放置,使用者進來時才知道要去哪裡找東西。』
當使用者打開一個網站或 App 時,他們通常心裡已經有一個目標:我要找資料、完成任務,或是單純想看看有什麼新功能。
這時候,資訊架構 就是引導使用者找到正確路徑的地圖。
如果沒有好的 IA,介面就算再漂亮,使用者還是會覺得「亂」、「找不到」、「很難用」。
簡單來說,資訊架構就是 幫助使用者理解和瀏覽內容的結構設計。它的核心問題是:
👉「這些資訊要怎麼分類,使用者才找得到?」
👉「這些功能要怎麼排列,使用者才不會迷路?」
你可以把 IA 想成「百貨公司裡的樓層導覽圖」。如果你要找餐廳,會直覺去美食街樓層;要買衣服,會找服飾樓層。IA 就是在數位產品裡,幫使用者安排這種分類與路徑。
在專案中,IA 通常包含三個核心工作:
1. 內容盤點
先盤點專案中有哪些資料或功能要呈現。
例如銀行網站可能包含「存款、外匯、信用卡、網路銀行、分行服務據點…」;電商平台可能有「商品分類、優惠活動、購物車、會員中心、客服專區…」。這個步驟有點像清點物品,確保網站規劃沒有遺漏。
2. 分組與層級規劃
這是 IA 最關鍵的一步 ! 把內容依據邏輯歸類,我們要去思考哪些資訊是同一類,哪些要分開。
最常見的方式是做 卡片分類法,幫助我們按照使用者的想法來組織資訊。
舉例來說:大部分使用者會把「信用卡帳單查詢」和「繳卡費」放在一起,而不是「存款」。
3. 視覺化成果
最後把資訊結構轉換成 Sitemap 、 Flow Chart。
Sitemap 幫助大家快速理解網站整體結構,而 Flow Chart 則更適合說明「操作的步驟」,像是「註冊帳號 → 填寫資料 → 驗證 → 完成」。
很多時候,使用者覺得「這網站難用」,其實不是 UI 漂不漂亮,而是 IA 設計有問題:
IA 的好壞,直接影響使用者能不能順利完成任務。這就是為什麼很多大公司都會特別做「卡片分類」或「樹狀測試」來驗證 IA。
通常資訊會依網站功能資訊的多寡來決定架構要採扁平化層級還是深度層級 :
圖片來源:Nielsen Norman Group
扁平架構就像是一家只有一層樓的商店,所有東西都陳列在同一個層級。
💡 通常使用扁平化架構效果會不錯,一目了然且無須點擊太多的層級,但假如類別過多,則可以考慮使用深層架構,避免讓使用者一次接收過多資訊。
兆豐銀行 Fast-ID 專區就是屬於扁平架構,從首頁向下 1 個層級找到特定的資訊
深層架構就像是一棟多層樓的大樓,資訊按照不同樓層來分類。
💡 對於層次比較多的架構,可以搭配 Breadcrumb,幫助使用者定位並了解網站結構。
玉山銀行就是屬於深層架構,從首頁向下5個層級找到特定的資訊
在設計資訊架構時,其實沒有「扁平一定好」或「深層一定對」的標準答案。
真正的關鍵在於 網站內容的複雜度 以及 使用者的任務目標。
最好的做法,通常是 在扁平與深層之間找到平衡,讓使用者能以最直覺的方式完成任務,同時維持內容的結構清晰。
資訊架構聽起來有點抽象,但它的重點其實就是:把正確的資訊,用正確的方式,放在正確的地方。
好的 IA 可以減少使用者迷路的機率,讓操作更順暢,也能降低後續設計和開發的修改成本。
反過來說,如果 IA 一開始沒規劃好,就算介面再漂亮,最後還是會被抱怨「很難用」。
所以在設計流程裡,IA 是不可或缺的一步,也是設計師最需要練習的基礎功💪。