human interface guidelines: for dummies
TRANSCRIPT
![Page 1: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/1.jpg)
Human Interface GuidelinesFor Dummies
Jeremy CurcioBaltimore Cocoa - 3/30/2015
![Page 2: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/2.jpg)
Who Am I?
Software Developer from Baltimore, Maryland
Works for Planit Advertising
Writing iOS Apps since 2008
Hockey Player
Pokémon Player
![Page 3: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/3.jpg)
What Will We Cover?
Dos and Don’ts of App Design
What Apple Expects
What Will Guarantee a Rejection Email
![Page 4: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/4.jpg)
![Page 5: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/5.jpg)
What Does Apple Expect?Your App should have three main focuses:
Deference
Quickly understand how to use the app
Clarity
Text is readable
Icons precise
Functionality dictates design
Depth
Layers
Motion
![Page 6: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/6.jpg)
![Page 7: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/7.jpg)
UIKit
Is. Your. Friend.
All UI elements
Nav Bars
Tab Bars
Alert Views
Buttons
Your App is viewed as a “Screen”
![Page 8: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/8.jpg)
Layout
Size classes
New to iOS8
Easily make an app for any screen size
Maintain focus
Put important elements to the top left
Keep layouts consistent
Touch areas should be minimum of 44px x 44px
![Page 9: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/9.jpg)
Navigation
Users should always know where they are
And how to change to last/next screen
Navigation Bars
Great for data driven apps
Tab Bars
Great for apps with multiple categories of content or functionality
Avoid multiple paths to same screen
![Page 10: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/10.jpg)
![Page 11: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/11.jpg)
Interactivity
Keep default touch actions
Tap: Select
Drag: Scroll
Swipe: Reveal hidden views
Double Tap/Pinch: Zoom
Touch and Hold: More information
Shake: Undo
![Page 12: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/12.jpg)
More Interactivity
Don’t make gestures only way to complete action
Have a button available
Avoid make complex gestures
Hard for people with disabilities
When in doubt, don’t invent a gesture
![Page 13: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/13.jpg)
Color
Use colors to signal interactivity
Add borders and backgrounds only when necessary
Be alert to color blindness
Avoid using pairs of common color blind colors together
Color should enhance
Don’t let color distract
![Page 14: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/14.jpg)
![Page 15: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/15.jpg)
Graphics
App Icon
Unique
Uncluttered
Viewable at many sizes
![Page 16: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/16.jpg)
GraphicsBar Icons
Apple provides many icons for common tasks
Plus for Add
Camera for Add Photo
Trashcan for Delete
Only use standard icons for intended purpose
Don’t repurpose icons
Create your own if nothing is available
Try using text over an icon
![Page 17: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/17.jpg)
Graphics
Build for Retina
2x and 3x
Don’t replicate:
Apple products
Apple trademarks
Apple App icons, screenshots
![Page 18: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/18.jpg)
Text
All text is creating a conversation with user
Tone is important
Friendly, but professional
Keep terminology your users will understand
Good: Medical terms in app aimed at doctors
Bad: Medical terms in app aimed at beginner exercisers
Be consistent
Each word matters - keep it short, but meaningful
![Page 19: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/19.jpg)
![Page 20: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/20.jpg)
iOS ElementsDon’t mix and match
Use elements from a single iOS version
Preferably latest available
Use same style throughout app
Don’t create custom elements for standard actions
Use what Apple provided when you can
Take advantage of iOS Technologies
Multitasking
VoiceOver
GameCenter
![Page 21: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/21.jpg)
Wrap-Up
Use Apple’s apps as guidance
Apple’s opinion is law
Keep it simple whenever possible
Apple provides plenty of icons, use them
![Page 22: Human Interface Guidelines: For Dummies](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a9f5261a28ab421c8b470d/html5/thumbnails/22.jpg)
Questions?Slides Available At jcurcio.com
Short-link to the HIG apple.co/1uk1nuV