Mobile Interfaces
description
Transcript of Mobile Interfaces
![Page 1: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/1.jpg)
Mobile Interfaces
![Page 2: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/2.jpg)
INTRODUCTION TO MOBILE
![Page 3: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/3.jpg)
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.
![Page 4: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/4.jpg)
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
![Page 5: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/5.jpg)
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.
![Page 6: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/6.jpg)
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
![Page 7: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/7.jpg)
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.
![Page 8: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/8.jpg)
MOBILE CONTEXT
![Page 9: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/9.jpg)
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.
![Page 10: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/10.jpg)
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.
![Page 11: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/11.jpg)
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.
![Page 12: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/12.jpg)
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…
![Page 13: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/13.jpg)
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
![Page 14: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/14.jpg)
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
![Page 15: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/15.jpg)
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
![Page 16: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/16.jpg)
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.
![Page 17: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/17.jpg)
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?
![Page 18: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/18.jpg)
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?
![Page 19: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/19.jpg)
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.
![Page 20: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/20.jpg)
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)
![Page 21: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/21.jpg)
MEDIUM TYPES
![Page 22: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/22.jpg)
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)
![Page 23: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/23.jpg)
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.
![Page 24: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/24.jpg)
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.
![Page 25: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/25.jpg)
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.
![Page 26: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/26.jpg)
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.
![Page 27: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/27.jpg)
DESKTOP VS. MOBILE
![Page 28: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/28.jpg)
NYT desktop site
![Page 29: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/29.jpg)
NYT site in mobile browser
![Page 30: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/30.jpg)
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?
![Page 31: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/31.jpg)
NYT mobile site
![Page 32: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/32.jpg)
NYT app for iPhone
![Page 33: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/33.jpg)
NYT for the iPad
![Page 34: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/34.jpg)
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.
![Page 35: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/35.jpg)
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.
![Page 36: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/36.jpg)
Example: Evernote desktop
![Page 37: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/37.jpg)
Evernote mobile
![Page 38: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/38.jpg)
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)
![Page 39: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/39.jpg)
Example: Angry Birds
![Page 40: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/40.jpg)
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.
![Page 41: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/41.jpg)
Example: RedLaser
“It’s not an abstract app that compares prices on products, it’s a barcode scanner, on your phone!” (source)
![Page 42: Mobile Interfaces](https://reader035.fdocuments.us/reader035/viewer/2022062815/5681697a550346895de17a24/html5/thumbnails/42.jpg)
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