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 的故事:專業服務人士的七種兵器 (簡體)

其他相關文章:

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

]]> http://beatskate.com/blog/information-architecture/feed/ 0 http://beatskate.com/blog/smarty-truncate/ http://beatskate.com/blog/smarty-truncate/#comments Sat, 26 Dec 2009 19:43:14 +0000 Beat! http://beatskate.com/blog/?p=1067 其他相關文章:

1. AMO – 美國眼力健公司

]]>

最近因為要製作我們第一個電子商務網站不得不把荒廢以久的 Smarty 挖出來用, 到目前為止我們都是製作以內容為主的中小型企業/ 產品網站, 但是一碰到不管是功能, 邏輯, 變數都是怪獸級的電子商務, 就只能靠 Smarty 了. =_=

Well,..修改 Smarty Plugins 下的 modifier.truncate.php 即可讓 truncate 支援 UTF-8 中文的斷字

以下程式碼除了原有 smarty truncate 的功能之外, 主要就是支援 UTF-8 字元.

function smarty_modifier_truncate($string, $length = 30, $etc = '...',
$break_words = false)
{
if ($length == 0)
return '';
$string = html_entity_decode(trim(strip_tags($string)), ENT_QUOTES, 'utf-8');
for($i = 0, $j = 0; $i < strlen($string); $i++)
{
if($j >= $length)
{
for($x = 0, $y = 0; $x < strlen($etc); $x++)
{
if($number = strpos(str_pad(decbin(ord(substr($string, $i, 1))), 8, '0', STR_PAD_LEFT), '0'))
{
$x += $number - 1;
$y++;
}
else
{
$y += 0.5;
}
}
$length -= $y;
break;
}
if($number = strpos(str_pad(decbin(ord(substr($string, $i, 1))), 8, '0', STR_PAD_LEFT), '0'))
{
$i += $number - 1;
$j++;
}
else
{
$j += 0.5;
}
}
for($i = 0; (($i < strlen($string)) && ($length > 0)); $i++)
{
if($number = strpos(str_pad(decbin(ord(substr($string, $i, 1))), 8, '0', STR_PAD_LEFT), '0'))
{
if($length < 1.0)
{
break;
}
$result .= substr($string, $i, $number);
$length -= 1.0;
$i += $number - 1;
}
else
{
$result .= substr($string, $i, 1);
$length -= 0.5;
}
}
$result = htmlentities($result, ENT_QUOTES, 'utf-8');
if($i < strlen($string))
{
$result .= $etc;
}
return $result;
}


其他相關文章:

1. AMO – 美國眼力健公司

]]> http://beatskate.com/blog/smarty-truncate/feed/ 0 http://beatskate.com/blog/wordpress-29/ http://beatskate.com/blog/wordpress-29/#comments Mon, 21 Dec 2009 11:11:36 +0000 Beat! http://beatskate.com/blog/?p=1008 其他相關文章:

1. WordPress 更新至 2.5

]]>

一直以來, WordPress 都是我們製作中小型網站的內容管理系統最佳解決方案, 雖然 WordPress 在效能上的整體表現上並不是很好, 但是只要透過適當的優化, Cache Engine, WordPress 在處理大量的資料庫, 流量上, 以我們製作的經驗來看, 我們相信是絕對可以勝任.

如國外許多流量龐大的網站, Smashing Magazine, Psdtuts+ 等各大媒體網站都是採用 WordPress 作為內容管理系統

也因為 WordPress 的使用者眾多, 這些辛勤的開發者幾乎是以每三個月就發佈新更新版本的速度在進行著. 這次更新的版本 WordPress 2.9 加入了許多方便文章編輯的介面與功能.

WordPress 2.9 的重大特色

• 回復/刪除 垃圾桶功能: 當你不小心刪除了一篇文章或是回應, 現在在也不用擔心它是否會永遠不見了, 你可以從垃圾桶裡面把它挖出來, 當然, 這也代表了, 當你在刪除文章/ 回應的同時, 也會出現一個訊息詢問 “你是否確定”
• 內建的圖像編輯器: 這個功能允許你裁切, 編輯, 旋轉, 翻轉, 以及調整圖像的大小, 從我接觸過以及實際開發許多內容管理系統(CMS)的經驗, 我想這個功能應該是目前後台編輯圖像進化的趨勢.
• 批次化管理的 Plugin(插件), 以及相容性確認: 這表示說你可以一次更新 10 個 plugin, 節省使用者等待操作的時間
• 輕鬆的崁入影像到文章裡: 這表示說你只需要貼上特定媒體網站的網址, 就可以直接崁入影音, 不須跟以前一樣, 找出崁入的原始法, 貼到編輯區裡. 這個功能支援的網站有..(YouTube, Daily Motion, Blip.tv, Flickr, Hulu, Viddler, Qik, Revision3, Scribd, Google Video, Photobucket, PollDaddy, and WordPress.tv…將來還有更多更多)

當然除了以上這些 features 之外, 還有一些細節的改善, 如加入了 rel=caonoical, 對 SEO 有更好的支援等….

更多關於 WordPress 的報導
WordPress 2.9 下載

其他相關文章:

1. WordPress 更新至 2.5

]]> http://beatskate.com/blog/wordpress-29/feed/ 0 http://beatskate.com/blog/pizza-hut-suck/ http://beatskate.com/blog/pizza-hut-suck/#comments Mon, 12 Oct 2009 03:42:55 +0000 Beat! http://beatskate.com/blog/?p=891 其他相關文章:

1. 必勝客披薩 Pizza Hut 網站 一路爛到家 (Part 1)

]]>

不知道為什麼台灣的必勝客披薩網站總是有一些驚人的舉動, 自從有了上次使用必勝客網站訂購 pizza 的恐怖經驗之後, 這次竟然讓我目睹了網頁製作的七大不可思議之一, 我發現使用關鍵字 “必勝客”, 搜尋引擎出來的結果竟然是如下

其實, 根據以往的使用經驗以及上次仔細檢視過他們的程式碼之後, 我可以理解必勝客披薩網站訂購表單的程式不相容於 FireFox 的原因 (但還是不能理解這樣的 bug 竟然需要 3-4 個月卻還遲遲無法解決)…..
所以他們自以為很天才的利用 Javascript 把非 IE 瀏覽器都一律導到這個使用 Friefox 安裝 IETab 的教學頁面, 但是卻連搜尋引擎的 Robot 也一律都導到這個頁面去了, 導致今天這個奇特的景象.

搞不好必勝客的網站工程師是打著這樣的如意算盤: “這些 FireFox User (PC user) 一定有 IE 阿, 製作個安裝 IE Tab 說明頁面, 就不用修這個 bug 了! 我真是天才!

但是沒想到這樣做卻大大傷害了搜尋引擎的排名, 令人難以置信….

其他相關文章:

1. 必勝客披薩 Pizza Hut 網站 一路爛到家 (Part 1)

]]> http://beatskate.com/blog/pizza-hut-suck/feed/ 0 http://beatskate.com/blog/jquery-13/ http://beatskate.com/blog/jquery-13/#comments Thu, 15 Jan 2009 08:56:40 +0000 Beat! http://beatskate.com/blog/?p=477 其他相關文章:

1. Javascript: 偵測 google chrome 瀏覽器
2. MY UTLOOP
3. Xerox 全錄 – 重新設計 CI

]]> jQuery 1.3 出來了, 趁這個版本的 release 也順便祝賀 jQuery 的三週年

Happy Birthday to jQuery!!

離上次 John Resig 在 1/14, 2006 BarCampNYC 第一次 release jQuery 已經過了三年了. 這個版本主要的 feature 我想應該是 HTML Injection Rewrite, 新增的 Html DOM 還能夠使用 jQuery 進行控制, 執行效率提升, 還有更快的 CSS Selector Engine – Sizzle. 還有不知道大家有沒有注意到 jQuery UI 最近也是頻繁的改版, 除了首頁的設計更動之外, 也提供了更 Fancy 的 UI 讓使用者可以使用!

雖然還有其他許多 javascript 的 frameworks, 如 dojo, mootools, script.aculo.us, prototype, yui, 但是我想 jQuery 應該是現在許多網站開發者的首選了吧?

其他相關文章:

1. Javascript: 偵測 google chrome 瀏覽器
2. MY UTLOOP
3. Xerox 全錄 – 重新設計 CI

]]> http://beatskate.com/blog/jquery-13/feed/ 0 http://beatskate.com/blog/pizza-hut-sucky-website/ http://beatskate.com/blog/pizza-hut-sucky-website/#comments Sun, 05 Oct 2008 12:15:19 +0000 Beat! http://beatskate.com/blog/?p=244 其他相關文章:

1. 必勝客披薩 Pizza Hut 網站 一路爛到家 (Part 2)

]]>

週末難得有吃 Pizza 的衝動, 所以當然很直覺的到 PizzaHut 必勝客網站上尋找 pizza 的口味以及訂購資訊, 意外的發現現在有透過網路訂購 ‘加1元送可樂’ 的活動優惠, 沒想到使用該網站的過程卻讓我整個動怒了! 簡單的幾個步驟, 竟然可以浪費了我快半個小時的時間….

本來我想好好的列出他網站設計的缺失, 寫在 blog 上紀錄一下, 但是想想實在是不值得浪費那些時間, 所以我把我下單完最後的備註欄所填寫的意見貼到這裡來.

你們下單網頁設計的實在是有問題!
Firefox, IE8 不支援就算了, 還有 Bug!!
每次 select 都給我 onload (然後之前填寫的資料就消失了, 我重複 input 了好幾次/ IE8)
資料的傳送竟然都在 URL 上面!
還有使用性跟動線也相當的奇異以及不友善,
因為透過網路訂購加1$送可樂, 我才會使用網路訂購!
有了這次的經驗相信我以後再也不會透過網頁訂購了!!!
訂購 pizza 竟然可以花了我半個小時. Good Job!

其實這篇備註並沒有順利的被傳送出去, 因為我傳送之後出現的 Alert 是…”字數限制在 16 個字以內”..
有興趣的使用者可以去訂購看看, 不過活動只持續到 10/6 號就是了
http://www1.pizzahut.com.tw/epapernew/2008p10/01/step1.asp

另外…..發布這邊文章只花了我 15 分鐘, 剛好是等待拿取外帶 Pizza 的時間, 比我透過網路訂購的時間還短.
真的, 我真的希望你們能改進! 其實只要透過一些簡單的設計/ 改善, 可以確實的節省網站使用者的時間
另外, 在短短的時間內, 我也很有誠意的附上了 Pizza Hut 網站在 Firefox 下顯示的問題 (一開始我以為是 SEO trick…後來看過原始碼之後才發現原來不是那麼一回事..XD)
雖然看的出來是把資料寫在 XML 裡面然後再用 javascript 解析….但是這樣大辣辣的放在錯誤的 HTML Doc type 裡面的原因是?? 總而言之, 這真的是非常非常差的使用經驗!!!!!!!!!!!
氣生夠了, 時間也差不多該去拿 pizza 了……

其他相關文章:

1. 必勝客披薩 Pizza Hut 網站 一路爛到家 (Part 2)

]]> http://beatskate.com/blog/pizza-hut-sucky-website/feed/ 0 http://beatskate.com/blog/javascript-google-chrome/ http://beatskate.com/blog/javascript-google-chrome/#comments Wed, 10 Sep 2008 03:13:24 +0000 Beat! http://beatskate.com/blog/?p=237 -1; jQuery 的作者 John Resig 最近也在他的 blog 替 google chrome 的 V8 (Javascript Engine) 做了一些效能的測試, 有興趣可以看看. JavaScript Performance Rundown 有稍微試用了一下 Google Chrome, 感覺效能不錯, 記憶體的使用量好像也如 google 敘述的減輕了許多 (比起 Firefox, IE7). 但是沒有 Firebug, 還有許多好用的 Addon. 還是繼續使用 Firefox 吧! lol [...]

其他相關文章:

1. 網站速度影響 Google 搜尋排名
2. 必勝客披薩 Pizza Hut 網站 一路爛到家 (Part 2)
3. Google Notifier

]]>
雖然目前還是 Beta 的版本, 但是既然是 Google 出的瀏覽器, 我們當然不能忽略它的存在.
所以下面這一小段 Javascript snippet 可以讓你增測使用者的瀏覽器是否為 Google Chrome.
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

jQuery 的作者 John Resig 最近也在他的 blog 替 google chrome 的 V8 (Javascript Engine) 做了一些效能的測試, 有興趣可以看看.
JavaScript Performance Rundown

有稍微試用了一下 Google Chrome, 感覺效能不錯, 記憶體的使用量好像也如 google 敘述的減輕了許多 (比起 Firefox, IE7). 但是沒有 Firebug, 還有許多好用的 Addon. 還是繼續使用 Firefox 吧! lol
不知道什麼時候開始, 已經習慣了 Firebug 加上 EMedit (Notepad++) 的開發方法, Dreamweaver 好像已經不再是那麼需要了

其他相關文章:

1. 網站速度影響 Google 搜尋排名
2. 必勝客披薩 Pizza Hut 網站 一路爛到家 (Part 2)
3. Google Notifier

]]> http://beatskate.com/blog/javascript-google-chrome/feed/ 0 http://beatskate.com/blog/49-factors-about-google-ranking/ http://beatskate.com/blog/49-factors-about-google-ranking/#comments Sun, 13 Jul 2008 03:41:23 +0000 Beat! http://beatskate.com/blog/?p=197 沒有其他相關文章

]]> From 克理斯的seo評論

內部因素

1. URL中出現關鍵詞
2. 網頁Title中出現關鍵詞
3. 常規內容中出現關鍵詞
4. 在頁面的第一段中出現關鍵詞
5. 在頁面的最後一段中出現關鍵詞
6. Heading 標簽 比如h1,h2中出現關鍵詞
7. 站內的鏈接中出現關鍵詞
8. 導向相關內容的導出鏈接
9. 導出鏈接中出現關鍵詞
10. 圖片文件名中出現關鍵詞
11. Alt標簽中出現關鍵詞
12. comment中出現關鍵詞
13. 合理的頻率更新內容
14. 內容對搜索引擎的展示位置
15. 網站結構循環PR，而非散發PR
16. 關鍵詞進行適當的修飾（加粗、斜體等）

外部因素

1. 大量的導入鏈接
2. 從高PR值得網頁獲得導入鏈接
3. 從相關內容網站獲得導入鏈接
4. 導入鏈接指向的網頁有具體內容
5. 錨文字中有關鍵詞
6. 錨文字周圍有相關詞
7. 錨文字存在于文章或句子中
8. 導入鏈接的時間長度，一般導入鏈接的存在時間有3-6個月
9. 單向鏈接的價值高于交換鏈接
10. 導入鏈接的頁面的導出鏈接小于100個，流出鏈接越少越好
11. 鏈接來自不同IP
12. 合理的導入鏈接增長頻率

你需要避免的事情

1. 關鍵詞堆積
2. 所有的錨文字都相同
3. 使用CSS或背景色隱藏內容，這是十惡不赦的大惡
4. 使用JavaScript跳轉
5. 相同ip之下的網頁直接進行大量交換鏈接
6. 橋頁和Cloaking，誘導搜索引擎的爬蟲，這是十惡不赦的大惡
7. 成人內容，違禁藥品，賭博相關內容
8. 內容重複
9. 連向作弊的網站
10. 站內的絕大部分網頁有相同的網頁title
11. 加入到Link Farm或則Link交換類網站
12. 使用被懲罰過的域名
13. 網站建立在被懲罰的IP上

盡量避免的問題

1. 地址中存在動態變量
2. 單一圖片和Flash的網站
3. 用Javascript制作的網站導航條或目錄
4. 用圖片做網站導航而不加ALT標簽
5. 〈head〉〈/head〉之間有太多的代碼
6. 存在太多與網站主題無關的內容
7. 導入鏈接中購買鏈接占多數
8. 和作弊的網站在同一服務器上

沒有其他相關文章

]]> http://beatskate.com/blog/49-factors-about-google-ranking/feed/ 0