【UX有差嗎？】EP 03｜與時俱進升級裝備！把資訊架構發揮到極致的 UX 設計師

1 EP 003 介紹

與時俱進升級裝備！把資訊架構發揮到極致的 UX 設計師

⭐️ 單集介紹

「資訊架構」是悠識 UX 設計團隊最重視的工作流程之一，過去我們的職稱以「資訊架構師」為核心，隨著數位環境和客戶需求的轉變，團隊改名為大家熟知的「體驗設計師」。這說明了我們堅守化繁為簡的信念，由此延伸技能樹。

本集從資訊架構的意義出發，談談清晰的資訊架構如何幫助複雜大型專案？相較於創新設計，擅長處理疊床架屋技術債的設計師，在意的細節為何？

⭐️ 本集成員

主持人｜悠識 UX 資深研究員：陳美伶
主角１｜悠識 UX 設計經理：吳欣倫
主角２｜悠識 UX 設計師：董浩祥（Ken）

本文節錄部分 Podcast 內容，和大家分享資訊架構的原則，聊聊設計團隊的特長！

2 什麼是「資訊架構 Information Architecture」？

資訊架構的英文是 Information Architecture，翻成中文是把資訊與建築兩個字結合起來。所以我們可以把資訊架構想像為由資訊建構出來的數位空間，之中又包含了組織、導覽、命名、搜尋這 4 個體系。對應真實空間，以百貨公司舉例：

• 組織：想像你來到一間百貨公司，商品的分類以及樓層的配置就如同資訊架構中的組織體系的組織規則與結構（也可以理解成分類與層級），以組織規則來說，百貨公司通常會把家飾寢具放在同一層樓，女裝、珠寶放在同一層樓，但比較不會有把男裝與女裝設置在同一層樓的狀況。
• 導覽：如同當你想找到某個特定的類別專櫃，你會到樓層簡介看板，找到你要的目標並前往。
• 命名：百貨公司通常會為各個樓層命名，例如「運動休閒館」讓你很快地理解，如果你要買運動鞋你可以到這個樓層。但相反的，如果命名太標新立異，就會讓人無法理解，例如「摩登風尚」，你可能就不太確定這層樓賣什麼。
• 搜尋：如同你到百貨公司之後，你直接詢問服務人員你想找的品牌櫃位，他直接帶你前往。

網站、App 的資訊架構要滿足這 4 個體系，才有機會幫助使用者順利找到資訊，並在過程中提供良好的體驗。

3 規劃網站或 APP 的 3 大資訊架構要素

一個案子開案階段，根據資訊架構，有 3 種要素：

• 商業脈絡 Context：包含客戶的商業邏輯、商業目標或想傳達的理念。例如，客戶主打的商品及理念，我們在規劃資訊架構時，就需要思考如何讓使用者很快找到，甚至是主動推送，或在使用者瀏覽的路上提供給他。
• 內容 Content：我們會去盤點網站需要呈現的內容有哪些，包含功能的欄位，才能以全觀的角度將資訊分類。在盤點的過程中，也可以幫助我們更了解一個不熟悉的產品，甚至有可能發現被塵封已久的功能，連客戶都沒見過的。
• 使用者 User：我們需要去了解使用者對這個網站或 APP 的需求是什麼，如果是一個改版專案，我們會去了解使用者的使用情境、需求，還有痛點。這個部分我們也會經常和研究員合作、或是透過數據輔助。

（延伸參考｜資訊架構學：網站、App與資訊生態系統規劃 ，俗稱 UX 界北極熊書）

4 從資訊架構師轉變為 UX 設計師

悠識的 UX Design 團隊改名的原因，有 3 個背後象徵的意義：

• 對內團隊認同：其實悠識一直以來，資訊架構師的工作範圍都不僅是資訊架構，只是在眾多工作項目中，資訊架構算是我們最突出專長或與其他公司與眾不同的地方。因為我們公司有研究團隊，所以研究業務都會由研究團隊處理。後來公司也討論分工，一些輕薄短小的研究題目，可以由設計團隊負責，研究員則處理較困難的議題或商業策略。
• 對外客戶溝通：現在客戶希望在原型設計討論的階段就討論視覺成分，讓原型更逼近真實的產品。但原型主要目的，是要快速驗證概念並讓大家產生共識。如果加入過多的視覺成分，在討論時反而會容易失焦，開始討論顏色、間距等等的細節。在客戶需求和期望愈來愈高的情況下，我們也擴張了守備範圍。
• 對求職者招募：這幾年經過幾次招募，發現如果只用「資訊架構」這件事情來溝通「使用者體驗」的話，好像很多求職者都不知道「資訊架構」是什麼。所以基於前面提到的趨勢，我們也就改一個職稱囉！不過在招募的時候，我們會更著重了解求職者是不是真的能夠理解資訊架構，且要有足夠的「邏輯思考能力」。

（延伸參考｜認識悠識 UX 研究團隊：【UX有差嗎？】EP 001｜UX 研究員轉骨秘方：和我們一起進入成人的世界🔞😳）

5 將多年經驗總結成 3 種複雜專案

我們的設計專案有個同的特色，就是非常「複雜」，考驗資訊抽絲剝繭的能力，所謂的複雜可分為以下 3 種類別：

• 資訊量龐大的：像是電商，尤其是百貨電商，例如 PChome, Momo（純舉例），他們有很多商品分類，要從很多不同維度去分，例如「婦幼類」，婦幼到底是包含媽媽、小孩，還是包含其他不同東西，這些我們都需要考慮。
• 功能流程面很多的：像是金融業，以銀行來說，就可分為網路銀行、行動銀行。
• 同時有不同角色和權限穿插的：像是平台類型網站，有前、後台。前台已經有複雜的功能梳理，甚至區分 toB、toC。後台還要定義對應前台的功能，以及釐清平台會員、管理員在這個平台中可使用的權限或可視範圍。

這些複雜的部分，還有可能是交錯在一起的，通常一個專案裡面可能會有 2~3 個複雜點結合在裡面。我們要把這些資訊、功能釐清，用視覺、用原型去把這些東西表現出來。我們會陪著客戶一起去重新梳理重要服務，讓整體看起來是一個比較平衡的狀態。

6 與客戶溝通的共編工具舉例

我們會依據不同的環節使用不同的工具，目的在於表現資訊架構或是產出原型，讓業主更容易理解且幫助溝通。前期的網站內容，在爬梳跟分類整理上，我們會去嘗試 Card Sorting 或是 Mindmap 這種便利貼種類的工具，像是 Miro、FigJam、Xmind，而且要跟客戶一起共編，整理這些不可能靠一個人的頭腦完成嘛～至於資訊架構，要去梳理結構，就會用 Excel、Google Spreadsheet，完整呈現產品的結構。

而我們在交付原型的時候，近期讓客戶有 2 種選擇，一個是 Figma，一個是 Axure RP。

• Figma：目前主流軟體，最大的優點是可以即時協作，後續的視覺跟開發也可以在同一個平台上完成。
• Axure RP：不用透過額外的插件或外掛軟體，就可以設定非常擬真的互動的效果。你也可以不透過寫程式，但設定邏輯判斷機制，例如你設計表單某欄位字數不足，按鈕呈現無法點擊的狀態，這樣客戶就能理解各種互動效果，模擬真實產品。另一方面，複雜系統架構或後台，它必須要是整體結構很清楚的，重點是資訊架構，不是視覺設計。

（延伸參考｜Axure RP – 專為企劃人員而設計的原型工具）

7 下集待續：UX 設計案例！

這次先分享資訊架構及設計團隊工作流程，下一次，我們再來分解實際執行過的專案！敬請繼續鎖定「UX有差嗎？」，或是閱讀 blog 摘要啦～

如果你想回饋給我們，歡迎到 IG 留言  📥
如果你喜歡我們的節目，歡迎在你習慣的 Podcast 平台按下訂閱，分享給朋友們 🤩
Youtube 也可以開字幕收看、收聽 🎧