Content Design and UI Architecture for Multiscreen-projects

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

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.

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

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

1 | Multiscreen
2 | Content Design
3 | UI Mapping

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

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

„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)

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

Multiscreen

10 – 30 cm
30 – 50 cm
1 m
3 m
Distance User <––> Screen

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

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

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

MODEOF
US
E SI
TUATION
Context of use
ENVIRONMENT

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

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

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

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.

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

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

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

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

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

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

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.

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

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

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.

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

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

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.

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

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

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

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

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

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

Content Design
AND Touchpoints

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

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

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

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

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

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

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

brick

componentbrick

componentbrick segment

componentbrick segment TYPE object

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

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

SEITE DURCHSUCHEN
Suchen
brick

SEITE DURCHSUCHEN
Suchen
component

SEITE DURCHSUCHEN
Suchen
SEGMENT

SEITE DURCHSUCHEN
Suchen
TYPe

SEITE DURCHSUCHEN
Suchen
SEGMENT
component
brick
TYPe

instance of type
(concrete specific
web page)

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

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)

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

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

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

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

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

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

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.

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

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

Correlation and Mapping
(SAME content → different presentation)

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

Content bricks
LARGE
Medium
Small

LARGE
Medium
Small
Content bricks

Bricks
Bricks
Bricks
Small
LARGE
Medium

(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

(Different content → Same presentation)
Article
Teaser (Article)
Event
Title, Date, Location, Category, Image, Time, Admission,
Teaser (Event)
Generic structure

(Different content → same presentation)
Article
Teaser (Article)
Event
Teaser (Event)
Generic structure

Teaser (Article)Teaser (Event) Teaser component (generic)
Identical presentation Identical presentation
Article
Event
Generic structure

Article
Headline, Date, Abstract, Category, Image, Au-
thor, ...
Event
...
Generic structure
Teaser (Article)Teaser (Event) Teaser component (generic)
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

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

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

Book
Smartphone
Dress
LEGO
Shoe
Television

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

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

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

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

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

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

› 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)

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

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/

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

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

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.

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.

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

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

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

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 :-)

Content Design and UI Architecture for Multiscreen-projects

More Related Content

Similar to Content Design and UI Architecture for Multiscreen-projects

More from Wolfram Nagel

Recently uploaded

Content Design and UI Architecture for Multiscreen-projects