iOS Human Interface Guidelines // Reading Notes

VISUAL DESIGN

Adaptivity and Layout

• auto layout auto readjusts layouts according to the specified constraints when certain environmental variations (known as traits) are detected
• size classes are traits that are auto assigned to content based on their size 
• ensure that primary content is clear at its default size
• maintain an overall consistent appearance throughout your app
• use visual weight and balance to convey importance 
• use alignment to ease scanning and to communicate organization and hierarchy 
• if possible, support both portrait and landscape orientations 
• be prepared for text size changes
• provide ample touch targets for interface elements (44×44 points)
• preview your app on multiple devices
• apply readability margins when displaying text on larger devices 
• maintain focus on the current content during context changes 
• avoid gratuitous layout changes 
• if it’s essential that your app run in a single orientation, support both variants 
• customize your app’s response to rotation according to context 
• be mindful of space ratio differences when reusing existing artwork
• extend visual elements to fill the screen
• avoid explicitly placing interactive controls at the very bottom of the screen and in the corners
• inset essential content to prevent clipping
• inset full width buttons
• don’t mask or call attention to key display features
• be mindful of the status bar hight 
• if your app currently hides the status bar, reconsider that decision for full screen iPhones
• allow auto hiding of the indicator for accessing the Home screen sparingly 

Animation

• use animation and motion effects judiciously 
• strive for realism and credibility 
• use consistent animation
• make animations optional 

Branding

• Incorporate refined, unobtrusive branding 
• don’t let branding get in the way of great app design
• defer to content over branding
• resist the temptation to display your logo throughout your app
• adhere to apple’s trademark guidelines

Color

• use color judiciously for communication 
• use complementary colors throughout your app 
• choose a limited color palette that coordinates with your app logo 
• consider choosing a key color to indicate interactivity throughout your app 
• avoid using the same color for interactive and non interactive elements 
• consider how artwork and translucency affect nearby colors 
• test your app’s color scheme under a variety of lighting conditions 
• consider how the true tone display affects color
• be aware of colorblindness 
• consider how your use of color might be perceived in other countries and cultures 
• use sufficient color contrast ratios 
• apply color profiles to your images
• use wide color to enhance the visual experience on compatible displays 
• provide color space-specific image and color variations when the experience calls for it 
• preview your app’s colors on actual sRGB and wide color displays 

Terminology 

• use familiar, understandable words and phrases
• keep interface text clear and concise 
• identify interactive elements appropriately
• avoid language that might sound patronizing
• strive for an informal, friendly tone
• be careful when using humor 
• use relevant and consistent language and imagery 
• refer to dates accurately 

Typography

• San Francisco is the system typeface iOS 
• emphasize important information 
• if possible use a single typeface
• use built in text styles whenever possible 
• make sure custom fonts are legible
• implement accessibility features for custom fonts 
• prioritize content when responding to text size changes
• use the correct font variant in interface mockups

Video

• full screen vs fit to screen viewing mode
• make sure custom video players behave as expected 
• always display video content as its original aspect ratio 

ICONS AND IMAGES 

Image Size and Resolution

• a standard resolution display has a 1:1 pixel density where one pixel is equal to one point 
• high res displays have a higher pixel density 
• supply high res images for all artwork in your app for all devices your app supports
• use an 8 by 8 px grid
• produce artwork in the appropriate format
• use the 8 bit color palette for PNG graphics that don’t require full 24 bit color 
• optimize jpeg files to find a balance between size and quality
• provide alternative text labels for images and icons

App Icon

• embrace simplicity
• provide a single focus point
• design a recognizable icon 
• keep the background simple and avoid transparency 
• use words only when they’re essential or part of a logo
• don’t include photos, screenshots, or interface elements
• don’t use replicas of apple’s hardware products 
• don’t place your app icon throughout the interface 
• test your icon against different wallpapers
• keep icon corners square (system applies a mask that rounds corners automatically)
• provide different sized icons for different decides
• mimic your small icon with your app store icon
• don’t add an overlay or border to your settings icon
• provide visually consistent alternate icons in all necessary sizes

Custom Icons

• create recognizable, highly simplified designs 
• design icons as glyphs 
• prepare glyphs with a scale factor of @2x and save them as PDFs
• keep your icons consistent 
• make sure icons are legible 
• use color to communicate selected and deflected states 
• avoid including text in an icon
• don’t use replicas of apple’s hardware products
• provide alternate text labels for icons 

Launch Screen

• design a launch screen that’s nearly identical to the first screen of your app
• avoid including text on your launch screen
• downplay launch 
• don’t advertise

System Icons

• use system icons as intended 
• provide alternative text labels for icons
• design a custom icon if you can’t find a system provided one that meets your needs

BARS

Navigation Bars

• consider temporally hiding the navigation bar when displaying full screen content
• consider showing the title of the current view in the navigation bar
• use a large title when you need to provide extra emphasis on context 
• avoid crowding a navigation bar with too many controls
• used the standard back button
• don’t include multisegment breadcrumb paths 
• give text titled buttons enough room
• consider using a segmented control in a navigation bar to flatten your app’s information hierarchy 

Search Bars

• use a search bar instead of a text field to implement search 
• enable the clear button 
• enable the cancel button when appropriate 
• if necessary, provide hints and context in a search bar
• consider providing helpful shortcuts and other content below a search bar 
• favor improving search results over including a scope bar

Status Bars

• use the system provided status bar
• coordinate the status bar style with your app design 
• obscure content under the status bar
• consider temporarily hiding the status bar when displaying full screen media
• avoid permanently hiding the status bar 
• use the status bar to denote network activity 

Tab Bars

• in general, use a tab bar to organize information at the app level (flatten hierarchy)
• use a tab bar strictly for navigation 
• avoid having too many tabs
• don’t remove or disable a tab when its function is unavailable 
• always switch contexts in the attached view
• make sure tab bar icons are visually consistent and balanced
• use badging to communicate unobtrusively

Toolbars

• provide relevant toolbar buttons
• consider whether icons or text titled buttons are right for your app
• avoid using a segmented control in a toolbar
• give text titled buttons enough room 

VIEWS

Action Sheets

• a specific style of alert that appears in response to a control or action, and presents a set of two or more choices related to the current context 
• provide a cancel button if it provides clarity 
• make destructive choices prominent
• avoid enabling scrolling in an action sheet 

Activity Views

• an activity is a task that’s useful in the current context 
• design simple template images to represent your custom activities 
• craft activity titles that succinctly describe your tasks
• make sure activities are appropriate for the current context
• use the action button to display an activity view 

Alerts

• minimize alerts
• test the appearance of alerts in both orientations 
• write short, descriptive, multiword alert titles
• if you must provide a message, write short, complete sentences 
• avoid sounding accusatory, judgmental, or insulting 
• avoid explaining the alert buttons
• generally, use two button alerts 
• give alert buttons succinct, logical titles
• place buttons where people expect them
• label cancellation buttons appropriately 
• identify destructive buttons
• allow people to cancel alerts by exiting to the home screen 

Collections

• avoid creating radical new designs when a standard row or grid layout is sufficient 
• consider using a table instead of a collection for text 
• use caution when making dynamic layout changes 

Image Views

• if possible, make sure all images in an animated sequence are consistently sized

Maps

• in general, keep your map interactive
• use expected pin colors 

Pages

• if appropriate, implement a way to navigate nonlinearly 

Popovers

• most appropriate on larger screens
• avoid displaying popovers on iPhones
• use a close button for confirmation and guidance only 
• always save work when automatically closing a nonmodal popover 
• position popovers appropriately onscreen
• show one popover at a time
• don’t show another view over a popover
• when possible, let users close one popover and open another with a single tap
• avoid making a popover too big
• make sure custom popovers look like popovers
• provide a smooth transition when changing the size of a popover

Scroll Views

• support zoo behavior appropriately
• consider showing a page control element when a school view is in paging mode 
• don’t place a scroll view inside of another scroll view 
• in general, display one scroll view at a time

Split Views

• choose a split view layout that works well with your content
• persistently highly the active selection in the primary pane
• in general, restrict navigation to one side of a split view
• provide multiple ways to access a hidden primary pane 

Tables

• plain vs grouped
• think about table width 
• begin showing table content quickly
• communicate progress as content loads
• keep content fresh
• avoid combining an index with table rows containing right aligned elements
• basic vs. subtitle table rows
• right detail vs. left detail
• keep text succinct to avoid clipping
• consider using a custom title for a delete button
• provide feedback when a selection is made
• design a custom table cell style for nonstandard table rows 

Text Views

• keep text legible
• show the appropriate keyboard type 

Web Views 

• enable back and forth navigation when appropriate 
• avoid using a web view to build a web browser