Every month in Ask UXmatters our panel of UX experts answers our readers’ questions about various user experience matters. To get answers to your own questions about UX strategy, design, user research, or any other topic of interest to UX professionals in an upcoming edition of Ask UXmatters, please send your questions to us at: [email protected].
Champion Advertisement
Continue Reading…
The following experts have contributed answers for this month’s edition of Ask UXmatters:
Peter Bogaards—Community Builder and Coach at Informaat; Owner of BogieLand—and the Informaat Mobile UX Team
Rod Farmer—Cofounder and Director of Research and Strategy at Mobile Experience
Pabini Gabriel-Petit—Publisher and Editor in Chief, UXmatters; Principal User Experience Architect at Spirit Softworks; Founding Director of Interaction Design Association (IxDA); UXmatters columnist
Shanshan Ma—Senior Analyst, User Experience at BusinessOnLine
Catalina Naranjo-Bock—Software Interface and Experience Designer at LEGO
Robert Reimann—Lead Interaction Designer at Sonos, Inc; Past-President, Interaction Design Association (IxDA)
Paul Sherman—Principal at Sherman Group User Experience; Vice President of Usability Professionals’ Association; UXmatters columnist
Oliver Weidlich—Cofounder and Director of Design and Innovation at Mobile Experience
Russell Wilson—Vice President of Product Design at NetQos
Designing for a Wide Range of Devices with Different Screen Sizes
Q: Screen sizes seem to be diverging more and more, with huge desktop monitors coexisting with tiny mobile phone screens—meaning an app’s available screen space is difficult to know. The elements on these screens are evolving, too—especially with new gear like the iPad—and there are new interaction models like touch. How do you design for such a wide and varying range of screen sizes and available space?—from a UXmatters reader
“Originally, there was a single basic form factor to consider when designing a mass-market application or Web site: the computer desktop, which was landscape format, mouse-interaction driven, and relatively high resolution,” answers Robert. “Since the introduction of PDAs and smartphones like the Treo a decade or more ago, we’ve also had a handheld form factor, with touch interaction. More recently, several robust platforms—iOS, Android, RIM, and Symbian—have introduced multi-touch gestures and reorientable user interfaces, which, because of their size and available screen real estate, employ mostly list and grid-based interaction models—games excluded. Most recently, larger multi-touch devices like the iPad have hit the scene, falling somewhere between mobile devices and desktops, in terms of their interaction models.
“So how do you design for all of these form factors? The short answer is: you don’t. You should consider the variants of each of these form factors independently, from a UX perspective, and make some intelligent design decisions, keeping your presentation layer as independent of the inner workings of your applications as possible. For platforms like iOS, which run on devices with two or more distinct form factors, you can either develop your application to present itself appropriately for both platforms, which means your application might be either bloated or not as capable of addressing the unique aspects of each platform, or you can develop a separate version for each device, which has its own advantages and drawbacks.”
“I design different experiences for each device rather than creating a single comprehensive design,” responds Russ. “People use mobile devices differently from desktops. They are completely different tools. For example, consider a travel application. On my notebook computer, I use this application to schedule trips and book flights. On my mobile device, I check status and review my itinerary. It’s the same application, but there are very different usage models depending on the device. Consider the strengths and weaknesses of each device, as well as your application’s intent and context, then design specifically for the need.
“In general, we see three options,” replies Peter and the Informaat Mobile UX Team. “You can:
Follow cross-device standards and keep your service as simple as possible to ensure it performs on all possible devices.
Offer two optimized services—one for large screens; the other for small screens—then detect the type of device on the server and route the user to the proper version of the service.
Detect the type of device, infer each device’s characteristics, then offer an optimized service for each and every device.
“We prefer option 2. Don’t make it too hard on yourself. Dare to choose either mobile Web, application, or widget on the basis of the proper metrics for customer interactions.”
“To take full advantage of the capabilities of particular platforms, you need to design user interfaces specifically for them,” recommends Pabini. “For example, if your application offers features that would be useful across both personal computers and mobile devices, design different versions of your application for each platform you want to support. These days, that usually means designing and developing a Web application that runs in all of the popular browsers on both Macs and PCs, plus at least one version of a mobile application.
“If you want your application to be available to everyone who has a mobile phone with Web access, design a Web application that can run on all such mobile devices. However, if customers in the target market for your application favor a particular mobile device or an application includes features—like location awareness—that require the capabilities of a specific mobile device, design and develop your application for that device first. Then, over time, you can design and develop your application for additional devices—both to reach a larger market for your application and as additional devices implement the capabilities your application requires.
“The mobile market is constantly and rapidly evolving. So, in endeavoring to keep up with the market’s evolution, a mobile product team must set priorities for targeting specific devices and focus its design and development efforts on those devices.”
“The answer to the question How do you design for such a disparate range of display sizes? is relatively simple,” asserts Paul. “It’s merely a matter of understanding whether you should:
Provide specific versions of your product or service for each form factor—for example, m.site.com, www.site.com, or site.com iOS app—then use the multitude of available tools to do the necessary client detection and presentation switching for the Web. OR
Construct device-specific applications.
“But, of course, business goals and the needs of the target audience drive the decision regarding whether to design for multiple platforms. As designers, we need to understand the goals of the business before we start designing for different platforms.”
Meeting Your Users’ Needs
“One important thing to keep in mind is that it is impossible—and definitely not recommended—for an application to try to be everything to everyone,” suggests Catalina. “It is, of course, important to try to make an application’s user experience across platforms and devices as seamless as possible, but it is up to your product team to set limits on what platforms and screen sizes to concentrate on.
“How can you focus your team’s efforts without sacrificing your product’s reach? By knowing your target audience as well as is possible. It is also important to have a clear understanding of why you’re creating an application in the first place and what scenarios of use are most common. By deciding on the essential usage scenarios, your team can determine whether it makes sense to design for several different platforms.
“Depending on the complexity of your application and your business model, it might be beneficial to consider developing two or three or more different versions. Consider the scenarios in which your audience would be using a product. Would it make more sense to develop a lighter version for mobile devices—for users who are on the go? Are there times when users need every possible function to be available and others when just a few tools are enough for users to get their tasks done? Could users work comfortably on a small screen, or do some features require a large screen? Do users need a different layout and interaction design for a mobile application in comparison to those for a Web application?”
“When you are designing Web sites or applications for both a computer’s typical screen resolution—1024 x 768—and a smartphone’s typical screen resolution—320 x 480—the biggest challenge is how to cope with this dramatic difference in screen sizes without sacrificing the user experience,” says Shanshan.
“In comparison to Web sites on the desktop, which usually contain a wide range of content and information, mobile sites generally include only the most crucial functions and features, as well as location- and time-dependent features. So give priority to the features and content users who are accessing your site using mobile devices would most likely need. When you’re designing a mobile Web site, having insights into the needs of both your potential customers and your application’s existing user base dictates what kind of content you should develop, how you should lay out your Web pages, and what your site’s information architecture should be. Researching the situations and contexts your customers would be in while visiting your site using a mobile device can also help you prioritize your content for mobile devices.”
“The first thing to determine is your core audience,” advise Rod and Oliver. ”Why are they likely to engage in your product or service? What do you want to say to them? How are they likely to listen? Which devices do you need to support? You simply can’t support every device, so the first challenge is always determining what types of experiences you want to support and why. People use different devices in different situations, to support very different needs and behaviors, so we should avoid merely reducing screen size and, instead, lay out a user interface in a way that’s appropriate to each mobile device.”
Designing Mobile Applications
“For your initial brainstorming, wireframing, and content definition, try to focus on one specific screen resolution or platform, in accord with the data your team gathered during user research,” recommends Catalina. “Start by prioritizing the most important features of the application, and briefly consider how the application will display and provide access to these features across the chosen devices. As your ideas evolve and stakeholders approve your application’s basic features, start going deeper into what elements of its user interface can adapt to different screen sizes without compromising usability. Create several mockups or wireframes of your initial design for different screen resolutions and platforms. Work hand in hand with the developers to determine whether you’ll need to make changes in the code to make the user interface sufficiently flexible.
“While, during the first stages of your design process, you might be able to take a unified approach to design across platforms, by the time your team reaches the final interaction design, visual design, and implementation stages, you’ll need to do some extra work for each platform. Programming languages and design guidelines are inevitably different across many of these platforms, and developers need to use a variety of software tools to reach their goals. Plus, if no one on your internal team has experience developing for a particular type of device, a need to involve external resources might emerge.
“Design guidelines exist for some platforms—like the Apple iPhone and Google Android. User interface designers who want to create applications using these technologies should follow these guidelines. Be sure to read them and comply with their guidance.”
“When designing mobile applications, it’s important to be familiar with the user interface guidelines for specific types of devices,” advises Pabini. “Here is a collection of links to some of the available user interface design guidelines:
Palm, Inc. User Interface Guidelines.Palm Developer Center, 2010. Retrieved October 17, 2010. Design guidelines for the webOS 2.0 software platform for the Palm Pre.
W3C. Mobile Web Best Practices. Version 1.0. W3C, July 29, 2008. Retrieved October 17, 2010. Design guidelines for mobile Web applications.”
Here are Rod and Oliver’s tips for “designing mobile applications:
Avoid pixel-perfect designs. Instead, invest in scalable, fluid layouts.
Segment your audience’s device population into smaller classes—for example, low, medium, and high priority. Design for a few hero devices within each class. This will help you ensure reasonable coverage across devices.
Invest in well-structured, semantically correct XHTML as your application’s foundation. Use progressive enhancement to add more features and improve your application’s aesthetics. Where supported, CSS media queries and device profile databases are very helpful here.
Avoid designing device-specific elements that limit your application’s flexibility.”
Designing for Diverse Platforms
“For desktop applications, you need to design around resizable and maximizable screens, typically using multipane approaches with stretchable main work areas to handle variations in screen resolution,” says Robert. “Because they are mouse driven, desktop applications generally need a multi-selection model, which is something few handheld or tablet applications require. Web sites oriented toward desktop use also need to handle these things—usually via style sheets and other RIA (Rich Internet Application) tools and techniques.
“For mobile or handheld devices, simplified list- or grid-based, hierarchical approaches are the most commonplace and usually serve their purpose well. Though there can be many screen-size variants on open platforms like Android, keeping things simple, in terms of layout, lets you make minor adjustments for differing screen widths and heights across different screen resolutions with minimal effect on the design. Some mobile platforms have hard buttons that launch menus—for example, Android—and some do not. Be judicious about what you put on these menus, especially if you are developing across platforms.
“The key to creating a good mobile application is to keep it simple by focusing on core functions and activities mobile users require. Do user and market research to figure out what these features are for your desktop application or Web site, then work on fitting them into a mobile-friendly interaction model that requires minimal navigation and simple taps and gestures to actuate functions. Keep the need for typing to a minimum.
“Tablets are the new form factor, and they present some interesting challenges. Their screen real estate is large enough to support multiple panes, or views, as well as some desktop interaction models such as drag and drop. Users can reorient screen layouts on the fly—to portrait or landscape—which presents some special challenges in handling panes of information. It’s also important to note that touch-based interactions must, by necessity, be coarser than mouse-based interactions, even in this larger format. So the information density on the screen should be a bit lower than that for a similarly sized desktop user interface.
“If you are porting a mobile app to a tablet, you can take the opportunity the larger screen real estate affords to place related views side by side—for example, a music browser next to a now-playing display in an MP3 player app. But be forewarned: you will then need to figure out the interaction model between the panes. Make sure your developers rewrite the presentation layer to handle drawing and updating multiple panes.
“If you plan to port a desktop application to a tablet, it’s reasonable to consider designing a simplified version, in landscape mode, as a starting point—stripping away menus and possibly providing palette-style, touch interfaces in their place. For portrait mode, you’ll need to make some decisions about what to show. You must also decide which orientation should be the primary one. In portrait mode, you may need to turn secondary or navigation panes into pop-up menus. Plus, to make the best use of the screen real estate in each different orientation, you may need to reorient other types of panes or palettes from side-by-side to above-and-below or vice versa. Some sets of related panes may work well as flip-over panels that reveal additional controls or content on their back side.
“When making such design decisions, consider an application’s specific usage patterns, its overall information architecture, and the idioms a specific platform uses. Be wary about using desktop idioms like resizable panes or scroll bars, which can lead to tweaky, cluttered user interfaces in the limited real estate of a tablet.”
Promoting Your Mobile Application
Q: In the vast sea of available mobile apps, what are the most effective ways of making people aware of your mobile application and ensuring they’ll be able to get it?—from a UXmatters reader
“Effective mobile marketing depends on the use of multiple channels to communicate with your customers,” Rod and Oliver reply. “Rather than just selling a product or service, you are actually trying to initiate a new conversation with your potential customers. You need to focus on the communication channels that support the most important customer relationships for your new product and how you can use these to promote and support your mobile offering. If you don’t have an established consumer base, go where your potential customers congregate and start a conversation.
“Some people enjoy browsing app stores to discover the latest, greatest thing,” remarks Pabini. “So if you’re developing an iPhone app, marketing it on the Apple iPhone App Store is essential. You should also market your mobile app on GetJar, the largest multiplatform app store, which offers apps for both feature phones and smartphones, including Android, BlackBerry, iPhone, Symbian, and Windows Mobile.”
“A great user experience will help differentiate your mobile app from the myriad other apps in the app stores and create the kind of buzz your app needs to rise above the fray.”
“If your app is good, people will discover it,” responds Russell. “The more people use your app and rank it highly, the more visibility it will get. Eventually, customers will find it.”
Advertising & Creating Buzz Around Your App
To make people aware of your app, Robert recommends ”advertising your app. Get some ad space on blogs or on Google. Hire a good PR (Public Relations) firm to get the word out there. Make use of Facebook, Twitter, and other social networking tools to get the word out. If you have other Internet or brick-and-mortar properties, leverage those to help spread the word.”
“There are a number of popular Web magazines and blogs that publish lists of the top mobile apps for various platforms and in different categories,” says Pabini. “Put your PR firm to work on getting your apps on those lists. Some recent examples include the following:
“A month or so ago, I would have said, ‘Get your app mentioned on Digg,’ but after their disastrous redesign, there’s no longer a best, single way to achieve recognition in a crowded market,” declares Paul. “So use a combination of these traditional tools:
Build a Web site that is devoted to your app, and make sure to optimize it for search engines.
Build a fan page on Facebook for your app.
Consider advertising your app on relevant sites.
Submit your app for review in technical publications.”
Striving for Long-Lasting Success
“This is an interesting topic,” Peter and the Informaat Mobile UX Team answer. “Many providers just go for a quick win. As long as they are within the top whatever in the app store, they think their app is a success. In the long run, customers need to be able to find your app in several ways—in the app store, on your own site, or through search—so promote your app regularly, get positive user feedback, and provide regular updates. It’s important not only that customers can find your app, but also that they install it and keep it on their mobile device rather than quickly deleting it.
“We are at a tipping point in this respect: You need to offer your customers real value if you want them to use your app. For example, although Shazam hasn’t been among the top-10 apps for quite some time, people still use this application a lot, and it even functions as a kind of lead generator for music sales.”
“Because better products tend to rise to the top and stay there longer, investing in user experience is absolutely critical to ensure sufficient user advocacy,” advise Rod and Oliver.
Determining the Best Business Model
“Make your app free,” Robert recommends. “If you can create a business model that allows you to keep it free, that’s great. Many apps have a free, ad-supported version, with an upgrade path to an ad-free premium version. If you can develop a business model that requires neither charging for your app nor running ads, that’s even better. Another option is to make your ad cheap. Apps that are more than a buck need to be pretty darn good for people to flock to them.” Paul also suggests that you use a freemium business model for your mobile app.
Dr. Janet M. Six helps companies design easier-to-use products within their financial, time, and technical constraints. For her research in information visualization, Janet was awarded the University of Texas at Dallas Jonsson School of Engineering Computer Science Dissertation of the Year Award. She was also awarded the prestigious IEEE Dallas Section 2003 Outstanding Young Engineer Award. Her work has appeared in the Journal of Graph Algorithms and Applications and the Kluwer International Series in Engineering and Computer Science. The proceedings of conferences on Graph Drawing, Information Visualization, and Algorithm Engineering and Experiments have also included the results of her research. Read More
