Mobile Design Principles – Topic 3a
Concept of Mobility
• Mobility goes beyond hardware & communication – it must encompass software implementation and the overall user‐experience.
• Key sub-concepts
• Mobilising the application (designing for mobility)
• The Carry Principle (users carry the device everywhere, all the time)
• A mobile app is not a shrunken desktop / web app. Treating it as a subset is called miniaturisation; treating it as a unique context is mobilisation.
• Users live a ‘mobile lifestyle’ – they want content & entertainment that move with them (Ken Olewiler quote: “Life is mobile!”).
Mobilising vs Miniaturising
• Miniaturisation = simply shrinking a web/desktop UI to fit the small screen without factoring in mobile characteristics.
• Ignores mobile-specific context (multitouch, one-hand use, sensors…).
• Carries over desktop/web drawbacks plus mobile weaknesses.
• Example: AirAsia mobile site that forces long forms / tiny tap targets.
• Mobilisation = redesigning around mobile user needs & capabilities.
• Leverages sensors: camera, GPS, accelerometer, etc.
• Adapts to single-window UI, thumb reach, intermittent connectivity.
• AirAsia mobilised screen: tabs for One-way / Round-trip, bottom-fixed button within thumb’s reach, auto-detect destination, QR scan for check-in, nearest-airport suggestions.
• Snacking vs meal metaphor: mobile use sessions are short (“snacks”), so screens must be concise.
• Practical tips to avoid miniaturisation
• Infer data automatically: GPS → Country/State, phone settings → Language, social login → e-mail.
• Split long forms into multiple short screens; show inline hints.
• Detect profile data (username, photo) or calendar/location automatically.
• Quiz prompt (slide 29): pros & cons → see Advantages & Drawbacks section below.
The Carry Principle
• Definition (Ballard 2009): “The user typically carries the device everywhere, all the time.”
• Implications for device design
• Form-factor must be small & portable.
• Battery powered with built-in keyboard/touch screen.
• Features tightly integrated on one board (camera, radios, sensors…).
• UI is single-window; content folds/slides to conserve space.
• Implications for software
• Must assume random usage contexts (bus, queue, low light, slow network…).
• Must support glanceable interactions (< typical).
Native vs Web vs Hybrid Applications
• Native App
• Written with platform SDK (Swift/Obj-C for iOS, Kotlin/Java for Android, C#/XAML for Windows).
• Installed via an app-store; can work offline; full access to hardware APIs.
• Steeper learning curve; larger budget per platform.
• Mobile Web App
• Runs in browser; built with HTML, CSS, JS; served over HTTP.
• Cheapest & quickest; uses open W3C standards; depends on live connection.
• Limited sensor access; UI may lack native feel; performance tied to browser.
• Hybrid / Cross-platform App
• Source code in web tech but bundled in a native container.
• Can call native APIs via plug-ins (Cordova/PhoneGap, Ionic, React Native, Flutter).
• One code-base → multiple binaries; cheaper maintenance; possible UI/performance trade-offs.
• Structural comparison
• Native: code runs directly on OS.
• Web: code runs in browser sandbox.
• Hybrid: HTML/JS runs inside a native WebView; plug-ins bridge to OS.
• Key decision factors
• Speed to market, team skills, need for offline access, performance, monetisation, app-store presence.
• When launching on a new, small-audience platform → web app may suffice as a ‘fallback’. Facebook example.
• Summary matrix (from slides)
• \text{Speed: }\text{Web} < \text{Hybrid} < \text{Native} (Native fastest) • \text{Development cost: }\text{Native}>\text{Hybrid}>\text{Web}
• App-store approval not required for pure web; mandatory for native; sometimes for hybrid.
Advantages & Drawbacks
• Web App – Advantages
• Portable (any device w/ browser), open standards, cheap, centralised updates.
• Web App – Drawbacks
• Needs constant data, limited sensors, slower graphics, no app-store revenue unless wrapped.
• Native App – Advantages
• Richest experience, top performance, full hardware use, offline mode, stronger security, marketing via stores.
• Native App – Drawbacks
• Separate code per platform, higher cost/time, store approval delays.
• Hybrid App – Advantages
• One code-base, faster initial release, moderate access to hardware via plug-ins, cheaper.
• Hybrid App – Drawbacks
• UI may not feel native, performance slower, dependent on plug-ins & WebView, tooling still maturing.
Mobile UI Design Principles
• Always be user-centric; no room for confusion.
• 1 primary action per screen – clear screens > 1 cluttered screen.
• Uber example: auto-detect location, only ask for pickup.
• Navigation must be coherent, consistent, & show current location.
• Design finger-friendly tap targets; edges visible on touch.
• Ensure text ≥ for legibility; account for small screens.
• Use colour & contrast to make elements visible; WCAG contrast ratios apply.
• Minimise typing – short forms, auto-complete, default values.
UI Design Patterns
• A pattern = documented solution to a recurrent design problem → becomes a user expectation.
• Violating common patterns jars the user and increases cognitive load.
• Common pattern groups discussed:
• Screen layout (List, Grid)
• Navigation (Tabs, ViewPager, Navigation Drawer, Dropdown Spinner)
Screen Design Layouts
List-based Layout
• Default for large datasets; matches vertical orientation; efficient scrolling.
• Users can scan at a glance; minimal horizontal movement.
• Examples: call logs, recipe lists, news feeds.
Grid-based Layout
• Best when items are image/icon centric (photos, album art, app launchers).
• Can scroll horizontally or vertically.
• Images attract attention & convey meaning quickly.
• Ex: Flipboard topic grid, music album grid, Google Play store tiles.
• Scenario preference: a photo gallery or catalogue where visuals carry more information than titles.
Application Navigation Patterns
Tabs
• Let users switch between peer views quickly without deep navigation.
• Fixed or scrollable; can categorise data or modes.
ViewPager (Horizontal Swipe Pager)
• Full-screen panels switched by swipe; indicators (dots) show position.
• Common for onboarding walkthroughs, image carousels, day/week views.
Navigation Drawer
• Hidden left panel revealed by edge swipe or hamburger icon.
• Saves screen real-estate; acts as global app menu; avoids repeated ‘Back’ presses.
• Advantages: non-intrusive, scalable menu list, quick context switch.
Dropdown / Spinner (Action-bar based)
• Small toolbar area; good when switching content is needed but not constant.
• Keeps anchor point visible; popular in calendars (month chooser) & mapping apps (search category switch).
Tips Summary – Mobilise Your Forms
• Use device sensors / OS profile to pre-fill fields (GPS, language, social login).
• Break long forms into short wizard-like screens; show progress; give field hints.
• Persist previously entered data; leverage calendar/location for suggestions.
Review & Exercise Prompts (from slides)
• Compare Miniaturising vs Mobilising; list 2 advantages of mobilising.
• Explain Native, Web, Hybrid; cite when web is advantageous.
• Advantages of Navigation Drawer; pros/cons of dropdown; compare Tabs vs ViewPager.
• Re-state The Carry Principle; define Concept of Mobility.