User centered design workshop

User-Centered Design A r e l a t i v e l y b r i e f i n t r o d u c t i o n t o u s e r - c e n t e r e d d e s i g n .

We are particular about type My favorite font!

Stretched type is not fun A kitten dies every time this happens – but it’s still not ok

What’s wrong here? Sounds…awkward? Kerning matters!

No matter what: The previous guys code is crap.

JavaScript sucks…ex: Every script is executed in a single global namespace that is accessible in browsers with the window object.

Interactive designers are no different

Buttons vs links Good: Bad: Sample debate: http://www.ixda.org/node/15621

Should designers learn to code? 011110010110010101110011

It’s not crazy… it’s passion

Are you this enthusiastic about Interactive Design? I f s o , U s e r - C e n t e r e d D e s i g n wi l l h e l p y o u a c h i e v e h e b e s t r e s u l t s p o s s i b l e .

Hello, I’m Patrick A n d I h a v e a n o b s e s s i o n wi t h t h e we b

About me I teach at the Univ. of Missouri St. Louis About 15 years in the web industry Started in tech – shifted to design – and back again

Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com

Today's agenda 1. An overview of the User-Centered Design Process (90 min) 2. Deep dives into key topics (70 min)

PDF download at the end Got links?

I loathe bulleted presentations… Warning, impending hypocrisy

This is the tip of the iceberg Caution,

The User-Centered Design Process Part 1:

Backgrounds The background of UX professionals

Your backgrounds From the pre-conference survey: A previous group:

User-centered design (UCD) is a design philosophy that puts the user of a product, application, or experience, at the center of the design process.

The foundation The three basic principles behind UCD: 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design

users define concept designdevelop deploy UCD Process overview UCD is a state of mind & it is not a one man show Start here…

UCD Step 1: Defining the project users define concept designdevelop deploy

Define the scale • Replacement or brand new product • Update to an existing product

Documentation Many options to select from

Define basic requirements • What should it do (features, functionality, what it does etc)? Or what are we working on? • How will we measure our success? • Incremental changes in revenue (direct or indirect) • Customer leads or other activity • What are the environmental factors (physical & technical)? • Who is the user (demographics, skill level, frequency of use & physical)?

Generate documentation Site maps – defines the sites content and information architecture Information Architecture (IA) is an entire field of work Awesome resource: http://iainstitute.org/en/learn/ Source: http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/

Sitemap tools – text editor Sitemaps can be simple outlines and remind us that the purpose is more important than the tool.

Flowcharts Sometimes the flow is more important than a chart of all the pages. Source: http://www.codeproject.com/Articles/111949/Excerpt-from-Designing-the-iPhone-User-Experience

Generate documentation • Activity diagrams – Flowcharts showing how a process will work Source: http://www.edmullen.com/work/project/free-people-retail & http://ils.indiana.edu/faculty/smilojev/teaching/s515spring2012/2012springprojects/session11/

Generate documentation Content Inventories: A catalog of an entire websites content. 1.Title/logo 2.Input field labels 3.Remember me 4.Login button 5.Lost password link

Content inventories Learn more: Responsive Design Workflow by Stephen Hay

Site planning answers the question: What am I designing?

User research happens in concert with the fundamental project definition

Documenting users • Write personas – A rich description of typical users • http://uxmag.com/articles/personas-the-foundation-of-a-great-user-experience • Write use case scenarios – Written descriptions of how a product will be used describing common scenarios • http://www.gatherspace.com/static/use_case_example.html

Methods for researching users • Interviews (great for exploring ideas) (requirements) • Questionnaires / surveys (a great preliminary tool) (requirements) • Focus groups (basically group interviews) (requirements) • Direct observation (observe users completing a task) (flowchart) • Card sorts (to discover how users view the content) (sitemaps)

As a result we have: • A clear description of the project • A plan for what we are building • A detailed understanding of the user • Vision for how the product will be used • Best of all, tangible assets the team can share

Learn more If you would like to learn more about this phase: Learn to make: • Personas • Concept models • Site maps • Flowcharts • Wireframes • Design Briefs • Usability plans • Usability reports

UCD boils down to seeking meaningful design insights over random acts of design

In the Define phase we include the user by inquiring of them

Our product: A new tool to help holiday shoppers stay organized, find gift ideas & score the best deals

Steps: 1) Reflect 2) Ask questions 3) Answer questions 4) Reflect Time box 5 minutes per step organized, gift ideas & deals

My results: 1) The list repeats itself every year 2) Zero carry over year to year 3) Thoughtfulness over price tag

User research isn’t as hard as it might sound

UCD Step 2: Create concepts users define concept designdevelop deploy

Developing concepts includes • Interpret the documentation to develop possible solutions • Shift from listening to problem solving • Build wireframes and prototypes • User testing

Wireframes A schematic or blueprint that represents the structure of a website. Wireframes are nonfunctional, static image. Start with low-fidelity. Less detail and quick to produce. Move towards higher fidelity as you shape and improve it. Work from the documentation project requirements and research from step 1!

Prototypes Creating the illusion of functionality They don’t need to be complete and typically only simulate a small set of features in an interface Allows you to test out how an interface flows from screen to screen Can start as paper prototypes and move up to full functional high-fidelity prototypes

Iterations are the key Wireframe something Visual design Test with a prototype Discover something

Lean on your user insights and work magic Beautiful, unicorn magic

Video time Source: http://www.youtube.com/watch?v=9wQkLthhHKA Usability test with a paper prototype

Observations • You DO NOT need a finished app to test! • It takes practice • Focus on the user experience of the app and not technical or secondary issues – it is about the essence of the app • Paper prototype allows to accommodate the unexpected • You could quickly change it and test with a new subject • He isn’t trying to get her to do what he wants and prove his design is right – genuine interest in improving

More on usability testing in the second half.

In the Concept phase we include the user via Exploratory based usability tests

UCD Step 3: Design visual solutions users define design concept develop deploy

Design the interface using the blueprints Finally,

So much more than a suggestion Wireframes,

Sample wireframe http://newsignature.com/blog/2011/08/06/a-quick-introduction-to-wireframing/#.UnD57PnXRvB

Style Tiles A stepping stone towards the full design: Minimize the radical leap from idea to visual design:

A design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. Style tiles:

Establish the visual voice before committing to a full blown design Style tiles:

An iterative tool for visual design Style tiles:

UI Design tools http://www.adobe.com/products/photoshop.html http://html.adobe.com/edge/reflow/

UI Design tools http://macaw.co/ http://www.bohemiancoding.com/sketch/

UI Design tools Question: What is your primary tool for designing websites (the actual look and feel of the interface)? Out of 274 respondents 22% 53% 18%

In the Design phase we include the user via assessment based usability test

UCD Step 4: Development users define develop design concept deploy

Documentation can really pay off This is when all that

Toss it over the fence and forget about it You do not get to

In the Develop phase we include the user via Validation based usability test

UCD Step 5: Deploy into the wild users define deploy designdevelop concept

In the Deploy phase we include the user by measuring the use of the product

The foundation 1.Early focus on users and their tasks 2.Evaluation and measurement of product usage 3.Iterated design

Google Analytics Who What When From Events Goals Conversions And much more http://www.google.com/analytics/

Crazy Egg http://www.crazyegg.com/

Inspectlet http://www.inspectlet.com/

The definition of the next project Ideas and insights from here become

User Centered Design users define designdevelop deploy concept UX Designers & Information Architects UI Designers Front end dev’s & programmers SEO and web optimization folks Interaction Designers (IxD)

x x Did you notice something missing?

Sources Books referenced in this presentation & others I recommend:

Take 10 minutes… Break time Come back for some free books

Thank you for completing the survey!

users UCD Recap Because it is a lot to absorb:

Part 2 Outline What we will cover: 1.Interviews & Surveys 2.Wireframes & prototypes 3.Usability testing

Interviewing users A b r i e f g u i d e

Interviews will humanize your apps problems

Interviews almost always lead to ideas, solutions and features that you had not thought of.

1) Interviewing is not selling – don’t defend your app – ask more questions

“Why is that feature important to you?” “Describe what you wanted to happen”

2) Get actual users – not just your office neighbor

3) Don’t ask hypothetical questions

5) Shut up – it’s not a conversation

After a round of interviews, use a survey to validate the results

Survey tips Simple tips for a good survey: • Know what you want to learn • Write questions that everyone: • will interpret the same way (ex: avoid “do you frequently do x”) • can answer accurately • Avoid leading questions: • Do you agree with most people that Windows 8 is terrible? • Do not make people predict their own behavior • Have follow up questions!!!

Wireframes & Prototypes A b r i e f g u i d e

Finding problems early 1x cost to change during requirements / design 5x cost to change during development 25x cost to change during formal testing 100x cost to change in production You can’t afford not to do it. Researchers at Hewlett-Packard, IBM, Hughes Aircraft, TRW, and other organizations have found that purging an error by the beginning of construction allows rework to be done 10 to 100 times less expensively than when it’s done in the last part of the process, during system test or after release. (Fagan 1976; Humphrey, Snyder, and Willis 1991; Leffingwell 1997; Willis et al. 1998; Grady 1999; Shull et al. 2002; Boehm and Turner 2004).

Elements of Wireframes Wireframes address three core elements 1) Information design – the placement and prioritization of the layout. Very inline with graphic design. 2) Navigation design – the location and structure of the navigation systems. 3) Interface design – expose the features that the app offers. What does it do? How does the structure expose this to users?

Wireframing tools http://inspirationhut.net/printable-paper/

Wireframing tools http://www.interfacesketch.com/

Wireframing tools http://www.uistencils.com/

Wireframing tools Many people also frequently use the following to wireframe: InDesign, PowerPoint, Keynote, Visio & HTML

Wireframing: move fast • Sketch 6 to 8 thumbnail sketches in 5 minutes • Asses the results • Take a break • Rinse and repeat • Identify a solid solution – flush out variants on that idea • Move up to larger sketches • Rapidly iterate on variations of your favorite thumbnail • Slowly move towards a more refined result (lookup Prototyping by Todd Zaki Warfel)

Wireframes should be iterative

Tools for prototyping Many people also frequently use the following to prototype: InDesign, PowerPoint, Keynote, Visio & HTML

Demo PDF prototype Demo Axure prototype

Specialized tools https://fluidui.com/ (Is it a wireframe or a prototype? )

Not every prototype is made for the same purpose

Type 1: To unify groups of people (often diverse people)

Type 3: Get buy in to the idea of UX design practices

Type 5: Is it technically possible?

Prototype formats • Digital prototypes • Paper Prototypes • Storyboards • Video based

Our product: A mobile weather application… with a twist

Why do you check the weather? • What to wear? • Type of hat to wear • Type of shoes to wear • Type of jacket/coat • Bring an umbrella? • Drive the convertible? • Bike or bus? • Surfing related • Ski related • Biking related • Phases of the moon • Tide related • Hunting related •Tornado watching • Snow days • Global warming related • Spelunking • Water the garden? • Good day for the beach? • Leave early for work? • Monitor weather on a target date: like a vacation etc •Historical weather patterns for a day in relation to planning an event like a wedding • BBQ weather? • Planning to view changing leaves or any other seasonal event

What does this do? Test on at least 3 users in each round. 5 second test:

Steps: 1) Think & sketch 2) Test your design 3) Sketch some more 4) Test your design Mobile weather app

Testing designs can be easy. & Wireframes can be packed with meaning.

Usability testing A n e x t r e m e l y b r i e f i n t r o d u c t i o n .

What is usability? • In essence, how easy it is to use an interface • Good usability = easy to use = positive user experience • Poor usability = hard to use = negative user experience • Attributes that describe the usability of a design: • Usefulness • Efficiency • Effectiveness • Learnability • Satisfaction • Accessibility

What we are looking for: • Usefulness – Does it do what users need and want? • Efficiency – Does it perform its tasks efficiently? • Effectiveness – Does it perform its tasks the way it is intended to? • Learnability – Is it easy to learn use the interface? • Satisfaction – Does the user enjoy using it? • Accessibility – Is the product usable by those with disabilities?

We can craft the usability as a way to influence the user experience

Accessibility: What’s good for a few, is often good for everyone.

Usability testing is our attempt to answer these questions – is it usable?

Nano Tests T h e 5 m i n u t e g e t s t a r t e d g u i d e t o u s a b i l i t y t e s t i n g .

Nano-usability tests as described in Observing the User Experience What we are going to do:

Bite sized guerilla usability testing designed to get you started in 5 minutes. Nano-usability testing

Nano-usability testing Our simple process: 1. Find one person who cares about your product. It doesn’t matter who. Seriously, anyone. 2. Arrange to watch them use the product. (in person) 3. Ask them to use the product to do something. Any function of the application. (I suggest you focus on the core feature) 4. Watch them do it. Keep your mouth shut. Just watch. 5. Ask yourself: what did I learn?

Keep your mouth shut. Did I mention,

You want to learn what is wrong. You are not trying to defend your creation. Remember,

Five users will find 80% of the problems (typically)

Many small tests, not one big test. Goal:

There is much more to usability testing. But this is a totally legit way to start. Naturally,

Beyond digital interfaces T h i s m o d e l wo r k s i n m a n y s c e n a r i o s

Wrapping up We a r e a l m o s t d o n e !

Get a PDF of this presentation: pmcneil.com Get in touch: mcneilp@gmail.com or @designmeltdown or pmcneil.com

1) Mini Brochure Site The good old content driven brochure style website. Assuming responsive web design is required. Involving users on this type of project feels hard at first. Investigate the user •Interview users •Use analytics Content Inventory Sitemap Wireframes Style Tile UI Design 5 Second tests Development Measure the results

2) New iPhone app Interview users Survey users Flowchart Wireframes Prototype Usability testing Style Tile UI Design Usability testing Development Usability testing

User centered design workshop

More Related Content

What's hot

Similar to User centered design workshop

More from Patrick McNeil

Recently uploaded

User centered design workshop

Editor's Notes