Docstoc

Presentation To Board and Emeritus Trustees

Document Sample
Presentation To Board and Emeritus Trustees Powered By Docstoc
					              Improving Your Website:
                 Principles of Good
                    Web Design
                                Shari Lewis
                         Online Communications,
                     Henry J. Kaiser Family Foundation




www.kff.org   www.kaisernetwork.org   www.kaiseredu.org   www.statehealthfacts.org
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

       (surveymonkey.com, zommerang.com)
   We have the resources to support the project (budget,
       staff)
   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
   purpose




 Dropdown
menu reduces
   clutter
One Homepage
   for three
   different
    target
  audiences
 Branded, but
   not clear:
 The important
 information is
 lost under the
graphic – which
 also obscures
the name of the
  organization
          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
    Design

What site am I on?

How do I get to the
   homepage?

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)
   Good
 Navigation

 Contact link is
 clearly visible

Large and easy to
    find search

 Bread crumbing
Navigation
Problems
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
     paper
   – 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
     presentations.
  Dark Background

 Where is the main
   navigation?

   Where are the
  different content
      sections?

Could use more white
       space.

 May have printing
     problems
  Clear content
  presentation:

High Contrast text
to background

Use of white space,
distinct headers,
lists.
Good Web Design

  Simple layout

 Minimal graphics

Light background

   Easy to read

 Easy to navigate
     Consistent in Design and
           Navigation
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
   Design

      A lot of
information, but
    it doesn’t
   overwhelm

 Uses a Feature
area that can be
     changed
 frequently, and
  is graphically
     flexible.
        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
    use
 Content rich

Minimal Flash

Limited photos
  good in this
     case
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
    layouts.
–   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
    Bickner
  – Don’t Make Me Think by Steve Krug
• WWW
  –   www.webmonkey.com
  –   www.useit.com
  –   www.goodpractices.com
  –   www.usability.gov
                             Shari Lewis
                             slewis@kff.org




www.kff.org   www.kaisernetwork.org   www.kaiseredu.org   www.statehealthfacts.org

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:11
posted:1/9/2012
language:English
pages:28