Download User Focused Design

Skolen på internettet, Nyborg
User Focused Design
April 24, 2003
Darlene Fichter
University of Saskatchewan
Overview



What is user-centered design?
Elements of user experience
User centered-design methodology



Stages of development
Techniques for involving the user
Usability testing
User-centered design

User-centered design is defined as
“the practice of creating engaging,
efficient user experiences.”
Jesse James Garrett, The Elements of User
Experience: User-Centered Design for the
Web, 2003.
User experience

Jesse Garret points out that the user experiences
the "totality of the web site" - not one piece
separate from another. We rise and fall together.”
Visible
Interface
Content,
Architecture and
Tools
Invisible
Web site layers
Web site visitor – (knowledge) exchange
Surface – visual design
Skeleton – Information architecture,
navigation, user experience
Scope – functional requirements, content
Business strategy – user needs, objectives
Layers
Web site visitor – (knowledge) exchange
Surface – visual design
Skeleton – Information architecture,
navigation, user experience
Scope – functional requirements, content
Business strategy – user needs, objectives
From layers to usability



Layers are useful to show the
various stages in planning
But it’s not enough to do all the
steps; we have to focus on users
and usability
Usability – relatively new field that
has techniques and tests for
determining what works and what
doesn’t
Where does usability start?

It’s all about the visitor.
What is usability?

Ease of use

Ease of learning

Fitness for purpose
An effective
product
Design for the visitor







Be
Be
Be
Be
Be
Be
Be
intuitive
familiar
consistent
appropriate
functional
polite
supportive
School web site


What is the purpose of the site?
What are your goals and objectives?
What are some goals?
Visitors to school web sites

Who are your visitors?


Segment your audience to help plan
content and consider needs
Which groups are the most
important? Why?
Example
Determining visitor needs

Talk to your users





Students, parents, teachers, community
Focus groups
User surveys
Formal needs assessment
Already have a web site?




Usage reports
Questions
Web log analysis
Search log analysis
Understanding visitor needs


Know their mental model
Methods




Peer analysis
Content clustering
Category prediction
Cognitive
walkthrough
User scenarios


One of the simplest & best techniques is
user scenarios
Invent “typical users”; give them a name,
characteristics, and a backdrop
Site visit plan

As each “visitor” comes to the site,
you describe in ideal terms what
would happen.


What words are they looking for on the
screen?
What do they want to happen next?
Accessible design




Visual
Physical/motor skills
Hearing
Learning disabilities
Accessibility guidelines


Use clear, direct language
Provide alternative content (audio/visual)



Don’t rely on any one mode exclusively
Use style sheets for form, not HTML
Allow user control of supplemental
technologies


Plug-ins and java applets
Ability to stop moving text, blinking, autoupdating
Content – inventory
Audience
needs?
Site goals?
Page for each classroom
Page for each teacher
Contact information
School floor plan


List everything you’d
like to have on your
site
Tip: Use a
spreadsheet
Calendar of events
Student art work
Organize your content
Typical site organization problems:



Information overload
Jargon
Mental models



Insider – organizational chart
Metaphors
“Shopping cart” for buying on
line
Usability research
Users find information easier if
 Menus or lists are in columns not rows
 Arranged categorical, not alphabetical
 Set the priority order


Most used to least used
If there is both a top menu and left hand
side menu, only the left side will be used
Creating categories & structures
that work for users

Card sorting


List all of the content on the web site on
index cards
Ask people to group them and assign
labels
Typical organizational
structures

Library Site

By topic




Hybrid


Art
Biology
History






Teachers
Students
By task
Find a book
Find a article
Art Links
Biology
History
Especially for

By audience





Teachers
Students
Contact Us
Alphabetic



Books
Magazines
Maps
Examples

What is the organization structure?






Topic
Audience
Task
Alphabetical
Hybrid
Are there obvious chunks of
“content”?
Goal of navigation

Reduce the cognitive effort on the part of
the user by following a pattern the user
easily understands
Navigation Tips:
 Putting navigation (menus) in a place
where the user looks
 Cluster related items
 Use the words on the labels that your
users know and recognize
Use preference testing for
difficult labels


Preference testing is also
called “cookie” testing
Focus in on troubling labels




Request book from another
library
Interlibrary Loan
Request forms
Books from other libraries
Home > Find Books > Search by Author
Establish a sense of place




Consistent logos
and banners
Consistent
terminology
Color coding
Bread crumb
navigation
Home > Grades > Grade 8 > Science
Visual design

The visual design should enhance
and improve the success rate, not
detract
Test ideas early

Create mockups of just the main
page

test them
Mockup
How do you know it works?

Task testing with users
Task based testing

Test participants:



Carry out specific tasks
Talk out loud as they use the site
Observers

Record the participants path, time on task,
comments
Observe



Time on task
Number of errors
Difficulty in
Navigation
Understanding

site structure
User satisfaction
Good web sites “evolve”
from bad sites

Continuous improvement



Not a print publication
Dynamic
Keep improving it
Evolution not revolution!
User focused design by stage

Goals and purpose
Audience
Content & organization
Navigation & interactivity
Page content (writing for the web)
Visual design prototypes

Live site feedback & evaluation





Final thoughts


Redesign should be an on-going
process
Must be based on user feedback



Supplement this with observations from
multiple sources
Never rely on a single perspective for
making adjustments
Be especially wary of using your own
perspective as a filter for the user’s
needs
Best web site

www.usability.gov




What font should I use?
Can I scroll?
What about mouseovers?
What about pop down menus?
Recommended books

Site organization
Information
Architecture for the
World Wide Web, 1st
Edition”
More books

Usability & User Experience
Finding out more

Check out my Online columns
on web design usability:
www.findarticles.com

More presentations on web
design:
library.usask.ca/~fichter
Thank you
Questions?
Darlene Fichter
library.usask.ca/~fichter/