Display and Navigation

1
Display and Navigation

• form follows function
• design should be based on what user needs to do
  at the site

2
Functions

• Common functions
• the display of information
• navigation through the site
• choosing, searching, and finding
• feedback and interaction
• communicating the organizations identity

3
Functions

• Common functions
• the display of information
• navigation through the site
• choosing, searching, and finding
• feedback and interaction
• communicating the organizations identity

4
The display of information

• Takes place within the confines of the sites
  other purposes.
• Example
• Corporate identity must also be preserved (as in
  a title bar)
• Must provide navigation (as in a menu bar)

5
The display of informationText

• Cannot display in same format as newspaper or
  magazine
• Printed pages are wrong shape.
• Magazines are taller than wide, computer screens
  are wider than tall.
• Printed pages use high-resolution technology
• Magazine 2000dpi
• Newspaper 300dpi
• Computer screen 76dpi
• 9pt type readable in newspaper, 12pt needed on
  web page.
• Printed pages do not support navigation.
• Reader always knows where bottom of page is and
  where they are in the magazine or newspaper.

6
The display of informationtechniques

• Use two-stage interactive display.
• first stage displays overview
• second stage displays detail

7
The display of informationtwo-stage interactive
display

• Text
• Front page on web displays only headlines and
  navigation
• text is only single column
• use large type about 5 inches wide, lots of white
  space.
• Images
• use thumbnail in text
• link thumbnail to larger version.

8
The display of informationtechniques

• Embedding sound and video
• Embed in page.
• Display in a separate window.
• User control
• Display a controller.
• Display in background plays automatically.
• Quality.
• depends on acceptable size
• depends on plug-in technology

9
The display of informationtechniques

• Tables
• Use for information that must be compared in more
  than one dimension.
• models and features of products.
• times and stops for a train
• calendar
• Use for formatting web page.
• put page elements as table data
• make borders invisible
• problem limited width of typical browser page
  usually about 500 pixels or 100 characters_at_12pt

10
Functions

• Common functions
• the display of information
• navigation through the site
• choosing, searching, and finding
• feedback and interaction
• communicating the organizations identity

11
Navigation

• 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?

12
Navigation

• Goal is to answer all of these questions in the
  least amount of space, in the simplest manner,
  without distracting from the display of the main
  site content.
• Good navigation is built around the needs and
  perceptions of the target audience.

13
Navigation

• Many techniques available.
• Must select those techniques that will be most
  useful to typical user.
• Must then arrange these on page so that they are
  obvious, consistent, and easy to use while taking
  as little space as possible.

14
Identifying the Site

• Most companies have colors, font, or logo that
  can be displayed on each web page.
• Site identification can appear anywhere on a
  page.
• Size and placement depend on purpose of page.
• page to build brand awareness/corporate identity
  will display prominently.
• first page often displays prominently, later
  pages less so

15
Knowing where you are

• Web sites are not linear. Cannot use page
  numbers!
• Techniques.
• menus
• site map
• cascading titles
• page numbering
• displaying choices
• searching and finding

16
Knowing where you are

• menus
• can stretch across top of page or down one side.
• show categories into which site is organized
• let users click to move to another category
• items should be short, number of items limited.
• not every page needs its own menu item
• menu should be the same on every page
• can make menus two levels. Lower level hidden
  until a top level is chosen

17
Knowing where you are

• site maps
• answers user questions
• Am I deep into the site, or just at the surface?
• Am I near the end of this section?
• How many more categories like this exist on the
  site?
• If I am looking at XYZ, how far away is ABC?
• Where is DEF?
• shows the various sections and identifies the
  current page
• similar to the flow chart developed in the
  planning stage

18
Knowing where you are

• Cascading titles
• Most web pages contain titles.
• list path to this page
• ABC Corp. Home/Products/Sports Cars/SuperCoupe/Spe
  cs
• Best to allow user to click on a word and go back
  up hierarchy to a previous page.

19
Knowing where you are

• Page numbering.
• Effective if pages are serial.
• use arrows or next/previous buttons.
• can use on a subset of the site

20
Knowing where you are

• Displaying Choices
• use mechanism like a pop-up menu
• allows users to see whats next, what has been
  covered, and to jump back and forth quickly
• Answers two navigational questions
• what else is available at this site?
• where should I go next?
• Important to keep choices above the scroll

21
Knowing where you are

• Searching and finding
• how do I find what Im looking for?
• most common keyword search.
• could also provide an alphabetical list of topics
  and subtopics.
• user can scroll through list and click on a topic

22
Functions

• Common functions
• the display of information
• navigation through the site
• choosing, searching, and finding
• feedback and interaction
• communicating the organizations identity

23
Feedback and Interaction

• Web is a two way medium.
• Supports transactions and conversations with and
  among the users of a site.
• Must base interactivity on the purposes and
  objectives of the site.

24
Feedback and Interaction

• Examples.
• purpose is to promote intelligent conversation
  about XYZ among all three audiences and
  specifically to provide a place where visitors
  can read about new ideas,k follow the thread of
  a topic they are interested in, and compose and
  post their own two cents worth
• to accomplish this purpose, site plan calls for
  an asynchronous discussion system as well as
  synchronous chat functions

25
Feedback and Interaction

• Examples.
• In ABC-Mobile site, designer might call for user
  to be able to purchase a new set of tires for an
  ABC-supercoupe
• Web site of record company might allow users to
  vote on their favorite artist of the month

26
Feedback and Interaction

• Ways of collecting information from users.
• explicit. User is aware of the collection.
• user enters name and address to enter a contest.
• implicit. User is not aware.
• Same site can keep track of which pages a user
  looked at, then can store this info under users
  name.
• can then target ads to that user.

27
Feedback and Interaction

• Ways of talking back to Web site.
• forms
• collect names of people interested in a certain
  product
• discussion boards (or forums)
• users follow the thread of a topic that they are
  interested in and compose and post their own two
  cents worth. Asynchronous communication.
• chats
• live online debates on public issues. Synchronous
  communication.

28
Functions

• Common functions
• the display of information
• navigation through the site
• choosing, searching, and finding
• feedback and interaction
• communicating the organizations identity

29
Organizational Identity

• Elements. Color
• Logos
• Font
• Design Features
• Look Feel
• Most corporations have already used these
  elements to create a corporate identity.

30
Organizational IdentityColor

• Examples.
• Harvard crimson, Yale blue, Syracuse orange,
  Cornell red, Apple red, Gatorade green.
• Use clients existing color.
• Note importance of shade.
• Yales blue is darker than IBMs blue.

31
Organizational IdentityLogos and Font

• logos should be kept small
• Apple has special font (Apple Garamond) used in
  all publications and web sites.

32
Organizational IdentityDesign Features

• Example Ford.
• Cars contain oval-shaped curves
• log and web site contain oval shapes
• Possibilities
• shapes, patterns, animal mascot, song, landscape,
  mountain.
• Look Feel
• must integrate all of these features.