Jay Baker
Why don’t academic
library websites look
like this…
Search for books, articles and more…
search
Menu
This is a radical concept
and sometimes they do
What are students
primarily doing when
they visit?
We should be asking
them
From xkcd.com/773
Who are you building for?
Search for books, articles and more…
search
Menu
That first page that
results from using a
discovery tool is
probably overwhelming
What we have now is fine
and
a great step in the right
direction
but
that’s a lot to process
Especially for a first year
college student who’s only
had the experience of
Googling when they
needed to find out about
something.
“Ahh … what am I supposed to do?”
What if we did this instead?
You searched for
Do you want …
books
textbooks
academic journal articles
magazine articles
newspaper articles
something else
or
not sure what I need
search
Menu
• Title, author and year
• Summary
• Title, author and year
• Summary
• Title, author and year
• summary
• Title, author and year
• summary
You searched for
Here’s your books …
search
Menu
Or …
• Title, author and date
• Summary
• Title, author and date
• Summary
• Title, author and date
• summary
• Title, author and date
• summary
You searched for
Here’s your scholarly journal articles …
search
Menu
Discoverability and Understanding
“Two of the most important characteristics of good design
are:
Discoverability:
Is it possible to even figure out what actions are possible and
where and how to perform them?
Understanding:
What does it all mean? How is the product supposed to be used?
What do all the different controls and settings mean?”
This is from a brilliant book about the design of everyday
things.
When designing anything…
Don’t make me
think!
That’s a good book, too.
He’s a funny guy. He calls it:
advanced common sense
The goal should be for each page or
screen to be self-evident, so that just
by looking at it the average user will
know:
•what it is
•how to use it.
This should sound familiar …
Because that is the same idea from
designing everyday things, not just
websites or databases.
•Discoverability (what it is)
•Understanding (how to use it)
Evaluating a website using
heuristics
What are Heuristics?
From Abby Covert <slideshare.net/AbbyCovert/information-architecture-heuristics>
User Experience Honeycomb
From Peter Morville, author of Information Architecture: For the Web and Beyond and Ambient
Findability
From Abby Covert <slideshare.net/AbbyCovert/information-architecture-heuristics>
Don’t make me think!!!
User studies
What do they need?
(user surveys … ask a lot of students a few
questions)
Libraries are competing with a LOT of other
sources of information.
Are we giving them what they need?
Not what we think they need.
User studies
How do they use it?
(usability studies … watch a few students use the site)
Watch them use the library website to complete common
tasks.
Observe what they do, where they succeed, and where they
have difficulties
Are our offerings useful, usable, desirable, accessible and
valuable?
User studies vs heuristics
1. Heuristic review is not a replacement for user research.
2. Remember your users at all times.
3. They’re rules of thumb to get you started. User studies
will test if they work.
Design Goals:
Be useful with our offerings. Provide value.
Provide what students need. Useful information.
Create something that’s usable for them.
Our offerings should be understandable, navigable and accessible
Be efficient.
Optimize our current tools without having to build new ones.
Or … demand more and better service from our vendors.
Or … find tools that are already built that we can customize.
Pick and use tools that are easily manageable.
Use our human resources to build new tools only when necessary.
Design Goals:
• Utility = whether it provides the features you need.
• Usability = how easy & pleasant these features are to use.
• Useful = usability + utility.
From Usability 101: Introduction to Usability by Jakob Nielsen
https://www.nngroup.com/articles/usability-101-introduction-to-usability/
My design philosophy:
EFFICIENCY & USEFUL
Building new tools can be fun but should be a last resort. I want
to be able go to Home Depot to buy a hammer not have to build a
whole new hammer. Use the tools available.
Use content management systems like WordPress and
Springshare.
Use Javascript frameworks like Bootstrap.
Lots of people are smarter than me.
Look to them for help, ideas and guidance. Find examples that
work.
MAKE SMALL IMPROVEMENTS TO GREAT IDEAS.
Let’s get more specific about web
design
Eyetracking studies show an F shaped
pattern
Jakob Nielsen’s Usability Heuristics
Use natural words
Our offerings should speak the users’ language rather than
system-oriented terms.
For example, textbooks rather than course reserves
Simplify
Every extra unit of
information in a dialogue
competes with the relevant
units of information and
diminishes their relative
visibility.
From 10 Usability Heuristics for User Interface Design by Jakob Nielsen
Ohhh, there’s a
butterfly!
User control, freedom and
Help!!!
Make it possible for the user to escape
easily if a wrong choice is made
Help should always be available … on
every screen
Consistency
Users shouldn’t have to wonder
whether different words, situations or
actions mean the same thing.
For example, does “menu” mean
choices in the library or the college web
site?
Recognition rather than
recall
Minimize memory load by making
options visible, if possible.
Don’t hide possibilities that were
shown earlier.
These ideas make up Nielsen’s usability
heuristics for user interface design.
Let’s try it.
Wait …
We haven’t talked about accessibility,
yet.
Accessibility
• Follow the Web Content Accessibility Guidelines (WCAG)
2.0
• If there are problems, fix the problems that break the
high-priority rules first (Level A & Level AA)
• Follow CMS guidelines when creating pages. ARIA
• Test the pages with an accessibility evaluation tool, like
WAVE
• Look for help and attempt to stay up to date. This
changes with the changes in technology.
• California Government Code 11135 & section508.gov
• Updates were made in January 2017 to the Information
and Communication Technology (ICT) Standards and
OK…
now let’s evaluate a library website using
usability heuristics

Library Website Evaluation

  • 1.
  • 2.
    Why don’t academic librarywebsites look like this…
  • 3.
    Search for books,articles and more… search Menu
  • 4.
    This is aradical concept and sometimes they do What are students primarily doing when they visit?
  • 5.
    We should beasking them
  • 6.
  • 7.
    Who are youbuilding for?
  • 8.
    Search for books,articles and more… search Menu
  • 10.
    That first pagethat results from using a discovery tool is probably overwhelming
  • 11.
    What we havenow is fine and a great step in the right direction but that’s a lot to process
  • 12.
    Especially for afirst year college student who’s only had the experience of Googling when they needed to find out about something.
  • 13.
    “Ahh … whatam I supposed to do?”
  • 14.
    What if wedid this instead?
  • 15.
    You searched for Doyou want … books textbooks academic journal articles magazine articles newspaper articles something else or not sure what I need search Menu
  • 16.
    • Title, authorand year • Summary • Title, author and year • Summary • Title, author and year • summary • Title, author and year • summary You searched for Here’s your books … search Menu
  • 17.
  • 18.
    • Title, authorand date • Summary • Title, author and date • Summary • Title, author and date • summary • Title, author and date • summary You searched for Here’s your scholarly journal articles … search Menu
  • 19.
    Discoverability and Understanding “Twoof the most important characteristics of good design are: Discoverability: Is it possible to even figure out what actions are possible and where and how to perform them? Understanding: What does it all mean? How is the product supposed to be used? What do all the different controls and settings mean?”
  • 20.
    This is froma brilliant book about the design of everyday things.
  • 21.
  • 22.
    That’s a goodbook, too.
  • 23.
    He’s a funnyguy. He calls it: advanced common sense
  • 24.
    The goal shouldbe for each page or screen to be self-evident, so that just by looking at it the average user will know: •what it is •how to use it.
  • 25.
    This should soundfamiliar … Because that is the same idea from designing everyday things, not just websites or databases. •Discoverability (what it is) •Understanding (how to use it)
  • 26.
    Evaluating a websiteusing heuristics
  • 27.
    What are Heuristics? FromAbby Covert <slideshare.net/AbbyCovert/information-architecture-heuristics>
  • 28.
    User Experience Honeycomb FromPeter Morville, author of Information Architecture: For the Web and Beyond and Ambient Findability
  • 29.
    From Abby Covert<slideshare.net/AbbyCovert/information-architecture-heuristics>
  • 30.
  • 31.
    User studies What dothey need? (user surveys … ask a lot of students a few questions) Libraries are competing with a LOT of other sources of information. Are we giving them what they need? Not what we think they need.
  • 32.
    User studies How dothey use it? (usability studies … watch a few students use the site) Watch them use the library website to complete common tasks. Observe what they do, where they succeed, and where they have difficulties Are our offerings useful, usable, desirable, accessible and valuable?
  • 33.
    User studies vsheuristics 1. Heuristic review is not a replacement for user research. 2. Remember your users at all times. 3. They’re rules of thumb to get you started. User studies will test if they work.
  • 34.
    Design Goals: Be usefulwith our offerings. Provide value. Provide what students need. Useful information. Create something that’s usable for them. Our offerings should be understandable, navigable and accessible Be efficient. Optimize our current tools without having to build new ones. Or … demand more and better service from our vendors. Or … find tools that are already built that we can customize. Pick and use tools that are easily manageable. Use our human resources to build new tools only when necessary.
  • 35.
    Design Goals: • Utility= whether it provides the features you need. • Usability = how easy & pleasant these features are to use. • Useful = usability + utility. From Usability 101: Introduction to Usability by Jakob Nielsen https://www.nngroup.com/articles/usability-101-introduction-to-usability/
  • 36.
    My design philosophy: EFFICIENCY& USEFUL Building new tools can be fun but should be a last resort. I want to be able go to Home Depot to buy a hammer not have to build a whole new hammer. Use the tools available. Use content management systems like WordPress and Springshare. Use Javascript frameworks like Bootstrap. Lots of people are smarter than me. Look to them for help, ideas and guidance. Find examples that work. MAKE SMALL IMPROVEMENTS TO GREAT IDEAS.
  • 37.
    Let’s get morespecific about web design
  • 38.
    Eyetracking studies showan F shaped pattern
  • 39.
  • 40.
    Use natural words Ourofferings should speak the users’ language rather than system-oriented terms. For example, textbooks rather than course reserves
  • 41.
    Simplify Every extra unitof information in a dialogue competes with the relevant units of information and diminishes their relative visibility. From 10 Usability Heuristics for User Interface Design by Jakob Nielsen
  • 42.
  • 43.
    User control, freedomand Help!!! Make it possible for the user to escape easily if a wrong choice is made Help should always be available … on every screen
  • 44.
    Consistency Users shouldn’t haveto wonder whether different words, situations or actions mean the same thing. For example, does “menu” mean choices in the library or the college web site?
  • 45.
    Recognition rather than recall Minimizememory load by making options visible, if possible. Don’t hide possibilities that were shown earlier.
  • 46.
    These ideas makeup Nielsen’s usability heuristics for user interface design. Let’s try it.
  • 47.
    Wait … We haven’ttalked about accessibility, yet.
  • 48.
    Accessibility • Follow theWeb Content Accessibility Guidelines (WCAG) 2.0 • If there are problems, fix the problems that break the high-priority rules first (Level A & Level AA) • Follow CMS guidelines when creating pages. ARIA • Test the pages with an accessibility evaluation tool, like WAVE • Look for help and attempt to stay up to date. This changes with the changes in technology. • California Government Code 11135 & section508.gov • Updates were made in January 2017 to the Information and Communication Technology (ICT) Standards and
  • 49.
    OK… now let’s evaluatea library website using usability heuristics