1. Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces

2. UI Hall of Fame or Shame? Spring 20116.813/6.831 User Interface Design and Implementation2

3. Today’s Topics Design challenges in mobile UIs –specifically modern smartphones Design patterns & guidelines Implementation –Creating web UI for smartphones Spring 20116.813/6.831 User Interface Design and Implementation3

4. Desktop vs. Mobile Spring 20116.813/6.831 User Interface Design and Implementation4

5. Small Screen Spring 20116.813/6.831 User Interface Design and Implementation5

6. “Fat Finger” Spring 20116.813/6.831 User Interface Design and Implementation6

7. Text Input Spring 20116.813/6.831 User Interface Design and Implementation7

8. Context Spring 20116.813/6.831 User Interface Design and Implementation8

9. Other Issues in Mobile Power & battery life Network latency, bandwidth, inconsistency CPU speed Spring 20116.813/6.831 User Interface Design and Implementation9

10. Distinct Screens Spring 20116.813/6.831 User Interface Design and Implementation10

11. Scrolling Lists Spring 20116.813/6.831 User Interface Design and Implementation11

12. Finger-Sized Targets Spring 20116.813/6.831 User Interface Design and Implementation12

13. Minimize Text Input Spring 20116.813/6.831 User Interface Design and Implementation13

14. Simplify, Simplify, Simplify! Spring 20116.813/6.831 User Interface Design and Implementation14

15. Mobile Widgets Spring 20116.813/6.831 User Interface Design and Implementation15

16. Many Kinds of Menus Spring 20116.813/6.831 User Interface Design and Implementation16

17. Touch Gestures Spring 20116.813/6.831 User Interface Design and Implementation17

18. Web Development for iPhones 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 Spring 20116.813/6.831 User Interface Design and Implementation18

19. Summary Mobile UI design faces new challenges –small screens –fat fingers –poor text entry Simplify –Follow design patterns –Use touch gestures where possible Spring 20116.813/6.831 User Interface Design and Implementation19