to blink or not to blink

1
to blink or not to blink?

• evolving notions of good websites
• Andrea Ressell, Centre for Educational Technology

2
introduction

• nature of the web
• big (billions of pages) and growing
• pervasive
• uncensored
• hyperlinked
• dynamic, ever-changing
• interactive
• Africa
• 1.7 of world users (16.2 million)
• 258 growth rate (2000 2005)
• References Internet World Stats

3
how websites started

• basic markup language (HTML)
• some formatting options
• ability to link pages with hyperlinks
• increasing complexity and flexibility
• graphic artists move in
• tables hijacked for layout purposes
• new tags
• templates
• animated graphics and gizmos

4
where websites went

• amateur explosion
• innovation, variety, creativity
• but, often badly designed and outdated
• more is more bells and whistles
• web community
• watch dogs, trend setters, critics, theorists
• evolving understanding of the webs nature
• codes of conduct best practices emerged
• Examples Jacob Nielsens site

5
where websites are now

• usability is key
• information architecture
• cross browser compatibility
• user preferences
• accessibility
• design
• cascading style sheets (CSS)
• interactive flash animations
• less is more
• Examples CSS Zen Garden Nike World Citizens
  Guide

6
its pretty, but does it work?

• style may be subjective
• basic usability isnt
• underlying factors
• common expectations
• design conventions
• purpose
• time and the frustration index

7
things to think about

• who, what, when, where and why?
• function
• audience
• content
• information paths how many clicks?
• discourse (naming)
• dense or thin?
• look and feel

8
things to avoid

• content and structure
• plethora of links
• vague naming haphazard hierarchy
• old, outdated and orphaned content
• undifferentiated text long pages
• look and feel
• varying page design layout
• text multicoloured, multi-sized or multi-font
• heavy graphics
• background images
• Examples World's Worst Website Plaid Pantry
  MSU student site

9
things to get right

• content and structure
• clear and simple navigational structure
• differentiated, scannable text
• up to date, hyperlinked data
• look and feel
• template-driven design and layout
• consistent, plain fonts
• optimised graphics
• clean backgrounds
• Examples Body Shop Google Jamie Oliver
  Yellowstone National Park

10
useful references

• Foraker Design www.usabilityfirst.com
• Flanders www.webpagesthatsuck.com
• Webby Awards www.webbyawards.com
• Nielsonwww.useit.com/alertbox
• Top ten mistakes in web design
• Usability 101 Introduction to Usability
• Top ten guidelines for homepage usability
• Lynch Hortonwww.webstyleguide.com