The document provides an overview of user experience design and interaction design for developers. It discusses how developers determine the user experience and outlines various user-centered design methodologies. It then describes a 4-6 step user experience design process. The remainder of the document focuses on interaction design and presentation design for developers, outlining best practices like removing unnecessary elements, indicating grouping, and adjusting visual weight.

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

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

15. 1. List everything you need to show

16. 1. List everything you need to show

17. 1. List everything you need to show

21. 3. Layout the elements

22. 3. Layout the elements 1 2 3 4 5 Last 2 nd last

23. 3. Layout the elements

25. 4. Check grouping

26. 4. 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

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

52. 5. Indicate Grouping

53. 5. Indicate grouping - Before

54. 5. Indicate Grouping

55. 6. Adjust Visual Weight

56. How to add visual weight

64. 6. Adjust Visual Weight

65. 6. Adjust Visual Weight

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