2007年7月4日 星期三
資訊結構是什麼?
資訊結構(information architecture)是一個新領域,也才只有幾年的時間而已,但是其未來的需求與成長是可以預見。因為網站這個新媒體的蓬勃發展,整理大量資訊的需求也愈來愈殷切。資訊結構是以圖書館學與人機互動為基礎,所發展出來的一門學問。(Van Dijck, 2003, 8)
資訊結構是網站設計的新領域。資訊結構和視覺設計或程式設計是不一樣的,因為資訊結構關心的不只是網站的外觀,也不是網站的功能(functionality)。
資訊結構的目的是建立好用、滿足站主也滿足使用者需求的網站。資訊結構不是美工,也不是程式,而是溝通。
好的資訊結構是簡單、清楚、優雅,是很容易使用的網站。
不好的資訊結構是迂迴的、不一致的、複雜的,是很難用的網站。
2007年7月3日 星期二
資訊結構師(Information Architect)做什麼?
資訊結構師要做的事有:
- 使用者研究(User research):使用者想在網站上做什麼事?完成什麼樣的任務?
- 定義內容(content)和功能(functionality):什麼樣的內容和功能可以幫助使用者和組織達成其目的?
- 發展組織架構(organization schemes):網站該如何組織?
- 與視覺設計或美工設計人員,共同發展介面(interface)。
- 監督網站的建置。
一般人認為資訊結構師要完成的成果之一是:網站地圖(sitemap)。網站地圖是網站的結構化概覽。在發展網站架構時,資訊結構師必須從各種組織方法中選擇,找出最能滿足使用者上網和組織建網目的的資訊架構。
但是,建立網站地圖不應該是資訊結構師最重要的工作,因為資訊結構不只是maps和diagrams,而是組織資訊並向團隊或上級長官溝通。因為資訊結構師擁有使用者和組織目標的深層知識,必須與程式設計師、視覺設計人員、內容作者等,密切合作,所以溝通技巧是很重要的。
所以,資訊結構師的大部份產出(deliverables)是溝通資訊,maps 和diagrams只是溝通工具而已,不可本末倒置。因為資訊結構師在網站設計團隊(web design team)中扮演重要的溝通角色,所以傾聽(listen)是必要能力。
使用者經驗(User experience)
使用者經驗是使用者訪問網站當時的感覺與想法的加總。如果是正向的訪問經驗,感覺應該很有成就感、很滿足。不好的使用經驗會驅使訪客快快離開網站,殘留的沮喪和生氣感受會讓訪客不再回到這個網站。資訊結構師要關心使用者經驗。在網站設計團隊的討論中,資訊結構師要站使用者這邊,為網站預設的客群發聲。訪問一個網站時感覺是不是愉快,取決於很多因素。包括視覺設計(look and feel)、內容(文字和圖片)、功能性(能做什麼)、和績效(速度)。但是,如果訪客找不到想找的東西或無法完成他想做的事,上面所舉的每一項要素都無法讓訪客留下正向的使用經驗。訪客最常抱怨的是,「我想不到我想找的東西」。人們對網站的認知,大半來自於是否可以達成其上網的目的。所以,好的資訊結構是網站成功的關鍵。要將使用者的任務和目的設計到網站中,資訊結構師要做的第一件事是真切地了解網站的使用者是誰,他想要上網做什麼。所有的設計決策都源自了解訪客。對使用者目標的理解與對組織目標的理解之間,必須取得平衡。通常,組織要的,可能和使用者要的是不一樣的。例如:組織希望蒐集個人資訊,個人卻想要保護個人隱私。資訊結構師的挑戰,就是怎麼樣同時關照兩方的需求。
流程與任務(Flow and tasks)
資訊結構師設計網站,而不只是網頁。訪客對網站的訪問經驗,不是由一個網頁決定的,而是由所訪問過的所有網頁來共同決定。網站中的每一個網頁都必須很好(beautiful)、很好用(easy to use)、內容很豐富(rich in content);但是如果這些網頁沒有連貫沒有條理,那麼整體的訪問經驗還是很糟糕的。
流程(Flow)連結網頁,支援任務(tasks)。任務是訪客上網打算完成的一系列動作(actions),例如發email、買書、或研究某個主題。大部份的任務需要資訊結構師設計一個流程,讓訪客可以循序逛過幾個螢幕後完成任務。任務流程是經過設計的。這就是為什麼我們必須以使用者的立場來思考訪客上站來要做什麼,然後我們才能為訪客設計流程。任務可以很複雜,可以再細分成幾個小任務(sub-tasks)。例如:發email這個簡單的任務,還可能包括一個小任務—拼字檢查(spell check)。如果網站只設計給一個人使用,只做一件事,要設計一個完美的網站就很容易。但是網站的使用者通常包括各種不同類型的使用者,所以必須能夠支援多重任務(multiple tasks)和小任務(sub-tasks)。設計流程來支援最重要的任務,不是一件簡單的事。
產出(Deliverables)
資訊結構師要提供的研究方法(methodologies)和產出(deliverables)是一長串的清單,而且這個清單還不斷地增加。其中最重要的是對網站內容和組織的描述,通常是以網站的型式呈現;以及功能性的描述,說明網站的運作方式。內容和組織的清單(List of content and organization)資訊結構師通常必須負責研擬一份網站內容及其結構的清單,而且通常是以網站地圖(sitemap)和內容表(content table)的方式呈現。
網站地圖和內容表是兩種不同的網站內容呈現方式,各有優缺點。網站地圖可以清楚地展現網頁結構;內容表則可以呈現長串的網頁內容,而且可以提供更多詳細的資訊。
現實生活中的資訊結構
早期的網站設計就像是設計真實生活中的商店櫥窗(shop window)。逛網站的感覺就像在逛街。想像網站首頁就像商店的櫥窗展示,模擬現實生活中的資訊結構和設計。
然而,網站比商店櫥窗的展示,需要更多的組織;因為逛網站比逛街辛苦多了。逛網站唯一有的互動就是clicking,眼睛看到的就只是15吋或17吋的螢幕畫面,而且每click一次,還得等數秒鐘讓網頁下載。
功能性描述(Description of functionality)
功能性描述和任務流程(task flows)是要說明網站是如何運作的,個別的網頁間是如何連結運作,訪客上網可以執行什麼任務。呈現的方式可以有很多種,包括scenarios和流程圖(flow chart)。
Wire frames
Wireframes就像是使用者介面的草圖,展現介面設計(interface design),只是少了視覺設計(visual design)。Wireframe在一個頁面展示按鈕(buttons)、連結(links)、內容(content)和其他的介面項目,同時顯示各項目之間的關係。Wireframes是由資訊結構師和視覺設計師共同發展出來的成果。Wireframe很有用,因為它讓看的人可以關注使用者介面的結構,反複修改,而無需浪費時間修改視覺設計。
2007年5月8日 星期二
2007年4月21日 星期六
搜尋:樣式比對( Pattern matching)
查全(recall)與查準(precision)
有些檢索原理是將各種不同相關程度的結果全部都檢索出來,有些則只檢索出少部分高度相關的結果。這個概念就是查全(recall)與查準(precision) 。
查全(recall)=檢得的相關文件筆數/資料庫中或網站中所有相關文件筆數
查準(precision) =檢得的相關文件筆數/資料庫中或網站中所有文件筆數
比如說網站中有1000篇文件,搜尋結果是100篇;事實上網站中相關的文件共有200篇。查全率是:100/200=0.5,而查準率是:100/1000=0.1。
搜尋系統設計應該強調查全還是查準呢?取決於網站的使用者!
如果網站的使用者是做法律研究、追蹤某個領域科學研究的最新發展、或者為企業併購進行研究,那麼使用者要的應該是查全(high recall)。再比如我們在搜尋引擎中輸入自己的名字做 ego-surfing時,也是希望找到所有有出現自己名字的網頁都找到,再一一瀏覽過濾。查全要面對的問題是,搜尋結果中會出現很多不相關的資訊。
另一種情況是只要找到幾篇真的很好的文件就好了。比如說上網找有關「簡報技巧」的資訊時,我只想要找到幾篇好文章學會簡報技巧,而不想要找網路上所有有關簡報技巧的文件全部都找全。這時我要的是高精確率的結果,是查準;不想知道到底有多少相關資訊,只要找到最優質的資訊即可。
那麼既查準又查全不是兩全其美嗎?可惜魚與熊掌難兼得!資訊結構師必須權衡兩者,決定那種方式對使用者最有用,再選擇一個最符合需求的搜尋引擎。
有些搜尋引擎提供自動切截(automatic stemming),將搜尋結果放大到搜尋相同字根的所有單字。如果是強切截(strong stemming)的話,搜尋computer時,可能搜尋到所有comput字根的單字,包括:computers, computation, computational, computing。這種搜尋方式可以搜尋到較多的文件,恴謂較高的查全率(higher recall)。
相反地,無切截(no stemming)時,輸入computers只會檢索到包含computers的文件,勿略所有其他的同字根的單字。弱切截(weak stemming)則只將搜尋擴大到包含複數詞彙,輸入computer,會檢索到包含computer和computers的文件。無切截和弱切截的查準率較強切截高,但查全率較低。該用那種搜尋系統呢?答案取決於使用者的資訊需求是屬於那種類型。
此外,還得考慮內容結構如何。如果在HTML或XML中有欄位(fields)設計,搜尋引擎可以「看到」,可以搜尋。那麼如果想要知道費曼博士的書,限定在作者欄位搜尋 Richard Feynman,可以得到較高的查準率;如果沒有欄位設計的話,只能以Richard Feynman在網站中做全文檢索,搜尋結果可能是只在文章中提到費曼博士,壓根兒都不是費曼博士的著作。
Document similarity(類似文件)
如果手邊已經有一篇很好的文件,可以利用一些原理搜尋到更多類似的文件,這就是所謂的Document similarity(類似文件)。搜尋引擎的做法是將這篇很好的文件中的頻繁字(stop words),例如: the, is ,he 等,加以刪除後,留下一組語意豐富的詞彙,代表這篇文件。然後以該組詞彙搜尋到更多類似結果。另一種方法是搜尋有用到相同metadata的文件(當然這得要該文件有用metadata做index才做得到)。

Collaborative filtering(協同過濾)
根據Wikipedia,協同過濾是藉由蒐集大量使用者的偏好資訊(collaborating)來自動預測(filtering)個別使用者偏好的方法。協同過濾的基本假設是:很多使用者的一致行為傾向於和未來的行為一致;協同過濾的協同是指很多的其他使用者所表現出來的一致的行為,過濾是用來幫助個別使用者過濾最適的資訊或者偏好行為。所以亞馬遜網路書店用其他使用者上網買書的行為(消費者會一起買的書是相同主題或興趣的)來做協同過濾,推薦使用者類似的書籍。
除了亞馬遜網路書店以外,2005年 Tim Spalding所建的線上個人圖書館LibraryThing是另一個好範例,使用者可以免費或付費註冊後將個人的館藏或喜歡讀的書建上去,並為每本書貼上書籤、寫書評,其他人就可以透過書籤和書評來搜尋或瀏覽相關圖書。例如:下圖是Tuesdays with Morrie 的搜尋結果,這本書有2千4百多位會員有收藏,有49位會員寫書評,下面的標籤雲則是會員們為這本書所貼的標籤,由標籤字體可以知道大部分人對這本書的認知(biography, death, inspirational)。接下來就是利用協同過濾所提供的「推薦」,如果您喜歡看Tuesdays with Morrie,您應該也會喜歡看Mitch Albom的另兩本書(在天堂遇見的五個人和for one more day),還有Morrie教授的現身說法等20本書。
想知道更多協同過濾的網站應用,請參考Wikipedia或google。
Citation Searching(引文檢索)
下圖是利用CiteSeer.IST (賓州州立大學所建的科技文獻數位圖書館)搜尋到的結果,每篇文章均提供下列幾種自動搜尋更多相關文獻的方法:- Cited by
現在正在看的這篇文章有被那些文章引用?文獻的引用與被引用關係隱含著某種相關,也許是作者有交集,也許作者間原本就互相認識。 - Active bibliography (related documents)
和cited by相反, Active bibliography 提供這篇文章的參考文獻(或稱書目),是作者在寫這篇文章時所參考引證的相關文獻,當然有相當程度的相關性。 - Similar documents based on text
當正在看的這篇文章轉譚成搜尋策略進行搜尋,找到相關的文獻。
- Related documents from co-citation
從共引文獻找到的相關文獻。如果其他作者在寫文章時,也參考引用相同的文獻,表示這兩篇文章應該有某種相關性存在。換句話說,A篇文章後面的參考文獻與B篇文章後面的參考文獻中,如果有相同的文獻,就表示A和B這兩篇文章有共引關係(co-citation), A、B兩篇文章一定有共通性存在,一定都探討到某一個主題。
以上所介紹是幾種常見的搜尋原理,當然還有很多原理原則可以應用。不管用什麼方法,最重要的是找到最符合使用者需求的結果。所以citation searching通常對學術研究取向的使用者有用,對一般使用者可能沒有太大的加值。所以,資訊結構師在設計或選擇搜尋引擎時,請先了解使用者希望從我們的網站找到什麼樣的資訊。
Collaborative filtering. (2007, April 19). In Wikipedia, The Free Encyclopedia. Retrieved April 21, 2007, from http://en.wikipedia.org/w/index.php?title=Collaborative_filtering&oldid=123986565
Morville, P., & Rosenfeld, L. (2007). Information architecture for the World Wide Web (3rd ed.). Cambridge, MA: O'Reilly. pp. 159-162.
2007年4月20日 星期五
Social Navigation
最簡單的社會導覽是類似紐約時報的「熱門推薦」(most popular ),較為複雜的社會導覽是亞馬遜網路書店的「協同篩選」(collaborative filtering)、Epinion的「建議引擎」(recommendation engine)和Flickr的「標籤雲」(tag clouds)。
- Most Popular
最簡單的社會導覽是「熱門推薦」(most popular)。紐約時報網站(New York Times)提供Most Popular網頁,為使用者整理最多人轉寄的文章(Most E-mailed)、最多博客連結的文章(Most Blogged)、最多人搜尋的關鍵詞(Most Searched)和最熱門的電腦(Most Popular Movies)。這張圖是在4月20日上網捉的,最熱門的搜尋關鍵詞第二名是virginia tech。
- Collaborative filtering
當我上Amazon搜尋到Information Architecture for the World Wide Web這本書時,Amazon會推薦我買這本書的顧客同時還買了那五本書,同時還可以直接點選 Explore similar items : Books (49) 瀏覽類似的49本書。
Morville, P., & Rosenfeld, L. (2007). Information architecture for the World Wide Web (3rd ed.). Cambridge, MA: O'Reilly.
2007年4月13日 星期五
導覽路徑標示(Breadcrumbs)

有些網站直接就以 You are here:以導引訪客,如About.com.
換句話說,資訊結構師在設計網站時,要幫訪客撒好麵包屑,讓訪客可以很容易地找到回家的路。(好佳在,網路沒有小鳥會飛來偷吃麵包屑)不過,我建議還是精確一點,翻譯成「導覽路徑標示」。
Krug(2006, pp. 78-79)認為About.com的「導覽路徑標示」設計得很好,下列幾項是最佳典範(best practices)。
- 放在網頁頂端
網頁導覽路徑標示放在網頁的頂端齊左,最好!About.com是最佳範例,就像是每本書的頁碼一樣,導覽路徑標示也嵌入成為網頁的一部分。如果將導覽路徑標示往下移,就有可能和其他的導覽要素混淆,然後就會Make me think;使用者就得要停下來想想,那個是真的導覽路徑?我該用那一個呢? - 用>區分層級
- 用較小字體
- 貼上" You are here"
- 最後一項字體加粗或變色
- 不要用導覽路徑標示來取代網頁名稱
有些網站會把最後一項字體放大,同時充當網頁名稱。這種設計對使用者不見得好用,因為使用者通常會期待網頁名稱出現在網頁的正中央或是齊左,而不會認為導覽路徑標示的最後一項就是網頁名稱。

最後一項應該是所在網頁的網頁名稱,用粗體字,更明顯。
About.com是用黑體子標示You ar here:,用藍色字體顯示各層標題,以紅色字體標示現在所在網頁。

網站「好」用性 vs.「可」用性
不是要標新立異,而是真的思考過。因為態度決定高度!
想想看,資訊結構師的目標是什麼?我們是要設計一個「可用」的網站,還是一個「好用」的網站呢?幾乎每一個網站都「可用」,但是這些「可用」的網站可不見得「好用」!
所以,資訊結構師要設計的是一個「好」用的網站,沒有任何質疑空間,沒有任何模糊地帶。
2007年4月10日 星期二
Search 設計原則
基本的設計原則為:
- 每個網頁均提供搜尋選項
使用者不需要回到首頁,就可以在每個網頁做搜尋;因為使用者不見得是由首頁進入網站的,再說使用者可能是逛到一半才決定要搜尋,何苦為難使用者,每個網頁都放上search box吧!但是每頁都要放在相同的位置!
搜尋引擎對內容豐富的資訊性網站非常有幫助,但是如果您的網站內容不太多的話,放上search box可就沒什麼加值效果,還可能引起反效果。
千萬不要太過依賴搜尋引擎!搜尋引擎無法取代好的內容組織,沒有好的資訊架構,搜尋引擎也是幫不了忙的。資訊結構師要好好評估加上搜尋引擎的優點和缺點後,再決定要不要放search box。 - 確保搜尋結果是有用的
- 提供簡單的搜尋
- 大小寫相同,單複數自動切截
使用者上網來是要搜尋資訊,沒有要選總統,不用考全民英檢,不要為難users了。 - 設計搜尋引擎搜尋整個網站
讓搜尋引擎可以搜尋整個網站,或者明確界定搜尋範圍(search zones)。
資訊結構師可以幫使用者控制搜尋的範圍。大部分的使用者都相信搜尋引擎會搜尋整個網站,所以如果只搜尋網站的某個部分,一定要清楚地告知使用者搜尋的是網站的那個部分。
網站設計者所想的「整個網站」和使用者所想的「整個網站」,可能是兩碼子事兒。因為很多的網站是畫分為好幾個子網站,每個子網站是委由不同的設計者(或廠商)設計建置。以台大這個極端分散的網站,由台大首頁的google站內搜尋搜尋到的內容到底是那些呢?
美國麻省理工學院首頁左下角的搜尋功能就明確地標明: MIT Google、People、Offices,讓使用者決定要搜尋MIT網站,還是到MIT找人、找單位,然後再輸入關鍵字詞,接下來當然就是 Go!
紐約時報首頁,在搜尋框後提供下拉式選單供使用者指定搜尋範圍。 - 以使用者的詞彙設計搜尋
- 提供搜尋範本(Search Templates)
提供範本,幫助使用者使用搜尋引擎。
搜尋範本可以幫助使用者建構較佳的搜尋策略。搜尋範本通常包括預設的關鍵字詞(predefined keywords),幫助使用選擇搜尋詞彙。關鍵字詞可以直接選用,或者單純幫助使用者建構自己的搜尋字詞。每個範本的預設關鍵字詞應以階層方式組織,以幫助使用者限定其搜尋策略,改喜搜尋結果的相關度。據Fang 與Salvendy(1999)研究指出,有使用搜尋範本的使用者找到的適用網站比沒用的高出70%。
北德州大學圖書館網站在搜尋網站時提供搜尋技巧的輔助,幫助使用者。
使用者希望能用搜尋結果來解決問題,或繼續下一項任務。如果使用者對搜尋結果感到疑惑,或是無法立刻知道找到了什麼有用的資訊,會讓使用者感到很挫折。
例如:vivisimo的搜尋,在左欄先將搜尋結果cluster成幾大類,在每類後標示網頁數,大類還可以再展開為小類;右欄的搜尋結果會將搜尋關鍵詞以粗體字highlight,讓使用者了解關鍵字詞出現的前後文意為何,幫助使用者做判斷。

同時要在搜尋結果,提供使用者修正搜尋策略或進一步收斂搜尋結果。例如在vivisomo搜尋結果左欄的下方就有Find in clusters:的search box,讓使用者可以指定的cluster中再查詢。
搜尋的功能要很容易使用。大部分的使用者傾向於採用簡單的搜尋策略(search strategy),只輸入簡單的詞彙,甚至連布林邏輯(and, or, not)都很少用。如果網站所服務的大部分使用者並不太常上網搜尋不太常用搜尋引擎,建議提供簡單搜尋指導和範例,幫助使用者有效地搜尋您的網站內容。
亞馬遜書店提供數百萬冊的圖書資訊,而她的搜尋介面只有簡簡單的一條搜尋框。

可以在搜尋框中輸入書名關鍵字詞,如:information architecture。在搜尋結果中,首先以紅字顯示搜尋的關鍵字詞,然後列出相關搜尋(Related Searches: ),再條列搜尋結果(依相關性和熱門度排列),在左欄則列收斂搜尋之建議。

不僅可以關鍵字詞搜尋書名,同一個搜尋框,也可以輸入人名搜尋作者。






使用者在做搜尋時,有一些常用字詞。要決定適當的關鍵字,需要從使用者搜集資料,研究使用者常用、愛用的搜尋字詞,提供與其相關的資訊讓使用者可以透過搜尋引擎搜尋到。請時時提醒自己,資訊結構師和網站設計者的關鍵字詞,不見得就是使用者所愛用、慣用的關鍵字詞,而且很多時候,內容作者常常高估了使用者對專業術語的理解程度。不是嗎?國內的圖書館網站常都直接貼上「參考服務」、或「參考諮詢服務」,而美國圖書館網站,如MIT,則是用Ask Us,請問那個網站讀者比較懂呢?讀者會向那個網站提問呢?


2007年2月27日 星期二
在首頁顯示所有的主要選項
在首頁顯示所有的主要選項(major options)。
說明
使用者不應該要點到第二層或第三層才發現網站的所有選項。
什麼該放在首頁,得要好好選擇,確保放在首頁的選項和連結,都是最重要的。
確保首頁看起來像首頁
確保首頁呈現必要的特色,讓使用者很容易就能確定這就是首頁。
說明
網站的其他網頁不能與首頁混淆,這點超級重要!
使用者會希望可以在首頁做些特定的動作,例如:找到重要的連結,連結到網站地圖或是網站索引,進行搜尋等。
首頁要創造網站的正向第一印象
應該視首頁為傳達網站品質的關鍵。
說明
說到傳達網站品質,首頁應該是一個網站中最最關鍵的一個網頁。有研究顯示,當要求受試者找出優質網站時,約有半數的受試者只看首頁。所以,如果首頁沒有設計好,將沒有第二次機會向使用者傳達良好的第一印象。
實例
MIT網站首頁
頁頁連首頁
確保使用者在網站的任何一頁都可以連回首頁。
說明
很多使用者想要回到首頁重來一次或是開始一項新任務;或者很多時候使用者是由搜尋引擎或其他網站超連結過來的,想要回到首頁了解一下這個網站。所以要設計一個很容易、很明顯的方式,讓使用者可以從網站的任何一頁很快地回到首頁。
設計
很多網站將組織/企業的logo放在每一個網頁的左上角或頂端,點選logo就可以回到首頁。
很多使用者都知道 logo 是可以點取的(clickable),而且點logo會回首頁;但是還是會有一些使用者不知道可以點 logo 回首頁。
因此,如果使用者群包括網路生手時,可以在網頁頂端設計一個 Home的連結標示,幫助這群使用者回到首頁。
logo 要加上Alt文字說明。
提醒
首頁的 logo 要設計成一能點選,以免使用者在首頁點選後「重新整理(refresh)」,浪費使用者的時間。
實例
美國白宮網站
IA資源:Before & After magazine

Before & After magazine 1990年創刊至今的 graphic design 雜誌,以實作方式介紹圖像設計,使圖像易懂、好用,甚至是有趣,網站副標為 How to design cool stuff!
各篇文章均以PDF檔呈現,圖像設計,當然是彩色的囉!可以訂閱e-list,大部分過期內容是要收費的。
推薦兩篇 Free Download的內容