Introduction The site map documents the pages in a Web site.
Includes the relationship of the pages to each other the
interaction between pages, and a number of other facts that change
from project to project, potentially including which pages have
templates, which pages are dynamic, and which pages are user
created. concentrate on presenting the hierarchy and documenting
which pages will exist and where 03/11/2014 2
Slide 3
Site maps can come in several shapes. The design depends on
your projects needs and your personal inclination as a designer.
Shallow or deep ?? Shallow means that youll have lots of items at
the same level. If everything on your site is only one click from
the homepage, you have a shallow organization scheme. Deep means
that youll have levels and sub-levels and sub-sub- levels. If you
have items that are eight clicks from the homepage, you might have
a deep organization scheme. Site map layout 03/11/2014 3
Slide 4
Large or small: Few pages on your site (small) means that you
can go with simple, very clear layouts, such as the tree layout. If
you have many sections and pages (large), that means youll have to
think carefully about how to diagram in order to make the
relationships clear. The comb map: Youll find this useful in a long
work area (most electronic documents are better at going tall
rather than wide), with an organization scheme that is deep rather
than shallow. Site map layout 03/11/2014 4
Slide 5
The star map: This is useful when the hierarchy is not strict
and when organization is shallower than deep. But it can be
difficult to manage if the organization is deep, and it can get a
bit messy. It is important to draw the star map out carefully and
for each level of item have a unique look (size is most commonly
used) to distinguish hierarchy, because it isnt as scannable as a
tree. The tree map: This map is good when items are not so much
hierarchical as grouped by similarities. It allows the architect to
indicate groupings without feeling the need to create overview
pages. The tree map seems to demand that each level of hierarchy
has a dedicated page; the tabs group like items without indicating
a page. Site map layout 03/11/2014 5
Slide 6
6
Slide 7
In addition to a form for your site map, youll need a
vocabulary for all the objects in it. It should be easy to
determine at a glance what is what in your map. Page and page
stack: A page is a page. A page stack is a set of pages that are
similar enough in formatting to be the same. Imagine, for example,
a set of press releases, articles, and book reviews. File and file
stack: As we said, PowerPoint documents are one example of files
that you might find online that are not Web pages. Other examples
are downloads such as applications, drivers, games, videos and
MP3s, or print-friendly documents such as Word documents or PDF
manuals. Site map vocabulary 03/11/2014 7
Slide 8
Decision: This occurs anytime the system has to make a
decision. Member or non-member and logged in or not logged in are
common decision points for a restricted Web site. Continued: Keep
your site map tidy and readable by diagramming subsections and
sub-processes on a second page. Area and conditional area: Useful
for grouping like items (as seen in the tab layout). Conditional is
useful for demarcating restricted areas, such as those where login
is required. Site map vocabulary 03/11/2014 8
Slide 9
Connectors: What good is a box without an arrow? Arrows
indicate one-way movement through pages. This is usually a
step-by-step process, such as when a user is registering or
checking out. No arrowhead or double arrowheads (this varies among
flowchart languages) indicate bi-directional movement, such as
between pages. E-mail: We find it useful to remind team members
that the home page is not the only way people are arriving at the
site. If a site has a newsletter, this icon is well worth using.
Site map vocabulary 03/11/2014 9
Slide 10
Site Maps Site maps vary from architect to architect and from
project to project. As you create your own, ask yourself these
questions: Do I know what is a page and what isnt? Can I understand
how a user might move through the Web site? Do I understand the
organization or interaction being diagrammed? And always, always
ask yourself How would I do this better? 03/11/2014 10
Slide 11
Flickr has created a consumption page for each photo thats
optimized for viewing. Instead of one next step, Flickr makes
several next steps available A user can view the next photo in the
set. A user can browse photos that have the same tag or add tags. A
user can view and edit the photos metadata. A user can read
comments or add his own. And we havent even looked at the toolbar
above each photo that lets users perform numerous other next steps!
Manage Multiple Next Steps 03/11/2014 11
Slide 12
Most pages on the Web accommodate multiple next steps. There
are many different users with many different goals, so pages
attempt to make an appropriate next step available to every user.
However, you cant design a page to please everyone. You must
prioritize your next steps based on three criteria: 1. How many
users will it help? 2. How often will it happen? 3. How importantto
users or the businessis this next step? Manage Multiple Next Steps
03/11/2014 12
Slide 13
On a Web page, you zone part of the page for navigation, part
for advertisement, part for content. In an application, you may
zone an area for a toolbar; on a video player, you may zone an area
for the controls. In a recent study by Michael Bernard & Ashwin
Sheshadri,12 it was found that the back to homepage link was
expected to be in the upper-left corner almost exclusively, and
shopping carts to be in the upper-right corner. As you begin your
page layout, you may find it useful to create templates for your
page types, with the zones marked clearly as a reference as you
place your interface objects in them. Zone Your Page for
Interaction 03/11/2014 13
Slide 14
Breaking down the modules Once youve identified your zones, you
can figure out which links, text, and functionality needs to be
there. You can also determine the relationships between the
different elements. When you find several links are very closely
associated in purpose, you can form them into a module 03/11/2014
14
Slide 15
A wireframe (or page schematic, as it is sometimes called) is a
basic outline of an individual page, drawn to indicate the elements
of a page, their relationships, and their relative importance. Its
much like the wireframe a sculptor will make before adding clay, as
it gives shape and provides support. First, they make an abstract
mental picture of a page more concrete. Second, wireframes work as
documentation devices Document Your Page with Wireframes 03/11/2014
15
Slide 16
For each element in your wireframe, its important to consider
several questions: Where does the content come from? If you have a
list of related articles, specify how theyre related. What is the
nature of the content? Does it vary greatly in length, size,
language, and type? Is the element required or optional? What
happens if the element doesnt appear on that page? Does the layout
change? Is the element conditional? Does it vary based on other
factors? For example, do administrators see additional links? What
happens if an article doesnt have an associated image? What if it
does? Whats the default or expected state? Ideally, whats supposed
to happen on the page. What are the alternate or error states? How
does the design change when things dont go right? Document Your
Page with Wireframes 03/11/2014 16
Slide 17
03/11/2014 17 From Web 2.0 to Web 3.0 & Semantic Web What
is Web 2.0? And what about 3.0? Part 1
http://www.youtube.com/watch?v=WIm5txBm1YA What is Web 2.0? And
what about 3.0? Part 2 http://www.youtube.com/watch?v=5it8oBMbPrg
Wireframing http://webdesign.tutsplus.com/tutorials/workflow-
tutorials/a-beginners-guide-to-wireframing/