資訊結構與網站設計

Web Marketing Association WebAwards 最佳網站獎

2011-03-01T22:53:00.004+08:00

美國網路行銷學會（Web Marketing Association, WMA）自1997年開始每年公布全球各個行業的最佳網站。

2010年是第14屆，96個行業的最佳網站得主已經揭曉，WMA的評審會針對下列七項指標進行評估，每項指標給予0-10分，並會持續觀察網站長達14週。

Design
Ease of use
Copywriting
Interactivity
Use of technology
Innovation
Content

Best Education Website
Risdall Marketing Group Mounds View Public Schools
Best Leisure Website
Recreational Boating & Fishing Foundation TakeMeFishing.org
Best Medical Website
St. Jude Children's Research Hospital Cure4Kids
Best News Website
NBC Learn NBC News Archives On Demand

2010年教育類的Outstanding Website為：

Englishtown, Inc. Englishtown
HowStuffWorks.com Do you know HowStuffWorks.com?
Market United Murdoch University Brand Campaign
Maryland Public Television/Bean Creative Math By Design
Media Explorer Limited ENABLE website by CBH of HKU
Microsoft Microsoft Student Experience
Nobel Web AB Honeywell-Nobel Initiative

每週進度與投影片下載

2010-02-22T14:55:00.001+08:00

2/23/2011
課程導覽
 A Book about Design
3/2/2011
資訊結構概論
3/9/2011
使用者需求與行為
3/16/2011
組織系統
3/23/2011
標示系統
3/30/2011
導覽系統
繳交作業1：組織系統（分析三個相同主題網站之組織與系統）
4/6/2011
溫書假
4/13/2011
搜尋系統
4/20/2011
控制詞彙與Metadata
4/27/2011

資訊結構之過程與方法論：Strategy
5/4/2011
期中考
資訊結構之過程與方法論：Implementation
5/11/2011
資訊結構之過程與方法論：Documentation
5/18/2011
Web Accessibility
5/25/2011
Children Web Sites
6/1/2011
6/8/2011
期末專題口頭報告
6/15/2011
繳交書面報告

18. 6/22/2011

連結標示的例子

2008-03-20T10:01:00.002+08:00

今天上課講到「連結標示」（Contextual Link）時有提到新聞網站的內文超連結，投影片上沒有舉例，覺得大家認為都很OK，請看下面這個例子。

請點報導的超連結到台視新聞網站，在網站上「一起」是clickable的，在把游標移過去前，先想想您可能會連到什麼內容，然後再把游標移過去，看看和您想的一不一樣？！

疑課業壓力大輔大男生跳樓亡著紅衣留遺書向父母道歉台視新聞 - Taiwan
就算不能盡如人意，還是得放寬心，昨天晚間，輔仁大學發生一起學生跳樓自殺案件。

Web2 0網站：地圖日記實現矽谷創業夢

2008-03-12T21:21:00.001+08:00

江佩蓉（2008， 3月）。Web2 0新傳奇地圖日記實現矽谷創業夢。30雜誌，3月號。

今天看到的新聞，提供大家參考，興許明年我貼的就是您的故事喔！

2009 分組名單

2008-03-03T14:59:00.004+08:00

資訊結構是什麼？

2007-07-04T00:22:00.001+08:00

“Information architect” 這個詞是「資訊焦慮」的作者Richard Saul Wurman 在1975年提出來的，但是一直到近年來國外才有人自稱為資訊結構師（information architect）。

資訊結構（information architecture）是一個新領域，也才只有幾年的時間而已，但是其未來的需求與成長是可以預見。因為網站這個新媒體的蓬勃發展，整理大量資訊的需求也愈來愈殷切。資訊結構是以圖書館學與人機互動為基礎，所發展出來的一門學問。（Van Dijck, 2003, 8）
資訊結構是網站設計的新領域。資訊結構和視覺設計或程式設計是不一樣的，因為資訊結構關心的不只是網站的外觀，也不是網站的功能（functionality）。

資訊結構的目的是建立好用、滿足站主也滿足使用者需求的網站。資訊結構不是美工，也不是程式，而是溝通。

好的資訊結構是簡單、清楚、優雅，是很容易使用的網站。
不好的資訊結構是迂迴的、不一致的、複雜的，是很難用的網站。

資訊結構師（Information Architect）做什麼？

2007-07-03T00:23:00.000+08:00

資訊結構師的主要工作是組織網站資訊，讓使用者可以找到想要的資訊，可以完成任務。讓使用者更高興，買更多的東西，在網站停留更多的時間，讓公司賺更多的錢。

資訊結構師要做的事有：

使用者研究（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-05-08T11:28:00.000+08:00

沒事兒，剛找檔案時，看到一個檔案名字為「蝴蝶飛啊飛」，想起這個網頁的設計，提供給大家參考。

搜尋：樣式比對（ Pattern matching）

2007-04-21T00:07:00.000+08:00

大部分搜尋引擎的檢索原理（retrieval algorithms）是應用「樣式比對」（pattern matching），亦即將使用者的查詢與索引（index）做比對，通常是到網頁全文中去找看看有沒有相同的字串。當找到一個相同的字串時，該網頁就會被新增到retrieval set。所以，如果使用者輸入"information architecture"，那麼有出現"information architecture"字串的網頁就會被檢索出來。聽起來好像很簡單，事實上比對的過程可以有很多種不同的做法，做法不同檢索出來的結果也不同。

查全(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.

Social Navigation

2007-04-20T21:45:00.000+08:00

社會導覽（Social Navigation）的基本想法是，每個人都對其他人感興趣，都想要知道其他人都看什麼、喜歡什麼；所以Morville與Rosenfeld(2007, 142)認為觀察其他使用者的行為，可以為個別使用者創造價值，因此已被大型網站廣泛探用。

最簡單的社會導覽是類似紐約時報的「熱門推薦」（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本書。

Recommendation engine
Epinions提供上圖書、電影、車子等百萬種產品的review，是讓消費者分享消費經驗（好的和不好的）的一個平台。

Tag clouds （標籤雲）
Flickr利用標籤的字體大小來表示tag popularity，是一種視覺化的呈現方式。Flickr讓使用者在上傳照片時，可以為每張照片貼上標籤（最多70個），使用者可以上網瀏覽或搜尋標籤，所以可以知道那些標籤最熱門。

目前大部分的企業網站都還沒有採用社會導覽的方式，相信假以時日，這類型的應用將會愈來愈普及。至少，企業會發現追蹤分析search log、使用統計、和顧客資料庫，可以提供有價值的資訊，設計更好用的「文內導覽」（contextual navigation）。更希望使用者行為能回饋到網站設計，建立彈性的導覽系統，隨著使用者的行為與偏好，調整導覽，顯著地提高網站的好用性。

Morville, P., & Rosenfeld, L. (2007). Information architecture for the World Wide Web (3rd ed.). Cambridge, MA: O'Reilly.

導覽路徑標示（Breadcrumbs）

2007-04-13T17:23:00.000+08:00

就像實體的建築設計一樣，網站設計也要在每一個網頁清楚的讓訪客知道 You Are Here! 訪客迷路了，都可以循著來時路回到前面逛過的任何一站。例如下圖是flickr網站導覽路徑標示（Breadcrumbs），目前所在的位置是clusters，以紅字顯示，可以往前回到上一層nature，也可以直接跳回Tags或Explore。

有些網站直接就以 You are here:以導引訪客，如About.com.

Krug（2006）將這種設計稱為 Breadcrumbs，因為在格林童話《糖果屋》中Hansel 和Gretel第二次被丟棄到森林時，就是沿路撒麵包屑，當做線索的。（可是故事的麵包屑是被小鳥吃掉了所以才找到糖菓屋還是薑餅屋的，作者說要以此來說明迷路是多麼令人不愉快）

換句話說，資訊結構師在設計網站時，要幫訪客撒好麵包屑，讓訪客可以很容易地找到回家的路。（好佳在，網路沒有小鳥會飛來偷吃麵包屑）不過，我建議還是精確一點，翻譯成「導覽路徑標示」。

Krug（2006, pp. 78-79）認為About.com的「導覽路徑標示」設計得很好，下列幾項是最佳典範（best practices）。

放在網頁頂端

網頁導覽路徑標示放在網頁的頂端齊左，最好！About.com是最佳範例，就像是每本書的頁碼一樣，導覽路徑標示也嵌入成為網頁的一部分。如果將導覽路徑標示往下移，就有可能和其他的導覽要素混淆，然後就會Make me think；使用者就得要停下來想想，那個是真的導覽路徑？我該用那一個呢？

用＞區分層級

用較小字體

貼上" You are here"

最後一項字體加粗或變色

不要用導覽路徑標示來取代網頁名稱

有些網站會把最後一項字體放大，同時充當網頁名稱。這種設計對使用者不見得好用，因為使用者通常會期待網頁名稱出現在網頁的正中央或是齊左，而不會認為導覽路徑標示的最後一項就是網頁名稱。

Krug, S. (2006). Don't make me think: A common sense approach to web usability (2nd ed.). Berkeley, CA: New Riders.

網站「好」用性 vs.「可」用性

2007-04-13T17:16:00.000+08:00

Web usability請譯為網站「好」用性！

不是要標新立異，而是真的思考過。因為態度決定高度！
想想看，資訊結構師的目標是什麼？我們是要設計一個「可用」的網站，還是一個「好用」的網站呢？幾乎每一個網站都「可用」，但是這些「可用」的網站可不見得「好用」！

所以，資訊結構師要設計的是一個「好」用的網站，沒有任何質疑空間，沒有任何模糊地帶。

Search 設計原則

2007-04-10T14:20:00.000+08:00

如果您的網站是content-rich website，那麼訪客會期望您提供search的功能，幫助他找到他想要的網站內容。只要簡單地輸入一、兩個或更多個的關鍵字詞到框框中（其實它叫search box），就可以找到網站中有出現這幾個字的網頁，而且最好能顯示這幾個字出現在什麼地方。

基本的設計原則為：

每個網頁均提供搜尋選項
使用者不需要回到首頁，就可以在每個網頁做搜尋；因為使用者不見得是由首頁進入網站的，再說使用者可能是逛到一半才決定要搜尋，何苦為難使用者，每個網頁都放上search box吧！但是每頁都要放在相同的位置！
搜尋引擎對內容豐富的資訊性網站非常有幫助，但是如果您的網站內容不太多的話，放上search box可就沒什麼加值效果，還可能引起反效果。

千萬不要太過依賴搜尋引擎！搜尋引擎無法取代好的內容組織，沒有好的資訊架構，搜尋引擎也是幫不了忙的。資訊結構師要好好評估加上搜尋引擎的優點和缺點後，再決定要不要放search box。
確保搜尋結果是有用的

vivisimo

提供簡單的搜尋

大小寫相同，單複數自動切截
使用者上網來是要搜尋資訊，沒有要選總統，不用考全民英檢，不要為難users了。
設計搜尋引擎搜尋整個網站
讓搜尋引擎可以搜尋整個網站，或者明確界定搜尋範圍（search zones)。
資訊結構師可以幫使用者控制搜尋的範圍。大部分的使用者都相信搜尋引擎會搜尋整個網站，所以如果只搜尋網站的某個部分，一定要清楚地告知使用者搜尋的是網站的那個部分。
網站設計者所想的「整個網站」和使用者所想的「整個網站」，可能是兩碼子事兒。因為很多的網站是畫分為好幾個子網站，每個子網站是委由不同的設計者（或廠商）設計建置。以台大這個極端分散的網站，由台大首頁的google站內搜尋搜尋到的內容到底是那些呢？

美國麻省理工學院首頁左下角的搜尋功能就明確地標明： MIT Google、People、Offices，讓使用者決定要搜尋MIT網站，還是到MIT找人、找單位，然後再輸入關鍵字詞，接下來當然就是 Go!

紐約時報首頁，在搜尋框後提供下拉式選單供使用者指定搜尋範圍。

以使用者的詞彙設計搜尋

提供搜尋範本（Search Templates）
提供範本，幫助使用者使用搜尋引擎。
搜尋範本可以幫助使用者建構較佳的搜尋策略。搜尋範本通常包括預設的關鍵字詞（predefined keywords），幫助使用選擇搜尋詞彙。關鍵字詞可以直接選用，或者單純幫助使用者建構自己的搜尋字詞。每個範本的預設關鍵字詞應以階層方式組織，以幫助使用者限定其搜尋策略，改喜搜尋結果的相關度。據Fang 與Salvendy(1999)研究指出，有使用搜尋範本的使用者找到的適用網站比沒用的高出70％。

北德州大學圖書館網站在搜尋網站時提供搜尋技巧的輔助，幫助使用者。

在首頁顯示所有的主要選項

2007-02-27T22:52:00.000+08:00

原則
在首頁顯示所有的主要選項（major options）。

說明
使用者不應該要點到第二層或第三層才發現網站的所有選項。
什麼該放在首頁，得要好好選擇，確保放在首頁的選項和連結，都是最重要的。

確保首頁看起來像首頁

2007-02-27T21:43:00.000+08:00

原則
確保首頁呈現必要的特色，讓使用者很容易就能確定這就是首頁。

說明
網站的其他網頁不能與首頁混淆，這點超級重要！
使用者會希望可以在首頁做些特定的動作，例如：找到重要的連結，連結到網站地圖或是網站索引，進行搜尋等。

首頁要創造網站的正向第一印象

2007-02-27T21:30:00.000+08:00

原則
應該視首頁為傳達網站品質的關鍵。

說明
說到傳達網站品質，首頁應該是一個網站中最最關鍵的一個網頁。有研究顯示，當要求受試者找出優質網站時，約有半數的受試者只看首頁。所以，如果首頁沒有設計好，將沒有第二次機會向使用者傳達良好的第一印象。

實例
MIT網站首頁

頁頁連首頁

2007-02-27T20:58:00.000+08:00

原則
確保使用者在網站的任何一頁都可以連回首頁。

說明
很多使用者想要回到首頁重來一次或是開始一項新任務；或者很多時候使用者是由搜尋引擎或其他網站超連結過來的，想要回到首頁了解一下這個網站。所以要設計一個很容易、很明顯的方式，讓使用者可以從網站的任何一頁很快地回到首頁。

設計
很多網站將組織/企業的logo放在每一個網頁的左上角或頂端，點選logo就可以回到首頁。
很多使用者都知道 logo 是可以點取的（clickable），而且點logo會回首頁；但是還是會有一些使用者不知道可以點 logo 回首頁。
因此，如果使用者群包括網路生手時，可以在網頁頂端設計一個 Home的連結標示，幫助這群使用者回到首頁。
logo 要加上Alt文字說明。

提醒
首頁的 logo 要設計成一能點選，以免使用者在首頁點選後「重新整理(refresh)」，浪費使用者的時間。

實例
美國白宮網站

IA資源：Before & After magazine

2007-02-27T14:29:00.000+08:00

Before & After magazine 1990年創刊至今的 graphic design 雜誌，以實作方式介紹圖像設計，使圖像易懂、好用，甚至是有趣，網站副標為 How to design cool stuff!

各篇文章均以PDF檔呈現，圖像設計，當然是彩色的囉！可以訂閱e-list，大部分過期內容是要收費的。

推薦兩篇 Free Download的內容

Design a logo of letters（0363）
What's the right typeface for text?（0269）