View
108
Download
3
Category
Tags:
Preview:
DESCRIPTION
Slides from a full-day workshop taught in 2012 on Kent State University's Stark State campus.
Citation preview
Usability Immersion Workshop
A crash course in UXD for the KSU IT Department
11-8-2012
For the Record…• I have been doing this kind of work for over 15 years
– Independent Consultant 2007-Present– Director, Usability Thomson West 2004-2007– VP IA, Wachovia 2001-2004– VP Operations, Argus Associates 1996-2001
• Experience spans innie, outie, practitioner, manager, startupmajor corporations
• MILS, University of Michigan 1996
• Active in IA Institute (founding member, board of directors, job board) & ASIST (IA Summit Chair, 2009)
Usability
Usability Engineering
User-interface Design Information Architecture
GUI Design
Information Design
Service Design
User Centered Design
Interaction Design
Information Ecology
Human Factors
User Centered Design
Usability
Usability Engineering
User-interface Design Information Architecture
GUI Design
Information Design
Service Design
Interaction Design
Information Ecology
Human Factors
User Experience Design
User Centered Design
User Centered Design
Usability
Usability Engineering
User-interface Design Information Architecture
GUI Design
Information Design
Service Design
Interaction Design
Information Ecology
Human Factors
User Experience DesignUser Centered Design
User Experience Design
UX
Focus for today:
• Overview of user experience design, which provides the framework for consistently creating usable interfaces
• Deep dive into understanding users• Primer on Information Architecture, an often
overlooked piece of the puzzle• Explanation of the role of usability engineering
in the broader UX process
Session Agenda
• Introductions• Interactive Lecture, brief exercises• Lunch• Cover anything we ran out of time for in the
AM• Select a topic & conduct a problem solving
session using the K-J Method
USER EXPERIENCE DESIGN, DEFINED
What is User-Centered Design?
• UCD is a web design (product/software development) approach that focuses on the end users of the web site (product) as a vital component of a successful outcome
• Principles of UCD– An early focus on users and tasks– Empirical measurement of product usage– Iterative Design
That sounds pretty simple…
What’s so hard about it?
Multi-disciplinary Partnerships
• Business goals/objectives—business stakeholders, marketing, brand experts
• Content development, editorial—subject matter experts
• Visual design—graphic designers, branding experts
• User Interface design—interaction designers, information architects, user experience designers
• Research & testing—usability engineers• Development & Implementation—coders,
developers, QA testing
Jesse James Garrett’s UX Diagram
UX Life Cycle
Morville’s IA Venn Diagram
context
content users
Morville’s IA Venn Diagram
context
content users
Iterative Design ProcessMy process:• Discovery• Definition• Design test, design, test,
design (RITE)• Handoff to developers• Conduct usability testing on
beta or• Launch/conduct usability
testing on launch• discovery
Kuniavsky (pp 30-42)1) Project kickoff2) Examination: define
problem3) Definition: Specify
solutions4) Creation5) Repeat loops 2-4 as many
times as needed6) Launch
Observing the User Experience: A Practitioner's Guide to User Research by Mike Kuniavsky
UCD Methods (the tools in the tool kit)• Stakeholder interviews• Expert/Heuristic evaluation• Competitive/comparative analysis• Web logs/web analytics• Content Inventory• User Profiles/Personas/Scenarios• Customer interviews• Surveys• Wants & Needs Analysis (Focus Groups)• Task Analysis• Card Sorting• Field Studies/Contextual Inquiry• Diary Studies• Ongoing relationships/beta testers• Cognitive walk-throughs• Usability testing
Morville’s IA Venn Diagram
content users
context
Context & Content OrientedUCD Methods
• Stakeholder interviews— understand upper management, opinion leaders, people who sign the checks
• Expert (Heuristic) evaluation— “rule of thumb”; done by one or more reviewers
• Competitive/comparative analysis: gauge the state of your competition/peers
• Web logs/web analytics— interpret the traffic on your site
• Content Inventory— detailed documentation of every page and url on your site/every screen in your software or app
• Baseline Usability Testing-– one on one, moderated, task-based evaluation of an interface
Mapping Methods: Context
content users
context
stakeholder interviews, competitive analysis, expert analysis, baseline usability testing
Mapping Methods: Content
users
context
content
Content Inventory, Editorial Review, Logs/analytics analysis, Gap analysis
Mapping Methods: Understanding Users
content users
context
contentusersusers
Users: user profiles, interviews, wants & needs analysis, task analysis, diary studies, field studies, (surveys, focus groups)
Ideal vs Real
• The challenge is to understand what our organization’s goals are *and* to understand who our users are and then to shape products to best fit that intersection– There are always tradeoffs
UNDERSTANDING USERS: BEGIN AT THE BEGINNING
Jesse James Garrett’s UX Diagram
A User’s Perspective
Mainframe Apps
Lotus NotesDatabases
SharedLAN drives
"Local"Intranet
Sites
EuropeIntranet
IntranetPortal
U.S.Intranet
PublicWeb Sites
PrintedResources
Personal Networks& Colleagues
TV
SpecialApps
“Referring to people as "users" is a custom of two professions: computer scientists and drug dealers.”
-Edward Tufte
How do we learn about users?
• Examine what we already know– Be open to the idea that what we think we know may
not be accurate– Develop user profiles (which can lead to personas &
scenarios)• Meet our customers face to face
– Interviews, focus groups, surveys • Observe and interact with our customers
– wants & needs analysis, card sorting, task analysis, diary studies, field studies, contextual analysis
• Run baseline usability tests with actual users
How do we learn about users?
• Examine what we already know– Be open to the idea that what we think we know may
not be accurate– Develop user profiles (which can lead to personas &
scenarios)• Meet our customers face to face
– Interviews, focus groups, surveys • Observe and interact with our customers
– wants & needs analysis, card sorting, task analysis, diary studies, field studies, contextual analysis
• Run baseline usability tests with actual users
In the context of user experience design & user interface design SURVEYS and FOCUS GROUPS are usually not the most effective or efficient techniques for learning what you need to know about your users.
Defining the Audience
• In an environment as large as Kent State / the population the IT dept serves, you will need to think about audiences/user profiles at a macro level and a micro level– Macro all the users you serve generally– Micro users for a specific
tool/application/interface in context
User Profile
• A detailed description of your users’ attributes• Characteristics may include:
– Job title– Experience (with your product, with the web)– Education– Key tasks– Age range & other demographic details– Their goals
Classification of Users
• Primary: Individuals who work regularly/directly with the product.
• Secondary: Use the product less often or with an intermediary
• Tertiary: Those affected by the system or purchasing decision makers
• [anti users]
Westlaw
• Primary: Associates, Law students, Librarians• Secondary: Judges, Partners/Sr Associates• Tertiary: Partners, Librarians
Users don’t operate in isolation
• The same individual likely wears many hats (e.g., banking professional, has own bank accounts, manages elderly parent’s accounts)
• The end user isn’t always the primary decision maker (librarians vs lawyers)—you may need to take into account managers, sys admins, purchasers
Treat Profiling Iteratively
• In the beginning, your user profile may be sparsely populated—and it may be incorrect!
• That’s part of what we’re learning when we do user research– Better to put a stake in the ground and refine than to leave
everything hazy– Cleveland Fed: thought their primary users were
economists; we discovered they were wrong
• In my experience one on one interviews are the fastest, cheapest, easiest* way to refine user profiles and develop personas
*fast, cheap & easy being relative!
If you design for everyone, you’re designing effectively for no one, which is to say you are effectively designing for no one.
If you only take one thing away from today’s session…
You are NOT like your users.
It bears repeating:
You are NOT like your users.
You CAN understand your users.
Let’s spend a few minutes talking about your users/audiences
Do we need a short break?
Pulse Check
UNDERSTANDING USERS: METHODS & TECHNIQUES
UX Life Cycle
Why do research?
• to generate buy-in– Internally– with customers
• to prove/disprove something– kill beloved ideas
• to learn
How the customer explained it: user
research
Caution
• People don’t always know what they will really like and what they would really use.
• People often anticipate liking/needing features more than they actually will. “That’s cool!”
• What people say they do and what they actually do often differ.
• Don’t rely on a surveys and/or focus groups as your sole source of user data for requirements gathering.
It isn’t easy, but it doesn’t have to be complicated
• Simple techniques can yield powerful results
I
• If you had to pick one research method, this would be the one.
• Cheapest, most flexible, low-cost way to gather *rich* qualitative information about your users
• The only down-side to interviewing, is that you’re dealing with a small sample-size – If you’ve got your audiences well defined and have
recruited effectively, this is a minor point considering how much information you can get out of a 45-60 minute interview
Interviews!
When?
• Technically, they can be done anytime in the UCD cyclehowever, most useful early on
• This is the point at which there is the most potential for shaping the project to meet the users’ needs
Interview vs. Survey
• Cleveland Fed discovery: we don’t know our users as well as we thought we did
• There can be a chicken-or-egg dynamic• Often one technique is used to provide
insights, feedback or confirmation to support the other technique
Interviews are good for…
• Collecting rich, detailed data• Collecting information that will help you be
more successful with other research tasks, like surveys, usability studies, field studies
• Getting a holistic viewalso, serendipitous learning
Interviews are not good for:
• Collecting large samples—too time consuming and expensive
• Collecting data on highly sensitive topics• If you want do to face-to-face in a variety of
geographic locations, interviewing becomes expensive—but phone interviews are an option
• While you can collect data more quickly from focus groups than from interviews, I still consider interviewing a pretty fast method for data collection—and interviews often yield richer results
Moderating Interviews
• Be an active listener.• Really listen. Do not interrupt. Do not finish
their thoughts for them. Do not put words into their mouths.
• Endure more silence than you feel completely comfortable with.
• Be engaged, pay attention. • Look for markers.• Use probes! But avoid introducing bias.
Unbiased Probes
• Tell me more about X. Say more about X.• Can you say more about that?• I think I understood you to say X, am I
following you?• How do you feel about that?• Do you have any reactions to that?
Personas
• A user profile made specific • A short-hand way to keep the team aligned
around the most important user considerations as defined by your team
• Scenarios: Situations that online customers face, usually constructed around the most critical customer needs.
• Scenarios are used to brainstorm “paths to resolution” of critical customer needs.
• Scenarios cannot work without personas.• Like personas, have to extrapolate to a few
core scenarios
Scenarios
Personas and scenarios assist in developing smarter potential designs which are then tested with real customers.
• Personas and scenarios are not representative of every customer or every experience
• They are representations of key customers who pose design challenges where business needs and user needs intersect.
• They encourage designers to be user-centric, reminding us to take our users into consideration in all aspects of our design work.
Personas and scenarios: What are they not?
A typical persona project• Created user profiles for large company’s corporate
“university”– Began with stakeholder interviews and working session
with the team to develop deep understanding of the project
– Identified user profiles for audiences based on job role, region/language, expertise
• Conducted 27 interviews with 3-5 representatives of each of the user profiles– These interviews were conducted over the course of 3
weeks– 2 people participated; moderator & note-taker, most calls
recorded
Persona project, con’d• Interview team debriefed regularly
– Began to draft a potential model at around interview 16– Felt pretty confident that we were on the right track by interview 22
• Analyzed notes and gathered 391 unique data points (Edistorm, Excel)– Refined and strengthened our model based on the data analysis
• Identified some additional persona variations that didn’t make it into the final set but that we wanted to share with the team for more breadth
• Proposed 6 general personas– Shared these with the team, “gut check”
• Developed and refined the personas– Focused primarily on a description/ “Understanding X” and “How We
Can Help”
• Had personas printed and made available in variety of formats—emphasized the importance of actually USING them
Typical Persona Project, Summarized
• Spent 8 weeks from start to finish• Two key players were devoted to the project,
one close to full time and the other part-time• Met with the larger team approximately 4
times over the course of the project for approx 8-10 hours total
• Developed a series of artifacts that were relied on throughout the design phase and continue to be used today
UCD Methods• Interviews (Surveys)• Wants & Needs Analysis: structured focus group to
gather/confirm user requirements• Task Analysis: observing users completing tasks• Card Sorting: open: users create categories, closed:
users put concepts in buckets • Field Studies/Contextual Inquiry: Setting for task
analysis, method for gathering data about users’ physical space, distractions, approach to tasks
• Diaries/ongoing relationships/beta testers: way to gather longitudinal data
Contextual Inquiry
Please be back in 10 minutes.
Interfaces should be intuitive.
True or False?
Google stats, 2009
• Intuitive design: 13,400,000• Intuitive interface design: 2,030,000• Intuitive web design: 2,530,000
Google stats, 2012
• Intuitive design: 7,190,000• Intuitive interface design: 16,000,000• Intuitive web design: 21,100,000
How to Peel a Banana
You Tube Video: • http://www.youtube.com/watch?v=Hq0URt9x
nCc&feature=fvst
What does *intuitive* really mean?
Read Me
• Jef Raskin– http://www.asktog.com/papers/raskinintuit.html
• Jared Spool– http://www.uie.com/articles/design_intuitive/
INFORMATION ARCHITECTURE
Jesse James Garrett’s UX Diagram
What is interaction design?
• There is less standard agreement about the definition of this term in part because some define it very broadly (on par with UX) and some much more narrowly (focusing more on GUI design).
• I think the right answer is somewhere in between, as I see IxD as more than the “page” but less than the field
What is IA?
• The art and science of structuring and organizing information systems to help people achieve their goals.
• Information architects organize content and design navigation systems to help people find and manage information.
Hard Truths
• Every site has an information architecture.• Few sites have a planned information
architecture.• Even fewer sites have an information
architecture that was informed by UCD research.
Why is IA often overlooked?
• Successful IA recedes into the background; you only notice it when it isn’t working
• There is often a tendency to want to skip over abstract work to get to the more tangible aspects of the project– In many cases organizations don’t realize they are
skipping something; IA is rarely a stand-alone role • As with user research, the early phases of this
work tend to be messy and uncomfortable
Why is IA Difficult?
Users
Documents and Applications
Communication Chasm
ExamplePersonal Digital Assistant
SynonymsHandheld Computer
"Alternate" SpellingsPersenal Digitel Asistent
Abbreviations / AcronymsPDA
Broader TermsWireless, Computers
Narrower TermsPalmPilot, PocketPC
Related TermsWindowsCE, Cell Phones
Why is IA important?
• Cost of finding (time, clicks, frustration, precision)
• Cost of NOT finding (success, recall, frustration, alternatives)
• Cost of development(time, budget, staff, frustration)
• Value of learning (related products, services, projects, people)
Components of an IA
• Organization systems• Labeling systems• Navigation systems
– Global– Persistent– Local– Contextual
• Supplementary Navigation & Search
Organization Systems
• Organization structures (e.g., the “shape” of the information): hierarchy, database, hypertext)
• Organization schemes: exact vs. ambiguous
Organization Schemes
• Exact Schemes – e.g.,white pages, author/title database– Everything has a place (one right answer)– Easy to create and maintain– Great for known-item searches
• Ambiguous Schemes – e.g., yellow pages, org by topic/task/audience– Messy and full of overlap– Hard to create and maintain– Great for subject searches and associative learning
Labeling Systems
• Navigation bar options• Headings, Subheads, sub-subheads• Contextual links• Controlled vocabularies and thesauri• [Icons]
Navigation Systems
• Elements:– Global (site-wide, access to primary
content)– Local (sub-site)– Contextual (page-level)– Persistent/universal (ancillary links from
every page, typically header/footer)– Supplementary (e.g., table of contents,
index, guide, search)
Navigation Systems
• Purpose/Goals–Provide context (Where am I?)–Provide flexibility (Where can I go?)–Make sense (Separate global and
local systems)–Avoid competing with content
Navigation Systems • Global, Local, Contextual, Persistent:
Wachovia.com
Supplementary Navigation SystemsTopical (site index): New York Times (nyt.com)
Supplementary Navigation: Search
Top-down vs. bottom-up IA• “Top-down” IA
• Birds eye view looking down on the forest.• Tie together disparate pockets of content for improved searching
and browsing.• Highly focused on users and information needs.
• “Bottom-up” IA • From the ground up, looking at individual trees and leaves on trees.• Improve searching and browsing within a single, high-volume
pocket of content.• Highly focused on content (content model, document types and
meta-information).
• Not mutually exclusive—most projects need both perspectives.
Navigation Stress Test• Keith Instone’s navigation stress test: http://
instone.org/navstress• The idea behind the navigation stress test is to ask some hard
questions about your web site navigation to see if it can "pass." – It is called a "stress test" because most pages will not pass.
The failures may be serious, or they may not matter at all, but at least by performing the test you will have discussed the navigation issues and made conscious design decisions.
• The questions are detailed ways to ask about the 3 basic concerns users often have upon arriving at a page:– Where am I?– What’s here?– Where can I go?
Process
• “Randomly” pick a low-level page (not a home page or sub-site menu page) from your site
• Print the page out without the URL listed in the header/footer• Pretend that you are entering this site for the first time at this
page and try to answer the stress test questions• Mark up the printed page with what you think the answers
are• Have other members of your team, and people who know
nothing about your site, do the stress test too. Then compare notes. Where did you agree? Where did no one agree?
Navigation Question Mark up on the paper:
What is this page about? Draw a rectangle around the TITLE of the page, or write it on the paper yourself
What site is this? Circle the site name, or write it on the paper yourself
What are the major sections of this site? Label with X
What major section is this page in? Draw a triangle around the X
What is “up” 1 level from this page? Label with U
How do I get to the Homepage of this site? Label with H
How do I get to the top of this section of the site?
Label with T
What does each group of links represent? Circle the major groups of links and label:-D: more detail, sub-page (children)-N: Nearby pages within the same section (siblings)-S: Pages on same site, but not as near -O: Off-site pages
How might you get to this page from the homepage?
Write the set of selections as:Choice 1> Choice 2>…
COMMON DELIVERABLES
Blueprint (Top Down)
Main Page WireframeLogo Banner Ad or
InternalPromotion
Cards Gift ShopInvitations
Home | Help | Login/SignoutSearch | Site Index
My CardshopGift Certificates Promotions
partner ad/offer space
Reasons to SendBirthday Subchannel | Subchannel |Subchannel Subchannel | Subchannel | more...
Channel Subchannel | Subchannel |Subchannel Subchannel | Subchannel | more...
Welcome, Tim! Dad's Day is June 18th.Send a card for free.
CardThumbnail
CardThumbnail
CardThumbnail
title: text textMore Father'sDay Cards
title: text textMore SummerCards
title: text textMore MusicCards
Calendar full calendar
date Holiday date editorial holiday date editorial holiday date editorial holiday date editorial holiday date editorial holidaydate Holiday date editorial holiday date editorial holiday date editorial holiday date editorial holiday date...
CollectionsMusicTVMoviesStationeryTeen LoungeAfrican AmericanSpanishlReligious
Search Assistant
Don't know where to start? I can help you SEARCH
PromoImage(Music)
New Cards | Most Popular | Highest Rated
Banner Ad orInternal
Promotion
SearchAssistant
Image
learn more | about us | investor relations | advertise with us | privacy policyjob opportunities | contact us | terms of service
Header navigation forsite-wide functions.
Tabs represent majorcategories of services
Primary cardclassification scheme.
Expand level twochannels as much as
possible.
Promote searchingusing the wizard on
home. Position tocatch users not
satisfied by channels.
Mockup
• Non-functional model (usually to scale) for demonstration purposes
• High fidelity: color, graphic design treatment applied
• Lo fidelity: black and white/wireframes
Prototype
• Generally it’s a functional representation of a would be product/website– Level of functionality can vary from one or two features to
all or nearly all– paper prototyping: reluctance due to informality vs.
inclusivity • Used to reduce riskway to discover and solve issues
in a cheaper medium before production• Spectrum—often thought of as “throw-away”, but
not always– Agile
USABILITY ENGINEERING
Gurus
http://www.sensible.com/http://www.useit.com/alertbox/
Usability Testing
• Design technique for improving products by measuring their usability—i.e., capacity to meet intended purpose
• Formative: diagnostic testing• Summative: validation testing• Qualitative: participant’s descriptions, your
observations of their actions• Quantitative: measured activity (speed,
accuracy, recall)
Usability Demo
• Steve Krug created a 24 minute video that demonstrates how he conducts usability sessions
• http://www.youtube.com/watch?v=QckIzHC99Xc&feature=player_embedded
Crosby’s Maturity GridAdapted to Usability
Ignorance “We don’t have any problems with Usability”
Uncertainty “We don’t know why we have problems with usability”
Awakening “Is it absolutely necessary to always have problems with usability?”
Enlightenment“Through management commitment and improvement
of human-centered processes we are identifying and resolving our problems”
Wisdom “Usability defect prevention is a routine part of our design process & operation”
Certainty “We know why we do not have problems with usability”
Samantha BaileyUser Experience Design Consulting136 E Main St. Suite 4Kent, OH 44240(330) 474-1138samantha@baileysorts.com
Recommended