pimp my app shane morris

Click here to load reader

Post on 16-Nov-2014

5.334 views

Category:

Business

1 download

Embed Size (px)

DESCRIPTION

“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.

TRANSCRIPT

  • 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...

  • What the developers can build in the time available
  • What the developers know how to build
  • What the developers can be bothered building
  • What the developers understands of the User Interface specification
  • What User Interface specification there is

5. So what I want to talk about is...

  • Whatdeveloperscan do about UX

6. Pimp my App?

  • Changing the surface appearance and behaviour, without changing the underlying structure

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.

  • List everything you need to show
  • Select the right widgets
  • Check for standards & consistency

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

  • In what order are people most likely to work?

19. 2. Map out the workflow

  • Load Settings
  • URL
  • Hosts
  • Accept/Reject file types
  • Retrieval Options / Special
  • Running Options
  • Save Settings
  • Empty/Add/Start

20. 3. Layout the elements

  • Left-right, Top-Bottom

21. 3. Layout the elements 22. 3. Layout the elements 1 2 3 4 5 Last 2 ndlast 23. 3. Layout the elements 24. 4. Check grouping

  • Rearrange items if there are more natural groupings.

25. 4. Check grouping 26. 4. Check grouping 27. Interaction Design

  • List everything you need to show
  • Map out the workflow
  • Layout the elements
  • Check grouping

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

  • Use as few different typefaces and sizes as possible
  • How many different colours should I use?

34. How many different colours should I use?

  • Rate your visual design skills on a scale of 1 to 5:

1 No visual design skills 5 Expert visual designer 35. How many different colours should I use?

  • Rate your visual design skills on a scale of 1 to 5:

1 No visual design skills Use only1colour 5 Expert visual designer Use5colours 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

  • Group Boxes

48. 5. Indicate Grouping

  • Group Boxes
  • Similarity

49. 5. Indicate Grouping

  • Group Boxes
  • Similarity
  • Proximity

50. 5. Indicate Grouping

  • Group Boxes
  • Similarity
  • Proximity
  • Alignment

51. 5. Indicate Grouping

  • Group Boxes
  • Similarity
  • Proximity
  • Alignment
  • And...
  • Empty space

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

  • Colour
    • Red/Orange colours especially

58. How to add visual weight

  • Colour
    • Red/Orange colours especially
  • Size

59. How to add visual weight

  • Colour
    • Red/Orange colours especially
  • Size
  • Contrast
    • Eg texture
    • Empty space

60. How to add visual weight

  • Colour
    • Red/Orange colours especially
  • Size
  • Contrast
    • Eg texture
    • Empty space
  • Irregular Shape

61. How to add visual weight

  • Colour
    • Red/Orange colours especially
  • Size
  • Contrast
    • Eg texture
    • Empty space
  • Irregular Shape
  • Misalignment

62. How to add visual weight

  • Colour
    • Red/Orange colours especially
  • Size
  • Contrast
    • Eg texture
    • Empty space
  • Irregular Shape
  • Misalignment
  • 3D

63. How to add visual weight

  • Colour
    • Red/Orange colours especially
  • Size
  • Contrast
    • Eg texture
    • Empty space
  • Irregular Shape
  • Misalignment
  • 3D
  • Movement

64. 6. Adjust Visual Weight 65. 6. Adjust Visual Weight 66. Recap

  • Interaction Design
  • List everything you need to show
  • Map out the workflow
  • Layout the elements
  • Check grouping

67. Recap

  • Presentation Design
  • Remove every unnecessary element
  • Minimise variation
  • Line stuffup
  • Space and size things evenly
  • Indicate grouping
  • Adjust visual weight

68. Thank You Shane Morris [email_address] blogs.msdn.com/shanemo