1. Cooper Part III Interaction Details Designing for Mobile Devices
Jeff Offutt
SWE 632
User Interface Design and Development
Cooper Ed4, Ch 19

2. 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
12 October 2018
© Jeff Offutt

3. 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
12 October 2018
© Jeff Offutt

4. Tablets engineered programmed used Pocket computers Tablets Laptops
The iPad did the same thing for tablet computers, completely changing the way they were
engineered
programmed
and
used
Users (and designers) are still redefining how we use our various devices
Pocket computers
Tablets
Laptops
Desktops
12 October 2018
© Jeff Offutt

5. Outline Anatomy of a Mobile App
Mobile Navigation, Content, and Control Idioms
Gestures, Integration, and Other Devices
12 October 2018
© Jeff Offutt

6. Mobile Application Posture
Most mobile apps have transient posture
They usually use the full screen (as opposed to desktop transient software)
But we use most mobile software in a transient fashion
Brief, intermittent, and task-focused
Controls on mobile devices must be small enough to fit on small screens, but large enough to be used by fingers
Games are usually sovereign applications
12 October 2018
© Jeff Offutt

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
12 October 2018
© Jeff Offutt

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
Orientation
Handheld devices know if they are in portrait or landscape mode
Clever apps detect and adapt to orientation
12 October 2018
© Jeff Offutt

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 ( & 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 2048 (game) fails
12 October 2018
© Jeff Offutt

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
12 October 2018
© Jeff Offutt

11. Outline Anatomy of a Mobile App
Mobile Navigation, Content, and Control Idioms
Gestures, Integration, and Other Devices
12 October 2018
© Jeff Offutt

12. Browsing Controls
Browsing is the most common, and therefore most important activity Viewing content is easy
Entering data is painful, entering content is almost impossible
Lists are the most common pattern for organizing content
Grids allow icons and content to be organized
Home screen on the iPhone
Content carousels offer horizontal scrolling
Swimlanes mix stacks, grids and carousels, allowing vertical and horizontal scrolling
Netflix on the iPad does this well ( should use circular scrolling )
Card : A discrete chunk of content that has its own controls and content Linked-in and facebook
Netflix is on ipad, not iphone
12 October 2018
© Jeff Offutt

13. 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
Tab carousels offers tab controls that can be swiped to access more controls
12 October 2018
© Jeff Offutt

14. 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)
12 October 2018
© Jeff Offutt

15. Limit the number of animated screen transitions
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 “Nearby Friends”
Lots of variations discussed in the book ….
Limit the number of animated screen transitions
12 October 2018
© Jeff Offutt

16. 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 …
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
12 October 2018
© Jeff Offutt

17. Outline Anatomy of a Mobile App
Mobile Navigation, Content, and Control Idioms
Gestures, Integration, and Other Devices
12 October 2018
© Jeff Offutt

18. Multi-Touch Gestures
Touch screens allowed and forced designers to invent numerous new ways to control applications
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 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
12 October 2018
© Jeff Offutt

19. Inter-App Integration
Allowing apps to communicate can dramatically increase their behaviors
It’s very hard for developers to use communication
Consider the iPhone’s phone, contacts, calendar, messaging, memo, and reminders
They play together, but not very effectively
Users usually can’t “rewire” connections
We can install 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
12 October 2018
© Jeff Offutt

20. Other Devices
Device-embedded interfaces are UIs that are embedded or attached to non-computing devices
TVs, home appliances, car dashboards, cameras, …
General principles
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
12 October 2018
© Jeff Offutt

21. Summary Mobile Devices
The same general principles from previous chapters apply
Two major differences:
Outputs are to a smaller screen
Inputs are through a touch screen and (increasingly) a microphone
This changes a lot of specifics
12 October 2018
© Jeff Offutt