Post on 27-Jan-2015
description
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