RTFM: Things You Missed in the HIG

The human interface guidelines are the fundamental document for designing and developing for iOS, but how many of us have read it cover to cover?

I did, 5 times.

There are dozens of design problems that iOS and Mac developers run into every day that have already been solved right within the pages of the HIG. I’ll walk through these commonly missed gems and explain why I think the HIG should win (most) arguments on your team.

Transcript

1. Rules
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. View Slide

6. SHOE SLIDE
   

   View Slide

7. View Slide

8. 0. Do not die.
   1. Be yourself.
   2. Love.
   3. Matter.
   4. Be honest and clear.
   5. Earn trust.
   6. Believe in something.
   7. Be courteous to others.
   8. Have a few good friends.
   9. Have good intentions.
   10. Make things.
   11. Do what you enjoy.
   12. Enjoy what you do.
   13. Treat people like equals.
   14. Be neither bored nor boring.
   15. Waste no time.
   16. Do more than the minimum.
   17. Be empathetic.
   18. Be funny.
   19. Laugh.
   20. Break the rules.
   

   View Slide

9. RTFM
   things you missed in the HIG
   

   View Slide

10. @mb
    

    View Slide

11. matthew bischoff
    

    View Slide

12. matt
    

    View Slide

13. View Slide

14. Velocity
    Quotebook
    

    View Slide

15. View Slide

16. View Slide

17. View Slide

18. Guidelines
    

    View Slide

19. “But the HIG says…”
    

    View Slide

20. Being an iOS developer without
    reading the HIG is like being a
    priest without reading the bible.
    

    View Slide

21. Why?
    

    View Slide

22. View Slide

23. Arguments
    

    View Slide

24. “Know the rules well,
    so you can break
    them effectively.”
    

    View Slide

25. 0
    1.75
    3.5
    5.25
    7
    2000 2001 2002 2003 2004 2005 2006 2008 2009 2010 2011 2012 2013
    Mac iOS
    

    View Slide

26. 49,642 words
    

    View Slide

27. typing
    speaking
    reading
    presenting
    14 hours
    6 hours
    3 hours
    50 minutes ?
    

    View Slide

28. Vocabulary
    

    View Slide

29. Taps ≠ Clicks
    Screens ≠ Pages
    Customers ≠ Uniques
    Buttons ≠ Links
    Interface Builder ≠ CSS
    Apps ≠ Websites
    

    View Slide

30. App Definition Statement
    

    View Slide

31. An app definition statement is a concise,
    concrete declaration of an app’s main
    purpose and its intended audience.
    

    View Slide

32. Examples
    

    View Slide

33. Mail.app
    

    View Slide

34. Mail on iPhone is designed to
    help mobile users handle
    their email while they’re
    standing in line or walking to
    a meeting.
    

    View Slide

35. Mail on iPad is efficient
    enough for people to use on
    the go, but its rich experience
    also encourages more in-
    depth use.
    

    View Slide

36. It’s a free, fun, and simple way to
    make and share gorgeous photos
    on your iPhone.
    

    View Slide

37. A new way to fund and follow
    creative projects from your iPhone.
    

    View Slide

38. A social magazine that lets people
    discover and share content in
    beautiful, simple, and meaningful
    ways.
    

    View Slide

39. Powerful collaboration, review, and
    code management for open source
    and private development projects.
    

    View Slide

40. Lightning fast translation without
    an Internet connection.
    

    View Slide

41. A simple tool to save and optimize
    web pages for reading later.
    

    View Slide

42. An app that shows students what
    they need to score on their next
    exam.
    

    View Slide

43. A simple way to journal for people
    who want to write and recall more
    information about their lives.
    

    View Slide

44. The best way to read news for
    people who rely on their phone as
    the primary source of news.
    

    View Slide

45. Basil is a single place for your
    favorite recipes and makes it easier
    to cook them.
    

    View Slide

46. Paper is where ideas begin.
    

    View Slide

47. Focused, gorgeous and aggressively
    fast to-do list app for iOS, Mac, and
    the web.
    

    View Slide

48. 1. List all the features you think users might like
    2. Determine who your users are
    3. Filter the feature list through the audience
    definition
    4. Don’t stop there
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. Deference, Clarity, & Depth
    

    View Slide

55. Deference
    

    View Slide

56. Clarity
    

    View Slide

57. Depth
    

    View Slide

58. Layers
    

    View Slide

59. View Slide

60. Blur
    

    View Slide

61. Start
    

    View Slide

62. Start instantly
    

    View Slide

63. Launch Images
    

    View Slide

64. View Slide

65. View Slide

66. Dare to be boring
    

    View Slide

67. “If you think that following
    these guidelines will result in
    a plain, boring launch image,
    you’re right.”
    

    View Slide

68. “Onboarding”
    

    View Slide

69. View Slide

70. View Slide

71. Your tutorial screen
    is just a list of ways
    you’ve failed.
    

    View Slide

72. Don’t make me type
    

    View Slide

73. 20%
    80%
    

    View Slide

74. I’m on a smartphone
    

    View Slide

75. View Slide

76. View Slide

77. Don’t make me login
    

    View Slide

78. View Slide

79. There is no filesystem
    

    View Slide

80. Text
    

    View Slide

81. Dynamic Type
    

    View Slide

82. View Slide

83. Animation
    

    View Slide

84. Animation should be subtle
    

    View Slide

85. Motion & Physics
    

    View Slide

86. Avoid Settings
    

    View Slide

87. View Slide

88. Branding
    

    View Slide

89. View Slide

90. View Slide

91. View Slide

92. Sound
    

    View Slide

93. View Slide

94. Controls
    

    View Slide

95. Buttons
    

    View Slide

96. Embrace borderless buttons
    

    View Slide

97. Embrace borderless buttons
    

    View Slide

98. But sometimes borders are okay
    

    View Slide

99. But sometimes borders are okay
    

    View Slide

100. View Slide

101. Text vs ‗︎
     

     View Slide

102. View Slide

103. < Back
     

     View Slide

104. Tab Bars
     

     View Slide

105. Popovers
     

     View Slide

106. Alerts
     

     View Slide

107. View Slide

108. Avoid single-word titles
     Use fragments
     No message
     Avoid “your” & “my”
     

     View Slide

109. When the alert title... Use...
     Is a sentence fragment or a single
     sentence that is not a question
     Title-style capitalization and no
     ending punctuation
     Is a single sentence that is a question
     Sentence-style capitalization and an
     ending question mark
     Consists of two or more sentences
     Sentence-style capitalization and
     appropriate ending punctuation for
     each sentence
     

     View Slide

110. No title?
     No problem.
     

     View Slide

111. View Slide

112. Text Fields
     

     View Slide

113. The API is there to help you
     

     View Slide

114. Copy
     

     View Slide

115. Think like a newspaper editor.
     

     View Slide

116. Errors
     

     View Slide

117. View Slide

118. View Slide

119. Ads
     

     View Slide

120. View Slide

121. Notifications42
     

     View Slide

122. View Slide

123. View Slide

124. In-App Purchase
     

     View Slide

125. View Slide

126. G E S T U R E S
     A R E
     K E Y B O A R D
     S H O R T C U T S
     

     View Slide

127. UI Review
     

     View Slide

128. Not just for  nerds
     

     View Slide

129. View Slide

130. View Slide

131. View Slide

132. Other Resources
     

     View Slide

133. Design is in the details
     

     View Slide

134. Rules
     

     View Slide

135. Thank You
     

     View Slide

136. matthewbischoff.com/rtfm
     

     View Slide