Transcript Chapter 2 - Designing Display and Navigation

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
Design Follows Function
Audience + Purpose => 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 organization’s
identity
Examples
• Professor Lengel’s site
http://www.bu.edu/jlengel/cmc/onlineindex.
html
• Dorling Kindersley Web site
http://www.dk.com/uk/
• espn.com http://www.espn.com/
• Radford University http://www.radford.edu/
Display of Information
• Early Web designs copied format from
magazines and newspapers but
- printed doc’s are taller than they are
wide, screens width > height
- print is high resolution
- magazine, 2000 dots per inch
- newspaper, 300 dots per inch
- computer, 75 dots per inch
- printed documents – no navigation
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, 4:3, 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)
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”.
Answer the navigation
questions.
• BMW
http://www.bmw.com/generic/com/en/products/a
utomobiles/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?
Feedback and Interaction
• Should be evident on the site’s list of
purposes.
• Implicit collection – user doesn’t know
• Explicit collection – user realizes
- forms
- discussion boards (asynchronous)
- chats (synchronous)
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.
Better Design
• Understand how to incorporate key design
concepts to the entire site
• Guidelines for site design
• Use color, balance, alignment, and other
tools for Web page eye appeal
• Sketching, prototyping, and testing Web
design process
Observe First
• Before building any new web application,
first look at other sites from your
organization and at sites with similar
purposes, review:
- display of information
- navigation
- choosing and finding
- communicating the organization’s identity
- feedback and interaction
Most important location on a
Web Page
• Publishers have learned that people look at the
upper right portion of the right-hand page first.
• First point seen hasn’t been established for web
pages yet, but –
- top more likely than bottom
- things below or right of scroll bar never seen
- number of items should be 7 plus or minus 2,
“hrair limit”
- if you want something seen, put it near the top
of the page with few competing items
Text Easier to Read if:
• Black text on white background
• 10-12 words per line
• Standard 12 point system fonts
Times, Helvetica, Arial, Times Roman
• Serif font for body, sans serif for titles
- this is Arial, this is Times Roman
• Use only two font sizes, one for titles and
one for the body text
Text Easier to Read if:
(continued)
• Avoid words in all caps (only for warnings)
DON’T CLICK HERE!!!
• Make sure headings contrast with body
text. (let’s users scan easily)
• Separate paragraphs using a blank line or
an indented first line, not both.
• Leave plenty of white space around text
• Build page around a single axis. We like
things to line up.
Text Easier to Read if:
(Continued)
• Balance the page from top to bottom and
right to left.
• Memorize this:
“The simpler, the better. Chaos and clutter
are the opposites of order and
organization.” A simple page with a few
visual and text elements is easier to read
than a page with a plethora of items
competing for attention.
Designing for Eye Appeal
• http://www.webwhirlers.com/colors/combin
ing.asp
• Primary colors – red, yellow, blue
• Colors that are directly across the wheel
are complementary. They work will
together.
• Adding black to a color is called a shade.
• Adding white is called a tint.
Designing for Eye Appeal
(continued)
• Alignment – human eye likes things to line
up, for example, the left edge of a picture
and text column (single axis)
- alignment should be the same from
page to page
• Frames facilitate
- constant titles and menu items
• Pay close attention to how scrolling will
work on your pages
Web Site Design Steps
• Sketch the pages, consider the display of
information – text, images, video, tables, lists
(pay attention to alignment)
• Build navigation: menus, identification, and user
control
• Consider feedback and interaction issues
• Decide how to include Corporate Identity
• Decide on type of text
• Color, contrast, and balance
• Frames & alignment
• Scrolling
After Design - Prototype
• Use a WYSIWYG Web page editor or drawing
package to create your online prototype
• Test the prototype with the target audience
• Ask the questions of prototype reviewers
- Text readable? Useful images? Could
you find information?
- Is it clear where you are and where you
going within the site?
After Design – Prototype
(continued)
- Are all menu choices evident? How
would you find “X”?
- Who sponsored the web site?
- What seems missing from this page?
What could be eliminated?
- On a continuum from simple to cluttered
where would this page fall?
- What changes do you recommend?
Testing
• Be thorough
- Windows running Netscape
- Windows running IE
- Macintosh on both browsers
• In particular, test on older versions of
browsers if you’re looking to reach a wide
diverse group of users
• Design without browser specific
extensions <marquee>, <blink>
Testing Display
• Test versus the three most common
display sizes
- 640 x 480
- 800 x 600
- 1024 x 768
• In Windows, click Settings from the Start
menu, then click Control Panel
- double-click Display, set slider to desired
resolution
Test Color Depth
• Most computers set their monitors to 16-bit
color depth
• However, some are set to 8-bit colors
• Changing the resolution of the display,
follow a similar procedure as used on
resolution
Test Bandwidths
• Make sure to test downloading your page
via a modem connection to the internet
(56K connection speed)
• Depending on your audience, you may
want to eliminate some intensive
applications (video, pictures/images, or
sound)
Most Important – User Testing
• Find the various kinds of users as defined
in your use cases
• Let them use the site and see if they can
get what they want from the site easily
• Make sure to note anything they have
difficulty with and make corrections
• Get a good cross section of users, don’t
just get experienced users