Page design and layout for improved usability

							   Page design and layout
   for improved usability

                       Dey Alexander, Usability Specialist
                    Web Resources and Development, ITS


www.monash.edu.au
The importance of page design
    “Page design is the most immediately visible
    part of web design.”
                        Jakob Nielsen, Designing Web Usability


   – Has an effect on how people will judge your site
   – Crucial to enhancing usability




www.monash.edu.au
  Page layout and design
      Eye flow and information processing
      Establishing a visual hierarchy
  Use of screen real estate
      Devote most space to content
      Design “above the fold”
      Common location of page elements
  Download (response times)

www.monash.edu.au
Eye flow
   “Good design is based on eye flow. The more
   eye movement required within a visual field,
   the less information can be received and
   processed.”
                                  Duff & Mohler, 1996
   – Relationship between
       • Eye flow
       • Information processing

www.monash.edu.au
Natural eye flow
 Movement is from the Primary
 Optical Area to the Terminal
 Anchor
 • Wavy lines indicate movement
 that the eye naturally resists
 • Crosses are fallow areas on the
 page/screen


         Colin Wheildon, Type and Layout

www.monash.edu.au
Issues with reading online
• Minimising eye movement in web page design is
  even more important than in print
• It is harder to read online
• Around 80% of users scan pages
• Users attention span is short
• Paradox of the active user




www.monash.edu.au
How to reduce eye movement
• Don’t put important, distracting or eye catching
  objects in the areas of the screen that causes
  movement the eye resists
   – Top right
   – Bottom left
• Important items might be missed
• Eye catching items might cause users to miss
  important content


www.monash.edu.au
How to reduce eye movement
• Recognise that elements on pages create shapes
   – Text blocks
   – Headings
   – Images
• Use the squint test to
  check your page layout




www.monash.edu.au
How to reduce eye movement
• Draw imaginary grids




www.monash.edu.au
Reducing eye movement

 Making all the
 images a
 uniform size
 would improve
 the layout of
 this page




www.monash.edu.au
Reducing eye movement
• Use left alignment for text and headings
   – It is no accident that this is the most used
     alignment
   – Not only reduces eye movement
   – Places a fixed point on the page from where all
     headings and text can be scanned



www.monash.edu.au
Reducing eye movement




www.monash.edu.au
Reducing eye movement




www.monash.edu.au
  Page layout and design
      Eye flow and information processing
      Establishing a visual hierarchy
  Use of screen real estate
      Devote most space to content
      Design “above the fold”
      Common location of page elements
  Download (response times)

www.monash.edu.au
Visual hierarchies
   “One of the best ways to make a page easy to grasp
   in a hurry is to make sure that the appearance of
   things on the page… clearly and accurately
   portrays… which things are related and which things
   are part of other things…”
                              Steve Krug, Don’t Make Me Think
   – Relationship between
       • Placement of objects on a page
       • Information processing


www.monash.edu.au
Establishing a visual hierachy
• Design and layout of information to
   – Show importance or priority
   – Show relationships between elements
   – Aid scanning and comprehension




www.monash.edu.au
Show importance or priority
• Make important elements bigger, bolder
• Position important elements nearer to the top
  of the page
• Use a stronger colour for important elements
• Use whitespace around elements to make
  them stand out



www.monash.edu.au
Show importance or priority

Newspapers
do this well
Headline
story, then
secondary
stories…




www.monash.edu.au
Show importance

Government
entry point – all
departments
shown on equal
footing
Some priority
content is
highlighted



www.monash.edu.au
Show relationships between elements
• Use positioning
   – Grouping shows family relationship
   – Nesting shows child relationship
   – Proximity shows similarity
• Use presentation styles
   – Size, colour, font style, orientation



www.monash.edu.au
Show relationships

Family
relationship

Child
relationship




www.monash.edu.au
Show relationships




www.monash.edu.au
Aid scanning and comprehension
• Provide visual relief from dense chunks of text
   – Use meaningful headings and sub-headings
   – Turn lists and series into bullet points
   – Emphasise key words or phrases within paragraphs
• Create contrasts between page elements
• Present appropriate content as tables, graphs,
  charts, images



www.monash.edu.au
Aid scanning

Headings
and sub-
headings
Bulleted lists




www.monash.edu.au
Aid scanning

Too much
dense text
Hyperlink
colour
doesn’t
stand out
enough




www.monash.edu.au
 Aid scanning

Too much
dense text
Hyperlink
colour
doesn’t
stand out
enough




www.monash.edu.au
Aid scanning
Still too
hard to
scan links
to main
content




www.monash.edu.au
  Page layout and design
      Eye flow and information processing
      Establishing a visual hierarchy
  Use of screen real estate
      Devote most space to content
      Design “above the fold”
      Common location of page elements
  Download (response times)

www.monash.edu.au
Use of screen real estate
• Most users visit sites for their content
• So, the first rule concerning the use of screen
  real estate is:


   – Devote most of the screen real estate
     to content


www.monash.edu.au
Devote screen real estate to content




www.monash.edu.au
Devote screen real estate to content




www.monash.edu.au
Devote screen real estate to content




www.monash.edu.au
Devote screen real estate to content

Content is
displayed
inside a small
frame.
No scrolling
would be
required if the
frame was
removed

www.monash.edu.au
Devote screen real estate to content

Content is
displayed
inside a small
frame,
requiring more
scrolling than
would
otherwise be
necessary


www.monash.edu.au
Devote screen real estate to content




www.monash.edu.au
  Page layout and design
      Eye flow and information processing
      Establishing a visual hierarchy
  Use of screen real estate
      Devote most space to content
      Design “above the fold”
      Common location of page elements
  Download (response times)

www.monash.edu.au
Use of screen real estate
• Users are in a hurry
   – Not sure if this page is the right page
• So, the second rule concerning the use of
  screen real estate is:


   – Design „above the fold‟


www.monash.edu.au
Scrolling behaviour
• Early studies (1994/5) showed that users were
  reluctant to scroll
• Not true any more, but
• Users will not scroll unless they think the content
  they’re looking for is on that page
• So, give good clues above the fold about what’s
  below the fold



www.monash.edu.au
The fold moves
• Variations in screen displays means that the page
  fold is not static
   – Different display resolutions
     (640x480, 800x600, 1024x768, etc.)
• Browser toolbars also take up space
• Safe space is around 300 pixels




www.monash.edu.au
“Above the fold”

Real
content is
hidden
below the
fold




www.monash.edu.au
Page length and scrolling
• As a rule of thumb
   – Home page: 1 screen
   – Level 2 page: 2 screens
   – Level 3 page: 3 screens
• Caution: pages can be accessed directly




www.monash.edu.au
Horizontal scrolling

Users don’t
expect
horizontal
scrolling




www.monash.edu.au
  Page layout and design
      Eye flow and information processing
      Establishing a visual hierarchy
  Use of screen real estate
      Devote most space to content
      Design “above the fold”
      Common location of page elements
  Download (response times)

www.monash.edu.au
Common location of page elements
• Some design conventions exist
   – Logo at top left or centre
   – Logo increasingly functions as a link to home page
   – Navigation at top and/or left
       • Right side navigation increasing
       • Practise of repeating links in text at bottom of the page is
         decreasing




www.monash.edu.au
User expectations study
• Conducted at Wichita State University Usability
  Research Lab (SURL) 2000
• 304 participants (128 male, 183 female)
• Age range 18-63 (average 20)
• Internet experience > 1yr (mean 3 yrs)
• Primary surfing goal - education


www.monash.edu.au
User expectations study




www.monash.edu.au
Example

Logo
placement
Navigation
placement




Search
placement

www.monash.edu.au
Example

Logo
placement
Navigation
placement




Search
placement

www.monash.edu.au
Example

Logo
placement
Navigation
placement




Search
placement

www.monash.edu.au
Example

Logo
placement
Navigation
placement




Search
placement

www.monash.edu.au
Example

Logo
placement
Navigation
placement




Search
placement

www.monash.edu.au
Example

Logo
placement
Navigation
placement




Search
placement

www.monash.edu.au
Example

Logo
placement
Navigation
placement




Search
placement

www.monash.edu.au
Example

Logo
placement
Navigation
placement




Search
placement

www.monash.edu.au
  Page layout and design
      Eye flow and information processing
      Establishing a visual hierarchy
  Use of screen real estate
      Devote most space to content
      Design “above the fold”
      Common location of page elements
  Download (response times)

www.monash.edu.au
Download times
   “Every usability study I have conducted
   since 1994 has shown the same thing:
   users beg us to speed up download times”.
              Jakob Nielsen, Designing Web Usability




www.monash.edu.au
Factors affecting download times
• Many factors are outside the control of the
  web designer
   – Server’s connection to the Internet
   – Throughput of the server
   – Bottlenecks on the Internet
   – User’s connection to the Internet



www.monash.edu.au
Factors affecting download times
• Many factors are within our control
   – Weight of page components
       • Use graphics and multimedia judiciously
       • Optimise graphics and multimedia
       • Reuse images and other page components
   – Browser rendering speeds
       • Reduce nesting in complex tables


www.monash.edu.au
Guidelines for page sizes
• Survey of top 50 sites in 1999 by Vincent
  Flanders
   – Top ten average size - 34.4Kb
   – Bottom ten average size - 61.3Kb
   – Average size - 47.8Kb



www.monash.edu.au
Page weight a coincidence?


                      1 second   10 seconds

         modem        2Kb         34Kb

         ISDN         8Kb         150Kb

         T1          100Kb        2Mb

                    Jakob Nielsen, Designing Web Usability

www.monash.edu.au
Human reaction to response times
• Miller (1968), but still considered valid
   – 0.1 second limit for system to appear to react
     instantaneously
   – 1 second before user’s flow of thought is
     interrupted
   – 10 second limit for keeping a user’s attention
     focused
• Voila! 34Kb

www.monash.edu.au
Page weight examples
• Google – 12Kb
• Yahoo – 46Kb (usually around 29Kb)
• Hotmail – 17Kb
• Amazon – 142Kb (usually around half this)
• AltaVista – 15Kb
• Ninemsn – 80Kb


www.monash.edu.au
Page weight examples - G8
•   University of Melbourne – 109Kb
•   University of Queensland – 61Kb
•   University of WA – 75Kb
•   University of NSW – 75Kb
•   University of Adelaide – 63Kb
•   University of Sydney – 73Kb
•   ANU – 63Kb
•   Monash University – 38Kb


www.monash.edu.au
Summary
• Minimise eye movement across the page
• Create a visual hierarchy
• Devote most space to content
• Design “above the fold”
• Put things where users expect them
• Keep (navigational) pages lean (around 34Kb)




www.monash.edu.au
Resources and tools
• Jakob Nielsen
  Designing Web Usability, 2000
• Steve Krug
  Don’t Make Me Think, 2001
• Patrick J Lynch and Sarah Horton
  Web Style Guide, 1999
  http://info.med.yale.edu/caim/manual
• ZDNet Mechanic Site Tune Up
  http://www.netmechanic.com/cobrands/zd_dev/

www.monash.edu.au