Silverlight won't save your user experience - you will!

1,531 views

Published on

My Presentation on UX Strategy to the architecture tracks at TechEd Australia and New Zealand 2009

Published in: Design, Technology, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,531
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Worked in UI design for many yearsLast few years seen an explosion of interest in user experience and UI
  • 2 Reasons
  • Here’s why
  • And the others
  • Perspective 3D may well be the flaming logo of the RIA generation.
  • History
  • XXXplaypenpic
  • Platform StandardsWebLogo, Search, Contact Us, top nav, left nav...GUIFile Edit View Tools Window Help.Standards are going wayDesire to differentiateDesigned for specific types of applicationsWeb: information browsingGUI: Information working - of a particular scale.
  • Perspective 3D may well be the flaming logo of the RIA generation.
  • Lots to say, but not today
  • See my blog for more details
  • What now?
  • You go to your first UI design meeting. In front of you is a blank sheet of flipchart paper.Do youChange the subject, the UI will become clear later. UI evolves at the last minute from a test harnessSay "Hey, nobody ever got sacked for copying Amazon!"Hand a Texta to the person wearing the most black in the room
  • We had to change the names when use case scenarios came along.
  • See my blog for more details
  • Well, yes, but not what you think.
  • Or task analysisOr whatever it is in your methodology
  • Like buildingsWeb sites is about a series of destinations. Applications are more about the journeys (or, reducing the number of journeys)
  • No, but you can draw some
  • Photo from Jenson Harris presentation on Orffice 2007 re-design
  • Can import your sketches into SketchflowXXX demo?Could show Flow graphTalked about on Wednesday with SketchflowNot really going to talk about today
  • In the pastMany tools existAxureiRiseBalsamiqHypercardProduction toolsFlashHybridsCatalyst?Expression BlendCheck list by @tuna
  • How many already do some form of usability testing?Doesn’t have to be formal
  • Not just “what do you think”?
  • ACTF
  • Little to do with the technologyLittle to do with laying out widgetsLittle to do with drop-shadows & gradient fills.
  • Visual design comes last
  • By preparing for the design, by understanding user constraints, we can navigate these problems.
  • I’ll be in the exhibition area
  • Silverlight won't save your user experience - you will!

    1. 1.
    2. 2. Silverlight won&apos;t save your User Experience - You Will!<br />Shane Morris<br />User Experience Evangelist<br />Microsoft Australia<br />ARC304<br />
    3. 3.
    4. 4.
    5. 5.
    6. 6.
    7. 7. Take Away #1<br />User Experience Design starts long before the drop-shadows and rounded corners<br />
    8. 8.
    9. 9. Why all this interest in User Experience (UX)?<br />
    10. 10.
    11. 11. Why all this interest in UX?<br />Differentiated experiences<br />Capability of platform and tools<br />
    12. 12. Capability of Platform and Tools<br />
    13. 13. “With great power there must also come – great responsibility!”<br />Stan Lee<br />
    14. 14. Silverlight won’t save your user experience.<br />
    15. 15. Dropping Our Standards<br />
    16. 16. 2 things used to constrain our ability to get ourselves in trouble<br />Platform capability<br />Platform standards<br />
    17. 17. Platform Capability<br />The Web<br />3270 with pictures<br />Graphical User Interfaces(GUI’s)<br />Platform performance<br />Difficulty of coding<br />wikipedia.org/3270<br />
    18. 18. Platform Standards<br />Web<br />Logo, Search, Contact Us, top nav, left nav...<br />GUI<br />File, Edit, View, Tools, Window Help...<br />
    19. 19. 3 Ingredients for Failure<br />Awesome power<br />No standards<br />Boss that says we need a more up-to-date user experience.<br />
    20. 20. Quiz<br />The boss says we need a more up-to-date user experience<br />Do you:<br />Hire a user experience designer immediately<br />Ask &quot;What users?&quot;<br />Brush up your resume<br />
    21. 21. What Users?<br />
    22. 22. User Research<br />User Profile<br />User<br />Task<br />Environment<br />Platform<br />Persona&apos;s<br />http://www.usability.gov/analyze/personas.html<br />
    23. 23. What is your User Experience?<br />You don&apos;t need a UI to define your user experience<br />User Goals<br />Business Goals<br />Usability Goals<br />Design Goals<br />Attitude statement<br />When people use this application, they feel...<br />
    24. 24. Lonely Planet Surface Concept<br />
    25. 25. Quickbooksvs XERO<br />http://blog.xero.com/2008/12/bank-reconciliation/<br />
    26. 26. Quickbooksvs XERO<br />http://blog.xero.com/2008/12/bank-reconciliation/<br />
    27. 27. Eventually you Have to Design Something...<br />
    28. 28. Quiz<br />You go to your first UI design meeting. In front of you is a blank sheet of flipchart paper.<br />Do you:<br />Change the subject: the required UI will become clear later.<br />Say &quot;Hey, nobody ever got sacked for copying Amazon!&quot;<br />Hand a Texta to the person wearing the most black in the room<br />
    29. 29. Your First Design<br />Activity Scenarios <br />
    30. 30. Lonely Planet Surface Concept<br />
    31. 31. Matt and Kate in Sydney<br />Matt and Kate have finally made it through immigration at Sydney airport. They&apos;ve been planning their South American trip for months - it&apos;s finally here!<br />But first they have to suffer through the usual two hour wait in the airport before departure. Matt thinks quickly - &apos;let&apos;s get a coffee!&apos; They wander around scanning the usual airport shops, looking for a Gloria Jean&apos;s. There are sunglasses shops, duty free of course, a newsagent... <br />Suddenly Kate notices a cool looking store sporting a big blue Lonely Planet logo.<br />&quot;Oh my God! I didn&apos;t know there were Lonely Planet stores! Let&apos;s check it out!&quot;<br />While planning the trip, Kate was a regular visitor to lonelyplanet.com. She has registered a Lonely Planet profile, and the South America guidebook that they&apos;ve been thumbing through for the last 4 months is in her bag. Kate has even stored her favourite South American destinations on lonelyplanet.com, and has posted a bunch of questions on Thorntree about the best romantic spots in Buenos Aires. <br />Matt has been less involved in the planning. He knows the Lonely Planet brand, but just associates them with guidebooks.<br />As they walk into the store, they can see not only Lonely Planet products, but also Crumpler, Teva, Northface and a bunch of other travel related brands. Kate is immediately attracted to the wall of books, while Matt notices a group of people leaning over a display screen in the middle of the store.<br />Matt watches a young boy flick through images of New Zealand on the tabletop screen using his hands. Behind the photos is a map of the Queenstown area of New Zealand.<br />Over at the book shelf, Kate notices a sticker on the back of the Buenos Aires city guide. The sticker says “Place me on our Microsoft Surface to learn more!” She grabs Argentina, Peru, and Buenos Aires and takes them over to Matt.<br />Lonely Planet Scenario<br />
    32. 32. Take Away #2<br />Your first user experience design doesn’t have a user interface.<br />
    33. 33. Can I draw something now?<br />OK, I’ve written my Activity Scenarios<br />
    34. 34. Task Analysis<br />
    35. 35. Applications Break At The Joins<br />
    36. 36. Workflow Diagram<br />Create ‘Customer’<br />Create ‘Policy Claim’<br />New<br />New<br />Who is calling?<br />What do they want?<br />New Inquiry<br />Finish Call<br />Act on request<br />Existing<br />Existing<br />Identify ‘Customer’<br />Identify ‘Policy Claim’<br />The Hiser Group<br />
    37. 37. Workflow Diagrams<br />Are<br />A map of the main user steps that make up a task<br />High-level<br />A way to start thinking about how to break tasks up in the user interface<br />A way to focus on flow between functions, not just the functions<br />
    38. 38. Workflow Diagrams<br />Are<br />Are not<br />A map of the main user steps that make up a task<br />High-level<br />A way to start thinking about how to break tasks up in the user interface<br />A way to focus on flow between functions, not just the functions<br />A site map<br />A diagram of the screens/pages in an application<br />A diagram of every possible path and action<br />
    39. 39. Workflow Diagram<br />Create ‘Customer’<br />Create ‘Policy Claim’<br />New<br />New<br />Who is calling?<br />What do they want?<br />New Inquiry<br />Finish Call<br />Act on request<br />Existing<br />Existing<br />Identify ‘Customer’<br />Identify ‘Policy Claim’<br />The Hiser Group<br />
    40. 40. Creating Workflow Diagrams<br />Start by creating one workflow diagram for each activity scenario / task.<br />Avoid the temptation to incorporate other scenarios/functions at this stage.<br />Keep it high-level!<br />Once you have a first-pass, try to simplify the diagram. <br />(By combining steps, for example.)<br />Once you have a few, try to combine related diagrams into one, more abstract diagram.<br />
    41. 41. Workflow diagramming in action<br />
    42. 42. Workflow diagram syntax<br />No set rules<br />Keep it simple<br />User action 1<br />Decision<br />Y<br />N<br />Condition<br />User action 2<br />Entry/Exit point<br />Optional<br />Usually enough<br />
    43. 43. Workflow diagram<br />Interpolate<br />SetParameters<br />Retouch<br />Images <br />SelectNodes<br />Plan SpecialEffect <br />RecordCompositeto Film <br />Scan inFilm Rolls <br />Convert &<br />Manipulate<br />Tape <br />BuildFlowgraph <br />Composite <br />Convert &ManipulateTape <br />ArrangeElements onLightbox <br />Preview <br />Preparation<br />Planning<br />Implementation<br />Completion<br />The Hiser Group<br />
    44. 44. Examine your workflow diagrams for:<br />Groupings of related functions<br />Suggests screens, pages or panels<br />Avoid ‘one screen/page per workflow diagram box’.<br />Key flows between activities<br />And therefore flows between screens/pages<br />Clues to the overall Interaction model<br />Hub-based / Document Centric? <br />Wizard-based? <br />Combination?<br />
    45. 45. For the Record<br />Other types of task analysis<br />GOMS<br />HTA<br />Etc.<br />
    46. 46. Can I build some screens now?<br />OK I have workflow diagrams<br />
    47. 47. Paper Prototyping<br />
    48. 48. Paper Prototyping<br />FAST DESIGN<br />
    49. 49. Paper Prototyping<br />Pros<br />No technical skill required<br />Not intimidating<br />Clearly unfinished<br />Necessarily high-level<br />Low investment<br />Cons<br />Become unwieldy with lots of content<br />Awkward to show subtle interactions<br />Not as portable<br />
    50. 50. Digital Prototyping<br />
    51. 51. Prototyping problems:<br />Required specific skills<br />Too much implementation detail<br />Wasn’t agile enough<br />Everything interpreted through the prototyper’s eyes<br />Throw-away<br />Many of these problems are resolved<br />
    52. 52. Then the miracle happens<br />
    53. 53. Quiz<br />OK, you’ve got a user interface design. What is the best way to ensure your user interface is usable?<br />Hire a user experience consultant<br />Get Quality Assurance involved<br />Get an expert user to review the user interface<br />None of the above, the users will tell us if there are any problems<br />
    54. 54. Usability Testing<br />
    55. 55. Usability Testing <br />http://www.portfoliodesign.net/clients/case_study/monster_mob_usability_testing.asp?nav=marketing&gt; <br />
    56. 56. Usability Testing<br />Give users tasks to perform<br />Get them to think aloud<br />Don’t interfere<br />Know what constitutes success<br />Consider getting a neutral party to test<br />You don’t have to have a ‘usability lab’<br />You don’t need large numbers of users<br />
    57. 57. Usability Testing Bonus<br />Project buy-in<br />
    58. 58. Take Away #3<br />Fail early, and fail often.<br />
    59. 59. What We&apos;ve Been Talking About<br />User Profiling<br />User Experience Goals<br />Activity Scenarios<br />Workflow Diagramming<br />Paper Prototyping<br />Usability Testing<br />
    60. 60. User Centred Design<br />
    61. 61. User Centred Design<br />Users<br />
    62. 62. Progressive Refinement<br />
    63. 63. 3 Ingredients for Failure<br />Awesome power<br />No standards<br />Boss that says we need a more up-to-date user experience.<br />
    64. 64. 3 Takeaways<br />User Experience Design starts long before the drop-shadows and rounded corners<br />Your first user experience design doesn’t have a user interface<br />Fail early, and fail often<br />
    65. 65. question & answer<br />
    66. 66. Required Slide<br />Speakers, <br />please list the Breakout Sessions, TLC Interactive Theaters and Labs that are related to your session.<br />Related Content<br />WUX212 Panel Discussion - Designers & Developers How We Do It In the Real World<br /> Wednesday 3:45pm<br />
    67. 67. shanemo@microsoft.comblogs.mdsn.com/shanemoixd101.com@shanemo<br />Thank you<br />
    68. 68. Required Slide<br />© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.<br />The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.<br />

    ×