Mobile Interfaces

INTRODUCTION TO MOBILE

Rethinking mobile technology • You’re all young, hip Brown students, so you probably have

some contact with mobile technology. • (Almost) all of you have cell phones. • Many of you have smartphones. • Most of you have at least played around with a smartphone at

some point. • For the purposes of this lecture, we encourage you to think of

mobile in the abstract before considering implementation details.

Mobile as media • Mobile technology can be thought of as the seventh mass

medium,• The first six being: • Press• Audio recordings • Cinema• Radio • Television• Internet

Mobile stands apart• But mobile is different from its media predecessors in a

number of ways. Mobile...1. …can host the six previous media.2. …is the first truly personal mass medium.3. …is the first always-carried mass medium.4. …is the only mass medium with a built-in payment channel.

The implications of mobile• Mobile provides users with

24/7 access to broadcasting capabilities.

• As mobile technologies proliferate, social media bears an increasing burden in breaking news stories.

• Example: Live Twitter updates during the terrorist attacks in Mumbai (Nov. 2008), long before traditional news outlets were able to report details

Disaster reporting via mobile• Mobile technology is also becoming increasingly important in

crisis alerts. • Oct. 2007: Wildfires in California • Multiple fires, moving quickly meant information was constantly

changing and social media outlets like Twitter had the most up-to-date news.

• Evacuated Californians would regularly call their home answering machines to see if their houses were still intact.

• May 2008: Earthquake in China• Foreign media outlets offered conflicting reports. • China’s Propaganda Department restricted access of all

journalists not sponsored by government, making amateur journalism all the more important.

MOBILE CONTEXT

Considering context• What makes the mobile user experience so different?• It has context. • Up until this point, we have implicitly assumed all UIs would

be used in some abstract, artificially neutral context. • But because it is always carried, mobile technology is

integrated with the rest of a user’s existence. • We cannot assume that users will sit down at a machine with

the intention of doing nothing other than operating that machine.

• We must consider their physical, media, and modal contexts.

Physical context

Where is the user?• Obvious application: tailoring to

locale• Compare desktop and mobile

versions of Yelp and Google maps• Some apps developed specifically

for mobile revolve entirely around location-aware features• Foursquare, GeoNote, etc.

Public vs. private spaces• A less obvious application of physical context: public and

private spaces • How you use your phone at home or in a car may be different

from how you use your phone on a crowded bus or train. • Input methods: accelerometer, voice input are more awkward

and less useful in public spaces. • Personal information: what a user feels comfortable having

displayed on screen is related to who is likely to see it over their shoulder.

Timing: Day vs. night• How does time of day affect use of

your application? • Many reader apps have a “night

mode” for easier reading in dim lighting conditions.

• Creative (if not yet mobile) timing-based app: Gmail Goggles• Verifies your “state of mind” during

key periods (by default, Friday and Saturday nights)

• Similar apps exist for mobile phones, but none are particularly good, so if you’re looking to make some cash…

Connectivity issues• Are your users likely to experience

intermittent connectivity issues? If so, how will you handle it? • Connections for mobile devices can

be much less reliable• Google Navigation provides

automatic rerouting, even offline. • Especially important when you

consider how much more likely a user is to lose their connection when navigating

Media context

What device is being used to access content?

• Different mobile devices offer different user experiences. • Some (near) universals:

smaller screen size, smaller power supply

Input methods• Text input methods vary by

device: T-9, QWERTY keyboards, physical keyboards, virtual keyboards, styli

• Blocking issues: • Virtual keyboards and other

input controls take up a lot of screen real estate

• Touch interactions cover up part of the screen

• Touch is less precise than mouse input, hover does not exist

Hands-on design• How is the user holding the

device? Are they operating it with one or both hands? How is it positioned? Open or closed? Portrait or landscape?

The Lunascape browser for iPad places some chrome at the bottom of the screen.

The technological ecosystem • Obvious statement of the week: Many mobile users also own

other technological devices• How will your mobile application interact with these devices, if

at all?

Modal context

What is the user’s state of mind? • How much time do you anticipate

users will want to devote to the task at hand?

• How much of their attention do you think they will devote to your app? • Are they checking the day’s forecast

while brushing their teeth? • Or are they killing time in a waiting

room?

Notifications• If your user is splitting their attention at all, you will likely need

to implement some kind of notification system. • Within-app notifications, push notifications, etc.

TweetDeck confirms data has been sent.

Beejive sends push notifications.

Putting it all together: Instapaper

• Physical context• Connectivity: app updates when

connection is available, content is available offline

• Display can be adjusted for low-light reading conditions

• Media context• Syncs across a variety of devices (see

left) • Modal context• Two basic modes: browsing/queuing

(inattentive) and consuming (immersive)

MEDIUM TYPES

SMS applications• Applications which rely entirely on text

messages for user interaction • SMS apps are very common in the

developing world. • M-PESA: wiring money via texts

• According to the World Bank, in 2009 75% of the world’s estimated 4 billion handsets were used in developing nations on 2G networks (source)

Mobile websites • Websites designed to be viewed in

mobile browsers, which have limited and inconsistent rendering capabilities

• They are easy to create, publish, and maintain.

• They can be accessed by any mobile device with a web browser (even a primitive one).

• They vary in attractiveness.

AccuWeather provides an excellent example of how attractive some

mobile websites are.

Native applications • Applications which are developed for specific mobile platforms

(e.g. written in Objective-C with Cocoa Touch for the iPhone)• These are generally preferred for creating games or accessing

device features such as camera, GPS, etc. • They can be difficult to port from one device to another.

Mobile web applications • Apps which use web technologies (HTML, CSS, JavaScript, etc.)

to produce experiences closer to those of native applications • They can be accessed via a mobile browser, or bundled and

distributed as a native app. • They may support some native application features.

Vs.

Other types of applications • Widgets• Applications whose functionality is exposed on home screen

• Call-in applications• Touch Tone Tanks, developed by Brown students, allows users to

play a game using the traditional phone keypad.

DESKTOP VS. MOBILE

NYT desktop site

NYT site in mobile browser

Lost in translation • The NYT website is built from a very obvious print metaphor. • Content-heavy, densely packing information above the fold

• How can the NYT be better interpreted to a mobile context? • Do you use the same information structure? The same sections? • How do you prioritize information? • How do you handle navigation between sections? • Do you try to adapt the print metaphor, or scrap it altogether? • How do previous digital incarnations of the NYT affect user

expectations for your app?

NYT mobile site

NYT app for iPhone

NYT for the iPad

Getting It Right • The same guidelines for creating a good desktop application

experience still apply here. • However, some become even more important in the mobile

context.

Keep it simple• Avoid non-essential functionality. • If adapting from an existing desktop application, pare down

features. • Common cuts include: administrative functionality (such as

account settings), less frequently used features, features for “fine tuning” content

• Split workflow up into logical, task-centered screens.• But be wary of how many clicks are required to accomplish

common tasks.

Example: Evernote desktop

Evernote mobile

Provide “feedforward” • Nobody reads the manual. • It is up to you to suggest to the user what the next step is. • This is especially important for touch interfaces, where the

gestural vocabulary is still being established. • Tap? Double tap? Light tap? Firm tap? Tap and hold?

• Games typically do this very well. • In 2010, 14% of kids age 4 or 5 could tie their shoes, while 21%

could play or operate at least one smartphone app (source)

Example: Angry Birds

Respect user expectations• Keep in mind mental models and conventions. • Mental models are user’s ideas about what things are and how

they work; most mental models are based on physical artifacts. • Conventions exist for all platforms.

• Don’t reinvent the wheel. Use basic platform widgets and workflows.

Example: RedLaser

“It’s not an abstract app that compares prices on products, it’s a barcode scanner, on your phone!” (source)

For further investigation• Forum.Nokia: Mobile Design Patterns• Design for Mobile Conference: Mobile

Design Patterns and Resources• UX Magazine: 10 Surefire Ways to Scre

w Up Your iPhone App• Mobile Design and Development by

Brian Fling• iOS Human Interface Guidelines• Windows Phone 7 UI Design and Inter

action Guide• Android Human Interface Guidelines

Mobile Design Pattern: The Carousel