Presentation To Board and Emeritus Trustees by gegeshandong


									              Improving Your Website:
                 Principles of Good
                    Web Design
                                Shari Lewis
                         Online Communications,
                     Henry J. Kaiser Family Foundation
The most important enhancement
 you can add to your web efforts
       this year is a Plan.
         Pre-Design Checklist
   We have clearly defined the characteristics and needs of
       our web audience (accessibility)
   We have clearly prioritized the goals of our web site
    We know what is working well with our current website
   We have the resources to support the project (budget,
   We have the necessary policies and controls in place
       (approval process, deadlines)
   All staff who interact with our site are working towards
       the same goals
      Effective Website Design

•   Clear, branded homepage
•   Easy to navigate
•   Content is easy to read online
•   Consistent in design & navigation
•   Quick to download
   Clear, Branded Homepage
On the homepage a user can answer the
 following :
  – What is the purpose of this site?
  – What organization is this?
  – What are the main sections of the site?
  – How can I search?
  – Where can I get an answer to a question?

  Splash pages
  Tagline states
 purpose clearly

Clearly stated

menu reduces
One Homepage
   for three
 Branded, but
   not clear:
 The important
 information is
 lost under the
graphic – which
 also obscures
the name of the
          Easy to Navigate
On any page a user can answer the following:
  – What site is this?
  – What organization is this?
  – What page am I on?
  – What are the major sections of the site?
  – How can I search?
  – How can I get an answer to a question?
   Bad Web

What site am I on?

How do I get to the

Contact? Search?
           Easy to Navigate
• Follow standard web conventions: Search,
  Contact Us and About Us are easy to find and use
• Create site structure that is intuitive to your
  target audience - rather than mirroring your
  organizational chart
• Develop navigation buttons and bars that are
  consistent and easy to understand
• Navigation buttons and bars allow visitors to see
  where they are in the website (Examples: bread
  crumbs, graphic visual, tabs)

 Contact link is
 clearly visible

Large and easy to
    find search

 Bread crumbing
The primary and
secondary audiences
are policy makers
and researchers.
The categories
could be unclear
to anyone outside
the organization.
Easy to Navigate: Tab Design
Content is Easy to Read Online
• Organize content clearly
   – Users scan more than they read
   – Dark background colors and excessive graphics can disrupt the
     visual flow of your page
   – Use headers, indented lists, white space, to chunk information
   – Create linked table of contents, and divide up longer passages into
     page sets.
   – Edit, Edit, Edit - It is significantly harder to read text online than on
   – Page real estate - Content areas should account for at least 1/2
     the page’s area and navigation should take up 1/3 or less of
     the space.
• HTML vs. PDF
   – Use bundled PDFs for long reports, print publications and
  Dark Background

 Where is the main

   Where are the
  different content

Could use more white

 May have printing
  Clear content

High Contrast text
to background

Use of white space,
distinct headers,
Good Web Design

  Simple layout

 Minimal graphics

Light background

   Easy to read

 Easy to navigate
     Consistent in Design and
Project an image that is valued and remembered by
  your target audience
• Less is more – Simple layout and minimal use of
  color (stick to 2 or 3) can have a tremendous degree
  of style
• Be selective with your images – Should only be on
  the site if they add value to your brand or content.
  They should relate directly to the content.
• A compelling, interesting graphic design supports,
  not overwhelms your message.
Good Web Design

   Content rich

  Simple design

  Easy to read

 Easy to navigate
  Good Web

      A lot of
information, but
    it doesn’t

 Uses a Feature
area that can be
 frequently, and
  is graphically
        Quick to Download
Your pages should load quickly
  – Focus on content – no need for extra
    graphics, let the message speak
  – Use animation/Flash sparingly - Flash
    should only be used when appropriate and
    in limited areas of the site
  – Minimize image size - Make sure your
    staff is trained to optimize graphics for web
 Content rich

Minimal Flash

Limited photos
  good in this
Distracting animation
    Mistakes of Web Design

• Information not focused and
  prioritized for target audience
• Outdated and undated content
• Inconsistent style and structure
• Slow download times
• Look and feel not appropriate for
  goals and mission
Maintaining a Good Website
–   Assign appropriate staff to review web content regularly to
    maintain timeliness of material.
–   Carefully consider your goals and audience before
    redesigning individual sections of the site. Maintain basic
    continuity in navigation and structure, and keep your site
    from becoming a confusing patchwork of styles and
–   If possible, keep the website under the umbrella of your
    communications department, rather than technology or
    admin. It is first and foremost a communications tool.
–   Invest in a good staff person to manage the site, or hire a
    consultant to do so.
–   Track web statistics and user feedback. Find out when
    users are coming to your site and when they aren’t.
–   Keep notes, records, instructions for future reference.
       Web Design Resources
• Books
  – Designing Web Usability by Jacob Nielsen
  – Web Design on a Shoestring Budget by Carrie
  – Don’t Make Me Think by Steve Krug
                             Shari Lewis

To top