Designing Display and Navigation

1
Designing Display and Navigation

• Chapter Objectives- to review the ways that
  text, images, and multimedia can be
  displayed- to develop systems that allow users
  to find their way through the site- to
  describe methods for collecting user feedback
  and supporting interactivity- to understand role
  of corporate identity in web site design

2
Design Follows FunctionAudience Purpose gt
Design

• Most Web site functions fall into one of these
  categories.- The display of information.-
  Navigation through the site.- Choosing,
  searching, and finding- Feedback and
  interaction- Communicating the organizations
  identity

3
Examples

• Professor Lengels sitehttp//www.bu.edu/jlengel/
  cmc/onlineindex.html
• Dorling Kindersley Web sitehttp//www.dk.com/uk/
• espn.com http//www.espn.com/
• Radford University http//www.radford.edu/

4
Display of Information

• Early Web designs copied format from magazines
  and newspapers but- printed docs are taller
  than they are wide, screens width gt height-
  print is high resolution - magazine, 2000
  dots per inch - newspaper, 300 dots per
  inch - computer, 75 dots per inch- printed
  documents no navigation

5
Screen Resolution

• Dots per inch, pixels, and resolution all refer
  to the density of a display medium. A pixel
  (picture element) is represented by one dot on
  a computer screen. All computer screens have
  nearly the same aspect ratio, 43, 4 units wide
  and 3 units high. Most monitors now are 800
  pixels wide and 600 pixels high. (New ones are
  1024 x 768) The page must fit within the browser
  window, so the web designer should plan on a
  space of 760 wide by 420 high. (10.1 in x 5.6 in)

6
Site Navigation

• The Web site should provide the answer to these
  questions on every page.- Whose site am I
  looking at.- Where am I in the site.- What else
  is available at this site?- Where should I go
  next?- How do I find what I am looking for?
• Remember navigation is closely related to use
  cases.

7
Answer the navigation questions.

• BMWhttp//www.bmw.com/generic/com/en/products/aut
  omobiles/showroom/z4/z4/index.html
• - Whose site?- Where am I?- What else is
  available?- Where should I go next?- How do I
  find what I am looking for?

8
Feedback and Interaction

• Should be evident on the sites list of purposes.
• Implicit collection user doesnt know
• Explicit collection user realizes- forms-
  discussion boards (asynchronous)- chats
  (synchronous)

9
Image Logos Identity

• Color many organizations have an official color
  scheme, if so use it to promote identity
• Logos signs or symbols of an organization are
  very useful to establish identity (How many
  little children know what the golden arches
  mean?
• Font Special for logo
• Features Consistent with other pubs.