Cooper Part III
Interaction Details
Designing for Mobile Devices
Jeff Offutt
http://www.cs.gmu.edu/~offutt/
SWE 632
User Interface Design and Development
Cooper Ed4, Ch 19
Pre-2007 Mobile Devices
• Keyboards optimized for 4-year old fingers
• Touchscreens that barely worked and wore out quickly
• Poorly lit screens that were only visible in perfect lighting
• A stylus was required to use the screens effectively
• Poorly lit screens
• UIs that tried to mimic large-screen UIs
1 July 2016
© Jeff Offutt, 2014
2
2007—The iPhone
• Screens visible in all kinds of light
• Touch screens that could accommodate adult-sized and
even fat-person fingers
• An OS with controls that could be used effectively
• Gesture-based idioms
– Pinching, swiping, …
• Sensors that knew things about the environment
– Orientation, location, lighting, and movements
iPhone brilliantly combined advances in hardware
with lots of research in software engineering and usability
1 July 2016
© Jeff Offutt, 2014
3
Tablets
The iPad did the same thing for tablet computers,
completely changing the way they were
engineered
programmed
and
used
Users (and designers) are still in the process of
redefining how we use our various devices
Pocket computers
Tablets
Laptops
Desktops
1 July 2016
© Jeff Offutt, 2014
4
Outline
1. Anatomy of a Mobile App
2. Mobile Navigation, Content, and Control
Idioms
3. Multi-Touch Gestures
4. Inter-App Integration
5. Other Devices
1 July 2016
© Jeff Offutt, 2014
5
Anatomy of Mobile Applications
This section discusses some of the general
usability design principles for mobile
applications
I invite you to pull out a mobile
computing device to look at while
we’re talking
1 July 2016
© Jeff Offutt, 2014
6
Mobile Application Posture
• Most mobile applications should be transient
– They usually use the full screen (as opposed to desktop transient
software)
– But we usually use mobile software in a transient fashion
– Brief, intermittent, and task-focused
– Controls on mobile devices must be big enough to fit on small
screens, but large enough to be used by our fingers
Most mobile apps have transient posture
Games are exceptions and are
usually sovereign applications
1 July 2016
© Jeff Offutt, 2014
7
Types of Mobile Devices
• Handhelds (pocket computers) : phones, music players
– Tall narrow screens (16:9 … 4 to 6 inches diagonally)
– Often used in portrait orientation
• Tablets : iPad, kindle, …
– More rectangular (4:3 … 9 to 10 inches diagonally)
– Mix of portrait and landscape
• Mini-tablets
– 4:3 or 16:9 … 7 to 8 inches diagonally
– Still not clear where these will fit in
These categories and the dimensions are still
evolving and could change as we learn more
about how to use mobile devices
1 July 2016
© Jeff Offutt, 2014
8
Handheld Screen Handling
• Most mobile devices do not have window management
– One full-screen application at a time
• Stacks
– A vertical list or a grid of pieces of information
• iPhone: Main screen, music, notes
– Most scrolling is vertical
• Screen carousels
– Users navigate through screens by swiping horizontally
• Weather, photos
– The carousel sometimes moves in a circle … and probably
should more often
• Orientation
– Handheld devices know if they are in portrait or landscape mode
– Clever apps detect and adapt to orientation
1 July 2016
© Jeff Offutt, 2014
9
Tablet Screen Handling
• A lot more screen space is available
• Stacks are common
– Sometimes including tab, navigation, and action bars
– Sometimes additional supporting panes (email & dropbox index
pane on the iPad)
• Pop-up control panels
– iPad Maps Directions and Share
• Tablet apps must re-orient more aggressively, including
controls and navigation
– Safari on iPad
– Note how 24 (game) fails
1 July 2016
© Jeff Offutt, 2014
10
Tablet Screen Handling
• Tablets need to function differently from desktops for
many apps
– Media browsing, purchasing, browsing
• Some apps can look more like desktop apps
– Tool bars, panes, pop-up panels
– Audio and video production apps
• Controls must be adapted to
– Smaller screen
– Touch screen interaction (no mouse, clumsy keyboard)
– Drag and drop is harder with a touch screen
1 July 2016
© Jeff Offutt, 2014
11
Outline
1. Anatomy of a Mobile App
2. Mobile Navigation, Content, and Control
Idioms
3. Multi-Touch Gestures
4. Inter-App Integration
5. Other Devices
1 July 2016
© Jeff Offutt, 2014
12
Browsing Controls
• Browsing is the most common, and therefore most
important activity in mobile apps
– Viewing content is easy
– Entering data is painful, entering content is not worth the effort
• Lists are the most common pattern for organizing content
– Tapping the list item usually activates an action
• Grids allow icons and content to be organized
– Home screen on the iPhone
• Content carousels offer horizontal scrolling
1 July 2016
© Jeff Offutt, 2014
13
Browsing Controls
• Swimlanes mix stacks, grids and carousels, allowing
scrolling to be vertical and horizontal
– Netflix on the iPad does this well ( should use circular scrolling )
• Card : A discrete chunk of content that has its own
controls and access to further content such as video
– Linked-in and facebook
1 July 2016
© Jeff Offutt, 2014
14
Navigation and Tool Bars
• Bars contain much of the navigation functions for mobile
apps
– They have become smaller over time
– They often disappear after a few seconds or when the main
content screen is tapped (Goodreader, photos)
• Tab bars provide different view of the same content
– Facebook controls at the bottom of the iPhone
• More … control navigates to an additional list of functions
– Bottom right in the iPhone music
• Tab carousels offers tab controls that can be swiped to
access more controls
1 July 2016
© Jeff Offutt, 2014
15
Navigation and Tool Bars
• Nav bars and action bars use swiping or back buttons to
navigate lists and grids
• Tool bars and palettes contain buttons that run functions
on the current content
– Can be bottom, side, or top of the screen
• Tool carousels are tool bars that can rotate in a carousel
manner
Do not
use menu bars in a mobile app
(menus are too hard to navigate with fingers)
1 July 2016
© Jeff Offutt, 2014
16
Drawers
• Drawers give access to a vertical list of navigation
controls
• They hide on the side of the device
– Facebook has a right-hand drawer on the iPhone to access
messages
• Lots of variations discussed in the book ….
Limit the number of animated
screen transitions
1 July 2016
© Jeff Offutt, 2014
17
Searching, Sorting, & Filtering
• Users search to find content to browse, making it one of
the most important features in a mobile app
• Implicit sorting is when apps track users’ behaviors and
offer suggestions
– Netflix bases their entire mobile app on this principle
• Entering search queries
– Voice search is great with simple words
– We love and hate auto-complete …
http://www.damnyouautocorrect.com/
– Tap-ahead got much more aggressive with ios 8
• Check the iPhone’s Messages app
– Recent searches is one of Google’s favorite tricks
– Auto-suggest offers several choices based on what we’ve typed
1 July 2016
© Jeff Offutt, 2014
18
Sorting and Filtering
• You can read it on your own …
1 July 2016
© Jeff Offutt, 2014
19
Outline
1. Anatomy of a Mobile App
2. Mobile Navigation, Content, and Control
Idioms
3. Multi-Touch Gestures
4. Inter-App Integration
5. Other Devices
1 July 2016
© Jeff Offutt, 2014
20
Multi-Touch Gestures
• Touch screens allowed and forced designers to invent
numerous new ways to control applications
– These replace mice and keyboards actions
• Gestures
–
–
–
–
–
Tap to select, activate, or toggle
Tap and hold is hard to use and hard to find
Drag to scroll
Drag to move … accidental release is easy and common
Drag to control knobs, switches, sliders, etc.
• Swipe is slightly different from dragging, but not much
– Pinching is usually used to shrink or zoom
– Rotate with a thumb and forefinger is clever but awkward
– Multifinger swipes add flexibility, but most users don’t know
about them
1 July 2016
© Jeff Offutt, 2014
21
Outline
1. Anatomy of a Mobile App
2. Mobile Navigation, Content, and Control
Idioms
3. Multi-Touch Gestures
4. Inter-App Integration
5. Other Devices
1 July 2016
© Jeff Offutt, 2014
22
Inter-App Integration
• Allowing apps to talk with each other has the potential to
dramatically increase their behaviors
• It’s very hard for developers to take advantage
– Consider the iPhone’s phone, contacts, calendar, messaging,
memo, and reminders
– They play together, but not very effectively
• Users usually can’t “rewire” connections
– I installed google maps, but can’t tell Safari to use it
• This is a huge source of security and privacy attacks
– Functionality in location-aware apps can be sniped by apps we
choose not to be location-aware
1 July 2016
© Jeff Offutt, 2014
23
Outline
1. Anatomy of a Mobile App
2. Mobile Navigation, Content, and Control
Idioms
3. Multi-Touch Gestures
4. Inter-App Integration
5. Other Devices
1 July 2016
© Jeff Offutt, 2014
24
Other Devices
• Device-embedded interfaces are UIs that are embedded
or attached to non-computing devices
– TVs, home appliances, car dashboards, cameras, …
• General principles
–
–
–
–
–
–
–
1 July 2016
Don’t think of the device as a computer
Design the UI design while designing the hardware, not after
Consider the context of how the device will be used
Avoid modal behavior
Do as little as possible—use the KISS principle
Carefully balance navigation and content density
Make data input as simple as possible
© Jeff Offutt, 2014
25
Summary Mobile Devices
The same general principles
from previous chapters apply
Two major differences:
1. Outputs are to a smaller screen
2. Inputs are thrugh a touch screen and
(increasingly) a microphone
This changes a lot of specifics
1 July 2016
© Jeff Offutt, 2014
26