把資訊架構當作是網頁設計的延伸

Information Architecture as an Extension of Web Design | 把資訊架構學當作是網頁設計的一種延伸

資訊架構師和網頁開發者/ 網頁設計師總是想要互相替對方定義工作上的定位, 他們總是持續的把相互的職責推擠到一個小盒子裡, 舉例來說,很多網頁設計師並不清楚資訊架構在網頁設計裡應扮演的角色. 設計師也常常認為所謂的資訊結構把所有的資訊給分類組織好即可,反之,資訊架構師們也常會低估了網頁設計師在專案裡面所扮演的腳色, 總認為當她們把網站的資訊架構制定了出來之後, 設計師們就裡所當然的可以把前端介面給開發出來.

其中之一的後果即是造成雙方的誤解. 資訊架構師致力於組織, 資訊結構化和制定規格; 網頁設計師則是被引導著讓她們只能一直作她們一向擅長的設計工作而必須將資訊架構這檔事留給資訊架構師. 但是實際上卻不一定總是這樣的.

事實上, 當今網際網路上的資訊架構是不可能一天之前學會的, 也有很多資訊結構的技巧是網頁設計師們可以輕鬆學會而且應用到工作上的.然後把資訊結構當成是網頁設計的一種延伸.

為了要實踐這個想法, 我們必須將三個最基本的網頁開發元素 ( 使用介面, 版面設計, 程式 ), 延伸到資訊架構的範疇

使用介面

嗯…我們先從使用者介面開始, 這一向也是我們最喜愛也最討厭的網頁設計元素之一

當一個單獨的頁面被新增到網站裡面的時候, 設計師們總是無法拒絕一種念頭 – 就是馬上把這個頁面分類到她們認知裡認為理所當然的網站分類裡…但是問題是…Well…你們應該早知道了, 同樣的頁面, 網站瀏覽者卻不一定總是跟設計師們有一樣的觀感, 很多時候使用者們根本不知道他們正在瀏覽的頁面是否就是她們想要的.

在網站製作最初期的階段, 為了開發一個使用者介面結構, 你可以將頁面群組化, 替這些繁瑣的資訊定義類別, 並將它們分類在各個類別裡. 在這個練習之後你也應該邀請一些潛在的使用者 (非專案相關人員或開發者), 作一些卡片的排序 (Card sorting).卡片排序讓我們更深入的去了解其他人對於這些資訊分類以及個別分類命名的認知

相信我, 你往往會得到令你意想不到的有趣答案

當進行了幾次測驗之後, 一些分類模式將會被整合並明朗化, 這將會幫助你去建立一個最適合的分類方案.

接下來我們要如何定義這些測驗所得到的答案?

當我們從使用者身上得到了最初步的卡片測試答案之後, 我們再將這個網站的整體內容替使用者作個簡單的敘述, 最後再讓一些使用者進行幾次的交叉測試.

最後, 我們將會得到一個資訊結構上稱為 “類別”, 以及 “階層性, 有組織的分類計畫” 的訊息. 日後, 當我們在替網站設計導覽系統 (Navigation) 或是網站結構圖 (SiteMap) 的時候, 將會發現這些資訊相當的實用.

版面設計

接下來, 我們來談一談版面設計吧, 長久以來這都是網站製作相當重要的一個環節, 設計突出, 搶眼, 與眾不同的版面設計這個想法讓網頁設計師們越來越習慣於在 Photoshop 裡直接執行網站的頁面設計. 但是對於那些多語言版本, 含有大量資訊內容且多種網頁使用者需求的網站 (TA), 網頁設計師們就不能只是替網站設計一個版面出來, 相反的設計師們必須先規劃出一個網站的框架 (WireFrame) 出來.

透過簡單的網站框架(往往是 灰階(黑白)的塊狀圖), 先詳細標示出各種階層的頁面資訊以及內容, 像是文字框, 圖片, 選單的位置.

聽起來很像是先用 Photoshop 將頁面給畫出來, 但是其實不然, 這個階段注重的只是資料的結構而不是視覺的設計.

這對於與客戶審核資訊及內容來說, 是非常重要的工具

已經大功告成了嗎, 當然還沒, 我們還沒開始建置網頁…..

程式

是的, 我們終於可以開始程式開發的這個階段, 那資訊架構和這個階段又有什麼關係呢?

Well…對於精通於網頁標準化 (Web Standard)的開發者來說, 這裡可就大有關係了. 身為一個精通於網頁標準化的開發者, 你必須要知道如何開發符合 W3C HTML/ XHTML/ CSS 標準的網站, 你當然也必須清楚了解 HTML 語法上的結構, 比如說, h1 是用在內文標題 (Heading)上, P 適用於文章的段落 (Paragraphs)…諸如此類; 我們也了解這些標記語法在資訊架構中的層級, 如何將 HTML, CSS 整合應用到視覺設計上. 其實在我們在開發過程中導入運用到這些相關知識的時候, 我們已經具備資訊架構設計師的思維了.

以上, 當我們要開始網站製作並寫下你第一個 tag 之前, 先利用上面的這些方法去定義網站資訊, 將資訊架構化帶進網站製作開發流程裡. 這樣可以讓整個設計團隊裡有著更好的溝通, 更完善的工作流程.

介於網頁設計/ 網頁前端程式開發,以及資訊架構, 兩者中間的隔閡並不需要總是那麼清楚.每個層級的網頁開發者總是有很多機會可以把資訊架構化的精神帶進每一個專案

實戰經驗: 網頁設計與 IA

由於我的主修是資訊工程, 但一直以來的工作內容卻都是以設計為主, 所以我能夠深刻了解 IA 的重要性, 也能夠體會設計師總是想先從設計的創新, 創意的角度去思考執行網站設計的原因.

而我隸屬於前公司的 UE (User Experience) 部門, 一直以來的目標就是以實踐 IA, UX 為目標, 但是在網站製作上卻又常常跟公司內創意部的設計師想法有衝突, 這篇文章探討的內容雖然很粗淺, 但是我希望能鼓勵設計師在網站執行的初期就先從 IA 更高的角度去定義, 了解分析整個專案的資訊內容之後再去發想整個網站資訊設計(Information Design)的可能性, 進而去 deliver 更好的使用者經驗.

提到網站製作的溝通與工具, 相較於國外嚴謹 IA/ UX 的 process, 從 Card sorting, Taxonomy, Prototyping, User Test, AB Test, Persona…等. 在台灣實在是很難完全實踐於專案當中…(預算, 客戶與各層級專案人員的認知, 等因素…)

最常發生的情況往往是因為預算的考量, 變成只剩下 Define -> Prototyping -> Web Development. 因此, 這時候 prototype 就變成與客戶在專案初期溝通極為重要的工具.

以我最近執行的小型網站來說, 因為我傾向先從 IA 去思考, 所以我會先用 Mind Manager(Mind Mapping 的軟體), 先將網站的資訊, 功能給分類好跟客戶確認, 然後再直接使用 illustrator 將 prototype 跟 Layout 一起執行 (因為 illustrator 在資訊大規模的調整會比 photoshop 方便許多), 客戶第一次看到的 prototype 即是相當擬真的網站 Layout….

延伸閱讀

轉轉創意 | 筆者目前服務的網頁設計公司 (參考案例)
資訊架構 Wiki
國內 IA 達人 XXC 的知識分享
iA 是一間位於日本的 IA consulting 公司, 信奉著 information design, Blog 相當的值得閱讀!
實踐資訊架構以及網站使用者經驗(Web User Experience)的最佳工具 – Axure | 悠識數位
資訊架構的經典入門書 – O’Reilly 北極熊
北極熊的作者, 被喻為資訊架構之父 Peter Morville 的另一著作 “隨意搜尋 Ambient Findability”
資訊架構專家 Peter Morville 的故事:專業服務人士的七種兵器 (簡體)

2 Responses to “把資訊架構當作是網頁設計的延伸”

1. vele says:

   January 10, 2012 at 1:23 pm

   =-=看繁体字还是有些吃力~~
2. Peter says:

   May 10, 2012 at 9:20 am

   看繁體字還蠻適應的，好文推薦!!