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

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... What developers can 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 nd last

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 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 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 stuff up Space and size things evenly Indicate grouping Adjust visual weight

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