An Introduction to UX Design & Testing

An Introduction to User Experience Design & User Testing AJ Kandy • Marks & Pixels marksandpixels.com

On today’s agenda....

On today’s agenda.... What is User Experience Design?

On today’s agenda.... What is User Experience Design? Why should we care?

On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes?

On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes? How can we measure its effectiveness?

On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes? How can we measure its effectiveness? Who needs to be involved?

What is user experience design?

What is user experience design? Usually, some or all of the following

What is user experience design? Usually, some or all of the following Information design

What is user experience design? Usually, some or all of the following Information design Information architecture

What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design

What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design Visual Design

What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design Visual Design Human Factors / Cognition

What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design Visual Design Human Factors / Cognition Usability / Accessibility

What is user experience design? The User Experience Honeycomb, Peter Morville, 2004

adapted from “The Elements of User Experience,” Jesse James Garrett, 2000

Web as Task-Oriented Software Interface Graphic Treatment of interface elements (the “look” in “look-and-feel”) Design of UI elements to facilitate user interaction with functionality Information presentation to facilitate understanding Feature set: detailed description of functionality to meet user needs Externally derived goals identiﬁed through user research, ethnography, psychographics, etc. Business, creative or other internally derived goals for the site adapted from “The Elements of User Experience,” Jesse James Garrett, 2000

Web as Task-Oriented Web as Information- Software Interface Oriented Content Destination Graphic Treatment of Visual treatment of text, graphic interface elements page elements and navigational (the “look” in “look-and-feel”) components Design of UI elements to facilitate Design of UI elements to facilitate user interaction with functionality user’s movement through the IA Information presentation to Information presentation to facilitate understanding facilitate understanding Feature set: detailed description Content elements required in of functionality to meet user needs the site to meet user needs Externally derived goals identiﬁed Externally derived goals identiﬁed through user research, ethnography, through user research, ethnography, psychographics, etc. psychographics, etc. Business, creative or other Business, creative or other internally derived goals for the site internally derived goals for the site adapted from “The Elements of User Experience,” Jesse James Garrett, 2000

All creative endeavours follow... adapted from “Understanding Comics,” Scott McCloud, 1994

adapted from “Understanding Comics,” Scott McCloud, 1994

On the web, this translates to:

The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA

The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA Market & user esearch User r Experience Team ent opm s de vel eam A t & Q

adapted from “Understanding Comics,” Scott McCloud, 1994

You can’t start from the surface

You can’t start from the surface There’s something cool on the Web! We’ve gotta have that!

You can’t start from the surface There’s something cool on the Web! We’ve gotta Start your photocopier Paste and then have that!

You can’t start from the surface There’s something cool on the Web! curs Start your photocopier Paste and then C oc We’ve gotta MAGI have that! here

The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA Market & user esearch User r Experience Team ent opm s de vel eam A t & Q

What, and who, is your product for?

What, and who, is your product for? Business or user needs

What, and who, is your product for? Business Research, abstract, big-picture goals or user needs

What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.”

What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors”

What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks”

What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks” External: “Play a fun online game”

What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks” External: “Play a fun online game” No decisions are being made about form or design yet

What, and who, is your product for? Business or user needs

How do you address those needs? Business or user needs

How do you address those needs? Business Specs or user needs

How do you address those needs? Business Specs Decisions about form or user needs

How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software

How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool

How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles

How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles ...A stock market contest

How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles ...A stock market contest Still no design decisions here

How do you address those needs? Business Specs or user needs

Function and content organization Business Specs or user needs

Function and content organization Business Specs Information Architecture Structure & taxonomy or user needs SURVIVOR U - SITEMAP 1.2 Login / Registration on Survivor U is for this section only (for now), no integration with the main ASP.NET single-sign-on login Wall Street Survivor nav scheme (links to appropriate WSS pages) - Dashboard, Trade, Research, News, Survivor U, Community, Video, Store, Support Survivor U landing page Aggregate feed with all new posted ofﬁcial content Financial Feature Columnists Expert Newsletter Learn Survivor U Survivor U FAQs Glossary Register News articles Picks Home Trading Video Video Home Home / Forgot home Channels Tutorials Login Home Home Individual Individual Beginner, Newsroom, FAQ Topic Alphabet news news news Intermediate news INO TV and news news news news Columns news Experts news news Groups news Lettergroup articles articles articles and Advanced articles ClipSyndicate articles articles articles pages (skip articles articles articles sections channel pages articles articles letters with no content) news news Feature news individual news Individual Blogs news Individual news Individual news news Individual news Individual news Individual Individual news news news news news news Newsletters news news news news news articles articles articles articles column articles Expert articles articles Lessons articles video posts articles Tutorials articles Q + As Glossary articles articles articles articles articles articles articles articles articles articles articles articles articles Articles with Tran- Terms scripts comments feed comments feed comments feed comments feed comments feed comments feed per post per post per post per post per post per post Ideally, on-page What’s news news Ajax popups with This? info articles articles explanatory notes items for things like RSS feeds, etc.

Card-Sorting Exercises

How people will actually use your site / software Business Specs Information or user Architecture needs

How people will actually use your site / software Information Architecture

How people will actually use your site / software Information Architecture Interaction Design Thinking about user ﬂows High-level process ﬂow

How people will actually use your site / software Information Architecture Interaction Design Thinking about user ﬂows Detailed process ﬂowchart

Wireframe Sketches

Wireframes - Paper Prototypes

High-ﬁdelity wireframes and clickable prototypes

Wireﬂows

EightShapes Unify Modular Template System

Approaching the surface, Captain Information Interaction Architecture Design

Approaching the surface, Captain Information Interaction Visual Architecture Design Design

Approaching the surface, Captain Information Architecture Interaction Design Visual Design Look & Feel

Approaching the surface, Captain Information Architecture Interaction Design Visual Design Look & Feel This isn’t just about decoration, slickness, or branding

Approaching the surface, Captain Information Architecture Interaction Design Visual Design Look & Feel This isn’t just about decoration, slickness, or branding How it looks is how it works.

Typographical grids & hierarchy

Typographical grids & hierarchy Header and nav {

Typographical grids & hierarchy Header and nav { image {

Typographical grids & hierarchy Header and nav { image { ﬁrst item {

Typographical grids & hierarchy Header and nav { image { looks like date and time ﬁrst item {

Typographical grids & hierarchy Header and nav { image { looks like date and time looks like content summaries ﬁrst item {

Typographical grids & hierarchy Header and nav { image { looks like date and time looks like content summaries looks like archive or search? ﬁrst item {

Typographical grids & hierarchy Header and nav { image { looks like date and time looks like content summaries looks like archive or search? ﬁrst item { looks like more info?

Typographical grids & hierarchy Header and nav { Site layout conforms to our expectations based on our experiences image { looks like date and time looks like content summaries looks like archive or search? ﬁrst item { looks like more info?

Visual design of user affordances unclear relationships obvious relationships (Mac System 6) (Mac System 7)

Making functionality more obvious Action 1 Action 2 inactive Active Cancel Submit ® Cancel ‘ Submit ® Cancel ‘ Submit

Attractive things work better. Don Norman, Nielsen Norman Group

Which do you feel would work better?

How it looks is how well it works. Affective design •Aesthetic pleasure •Practical needs •Emotional beneﬁts

Building actual working products Information Interaction Visual Architecture Design Design

Building actual working products Visual Design

Building actual working products Visual Coding, Design Testing & QA

Building actual working products Visual Design Coding, Testing This deserves its own slideshow & QA

Building actual working products Visual Design Coding, Testing A note on user testing & QA

Building actual working products Visual Design Coding, Testing A note on user testing & QA Double-checks your assumptions.

Building actual working products Visual Design Coding, Testing A note on user testing & QA Double-checks your assumptions. If done well, helps nail low-hanging fruit to improve usability

Building actual working products Visual Design Coding, Testing A note on user testing & QA Double-checks your assumptions. If done well, helps nail low-hanging fruit to improve usability Can be done for “10 cents a day”

Building actual working products Visual Design Coding, Testing A note on user testing & QA “Guerrilla” usability testing

Building actual working products Visual Design Coding, Testing A note on user testing & QA “Guerrilla” usability testing 3-4 users. once a month, is all it takes

Building actual working products Visual Design Coding, Testing A note on user testing & QA “Guerrilla” usability testing 3-4 users. once a month, is all it takes Test on paper prototypes, use simple apps like Silverback

Budget usability testing with Silverback.app

Tracking clicks with Google Analytics

A/B Testing with Google Website Optimizer

Multi-variate testing with Google Website Optimizer

Play our Options Game, Make Friends & Win Cash! Become an Options Master Absolutely FREE! You’ve got nothing to lose. Sign up today! Win Big! Options Are Fun! Learn Options Today Fourscore and seven years ago....

Multi-variate testing with Google Website Optimizer

The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA

One more thing... 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA

One more thing... 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA

The circle of life(cycle), Simba 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA

In reality, feedback is constant 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA

Critical Path

The Nine Pillars of Successful Web Teams project management Where do you sit Jesse James Garrett <jjg@jjg.net> 9 July 2003 on this map? The most successful Web teams build their team structures and their processes on these nine essential competencies: Project Management: The hub that binds all the tactical competencies together as well as the engine that drives the project forward to completion, project management requires a highly specialized set of skills all its own. concrete Neglecting this area often results in missed deadlines and cost overruns. d i design Concrete Design: Before the abstract design can become a fully realized user experience, you must determine the specific details of interfaces, navigation, information design, and visual design. This realm of concrete design is essential to creating the final product. tactical Content Production: Knowing what content you need isn't enough. You also technology content need to know how you'll produce it. Gathering raw information, writing and editing, and defining editorial workflows and approvals are all part of content implementation production production. Technology Implementation: Building technical systems involves a lot of hard work and specialized knowledge: languages and protocols, coding and debugging, testing and refactoring. The more complex your site, the more important a competency in technology implementation becomes. abstract bstra Abstract Design: Information architecture and interaction design translate d design strategic objectives into a conceptual framework for the final user experience. These emerging disciplines addressing abstract design are strategic increasingly recognized for their value in the Web development process. Content Strategy: Content is often the reason users come to your site. But what content can you offer to meet your users' expectations? How much technology content content is appropriate, and what form should it take? What style or tone should it have? Before you can produce that content, you need to answer strategy strategy fundamental content strategy questions such as these. Technology Strategy: Web sites are technologically complex, and getting more intricate all the time. Identifying the technology strategy for the site – platforms, standards, technologies, and how they can all interoperate – is essential to avoiding costly mistakes. site Site Strategy: Defining your own goals for the site can be surprisingly strategy trateg tricky. Arriving at a common understanding of the site's purpose for your organization, how you'll prioritize the site's various goals, and the means by which you'll measure the site's success are all matters of site strategy. User Research: User-centered design means understanding what your users need, how they think, and how they behave – and incorporating that understanding into every aspect of your process. User research provides the raw observations that fuel this insight into the people your site must serve. user research adaptive path http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/ adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003

The Nine Pillars of Successful Web Teams project management Where do you sit Jesse James Garrett <jjg@jjg.net> 9 July 2003 on this map? The most successful Web teams build their team structures and their processes on these nine essential competencies: Project Management: The hub that binds all the tactical competencies together as well as the engine that drives the project forward to completion, project management requires a highly specialized set of skills all its own. concrete Neglecting this area often results in missed deadlines and cost overruns. d i design Probably in Concrete Design: Before the abstract design can become a fully realized user experience, you must determine the specific details of interfaces, navigation, information design, and visual design. This realm of concrete more than one design is essential to creating the final product. tactical Content Production: Knowing what content you need isn't enough. You also technology content need to know how you'll produce it. Gathering raw information, writing and editing, and defining editorial workflows and approvals are all part of content implementation production neat, tidy area production. Technology Implementation: Building technical systems involves a lot of hard work and specialized knowledge: languages and protocols, coding and debugging, testing and refactoring. The more complex your site, the more important a competency in technology implementation becomes. abstract bstra Abstract Design: Information architecture and interaction design translate d design strategic objectives into a conceptual framework for the final user experience. These emerging disciplines addressing abstract design are strategic increasingly recognized for their value in the Web development process. Content Strategy: Content is often the reason users come to your site. But what content can you offer to meet your users' expectations? How much technology content content is appropriate, and what form should it take? What style or tone should it have? Before you can produce that content, you need to answer strategy strategy fundamental content strategy questions such as these. Technology Strategy: Web sites are technologically complex, and getting more intricate all the time. Identifying the technology strategy for the site – platforms, standards, technologies, and how they can all interoperate – is essential to avoiding costly mistakes. site Site Strategy: Defining your own goals for the site can be surprisingly strategy trateg tricky. Arriving at a common understanding of the site's purpose for your organization, how you'll prioritize the site's various goals, and the means by which you'll measure the site's success are all matters of site strategy. User Research: User-centered design means understanding what your users need, how they think, and how they behave – and incorporating that understanding into every aspect of your process. User research provides the raw observations that fuel this insight into the people your site must serve. user research adaptive path http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/ adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003

UX Design

UX Design Product Management

UX Design Product Management Engineering

UX Design What’s usable, useful & desirable Product Management Engineering

UX Design What’s usable, useful & desirable Product Management What’s needed & therefore valuable Engineering

UX Design What’s usable, useful & desirable Product Management What’s needed & therefore valuable Engineering What’s possible, and what’s not

UX Design Product Management Engineering A constant cycle of design and testing

UX Design Product Management Engineering A constant cycle of design and testing adapted from ‘Sharing Ownership of UX,” Pabini Gabriel-Petit, 2007

So what does all this get us?

So what does all this get us? Clearer direction from the start - saves time

So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge

So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge Documentation of planning & design decisions

So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge Documentation of planning & design decisions Improved functioning between teams

So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge Documentation of planning & design decisions Improved functioning between teams Better products, and happier users

Questions? Comments? ajkandy@marksandpixels.com AJ Kandy • Marks & Pixels marksandpixels.com

An Introduction to UX Design & Testing

5 comments

Notes on slide 1

38 Favorites & 1 Group