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