Repurposing vs. Optimized Design

When it comes to user experience strategy, there are two opposing schools:

• Repurposing: make as few designs as possible — preferably only one — and reuse the same material across as many platforms as possible.
• Platform optimization: design different user interfaces for each main platform, integrating the user experience layers as tightly as possible.

Repurposing has huge cost advantages. Most of the work must be done only once. But on most platforms, the outcome tends to be a substandard user experience. This is particularly true if the design was initially optimized for one platform and later ported onto other platforms with minimal changes.

Over the 17 years I've been writing the Alertbox column, the campaign against repurposing has been a key recurring theme. In the early years, the main problem was brochureware websites that tried to repurpose print design strategies:

• I analyzed the differences between print vs. web design and the differences in writing for print vs. writing for the web.
• I also argued that the online experience is different than television, even though both media show glowing pictures on a monitor, because the different speeds of media consumption lead to different content preferences.
• Finally, I pointed out that the interactive medium should aim to be "better than reality" instead of mimicking old media forms.

Platform-Optimized User Experience

Apple's history provides the most famous examples of tightly integrated design:

• The Macintosh required mouse-driven software and didn't even offer cursor keys for several years to prevent software vendors from simply porting their DOS products.
• The iPod and iPhone integrated the physical device, the on-screen user interface, and an infrastructure for downloading music and apps (even though the iTunes application is the poor stepsister in this relationship and could stand some design love).

In contrast, Microsoft Windows emphasized its broad ability to work across many different hardware systems with the addition of plug-and-play/pray devices to suit the user's taste. Thus, developers could never be sure which hardware and service support their applications would find on a Windows machine. Windows 1 was even designed to primarily be used without a mouse. The resulting total user experience was substantially less integrated than Macintosh.

Windows CE was a particularly egregious example of the repurposing strategy: taking a design that worked fairly well on desktop computers and porting it to pocket-sized devices — where it worked miserably.

Over the past decade, Microsoft has fought to overcome its legacy of confused user experience, and its current products are considerably improved. On the other hand, Windows 8 might be overly optimized for touchscreen use and risks working poorly on mainstream desktop computers. The idea of repurposing a single design across platforms may have been taken too far once again.

After the iPhone shipped, many other telecoms vendors launched competing products that mimicked the touchscreen hardware but offered poorly integrated software that was ported from systems optimized for other platforms.

The following video comes from a round of our mobile user testing in early 2009, which included some of these iPhone semi-clones. Here, the poor user is simply trying to use a store locator to find the nearest department store:

(To protect our test participant's privacy and to keep this a family-oriented website, I have erased the soundtrack, but rest assured that the user pronounced negative comments on this UI.)

Clearly, it was not enough to simply offer a big touchscreen on the phone. The software user interface should have been optimized for this platform's characteristics as well.

Cost–Benefit Analysis

The benefits of platform-optimized user interfaces are clear:

1. Usability is increased.
2. Users are more likely to accomplish their goals.
3. Conversion rates increase.
4. You make more money.

But, of course, optimization is more costly than repurposing. So, the real question is whether this cost is bigger or smaller than the additional money you make from increased usability.

(When I talk about "making money," from a website, I'm not limiting the case to e-commerce sites. The ROI case works just as well for B2B sites — measured in new leads, for example — as well as for non-profit sites collecting donations and government sites fulfilling their mission at a lower cost.)

In many cases, the cost–benefit analysis favors a unified design. For example, when designing a desktop website, there's no reason to create different versions for PC vs. Mac users because the two platforms are so similar these days. Similarly, you can use responsive design or related techniques to have a single site serve users with 19-inch monitors and users with 24-inch monitors, even though the former will see less info above the fold.

The benefit of separately optimized designs in such cases is simply too small to warrant multiple desktop designs; the same is true for iPhone vs. Android in the mobile realm. (Though you should make a few tweaks for things like native icons, as emphasized in our Visual Design for Mobile Devices course.)

For tablets, consider iPad vs. Kindle Fire: our user research shows that the 7-inch screen on Kindle Fire has sufficiently different usability requirements and that there would be some benefits to designing a separate site for it (and probably for other mid-sized tablets as well, even though we didn't test them). On the other hand, our studies also found that sites optimized for popular mobile phones work reasonably well when stretched across Kindle Fire's screen. For most companies, the conversion rate difference between serving the regular mobile site and creating a Fire-optimized site would be fairly small.

Is the small extra gain from designing and maintaining a separate user interface for Kindle Fire worth the extra cost? Amazon.com certainly thinks so, but they expect to sell a boatload to their semi-captive audience. For the vast majority of companies, however, this cost–benefit analysis would end in a different conclusion: repurpose the mobile site.

Another case where most companies decide against separate user interfaces is for users with disabilities. To support blind users perfectly requires a design that's optimized for linear presentation in an auditory medium. Accessibility is insufficient to create great usability from simply reading aloud a design that's optimized for 2D presentation in a visual medium.

In practice, there are so few blind users that it doesn't pay off to create a better design just for them. Giving perfect service to all disabled users would require an even wider set of distinct user interfaces, each optimized for a broad variety of disabilities. The cost is mind-boggling and the profits would be fairly small, because each class of disability contains a fairly small number of users. The common strategy of making the regular website accessible does penalize disabled users and makes them less productive and successful than non-disabled users. Although I don't like the accessibility strategy, I do recognize it as the only cost-effective solution, so I reluctantly recommend it.

Returning to the issue of repurposing print content for online use, most legacy newspapers and magazines have chosen to stick with this strategy. As a result, they've been less successful on the Internet than sites that create content using the guidelines for writing for the Web. Sites like CNN.com, Drudge Report, Huffington Post, and Craigslist are vastly more successful than newspaper sites, despite being not nearly as good or thorough in traditional terms.

Should newspapers discard their print content and create online content from scratch? There's no doubt that doing so would improve their websites. But the cost–benefit analysis would be negative because it's almost free to repurpose the existing articles, whereas the cost of running a second newsroom is substantial.

For another example, consider 3-D movies: the best have different cinematography than would be used for an equivalent 2-D movie. In 3-D, the camera should linger longer on establishing shots to give the audience time to look around the environment. (Something people empirically want to do in good 3-D movies.) At the other extreme, simply repurposing existing footage by making it pseudo-3D is almost always a recipe for failure.

Responsive Design: Sufficient for High Mobile Usability?

When considering mobile phones vs. desktop computers, the platform differences are great enough that the benefits of creating two separate designs are substantial. Furthermore, both platforms have many wealthy users, so the profits from maximizing conversion rates can be considerable.

Still, the question remains whether the cost–benefit analysis truly supports two sites, or whether it would be more profitable to stick with a single site.

First, you must consider your organization's size and how much business you conduct with mobile and desktop users. Some companies are so small that a higher conversion rate wouldn't translate into enough money to pay for two designs. Others might provide services that are targeted solely to mobile or desktop users and thus wouldn't suffer much from a lower conversion rate among the few users on the opposite platform.

Even if your organization is big enough to profit from separate mobile and desktop designs, some people commenting on my "Mobile Site vs. Full Site" column claimed that the cost was too high and thus recommended responsive design instead.

First of all, responsive design isn't free in terms of interaction design or in terms of coding and implementation. For some sites, it might be cheaper than other implementation strategies; if that's true for you, then do go that route.

But the most important point is that responsive design — if done correctly — does involve creating distinct user interfaces for each platform. After all, the entire idea is that the design adapts (or "responds") to the capabilities of the user's specific platform.

Most responsive design examples that I've seen are very primitive and don't go far enough to create the sufficiently distinct user interfaces that mobile vs. desktop use requires. It's not enough to simply modify the layout by moving stuff around on the screen and enlarging or diminishing particular design elements. This works only for adapting a desktop design to 19- vs. 24-inch monitors or for a mobile design for an iPhone vs. a Kindle Fire.

Mobile vs. desktop design differences go far beyond layout issues.

• Most important, the content should be different: shorter and simpler writing is required for the smaller screen because the lack of context reduces text comprehension.
  • Yes, people can read novels on a Kindle or other tablets, but that's mainly useful for simple fiction with a linear plot that's easy to follow. Reading business-oriented content or other non-fiction that requires higher levels of cognitive processing is more difficult on smaller screens.
  • In addition to text, other content formats should also be designed for the medium. For example, small images should be cropped and zoomed differently than large images to emphasize salient details. It's not enough to simply rescale a single image to fill the available space for a given screen size. (As an example, see 4 design iterations of an image representing a Korean pop group on a mobile screen.)
• The IA changes to defer secondary content to secondary pages on mobile devices.
• Interaction techniques change due to the differences between finger and mouse-driven input.
• The feature set is reduced in mobile to lower complexity and to fit on the smaller screen.

With enough coding, all of these differences can be supported through responsive design. In fact, you could argue that a design isn't responsive enough if it doesn't accommodate all the salient platform differences. However, once you do account for all the differences, we're back to square one: two separate designs.

When to Optimize for a Platform

Usability is about conversion rate maximization whereas design is about profit maximization. Therefore, prudent business decisions may sometimes generate a UI that's not all we'd like from a pure usability perspective.

It's okay to repurpose a single design for multiple platforms in two cases:

• When the platforms are very similar, so that small adaptations will suffice to make the same design work well in both places.
• When you expect to get very little business value from a platform or you simply cannot afford to create a second design. As long as you realize that you're giving some customers a substandard user experience (and can live with the associated drop in conversion rates), this is a rational — if unpleasant — business decision.

Conversely, you should create different designs optimized for each platform in these two cases:

• When the platforms are very different and require different interaction techniques, features, IA, and content, or dramatically different layouts that are too hard to achieve through responsive design.
• When you expect to generate so much business from users on a certain platform that you want to drive conversion rates to their absolute max. Even when platforms are relatively similar, distinct user interfaces are a smart choice when the stakes are high.

It defies all common sense to expect the same user interface to be optimal for 3.5-inch screens and 30 inch screens, with no modifications beyond moving a few things around. Diversity in our interactive platforms requires diverse interaction design.