spring 20116.813/6.831 user interface design and implementation1 lecture 26: mobile user interfaces
TRANSCRIPT
![Page 1: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/1.jpg)
Spring 2011 6.813/6.831 User Interface Design and Implementation 1
Lecture 26: Mobile User Interfaces
![Page 2: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/2.jpg)
UI Hall of Fame or Shame?
Spring 2011 6.813/6.831 User Interface Design and Implementation 2
![Page 3: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/3.jpg)
Today’s Topics
• Design challenges in mobile UIs– specifically modern smartphones
• Design patterns & guidelines• Implementation
– Creating web UI for smartphones
Spring 2011 6.813/6.831 User Interface Design and Implementation 3
![Page 4: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/4.jpg)
4
Desktop vs. Mobile
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 5: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/5.jpg)
5
Small Screen
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 6: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/6.jpg)
6
“Fat Finger”
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 7: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/7.jpg)
7
Text Input
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 8: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/8.jpg)
8
Context
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 9: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/9.jpg)
9
Other Issues in Mobile
• Power & battery life• Network latency, bandwidth, inconsistency• CPU speed
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 10: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/10.jpg)
10
Distinct Screens
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 11: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/11.jpg)
11
Scrolling Lists
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 12: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/12.jpg)
12
Finger-Sized Targets
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 13: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/13.jpg)
13
Minimize Text Input
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 14: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/14.jpg)
14
Simplify, Simplify, Simplify!
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 15: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/15.jpg)
15
Mobile Widgets
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 16: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/16.jpg)
16
Many Kinds of Menus
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 17: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/17.jpg)
17
Touch Gestures
Spring 2011 6.813/6.831 User Interface Design and Implementation
![Page 18: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/18.jpg)
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 2011 6.813/6.831 User Interface Design and Implementation
![Page 19: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 26: Mobile User Interfaces](https://reader036.vdocuments.us/reader036/viewer/2022062421/56649dcf5503460f94ac3661/html5/thumbnails/19.jpg)
Summary
• Mobile UI design faces new challenges– small screens– fat fingers– poor text entry
• Simplify– Follow design patterns– Use touch gestures where possible
Spring 2011 6.813/6.831 User Interface Design and Implementation 19