This document discusses methods and conceptual considerations for content design and user interface architecture for multiscreen projects according to the building block principle. It introduces concepts like multiscreen strategies, content modeling, content structure mapping, content and UI mapping, and using a building block approach to define smallest reusable elements that can be combined to create interfaces for different devices and contexts. The document is from a presentation given at the World Usability Day at Hochschule Aalen on November 9th, 2017.

1. Content Design and UI Architecture
for Multiscreen Projects
World Usability Day, Hochschule Aalen | 9th
November 2017 | Wolfram Nagel, TeamViewer GmbH (Germany)

2. Methods and conceptual considerations for multiscreen-ready
content and user interfaces according to the building block principle
Content Design AND
UI Architecture For
Multiscreen Projects
World Usability Day, Hochschule Aalen
9. November 2017
Wolfram Nagel, TeamViewer GmbH (Germany)
All rights reserved.

3. Wolfram Nagel
Senior UX Designer (TeamViewer)
Blizz Online Meeting and Collaboration
UI/UX, Multiscreen, Content Design
Author „Multiscreen UX Design“
Co-Initiator Design Methoden Finder
www.designmethodenfinder.de
Twitter:@wolframnagel#Multiscreen #UX#ContentDesign

4. Remote Access
Remote Support
Remote Maintenance
Home Office
Online Meetings
Online Meetings
Online Collaboration
Screen Sharing
Video calls with up to 300 people
Free for up to 5 participants
www.blizz.com

5. 1 | Multiscreen
2 | Content Design
3 | UI Mapping

6. Multiscreen
World

7. http://www.huffingtonpost.ca/2013/06/10/tv-viewing-habits-canada-rogers-survey_n_3415721.html

8. We are a nation of
multiscreeners. Most of
media time today is spent in
front of a screen.
Google Study 2012
http://www.thinkwithgoogle.com/research-studies/the-new-multi-screen-world-study.html

9. „The Future of Content Management“ (chapter 6) and „Content Design and UI Architecture“ (chapter 7)
in: Multiscreen UX Design, Morgan Kaufmann (www.multiscreen-ux-design.com)

10. Device / Screen
Context of Use
User
Strategies
and Examples
From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)

11. Multiscreen
From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)

12. 10 – 30 cm
30 – 50 cm
1 m
3 m
Distance User <––> Screen
From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)

13. http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/
http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/
People use any platform
to do anything.
Giles Colborne

14. Margaret Brown Kelly AdamsBarbara Stewart Melissa Anderson
Andrew Collins Mark Hudson Robert Sullivan Larry Newton
User Prototypes

15. Mark Hudson (Trend user)
aged 35, single | event manager, secondary school

16. MODEOF
US
E SI
TUATION
Context of use
ENVIRONMENT

17. mobile context of use

18. Multiscreen
Strategies

19. Microjoyment Hybrid MediaGamification Storyfication Emotionality
Screen Sharing Coherence Fluidity Smart Content
Mobile First Simultaneity Social TV Device Shifting Complementarity
strategies and examples
Synchronisation
Mashability Communification
From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)

20. SimultanEITY
Different devices or information services are used simultaneously. Different pieces of information may complement one another.

21. Parallel, additional information on the second screen.
(http://www.designbynotion.com/metamirror-next-generation-tv)

22. Device Shifting
The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.

23. With Apple AirPlay (and Apple TV) you can change devices in the middle of a film and continue obtaining information on another screen.
The film is shifted from one (e.g., the iPhone) to another device (e.g., the TV). → http://www.youtube.com/watch?v=sPuAiA4O344

24. Complementarity
Both the devices and the information depicted on the screens reciprocally influence, control, and complement each other.

25. Connect the smarthpone with the desktop browser and navigate the website via smartphone. → http://www.diplomatic-cover.com/multi

26. With the TeamViewer QuickSupport smartphone app you can remotely control, monitor, and maintain other computers or mobile devices.

27. Screen Sharing
An information (source) is displayed across multiple screens and shifted or expanded to them.

28. With the slot car racing game »Racer« you can use several
screens to expand the race track. (http://g.co/racer).

29. Blizz is an online meeting and collaboration service. You can share your screen or a specific application with up to 300 participants
across various devices.

30. Fluidity
Information offerings should function similarly across devices and offer an unchanging and fluid user experience.

31. Applications (e.g., smartphone apps) should generally offer the same functionality. That was previously not the case with the
Facebook apps for the iPhone and Android due to the different smartphones and operating systems (Workman, 2011).

32. Communification
Social networking and creating a community can make an information service more attractive for the users.
Users create, share, rate, and comment on content.

33. Example Nike+ mit iPhone app, social network itegration, own community and gamification features.

34. Gamification
Game mechanics simulate a competitive environment. A game factor can motivate people if it is challenging and provides relevant goals.

35. With the Heineken Star Player iPhone app, viewers can predict live the outcome of individual game situations during a soccer match
and accumulate points. The app expands the live event on TV with offerings that are beneficial exclusively parallel to the game.

36. Microjoyment
Due to the increasing information density, you must simplify small and important subtasks. Focus on details to enhance the user experience.

37. mytaxi app: Find and order a nearbby taxi. Reduced interface for the watch screen. At the end of the taxi ride the passenger can
easily rate the taxi driver and pay by one tap on his watch (cf. mytaxi, 2015).

38. Coherence
Information is displayed in a manner that is device and screen independent, logical, and coherent. Individual features are optimised
for device capabilities. (Responsive Design, Atomic Design, Content Design, Content UI Mapping, etc.)

39. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
More about coherent interfaces and smart content via www.msxbook.com/CDUIM and www.msxbook.com/CDUIMtxt

40. Smart Content
Content should be as flexible as possible, to be easily used and published across different channels and devices.

41. National Public Radio (NPR) uses and provides an open API according to the COPE principle—create once, publish everywhere (Jacobson, 2009).
More about smart content and coherent interfaces via www.msxbook.com/CDUIM and www.msxbook.com/CDUIMtxt

42. Content Design
AND Touchpoints

43. Selection of target channels, devices and touchpoints
Example „New York Times“ article

44. Instapaper
Website
(Smartphone)
E-Mail
(Sharing)
Facebook
(Sharing)
Facebook
(Timeline)
Twitter
(Sharing)
Twitter
(with Summary)
Twitter
(Tweet only)
Smartwatch
(Push Notification)
Smartphone
WhatsApp
(News-Abo)
iPhone App
Desktop
(Website)
Tablet
(Video Content)
Selection of target channels, devices and touchpoints
Example „New York Times“ article

46. Touchpoints
foreign
Instapaper Facebook (Desktop)Browser (Safari / iOS)
own
iPhone App

47. User
Content
Rules UI
Interfaces (API)
Four core areas (+ the user, of course)

48. Design from the Content out.
Stephen Hay
http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/

49. Bricks and
Modules

50. Source: LEGO® bricks: http://cache.lego.com/r/www/r/aboutus/-/media/about%20us/media%20assets%20library/products/lego%20bricks/720_lego_bricksloose.jpg?l.r2=-1799651218
LEGO Bricks

55. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...

56. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
brick

57. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
componentbrick

58. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
componentbrick segment

59. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
componentbrick segment TYPE object

60. 1 2 4 53
brickLEGO bumper bar truck fire truckdriving cab
CONTENT
USER
INTERFACE
ELEMENT COMPONENT TYPE INSTANCE /
OBJECT
SEGMENT
generic / strukture
(MADE from)
concret / specific
(IS)
atomAtomic Design molecule template pageorganism
real content
information object
incl. tone of voice
real page
instance of the template
incl. visual design
content wireframe
article, recipe,
application for leave,
product specification
(semantic structure)
UI template (+IxD)
touchpoint-dependent
and preview-relevant
module group
text section,
paragraph, chapter,
rubric
layout area
(e.g. header with
search form, logo,
navigation)
brick group
(combination of smallest possible elements)
content module
image + caption
quote + author
teaser with headline,
image and description
search form
(consisting of label,
input field and button)
smallest possible
unit / brick
title, subtitle,
description,
reference, date,
image, caption,
metainfo, author
label, input field,
button
Building block principle
brick type
target system
brick group

61. brick component segment type object
Atomic Design
Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
brick UI typebrick group

62. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
brick

63. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
component

64. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
SEGMENT

65. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
TYPe

66. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
SEGMENT
component
brick
TYPe

67. instance of type
(concrete specific
web page)

68. brick
component SEGMENT TYPe

69. Content type „Recipe“

70. name of recipe
name of recipe
footnote
softlink
instruction
image
author
recipe information
ingredients
category
Content type „Recipe“

71. Content model
xxx
name (1 day ticket)
price
date of purchase
[...]
TICKET (TYPE)
title
date
description
[...]
EVENT
title
date
body
[...]
NEWS ITEM
name
photo
biography
URL
company
[...]
SPEAKER
name (e.g. usability)
description
time
[...]
SESSION
title
abstract
description
start time
duration
[...]
PRESENTATION
name
address
URL
[...]
VENUE
held at
featured in
valid for about
featured in presented by
Own illustration (source: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)

72. Content model
Correlation of content types
Own illustration (source: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)
name (1 day ticket)
price
date of purchase
[...]
TICKET (TYPE)
title
date
description
[...]
EVENT
title
date
body
[...]
NEWS ITEM
name
photo
biography
URL
company
[...]
SPEAKER
name (e.g. usability)
description
time
[...]
SESSION
title
abstract
description
start time
duration
[...]
PRESENTATION
name
address
URL
[...]
VENUE
held at
featured in
valid for about
featured in presented by
title
abstract
description
start time
duration
max. attendee
prior knowledge
[...]
WORKSHOP
variation of
content type
content type
brick
group
shape

73. Content and
UI Mapping

74. Content flow
Source: „Die Zukunft von Content (Management)“ / www.msxbook.com/ngixup14

75. Content flow
(three-step)
Input manage Output
various sources various channelsContent Hub
1 2 3

76. Content flow
(three-step)
content structure mapping
Content from any source is mapped to
defined content structure.
1 2 3
Input manage Output
various sources various channelsContent Hub

77. Content flow
(three-step)
UI MAPPING
Structured content is mapped
for presentation in various target
channels.
content structure mapping
Content from any source is mapped to
defined content structure.
1 2 3
Input manage Output
various sources various channelsContent Hub

78. https://twitter.com/sorenmalling/status/691388259377745920

79. Content Structure Mapping
(in the centralized content hub / exemplified)
Title / Headline
Short text
Long text*
Image
Date
Author
Document
E-Mail
subject
-
mailtext
attachment
mailing date
sender
attachment
Evernote
title of notice
-
notice text
integrated
last date of change
originator
reference
Twitter
-
tweet text
linked content
attached
date of tweet
account
linked file
Facebook
-
text of post
linked content
attached
date of post
account
linked file
Content elements can be generated via variable input channels (each channel quasi serves as CMS)
*Semantic structuring (e.g. H1, bold, quote, listing, etc.) is adopted.

80. Content Structure Mapping
(in the centralized content hub / exemplified)
Article
Title / Headline
Short text
Long text*
Image
Date
Author
Document
E-Mail
subject
-
mailtext
attachment
mailing date
sender
attachment
Evernote
title of notice
-
notice text
integrated
last date of change
originator
reference
Twitter
-
tweet text
linked content
attached
date of tweet
account
linked file
Facebook
-
text of post
linked content
attached
date of post
account
linked file

81. title
image (with caption, originator)
dateauthor(s)
short textlong text
Content structure
Title / Headline
Short text
Long text
Image
Date
Author

83. Correlation and Mapping
(SAME content → different presentation)

84. LARGE Medium
Small

85. LARGE Medium
Small
Content type (events)
Category
Image
Title
Subtitle
Date
Location
Description

86. LARGE Medium
Small

87. LARGE Medium
Small

88. Content bricks
Category | Image | Title | Subtitle | Date | Location | Description
Teaser Large
Large image | Title | 4x Short text
Teaser Medium
Small image | Title | 5x Short text
Teaser Small
No image | Title | 4x Short text
Content type (events)
Different presentation
LARGE
Medium
Small

89. Content bricks
Category | Image | Title | Subtitle | Date | Location | Description
Content type (events)
LARGE
Medium
Small

90. LARGE
Medium
Small
Content bricks
Category | Image | Title | Subtitle | Date | Location | Description
Content type (events)

91. Bricks
Category | Image | Title | Subtitle | Date | Location | Description
Bricks
Category | Image | Title | Subtitle | Date | Location | Description
Bricks
Category | Image | Title | Subtitle | Date | Location | Description
Content type (events)
Content type (events)
Content type (events)
Small
LARGE
Medium

92. LARGE
Medium
Small
Bricks
Category | Image | Title | Subtitle | Date | Location | Descrip-
Bricks
Category | Image | Title | Subtitle | Date | Location | Descrip-
Bricks
Category | Image | Title | Subtitle | Date | Location | Descrip-
Content type (events)
Content type (events)
Content type (events)
Content bricks UI bricksMapping

93. Correlation and Mapping
(Different content → Same presentation)
Article
Headline, Date, Abstract, Category, Image, Author,
...
Teaser (Article)
Event
Title, Date, Location, Category, Image, Time, Admissi-
on, ...
Teaser (Event)
Generic structure
Main text, Short text (3x), Image
Teaser component (generic)
Different content types
Identical presentation
Content type „events“
Title
Date
Location
Category
Image
Time
Admission
Content type „article“
Headline
Date
Abstract
Category
Image
Author
...
Generic structure
Main text
Short text
Short text
Short text
Image

94. Correlation and Mapping
(Different content → Same presentation)
Article
Headline, Date, Abstract, Category, Image, Author,
Teaser (Article)
Event
Title, Date, Location, Category, Image, Time, Admission,
Teaser (Event)
Generic structure
Main text, Short text (3x), Image
Teaser component (generic)
Different content types
Identical presentation

95. Correlation and Mapping
(Different content → same presentation)
Article
Headline, Date, Abstract, Category, Image, Author,
Teaser (Article)
Event
Title, Date, Location, Category, Image, Time, Admission,
Teaser (Event)
Generic structure
Main text, Short text (3x), Image
Teaser component (generic)
Different content types
Identical presentation

96. Correlation and Mapping
(Different content → same presentation)
Teaser (Article)Teaser (Event) Teaser component (generic)
Identical presentation Identical presentation
Article
Headline, Date, Abstract, Category, Image, Author,
Event
Title, Date, Location, Category, Image, Time, Admission,
Generic structure
Main text, Short text (3x), Image
Different content types

97. Article
Headline, Date, Abstract, Category, Image, Au-
thor, ...
Event
Title, Date, Location, Category, Image, Time, Admission,
...
Generic structure
Main text, Short text (3x), Image
Different content types
Correlation and Mapping
(Different content → same presentation)
Teaser (Article)Teaser (Event) Teaser component (generic)
Identical presentation
Content type „events“
Titel
Termin
Location
Rubrik
Bild
Uhrzeit
Eintritt
Content type „article“
Headline
Datum
Abstract
Rubrik
Bild
Author
...
Generic structure
Haupttext
Kurztext
Kurztext
Kurztext
Bild

99. Rough overview. Process depends on project. Phases may overlap, parallel, or change.
› User / Target group / Context
› Recognize topic / Taxonomy
› Output channels and devices
› Content inventory / content design
› Content gathering (systems, users, sources)
› Workflows and interfaces (API)
› UI models / Living styleguide
› Interaction / Prototyping
› Visual design and development
Methodical approch

100. Rough overview. Process depends on project. Phases may overlap, parallel, or change.
› User / Target group / Context
› Recognize topic / Taxonomy
› Output channels and devices
› Content inventory / content design
› Content gathering (systems, users, sources)
› Workflows and interfaces (API))
› UI models / Living styleguide
› Interaction / Prototyping
› Visual design and development
Methodical approch
ITERATION

101. Book
Smartphone
Dress
LEGO
Shoe
Television

102. Article description
Image
Long description
Author
Price
Product page of a book on Amazon
Five exemplary bricks are highlighted: Image, Article description, Author, Price, Long description

103. component / Element
Article description
Article description (detail)
Long description
Special information
Image(s)
Edition
Publication date
Reading excerpt (Look inside)
Translator
Audio sample (audio)
From / Author / Manufacturer
Brand label
Provider
Prime / Delivery
Rating
Recensions
Variations
Format / Size
Price
Recommended retail price
Television
X
X
X
X
X
X
X
X
X
X
X
X
Smartphone
X
X
X
X
X
X
X
X
X
X
LEGO
X
X
X
X
X
X
X
X
X
X
Shoes
X
X
X
X
X
X
X
X
X
X
Dress
X
X
X
X
X
X
X
X
X
X
X
Cup
X
X
X
X
X
X
X
X
X
Brick group
Master data
Book specifiations
Provider and Manufacturer
User Generated Content
Dimensions and prices
Content type: Amazon product › Shape: Book › Brick group: Dimensions and prices › Brick: Price | Value: 29,- EUR
Brick
Brick group
Shapes
Book
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
Content type PRODUCT
Content Type „Product“ and Shapes

104. component / Element
Headline
Short text
Long text (main text)
Alternative short text
Twitter / teaser text (140 char)
Description / explanation
Logo
Main image
Image gallery
Alternative image
Original image
Video
Audio
Document
Creation date
Last change(s)
Author
Sources
Direct link
News-ID
Web
X
X
X
X
X
X
X
X
X
X
X
X
App
X
X
X
X
X
X
X
X
X
X
X
X
X
Smartwatch
X
X
X
X
X
TV
X
X
X
X
X
X
X
X
X
X
E-Mail
X
X
X
X
X
X
X
Twitter
X
X
X
X
X
X
X
Facebook
X
X
X
X
X
X
X
X
Target systems for „NYT news“
Brick group
Text
Media
Metadata
brick
Brick group
Content type Target systems

105. Article-Headline
Building block principle Example-ID: CT001.SH001.BG001.BR001
„HTML-Marker“ or identifier for mapping the individual content brick
to the target system-template (Content → UI)
Article › BreakingNews › Text › Headline
Content type: Article ›
Shape: BreakingNews ›
Brick group: Text ›
Brick: Headline

106. SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen)
→ www.setusoft.de

107. Magnolia stories app for content authoring: You can create rich structured content and publish across
multiple channels. → https://www.magnolia-cms.com/magnolia/use-cases/stories-app.html

108. Outlook

109. › Standard body copy (text)
› List
› Table
› Chart / Figure / Infographic
› Interactive / application
› ...
Visual presentation of content
Way of presentation is based on basis of decision: such as target system, context of use, meta information, as well as different information
about the user (profile, previous behaviour, previous knowledge, interests, intention, motives, needs)

110. A user interface is not only visual!
Input, output and interaction also via:
› Audio / speech
› Haptics / tangency
› Temperature
› Text only
› ...
Graphical User Interface

111. Information is
translatet into speech.
Apple CarPlay and Siri
Courtesy of Zac Hall (9to5mac) and Ted Kritsonis (mobilesyrup)
https://9to5mac.com/2015/09/22/ios-9-carplay-walkthrough / http://mobilesyrup.com/2015/10/19/apple-carplay-review/

112. Information is outputted
as temperature.
brick
Tado Smart-Thermostat
Heating control via smarthpone app or browser

113. Information is „just“
interchanged by words.
Conversational User Interfaces and Chatbots
Speech recognition and processing /
Communication via automatic and personal chats

114. Thought:
That in the future information can be coherently
outputted on any imaginable channel, you must
also consider the Internet of Things and all other
shapes of interfaces when thinking about UI libraries,
styleguides, content models and mapping.

115. Thought:
That in the future information can be coherently
outputted on any imaginable channel, you must also
consider the tbd and all other shapes
of interfaces when thinking about UI styleguides,
content models and mapping.

116. roundup
› Central hub for content
› Central system for UI definitions
› General separation of content and presentation
› Content and UI according to the brick building system
› Correlation and mapping
› Consider future UIs
› Combine proven methods
› Support processes using software
› Automation

117. Multiscreen Books
Multiscreen UX Design (2015)
Publisher: Morgan Kaufmann
ISBN: 978-0128027295
Multiscreen Experience Design (2013)
Publisher: digiparden (SETU GmbH)
ISBN: 978-3-9815872-0-3
www.multiscreen-ux-design.com

118. Thankyou!
Slides: msxbook.com/CDUIA
Article: msxbook.com/CDUIAtxt
E-mail: wolfram.nagel@teamviewer.com
Twitter: @wolframnagel
Web: www.wolframnagel.com
www.teamviewer.com / www.blizz.com

119. Thankyou!
Slides: msxbook.com/CDUIA
Article: msxbook.com/CDUIAtxt
E-mail: wolfram.nagel@teamviewer.com
Twitter: @wolframnagel
Web: www.wolframnagel.com
www.teamviewer.com / www.blizz.com
btw:
TEAMVIEWERIS
HIRING :-)