Adobe Creative Cloud

Design

June 1, 2017 /UX/UI Design /

Designing for Different Screens and Devices: 7 Steps to Creating A Great UX

From a smartwatch with micro screens to the widest TV-screens, content should be developed to be viewed and interacted with across a range of screen sizes. But designing for different devices is more that just resizing content to display on different screens. It involves a lot of complexity: designers need to maximize the user experience for each device so users believe that the app was actually designed for their devices instead of being simply stretched to fit the screen.

In order to create a good UX, it’s necessary to develop an effective strategy to target a diverse range of devices and screen sizes.

1. Identify the Core User Experience

Each product has a core user experience, which is basically the reason why it exists. It solves a problem people have and by that, it becomes meaningful and provides value for them. A combination of key content and features represents the core user experience. To find the core UX of your product, ask yourself a question: “What are the most common and important tasks that customers need to complete?” It’s essential to support these core tasks on every channel you use for your product. For example, Uber’s core user experience is to request a ride easily, at any time. This feature should work well on each device intended for this purpose, regardless of screen size.

Ordering a taxi is the most important task for Uber users. Users are able to complete this task using Apple Watch. Image credit: Techcrunch

Identify Device Groups For Your Product

Although there’s a myriad of devices with varying screen sizes out there, and it’s absolutely impossible to target individual devices, it’s possible to define device groups for your product based the tasks the user is likely to focus on. The most common device groups are:

  • Mobile phones
  • Tablets
  • Desktops
  • Smart TVs
  • Smartwatches

Different device groups provide different services in different contexts: users engage in different interaction modes depending on the type of screen they are looking at. For example, mobile phones are used mostly for micro-tasks and have short user sessions. Tablets are primarily used for content consumption and aren’t currently considered a work tool for most people. Understanding this basic context assumption for the various device types is essential to building good UX.

2. Adapt the Experience for Each Context of Use

After you identify the core UX of your product and select a set of device groups which you would like to support, you need to adapt the experience for each group (for each context of use). Designing for context is especially important when designing for different device groups.

First, not all features make sense on all devices. You need to identify the different scenarios in which your product will be used across the groups of devices, and design an experience suitable for each of those scenarios. For example, quite often mobile users want different things from the product than desktop users. Take Evernote, a popular note-taking product that’s available on multiple devices, as an example. Its desktop version is optimized for content consumption:

Evernote app for desktop is optimized for reading text and viewing media.

Whereas the mobile version is optimized for taking notes, and photos, and capturing audio:

Evernote understands the mobile context: it utilizes the device capabilities and provides a quick way to save ideas (add a text note, capture a photo, or set a reminder).

Second, different screens allow for different input methods. Consider touch input as an example. A few common mistakes designers make when designing for devices with touch input (mobile phones and smartwatches) include:

  • Small tap targets. Tap targets (like CTA buttons) must be adequately sized. A minimum of 7mm is usually sufficient, however it’s better to use a 10mm touch target size.

Image credit: UXMag

  • Placing items too closely together. You should consider the size of tap targets, as well as the spacing between them, as spacing helps separate the controls and gives your user interface breathing room. Suggested spacing to prevent input errors is a minimum of 23pt.

Spacing between buttons.

  • Using hover states. On touch screens, there is no “hover.”

3. Design for Smallest Screen First

Historically designers have always worked from the biggest screen design down to the smallest — meaning that the first and primary design was for the full desktop view (it had the most functionality). Only after the desktop design was complete it ported to mobile and other device groups. However, when designing for desktop, we usually face the “kitchen sink” problem: lots of features are added to the product, especially when multiple stakeholders are involved. This isn’t surprising, since adding features is relatively easy when you have a lot of real estate. Practical experience clearly shows that it’s better to design with the Mobile First approach, and create your app with smallest screen that’s relevant for your users.

When you design for smallest relevant screen size first, it forces you to decide what matters most. After a while you will apply the same approach of careful selection to the other versions of the product, be it on desktop, tablet, or TV.

In most cases, a phone will be the smallest relevant screen size. If wearable devices are important to you, then you will need to consider micro-screens with even smaller resolutions.

4. Don’t Forget About Large Screens

Think about big screens as well as small ones, and give large screens the same level of attention you give small screens:

  • Do not just scale your design up so it fits on those large screens. Take full advantage of the extra space you have available to you.

Image credit: Wikipedia

  • Make sure that images do not lose quality as they scale up for the largest sized screens.

Left: Low quality image. Right: Correct resolution.

  • Consider large screen specifics. Each device group has it’s own specific. For example, designing for television screens is known as “designing for the 10-foot experience” because, from the distance of the couch, the apparent size of elements on the screen is noticeably smaller compared to a desktop screen.

User interface elements for the TV should be larger than for a desktop. Image credit: Samsung

5. Provide a Consistent Experience

A consistent experience means that the app and its experience are similar across all screen sizes. A consistent user experience, regardless of device, is one of the key components of a successful omnichannel user experience:

  • It sets expectations for future interactions with your product and builds user confidence.
  • Consistent experiences make it easier for users who have interacted with your product on other devices.

Rather than tailoring designs to each of an ever-increasing number of screens and devices, you can treat them as facets of the same experience. For example, the Google Search app provides the same search experience across all devices.

When designs and features are consistent, users can complete tasks faster and more efficiently on the device of their choice.

6. Create A Seamless Experience

Creating a seamless experience across different device groups is very important for your users. People freely move back and forth between devices to get things done, and when they are shifting from device to device, they expect their products and services to shift with them. This means users do not have to think about the device they are using, changes in the environment, or changes in context, and can rely on great functionality and ease of use independent of device.

How most people go about their day, and the primary screen they access. Image credit: Intercom

Based on usage scenarios, you might want to ensure that the content consumption on each device is in sync. Take Apple Music as an example: you can set-up a playlist on your Mac and it will instantly be available on your iPhone, or you can start listening to the song on your iPhone, and when you shift to the desktop you will be taken back to the point where you was on the iPhone.

Apple Music handles synchronization of multiple devices very well.

7. Test Your Design

What works in test environments does not always hold up in the real world. Running usability tests for your product with real users on actual devices will allow you to uncover UX issues to resolve prior to release.

Conclusion

When designing for multiple screens and devices, the best strategy is to keep the end-user experience in mind. As a UX designer, you must evaluate when, where and how a product will be used in order to assess the optimal experience for the user. Regardless of what size screen your content is on, users expect a smooth experience across devices.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe XD, the first all-in-one tool for creating and sharing website and mobile app designs.

DOWNLOAD

Join the discussion

  • By Alimul - 1:36 PM on June 2, 2017  

    Thank you for useful article.

  • By David - 8:39 AM on June 22, 2017  

    Hi Nick,

    Thank you the article, it is very useful and I learned a lot. I’m not a UX expert, but I have an interest in it. You obviously are an expert in it!

    Please don’t think I’m trying to be a jerk, but your knowledge led me to the about the author part of the article where your info is. I swear, I’m really not trying to be a troll or a douche, but it may be worth conisdering editing “with a specialized focus on development” to “with a focus on development” or “a specialization in development”. The combo of the two words repetitive, or “repetitively redundant” as a boss of mine used to say. In any case, I don’t mean to nitpick or be that guy, I just thought it may be useful for others who may read this article. Thanks again for the article!

  • By Peter Burton - 9:59 AM on June 22, 2017  

    EBook device display via Adobe UX design

  • By Etienne Lareau - 10:11 AM on June 22, 2017  

    Very clear! Thanx!

  • By Vernon - 10:24 AM on June 22, 2017  

    Thanks for the tips, great article!

  • By Rick Dyer - 3:15 AM on June 26, 2017  

    I love the bit about “Content is like water”. It’s quite thought provoking. The meaning I get from this is – Put content in a cup and it becomes a drink. Put the same content in a pool and it becomes a swim. Users get different experiences of content from different devices. If your content doesn’t suit the device either adapt the content for the different experience, or don’t put it there. Control of UX by device type gives users the experience you want them to have.