Building for People:Building for People:5 Practical Tips for Creating Great 5 Practical Tips for Creating Great User eXperience (UX)User eXperience (UX)

Qixing ZhengUX Advisor

Microsoft Canada

User Experience

Advisor

Passionate

about UX

User Experience Advisor

SchoolSchool

How?1.How do I make

software for people? 2.How do integrate

UX practice in software

development3.Practical tips?

Why Bother

?What can it do for me?

UX? What is it?Is UX=UI?

Agenda

What’s UX?

User Experience (UX) Design

"all aspects of the user’s interaction with the product: how it is perceived, learned, and used.“ - wikipedia

Human Computer Interaction (HCI)

Interaction Design

Information Architecture

User Interface Design

Usability Engineering

Interface Design

Visual Design

Media Design

User Experience is Everything

Scalability

Maintainability

Manageability

Security

PrivacyBranding

ResilienceRobustness

ResponsivenessExtensibility

Availability

Reusability

Agility

Performance

Stability

ReliabilityAdaptability

Efficiency

Usefulness

Usability

UX Is Usability

after

accessibilitysearchabilitydiscoverabilitylearnabilityintuitiveness

productivityresponsivenesslatencyperformanceinteractivity

flavors

before

before after

functionalvaluable

flavors

UX Is Usefulness

contextextensiblepersonalizedcustomizable

flavors

before

after

UX Is Adaptability

UX Is Reliability

securescalablepredictabletrustworthy

flavors

before after

UX Is Desirability

beautifulattractiveexclusivityemotional appealpride of ownership

flavors

before

after

UX is Cross-platform, Open Process, and UX is Cross-platform, Open Process, and Language Agnostic!Language Agnostic!UX is Cross-platform, Open Process, and UX is Cross-platform, Open Process, and Language Agnostic!Language Agnostic!

User Experience User Experience User Interface User Interface

UX is about making software with people in UX is about making software with people in mind all the time…mind all the time…UX is about making software with people in UX is about making software with people in mind all the time…mind all the time…

UX Quiz !!What’s wrong with the following websites in terms of

UX Design?

Graphicsexchange.com

Visual BattlefieldVisual Battlefield

panago.com

Confusing NavigationConfusing Navigation

The Guessing GameThe Guessing Game

communicatenewmedia.com

Resource for the Worst of Worst

Websitesthatsuck.com

What about some good examples?

expedia.comtravelocity.com/

tudou.com

Why Bother?

It’s hard enough to just get the things

done and functional, much less make it

have good UX.

Because…Experience Defines the Product not functionality• ROI of UX

Increased Revenues

In 2003, Nielsen Norman group researched the

effect of UCD on rebuilds of 42 e-commerce sites.

202%Use of specific (target) features

150%Traffic / visitor count

100%Sales / conversion rate

Average improvement across Web projects

Metric

Increased revenuesExamples of ROI of UX

Because…Experience Defines the Product not functionality• ROI of UX

A focus on UX will help you better address functional requirements• build the right thing• prioritize functions• improve users’ efficiency and accuracy when using your software

Developers play an important role in User-Centered Design • a great skill to have • better work with IA or UX designers on the team• you don’t need to be experts since there are established guidelines and design patterns

The Office Redesign Story

Why did we need a new UX for Office 2007?

We added new features year after year but hardly anyone found or used them

“There must be a way to do this…”

“I don’t even know where to start looking.”

Within the 10 top requested features in Office, 5 had already been in the product for more than a release

“Office is BLOATED”

Office 2007 Design Tenets (Summer 2003)

• A person’s focus should be on their content, not on the UI. Help people work without interference.

• Reduce the number of choices presented at any given time.

• Increase efficiency.• Embrace consistency, but not homogeneity.• Give features a permanent home. Prefer

consistent-location UI over “smart” UI.• Straightforward is better than clever.

Effectiveness (2003)

Effectiveness (2007)

Contextual Tabs

Efficiency (2003)

Mini-Toolbar: closer to the cursor

Satisfaction (2003)

Clippy Stars in the Late Night Show

Satisfaction (2003)

Satisfaction (2007)

Dropdown Gallery

In-Ribbon Gallery

Because…Experience Defines the Product not functionality• ROI of UX

A focus on UX will help you better address functional requirements• build the right thing• prioritize functions• improve users’ efficiency and accuracy when using your software

The final user experience is determined by• What the developers can build in the time available• What the developers can be bothered building• How well UCD practice is integrated in the development cycle• What the developers understands of the User Interface specification

How?

So how do I, as a developer/architect,

create good experiences for my users?

Research

User-Centered Design Process

UsabilityEvaluation User

Iterative ProcessIterative Process

Design &Prototype

Office 2007 Design Process

Research

Methods

• Ethnography – User Observation, Interviews, Contextual Inquiry

• Heuristic Evaluation, Cognitive Walkthrough, Task Analysis

• Market/Business Analysis

• Competitive Research/Analysis

Deliverables

• User Scenarios

• Requirements list

• Personas

A Word About Personas

Bob Ivan Alice

by J. Ambrose Little

Application

Task Oriented

Web Site

Information Oriented

A UX Software Model

-Jesse James Garrett

EvaluationQuantitative:• Usability testing• Eye Tracking

Qualitative:• Focus Group• Interview• Questionnaire

Get usability evaluation as early as possible!Get usability evaluation as early as possible!

How do I integrate UX focus into my existing development processes?

More Sequential Processes

User ResearchUser ResearchBiz/Market ResearchEthnographyFocus GroupsTask AnalysisUse Case Development

UX DesignUX DesignInformation ArchitectureInteraction DesignVisual DesignPrototypingDesign GuidelinesPrototype Usability Testing

UX SupportUX SupportDesign Refinement & AdjustmentUsability TestingUX Reviews & OptimizationFunctional Revision

by J. Ambrose Little

ReleasedProduct

ProductVision

Document

ProductVision

Document

Primary Market & User

Research

Primary Market & User

Research

ValidatedDesign

Product BacklogProduct Backlog

Design Iteratio

n

Build Iteratio

n

Iteration

Zero

Maintain/Enhance

Design Iteratio

n

Build IterationValidated

Design

Crea

te

Back

log

An Agile Perspective

by J. Ambrose Little

• Keep an eye on popular apps and sites• Research/Study (see attached resource)• Use UX Patterns• Remember the following 5 practical tips

Lightweight UX Design (for Developers & Architects)

UX Patterns

Make sure the following aspects are covered: •The controls should fade out in time if they are placed over the image

•The time between the photos must be configurable •The user must be able to exit the slideshow mode •Use a nice transition between photos! It make it a lot nicer... •Consider adding captions for the image title or comments

Make sure the following aspects are covered: •The controls should fade out in time if they are placed over the image

•The time between the photos must be configurable •The user must be able to exit the slideshow mode •Use a nice transition between photos! It make it a lot nicer... •Consider adding captions for the image title or comments

5 Key UX Tips

Based on:• Windows UI Design Principles• Office 2007 Design Principles• Effective Web Design Principles• Core HCI Principles

Know your users

spend time to find out what they know and need

11

Office 2003: Find the “Find” Command

Eye tracking Demo

Reduce concepts to increase confidence

minimize the number of choices presented at any given time

22

Photo by Long Zheng

Ways to launch Outlook in Vista

Photo by Long Zheng

Ways to launch Outlook in Win7

Communicate effectively through a visual language

does this communicate better visually than textUse as few different typefaces and sizes as possible

follow simple visual design principles: Contrast, Alignment, Repetition, and Proximity

33

Example

Better:Better:Better:Better:

Increase efficiency when possible

Reduce the number of steps to accomplish a task

44

Be Consistent

Conventions are goodConsistent language

Follow the users expectationLet users existing skills transfer

55

Consistent but not homogeneityConsistent but not homogeneity

dontclick.it

I want my click backI want my click back

If you can’t remember all 5, just do this…

Don’t Make Users Think!

What does .NET give me?

What .NET Does NOT Provide

User-centered thinking

User -Centered design process

UX methodology

Great tools and platforms help, but ultimately, you have to

embrace User-Centered Design thinking to use them to build

great experiences.

How?1.How do I make

software for people? 2.How do integrate

UX practice in software

development3.Practical tips?

Why Bother

?What can it do for me?

UX? What is it?Is UX=UI?

Agenda

Resources

qixing.zheng@microsoft.comhttp://blogs.msdn.com/canux