an introduction to ux design & testing

An Introduction to User Experience Design& User Testing

AJ Kandy • Marks & Pixels marksandpixels.com

http://www.marksandpixels.com


On today’s agenda....


What is User Experience Design?


What is User Experience Design?Why should we care?


What is User Experience Design?Why should we care?Where can we apply UX processes?


What is User Experience Design?Why should we care?Where can we apply UX processes?How can we measure its effectiveness?


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?


Usually, some or all of the following



Information design



Information designInformation architecture




Interaction design




Interaction designVisual Design





Human Factors / Cognition





Human Factors / CognitionUsability / Accessibility


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 facilitateuser interaction with functionality

Information presentation tofacilitate understanding

Feature set: detailed descriptionof functionality to meet user needs

Externally derived goals identifiedthrough user research, ethnography,psychographics, etc.

Business, creative or otherinternally derived goals for the site


Web as Information- Oriented Content DestinationVisual treatment of text, graphicpage elements and navigationalcomponents

Design of UI elements to facilitateuser’s movement through the IA


Content elements required inthe site to meet user needs



Web as Task-Oriented Software Interface

Graphic Treatment of interface elements (the “look” in “look-and-feel”)

Design of UI elements to facilitateuser interaction with functionality


Feature set: detailed descriptionof functionality to meet user needs



adapted from “Understanding Comics,” Scott McCloud, 1994

All creative endeavours follow...

On the web, this translates to:

The development cycle

Needs Specs InformationArchitecture

Interaction Design

VisualDesign

Coding, Testing & QA

1 2 3 4 5 6



Interaction Design

VisualDesign


1 2 3 4 5 6

Market &

user

research User Experience

Team

developm

ent

& QA tea

ms

You can’t start from the surface

There’s somethingcool on the Web!

We’ve gotta have that!





Start your photocopier Paste and then




Start your photocopier Paste and then

MAGIC occurs

here



Interaction Design

VisualDesign


1 2 3 4 5 6

Market &

user

research User Experience

Team

developm

ent

& QA tea

ms

What, and who, is your product for?


Businessor userneeds



Research, abstract, big-picture goals



“A thousand songs in your pocket.”




“A thousand songs in your pocket.”“Provide voting info to US seniors”




“A thousand songs in your pocket.”“Provide voting info to US seniors”“Teach students how to trade stocks”




“A thousand songs in your pocket.”“Provide voting info to US seniors”“Teach students how to trade stocks”External: “Play a fun online game”




“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


How do you address those needs?



Specs



Specs Decisions about form



Specs

...An MP3 player & software

Decisions about form



Specs


...A find-your-voting-office tool




Specs



...Tutorials and articles




Specs




...A stock market contest




Specs




...A stock market contest


Still no design decisions here



Specs


Specs

Function and content organization

Structure & taxonomySURVIVOR U - SITEMAP 1.2

Survivor U landing page

Feature articles home

Columnists Expert Picks

Newsletter Home

Register / Forgot Login

Financial News

news articles

news articles

news articles

news articles

news articles

Feature articles

news articles

news articles

Individual Experts

news articles

news articles

individual column articles

news articles

news articles

BlogsIndividual Expert Articles

news articles

news articles

Individual Columns

news articles

news articles

Individual Newsletters

Learn Trading

news articles

news articles

Individual Lessons

Survivor U Video Tutorials Home

news articles

news articles

Individual Tutorials with Tran-scripts

Survivor U Video Channels Home

news articles

news articles

Individual video posts

FAQs Home

news articles

news articles

Individual Q + As

Glossary Home

news articles

news articles

Individual Glossary Terms

news articles

news articles

Alphabet Lettergroup pages (skip letters with no content)

news articles

news articles

FAQ Topic Groupsnews

articles

news articles

Beginner, Intermediate and Advanced sections

Wall Street Survivor nav scheme (links to appropriate WSS pages) - Dashboard, Trade, Research, News, Survivor U, Community, Video, Store, Support

Login / Registration on Survivor U is for this section only (for now), no integration with the main ASP.NET single-sign-on login

Aggregate feed with all new posted official content

comments feed per post




news articles

news articles

What’s This? info items

Ideally, on-page Ajax popups with explanatory notes for things like RSS feeds, etc.


news articles

news articles

Newsroom, INO TV and ClipSyndicate channel pages



Specs InformationArchitecture

Function and content organization

Card-Sorting Exercises

How people will actually use your site / software


Specs InformationArchitecture


InformationArchitecture



Thinking about user flows

High-level process flow

InteractionDesign



Thinking about user flows

Detailed process flowchart

InteractionDesign

Wireframe Sketches

Wireframes - Paper Prototypes

High-fidelity wireframesand clickable prototypes

Wireflows

EightShapes Unify Modular Template System

Approaching the surface, Captain


InteractionDesign



InteractionDesign

VisualDesign


Look & FeelInformationArchitecture

InteractionDesign

VisualDesign


This isn’t just aboutdecoration, slickness, or branding


InteractionDesign

VisualDesign


This isn’t just aboutdecoration, slickness, or branding

How it looksis how it works.


InteractionDesign

VisualDesign

Typographical grids & hierarchy


Header and nav {


Header and nav {

image {


Header and nav {

image {

first item {


Header and nav {

image {

first item {

looks like date and time


Header and nav {

image {

first item {

looks like date and time looks like content summaries


Header and nav {

image {

first item {

looks like date and time looks like content summaries looks like archive or search?


Header and nav {

image {

first item {


looks like more info?


Site layout conformsto our expectationsbased on our experiences

Header and nav {

image {

first item {


looks like more info?

Visual design of user affordances

unclear relationships(Mac System 6)

obvious relationships(Mac System 7)

Making functionality more obvious

inactive Active

SubmitCancel

SubmitCancel® ‘

SubmitCancel® ‘

Action 1 Action 2

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 benefits

Building actual working products


InteractionDesign

VisualDesign


VisualDesign

VisualDesign


Coding,Testing & QA

VisualDesign


This deserves its own slideshowCoding,Testing & QA

VisualDesign


Coding,Testing & QA

A note on user testing

VisualDesign


Double-checksyour assumptions.

Coding,Testing & QA


VisualDesign



If done well, helpsnail low-hangingfruit to improveusability

Coding,Testing & QA


VisualDesign



If done well, helpsnail low-hangingfruit to improveusability

Can be done for“10 cents a day”

Coding,Testing & QA


VisualDesign


“Guerrilla” usabilitytesting

Coding,Testing & QA


VisualDesign



3-4 users. oncea month, is all it takes

Coding,Testing & QA


VisualDesign



3-4 users. oncea month, is all it takes

Test on paperprototypes, use simple apps like Silverback

Coding,Testing & QA


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

Fourscore and seven years ago....

Win Big! Options Are Fun!

Learn Options Today

Play our Options Game,Make Friends & Win Cash!

Become an Options MasterAbsolutely FREE!

You’ve got nothing to lose.Sign up today!

Multi-variate testing with Google Website Optimizer



Interaction Design

VisualDesign


1 2 3 4 5 6


Interaction Design

VisualDesign


1 2 3 4 5 6

One more thing...


Interaction Design

VisualDesign


1 2 3 4 5 6

Rinse& Repeat

7

One more thing...


Interaction Design

VisualDesign


1 2 3 4 5 6

Rinse& Repeat

7

The circle of life(cycle), Simba


Interaction Design

VisualDesign


1 2 3 4 5 6

Rinse& Repeat

7

In reality, feedback is constant

Critical Path

project management

technologyimplementation

The Nine Pillarsof Successful Web Teams

user research

concretedesign

sitestrategy

abstractdesign

d i

trateg

bstradesign

contentstrategy

tact

ical

ddstrategic

contentproduction

technologystrategy

http://www.jjg.net/ia/pillars/http://www.adaptivepath.com/

Jesse James Garrett <[email protected]>9 July 2003

adaptive path

The most successful Web teams build their team structures and theirprocesses on these nine essential competencies:

Project Management: The hub that binds all the tactical competenciestogether as well as the engine that drives the project forward to completion,project management requires a highly specialized set of skills all its own.Neglecting this area often results in missed deadlines and cost overruns.

Concrete Design: Before the abstract design can become a fully realizeduser experience, you must determine the specific details of interfaces,navigation, information design, and visual design. This realm of concretedesign is essential to creating the final product.

Content Production: Knowing what content you need isn't enough. You alsoneed to know how you'll produce it. Gathering raw information, writing andediting, and defining editorial workflows and approvals are all part of contentproduction.

Technology Implementation: Building technical systems involves a lot ofhard work and specialized knowledge: languages and protocols, coding anddebugging, testing and refactoring. The more complex your site, the moreimportant a competency in technology implementation becomes.

Abstract Design: Information architecture and interaction design translatestrategic objectives into a conceptual framework for the final userexperience. These emerging disciplines addressing abstract design areincreasingly recognized for their value in the Web development process.

Content Strategy: Content is often the reason users come to your site. Butwhat content can you offer to meet your users' expectations? How muchcontent is appropriate, and what form should it take? What style or toneshould it have? Before you can produce that content, you need to answerfundamental content strategy questions such as these.

Technology Strategy: Web sites are technologically complex, and gettingmore intricate all the time. Identifying the technology strategy for the site –platforms, standards, technologies, and how they can all interoperate – isessential to avoiding costly mistakes.

Site Strategy: Defining your own goals for the site can be surprisinglytricky. Arriving at a common understanding of the site's purpose for yourorganization, how you'll prioritize the site's various goals, and the means bywhich you'll measure the site's success are all matters of site strategy.

User Research: User-centered design means understanding what yourusers need, how they think, and how they behave – and incorporating thatunderstanding into every aspect of your process. User research provides theraw observations that fuel this insight into the people your site must serve.

Where do you sit on this map?

adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003

project management

technologyimplementation

The Nine Pillarsof Successful Web Teams

user research

concretedesign

sitestrategy

abstractdesign

d i

trateg

bstradesign

contentstrategy

tact

ical

ddstrategic

contentproduction

technologystrategy

http://www.jjg.net/ia/pillars/http://www.adaptivepath.com/

Jesse James Garrett <[email protected]>9 July 2003

adaptive path

The most successful Web teams build their team structures and theirprocesses on these nine essential competencies:

Project Management: The hub that binds all the tactical competenciestogether as well as the engine that drives the project forward to completion,project management requires a highly specialized set of skills all its own.Neglecting this area often results in missed deadlines and cost overruns.

Concrete Design: Before the abstract design can become a fully realizeduser experience, you must determine the specific details of interfaces,navigation, information design, and visual design. This realm of concretedesign is essential to creating the final product.

Content Production: Knowing what content you need isn't enough. You alsoneed to know how you'll produce it. Gathering raw information, writing andediting, and defining editorial workflows and approvals are all part of contentproduction.

Technology Implementation: Building technical systems involves a lot ofhard work and specialized knowledge: languages and protocols, coding anddebugging, testing and refactoring. The more complex your site, the moreimportant a competency in technology implementation becomes.

Abstract Design: Information architecture and interaction design translatestrategic objectives into a conceptual framework for the final userexperience. These emerging disciplines addressing abstract design areincreasingly recognized for their value in the Web development process.

Content Strategy: Content is often the reason users come to your site. Butwhat content can you offer to meet your users' expectations? How muchcontent is appropriate, and what form should it take? What style or toneshould it have? Before you can produce that content, you need to answerfundamental content strategy questions such as these.

Technology Strategy: Web sites are technologically complex, and gettingmore intricate all the time. Identifying the technology strategy for the site –platforms, standards, technologies, and how they can all interoperate – isessential to avoiding costly mistakes.

Site Strategy: Defining your own goals for the site can be surprisinglytricky. Arriving at a common understanding of the site's purpose for yourorganization, how you'll prioritize the site's various goals, and the means bywhich you'll measure the site's success are all matters of site strategy.

User Research: User-centered design means understanding what yourusers need, how they think, and how they behave – and incorporating thatunderstanding into every aspect of your process. User research provides theraw observations that fuel this insight into the people your site must serve.

Where do you sit on this map?

Probably in more than one neat, tidy area

adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003

UX Design

UX Design

ProductManagement

UX Design

Engineering

ProductManagement

UX Design

Engineering

ProductManagement

What’s usable, useful & desirable

UX Design

Engineering

ProductManagement


What’s needed & therefore valuable

UX Design

Engineering

ProductManagement


What’s needed & therefore valuable

What’s possible, and what’s not

UX Design

EngineeringProduct

Management

A constant cycle of design and testing

UX Design

EngineeringProduct

Management

adapted from ‘Sharing Ownership of UX,” Pabini Gabriel-Petit, 2007

A constant cycle of design and testing

So what does all this get us?


Clearer direction from the start - saves time


Clearer direction from the start - saves timeDesign process driven by knowledge


Clearer direction from the start - saves timeDesign process driven by knowledgeDocumentation of planning & design decisions


Clearer direction from the start - saves timeDesign process driven by knowledgeDocumentation of planning & design decisionsImproved functioning between teams


Clearer direction from the start - saves timeDesign process driven by knowledgeDocumentation of planning & design decisionsImproved functioning between teamsBetter products, and happier users

Questions? Comments?

[email protected]

AJ Kandy • Marks & Pixels marksandpixels.com

mailto:[email protected]?subject=UX%20Presentation

mailto:[email protected]?subject=UX%20Presentation

