1 / 19

L ecture 26: Mobile User Interfaces

L ecture 26: Mobile User Interfaces. UI Hall of Fame or Shame?. Today’s Topics. Design challenges in mobile UIs s pecifically modern smartphones Design patterns & guidelines Implementation Creating w eb UI for smartphones. Desktop vs. Mobile. Small Screen. “Fat Finger”. Text Input.

marli
Download Presentation

L ecture 26: Mobile User Interfaces

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lecture 26: Mobile User Interfaces 6.813/6.831 User Interface Design and Implementation

  2. UI Hall of Fame or Shame? 6.813/6.831 User Interface Design and Implementation

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

  4. Desktop vs. Mobile 6.813/6.831 User Interface Design and Implementation

  5. Small Screen 6.813/6.831 User Interface Design and Implementation

  6. “Fat Finger” 6.813/6.831 User Interface Design and Implementation

  7. Text Input 6.813/6.831 User Interface Design and Implementation

  8. Context 6.813/6.831 User Interface Design and Implementation

  9. Other Issues in Mobile • Power & battery life • Network latency, bandwidth, inconsistency • CPU speed 6.813/6.831 User Interface Design and Implementation

  10. Distinct Screens 6.813/6.831 User Interface Design and Implementation

  11. Scrolling Lists 6.813/6.831 User Interface Design and Implementation

  12. Finger-Sized Targets 6.813/6.831 User Interface Design and Implementation

  13. Minimize Text Input 6.813/6.831 User Interface Design and Implementation

  14. Simplify, Simplify, Simplify! 6.813/6.831 User Interface Design and Implementation

  15. Mobile Widgets 6.813/6.831 User Interface Design and Implementation

  16. Many Kinds of Menus 6.813/6.831 User Interface Design and Implementation

  17. Touch Gestures 6.813/6.831 User Interface Design and Implementation

  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 6.813/6.831 User Interface Design and Implementation

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

More Related