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

24

Questions?

Thanks!

Mobile Web Pages and Applications User Interface Design

25

Other Example: Facebook Mobile

Mobile Web Pages and Applications User Interface Design

Figure 7. Cutting