Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Building for People: 5 Practical Tip for Greating Great UX

•Download as PPT, PDF•
•
Q
qixingz

If the 20th century is about technology functions, then the 21st century is about technology users. Building useful, usable, and attractive software applications for people is critical to win customers. User Experience (UX) is much more than just UI, it includes all key aspects of application such as performance and availability that you as developers concern. This session will start off with the ROI of great UX and why you should care. Then, 5 practical tips for creating great UX will be shared that you can take home and start improve your software UX right away.

1 of 78
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… 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?
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 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.
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?
Resources [email_address] http://blogs.msdn.com/canux

More Related Content

Building for People: 5 Practical Tip for Greating Great UX

  • 1. Building for People: 5 Practical Tips for Creating Great User eXperience (UX) Qixing Zheng UX Advisor Microsoft Canada
  • 2. User Experience Advisor Passionate about UX
  • 4. 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?
  • 6. 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
  • 7. User Experience is Everything Scalability Maintainability Manageability Security Privacy Branding Resilience Robustness Responsiveness Extensibility Availability Reusability Agility Performance Stability Reliability Adaptability Efficiency Usefulness Usability
  • 8. UX Is Usability after before accessibility searchability discoverability learnability intuitiveness productivity responsiveness latency performance interactivity flavors
  • 9. UX Is Usefulness before after functional valuable flavors
  • 10. UX Is Adaptability before after context extensible personalized customizable flavors
  • 11. UX Is Reliability before after secure scalable predictable trustworthy flavors
  • 12. UX Is Desirability before after beautiful attractive exclusivity emotional appeal pride of ownership flavors
  • 13. 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…
  • 14. UX Quiz !! What’s wrong with the following websites in terms of UX Design?
  • 17. The Guessing Game communicatenewmedia.com
  • 18. Resource for the Worst of Worst Websitesthatsuck.com
  • 19. What about some good examples?
  • 21.  
  • 23. Why Bother? It’s hard enough to just get the things done and functional, much less make it have good UX.
  • 24. Because… Experience Defines the Product not functionality ROI of UX
  • 25.  
  • 26. 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
  • 28. 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
  • 30. Why did we need a new UX for Office 2007?
  • 31. 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 ”
  • 32.  
  • 33.  
  • 34.  
  • 35.  
  • 36.  
  • 37.  
  • 38. 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.
  • 44. Clippy Stars in the Late Night Show
  • 46. Satisfaction (2007) Dropdown Gallery In-Ribbon Gallery
  • 47. 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
  • 48. How? So how do I, as a developer/architect, create good experiences for my users?
  • 49. User-Centered Design Process User Iterative Process Design & Prototype Research Usability Evaluation
  • 51. 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
  • 52. A Word About Personas Bob Ivan Alice by J. Ambrose Little
  • 53. A UX Software Model Application Task Oriented Web Site Information Oriented -Jesse James Garrett
  • 54. Quantitative: Usability testing Eye Tracking Qualitative: Focus Group Interview Questionnaire Get usability evaluation as early as possible! Evaluation
  • 55. How do I integrate UX focus into my existing development processes ?
  • 56. 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
  • 57. 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
  • 58. 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)
  • 59. 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
  • 60. 5 Key UX Tips Based on: Windows UI Design Principles Office 2007 Design Principles Effective Web Design Principles Core HCI Principles
  • 61. Know your users spend time to find out what they know and need 1
  • 62. Office 2003: Find the “Find” Command Eye tracking Demo
  • 63.  
  • 64. Reduce concepts to increase confidence minimize the number of choices presented at any given time 2
  • 65. Photo by Long Zheng Ways to launch Outlook in Vista
  • 66. Photo by Long Zheng Ways to launch Outlook in Win7
  • 67. 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
  • 69. Increase efficiency when possible Reduce the number of steps to accomplish a task 4
  • 70. Be Consistent Conventions are good Consistent language Follow the users expectation Let users existing skills transfer 5
  • 71. Consistent but not homogeneity
  • 72. dontclick.it I want my click back
  • 73. If you can’t remember all 5, just do this… Don’t Make Users Think!
  • 74. What does .NET give me?
  • 75. What .NET Does NOT Provide User-centered thinking User -Centered design process UX methodology
  • 76. Great tools and platforms help, but ultimately, you have to embrace User-Centered Design thinking to use them to build great experiences.
  • 77. 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?