an introduction to ux design & testing

An Introduction to User Experience Design& User Testing

AJ Kandy • Marks & Pixels 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

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

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 &

research User Experience

developm

& QA tea

You can’t start from the surface

There’s somethingcool on the Web!

We’ve gotta have that!

Start your photocopier Paste and then

MAGIC occurs

Interaction Design

VisualDesign

1 2 3 4 5 6

Market &

research User Experience

developm

& QA tea

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”

No decisions are being made about form or design yet

How do you address those needs?

Specs Decisions about form

...An MP3 player & software

Decisions about form

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

...Tutorials and articles

...A stock market contest

Still no design decisions here

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

Feature articles

news articles

Individual Experts

news articles

individual column articles

news articles

BlogsIndividual Expert Articles

news articles

Individual Columns

news articles

Individual Newsletters

Learn Trading

news articles

Individual Lessons

Survivor U Video Tutorials Home

news articles

Individual Tutorials with Tran-scripts

Survivor U Video Channels Home

news articles

Individual video posts

FAQs Home

news articles

Individual Q + As

Glossary Home

news articles

Individual Glossary Terms

news articles

Alphabet Lettergroup pages (skip letters with no content)

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

What’s This? info items

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

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

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 {

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® ‘

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

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

One more thing...

Interaction Design

VisualDesign

1 2 3 4 5 6

Rinse& Repeat

The circle of life(cycle), Simba

Interaction Design

VisualDesign

1 2 3 4 5 6

Rinse& Repeat

The circle of life(cycle), Simba

Interaction Design

VisualDesign

1 2 3 4 5 6

Rinse& Repeat

In reality, feedback is constant

Critical Path

project management

technologyimplementation

The Nine Pillarsof Successful Web Teams

user research

concretedesign

sitestrategy

abstractdesign

trateg

bstradesign

contentstrategy

ddstrategic

contentproduction

technologystrategy

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

Jesse James Garrett <jjg@jjg.net>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