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. 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 full-size slide

  2. RTFM
    things you missed in the HIG

    View full-size slide

  3. matthew bischoff

    View full-size slide

  4. Velocity
    Quotebook

    View full-size slide

  5. “But the HIG says…”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 49,642 words

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. App Definition Statement

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Lightning fast translation without
    an Internet connection.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Paper is where ideas begin.

    View full-size slide

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

    View full-size slide

  28. 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 full-size slide

  29. Deference, Clarity, & Depth

    View full-size slide

  30. Start instantly

    View full-size slide

  31. Launch Images

    View full-size slide

  32. Dare to be boring

    View full-size slide

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

    View full-size slide

  34. “Onboarding”

    View full-size slide

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

    View full-size slide

  36. Don’t make me type

    View full-size slide

  37. I’m on a smartphone

    View full-size slide

  38. Don’t make me login

    View full-size slide

  39. There is no filesystem

    View full-size slide

  40. Dynamic Type

    View full-size slide

  41. Animation should be subtle

    View full-size slide

  42. Motion & Physics

    View full-size slide

  43. Avoid Settings

    View full-size slide

  44. Embrace borderless buttons

    View full-size slide

  45. Embrace borderless buttons

    View full-size slide

  46. But sometimes borders are okay

    View full-size slide

  47. But sometimes borders are okay

    View full-size slide

  48. Text vs ‗︎

    View full-size slide

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

    View full-size slide

  50. 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 full-size slide

  51. No title?
    No problem.

    View full-size slide

  52. The API is there to help you

    View full-size slide

  53. Think like a newspaper editor.

    View full-size slide

  54. Notifications42

    View full-size slide

  55. In-App Purchase

    View full-size slide

  56. 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 full-size slide

  57. Not just for  nerds

    View full-size slide

  58. Other Resources

    View full-size slide

  59. Design is in the details

    View full-size slide

  60. matthewbischoff.com/rtfm

    View full-size slide