Open in app

Sign in

Write

Sign in

Content Design and UI Mapping in a nutshell

How to deal with content to output it independently on any UI

Wolfram Nagel
6 min readNov 11, 2017

We live in a multiscreen world. Nowadays content has to be outputted on various interfaces. When you have to deal with both content and user interfaces (and UI components) it’s easier when you do this in a structured manner. When you have to (gather, manage and) publish content and display it independently on any target channel a “Content and UI Mapping” approach can help.

Content and user interfaces can be planned and assembled modularly and structured in a similar manner — comparable to bricks in a building block system. Content basically runs through three steps until it reaches its recipient: Gathering, management and output. A mapping has to occure at the intersections of these three steps.

I’ll explain this briefly in the following article…

Correlation and systematic mapping of Content and UI

Modules and bricks

A modular approach helps to develop platform-independent content and user interfaces which can then be put together in a way that correspond with the user’s needs and the context of use.

There are several concepts and strategies that are based on a modular approach with single “bricks”. With Content Design, Content Modeling, and Atomic Design (or “UI modeling” in other words) individual bricks are assembled according to the building block principle similarly to LEGO. Other approaches (among others) I found during my research on that topic are object-oriented programming, object-oriented UX, or the Content and Display Patterns.

Foremost one important aspect: If content is built upon the building block principle each brick (of content) can be outputted as independent as possible wherever you want.

Five-stage building block principle: Contents and user interface can be developed in a
modularly structured manner, comparable to the building blocks of the LEGO building
block system. The fifth stage (concrete shape) occurs with the recipient. There’s a correlation
between content and user interface. (source: Nagel, 2015b)

The content flows

Content basically runs through three steps until it reaches its recipient: Gathering, management and output. A mapping has to occur at the intersections of these three steps. For that mapping you need structured individual bricks that can be assigned to each other.

The Three-Step Content Hub (principle): 1) Collecting and authoring … 2) combining and managing … 3) outputting and distributing to various channels. The content hub in the middle plays a central and important role in the content flow. Content will be aggregated, mapped to a predefined content structure (if there are different input channels), organized and prepared for flexible output in the content hub (see also the content mapping example).

Content and user interfaces can (and should) be planned and assembled structured and modularly in a similar manner — comparable to bricks in a building block system.

Inspiration comes from the child’s room

A systematic and structured approach (inspired by LEGO): Make an inventory of all the bricks that are available (LEGO bricks, content bricks, UI bricks, …. whatever). You can then easily build (and assign) different combinations and types out of the same brick pool depending on how you need them (racing car, truck, …, article detailed page, overview page, search result, foreign touchpoint such as a twitter post, ….)

Systematic and structured approach: Make an inventory of all the bricks that are available (LEGO, content, UI, whatever). You can then easily build different types out of the same brick pool.

Brad Frost explains it in his own words.

“Rather than diving headfirst into constructing the final work, you can take the time to take stock of the available pieces and organize them in such a way that they become more useful. […] By taking the time to organize the parts, you can now create the whole in a more realistic, deliberate, and efficient manner.”

Combine the (content and UI) bricks

I’ll explain the result of the brick building approach with the following example. Individual content bricks of the (structured) content type “event” can be mapped and assigned to different shapes of a “teaser” UI component and its individual UI bricks in the target system (here: a website with desktop-like presentation). This works also with other touchpoints and output UIs.

Content type events displayed differently. Screenshot of a website (target system website, viewport “desktop”) with different teaser variations (large, medium, small).
Same content and different presentation: The three teaser variants extracted and isolated from the website with the individual UI bricks (except the image all exemplary available information is outputted textually).
Each content brick is assigned to a specific UI brick. The generic teaser variants schematized without content with the individual content bricks. The small teaser shows most information in this case and uses all exemplary content bricks of the content type “events”.

The achievement behind: One and the same content type can be displayed in various shapes AND vice versa. Different content types can be displayed similarly or even identically.

Sounds simple. When you have this in mind it will be easier to plan and design multiscreen-ready and touchpoint-independent content and user interfaces. Try it out.

📖🔖 You can find a more detailed explanation of this approach in another article.

I also uploaded some slides of my World Usability Day talk which explain this approach more visually.

Any thoughts? I’d be happy to read your comments.

If you liked this article, please ❤️ it so others stumble upon it as well! Thank you! You might also read some of my other articles.

Sources

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”.

Content Strategy
Multiscreen
Content Design
User Experience
UX Design

--

--

Wolfram Nagel

Written by Wolfram Nagel

553 Followers

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

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams