1. COMS E6125 WHIM Prof. Gail Kaiser Presented by Shuai Yue (sy2342)

2. Structure Background Introduction Four Mobile User Interface Design Patterns Conclusion 2Mobile Web Pages and Applications User Interface Design

3. Introduction Figure 1. The evolution of cell phones from 1985 to present [1] Compare the size of cell phones & the size of screens 3Mobile Web Pages and Applications User Interface Design

4. Introduction Generally speaking… The size of cell phone is getting smaller and smaller The size of screen is getting larger and larger Why? Rapid development of wireless networks Surf the internet and use web applications via mobile devices → BUT, complicated functionalities need larger screens 4Mobile Web Pages and Applications User Interface Design

5. Introduction Are the phone screens large enough? …Not really! Most web pages and applications for PCs & laptops. The cell phone screen is still too small! Limited screen size has made some operations difficult and user-unfriendly. Question for designers: How to deal with small screen? 5Mobile Web Pages and Applications User Interface Design

6. Mobile User Interface Design Patterns Software keyboard Landscape viewing Scrolling Zooming 6Mobile Web Pages and Applications User Interface Design

7. Mobile User Interface Design Patterns Software keyboard Landscape viewing Scrolling Zooming 7Mobile Web Pages and Applications User Interface Design

8. Mobile User Interface Design Patterns How does software keyboard occur? 1. To enlarge screen, need to eliminate physical keyboard. 2. One approach: Add another hidden keyboard layer (slider keyboard)? OK! But, it increases the thickness of the mobile phone 3. Smarter approach : Add a virtual software keyboard on the screen 8Mobile Web Pages and Applications User Interface Design

9. Mobile User Interface Design Patterns Figure 2. Three sample software keyboards [2][3] 9Mobile Web Pages and Applications User Interface Design

10. Mobile User Interface Design Patterns Advantages of software keyboard 1. Maximize the screen 2. Switch between normal qwerty keyboard, number keyboard and symbol keyboard conveniently 3. Could add more features on the software keyboard Disadvantages of software keyboard 1. lacks the haptical feedback when pressing the keys 2. Typo could happen because the keys are crowded among each others ← Enlarge key when tapped 10Mobile Web Pages and Applications User Interface Design

11. Mobile User Interface Design Patterns Soft keyboard Landscape viewing Scrolling Zooming 11Mobile Web Pages and Applications User Interface Design

12. Mobile User Interface Design Patterns How does landscape viewing occur? 1. Most screens of mobile phones are portrait 2. The height is much larger than the width 3. Why not rotate the screen to have a broader view? 12Mobile Web Pages and Applications User Interface Design

13. Mobile User Interface Design Patterns 13Mobile Web Pages and Applications User Interface Design Figure 3. Landscape viewing [4]

14. Mobile User Interface Design Patterns Advantages of landscape viewing 1. Make more room for the screen 2. Add more complex contents when rotating 3. Beneficial to software keyboard: the distance among the keys are larger, less typo 14Mobile Web Pages and Applications User Interface Design

15. Mobile User Interface Design Patterns Soft keyboard Landscape viewing Scrolling Zooming 15Mobile Web Pages and Applications User Interface Design

16. Mobile User Interface Design Patterns How to scroll on the small screen? 1. Scroll bars are so notorious in mobile phone interface design because they are so difficult to use, even with stylus (i.e., touch pen) 2. One approach: Enlarge the width of scroll bars but it sacrifices the space for other components 3. Smarter approach: Use fingers instead to swipe up and down, left and right (no more scroll bars) 16Mobile Web Pages and Applications User Interface Design

17. Mobile User Interface Design Patterns 17Mobile Web Pages and Applications User Interface Design Figure 4. Scrolling [2][3]

18. Mobile User Interface Design Patterns Soft keyboard Landscape viewing Scrolling Zooming 18Mobile Web Pages and Applications User Interface Design

19. Design Patterns for Mobile Phone Interface Why do we need zooming? 1. Some users are vision-challenged 2. Want to focus on a certain tiny part of a whole picture 3. The font size on a web page is too small to see clearly, etc. 19Mobile Web Pages and Applications User Interface Design

20. Mobile User Interface Design Patterns 20Mobile Web Pages and Applications User Interface Design Figure 5. Zooming [4]

21. Mobile User Interface Design Patterns Zoom by clicking zooming buttons Finger zooming: two-finger pinching lets you zoom in or out on PDFs, images and maps The combination of zooming and scrolling operation can be very powerful for browsing pages of any size 21Mobile Web Pages and Applications User Interface Design

22. Conclusion Software keyboard Landscape viewing Scrolling Zooming → These four design patterns can enhance users’ interaction experience with small-screen mobile interface. 22Mobile Web Pages and Applications User Interface Design

23. References [1] Phone evolution. www.nachiketonline.com [2] Just another Mobile Monday. http://justanothermobilemonday.com [3] FreeWare Pocket PC. http://www.freewarepocketpc.net [4] iPhone. http://www.apple.com/iphone 23Mobile Web Pages and Applications User Interface Design

24. Questions? Thanks! 24Mobile Web Pages and Applications User Interface Design

25. Other Example: Facebook Mobile Mobile Web Pages and Applications User Interface Design25 Figure 7. Cutting