1. Week 2: Mobile User Interfaces

2. 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

3. 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

4. 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

5. UI design principles review

6. 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

7. 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

8. 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

9. “Fat Finger”

10. Text Input

11. Context

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

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

14. 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

15. Styles Skeuomorphism vs flat design.

16. Distinct Screens

17. Scrolling Lists

18. Finger-Sized Targets

19. Minimize Text Input

20. Simplify, Simplify, Simplify!

21. Mobile Widgets

22. Many Kinds of Menus

23. Touch Gestures

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