Designing Interfaces for Cross Device Use

Digital mobility and connectivity is becoming increasingly important every day. Users have their mobile devices nearby, check notifications frequently, and in some occasions use multiple devices at once. They are not limited to one screen at a time anymore. They do things with the device they believe is the best for a particular task or simply the one closest. Users connect to the Internet through multiple devices, starting an operation on their smartphone and completing it on their tablet or laptop. The continuous changing of devices has become common practice for a large number of people.

You can understand how crucial it is to start thinking about designing interfaces for cross device usage. If you are curious to know more about this topic, this article is a great start.

The cross device era

We live in a cross device reality and the way we access the Web, interact with people and undertake activities has changed significantly during the last few years. This is the why our applications or services need to understand how to be part of this world and communicate with each other. In this screencast Luke Wroblewski illustrates how recent research shows that in the USA:

• 50% of people who have a laptop also have a smartphone
• 30% of people who have a smartphone also have a tablet
• An increasing number of people make use of all three devices.

Moreover, studies show that there’s a large amount of users who use them sequentially and in the same day. Others use them simultaneously, with a number using a smartphone and TV. 66% use a smartphone and laptop/PC and 66% combine the use of laptop/PC and TV.

With this data in mind, you can understand why it’s crucial to learn how to combine their usage in interesting ways.

Access, flow, push and control

In his insight about designing in a cross-device reality, Luke Wroblewski cites four components to examine: access, flow, push, and control. In practical terms your content has to be accessible, look good on different devices and freely flow between screens. The same applies to processes that move as well, ensuring a good continuation of the process across screens.

Let’s look at an example.
You are searching for a restaurant on Google Maps using your tablet and you find a great place. You want to read its opening times, its address and some reviews. Your experience on the tablet is not good, you need a device with a wider screen to see things clearer. One good solution could be sending the information to a device which better fits this need (a TV or a laptop for example).

Now, think about how important is to give your users a better experience if your aim is for them to make purchases on your website. In fact, the addition of multiple screens, if utilized in the right way, is an opportunity for brands to reach consumers in new ways. Brands have to be sure that their messages reach consumers, no matter what platform they’re using. If you want to achieve this goal, a good way to make the switch between different channels easier is to synchronize experiences. Use data analysis to show users only the information they want to see and try not to annoy them by requiring a login each time they change device, or by making them start the process again.

From a practical point of view, you do not need a complex solution to achieve this and you can develop your own simple system. If you’re not an expert, you can place a “Save” or “Save as draft” button on a page, as systems like WordPress or Taleo do.

If you have extra time or want to offer a better experience to your users, create an automatic saving system so that data can be synchronized without the need of an explicit action by users. For example, when a user fills out a field or checks a checkbox, the system sends a request to the server that saves this data.

This solution is very good but has one flaw, on the device where the change was not made, to see the change, the user has to refresh/reload the page. If you want to implement this solution you will have to develop a system that can also receive updates from the server instead of only sending them. To accomplish this there are several options, such as:

• Long polling
• Server-side events
• Web sockets

If you want to look further into these topics, I suggest you to read this interesting discussion on Stack Overflow.

The result of this simple choice will be a more complete, unique, and fluid experience with content ever-consistent across devices. Remember the “Keep it simple” basic rule and simplify applications to make them quicker, faster, and easier to use.

Once sure that access and flow work, you should ensure that push and control cross-device usage is up to scratch, with no inconvenience for users.

With control, one device acts as a driver for the other. For example a tablet that can work as a remote control for a larger TV screen behind him. You have to allow one device to push content or information to another, or let one device control the functions or the display of another.

With push, the only function of the connected device accessed is the display or file system (in the case of sharing files). With control, you can manipulate or change functions on the connected device.

If you want to learn to design well, you need to take into account that we are now in an era of multiple device use and think about the strengths of each device in a cross-device scenario to offer the most appropriate solutions.

Conclusions

In this article we’ve reflected on how important is to ensure that your content reaches cross-device consumers. We’ve seen that now cross-device use is a reality and that, for this reason, you should be aware of this when designing and developing. Your first aim is to achieve user satisfaction and I think that to achieve this, you have to consider this aspect at the very first stage of your work.