視覺設計師轉型 UI/ UX 設計師第一步: 學習資訊架構的思考
把資訊架構當作是設計的一部分
資訊架構師和設計師與開發者們總是對於彼此的工作有著狹隘的認知，持續的把相互的職責都推擠到一個小盒子裡。舉例來說，很多設計師並不清楚資訊架構在網頁或 UI 設計裡應扮演的角色。設計師也常認為所謂的資訊結構只是把所有的資訊給分類組織好即可，反之，資訊架構師也常會低估設計師在專案裡面所扮演的腳色，總認為當他們把網站的資訊架構制定出來之後，設計師裡所當然的可以很容易的將 UI 給設計出來。
這樣的想法往往會造成雙方合作上的誤解。資訊架構師致力於組織，資訊結構化和制定規格; 網頁設計師則是被引導著讓他們只能作自己擅長的設計工作而不需參與 IA Process 了解整個網站架構，只需把資訊架構這檔事留給架構師即可。但實際上我們認為不一定只有這樣的可能性。
現實的情況是，現今網路上的資訊架構 (IA) 思考是不可能一天之前學會的，但也有很多資訊結構的技巧是設計師們可以輕鬆學會並應用到工作上。
設計師們只需把資訊結構當成是設計發想過程的一部分，一種不同於視覺思考的延伸。設計不只是視覺裝飾或只是設計出漂亮的 UI，在 Tenten 我們認為設計師應該有著更高的使命，設計師應該要尊重設計發想的過程，Design is all about solving problems — 設計的使命是解決問題，而不在於視覺的裝飾。
了解 IA 的思考能讓設計師佔有很多優勢
它能夠完全消除了 — “我們跟他們” 這一種工作思想上的隔閡, 也打破本來墨守成規的一些想法，讓設計師們更能 think out of the box。
資訊架構並不僅只是在雙方所扮演的腳色上制定了一條分界線，而是把各自的工作角色上當成是一種延伸，相互合作輔助。
這個作法讓設計師們能夠更了解資訊架構 (IA) 是怎麼一回事，讓網頁設計師們也能夠輕鬆的扮演資訊架構師從專案的一開始及參與去發想了解整個網站架構，同時也能幫助你綜觀全局，避免設計思考的盲點。
為了要實踐這些想法，我們可將三個基本的網頁開發元素:
介紹如何導入資訊架構的思考。
網站構成三個基本元素:
1. UI 使用介面
2. Layout 版面設計
3. Programming 程式
1. UI 使用者介面
當一個單獨的頁面被新增到網站的當下，設計師們總是無法拒絕馬上將這個頁面分類到她們認知裡認為理所當然的網站分類裡 (sitemap)。但問題來了。Well…你們應該也能夠理解，即使是一樣的頁面，但網站瀏覽者卻不一定跟設計師有一樣的觀感，很多時候使用者們根本不知道他們正在瀏覽的頁面是否就是他們想要的。
因此在網站製作的初期，為了開發一個使用者介面結構，你可以將頁面群組化，替這些繁瑣的資訊定義類別，並將它們分類在各個類別裡。在這個過程你可以邀請一些潛在的使用者 (如非專案相關人員或開發者 — 你的家人/ 朋友之類的)，邀請他們作卡片排序 (Card sorting)。卡片排序讓我們更深入的去了解其他人對於這些資訊分類以及個別分類命名的認知。
透過 Card sorting 你往往會得到令你意想不到的有趣答案
卡片排序其實很簡單，只要跟著以下簡單的步驟做即可
在各別的紙上寫下所有頁面的名稱
要求這些參加者依照她們的感覺去分類 — 當然, 如果需要的話, 她們也可以自由的建立子目錄。要求這些參加者替分類命名，當進行了幾次測驗與 IA/ UX/ Designer 專家一討論之後，一些分類模式將會透過這樣的過程被整合並明朗化，幫助你建立一個最適合的分類方案。
接下來我們要如何定義這些測驗所得到的答案?
當我們從使用者身上得到了最初步的卡片測試答案之後，我們再將這個網站的整體內容替使用者作簡單的描述與解說，最後再讓使用者進行幾次的交叉測試。
最後，我們將可以整理出一個資訊結構上稱為 “類別” 以及 “階層性，有組織”的分類計畫 。日後，當我們在替網站設計導覽系統 (Navigation) 或是網站結構圖 (SiteMap) 的時候，將會發現這些資訊相當的實用，也讓你不再有霧裡看花猜測使用者心態的臆測。
2. Layout 版面設計
這是網站製作相當重要的一個環節，因為一個設計突出/搶眼/與眾不同的版面能夠很容易的讓你的網站脫穎而出。不過這個想法卻也會讓設計師們越來越習慣於在繪圖軟體裡 (如 Photoshop/ Sketch/ illustrator/ inDesign…等) 直接執行網站的頁面設計。但對於那些大型的網站架構，有複雜的互動與操作，或含有大量資訊且多種網頁使用者需求 (TA) 的網站，設計師們就不能只是直接替網站設計出一個版面。反之，設計師或使用者經驗規劃師必須先擬出網站的框架 (WireFrame)。
透過簡單的網站框架(往往是灰階/黑白的線框圖)，同時也詳細標示出各種階層的頁面資訊以及內容，像是文字框，圖片，選單的位置等。
聽起來感覺很像是用類似 Photoshop 的繪圖工具將頁面給畫出來，但其實不然，這個階段注重的只是資料的結構而非視覺的設計。
Wireframe 對於需要跟客戶/ 團隊審核資訊與內容來說，是非常重要的工具
如何製作網站框架圖 (Wireframing) ?
在使用 illustrator, inDesign, Sketch 與 Photoshop 設計網站之前, 我們可以先使用一些軟體如 Visio, OmniGraffle, Axure, Balsamiq，或萬用的筆紙將網站框架畫出來，你會發現…在設計師決定網站要使用哪個他喜愛的顏色之前，這些過程讓你對於網站內容分析能有更進一步的了解，當然啦，設計師怎麼有辦法設計出他尚未完全理解的資訊呢?
到了這個階段已經有了構成網站的兩大基本元素 “使用者介面(UI)”跟 “網站架構圖(Sitemap)”，當然，再經過幾次使用者調查及訪談之後，透過這樣的反覆設計方法，網站的版面設計及視覺設計應該已經慢慢在設計師的腦海裡成形。
已經大功告成了嗎, 當然還沒, 我們還沒開始建置網頁呢
3. 程式開發
終於到了開發的階段，但資訊架構和這個階段有什麼關係呢?
不要以為我們看起來都像設計師。其實在転転，我們具有 Maker/ Hacker 的 DNA。我們可是極度注重程式開發呢！
對於精通於網頁標準化 (Web Standard) 的開發者來說，IA 對於我們的開發流程有著密不可分的關係。在這裡不管是 PM/ UX/ Designer/ Developer/ Programmer 都精通 HTML5 與 CSS3 (HTML 是転転人的共通語言)，我們的內部文件都是由 Markdown 構成。
你必須要知道如何開發符合 W3C HTML/ XHTML/ CSS 標準的網站, 當然也必須清楚了解 HTML 語法上的結構，比如說, h1 是用在內文標題 (Heading)上，P 適用於文章的段落 (Paragraphs)…諸如此類; 必須了解這些標記語法在資訊架構中的層級，如何將 HTML, CSS 整合應用到視覺設計上。其實在開發過程中導入運用到這些相關知識的同時，身為開發者的你也已運用資訊架構設計師的思維了。
透過以下這三個符合網頁標準化的開發流程，可讓資訊結構及視覺設計有更高度的整合：：
- 網站架構的命名可相容並應用於 CSS
- CSS 標籤的命名應該是有意義的名稱而不應該只是數字
- HTML標籤 (HTML TAG) 的命名依照 “文章內容” 有意義的次序排列 (如 h1, h2, h3….h6，比如說 h3 標題的重要性應該比 h1 還要低)
最後，列出網站裡所有的標籤元素, 這樣可以找出不同頁面但是卻共用相同元素標籤之間的關係，讓我們可以重複使用這些元素
以上，當要開始網站製作並寫下第一個 tag 之前, 先利用上面的這些方法去定義網站資訊，將資訊架構帶進網站開發流程裡。這樣可讓整個製作團隊有著更好的溝通，更完善的工作流程，Because you are speaking the same language!。
資訊架構可視為介於網頁設計/ 前端開發/ 程式開發中間共通的橋樑，讓專案溝通更暢行無阻。
實戰筆記 : 網頁設計與 IA
提到網站製作的溝通與工具，相較於國外嚴謹 IA/ UX 的 process，從 Card sorting/Taxonomy/Prototyping/User Test/AB Test/Persona…等。在台灣實在是很難完全實踐於專案當中 (主要是來自預算, 客戶與各層級專案人員的認知等因素…)。
當然，在台灣最常會遇到情況往往是因為預算的考量變成只剩下 Define -> Prototyping -> Design -> Web Development。這時 prototype 就變成與客戶在專案溝通初期極為重要的工具。
以 Tenten 剛成立時執行的幾個小型網站項目舉例，因為我同時兼具 UX/ IA/ Designer/ Developer 身分的關係，我們工作室出來的邏輯架構都會先用 Mindmeister (Mind Mapping 的軟體) 將網站的資訊/功能分類好與客戶確認後，再直接使用 Figma 將 prototype 跟 Layout 一起執行 (因為 Figma 在資訊大規模的調整，排版上會比 photoshop 方便許多)。
客戶第一次看到的 prototype 即是相當擬真的網站 Layout。省略到許多中間 IA 與 Developer 確認的流程。當然這不是最專業的作法，但基於預算的拉鋸與考量，這也是設計師有 IA 思維並成功執行出專案的實踐。
而目前転転團隊執行的較多是大規模且複雜的軟體開發/ 企業網站/ 電商/ App 項目為主。所以目前的 Workflow 則必須是有完整的 UX/ IA/ UI/ Visual Design/ Front End development/ Programming development 團隊與流程參與項目開發完成，日後有機會的話我會再分享實際執行大型專案及如何導入類似國外專業的 IA/ UX 的方法與流程。
由於筆者的主修是資訊工程，但有將近 2/3 的職業生涯工作內容都是從事設計為主 (品牌設計/ 包裝/ 網站設計/ 編排設計/ UI 設計..etc)，所以能深刻了解 IA 的重要性，也能夠體會設計師總是想先從設計上創新，創意角度 (Be different) 去思考執行網站設計的原因。
而過去，筆者隸屬前公司的 UE (User Experience) 部門，一直以來的目標就是以實踐 IA/UX 為目標，但在網站製作上卻又常常跟公司內創意部的設計師想法衝突讓我很挫折，他們總是只專注在客戶提案與視覺裝飾但卻往往忽略 IA 理性思考的重要性。事後總是讓我思考是否有更好/ 更睿智的工作流程?
經營 Tenten 這 10+年下來，我們致力於建立類似新創公司的工作流程。帶領團隊驗利用新創的工作思維替客戶創新或是作數位轉型。而這些 IA (資訊架構) 的邏輯思考即是讓我們這僅僅只有 20 人的小團隊，能夠持續打造數個 企業級的大型專案 背後的主因。
- 企業官網: Vanmoof, amba hotels, 國賓大飯店, Moxa, 台灣橡膠 TSRC, La Weekly, 永光化學, 中華電信 MOD, TPK宸鴻光電, 欣陸投控 Continental Holdings, 大陸工程CEC
- Fintech 金融科技/ 區塊鏈創新: ESUn 玉山銀行, KVB昆仑国际环球资本集团, Orsus, Kronos Token
- 電商: Everrich, Vanmoof, Spark Protein, Topeak, Teamson
- App/ 產品設計: FET Friday 購物, FET 遠傳 App, KVB App
而將這篇粗淺的心得重新整理分享出來，主要是希望能鼓勵設計師在網站執行的初期就先從更高的角度 IA/ UX 去思考，綜觀全局。了解分析整個專案的資訊內容之後再去發想整個網站資訊設計 (Information Design) 與 使用者介面 (UI) 的可能性，進而去設計出更好的使用者經驗。
筆者 Erik Chen 為 Tenten 的 Founder，想了解我們如何用 IA/ UX 思考替企業建立數位品牌形象或打造新創服務可到 tenten.co。
Promo
- 你是 UI Designer 或是 iOS Developer 嗎? 転転現在正在尋找新血加入我們的團隊，想和我們一起打造服務或產品嗎? 請參考此網址。
- 仍是學生? 如果你對於技術或設計充滿熱血及想脫離舒適圈挑戰自己的話。何不考慮來転転實習?
- Tendemy: Webflow 線上學習課程
- 喜愛我們的文章與作品? 我們的 Facebook 會更頻繁的更新產業資訊讓你跟外國的新創與最新的開發技術接軌。
