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

Email

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