Designing Interaction for Mobile Applications – Topic 5 Comprehensive Notes

Learning Outcomes

  • After completing Topic 5 students should be able to explain and discuss:

    • Screen interface structures

    • Screen-based visual feedback techniques

    • Gesture / haptic feedback principles

    • Role of on-board sensors in interaction design

Screen Interface

  • Mobile UIs normally combine three high-level regions

    • App Bar (a.k.a. Toolbar / Action Bar)

    • System / Status Bar

    • Navigation Bar (soft-keys or physical keys)

  • Secondary navigational containers

    • Menus (overflow, contextual, popup)

    • Navigation Drawer / Side Navigation

App Bar

  • Multifunctional toolbar used for branding, navigation, search and actions

  • Contains four typical sub-areas

    • Navigation Icon (hamburger ☰, back "⬅", up "↑") – left aligned

    • Title – centered or left aligned, reflects current page or app name

    • Action Icons – right aligned, represent frequent actions (share, search, etc.)

    • Overflow Menu – three-dot icon, exposes secondary/less-used actions

  • Default heights

    • 56 dp56\,\text{dp} (phone portrait)

    • 48 dp48\,\text{dp} (phone landscape)

    • 64 dp64\,\text{dp} (tablet)

  • Layout metrics (margins, icon touch-targets) follow multiples of 8 dp8\,\text{dp} grid

  • Menu guidelines

    • Place high-frequency items as dedicated icons

    • Place rare / contextual items in overflow

System Bar / Status Bar

  • Sits at very top; shows notification icons (left) and system icons (right: battery, signal, time)

  • Iconography must be monochrome; provide dark & light variants for contrast

  • Color strategies

    • Dark status bar: darker tint of App Bar color

    • Light status bar: light grey #E0E0E0 or sampled from content with dark icons

    • Translucent modes: 20 %–70 % opacity overlays to reveal underlying content

Navigation Bar (Android)

  • Default soft-key set: Back ◁ Home ○ Recents □

  • Variants

    • Dark, Light, Translucent (over media or complex imagery)

    • May be omitted or replaced by hardware buttons (e.g., Samsung)

  • On-screen vs. Physical buttons

    • On-screen pros: immersive, aesthetically minimal, gesture-ready, future-proof

    • On-screen cons: consume pixels, add interaction steps

    • Physical pros: tactile, constantly available, zero screen cost

    • Physical cons: fixed, slower to evolve, added hardware complexity

Navigation Drawer / Side Navigation

  • Sliding panel from left edge (edge swipe or hamburger tap)

  • Houses user-specific destinations: inboxes, labels, drive folders, etc.

  • Can double as account switcher (avatar + email on header)

  • UI conventions

    • Optional dividers to separate logical groups

    • “Settings & Support” lives at bottom of scrollable list

Screen Feedback

Mobile apps must reassure users that actions were registered & processes are running.

Dialogs

  • Modal surfaces demanding explicit decision or presenting multi-step mini-flows

  • Very interruptive → use sparingly (high-risk, destructive, expensive actions)

  • Anatomy: Title (optional), Content (concise), Action Buttons (Dismissive left, Affirmative right)

  • DON’T

    • Open another dialog on top

    • Embed vertical scrolling content

  • Alert Dialog: emergency subset; blocks until user acknowledges; usually title-less

Progress Indicators

  • Purpose: convey that work is happening & approximate duration

  • Styles

    • Linear (horizontal bar)

    • Circular (spinner)

  • Modes

    • Determinate – measurable: goes from 0 to 100%0 \text{ to } 100\% or specific units

    • Indeterminate – unknown duration: looping animation until completion

    • Variants: Buffer, Query (mixture of determinate + indeterminate)

Snackbars & Toasts

  • Snackbar (Material Design)

    • Non-modal strip appearing from bottom, auto-dismisses

    • One-line message + optional SINGLE text action (e.g., UNDO)

    • Swipe to dismiss manually

    • If >1 action needed → use Dialog instead

  • Toast (Android system)

    • System-level transient message, no actions, cannot be swiped away

Tooltips

  • Label bubbles on hover, focus, or long-press

  • Contain brief explanatory text, no rich media, cannot receive focus themselves

  • Display timing: show for 1.5 s1.5\,\text{s} after lift

  • Good for ambiguous icons; avoid decorative imagery or hint triangles

Gestures & Haptic Feedback

Gesture Detection Pipeline

  1. Capture stream of touch events (down, move, up)

  2. Recognize pattern → map to defined gesture (scroll, pinch, swipe, etc.)

Scrolling (Panning)

  • Moves viewport in xx and/or yy axes

  • Drag: finger remains on screen → position tracks finger

  • Fling: quick drag then lift → inertial scroll decelerates to stop

Scaling (Pinch-Zoom)

  • Two-finger gesture using thumb + index

    • Pinch-in: fingers move closer → zoom-out (reduce scale)

    • Pinch-out: fingers spread apart → zoom-in (increase scale)

Swiping

  • Quick horizontal (occasionally vertical) finger slide then lift

  • Main uses

    • Paging between views (ViewPager carousel, master ↔ detail)

    • Dismissing items (e.g., archive email, remove chip)

Haptic Feedback

  • Uses vibration motor to simulate tactile confirmation

    • Key-press tick, long-press acknowledgement, gesture edge-effects

  • Compensates for lack of physical keys; enhances accessibility & perceived responsiveness

Notification Light

  • Multi-color LED (white, green, red, blue, yellow) usually at device front

  • Blinks to indicate pending events even when screen is off (e.g., WhatsApp msg)

Sensors

Categories

  • Motion Sensors

    • Accelerometer, Gravity, Gyroscope, Step Counter / Pedometer

  • Position Sensors

    • Magnetometer, Orientation, Proximity, Compass

  • Environmental Sensors

    • Temperature, Light, Barometer (Air Pressure), Humidity

Hardware vs. Software Sensors

  • Hardware-based: physical silicon (e.g., MEMS accelerometer) directly measuring environment

  • Software-based (Virtual): algorithmic fusion of multiple hardware sensors (e.g., linear-acceleration, rotation-vector)

Key Sensors & Interaction Use-Cases

  • Accelerometer – detects linear acceleration → tilt steering in games, shake-to-refresh

  • Gyroscope – angular velocity → camera stabilization, VR orientation

  • Light Sensor – auto-brightness, white-balance adjustment

  • Proximity – turns screen off during calls to avoid cheek touches

  • Fingerprint Sensor – biometric auth for unlock & payments

  • Magnetometer – compass heading; combined with GPS for maps orientation

  • Pedometer (step counter) – fitness tracking apps (Google Fit, Asus Wellness)

Device Variability

  • Few phones ship with all sensors; presence & range differ

  • Devices can host multiple sensors of same type (e.g., dual gravity sensors with different dynamic ranges)

Practice / Exam Hints (based on exercise prompts)

  • Be prepared to list five screen interface structures & explain each (App Bar, Status Bar, Navigation Bar, Navigation Drawer, Menus)

  • Know four screen feedback modes (Dialogs, Progress Indicators, Snackbars/Toasts, Tooltips)

  • Definitions to memorize: Scaling, Haptic Feedback; be able to justify haptic usefulness

  • Recall three sensor categories; give at least one example sensor each

  • Differentiate Drag vs. Fling scrolling; illustrate Pinch-in vs. Pinch-out sketches

These notes consolidate all major & minor points from the lecture so you can revise without reopening the original 80-page slide deck.