Multiscreen UX Design

Wolfram Nagel
7 min readJul 29, 2016

We live in a Multiscreen-World. Everything needs to work across devices. This requires a holistic strategy.

Increasing device fragmentation leads to a change in how devices are being used. This is one of the greatest challenges we’re facing today when developing concepts and strategies for digital services.

📘 Find more about this topic on the book’s web page.

Source: “Multiscreen UX Design — Developing For A Multitude Of Devices”

Holistic approach

A holistic approach will increase your chances to cater for your customers in a way they naturally expect. I discovered, aggregated and expanded a number of helpful principles and patterns which you can utilize during the conception, design and development of cross-device and cross-platform services.

  • Different devices or information services can and will more and more be used simultaneously.
  • Different pieces of information may complement one another.
  • The display of information or content can be shifted to a separate device or be switched from one screen to the other.
  • Devices can influence, control and complement both each other and the information displayed on the screens.
  • Information has always to be synchronized between devices and thus kept updated to the same extent on all devices.
  • You can also extend and distribute the display of information across multiple screens.
  • Individual features must be optimized for device capabilities, type of use, and context of use.
  • It is advisable to concentrate on the most important and the most challenging device(s) first. The smallest or most limited screens (concerning size) force a meaningful structure of information.
  • If you develop initially for small or limited screens, owing to the necessity for size reduction, will result in a better structuring of the information.
  • Informational offerings should function similarly between devices and offer a uniform and fluid user experience.
  • Content should be as flexible as possible, to be easily used and published across different channels and devices.
  • A service is emotionally more attractive, if it is fun and supports a device fragmented daily routine.
  • A game factor can motivate people if it is challenging and provides relevant goals.
  • Get the small things right and try to focus on details to enhance the user experience.

These are just some briefly described patterns and tips. There are some more issues that have to be taken into consideration, such as technical challenges and legal issues. These are explained in more detail in my book with best practices, real-world examples, and tips and tricks that can help you improve your own digital products and services by employing an effective multiscreen strategy.

The diagram shows the most important terms and topics (and their relations) that are discussed in the book.

Four key aspects

Besides these patterns there are four important parameters of a useful and user-friendly multiscreen offering: Firstly knowing the devices and their capabilities; secondly understanding the users and their capabilities; thirdly considering the context in which users use these devices; and finally knowing how to gather, organize and publish content and map it to multiple and various user interfaces.

I primarily refer to the five most relevant screens: smartphone, tablet, laptop or PC, smart TV and smartwatches which can be described and grouped although they overlap in a way. It is helpful and important to be familiar with all relevant device (classes), their features, typical use, and combination possibilities. Invisible objects and devices without screens have to be considered as well.

Put the user at the centre, know your target audience and try to answer important questions. Who are the most important or relevant users, what devices do they use and why? What are their motives, requirements and needs? What does a typical day in the life of the typical user look like? How does his workflow look? What are the typical touchpoints — that is, what device is being used, when, by whom, and for what purpose?

You should know, understand and define the relevant contexts of use and the parameters user, device, usage mode, situation, and the environment. The mobile context of use is everywhere (always when you use a mobile device).

I recommend to know and apply relevant patterns, methods, and principles that help developing a multiscreen-ready strategy.

Multiscreen strategies and examples. There are various patterns, principles, methods, and approaches that you can rely on during the conception of cross-device and cross-platform services. Some of them are based in part on the classification and definition of precious design studio. We have expanded, aggregated, and adapted these patterns.

Everything stands and falls with data suitable for multiscreen. Flexible and dynamic layouts and (!) content are paramount. This requires appropriate content management workflows and a suitable content strategy. Of course the content should never be isolated from the potential user and the context of use. You should always consider content when you think about the user experience of your service.

Tackle the future of content (management). Consider content flows and how information is created, managed, published, and received. Optimize the back end UX for authors and content curators, and use a centralized content hub for channeling and aggregation. Apply and establish the building block principle. Build content and user interfaces in a modular and structured manner based on the smallest possible units. Consider the correlation between these elements, larger components, types, and concrete objects. This is challenging and can be extensive but worth the effort and absolutely helpful and should be the base for all your multiscreen projects.

I talked about this topic at several conferences and published a summary on Slideshare.

Content Design and UI Architecture for Multiscreen Projects (compact)

Content Design and UI Architecture for Multiscreen Projects (compact) from Wolfram Nagel

This topic is also covered in chapter 7 in my book. You can download a preview of it (PDF, 658KB).

Multiscreen UX Design (ISBN-13: 978–0128027295)

Think Multiscreen and embrace the uncertainty

Live and breathe multiscreen and your job will be a lot of fun. It is easier to create appropriate services and future friendly concepts when you’re frequently using multiscreen services and ecosystems in your personal life instead of only picking them up when you need them. Bringing your own experiences to the table makes your research a lot easier. You’re doing user research on yourself.

There will be a lot more interfaces and Internet-connected devices (e.g. wearables, glasses, connected cars) in the near future. Automotive interfaces and infotainment systems will increasingly be integrated into various ecosystems and networked with other information and services. There will also be invisible devices (Internet of Things). Virtual world will merge more and more.

Information and interfaces are not just visual. Audio, visual, and haptic input, output and interaction have to be coherent. All graphical user interfaces (and/ or services) will potentially have to be controlled by voice as well. Information generated by audio input has to be potentially processed to be editable, manageable, and reusable by any kind of content hub or information management system.

Now and in the future information will and have to be displayed on screens and we will interact with them. All this will lead to an even more fragmented multiscreen environment, and that fact should, and must be considered when designing and planning multiscreen-projects.

It won’t be any easier, but will be even more exciting for designers and developers to work on digital projects in the future. It remains exciting. Be open for change. The future will show us how to proceed. I look forward to it!

You can also get a summary of the topic in the following slides:

More interested in the topic? My book Multiscreen UX Design — Developing for a Multitude of Devices is available for purchase on the Elsevier Store. Use discount code STC215 at checkout to save up to 30% on your very own copy!

I hope you enjoy it! If you have any questions, feel free to send me an e-mail to wolfram.nagel@setusoft.de

Note: This article was originally published on the Elsevier blog.

There’s also a little article series on the same topic.

About the author

Wolfram Nagel is a UX Designer, UI Architect, and Concept Developer. As Senior User Experience Designer at TeamViewer he is responsible for conception and design in close collaboration with product owners, product managers, front-end and back-end developers.

Previously he worked as Head of UX for SETU GmbH (a German software engineering company) with main responsibility in the areas of multiscreen, user experience, content design, UI architecture, and visual design. He gives talkes to these topics and is author of the book “Multiscreen UX Design”.

Wolfram studied Information Design (diploma) and Design Management (Master of Arts) at the Hochschule für Gestaltung Schwäbisch Gmünd, Germany (University of Applied Sciences). Since 2011, he has lectured and hosted several talks & workshops at conferences such as IxDA Berlin, Usability Professionals Germany and the German IA Summit and at and for universities, academies and agencies. He is the author of Multiscreen UX Design — Developing for a Multitude of Devices

You can also catch Wolfram at one of the following platforms and social networks:

--

--

Wolfram Nagel

UX Designer (@TeamViewer), UI Architect, JTBD Practitioner, Author of “Multiscreen UX Design”, Initiator of the “Design Methods Finder”. I love my 👪 and ⚽️🚵📸