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.
2. 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:
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.
- 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.
- 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.
- Make sure that images do not lose quality as they scale up for the largest sized screens.
- 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.
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.
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.
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.
Originally published at blogs.adobe.com.
Learn about Adobe XD, our all-in-one design and prototyping tool:
- Download Adobe Experience Design CC (Beta)
- Adobe XD Twitter account — also use #adobexd to talk to the team!
- Adobe XD UserVoice ideas database
- Adobe XD forum
