Building for People: 5 Practical Tip for Greating Great UX


Published on

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.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Building for People: 5 Practical Tip for Greating Great UX

    1. 1. Building for People: 5 Practical Tips for Creating Great User eXperience (UX) Qixing Zheng UX Advisor Microsoft Canada
    2. 2. User Experience Advisor Passionate about UX
    3. 3. User Experience Advisor School
    4. 4. Agenda <ul><li>How? </li></ul><ul><li>How do I make software for people? </li></ul><ul><li>How do integrate UX practice in software development </li></ul><ul><li>Practical tips? </li></ul>Why Bother? What can it do for me ? UX? What is it? Is UX=UI?
    5. 5. What’s UX?
    6. 6. User Experience (UX) Design &quot;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. 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. 8. UX Is Usability after before accessibility searchability discoverability learnability intuitiveness productivity responsiveness latency performance interactivity flavors
    9. 9. UX Is Usefulness before after functional valuable flavors
    10. 10. UX Is Adaptability before after context extensible personalized customizable flavors
    11. 11. UX Is Reliability before after secure scalable predictable trustworthy flavors
    12. 12. UX Is Desirability before after beautiful attractive exclusivity emotional appeal pride of ownership flavors
    13. 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. 14. UX Quiz !! What’s wrong with the following websites in terms of UX Design?
    15. 15. Visual Battlefield
    16. 16. Confusing Navigation
    17. 17. The Guessing Game
    18. 18. Resource for the Worst of Worst
    19. 19. What about some good examples?
    20. 20.
    21. 22.
    22. 23. Why Bother? It’s hard enough to just get the things done and functional, much less make it have good UX.
    23. 24. <ul><li>Because… </li></ul><ul><li>Experience Defines the Product not functionality </li></ul><ul><li>ROI of UX </li></ul>
    24. 26. Increased Revenues <ul><li>In 2003, Nielsen Norman group researched the effect of UCD on rebuilds of 42 e-commerce sites. </li></ul>202% Use of specific (target) features 150% Traffic / visitor count 100% Sales / conversion rate Average improvement across Web projects Metric
    25. 27. Increased revenues Examples of ROI of UX
    26. 28. <ul><li>Because… </li></ul><ul><li>Experience Defines the Product not functionality </li></ul><ul><li>ROI of UX </li></ul><ul><li>A focus on UX will help you better address </li></ul><ul><li>functional requirements </li></ul><ul><li>build the right thing </li></ul><ul><li>prioritize functions </li></ul><ul><li>improve users’ efficiency and accuracy when using your software </li></ul><ul><li>Developers play an important role in User-Centered Design </li></ul><ul><li>a great skill to have </li></ul><ul><li>better work with IA or UX designers on the team </li></ul><ul><li>you don’t need to be experts since there are established guidelines and design patterns </li></ul>
    27. 29. The Office Redesign Story
    28. 30. Why did we need a new UX for Office 2007?
    29. 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 ”
    30. 38. Office 2007 Design Tenets (Summer 2003) <ul><li>A person’s focus should be on their content, not on the UI. Help people work without interference. </li></ul><ul><li>Reduce the number of choices presented at any given time. </li></ul><ul><li>Increase efficiency. </li></ul><ul><li>Embrace consistency, but not homogeneity. </li></ul><ul><li>Give features a permanent home. Prefer consistent-location UI over “smart” UI. </li></ul><ul><li>Straightforward is better than clever. </li></ul>
    31. 39. Effectiveness (2003)
    32. 40. Effectiveness (2007) Contextual Tabs
    33. 41. Efficiency (2003)
    34. 42. Mini-Toolbar: closer to the cursor
    35. 43. Satisfaction (2003)
    36. 44. Clippy Stars in the Late Night Show
    37. 45. Satisfaction (2003)
    38. 46. Satisfaction (2007) Dropdown Gallery In-Ribbon Gallery
    39. 47. <ul><li>Because… </li></ul><ul><li>Experience Defines the Product not functionality </li></ul><ul><li>ROI of UX </li></ul><ul><li>A focus on UX will help you better address </li></ul><ul><li>functional requirements </li></ul><ul><li>build the right thing </li></ul><ul><li>prioritize functions </li></ul><ul><li>improve users’ efficiency and accuracy when using your software </li></ul><ul><li>The final user experience is determined by </li></ul><ul><li>What the developers can build in the time available </li></ul><ul><li>What the developers can be bothered building </li></ul><ul><li>How well UCD practice is integrated in the development cycle </li></ul><ul><li>What the developers understands of the User Interface specification </li></ul>
    40. 48. How? So how do I, as a developer/architect, create good experiences for my users?
    41. 49. User-Centered Design Process User Iterative Process Design & Prototype Research Usability Evaluation
    42. 50. Office 2007 Design Process
    43. 51. <ul><li>Methods </li></ul><ul><li>Ethnography – User Observation, Interviews, Contextual Inquiry </li></ul><ul><li>Heuristic Evaluation, Cognitive Walkthrough, Task Analysis </li></ul><ul><li>Market/Business Analysis </li></ul><ul><li>Competitive Research/Analysis </li></ul><ul><li>Deliverables </li></ul><ul><li>User Scenarios </li></ul><ul><li>Requirements list </li></ul><ul><li>Personas </li></ul>Research
    44. 52. A Word About Personas Bob Ivan Alice by J. Ambrose Little
    45. 53. A UX Software Model Application Task Oriented Web Site Information Oriented -Jesse James Garrett
    46. 54. <ul><li>Quantitative: </li></ul><ul><li>Usability testing </li></ul><ul><li>Eye Tracking </li></ul><ul><li>Qualitative: </li></ul><ul><li>Focus Group </li></ul><ul><li>Interview </li></ul><ul><li>Questionnaire </li></ul>Get usability evaluation as early as possible! Evaluation
    47. 55. How do I integrate UX focus into my existing development processes ?
    48. 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
    49. 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
    50. 58. <ul><li>Keep an eye on popular apps and sites </li></ul><ul><li>Research/Study (see attached resource) </li></ul><ul><li>Use UX Patterns </li></ul><ul><li>Remember the following 5 practical tips </li></ul>Lightweight UX Design (for Developers & Architects)
    51. 59. UX Patterns <ul><li>Make sure the following aspects are covered: </li></ul><ul><li>The controls should fade out in time if they are placed over the image </li></ul><ul><li>The time between the photos must be configurable </li></ul><ul><li>The user must be able to exit the slideshow mode </li></ul><ul><li>Use a nice transition between photos! It make it a lot nicer... </li></ul><ul><li>Consider adding captions for the image title or comments </li></ul>
    52. 60. 5 Key UX Tips <ul><li>Based on: </li></ul><ul><li>Windows UI Design Principles </li></ul><ul><li>Office 2007 Design Principles </li></ul><ul><li>Effective Web Design Principles </li></ul><ul><li>Core HCI Principles </li></ul>
    53. 61. Know your users spend time to find out what they know and need 1
    54. 62. Office 2003: Find the “Find” Command Eye tracking Demo
    55. 64. Reduce concepts to increase confidence minimize the number of choices presented at any given time 2
    56. 65. Photo by Long Zheng Ways to launch Outlook in Vista
    57. 66. Photo by Long Zheng Ways to launch Outlook in Win7
    58. 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
    59. 68. Example Better:
    60. 69. Increase efficiency when possible Reduce the number of steps to accomplish a task 4
    61. 70. Be Consistent Conventions are good Consistent language Follow the users expectation Let users existing skills transfer 5
    62. 71. Consistent but not homogeneity
    63. 72. I want my click back
    64. 73. If you can’t remember all 5, just do this… Don’t Make Users Think!
    65. 74. What does .NET give me?
    66. 75. What .NET Does NOT Provide <ul><li>User-centered thinking </li></ul><ul><li>User -Centered design process </li></ul><ul><li>UX methodology </li></ul>
    67. 76. Great tools and platforms help, but ultimately, you have to embrace User-Centered Design thinking to use them to build great experiences.
    68. 77. Agenda <ul><li>How? </li></ul><ul><li>How do I make software for people? </li></ul><ul><li>How do integrate UX practice in software development </li></ul><ul><li>Practical tips? </li></ul>Why Bother? What can it do for me ? UX? What is it? Is UX=UI?
    69. 78. Resources [email_address]