Results tagged “Information Architecture” from XXC@Blog

AIDA 的頁面編排原則

|
我有個從事銷售業務的朋友,從他身上我學到「話術」這個詞。話術,就我所理解的,是一套「說服圍觀的觀眾採取購買行動」的一套溝通策略。除了在路邊攤、夜 市、大賣場以外,現在電視購物頻道上也的推銷技巧,我也認為是一種「話術」。如果把原本話術定義中的「觀眾的購買行動」,擴大為「使用者的行動」的話, 「話術」也能說是一種,引導使用者的溝通技巧。

我原先完全沒有想到,網頁的版面編排(layout)也會應用上這種道理。我是看到 Smashing magazin 介紹了 Traffik 的首頁,並根據AIDA分析其版面編排的原則。也許,也可以這樣看,AIDA是一種廣告上使用的行銷技巧(話術)。這使得傳統靜態的版面編排設計,開始有了時間的概念,因為這四項是有次序的:
  1. A - Attention (Awareness): 吸引顧客的注意
  2. I - Interest: 引發顧客興趣:透過展示特點、優點、好處等等。
  3. D - Desire: 說服顧客,只要他購買這個產品,他的需求就會被滿足。
  4. A - Action: 引導顧客進行購買行動

設計小訣(HCI: Design tips)

|

其實準備投影片還蠻辛苦的...常常要在心中模擬聽眾的反應,確定內容大家都能理解,並且感興趣。並且要拿捏份量,不能講得太多。最近,Presentation Zen就介紹了Michael Alley的說法,主講者必許在演講的深度與廣度間,做出一個取捨。

由於第三次分享前一週,已經請Max來介紹Usability(使用性/優使性)的實務經驗。我也樂得輕鬆,只要講一些瑣碎而且管用的小東西就好了。因為我想大部分的學生都會作網頁,或是會開始裝扮自己的Blog等等,所以我覺得由一些網頁設計的實際案例與小訣竅與設計,會比較容易讓學生們理解。這些都是一些入門級的概念,看到這篇文章的行家們請多多包涵。

ALA, The Web Design Survey, 2007

|
ALA Web Design Survey, 2007在四月24日 A List Apart (ALA)(註) ,這個網頁設計者的必讀網站,進行了網頁設計調查研究。這個問卷對象主要是製作網站的人。我離開職場回到學校唸書已經3年了,也許現在網站設計環境已經跟當年有些改變。但是如果就我以前的認識,從職稱,能力與教育背景的問項可以看到一些有意思的東西。

那些算是「製作網站的人」呢?在這份問卷中的第四個問項中,詢問填答者的職稱,項目包括了:

  1. 設計師(Designer)
  2. 開發師(Developer)
  3. 介面設計師(Interface Designer, UI Designer)
  4. 網頁設計師(Web Designer)
  5. 專案經理(Project Manager)
  6. 資訊架構師(Information Architect)
  7. 使用性/優使性專家/顧問(Usability Expert/Consultant/Lead)
  8. 可及性專家/顧問(Accessibility Expert/Consultant/Lead)
  9. 文案/編輯(Writer/editor)
  10. 創意總監/藝術總監(Creative Director, Art Director)
  11. 網頁(站)總監(Web Director)
  12. 網頁(站)製作人(Web Producer)
  13. 站長(Webmaster, Web Master)

那麼,這些琳琅滿目的職稱背後,需要哪些專業能力呢?第五題列出了以下選項:

  1. 圖像設計/視覺設計 (Graphic design)
  2. 頁面編排,介面設計 (Page layout, Interface Design)
  3. 資訊架構,頁面框架,網站組織 (Information Architecture, Wireframing, Sitemapping)
  4. 編寫HTML, XHTML (Markup HTML, XHTML)
  5. 編寫CSS (CSS coding)
  6. 使用性/優使性測試 (Usability testing/knowledge)
  7. 可及性測試 (Accessibility testing/knowledge)
  8. 前端程式開發 (Front-end programming, e.g. JavaScript)
  9. 後端程式開發 (Back-end development, e.g. PHP, Ruby on Rails, ASP)
  10. 圖像編輯處理 (Image editing/production)
  11. 文案/編輯 (Writing/Editing)

嘿嘿,對SOHO來說,常常你的客戶都要求你一個人一手包辦吧。我最近看104上面的網站設計類接案快報,開出來的工作項目還都是希望能找一個一人打天下的料呢。這就像棒球投手一樣,大聯盟球隊的投手要分為先發、中繼、救援、左打者專門投手等等,甲子園的投手通常就只能一人投到底。當一個老闆(業主)說,「hey,我們只要甲子園的程度就好,LP擔著好好幹吧」,這還算上道。至少他知道這中間的差距。如果老闆說「那找一個全才不是更好?」的時候,最好他有出得起松阪級薪水的準備,要不然只是徒增雙方痛苦而已。

這麼多專業能力,哪些科系有提供這樣的學科訓練啊?這份問卷的第十題提供了一些線索:

「你大學就讀科系與你網頁工作有關嗎?例如:視覺設計相關(Graphic Design),電腦資訊科學相關(Computer Science),或圖書館科學(Library Science)。

圖書館科學(Library Science)?沒搞錯。我也是現在開始念圖書館資訊研究所以後,才瞭解到這兩種工作上的相關性。圖書館科系的資訊組織課程有助於資訊架構與網站組織的能力,資訊行為研究根本就是使用性與可及性測試的基礎。而這些都是在設計與電腦科系較不擅長的。

雖然這份問卷並不是為了台灣網頁工作者所設計的。特別在第21, 22, 23 關於年度休假與福利的問項上,在51勞動節的今天看起來特別刺眼。不過填過這份問卷,反而可以知道許多事情。(問卷抽獎:研討會入場卷、30G video ipod、T-shirt的部份了)

I Took the 2007 ALA Web Design Survey

:ALA 也是美國圖書館學會(American Library Association)的縮寫。完全是巧合。
本期的ASIST Bulletin刊出了IA專題。ASIST - American Society for the Information Science and Technology 可以說是這個圖書資訊學學門的主要學會之一,而每年IA最大的IA Summit,也正好是ASIST舉辦的。這期專號有八篇專文,扣掉第一篇由主編介紹性各篇內容,以下共有七篇專文。我個人認為,第二、五、七這三篇特別值得一看,因為他們都提出很強而有力的論點,某個方面也都挑戰且擴展了IA討論的領域,這些都是值得進一步加以論證或修正的。以下是各篇摘要:

IA 相關學術期刊與發表

|
許久沒有更新IA相關的資訊,Maillist與RSS裡面堆積的如山一樣多。今日有空消化一點。 在ASIST 的 IA-academic 網路論壇中,Mary MacDonald 詢問是否有資訊架構(information architectual)相關主題的學術期刊發表管道?Karl Fast 認為目前沒有以資訊架構作為主題的專門學術期刊,但是他提供了一些學術期刊「有時候」會有相關研究發表: * JASIS&T * Journal of digital informatoin * ACM transactions on information systems * Information processing & management * Information visualization * Journal of documentation 另一位Mary M. LaMarca 認為 "Boxes and Arrows" 這份網路期刊也是個發表管道。不過這並非一份正式的學術發表刊物,主要內容會與實務工作與設計主題相關。但是還是有些有趣的資訊,也是相關社群中曝光率很高的刊物。 另外,每年ASIS&T舉辦的資訊架構高峰會(IA Summit)也是重要的發表管道,今年(2006)的高峰會也開始接受論文投稿了。早在2004年的高峰會,邱元平就用Blog留下IA Summit 2004 心得筆記。不知道今年是否還有哪位有心人士願意參加,並大方公開自己的心得的。邱先生在當年網路熱潮的時候以「一週網事」專欄聞名,後來在知世網路工作,算是在台灣少數認識到資訊架構的網路顧問公司。最近許久不見,不知近況如何。 我自己認為資訊架構研究是一種與實務工作導向的研究,在理論清晰之前,實際上已經有許多相關實務工作與產品陸續在進行。這也可以說明為何資訊架構的定義與理論還不清晰具體,但是相關的工作人才需要與相關研討會卻頗為興盛的原因。對我而言,資訊架構與其說是資訊科學,實際上卻有著濃厚的管理學性格。

SIGIA的一本食譜討論串

|

SIGIA-L Maillist的討論區中,一個題為"The art of reading" 的討論串(discussing thread)中,意外冒出來有關一本食譜的討論。(Sigia-l Digest, Vol 9, Issue 39-45. 2005 Jun)

原本的討論是環繞再數位媒體與實體的閱讀行為,Ziya(Listera)提到他有一本印刷精美的 1280頁精裝食譜,但是當要作某到菜的時候,反而是先到Amazon.com上看看有沒有在他們的 "Search in this book" 裡面。發現沒有以後,Ziya只好摸摸鼻子,無奈且沮喪的回去翻那本大書。那時他發現原來他是多麼的依賴資訊技術。

Glenda(Webindexing),認為其實(書後)索引是很管用的,只是大部分的人都認為食譜的(書後)索引一定是太過簡單了,所以都不想使用。

Ziya回應說,書裡面的索引是不錯啦,但是現在是2005年啦,誰還會花時間去書上查資料啊~~

Jan Jursa提到他用一個壞掉的15吋液晶螢幕放在廚房當食譜架(真是不錯的點子),不過對1280頁的食譜而言,實在是太重了一點。

(這倒是讓我想到,除了數位內容方便檢索以外,數位內容也比較方便轉換其他形式呈現,如印出,下載到可攜式行動設備,未來的電子紙等等。而紙本的在這方便的使用性顯得較低。拿到廁所或浴室看書除外,反正資訊設備遲早有一天一定會進攻廁所浴室的)

What is "meta navigation"

|
這幾天的SIG-IA 的maillist 討論著這個話題,稍稍整理了一下。 功能性導覽(meta navigation)通常指「聯絡我們、線上協助、搜尋、購物車、網站地圖」之類的導覽項目。這些導覽項目通常安排在網頁的右上方。特別將功能性導覽 (meta navigation)從全區導覽(global navigation)處區分出來,是因為這些功能性瀏覽項目,往往並非網站的主要目的,而只是屬於功能性輔助的項目。有時這些功能性項目也會被稱為工具項目或是輔助性項目。 根據Young(2003)的看法,她將全區導覽(global navigation)進一步細分為三類:主要導覽(primary navigation), 工具性導覽(utility navigation)與頁尾導覽(footer navigation)。她並沒有提到 meta navigation 這個詞彙,不過在概念上相當於她分類中的工具性導覽與頁尾導覽。 儘管詞彙上的定義互相交雜,但是 Scheid (2005) 認為meta navigation這個詞彙,在語義上可以表達出「詮釋這個網站本身的連結項目」的意涵。(meta有詮釋,說明的意思。這時候中文很難把meta這種雙關性翻譯出來) 但是也有人認為,"meta"的字義來看,所謂meta navigation應該是所謂「導覽的導覽」,這麼來看,通常只有「網站地圖」(site map)可以稱得上是meta navigation。因此為了避免溝通上產生問題,運用上可能還是避免使用meta navigation這個詞彙。 Krug(2005)認為,將全區的頁面導覽連結(globe navigation)區分功能性(uitility)與內容分類(content categories)是有用的;而且功能性導覽也不一定要被安置在頁面的左上角區域,與內容分類導覽並列,或者使用較小的字體用來區別兩種不同的導覽等等。 中文翻譯上,我把meta navigation翻成「功能性導覽」是從它的功能性來翻譯的,雖然喪失了meta所擁有的「超越的、更高層的、詮釋性的」這樣一個隱喻象徵,但是也避免了產生「導覽的導覽」這樣的混淆。 References * Dean, Stew (2005, Jun 2). Maillist Sigia-l Digest, Vol 9, Issue 3 [ Msg 5]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Govella, Austin (2005, Jun 1). Maillist Sigia-l Digest, Vol 9, Issue 2 [ Msg 13]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Krug, Steve (2005, Jun 5). Maillist Sigia-l Digest, Vol 9, Issue 8 [ Msg 3]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Jursa, Jan (2005, Jun 2). Maillist Sigia-l Digest, Vol 9, Issue 3 [ Msg 2]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Maurer, Donna (2005, Jun 1). Maillist Sigia-l Digest, Vol 9, Issue 2 [ Msg 14]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Scheid, Eric (2005, Jun 3). Maillist Sigia-l Digest, Vol 9, Issue 4 [ Msg 5]. available at http://mail.asis.org/mailman/listinfo/sigia-l * Young, I. (2003). Site Navigation: Keeping It Under Control. adaptive path. Retrieved June 3, 2005, from http://www.adaptivepath.com/publications/essays/archives/000103.php

IA的挑戰folksonomy?

|

Rosenfeld, 著名的IA倡導者, 在2005三月的時候,回顧IA的現況,他認為是樂觀的,但是他也提到了一些IA面臨的挑戰:

For example, if we don't take the lead in figuring out how to integrate emergent approaches like folksonomies with traditional, controlled IA approaches, those traditional approaches--and we, their purveyors--might find ourselves marginalized.

由於他的圖資背景,Rosenfeld向來認為控制詞彙的工作,是IA工作中相當專業的一環。這也被圖書資訊對於IA有著莫大的期望(有吧?)。我也覺得,所謂控制詞彙與folksonomy的概念整合,應該是圖資學術所關注的領域--而且是當前所面對的挑戰。

Bloug: Happy Times for IA?)

# Rosenfeld 於2005年歸納企業資訊架構的工作流程地圖, 他將資訊架構的工作主要分為四種不同的取向:由上而下、由下而上、檢索、與專家模式。 # 使資訊架構師與其他設計者可以更容易發現任何一個部門的企業內容. 目標是透過對使用者有意義的部門內容倉儲以整合不同部門間的內容. # Rosenfeld希望EIA roadmap可以用來幫助問題的釐清與解決,或是用來協助發現不被重視的部門資訊。而非被用來作為專案工作的計畫準則與指導方針 # 與我們現在常常用的教科書相比,我認為Rosenfeld最大的不同點在於增加了「專家模式」這樣的概念;並且,他的專家模式是透過 K-logs( Knowledge-Logs: blogging to record one's knowledge about one's work) 與Wiki--這兩個新興(雖然沒有很新,但是跟那本書比較起來,算是新穎了)--的網路工具來實作的,而非透過以往所謂「專家系統」來進行。 Bloug: Updated Enterprise IA Roadmap)

好用的 card sorting software

|
http://condor.depaul.edu/~jtoro/cardzort/

這個好,中文也沒問題,sorting也很直覺。
但是列印會有問題,標題也只能用10個字(中文,英文的話是20 letters)
但是並不是免費的軟體,有30天試用期。

Web as a media object or a formation?

|
從上一張對CD labeling的圖開始,與同學msn對談時想到。

書中的labeling都是指「網站」的形式,幾種labeling的分類與建構都是符合當時(1999-2002)網站建構的經驗法則。是很實務性的知識。


但是,現在(2005)我所面對的網站,例如這個43 Things好了,資訊是更加流動分散的,我在這邊書寫的文字,在save之後也會同時出現在我的blog裡面。我所分類的標題(tag),會在這個網站裡的許多地方,被許多人看見,或被加到許多人自己紀錄的資訊裡面。


我們以往認為,網站是由一個一個頁面的物件(object)所組成的。但是現在這樣的物件已經被進一步的打散,之後又重組。就如同現在所看到的頁面(不論是在43 Things或是在xxc@blog),有許多資訊都不是預先固定好的,許多相關的資訊會根據許多不同的規則或是機制,出現在不同的頁面中。網站的頁面成為一個一個不斷「重新構成」的舞台鏡框。


在這個系統之中,labeling 的重要性,可能在於它需要提供語義間關聯的表徵。這個label/tag/name 是一個資訊表徵,提供資訊與背後語義的連結。labeling的確是提供的溝通功能,是提供了這三個要素:資訊表徵、語義背景、使用者,之間的語義溝通。在網頁與網站伺服器進行溝通的例子中,click hyperlink 代表的是傳遞一個語義訊號與動作訊號(icon label, and onClick behavior);而除了onClick以外,網頁上還有很多不同的行為,如onFocus, onMouseOver, 等等,這些行為所觸發的系統回饋動作,或是所謂互動,與語義性是沒有直接關係,onClick behavior這類的動作訊號,應該屬於導覽系統層次的問題。


This is labeling, too ..

|


cds, originally uploaded by 1541.

在flickr找到另一個"labeling"的圖。
把資訊架構所提的labeling,從網站的情境拉出來,再往日常生活延伸,發現更多有趣的例子。也許會更接近基本的原理。

group decision making

|

IA THINK處,讀到這個團體決策風格: Group Decision Making Styles


METHODS OF GROUP DECISION MAKING

世界上的每日報紙頭版

|
前幾天聽一個人說,現在報紙的版面都「蘋果化」 我不排斥報紙以超大圖當頭版,但是也不認為,放大照片跟顏色,讀者就會滿意,就是比較好看的。 新聞博物館,數位化的收集各地各日的報紙頭版設計, [object] 瀏覽過後,我覺得我們的報紙頭版缺乏對「美」的深度。 美並非顏色多寡,並非圖片比例,是一種精神與堅持。

轉換文件的表格到XML的十大挑戰

|

我只能希望以後不會要作這種案件。
另外也警惕自己以後文件不會有以下陷阱。

以前作過一整套把文件轉成html的工作流程,就算用程式自動處理,還是要用人工來修正,是一件大功夫。也許到XML時代,這種事情還是再一次發生?

第七點,似乎是提醒網頁設計師不要使用table來搞版面配置的一個理由?

1. 文件用tab分隔來模擬表格
2. 文件用換行(enter or return)來模擬表格的列
3. 文件的表格裡有註腳
4. XML表格語法本身的限制
5. 文件用影像圖檔或繪圖工具來製作表格
6. 多重包裝的MS Word 表格
7. 文件用表格來呈現某些視覺效果
8. 連續數頁的表格
9. 對開跨頁的表格
10. 用文字框呈現的表格

譯自以下文章,翻錯的地方歡迎指教:

Converting Tables To XML: Top 10 Challenges & Pitfalls

MyBlogLog

XXC@43Things

My Bookshelf

Creative Commons License
本站所有內容,皆採取創作共用授權。簡單的說,只要附上作者姓名,您可以自由的使用此內容。
This weblog is licensed under a Creative Commons License.