Mobile Interfaces

INTRODUCTION TO MOBILE

Rethinking mobile technology Youre 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 detailsLive Twitter updates

Disaster reporting via mobile Mobile technology is also becoming increasingly important in crisis alerts. Oct. 2007: Wildfires in CaliforniaWildfires 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 ChinaEarthquake in China Foreign media outlets offered conflicting reports. Chinas 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 users 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 youre 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 users 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 days 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 % of the worlds estimated 4 billion handsets were used in developing nations on 2G networks (source)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. Touch Tone Tanks

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)source

Example: Angry Birds

Respect user expectations Keep in mind mental models and conventions. Mental models are users ideas about what things are and how they work; most mental models are based on physical artifacts. Conventions exist for all platforms. Dont reinvent the wheel. Use basic platform widgets and workflows.

Example: RedLaser Its not an abstract app that compares prices on products, its a barcode scanner, on your phone! (source)source

For further investigation Forum.Nokia: Mobile Design Patterns Design for Mobile Conference: Mobile Design Patterns and Resources Design for Mobile Conference: Mobile Design Patterns and Resources UX Magazine: 10 Surefire Ways to Screw Up Your iPhone App UX Magazine: 10 Surefire Ways to Screw Up Your iPhone App Mobile Design and Development by Brian Fling Mobile Design and Development iOS Human Interface Guidelines Windows Phone 7 UI Design and Interaction Guide Windows Phone 7 UI Design and Interaction Guide Android Human Interface Guidelines Mobile Design Pattern: The Carousel