Adobe Creative Cloud

June 29, 2017 /UX/UI Design /

Designing A Useful Product for Different Screen Sizes and Devices

This sounds really obvious in 2017, but people don’t use just one device and one screen for the whole of their online interactions anymore. I mean, even in my household alone, there is one desktop computer, four laptops (Mac and PC), three smartphones (running iOS and Android), and one tablet. And guess what, only two people live here. Plus the dog. But he doesn’t contribute much to our screen numbers.

Anyway, what I’m getting at is that these days every one of us uses multiple devices for multiple purposes. Some devices and screen sizes are better for X, others for Y. Some are better to type on, others to watch on. Some are better at home, others on the go. And so on and so forth.

All this creates kind of a unique challenge for app developers, website owners, or basically anyone who enters the tech space with their new product.

The challenge is this: How do I make my product viable and useful on all devices and all screen sizes? This may sound like a basic question at first, but it really isn’t. Here’s what I mean:

1. Everything Needs to Work, Regardless of the Device

The first thing we need to realize is that if we’re making something available on a given device then it needs to work on that device flawlessly (to the extent possible).

This sounds basic enough, right? I mean, when working on an iPhone app, it’s obvious that you need to make that app as awesome as possible and provide as good UX as possible. However, at the same time, you don’t have to worry about anyone attempting to launch the app on a completely different type of device. So in that light, apps are kind of basic. You build them for a specific device, specific screen, and you worry only about that.

Websites, on the other hand, are something entirely else. Websites can be accessed on whatever device, whatever screen, and this makes things rather difficult.

And the most difficult element here is that the user’s perception doesn’t change. No matter if they visit a website from their desktop or from their phone, they still expect it to work.

I guess what I’m trying to say is this: When releasing a product that can be accessed on a range of different devices and screen sizes, we shouldn’t consciously ignore some of those devices and think that “only the main intended device is the most important one.” It isn’t. They all are.

To make matters worse, responsive design isn’t the be-all end-all of multi-platform design. It only makes your design technically optimized, but not actually optimized. Here’s why:

2. Understand the User Context

Understanding how, when, and in what sort of a scenario the user interacts with the thing we’re building is key to good UX design. It is what enables us to fully understand the current situation that the user is in and how we can help them get from A to B. This is why context is always king.

Generally, user context can be identified by looking at the device being used, the social environment the user is in, and their physical environment. Depending on all that, the user might have completely different goals on their mind, even if they’re still interacting with the same app or website.

Let’s look at a basic example. When working on a website for a cafe, we need to realize that the website has to cater to a different kind of a user need based on the device it’s accessed from.

  • On desktop, the website will probably serve as a branding asset for the cafe, convey the ambience of the whole place, show some attractive photographs, some contact data, along with the menu and address info. Also, it will probably be highly integrated with social media, so that the desktop user can follow from one place to another and eventually check out the business’ Twitter, Facebook, and Instagram pages.
  • On mobile, the website should focus on only the bare minimum of things. Namely, contact and address data, opening hours, and menu.

Why so basic? It stands to reason that whoever’s searching for a particular cafe’s website by name and while on the go, simply wants to find out where the cafe is, if they’re currently open, and if they have their favorite beverage. Nothing more.

And yes, this does introduce some complexity into the design process – since you basically need to prepare more or less different versions of the project for different devices. However, it’s an approach that’s highly optimized for actual, real world users. A design project that misses the context won’t be able to cater to its end user effectively.

For a more tech-specific example, here’s what the main desktop panel of Remember The Milk – a popular productivity tool – looks like:

And here’s the mobile view:

As you can see, they are quite different. The desktop view provides a lot of information inside a three-column layout: the sidebar, the main task list, and the options/customizations panel. The mobile view, however, focuses just on the to-do list. The creators of this tool understand that whoever’s on mobile just wants to have a glance at the current tasks and interact with them quickly. On desktop, however, they can (and probably want to) manage their tasks in a more detailed manner. This is a good example of a company deeply understanding the contexts that their users are in.

3. Provide Continuity

As it turns out, people often start their online sessions on mobile and then switch to another device to continue where they left off. For example, people are very likely to start looking for new shoes on mobile, but then switch to desktop to further analyze their options and make the final decision.

This type of “sequential device usage” means that we should think about how we can provide the user some continuity, so that they don’t have to start from scratch whenever they change the device while interacting with our app or website. Chances are, if they have to start over, they won’t bother.

The first thing to do is to make the experience itself consistent. This is achieved by utilizing the same branding elements, color schemes, and the same mechanisms for the core functionality of the site or app. Apart from that, let’s think how we can build upon the mobile experience when the user switches to a bigger screen. Is there anything else that we can display that will help them achieve their goal? Provide more data, etc.? Answering this sort of questions will steer you in the right direction.

4. Go Mobile First

Perhaps a bit controversial approach to take, but it might just be the best thing we can do in this day and age. Let’s face it, mobile usage is on the rise, and even setting the massive app market aside, people still prefer to access standard websites via mobile rather than desktop. And these numbers are still growing.

What this means in plain English is that there’s a better chance that your next website visitor will be using their smartphone rather than their laptop. And this is huge because it changes the entire context of whom we’re building websites for in the first place. It’s no longer people sitting at their desks, it’s people on the go, trying to catch a bus.

So why not think about the majority first? Why not build whatever design for mobile first, and only then optimize it for other devices as well, instead of doing it the other way around?

If you don’t agree, that’s okay, but please at least contemplate on the idea and consider giving it a try when approaching your next project.

What’s Next?

At the end of the day, good UX is all about understanding what the user needs and how we can help them make that need a reality. And it just so happens that those goals – along with how we can help the user achieve them – can change based on the device the user is currently holding.

Just to reiterate, the process of designing for different screen sizes and devices can consist of a handful of steps:

  1. Make everything work, regardless of the device.
  2. Understand the user contexts.
  3. Provide continuity.
  4. (Probably) go mobile first.

Much easier said than done, I know, but it’s surely something worth pondering when working on your next projects.

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 Mr. Peabody - 12:14 PM on July 3, 2017  

    Which is why Microsoft’s Universal Windows Platform is so awesome. App UIs are completely responsive, with the same binary running on a PC or a phone or anything in between. The same UWP app looks great on any screen, from phones to the HoloLens to the massive Surface Hub conferencing systems.

  • By Lucas - 8:40 AM on July 27, 2017  

    I agree with most points. Cross channel experience is a hot topic in the design world today. It’s worth noting that mobile is more than just mobile. We’ve also got Apps competing for the users attention with the browser. When you say mobile, I actually think that there is a big space for improvement. Apps really aren’t going away as long as browsers are limited in their access to the phones hardware capabilities such as gps, camera, etc.

    So, mobile is App and mobile version of the Website. Having consistency, while still differentiating between the two is a big challenge. The app needs to have more capability in addition to what the web can do. I think this is the biggest argument for having a successful hybrid app.