creating highly usable websites l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Creating Highly Usable Websites PowerPoint Presentation
Download Presentation
Creating Highly Usable Websites

Loading in 2 Seconds...

play fullscreen
1 / 49

Creating Highly Usable Websites - PowerPoint PPT Presentation


  • 84 Views
  • Uploaded on

Creating Highly Usable Websites. NOAA 7/14/04 Markus Stobbs National Center for Atmospheric Research. Overview. The Development Process User Testing Usability Guidelines. The Development Process. Start. Finish. Strategy. Information Architecture (IA). Design & User Testing.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Creating Highly Usable Websites' - ranger


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
creating highly usable websites

Creating Highly Usable Websites

NOAA

7/14/04

Markus Stobbs

National Center for Atmospheric Research

overview
Overview
  • The Development Process
  • User Testing
  • Usability Guidelines
the development process
The Development Process

Start

Finish

Strategy

Information Architecture (IA)

Design & User Testing

Software Architecture

Production

strategy
Strategy

Strategy

Information Architecture (IA)

  • Assemble core team
  • Meet with key stakeholders
    • Identify and prioritize goals of the site
    • Identify and prioritize audiences
    • Post-it method
  • Identify related sites the team likes
  • Write strategic plan
  • Present to key stakeholders

Design & User Testing

Software Architecture

Production

information architecture
Information Architecture

Strategy

Information Architecture (IA)

  • Brainstorm content ideas that accomplish site goals
  • Gather functional requirements
  • Top-level navigation categories
    • Post-it method
    • Card sorting
  • Inventory existing content (if redesign)
  • Create IA plan that accomplishes site goals
  • Present IA plan to designers
  • Create site map

Design & User Testing

Software Architecture

Production

design user testing
Design & User Testing

Strategy

Information Architecture (IA)

Design & User Testing

Software Architecture

Production

  • Write Creative Brief based on Strategy & IA Plan
  • Create Sketches/Wireframes
  • User Testing
  • Iterative Design & Testing
  • Design Comps
  • Select final design
  • Style guide
software architecture
Software Architecture

Strategy

Information Architecture (IA)

Design & User Testing

Software Architecture

Production

  • If site requires dynamic elements:
  • Build use cases for functional requirements
  • Write software architecture document
  • Create hosting plan
production
Production

Strategy

Information Architecture (IA)

  • Staffing plan
    • Development
    • Maintenance
  • Site development
  • Launch planning and promotion
  • Bug testing
  • Site launch

Design & User Testing

Software Architecture

Production

usability methods
Usability Methods
  • User Testing
  • Heuristic evaluation (expert reviews)
  • Field studies
  • Surveys, Interviews
  • Participatory Design
  • Focus groups
  • Card sorting
  • 5-second memory test
user testing
User Testing
  • One-on-one
  • Create tasks for user
  • Observe user behavior as they attempt tasks
  • Get user feedback through think aloud protocol
  • Facilitator mainly stays quiet
  • Method used to:
    • Identify elements that are confusing or don’t work in the design
    • Get insight on how to improve the design
when to test
When to Test
  • Test early
    • Don’t just do as validation at the end
    • Build user testing into your design process
    • Start with wireframes or paper prototyping
  • Test iteratively (test, modify design, re-test)
sample user test
Sample User Test
  • Facilitator
  • Paper Prototype operator
  • User
recruiting users
Recruiting Users
  • Recruit at least 5 users based on your audiences
  • Where to find participants
    • Students
    • Related organizations
    • Friends and family
    • Colleagues
    • Market research companies - $107 per user
  • Participant incentives
    • Gifts, gift certificates
    • Cash ($32 to $118/hour, average $64/hour)
tasks
Tasks
  • Determine test goals
    • What design questions do you want to answer?
  • Make tasks scenario-based
    • Avoid micro-steps
  • Make tasks realistic
  • Leave out words that act as clues or hints
    • Don’t use same wording as website
  • Start with easier tasks to build user confidence
planning the test
Planning the Test
  • Decide how you will record the test
    • Screen/audio recorder or video
  • Pick a test location
    • Onsite, user’s site, testing lab
  • Plan 60 minute sessions
  • Conduct a trial run beforehand
conducting the test
Conducting the Test
  • Greet user
  • Offer drink but not food (distracting)
  • Explain think aloud protocol and how test will work
  • Run test
  • Leave 10 minutes at end for open-ended feedback and follow-up questions
  • Reset computer before next user
facilitating
Facilitating
  • Treat participants ethically
    • Provide informed consent
      • What they’ll be asked to do, recording, how data will be used
    • Stop if they are upset
    • Retain anonymity of users
  • Don’t laugh or giggle
  • Try to put the user at ease
  • Tell user they are not being tested, it is the design that is being tested
usability guidelines
Usability Guidelines
  • A sampling of findings from usability research
  • Design conventions
1 increase the scent of information
1. Increase the Scent of Information
  • Words and images act as cues that people use to decide if something is interesting
  • Users are foraging for trigger words that are associated with their interests or task at hand
  • Information foraging theory created by Ed Chi and Peter Paroli of Zerox PARC
  • Expanded on and tested by Jared SpoolUser Interface Engineering (UIE)www.uie.com
  • See WIRED article for more background
how scent works
How Scent Works
  • Every link gives off scent
  • As scent gets stronger, the user feels more confident about exploring that direction
  • Weak scent can lead to users giving up and abandoning the site, or using search and getting lost
things that prevent scent
Things that Prevent Scent
  • Search engines
  • Navigation panels
  • Short links
  • Short pages
  • Missing context
  • Being general vs. specific
  • Pulldown menus
search engine keywords
Search Engine keywords
  • Check your logs for search engine keywords used
  • These are trigger words that the user was not able to find scent for on your home page
  • Incorporate high frequency search trigger words into your pages
navigation panels
Navigation Panels
  • Don’t limit yourself to one word links due to horizontal real estate restrictions
  • Amazon uses two line links where necessary
  • Use multiple trigger words when helpful(camera & photo; outlet & used & refurbished)
short links
Short Links
  • Short links don’t emit scent
  • The best links are 7-12 words including associated text
    • over 50% likelihood of successful match with users expectation
  • Use href title parameter to popup more info<a href=“filename” title=“describe link”>
short pages
Short Pages
  • Content-rich pages have more scent
  • More likelihood of user finding something of interest
  • Scroll stoppers
be context appropriate
Be Context Appropriate
  • Links are interpreted in the context of the current page
  • eg. Clicking “Sports Calendar” on a Denver Broncos page
make links specific
Make Links Specific
  • Links that are too generalized don’t have scent
  • Be specific so the user really knows what they’re going to get after clicking
  • Links need trigger words
pulldown menus
Pulldown menus
  • Block scent because the trigger words are hidden
  • Many users scan first and then go to the mouse once they have already decided what to click
signs of low scent
Signs of Low Scent
  • Frequent use of back button (pogosticking)
  • Use of Search engine
traditional design approach
Traditional Design Approach
  • Start with home page
  • Figure out major site sections
  • Design a home page that gets people to those sections

Home

desiging for scent
Desiging for Scent
  • Start with a content page
  • Figure out places in your site where users will likely want to get to that content page
  • Put links to the content page in all those places

Content

Page

2 provide a clear path to categories
2. Provide a Clear Path to Categories
  • UIE study of several home pages
  • From home page, users click
    • Categories 87% of the time
    • Search 7%
    • Home button 2.7%
    • Featured Content - 1.3%
3 dynamic centered layouts
3. Dynamic Centered Layouts

Fixed Left-aligned Layout

3 dynamic centered layouts43
3. Dynamic Centered Layouts
  • <body leftmargin=“0” topmargin=“0” marginwidth=“0” marginheight=“0”>
  • <table width=“100%” align=“center”>
4 fill the knowledge gap
4. Fill the Knowledge Gap

Gap

Current Knowledge

Target Knowledge

- What users need to know to accomplish their goal

two kinds of knowledge
Two Kinds of Knowledge
  • Tool Knowledge
    • What users know about your application
  • Domain Knowledge
    • What users know about the domain related to the tool (eg. Meteorology)
knowledge dimensions
Knowledge Dimensions

Expert

Computer-savvyScientists

Scientists

Domain Knowledge

Computer

Specialists

GeneralPublic

None

Expert

Tool Knowledge

5 help users with the needs solution process
5. Help Users with the Needs/Solution Process
  • UIE study of thousands of message posts in medical, tech support, and professional discussion lists
  • All boiled down to 3 motivations
    • Understanding needs
    • Solution refinement
    • Alleviating Fear
needs solution process
Needs/Solution Process
  • Provide content at every point in the needs/solution process

SolutionChosen

SolutionApplied

NeedsIdentified

Identify

Needs

IsolateAlternatives

Refine Solution

Alleviate Fear

Most sites concentrate solely on this

usability resources
Usability Resources
  • useit.comJacob Nielsen’s usability website
  • nngroup.comNielsen/Norman GroupUsability research reports, conferences
  • uie.comUser Interface Engineering - Jared SpoolUsability research reports, conferences
  • usableweb.comLinks to usability sites and articles
  • webmonkey.comHow-to’s, quick reference guides
  • webpagesthatsuck.comLearn good design by looking at bad design!
  • webbyawards.comLearn good design by looking at great designs