Building for People: 5 Practical Tip for Greating Great UX

Building for People: 5 Practical Tips for Creating Great User eXperience (UX) Qixing Zheng UX Advisor Microsoft Canada

User Experience Advisor Passionate about UX

User Experience Advisor School

Agenda

How?

How do I make software for people?

How do integrate UX practice in software development

Practical tips?

Why Bother? What can it do for me ? UX? What is it? Is UX=UI?

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 Privacy Branding Resilience Robustness Responsiveness Extensibility Availability Reusability Agility Performance Stability Reliability Adaptability Efficiency Usefulness Usability

UX Is Usability after before accessibility searchability discoverability learnability intuitiveness productivity responsiveness latency performance interactivity flavors

UX Is Usefulness before after functional valuable flavors

UX Is Adaptability before after context extensible personalized customizable flavors

UX Is Reliability before after secure scalable predictable trustworthy flavors

UX Is Desirability before after beautiful attractive exclusivity emotional appeal pride of ownership flavors

UX is Cross-platform, Open Process, and Language Agnostic! User Experience User Interface UX is about making software with people in mind all the time…

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

Graphicsexchange.com Visual Battlefield

panago.com Confusing Navigation

The Guessing Game communicatenewmedia.com

Resource for the Worst of Worst Websitesthatsuck.com

What about some good examples?

expedia.com travelocity.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 revenues Examples of ROI of UX

Because…

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…

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?

User-Centered Design Process User Iterative Process Design & Prototype Research Usability Evaluation

Office 2007 Design Process

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

Research

A Word About Personas Bob Ivan Alice by J. Ambrose Little

A UX Software Model Application Task Oriented Web Site Information Oriented -Jesse James Garrett

Quantitative:

Usability testing

Eye Tracking

Qualitative:

Focus Group

Interview

Questionnaire

Get usability evaluation as early as possible! Evaluation

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

More Sequential Processes User Research Biz/Market Research Ethnography Focus Groups Task Analysis Use Case Development UX Design Information Architecture Interaction Design Visual Design Prototyping Design Guidelines Prototype Usability Testing UX Support Design Refinement & Adjustment Usability Testing UX Reviews & Optimization Functional Revision by J. Ambrose Little

An Agile Perspective by J. Ambrose Little Product Vision Document Primary Market & User Research Product Backlog Iteration Zero Create Backlog Released Product Validated Design Design Iteration Build Iteration Maintain/ Enhance Design Iteration Build Iteration Validated Design

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

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 1

Office 2003: Find the “Find” Command Eye tracking Demo

Reduce concepts to increase confidence minimize the number of choices presented at any given time 2

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 text Use as few different typefaces and sizes as possible follow simple visual design principles: Contrast, Alignment, Repetition, and Proximity 3

Example Better:

Increase efficiency when possible Reduce the number of steps to accomplish a task 4

Be Consistent Conventions are good Consistent language Follow the users expectation Let users existing skills transfer 5

Consistent but not homogeneity

dontclick.it I 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