Chapter 6 User Navigation

1
CHAPTER 6 USER INTERFACE DESIGN
23 Slides
2
WHERE WERE GOING
3
USER INTERFACE DEFINITION
4
Usability is the effectiveness, efficiency, and
satisfaction with which users can achieve tasks
in a particular environment . . . Usability is
an issue that you need to consider at every stage
of your design project
5
If one of the above elements is designed poorly,
your entire site suffers

• GUI The combination of an attractive visual
  environment with appropriate, easy-to-use
  navigational elements
• Navigation Designing logical, recursive links
  allows the user complete freedom to choose their
  own method of exploration while assuring that
  they will never be more than a click away from
  your home page
• Usability Combining user friendliness with high
  functionality. Your clients competition is only
  a few clicks away!

6
INTERFACE DESIGN BASICS
7

• Clarity Imagery and links simple and
  understandable
• Consistency Interrelatedness of colors, fonts,
  graphical images, etc.
• Contrast Used to emphasize different areas of
  the page
• Simplicity KISS rule. Dont overcrowd your
  pages. Keep them lean mean
• Structure The unified whole should be more than
  the sum of its parts
• Emphasis The appropriate use of color, text,
  and placement for highlighting

8

• Color Rules
• Choose a family of related colors
• Dont mix bright colors with subdued ones
• Make sure text is readable
• Can be effective for location identification
• Dont overuse color. Five (5) Color max
• Color coding can create accessibility issues

• Font Rules
• Choose a universal font, I.e. Times or Helvetica
• When choosing larger fonts, using an image file
  may give greater control
• For large text blocks, use these rules

9

• Corporate Identity Questions
• Client may wish to keep current identity
• Or, they may wish to explore a new one!
• Who is their intended web audience?
• Who is their competition?
• Logos, fonts, colors, and styles are used to
  create identity

• Using Metaphors
• Representing one idea by using another through a
  perceived similarity
• Commonly used to create site themes
• Make certain your metaphor is visually pleasing
  AND appropriate for your clients identity
• A good metaphor is hard to find!

10

• Good Navigation Rules
• Early development of your page layouts and
  storyboards can improve site navigation for the
  user
• Good site navigation is always consistent,
  obvious, and allows for a quick return home
• In the page layout scheme to the left, the user
  can quickly discover
• Where Am I?
• Where Can I Go? and
• What Is Here?
• Regardless of the layout grid you employ, it
  must be consistent throughout your site
• Storyboards are page layouts for each individual
  page

11

• Your Clients Preferences
• Some clients will require oversight
• If your client doesnt have a style guide,
  create one for them
• Establishing a brand board can help to keep
  your clients essential needs in mind

• The Prototype
• A simplified site mock-up
• Three versions should be created
• Contains images, logos and dummy text examples
• Allows client to cherry pick graphics,
  font(s), and layout elements they like
• Adobe PhotoShop is great for this work!

12

• THE MOST IMPORTANT PAGE ON YOUR WEB SITE!
• Simple or Complex?
• Magazine-Like or Newspaper Style?
• Whos Your Audience?
• What Type of Site Is It?
• Must Agree With Your Clients Taste!

13
INTERFACE USABILITY
14
On the web users experience the usability of a
site before they have committed to using it and
before they have spent money on potential
purchases.
With over 10,000,000 web sites worldwide, the
last thing your clients customers need is a hard
time figuring out where important information is
located . . . Youve only got about a minute
before theyre gone!
15
USEABILITY - BEST PRACTICES

• Use obvious or familiar features
• - Searching, Links, and Help should be
  easy-to-recognize and access
• Keep navigation links consistent
• - Dont change words, links, or objects which
  activate similar features
• Assure that site features can be seen (or heard)
  by everyone
• - Different browsers, browser versions,
  connection speeds, or accessibility limitations
  should not eliminate any user from gaining the
  full impact of your site

16
MANAGING FILE SIZES

• File size matters
• - Smaller is better 45kb - 65kb per page are
  safe guidelines
• Bigger is not better
• - When a customer clicks interactively, the site
  response should begin within 1 second
• Smaller is better
• - Within 8.5 seconds, your user should be able to
  interact with a loading(ed) web page
• Always load text before graphics
• Also, warn your users if a selectable download
  may be slow

17
LEGIBILITY ISSUES
18
Readability To write concisely, take the text
that you would write regularly and then delete
anything that is not essential to getting your
point across
Browsability Avoid abstruse, anachronistic,
enigmatic, or obtuse language which could
befuddle your patrons ?
19
CUSTOMER SUPPORT ISSUES

• Providing Inline Help
• General Help from any page in your site
• Specific Help with any new or improved features
  which may include
• Interactive tutorials
• Step-by-step how-to instructions
• Pop-up balloons with tips and/or tricks
• Brief instructional video clips
• Online technical support can please and
  encourage your site visitors to stay longer and
  explore further

20
NAVIGATION DESIGN BASICS
21
CUSTOMER NAVIGATION

• Important Site Design Questions
• What is here for the user?
• It shouldnt take long for the user to find the
  information they came looking for
• How will the find what they are looking for?
• Are your links prominently displayed? Consistent
  use of menus help here
• How does all this information relate to the
  customer?
• Does the customer have enough control over their
  navigation?

22
NAVIGATIONAL TECHNIQUES

• Different Ways to Get the Customer Where Theyre
  Going
• Image Map Navigation - Pictures that Link
• Text Link Navigation - Words that Link
• Button Navigation Bar - Classic and familiar
• Rollover Navigation Bar - Used with color-coding
  to create a sense of place
• Pulldown Navigation - Keep the number of
  elements to a limit--Too many can be distressing
  and make it difficult for the customer to find
  what they need.
• Frames Navigation - A solid option for
  simplicity and clarity!
• Remember If the customer cant find it, theyre
  gone!

23
TEXT LINK NAVIGATION

• Reliability with Simplicity!
• Structural Navigation Links - Links to primary
  site locations (sub)sections
• Associative Links - The For More Information .
  . . (in this site) type of link
• Additional Reference Links - Secondary For More
  Information . . . type of link (perhaps even
  linking to another site? )
• Inter-Page Links - Links that move customers
  from page to page
• Intra-Page Links - Links that move customers
  around on the same page
• Remember Clarity and Consistency in your links
  are important!

24
IMAGE MAPS TABLES NAVIGATION

• Image Maps Rely on Hot Spots
• Links are associated with different areas of the
  image
• Hot Spots can have any shape
• Client Side (locally determined clicks) vs.
  Server Side (obsolete?)
• Image Tables Contain Slices of an Image
• Different areas of the image have rollover
  features
• Image is sliced-up into an image table
• Advantage Better optimization of image
  compression
• Note Image Maps Tables are a more difficult
  way to create site links, but can be both
  visually pleasing and highly functional for your
  customers!

25
With HTML Meta Tags In order to create a search
feature, you need to insert meta tags with the
ltmeta name... and contentgt descriptions of
page areas which can be searchable. Or Without
Using Freeware Search Engine Software

• For the Control Freak in all of us!
• Frames organize the web page into separate areas
  which can be dedicated to a single design or
  navigation goal, such as
• Logo section
• Banner section
• Menu section
• Body section, etc.
• Frames are not universally well-liked! . . .

26
MORE NAVIGATION TECHNIQUES

• Other Navigation Elements
• The Classic Button
• Rollover Buttons - Over, Click Out
• Rollover Menus - mouseovers
• Popup Menus - Show-as-you-go!
• Pulldown Menus - Using JavaScript

• Creating Navigation Elements
• Use small images (? 70 x 70 pixels)
• Place them in a menubar image no larger than
  640 x 350 pixels
• Include text labels for clarity
• Use layering to enable rollovers

27
NAVIGATION USABILITY
28
USER NAVIGATION RULES

• The Customer Can Easily Determine
• Where Am I?
• Where Can I Go from Here?
• How Do I Get Back Where I Came From?

• Important URL Naming Conventions
• Keep URL names short (KISS!)
• Use common words - your users wont have to
  guess at the spelling
• Use all lowercase letters - Period!
• Use only letters numbers - no spaces or other
  symbol-type characters

Remember All navigational elements should be
consistent obvious!
29
SITE DEPTH MOVEMENT

• Web Site Hierarchies
• Wide Hierarchy -
• Fewer levels
• Home page is 3 clicks away
• User returns home to navigate
• Ideal for small sites with few pages
• Deep Hierarchy -
• Many levels
• Greater detail, many clicks to navigate
  effectively
• Good for larger sites with detailed information

• Major Navigational Concepts
• Global - Easing customer movement between
  primary sections of your site
• Parallel - Improve movement within a single
  section (w/ multiple pages)
• Local - Provide customers with a quick reference
  guide, or index, for the contents of a page

30
THE RULES OF THE ROAD
31

• The Really BIG Picture
• Make navigation links easy to figure out
• Dont play games with accepted navigation
  conventions or techniques
• Always let your customer know where they are

32
WHERE WEVE BEEN!
33
THE END! ?