Designing for Multiscreen — Multiscreen-ready layout and content! (5/6)
The 5th one of 6 things you should consider when developing strategies for digital services across multiple screens
--
More and more people are using more and more screens. Users expect to access information on all relevant screens. Thus digital services require a holistic strategy.
Together with Pascal Raabe, from the UI/UX studio ustwo™ I’m going to introduce six practical tips (in an article series) that can help you improve your own digital products and services by employing an effective multiscreen strategy.
Overview
- Think multiscreen
- Know your screens
- Put the user at the centre
- Context is King
- Multiscreen-ready layout and content
- Challenges are chances
This is the fifth article. The last one will follow in November.
(Note: This article has been slightly updated since its first publication, based on recent developments and insights.)
5) Multiscreen-ready layout and content!
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.
Responsive Webdesign
A modern information offering needs to be accessible on every relevant device. However even within the separate device classes there are enormous differences in terms of the screen size and resolution. Employing flexible, scaleable and adaptive layouts that respond to the device or screen and its properties are a must (see also Marcotte and Tran).
Layout patterns
There are two different approaches: Either the content layout adapts to the changing width when reducing the browser size or you define two or more breakpoints for the output on different devices. Breakpoints are thresholds for which new or different layout templates, rules and definitions apply.
Luke Wrobleski identified five general layout patterns: Mostly Fluid, Column Drop, Layout Shifter, Tiny Tweaks, Off Canvas. These patterns differ in the alignment of the different layout elements depending on the changing screen width. For some only the content area shrinks, others change the alignment of elements at certain breakpoints to be displayed below the main content or somewhere else.
Smart Content
Not only the layout but also the content should adjust to the different situations. The content depth should always be the same since some users access information exclusively on mobile devices. That’s why we should not differentiate between mobile and other content. There is only one information and it is accessed, displayed and used in different ways.
In order to design a sensible layout you should know the scope, type and format of the content (Content First). It makes a difference whether you need to display long or short copy, images, galleries, or videos. Concept, design, and implementation need to go hand in hand.
An information service needs to respond flexibly to behavioural patterns, bandwidth, processing speed, and other variables of the device in use. Only like this we can fully embrace the capabilities of the different devices.
Content is smart when it adapts fluidly and flexibly to devices, layouts and the appropriate context of use. Josh Clark uses the metaphor “Content like water” to explain this concept. No matter whether you fill a cup, a bowl or a glass – it always adapts exactly to the shape of the vessel. That’s how flexible content should be too.
In addition, future friendly content is accessible to everyone, adaptable, findable, convertible, connectible, reusable, and archivable. Never hide content from users and always enable them to adapt them to their needs and requirements (screen readers, layout, contrast, text size). Metadata makes content easier to find. Good content is easy to modify and easy to connect with other services. It is format-independent or at least easy to convert to a different format. It is flexible in regards to aggregation, combination, transfer, conservation (e.g. Read Later) and archiving. You can find more about this topic in a German report by Markus Erle.
Cloud computing, content mamanagement systems and APIs play an important role in the flexible display and transfer of content. Josh Clark says “The API runs the show” (This quote is from his talk at MobX Conference 2011). In order to create and maintain multiscreen ready information and data we need backend systems with flexible content management structures. With a common backend or CMS for all content you can avoid redundant and inconsistent data in your maintenance.
The more elegant and granular the content, data and information the more flexibly they can be used across devices. Formatting is the job of the presentation system. Formatting only belongs into the data holding system in a reduced form. (Visually) Unformatted copy is much easier to integrate into other information services (app, software, news) and easier to display on different devices, screens and applications.
After introducing the COPE principle (Create Once, Publish Everywhere) at NPR, they are able to broadcast information everywhere, fast and efficiently. The new interface had a large influence on the mobile strategy as it wasn’t necessary anymore to develop an app or service for every channel separately.
If possible the content, structure, and presentation should be separated strictly from one another. The following trisection is recommended:
• Creating and maintaining the content
• Information architecture, structure of the content elements and metadata
• Presentation and display depending on the medium, device and context of use.
The more independent from the actual use the content is captured, the more flexible it can be applied to different media and channels – regardless whether it is print, TV or the Internet.
Structure is more important than presentation
Before you develop a layout or a visual design you need to know what kind of content is to be published. Because information is not only consumed on a particular platform but also aggregated to create new information packages through other applications, it is important to focus on the design of the information instead of the design of the display (content design vs. visual design).
In order to display or aggregate information optimally, they need to be clearly structured, for example using meta data or meta information. Only well structured data can be accessed through an interface. Structuring the information is the basis of a media-neutral content strategy.
“The future of mobile is structured content.” – Karen McGrane
You should also have a look at Karen’s talk about “Content in a Zombie Apocalypse”. Just great!
Authors must be able to create or edit contents upon the basis of the semantic significance as well as be able to maintain and manage content relationships and usage types.
“We’re gonna have to break content creators out of the mindset that their job is creating web pages and instead give them tools that help them envision how their content will be published in new ways.” – Karen McGrane
Content Management and Content Manager Experience
Many CMSs are largely unsuitable for platform-independent content maintenance. Interfaces are often unattractive and the user experiences for the author or editor leave something to be desired: Usage is no fun. However, it is exceedingly important to motivate those people to create and maintain the information. This aspect is one of the main topics of my talk “Next Generation Information Experience” at Usability Professionals 2014 in Munich (Slides in German).
Content Design and UI Architecture
Information distribution is changing disruptively. Digital contents can appear everywhere today. It is just a fact that we use digital services daily on a wide array of devices and media. Information flows into all channels.
Media publishers and content owners (which is nearly everyone that offers any kind of information on the web) are no longer in control of how and where their contents are distributed and retrieved. But they can prepare their content (structure, flow and appearance) for such a scenario.
In order to create a uniform user experience, a continuous flow of information is required. The requirement for this is a central hub for contents, a system for the definition of user interface (UI) elements, and rules regarding when which contents are displayed in which combination where and how.
So that this can be solved technically, it is necessary to plan and develop the contents, user interfaces, and workflows based on a respectively similar model in a modular and structured manner — comparable with the building blocks in a building block system. Based on these requirements, there is a distinct need for design systems. In my talk on “Content Design and UI Architecture” at Usability Professionals Conference 2015 I described how to combine well-known and established methods and patterns from content strategy, information architecture, content modeling, and UI design to create relationships in order to develop new added-value approaches. I also wrote an article on that topic!
You have to know your content. Conduct a content audit and/or content inventory. Analyze your content (structure) to start designing based on these findings. Only when content is collected, stored, and edited in one place, you can avoid redundancy, guarantee consistency and are able to structure and prepare it for the publication to and the usage in every imaginable context.
(Beside the user, context, and screens) Content, user interfaces, workflows, and APIs are the basic requirement to be able to publish content on a huge variety of screens and diverse channels. Flexibility by using the (generic five-stage) building block principle.
Define and built larger components and concrete objects as you would do this with LEGO® bricks. Start with the content and use the correlation between content elements and UI elements (in the back end and the front end) to design your user interfaces and plan (for the uncertain) appearance of your content in different channels and touchpoints.
I describe all that in chapter 7 in my book and will talk about new and iterated ideas on that topic in September at Usability Professionals 2016 again.
You can have a look at a preview of chapter 7 here.
—-
Stay tuned for the last article, because ”Challenges are chances”. Any questions? Just send me an e-mail.
—-
With the Multiscreen Experience Project we gathered and developed a number of patterns, methodologies, and insights and compiled them in a book. In this article series I introduce the most important aspects of a useful and user-friendly multiscreen offering.
Update (12/14/2015): If you’re more interested in the topic. My new English book “Multiscreen UX Design” is available sind 14th December 2015.
The described topic is mainly and detailed covered in chapters 5.10, 6, and 7. You can use the code COMP315 for 30% off (incl. free shipping, worldwide).
