網頁設計, 網頁標準化, SEO | HELLOBEAT™ » IA http://beatskate.com/blog 提供網頁設計與開發, 搜尋引擎最佳化, 網頁標準化, 與資訊架構的服務 Sat, 04 Sep 2010 04:25:05 +0000 en hourly 1 http://wordpress.org/?v=3.0 把資訊架構當作是網頁設計的延伸 http://beatskate.com/blog/information-architecture/ http://beatskate.com/blog/information-architecture/#comments Thu, 31 Dec 2009 07:47:07 +0000 Beat! http://beatskate.com/blog/?p=125 其他相關文章:
  1. Xerox 全錄 – 重新設計 CI
  2. Recommand Reading: Bob Gill
]]>

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

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

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

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

這個觀點上來看能讓設計師佔有很多優勢

  • 它能夠完全消除了 – “我們與他們” 這一種工作思想上的隔閡, 也打破本來墨守成規的一些想法
  • 它並不僅只是在雙方所扮演的腳色上制定了一條分界線, 而是把各別的工作角色上當成是一種延伸, 相互輔助
  • 這個作法讓網頁設計師們能夠更了解資訊架構是怎麼一回事
  • 讓網頁設計師們能夠輕鬆的扮演資訊架構師的角色

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

使用介面

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

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

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

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

關於卡片排序, 只要跟著以下這些簡單的步驟

  • 在各別的紙上寫下所有頁面的名稱
  • 要求這些參加者依照她們的感覺去分類 – 當然, 如果需要的話, 她們也可以自由的建立子目錄
  • 要求這些參加者替這些分類命名

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

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

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

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

版面設計

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

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

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

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

以下是我們如何製作網站框架圖 (Wireframing)

在使用 Photoshop 設計網站之前, 我們可以先使用一些軟體如 Visio, OmniGraffle, Axure 將網站框架畫出來,你會發現…在決定網站要使用哪些顏色之前, 這些過程讓你對於網站的內容分析有更進一步的了解.

到了這個階段我們已經有了網站的兩大基本元素, “使用者介面(Navigation)”跟 “網站架構圖(SiteMap)”, 當然,再經過幾次使用者調查以及執行之後, 我們應該也已經決定了網頁的版面設計以及視覺設計

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

程式

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

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

透過以下這三個符合網頁標準化的開發流程, 可以讓資訊結構以及前端視覺設計的有更高度的整合

  • 網站架構的命名可相容並應用於 CSS.
  • CSS 標籤的命名應該是有意義的名稱而不應該只是數字
  • HTML標籤 (HTML TAG) 的命名依照 “文章內容” 有意義的次序排列, (如 h1, h2, h3….h6, 比如說 h3 標題的重要性應該比 h1 還要低)
  • 最後, 列出網站裡所有的標籤元素, 這樣可以找出不同頁面但是卻共用相同元素標籤之間的關係, 讓我們可以重複使用這些元素.

以上, 當我們要開始網站製作並寫下你第一個 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 的故事:專業服務人士的七種兵器 (簡體)

其他相關文章:

  1. Xerox 全錄 – 重新設計 CI
  2. Recommand Reading: Bob Gill

]]> http://beatskate.com/blog/information-architecture/feed/ 0 Xerox 全錄 – 重新設計 CI http://beatskate.com/blog/xerox-new-ci/ http://beatskate.com/blog/xerox-new-ci/#comments Tue, 22 Jan 2008 11:58:33 +0000 Beat! http://beatskate.com/blog/?p=128 其他相關文章:
  1. jQuery 1.3 出來了!!
  2. MY UTLOOP
  3. Rebranding.
]]> Xerox rebranding
xerox rebrand
大名鼎鼎的 OA 廠商 – Xerox, 最近重新設計 CI 了!
我個人是很喜歡這個 Logotype , 但是右邊的那個 Web 2.0 Style 的小球……
現在看雖然蠻符合當下的潮流, 但是不知道這樣的設計過了 5 年/ 10 年旁邊小球是不是還會繼續存在 ?

隨著這次的 Rebranding, Xerox 也重新設計了網站, 設計的相當不錯, IA (information architecture) 很清楚, Navigation 跟主 Banner 的視覺也讓原本極簡的版面看起來有點 Contrast, 不會太過單調

另外, 利用這個機會我想順便提一下, 同樣的選單雖然使用 Flash 開發製作會比較容易, 動態的設計執行上也比較沒有限制, 但是也因為這樣而大大降低了 SEO, 這點我想不管是 WebDesigner/ WebDeveloper 都可以好好思考一下的

Recommand Javascript Frameworks:

其他相關文章:

  1. jQuery 1.3 出來了!!
  2. MY UTLOOP
  3. Rebranding.

]]> http://beatskate.com/blog/xerox-new-ci/feed/ 0