Week 2: Mobile User Interfaces

Objectives Review of User Interface Design Mobile specific design challenges in mobile UIs –specifically modern smartphones Mobile specific design patterns & guidelines Choosing Styles Implementation –Creating web UI for smartphones

Mobile User Interfaces – User Centric Design The aim of this chapter is to sensitise cordova mobile developers to key issues underlying the design rather than the implementation of user interfaces User-centred design is an approach to UI design where the needs of the user are paramount and where the user is involved in the design process

UI design review A good user interface should –Show only relevant data –Show only the most important controls directly on the interface –Make controls easy to distinguish and interpret find use –Make controls predictable consistent – within the application & with desktop apps –Use standard controls (e.g. Soft Input Panel) –Leave space between controls to avoid accidental selections

UI design principles review

Error messages Error message design is critically important. Poor error messages can mean that a user rejects rather than accepts a system Messages should be polite, concise, consistent and constructive The background and experience of users should be the determining factor in message design

How Mobile is Different Content prioritization Platform UX interactions, tapable vs. clickable K.I.S.S. user fewer graphics and text with mobile Contextual rather than global navigation Integration with phone functions Situation based, ‘Mobile is mobile’, user Mindset

User Experience for a Smaller Screen Content prioritization Platform UX interactions, tapable vs. clickable K.I.S.S. user fewer graphics and text with mobile Contextual rather than global navigation Integration with phone functions Situation based, ‘Mobile is mobile’, user Mindset

“Fat Finger”

Text Input

Context

Other Issues in Mobile Power & battery life Network latency, bandwidth, inconsistency CPU speed

UI Design for Apps Goal Driven Design High Usability Affordance & Signifiers, Familiar Patterns Feedback & Response Time – Fast Processing, UI

UI Design for Apps (Continued) Orientation detection –orientationchange Mouse hover events behave differently –mousemove, mouseover, mouseout –mousedown, mouseup, click sent all at once on touch release Multitouch events –touchstart, touchmove, touchend, touchcancel jQuery UI support –jQTouch plugin

Styles Skeuomorphism vs flat design.

Distinct Screens

Scrolling Lists

Finger-Sized Targets

Minimize Text Input

Simplify, Simplify, Simplify!

Mobile Widgets

Many Kinds of Menus

Touch Gestures

Summary Mobile UI design faces new challenges –small screens –fat fingers –poor text entry Simplify –Follow design patterns –Use touch gestures where possible