情報傳達分析

Information
Communication
Analysis

第二講 網站設計概論
Introduction to Web Site Design
親民視傳系助理教授 陳弘正
21, September 2006
 The Design of the Site
z Fundamental Principle – Meeting Users’ Need
z Ask yourself what your audience wants, and center your site
design on their needs.
z Many organizations & bussiness make the mistake of using their
Web sites primarily to describe their administrative organization,
and only secondarily do they offer the services, products, and
information the average user is seeking.
z Most readers won’t care how your company or department is
organized and will be put off if such inside information is all your
site appears to offer.
z So, what we need to do?
z Talk to the people who make up your target audience, put yourself
in their shoes, and make the items and services they want the most
prominent items on the home page.
Example ( www.ynhh.org )
 Organizing Information
z Why organizing information is so important ?
z Our daily lives rarely demand that we create detailed architectures
of what we know and how those structures of information are linked.
（日常生活不需要！）

z But without a solid and logical organizational foundation, your Web

site will not function welI even if your basic content is accurate,
attractive, and well-written. （網站設計卻需要，為什麼？）

z Cognitive psychologists （認知心理學家）have known for decades

that most people can hold only about four to seven discrete chunks
of information in short-term memory. The way people seek and use
reference information also suggests that smaller, discrete units of
information are more functional and easier to handle than long,
undifferentiated tracts. （簡單說，網站的設計必須遵循人類閱讀的
限制－只能在很短時間內記住4到7塊獨立的群組化的資訊－因此，
網站設計師也必須依此原則將網頁內容儘可能作適當的切割）
 How the readers read the web?
z 掃描，掃描，還是掃描！
z 跳視－讀者會一邊閱讀一邊尋找明顯的標題或是自己感興
趣的訊息，同時閱讀中的段落週圍所包含的訊息也會一併
吸收。這種視線的不停搜索目標的動作稱之為『跳視』。
z 課堂練習：
z 同學們以兩位為一組，幫彼此記錄眼球掃描的軌跡。印證有無跳視
的情況。
z 非上到下，而是…
 Five Steps to organize information
z Divide your content into logical units

z Establish a hierarchy of importance among the units

z Use the hierarchy to structure relations among units

z Build a site that closely follows your information structure

z Analyze the functional and aesthetic success of your

system
 Hierarchy of Importance
z Hierarchical organization is virtually a necessity on the
Web.
z Most sites depend on hierarchies, moving from the most
general overview of the site (the home page), down
through increasingly specific submenus and content
pages.
z Chunks of information should be ranked in importance and
organized by the interrelations among units.
z Once you have determined a logical set of priorities, you
can build a hierarchy from the most important or general
concepts down to the most specific or detailed topics.
 Relations
z The success of organization of your Web site will be
determined largely by how well your system matches your
users’ expectations.

z A logical site organization allows users to make successful

predictions about where to find things.

z Consistent methods of displaying information permit users

to extend their knowledge from familiar pages to unfamiliar
ones.
 Cont.
z But if you mislead users with a structure that is neither
logical nor predictable, they will be frustrated by the
difficulties of getting around. You don’t want your users’
mental model of your Web site to look like this:
 Functionality Analysis
z Efficient Web site design is largely a matter of balancing
the relation of menu, or home, pages with individual
content pages.

z The goal is to build a hierarchy of menus and pages that

feels natural to users and doesn’t mislead them or
interfere with their use of the site.

z If your Web site is actively growing, the proper balance of

menus and content pages is a moving target. Feedback
from users (and analyzing your own use of the site) can
help you decide if your menu scheme has outlived its
usefulness or has weak areas.
 Functionality Analysis, cont.
z Web sites with too shallow a hierarchy depend on massive
menu pages that can degenerate into a confusing “laundry
list (細目清單）” of unrelated information:

（上圖像不像晾衣架？Laundry list就是這個意思囉！）
 Functionality Analysis, cont.
z Menu schemes can also be too deep, burying information
beneath too many layers of menus. Having to navigate
through layers of nested menus before reaching real
content is frustrating:

像不像一串葡萄?
 Summary
z The most important step in planning your site is to
organize your information.
z Thinking carefully about what you want to say and how
you want to say it requires that you become intimately
acquainted with your site content.
z Create outlines, chunk your information into sections and
subsections, think about how the sections relate to one
another, and create a table of contents.
z A well-organized table of contents can be a major
navigation tool in your Web site. The table is more than a
list of links – it gives the user an overview of the
organization, extent, and narrative flow （敘事流） of your
presentation.
 資訊群組化亦即關係與結構的視覺化

段落 A 結論

段落 B
原始文章
段落 C 段落 A 段落 A 段落 A

結論

循序式 v.s. 破題式

 實作流程
z 原始文章取得（含圖片） Source
z 節錄摘要 Summarize
z 大致分類 Chunking
z 一邊節錄摘要，一邊將節錄出來的訊息大致分類，並分為 最重要、
次重要、普通三類

z 細分索引標籤 Indexing
z 關係 (relation) 結構化 Relation
z 目次化內容 Table of Content
 Classroom Exercise
z 找出相似性質企業的網站(至少十個)，歸納其群組標籤，並
討論其異同。
z 就網站的「使用者為中心」的概念的實現，評論上述自選
之十個網站。
 Homework #2 ( Due 9/28 )
z 請同學從網路或報章雜誌找一篇中等長度的文章（500字以
上，3000字以下），依序找出關鍵字，並將資訊分組
(chunking information)，最後形成一篇具結構層次
(hierarchy of importance)的網頁文章來呈現。
（請同學參考教科書上p.54-61的步驟來分析。）
z 上一次作業中，同學已針對不同企業網站進行初步分析，
這一次，請同學以網站資訊分析的角度，再次對該網站進
行探討，並就其資訊群組化的情況作相關的分析。(2-4頁)
 Reference
z Web Style Guide ( http://www.webstyleguide.com )
z Monash University’s Web Style Guide
( http://www.monash.edu.au/staff/web/ )
z Sun Microsystem’s Writing for the Web
( http://www.sun.com/980713/webwriting/index.html )
z 創意網頁設計，藝風堂
z 速習…Lesson-3 資訊類別化