RTFM: Things You Missed in the HIG

23ad4e437c3ece1b7a04696321036c30?s=47 Matthew Bischoff
September 28, 2013

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.

23ad4e437c3ece1b7a04696321036c30?s=128

Matthew Bischoff

September 28, 2013
Tweet

Transcript

  1. Rules

  2. None
  3. None
  4. None
  5. None
  6. SHOE SLIDE

  7. None
  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.
  9. RTFM things you missed in the HIG

  10. @mb

  11. matthew bischoff

  12. matt

  13. None
  14. Velocity Quotebook

  15. None
  16. None
  17. None
  18. Guidelines

  19. “But the HIG says…”

  20. Being an iOS developer without reading the HIG is like

    being a priest without reading the bible.
  21. Why?

  22. None
  23. Arguments

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

  25. 0 1.75 3.5 5.25 7 2000 2001 2002 2003 2004

    2005 2006 2008 2009 2010 2011 2012 2013 Mac iOS
  26. 49,642 words

  27. typing speaking reading presenting 14 hours 6 hours 3 hours

    50 minutes ?
  28. Vocabulary

  29. Taps ≠ Clicks Screens ≠ Pages Customers ≠ Uniques Buttons

    ≠ Links Interface Builder ≠ CSS Apps ≠ Websites
  30. App Definition Statement

  31. An app definition statement is a concise, concrete declaration of

    an app’s main purpose and its intended audience.
  32. Examples

  33. Mail.app

  34. Mail on iPhone is designed to help mobile users handle

    their email while they’re standing in line or walking to a meeting.
  35. Mail on iPad is efficient enough for people to use

    on the go, but its rich experience also encourages more in- depth use.
  36. It’s a free, fun, and simple way to make and

    share gorgeous photos on your iPhone.
  37. A new way to fund and follow creative projects from

    your iPhone.
  38. A social magazine that lets people discover and share content

    in beautiful, simple, and meaningful ways.
  39. Powerful collaboration, review, and code management for open source and

    private development projects.
  40. Lightning fast translation without an Internet connection.

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

    reading later.
  42. An app that shows students what they need to score

    on their next exam.
  43. A simple way to journal for people who want to

    write and recall more information about their lives.
  44. The best way to read news for people who rely

    on their phone as the primary source of news.
  45. Basil is a single place for your favorite recipes and

    makes it easier to cook them.
  46. Paper is where ideas begin.

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

    Mac, and the web.
  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
  49. None
  50. None
  51. None
  52. None
  53. None
  54. Deference, Clarity, & Depth

  55. Deference

  56. Clarity

  57. Depth

  58. Layers

  59. None
  60. Blur

  61. Start

  62. Start instantly

  63. Launch Images

  64. None
  65. None
  66. Dare to be boring

  67. “If you think that following these guidelines will result in

    a plain, boring launch image, you’re right.”
  68. “Onboarding”

  69. None
  70. None
  71. Your tutorial screen is just a list of ways you’ve

    failed.
  72. Don’t make me type

  73. 20% 80%

  74. I’m on a smartphone

  75. None
  76. None
  77. Don’t make me login

  78. None
  79. There is no filesystem

  80. Text

  81. Dynamic Type

  82. None
  83. Animation

  84. Animation should be subtle

  85. Motion & Physics

  86. Avoid Settings

  87. None
  88. Branding

  89. None
  90. None
  91. None
  92. Sound

  93. None
  94. Controls

  95. Buttons

  96. Embrace borderless buttons

  97. Embrace borderless buttons

  98. But sometimes borders are okay

  99. But sometimes borders are okay

  100. None
  101. Text vs ‗︎

  102. None
  103. < Back

  104. Tab Bars

  105. Popovers

  106. Alerts

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

    “my”
  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
  110. No title? No problem.

  111. None
  112. Text Fields

  113. The API is there to help you

  114. Copy

  115. Think like a newspaper editor.

  116. Errors

  117. None
  118. None
  119. Ads

  120. None
  121. Notifications42

  122. None
  123. None
  124. In-App Purchase

  125. None
  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
  127. UI Review

  128. Not just for  nerds

  129. None
  130. None
  131. None
  132. Other Resources

  133. Design is in the details

  134. Rules

  135. Thank You

  136. matthewbischoff.com/rtfm