The first of a 3 part series given in 2014 on the basics of user interface design, this session focuses on usability principles and techniques, and on the optimization of front-end assets for performance.

1. Utility | Meaning | Engagement
UI Design
Basics

2. ?

3. Design

4. Not Design

5. Donotconfuse
designwith
decoration
5

6. “…shaping digital
things for people’s use”
-Raj Lal

7. 7
Three Legged Stool

9. EngagementM
eaning
Utility

10. The Horror

11. The Horror
http://www.arngren.net/

12. The Horror
http://ronoslund.com/

13. The Horror
http://www.mrbottles.com/

14. Design for Utility
UI Design
Basics

15. 14
Usabiltiy
Performance

16. Usability

17. 16
Usability is a quality attribute that
assesses how easy user interfaces are
to use.

18. 17
Learnability

19. 18
Learnability

20. 19
Efficiency

21. 20
Efficiency

22. 21
Memorability

23. 22
Errors

24. 23
Satisfaction

25. Flight Search - http://www.hipmunk.com/
Online Music - http://grooveshark.com/
Zelda NES Emulator - http://game-oldies.com/play-
online/legend-of-zelda-the-nintendo-nes#
24
Exercise

26. 25
Learnability
How easy is it for users to accomplish basic tasks the first
time they encounter the design?
Identify the “basic tasks”.
Efficiency
Once users have learned the design, how quickly can they
perform tasks?
Identify the task flow - identify how may steps are involved
Memorability
When users return to the design after a period, how easily
can they reestablish proficiency?
You’re going to have to guess
Errors
How many errors do users make, how severe are they, and
how easily can they recover?
Identify potential errors and how easily they are avoided
Satisfaction How pleasant is it to use the design?

27. Usability Heuristics

28. 1. Visibility of
system status

29. 28
Visibility of system status
Loading…

30. 28
Visibility of system status

31. 29
Progress Buttons
Progress Buttons Examples

32. 2. Match between system
and the real world

33. 31
iBooks “Library”

34. 32
Desktop

35. 33
Paper Paradigm

36. 3. User control
and freedom

37. 35
Support Undo/Redo

38. 36
Chrome

39. 37
Turbotax

40. 4. Help and documentation

41. 39
Garageband Help

42. 5. Help users recover
from errors

43. 41
Help users recover from
errors

44. 42
Help users recover from
errors

45. 42
Help users recover from
errors

46. 6. Aesthetic and
minimalist design

47. 44
Aesthetic and minimalist
design

48. 45
Aesthetic and minimalist
design

49. 7. Flexibility and
efficiency of use

50. 47
Accelerators

51. 48
Accelerators

52. 49
Tailor Frequent Actions

53. 8. Recognition rather
than recall

54. 51
Minimize Memory Load

55. 52
Avoid Visual Clutter

56. 53
Use Conventions

57. 54
OSX Help Menu

58. 54
OSX Help Menu

59. 54
OSX Help Menu

60. 54
OSX Help Menu

61. 9. Error prevention

62. 56
Error Prevention
What is your name? What is your quest?
What is your birthdate?

63. 56
Error Prevention
Lancelot
What is your name?
The Holy Grail
What is your quest?
The Ides of March MCCXXV
What is your birthdate?

64. 57
Error Preventions
What is your name? What is your quest?
What is your birthdate?

65. 57
Error Preventions
Lancelot
What is your name?
The Holy Grail
What is your quest?
What is your birthdate?
March 15 1225

66. 10. Consistency and
standards

67. 59
Consistency and
standards

68. 60
Consistency and
standards

69. 61
Affordances

70. Underlined Links
62
Affordances

71. 63
Affordances

72. 64
Affordances

73. Flight Search - http://www.hipmunk.com/
Online Music - http://grooveshark.com/
Zelda NES - http://game-oldies.com/play-online/
legend-of-zelda-the-nintendo-nes#
65
Exercise

74. 1. Visibility of System Status
2. Speak the user’s language
3. Provide user control and freedom (undo/redo)
4. Help and documentation
5. Help users recover from errors
6. Aesthetic and minimalist design
7. Flexibility and efficiency of use
8. Recognition rather than recall (reduce memory load)
9. Error prevention
10. Consistency and standards (affordances)

75. Break

76. Some Research

77. 69
Experiment
1. Get some paper and pencil
2. Look for 2 seconds
3. Sketch what you see

78. 70

79. 70

80. 71

81. 71

82. 72

83. 72

84. 73
Eye Tracking

85. Some people will read your content, but most
won't.
74
F-Pattern: Lessons

86. The first two paragraphs should state the most
important information.
75
F-Pattern: Lessons

87. Start subheads, paragraphs, and bullet points with
information-carrying words that users will notice
when scanning.
76
F-Pattern: Lessons

88. 77
F-Pattern: Not Absolute

89. “The primary goal for
every form is completion”
Luke Wroblewski
Web Form Design: Filling
in the Blanks
78
Forms

90. The Horror

91. 80

92. 80

93. 81
Illuminate A Clear
Path to Completion

94. 82
Scan Lines

95. 83
Scan Lines

96. 84
Button Placement

97. 85
Button Placement

98. 86
Button Placement
The Winner

99. 87
Top Align Labels
First Name
Last Name
Telephone
( ) -

100. 88
Lastpass

101. 89
Right Align Labels
First Name
Middle Initial
Telephone ( ) -
Last Name
Occupation

102. 90
Left Align Labels
Tax ID
Form 102B box1
Capital of Ireland

103. 91
Turbotax

104. 92
Labels Within Fields
Tax ID
Middle Initial
Telephone*
Last Name
Occupation
!

105. 93
When in doubt:
Top Align

106. 94
Forms Suck. If you don’t
believe me, try to find people
who like filling them in.
-Luke Wroblewski

107. Performance

108. It’s time for us to treat
performance as an essential
design feature, not just as a
technical best practice.
-Brad Frost

109. 97
Time Scales in
User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
0.1 sec
“I did that”

110. 97
Time Scales in
User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12

111. 97
Time Scales in
User Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12

112. 98
Time Scales in User
Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
0.2 - 1.0 seconds
“I told the computer to do that”

113. 98
Time Scales in User
Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12

114. 98
Time Scales in User
Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12

115. 99
Time Scales in User
Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
Greater than 1.0 second
“Im waiting on the computer”

116. 99
Time Scales in User
Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12

117. 99
Time Scales in User
Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
Column 1 ! Column 2 ! Column 3 !
Value 10
Value 2 Value 3
Value 7
Value 5 Value 6
Value 4
Value 8 Value 9
Value 1
Value 11 Value 12

118. See Heuristic #1
Indicate system status

119. Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
101
Time Scales in User
Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
10 seconds
…

120. Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
101
Time Scales in User
Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/

121. Column 1 ! Column 2 ! Column 3 !
Value 1 Value 2 Value 3
Value 4 Value 5 Value 6
Value 7 Value 8 Value 9
Value 10 Value 11 Value 12
101
Time Scales in User
Experience
source: http://www.nngroup.com/articles/powers-of-10-time-scales-in-ux/
Column 1 ! Column 2 ! Column 3 !
Value 10
Value 2 Value 3
Value 7
Value 5 Value 6
Value 4
Value 8 Value 9
Value 1
Value 11 Value 12

122. Minimize http requests
Concatenate, Minify, gzip css and javascript
Optimize images
102
Performance
Best Practices

123. Run your current project through these
performance tools. What could you do to increase
performance?
http://developers.google.com/speed/pagespeed/
insights/
http://tools.pingdom.com/
103
Exercise