Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Creating User Experiences: Unlocking the Invisible Cage Billy Hollis Billyhollis.com AAP312."— Presentation transcript:

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

2

3 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

6

7 Most common mistake Assuming better design primarily means better aesthetics

8

9 Counter-example Conexent SmartAudio Fabulous cosmetics Incomprehensible operation

10

11

12

13

14 14

15 15

16 16

17

18 18

19 19

20

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

23

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

28

29

30

31

32

33

34

35

36

37

38

39

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

41

42

43

44

45

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

47

48

49

50

51 Q1 Q2 Q3 Q4

52

53

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

55

56

57

58

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

62

63

64 A common ground can be used for grouping

65

66

67

68

69

70

71

72

73

74

75

76 Design principle demonstrated: Inattentional Blindness

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

78

79

80

81

82 Next step – become unsatisfied

83

84

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

90

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

95

96 Drawing on the Right Side of the Brain

97 Contacting Billy billyhollis.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

98


Download ppt "Creating User Experiences: Unlocking the Invisible Cage Billy Hollis Billyhollis.com AAP312."

Similar presentations


Ads by Google