Mobile Interfaces

1. Mobile Interfaces

2. Introduction to Mobile

3. 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.

4. 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

5. Mobile stands apart • But mobile is different from its media predecessors in a number of ways. Mobile... • …can host the six previous media. • …is the first truly personal mass medium. • …is the first always-carried mass medium. • …is the only mass medium with a built-in payment channel.

6. 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 updatesduring the terrorist attacks in Mumbai (Nov. 2008), long before traditional news outlets were able to report details

7. 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.

8. Mobile Context

9. 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.

10. 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.

11. 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.

12. 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…

13. 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

14. 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

15. 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

16. 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.

17. 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?

18. 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?

19. 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. Beejive sends push notifications. TweetDeck confirms data has been sent.

20. 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)

21. Medium types

22. 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)

23. 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.

24. 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.

25. 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.

26. 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.

27. Desktop vs. Mobile

28. NYT desktop site

29. NYT site in mobile browser

30. 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?

31. NYT mobile site

32. NYT app for iPhone

33. NYT for the iPad

34. 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.

35. 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.

36. Example: Evernote desktop

37. Evernote mobile

38. 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)

39. Example: Angry Birds

40. 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.

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

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