Mobile UI

Device Characteristics

  • Mobile form factor
    • Limited screen space
    • Varying aspect ratios

Limited Resources

  • Memory
  • Processing power

  • Battery life

  • Intensive tasks need to be done offline/preprocessed

  • Single application model

    • One app in the foreground, others suspended (or some running in the background)
  • Responsiveness

Capacitive Touch Screen Technology

  • Finger changes material capacitance
Surface Capacitance
  • Voltage applied to conductive material creates electrostatic field

  • A finger touch creates a capacitor

    • Measure capacitance at four corners to localize touch

  • Touch screens uses Projective Capacitive (PCT, PCAP)

    • X-Y grid of thin wires or electrodes, a capacitor at each intersection
    • Measures effective capacitance at each point

Touching sensing accuracy - estimates for touch input and pressure is very noisy

Human accuracy
  • Touch targets need to be large since human fingers are big
    • Apple: 15mm
    • Microsoft: 9mm (min 7mm; min spacing 2mm)
    • Nokia: 10mm (min 7mm, min spacing 1mm)
  • Can varie by position ang grip

No Hover State in Touch

  • In mouse inputs, there is a middle "tracking" input state allows for hover
    • Users can preview action before commiting
    • Has three states
  • Touch input supports only two states

Multi-touch Dispatch

  • Multiple fingers may hit a control simultaneously
Generating a touch event
  • "Click" event generated for buttons only when the last contact is lifted from the control
  • "Click" events generated every time a user taps a button, even if another finger is holding down
  • over-capture - multi-touch controls captured by more than 1 contact simultaneously
    • e.g. selecting the thumb of a slider with two fingers can mean that it will not track directly under a single finger when moved

Physical Constraints

  • Relies on the principle of direct manipulation
    • The object needs to change its position, orientation and size to maintain contact points to the user's finger
  • Direct touch breaks when movement contraints are reached
    • e.g. scrolling past limits
    • Can use elastic effects (e.g. scrolling past a list in iOS)

Interaction

  • One app at a time (in the foreground)
  • Most apps are suspended when not in the foreground
  • Each app has window that fills the entire screen
    • Interaction is a sequence of different screens
    • Consistent navigation is key

Creative Vision (Circa 2013)

Enchant Me

  • Beautiful surface
  • Animation
  • Well-timed sound effects
  • Directly touch and manipulate objects in your app
    • Reduces cognitive effort

Simplify My Life

  • Intuitive designs for core features
    • Make places in app look distinct
    • Make apps with distinct features look distinct
  • Removing ongoing chores (file management and syncing)

Making Me Amazing

  • Empower people to try new things
    • Combine applications into new workflows
  • App should feel personal
  • Be gentle when prompting users
    • Give clear recovery instructions if something goes wrong
    • Even better if you can fix the error behind the scenes
  • Make important actions fast
    • e.g. shutter button in a camera, pause button in music player

results matching ""

    No results matching ""