This document discusses content design and user interfaces for multiscreen projects. It outlines a methodical approach involving iterative work in four core areas: the user, content, rules, and interfaces. Content is modeled according to a building block principle, with atomic elements that can be assembled into larger components and objects. This defines the user interface model. The document provides examples of how content structures map to user interfaces across different touchpoints and channels. It also introduces a software tool called SETU 3.0 that allows content modeling according to the building block principle.

1. Introduction / compact
Wolfram Nagel, SETU GmbH
All rights reserved.
Content Design
AND UI Architecture
fOr Multiscreen-
Projects

2. From »Multiscreen UX Design« (www.msxbook.com/enbook → ISBN: 978-0128027295)
Multiscreen

3. › User / Target group / Context
› Recognize topic / Taxonomy
› Prioritize output channels
› Content inventory / knowing the content
› Define and design content (structure)
› Content gathering (systems, users, sources)
› Workflows and interfaces (API)
› UI models / Living styleguide
› Interaction / Prototyping
› Visual design and development
› Implementation and testing
Methodical approach
ITERATION

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

5. The content model defines
the UI model
Content model / Content type
↓
Content elements !
↓
Back end UI (form elements)
↓
Front end UI (wireframe)

6. Building block
principle

10. 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
content model
Own illustration (source / based on: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)

11. Brick Component Segment Type Object
Atomic Design
Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design

12. Building block principle
Modeling according to the building block principle – comparable to the building blocks of the LEGO building block system
Korrelation

13. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...

14. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
Brick

15. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
Component

16. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
Segment

17. Bricks → Bumper bar → Driving cab → Truck → Fire truck or police truck or ...
TYPE ObjeCt

18. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
Brick

19. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
Component

20. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
SEGMENT

21. HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
TYPe

22. ObjeCt

23. Brick
Component SEGMENT TYPe

24. long text
Mapping Content(structure) ←→ Display (UI )
title
image (with caption
and originator)
dateauthor(s)
short text
Content strucutre
title
short text
long text
image
date
author

25. Example: article title on various touchpoints / channels

26. Twitter
(tweet only)
desktop
(website)
Instapaper
website
(smartphone)
e-mail
(sharing)
Facebook
(sharing)
Facebook
(timeline)
Twitter
(sharing)
Twitter
(with summary)
smartwatch
(push notification)
smartphone
WhatsApp
(news sub)
iPhone app
tablet
(video content)
Potential touchpoints / channels (selection)

27. SETU 3.0: content modeling software according to the building block principle (demo moodscreen)

28. Information / ContaCt
Wolfram Nagel / SETU GmbH
Mail: wn@setusoft.de
Twitter: @wolframnagel
Web: www.setusoft.de
Publikation »Multiscreen UX Design«
Publisher: Morgan Kaufmann
ISBN: 978-0128027295
www.msxbook.com/enbook
URL to these slides:
www.msxbook.com/CDUIAcompact