Lecture Four: Understanding the Device

Lecture notes on the week 4 lecture pod.



  • To understand the smartphone, one must use it.
  • In order, to design for each phone experience, you need to need to know how each platform works:
    • unique user interaction
    • interface elements
    • terminology
    • device characteristics

Behaviours and Gestures of iOS

  • The iPhone welcome screen is the first thing users will encounter
  • The ‘5 second learn’ grasps the user’s attention and becomes aware of the iOS gestures:
    • screen is touch
    • user interface elements are touch
    • use touch and swipe to engage the user interface elements
    • hardware buttons are secondary to the touch
  • Common gestures:
    • Tap: building block to the iOS platform. Pressure of the finger comes into contact with the screen. Engages the user by using a 44×44 active area around the button. The pressure sensitive screen allows for people to use as lightly or as forcefully as needed.
    • Drag: using the touch gesture to scroll or move an onscreen element e.g. an app icon.
    • Flick: both a touch and movement of finger. Quick and less directed movement,
    • Swipe: using larger contact area for directing onscreen movement, access menus, navigation trays/touch-heavy interface elements, slower/controlled interactions.
    • Pinch: uses finger interaction to zoom in/out of an application. Based on two gestures; open = zoom in/close = zoom out.
    • Shake: uses phones accelerometer to activate a user interface action.

UI – iOS Anatomy

  • Bars: contain contextual information that informs us their location, navigation/initiate actions.
  • Content views: app specific content that can enable behaviour such as scrolling, incersion and rearrangement of items.
  • Controls: perform actions or display information.
  • Temporary views: appear briefly to give you important information or additional functions.
  • Key-board: specify which keyboard you want, e-mail, default or URL.
  • Pickers and Date Pickers: combination of various inputs in 1 spinner.
  • Inputs: slide and the switch; used to create interactive messages.
  • Tab-bar: facebook, common in all apps.
  • Navigation Bar: plays a critical role; centre = title of the content, right = action buttons, left = used to go back.
  • Tool-bar: acts as a general place holder for icon/text. The goal is to support the current page with secondary navigation, e.g. safari – bookmarks
  • Action Menu: access to secondary action or navigation.