Designing for iOS and Android May 30th, 2014

iOS Notes

From Apple’s iOS Human Interface Guidelines)…

  • Defer to content
    • Take advantage of the whole screen
    • Reconsider visual indicators of physicality and realism
    • Let translucent UI elements hint at the content behind them
  • Provide clarity
    • Use plenty of negative space
    • Let color simplify the UI
    • Ensure legibility by using the system fonts
    • Embrace borderless buttons
  • Use Depth to Communicate
    • Enhanced transitions to give users a sense of hierarchy and depth
  • iOS App Anatomy
    • Four main categories: bars, content views, controls, and temporary views
  • UIKit defines UI objects and objects that implement functionality, such as gesture recognition, drawing, accessibility, and printing support
  • A UI element is considered to be a type of view
  • To manage a set or hierarchy of views in your app, you typically use a view controller
  • A screen generally corresponds to a distinct visual state or mode
  • Start instantly with useful content (avoid splash screens) because people spend no more than a minute or two evaluating a new app
  • Avoid asking people to supply setup information
  • Delay a login requirement for as long as possible
  • Think carefully before providing an onboarding experience
  • In general, launch in the device’s default orientation. On iPhone, the default orientation is portrait; on iPad, it’s the current device orientation. If your app runs only in landscape orientation, you should always launch in landscape and let users rotate the device if necessary
  • Supply a launch image that closely resembles the first screen of the app
  • When your app restarts, restore its state so users can continue where they left off
  • Save user data as soon as possible and as often as reasonable
  • Save the current state when stopping at the finest level of detail possible
  • Never quit an iOS app programmatically. People tend to interpret this as a crash.
    • If all app features are unavailable, display a screen that describes the situation and suggests a correction
    • If only some app features are unavailable, display either a screen or an alert when people try to use the feature
  • Layout
    • Make it easy for people to interact with content and controls by giving each interactive element ample spacing. Give tappable controls a hit target of about 44 x 44 points.
    • Be prepared for changes in text size. Users expect most apps to respond appropriately when they choose a different text size in Settings.
  • Users should always know where they are in your app and how to get to their next destination
  • Users Know the Standard Gestures
    • Tap, drag, flick, swipe, double tap, pinch, touch and hold, and shake
  • As much as possible, integrate status and other relevant feedback information into your UI
  • Make it easy for users to make choices. For example, you can use a picker or a table view instead of a text field, because most people find it easier to select an item from a list than to type words.
  • Don’t take space away from the content people care about
  • Resist the temptation to display your logo throughout the app
  • In general, use a single font throughout your app
  • Every app needs a beautiful app icon. It’s not unusual for people to base their initial opinions about your app’s quality, purpose, and reliability solely on the look of your app icon.
  • It’s a good idea to use the built-in icons as much as possible because users already know what they mean.
  • Support the Retina display. Make sure that you supply @2x assets for all artwork and graphics in your app.

Android Notes

  • Metrics & grids
  • Iconography
  • As you build your app for Android, don’t carry over themed UI elements from other platforms and don’t mimic their specific behaviors