COMS E6125 WHIM Prof. Gail Kaiser Presented by Shuai Yue (sy2342)
-
date post
21-Dec-2015 -
Category
Documents
-
view
217 -
download
0
Transcript of COMS E6125 WHIM Prof. Gail Kaiser Presented by Shuai Yue (sy2342)
Mobile User Interface Design –– Dealing with the Screen
COMS E6125 WHIMProf. Gail Kaiser
Presented by Shuai Yue (sy2342)
2
Structure
Background IntroductionFour Mobile User Interface Design PatternsConclusion
Mobile 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
Mobile Web Pages and Applications User Interface Design
4
IntroductionGenerally 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 networksSurf the internet and use web applications via mobile
devices→ BUT, complicated functionalities need larger screens
Mobile Web Pages and Applications User Interface Design
5
IntroductionAre 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?
Mobile Web Pages and Applications User Interface Design
6
Mobile User Interface Design Patterns Software keyboard Landscape viewing Scrolling Zooming
Mobile Web Pages and Applications User Interface Design
7
Mobile User Interface Design Patterns Software keyboard Landscape viewing Scrolling Zooming
Mobile 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
Mobile Web Pages and Applications User Interface Design
9
Mobile User Interface Design Patterns
Figure 2. Three sample software keyboards [2][3]
Mobile Web Pages and Applications User Interface Design
10
Mobile User Interface Design Patterns Advantages of software keyboard1. Maximize the screen2. Switch between normal qwerty keyboard, number
keyboard and symbol keyboard conveniently3. Could add more features on the software keyboard
Disadvantages of software keyboard1. lacks the haptical feedback when pressing the keys2. Typo could happen because the keys are crowded among
each others ← Enlarge key when tappedMobile Web Pages and Applications User Interface Design
11
Mobile User Interface Design Patterns Soft keyboard Landscape viewing Scrolling Zooming
Mobile 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 portrait2. The height is much larger than the width3. Why not rotate the screen to have a broader view?
Mobile Web Pages and Applications User Interface Design
13
Mobile User Interface Design Patterns
Mobile 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 rotating3. Beneficial to software keyboard: the distance
among the keys are larger, less typo
Mobile Web Pages and Applications User Interface Design
15
Mobile User Interface Design Patterns Soft keyboard Landscape viewing Scrolling Zooming
Mobile 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)
Mobile Web Pages and Applications User Interface Design
17
Mobile User Interface Design Patterns
Mobile Web Pages and Applications User Interface Design
Figure 4. Scrolling [2][3]
18
Mobile User Interface Design Patterns Soft keyboard Landscape viewing Scrolling Zooming
Mobile 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
picture3. The font size on a web page is too small to see
clearly, etc.
Mobile Web Pages and Applications User Interface Design
20
Mobile User Interface Design Patterns
Mobile 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
Mobile Web Pages and Applications User Interface Design
22
Conclusion
Software keyboardLandscape viewingScrollingZooming
→ These four design patterns can enhance users’ interaction experience with small-screen mobile interface.
Mobile 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
Mobile Web Pages and Applications User Interface Design