1. Creating User Experiences: Unlocking the Invisible Cage Billy Hollis Billyhollis.com AAP312

3. 1985-1995 PCs: distributed computing Local area networks Graphical user interfaces Rise of the Internet 3 Present  Proliferation of devices  Touch computing  Ubiquitous connectivity  Cloud storage

4. “For the history of software, it’s been good enough to make things possible. Now success also depends on making things easy.”

5. HTML Windows Forms Classic Visual Basic Java Swing Etc. 5 File Edit Blah More blah Window Help

7. Most common mistake Assuming better design primarily means better aesthetics

9. Counter-example Conexent SmartAudio Fabulous cosmetics Incomprehensible operation

14. 14

15. 15

16. 16

18. 18

19. 19

21. Habit forms the invisible cage you live in

22. HTML Windows Forms Classic Visual Basic Java Swing Etc. 22 File Edit Blah More blah Window Help

24. Where you need to be

25. How do you get there? First step – understanding underlying design principles… …some of which go against the habits of your whole career

26. “Screen real estate is valuable!” Really? Pixels are free

27. Horror vacui Fear of empty spaces

40. Gestalt Principles Human visual system is optimized to see structure and relationships This leads to several principles of design that are collectively known as gestalt principles – Proximity – Similarity – Common fate – Continuity and Closure (filling gaps) – Figure / ground

46. Proximity can be overridden by similarity Similar objects are unconsciously grouped together Various attributes can be used to make objects similar Color Shape Size

51. Q1 Q2 Q3 Q4

54. Gestalt: continuity and closure The pre-processing in the visual system automatically fills in gaps This is an evolutionary response to the need to recognize threats quickly

59. Gestalt: Figure / ground Your visual system unconsciously “chooses” what part of the field of vision to consider the foreground, or “figure” This part of the field of vision gets the attention and focus The rest is considered the background, or “ground”, and unconsciously given lesser importance

60. Figure / ground

61. Assessment of “figure” and “ground” can change A figure can change into a ground, and vice versa To some degree, this is under conscious control This can also be used to maintain context in software

64. A common ground can be used for grouping

76. Design principle demonstrated: Inattentional Blindness

77. Next step: Expose yourself …to good and bad design in the real world

82. Next step – become unsatisfied

85. Options to make it better Favorites List of recently used menu items Role-based subsets of items “Find” capability to locate the item needed Checkbox configurability

86. But maybe what you really need… Is a completely different navigation or interaction pattern – Timeline – Queue – Viewport DEV323, Wednesday 10:15, S320A Beyond Master Detail: Interaction and Navigation Patterns for Modern User Experience

87. Next step: Force yourself to break free Stop designing applications the way you’ve always done it Leave your cage File Edit Blah More blah Window Help

88. Exercise – going beyond rectangles Print out a crowded screen from your current application Redesign that screen from scratch on a blank sheet of paper Requirement: Your new design must include the curved shape below, in a non-trivial way (not just as an icon)

89. Other ways to use constraints Billy’s design card deck Putting aside your first design, and creating another that’s completely different

91. Avoid… Taking lessons from graphic design and content design too seriously – You’re doing interaction design – Styling, colors, typefaces, etc. are the easy part and can be done late in the development process – Interaction design must be done early

92. Resources

93. Universal Principles of Design (Revised and updated) William Lidwell Kritina Holden Jill Butler 93

94. Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules Jeff Johnson

96. Drawing on the Right Side of the Brain

97. Contacting Billy billyhollis.com billyhollis@gmail.com, billyhollis@live.com billyhollis@gmail.combillyhollis@live.com Classes in design concepts and techniques Classes in XAML technologies Consulting on user interface design and construction Pluralsight course: Creating User Experiences: Fundamental Design Principles