Pimp My App Shane Morris

4,616 views

Published on

“User Experience” (UX) is so hot right now. Business magazines talk about it, stakeholders want it, people even have job titles containing it. Designers, usability engineers, information architects, psychologists and even anthropologists are all circling, fighting for a piece of the UX pie. But at the end of the day, coders own the user experience. All the drop-shadows in the world don’t mean a thing if they don’t make it into the code. Join Shane Morris - recovering developer, long-time user interface designer and Microsoft User Experience Evangelist – for a discussion of user experience from the developer’s viewpoint. What simple things can developers do to deliver better user experience? If you could only do one thing to improve your application’s user experience, what would it be? What about designers? What do they do? How can they help? How can you work effectively with them? This talk focuses on practical, realistic ways to ensure your next application delivers a great user experience.

Published in: Business, Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total views
4,616
On SlideShare
0
From Embeds
0
Number of Embeds
165
Actions
Shares
0
Downloads
64
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide
  • My job is to talk to designers and developers Role of Developers Not role of designers Timing?
  • Pimp My App Shane Morris

    1. Pimp My App Shane Morris User Experience Evangelist Microsoft Australia For slides for this presentation: blogs.msdn.com/shanemo
    2. Why am I here?
    3. Developers own the user experience
    4. The final User Experience is determined by... <ul><li>What the developers can build in the time available </li></ul><ul><li>What the developers know how to build </li></ul><ul><li>What the developers can be bothered building </li></ul><ul><li>What the developers understands of the User Interface specification </li></ul><ul><li>What User Interface specification there is </li></ul>
    5. So what I want to talk about is... <ul><li>What developers can do about UX </li></ul>
    6. “ Pimp my App”? <ul><li>Changing the surface appearance and behaviour, without changing the underlying structure </li></ul>
    7. User-Centred Design (Methodology) Contextual Inquiry Affinity Diagramming Usability Testing Personas Paper Prototyping Collaborative Design Heuristic Evaluation Wireframing Cognitive Walkthrough Activity Scenarios Focus Groups Card Sorting Cultural Probes Analytics
    8. User Experience Design Process
    9. User Experience Design Process You are here (mostly)
    10. User Experience Design Process  4 Steps  6 Steps
    11. Interaction Design for Developers http://jcooney.net/archive/2006/10/30/36235.aspx
    12. Interaction Design for Developers
    13. The Blank Canvas
    14. <ul><li>List everything you need to show </li></ul><ul><li>Select the right widgets </li></ul><ul><li>Check for standards & consistency </li></ul>
    15. 1. List everything you need to show
    16. 1. List everything you need to show
    17. 1. List everything you need to show
    18. 2. Map out the workflow <ul><li>In what order are people most likely to work? </li></ul>
    19. 2. Map out the workflow <ul><li>Load Settings </li></ul><ul><li>URL </li></ul><ul><li>Hosts </li></ul><ul><li>Accept/Reject file types </li></ul><ul><li>Retrieval Options / Special </li></ul><ul><li>Running Options </li></ul><ul><li>Save Settings </li></ul><ul><li>Empty/Add/Start </li></ul>
    20. 3. Layout the elements <ul><li>Left-right, Top-Bottom </li></ul>
    21. 3. Layout the elements
    22. 3. Layout the elements 1 2 3 4 5 Last 2 nd last
    23. 3. Layout the elements
    24. 4. Check grouping <ul><li>Rearrange items if there are more natural groupings. </li></ul>
    25. 4. Check grouping
    26. 4. Check grouping
    27. Interaction Design <ul><li>List everything you need to show </li></ul><ul><li>Map out the workflow </li></ul><ul><li>Layout the elements </li></ul><ul><li>Check grouping </li></ul>
    28. Presentation Design for Developers http://elephant-photos.com/images/elephant-painting-2.jpg
    29. 1. Remove every unnecessary element
    30. 1. Remove every unnecessary element
    31. 2. Minimise Variation
    32. 2. Minimise Variation
    33. A little bit about colours and fonts <ul><li>Use as few different typefaces and sizes as possible </li></ul><ul><li>How many different colours should I use? </li></ul>
    34. How many different colours should I use? <ul><li>Rate your visual design skills on a scale of 1 to 5: </li></ul>1 No visual design skills 5 “ Expert” visual designer
    35. How many different colours should I use? <ul><li>Rate your visual design skills on a scale of 1 to 5: </li></ul>1 No visual design skills Use only 1 colour 5 “ Expert” visual designer Use 5 colours
    36. 3. Line Stuff up
    37. 3. Line Stuff up
    38. Lining text up Label Textbox small Big
    39. Alignment – beware unintended relationships
    40. Alignment – beware unintended relationships
    41. 3. Line Stuff up
    42. 4. Space and Size Things Evenly
    43. Space and Size Things Evenly shane morris echo interaction design
    44. 4. Space and Size Things Evenly
    45. 4. Space and Size Things Evenly - Before
    46. 4. Space and Size Things Evenly
    47. 5. Indicate Grouping <ul><li>Group Boxes </li></ul>
    48. 5. Indicate Grouping <ul><li>Group Boxes </li></ul><ul><li>Similarity </li></ul>
    49. 5. Indicate Grouping <ul><li>Group Boxes </li></ul><ul><li>Similarity </li></ul><ul><li>Proximity </li></ul>
    50. 5. Indicate Grouping <ul><li>Group Boxes </li></ul><ul><li>Similarity </li></ul><ul><li>Proximity </li></ul><ul><li>Alignment </li></ul>
    51. 5. Indicate Grouping <ul><li>Group Boxes </li></ul><ul><li>Similarity </li></ul><ul><li>Proximity </li></ul><ul><li>Alignment </li></ul><ul><li>And... </li></ul><ul><li>Empty space </li></ul>
    52. 5. Indicate Grouping
    53. 5. Indicate grouping - Before
    54. 5. Indicate Grouping
    55. 6. Adjust Visual Weight
    56. How to add visual weight
    57. How to add visual weight <ul><li>Colour </li></ul><ul><ul><li>Red/Orange colours especially </li></ul></ul>
    58. How to add visual weight <ul><li>Colour </li></ul><ul><ul><li>Red/Orange colours especially </li></ul></ul><ul><li>Size </li></ul>
    59. How to add visual weight <ul><li>Colour </li></ul><ul><ul><li>Red/Orange colours especially </li></ul></ul><ul><li>Size </li></ul><ul><li>Contrast </li></ul><ul><ul><li>Eg texture </li></ul></ul><ul><ul><li>Empty space </li></ul></ul>
    60. How to add visual weight <ul><li>Colour </li></ul><ul><ul><li>Red/Orange colours especially </li></ul></ul><ul><li>Size </li></ul><ul><li>Contrast </li></ul><ul><ul><li>Eg texture </li></ul></ul><ul><ul><li>Empty space </li></ul></ul><ul><li>Irregular Shape </li></ul>
    61. How to add visual weight <ul><li>Colour </li></ul><ul><ul><li>Red/Orange colours especially </li></ul></ul><ul><li>Size </li></ul><ul><li>Contrast </li></ul><ul><ul><li>Eg texture </li></ul></ul><ul><ul><li>Empty space </li></ul></ul><ul><li>Irregular Shape </li></ul><ul><li>Misalignment </li></ul>
    62. How to add visual weight <ul><li>Colour </li></ul><ul><ul><li>Red/Orange colours especially </li></ul></ul><ul><li>Size </li></ul><ul><li>Contrast </li></ul><ul><ul><li>Eg texture </li></ul></ul><ul><ul><li>Empty space </li></ul></ul><ul><li>Irregular Shape </li></ul><ul><li>Misalignment </li></ul><ul><li>3D </li></ul>
    63. How to add visual weight <ul><li>Colour </li></ul><ul><ul><li>Red/Orange colours especially </li></ul></ul><ul><li>Size </li></ul><ul><li>Contrast </li></ul><ul><ul><li>Eg texture </li></ul></ul><ul><ul><li>Empty space </li></ul></ul><ul><li>Irregular Shape </li></ul><ul><li>Misalignment </li></ul><ul><li>3D </li></ul><ul><li>Movement </li></ul>
    64. 6. Adjust Visual Weight
    65. 6. Adjust Visual Weight
    66. Recap <ul><li>Interaction Design </li></ul><ul><li>List everything you need to show </li></ul><ul><li>Map out the workflow </li></ul><ul><li>Layout the elements </li></ul><ul><li>Check grouping </li></ul>
    67. Recap <ul><li>Presentation Design </li></ul><ul><li>Remove every unnecessary element </li></ul><ul><li>Minimise variation </li></ul><ul><li>Line stuff up </li></ul><ul><li>Space and size things evenly </li></ul><ul><li>Indicate grouping </li></ul><ul><li>Adjust visual weight </li></ul>
    68. Thank You Shane Morris [email_address] blogs.msdn.com/shanemo

    ×