Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RTFM: Things You Missed in the HIG

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.

Matthew Bischoff

September 28, 2013
Tweet

More Decks by Matthew Bischoff

Other Decks in Design

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