Why Design Matters

1
Why Design Matters

• Yellowhead Regional Library's Public Library
  Conference, November 23, 2007
• Darlene Fichter
• University of Saskatchewan Library

2
Overview

• Design guidelines
• Challenge old rules
• Share some new research
• Compulsory audience fun

This presentation is adapted from Jeff
Wisniewskis New Rules of Web Design.
3
What is Web Design?

• Web design is the creative process of designing
  pages to be displayed on the Internet as a
  website
• Conceptualization
• Planning
• Modeling
• Code development

Definition from Wikipedia and Web Design
Definition
4
Jakobs Law

• Users spend most of their time on other sites
• This means they prefer your site to work the way
  other sites do
• Live with it!

End of Web Design by Jakob Nielsenhttp//www.usei
t.com/alertbox/20000723.html
5
(No Transcript)
6
(No Transcript)
7
Old Simplicity Rules

• Classic example is Google
• Single purpose web site

8
New RIA Rules

• Complex information requires Rich Internet
  Applications (RIA)
• Its all about the experience

Simplicity Is Highly Overrated by Donald
Normanhttp//www.jnd.org/dn.mss/simplicity_is_hig
hly.html Web Users Want Rich Internet
Applications by Ron Rogowskihttp//www.forrester.
com/Research/Document/Excerpt/0,7211,40333,00.html
9
Rich Internet Applications

• RIA allows more interaction than HTML
• Example suggesting terms as when you type in a
  search box

10
Library Web Sites
11
Old Content is King

• Content is important but

12
New Design MattersALOT

• Novice users judge superficially, and quickly!
• Professional design credibility

Stanford Guidelines for Web Credibility
http//www.webcredibility.org/guidelines/
13
Halo Effect

• First impressions become lasting impressions

Web users judge sites in the blink of an eye
http//www.nature.com/news/2006/060109/full/news06
0109-13.html
Photo by UmBob via flickr Creative Commons
14
And Your First Impression is
15
(No Transcript)
16
(No Transcript)
17
Staff or Users Impressions?
18
Myth People Read Online

• Usually no
• Read the target content, i.e. an article but
  not the pages in between

19
Reality People Scan Quickly

• Headings
• Even here its the first two or three words
• Make them count
• Use trigger words
• Hyperlinks

20
Take the Quiz

• The top of the page is prime real estate
• TRUE FALSE

21
The Top of the Page Is

• Useless space due to Banner Blindness
• People have been conditioned to avoid looking at
  the rectangular area that's above the page's main
  headline

Just How 'Blind' Are We to Advertising Banners on
the Web? By Michelle Bayleshttp//psychology.wic
hita.edu/surl/usabilitynews/2S/banners.htm
22
Old Navigation 3 Click Rule

• Everything should be 3 clicks from the home page
• Shallow not deep
• Use broad categories and long lists

23
New Design for SCENT

• Users will happily click so long as they feel
  they are on the right path

Photo by The TriskaidekagrammatronCreative
Commons
Designing for the Scent of Informationby Jared
M. Spool, Christine Perfetti, and David
Brittanhttp//www.uie.com/reports/scent_of_inform
ation/
24
Scent Works When

• Design communicate "scent" via links
• Links need to have a strong scent by containing
  "trigger words" that relate to the content that
  lies beyond

Jared M. Spool. The Right Trigger Words.
http//www.uie.com/articles/trigger_words/
25
Example of Scent Failing
26
The Right Trigger Words

• Observe and learn
• Ask you users
• Library Terms that Users Understand By John
  Kupersmith
• http//www.jkup.net/terms.html

27
How Do People Choose Where to Click?

• Users make decisions based on
• What gain can I expect from the information?
• What is the likely cost to discover and consume
  that information?
• Usually time and effort
• Visitors are ruthless, lazy, impatient and quick

Information Foraging Why Google Makes People
Leave Your Site Faster - Jakob Nielsen
http//www.useit.com/alertbox/20030630.html
28
Satisficing is a Fact

• If visitors are ruthless, lazy, impatient and
  quick, what should we do?

In this world, convenience will always trump
quality. It's our job as librarians to make
quality convenient. Bruce Newell, Montana,
Talking with Talis Series
29
F is First Place Users Look
F
F-Shaped Pattern For Reading Web Content by Jakob
Nielsenhttp//www.useit.com/alertbox/reading_patt
ern.html
30
Old All Content Is Created Equal

• Librarians are content agnostics
• Reluctant to recommend or give priority to
  resources

31
New Some Content is More Equal

• Design for what your users are doing
• Emphasize the highest priority tasks so that
  users have a clear starting point

Photo by illustriousbeanCreative Commons
32
Prominence
F
33
Exercise

• What do our patrons want to do the most often on
  our web sites?

34
Discussion/Exercise

• How well do the next two sites do
• Making the most important user tasks prominent?
• Using trigger words

35
F
36
F
37
F
38
Old Design for 800x600
39
New Optimize for 1024x768

• Liquid layout as opposed to fixed width design
• What of other platforms (phones, handhelds,
  etc.)?
• Use CSS media types

Screen Resolution and Page Layout by Jakob
Nielsenhttp//www.useit.com/alertbox/screen_resol
ution.html OneStat screen resolution survey
http//www.onestat.com/html/aboutus_pressbox51_scr
een_resolutions_internet.html
40
Old Web Safe Colour Palette
41
Colour meColourful?

• The majority of users browse with 24-bit colour
  rendering
• Factors to consider
• File size
• Mobile devices

Photo by Mzelle Biscotte via flickr, Creative
Commons
We are not sure how important this is now, since
most computers today have the ability to display
millions of different colors- WC3 Schools
42
I Must Support All Browsers

• For basic contentYES!
• Accessibility is critical and the right thing to
  do
• For value added content, presentation style, and
  interactivity?

43
Recommended Approach

• Graded support aka progressive enhancement

Photo by David Zellaby Creative Commons
Yahoo! Graded Browser Support http//developer.yah
oo.com/yui/articles/gbs/index.html
44
Text Only Version?

• Do you need this?
• Separation of presentation and content
• XHTML CSS

45
OLD Avoid CSS for Layout

• CSS is growing up
• No longer enough bugs to justify not using it
• Be a ltTABLEgt hater

46
Old Flash is Evil

• Flash introductions are evil
• Flash can be used for effective animation and
  interactivity
• Example http//www.library.pitt.edu/etd_tutorials
  /etdtutorial.html

47
OLD Scrolling is Bad

• Users will scroll
• Use the very fashionable cut-off look to signal
  the page continues

Blasting the Myth of the Fold http//www.boxesanda
rrows.com/view/blasting-the-myth-of Utilizing the
Cutoff Look http//www.uie.com/brainsparks/2006/08
/02/utilizing-the-cut-off-look-to-encourage-users-
to-scroll/
48
(No Transcript)
49
New Fold Carefully

• Yes and No
• 76 of users scrolled and that a good portion of
  them scrolled all the way to the bottom, despite
  the height of the screen

Unfolding the Fold Clicktale Blog http//blog.cl
icktale.com/2006/12/23/unfolding-the-fold/
50
Images of People

• Increase trust
• Naturally draw attentionthis may not be a good
  thingdistraction?
• Real people, labeled, increase credibility
• the most

51
Old Rules That Apply

• Home link
• Clickable Logo
• Contact us link
• Placement of navigation

52
Mouseover Menus

• are still evil!raise usability considerations

• They are
• Slower
• Not scanable
• Often require ninja-like mouse skills

53
Top Ten Mistakes in Web Design

• PDF files for online reading
• Not changing the colour of visited links
• Non-scannable text
• Fixed font size
• Opening new browser windows and pop up windows
• See the rest of the top ten at

Top Ten Mistakes in Web Designhttp//www.useit.co
m/alertbox/9605.html
54
For Redesign Inspiration

• Check other library websites
• Check other web sites where users spend a lot of
  their time
• Remember Jakobs law
• Standards, conventions, and user expectations are
  established OUTSIDE of library land

55
Resources

• Usability.gov
• Pre-Publication Checklists - Gerry Gaffney,
  Infodesign.com
• http//www.infodesign.com.au/usabilityresources/ge
  neral/prepublicationchecklist.asp
• Research Based Usability Guidelines
• http//usability.gov/guidelines/
• Steve Krug Dont Make Me Think

56
Tips and Tools

• Cool Tools for Library Webmasters
• http//library2.usask.ca/fichter/cool_tools/
• Free Web Design Templates oswd.org

57
Questions / Comments

• Darlene Fichter
• http//library.usask.ca/fichter/

58
(No Transcript)