SlideShare une entreprise Scribd logo
1  sur  48
Methods and conceptual considerations for multiscreen-ready
and channel-independent content management according to the
building block principle
Content Design,
UI ArchiteCturE
And Mapping
Introduction / compact
Wolfram Nagel, SETU GmbH (Germany)
All rights reserved.
From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295)
Multiscreen
Device / Screen
Context of Use
User
Strategies
and Examples
From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295)
„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)
ITERATION
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
User
Content
Rules UI
Interfaces (API)
Four core areas (+ the user, of course)
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
Bricks and
Modules
Content Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI Mapping
Colorcodes AND Terms
brick type / templatebrick group
shape / variation
Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
componentbrick segment TYPE object
brick component segment type object
Atomic Design
Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
brick UI typebrick group
Source: Brad Frost, http://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces
brick brick group UI type
brick
component SEGMENT TYPe
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
SEGMENT
component
brick
TYPe
instance of type
(concrete specific
web page)
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
correlation
Building block principle
brick Brick group type
target system
The essence of
content design is to
create units of content that
can address diverse needs
successfully.
Michael Andrews
http://storyneedle.com/what-is-content-design/
Content and
UI Mapping
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 „Product“ and Shapes
Content type: Amazon product › Shape: Book › Brick group: Dimensions and prices › Brick: Price | Value: 29,- EUR
Brick
Brick group
Content type PRODUCT Shapes
Book
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
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 model„event“
content type
content type
brick
Correlation of content types
group
shape
Own illustration (source: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)
Content Structure Mapping
(in the centralized content hub / exemplified)
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
Article
Title / Headline
Short text
Long text
Image
Date
Author
Document
title
image (with caption, originator)
dateauthor(s)
short textlong text
Title / Headline
Short text
Long text
Image
Date
Author
Structure
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)
Touchpoints
foreign
Instapaper Facebook (Desktop)Browser (Safari / iOS)
own
iPhone App
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
Brick „Headline“
component / Element
Title / 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
Content Design, UI Architecture and UI Mapping
LARGE Medium
Small
Correlation and Mapping
(Same content → different presentation)
LARGE
Medium
Small
Content bricks
Category | Image | Title | Subtitle | Date | Location | Description
Content type (events)
Correlation and Mapping
(Same Content → Different presentation)
LARGE
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)
Medium
Small
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
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
Content Design, UI Architecture and UI Mapping
SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen)
→ www.setusoft.de
Outlook
›	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.
Thank you!
Slides:	msxbook.com/CDUIMcompact
Article:	msxbook.com/CDUIMtxt
E-mail: 	 wolfram.nagel@setusoft.de
Twitter:	@wolframnagel
Website:	wolframnagel.com
SETU:	setusoft.de
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

Contenu connexe

Similaire à Content Design, UI Architecture and UI Mapping

Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information ArchitectureMike Crabb
 
Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008guest1fb6e4
 
Getty Presentation of IMA/AIC OSCI tool
Getty Presentation of IMA/AIC OSCI toolGetty Presentation of IMA/AIC OSCI tool
Getty Presentation of IMA/AIC OSCI toolRobert J. Stein
 
Presentation of the AIC-IMA publishing tool for OSCI
Presentation of the AIC-IMA publishing tool for OSCIPresentation of the AIC-IMA publishing tool for OSCI
Presentation of the AIC-IMA publishing tool for OSCIRobert J. Stein
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignAllan Huang
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designMoodLabs
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan RosuRazvan Rosu
 
Twitter Bootstrap Presentation
Twitter Bootstrap PresentationTwitter Bootstrap Presentation
Twitter Bootstrap Presentationaneeshalidina
 
Concept Glossary Manager Topic Maps Engine and Navigator
Concept Glossary Manager Topic Maps Engine and Navigator  Concept Glossary Manager Topic Maps Engine and Navigator
Concept Glossary Manager Topic Maps Engine and Navigator tmra
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designDMI
 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyAnalyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyIJECEIAES
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website designRavi Bhadauria
 
Modular Documentation Joe Gelb Techshoret 2009
Modular Documentation Joe Gelb Techshoret 2009Modular Documentation Joe Gelb Techshoret 2009
Modular Documentation Joe Gelb Techshoret 2009Suite Solutions
 
SWAHA08 - Personalizing Human Interaction through Hybrid Ontological Profilin...
SWAHA08 - Personalizing Human Interaction through Hybrid Ontological Profilin...SWAHA08 - Personalizing Human Interaction through Hybrid Ontological Profilin...
SWAHA08 - Personalizing Human Interaction through Hybrid Ontological Profilin...Nima Dokoohaki
 
Eddi: Interactive Topic-Based Browsing of Social Status Streams
Eddi: Interactive Topic-Based Browsing of Social Status StreamsEddi: Interactive Topic-Based Browsing of Social Status Streams
Eddi: Interactive Topic-Based Browsing of Social Status StreamsMichael Bernstein
 
Boosting productivity with "Plone-driven Plone development"
Boosting productivity with "Plone-driven Plone development"Boosting productivity with "Plone-driven Plone development"
Boosting productivity with "Plone-driven Plone development"Henning Rietz
 
Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)Keith Instone
 

Similaire à Content Design, UI Architecture and UI Mapping (20)

Introduction to Information Architecture
Introduction to Information ArchitectureIntroduction to Information Architecture
Introduction to Information Architecture
 
Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008Web2 0-SOA InterAct2008
Web2 0-SOA InterAct2008
 
Getty Presentation of IMA/AIC OSCI tool
Getty Presentation of IMA/AIC OSCI toolGetty Presentation of IMA/AIC OSCI tool
Getty Presentation of IMA/AIC OSCI tool
 
Presentation of the AIC-IMA publishing tool for OSCI
Presentation of the AIC-IMA publishing tool for OSCIPresentation of the AIC-IMA publishing tool for OSCI
Presentation of the AIC-IMA publishing tool for OSCI
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Authoring Tools
Authoring ToolsAuthoring Tools
Authoring Tools
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
 
Design systems - Razvan Rosu
Design systems - Razvan RosuDesign systems - Razvan Rosu
Design systems - Razvan Rosu
 
Twitter Bootstrap Presentation
Twitter Bootstrap PresentationTwitter Bootstrap Presentation
Twitter Bootstrap Presentation
 
Concept Glossary Manager Topic Maps Engine and Navigator
Concept Glossary Manager Topic Maps Engine and Navigator  Concept Glossary Manager Topic Maps Engine and Navigator
Concept Glossary Manager Topic Maps Engine and Navigator
 
UX & UI Design - Differentiate through design
UX & UI Design - Differentiate through designUX & UI Design - Differentiate through design
UX & UI Design - Differentiate through design
 
Analyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative studyAnalyzing bootsrap and foundation font-end frameworks : a comparative study
Analyzing bootsrap and foundation font-end frameworks : a comparative study
 
Professional ui for a website design
Professional ui for a website designProfessional ui for a website design
Professional ui for a website design
 
Modular Documentation Joe Gelb Techshoret 2009
Modular Documentation Joe Gelb Techshoret 2009Modular Documentation Joe Gelb Techshoret 2009
Modular Documentation Joe Gelb Techshoret 2009
 
Archetype
ArchetypeArchetype
Archetype
 
Final project 333
Final project 333Final project 333
Final project 333
 
SWAHA08 - Personalizing Human Interaction through Hybrid Ontological Profilin...
SWAHA08 - Personalizing Human Interaction through Hybrid Ontological Profilin...SWAHA08 - Personalizing Human Interaction through Hybrid Ontological Profilin...
SWAHA08 - Personalizing Human Interaction through Hybrid Ontological Profilin...
 
Eddi: Interactive Topic-Based Browsing of Social Status Streams
Eddi: Interactive Topic-Based Browsing of Social Status StreamsEddi: Interactive Topic-Based Browsing of Social Status Streams
Eddi: Interactive Topic-Based Browsing of Social Status Streams
 
Boosting productivity with "Plone-driven Plone development"
Boosting productivity with "Plone-driven Plone development"Boosting productivity with "Plone-driven Plone development"
Boosting productivity with "Plone-driven Plone development"
 
Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)Web User Experience (BGSU ARTD 302)
Web User Experience (BGSU ARTD 302)
 

Plus de Wolfram Nagel

Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)Wolfram Nagel
 
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)Wolfram Nagel
 
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...Wolfram Nagel
 
Next Generation Information Experience – Gedanken über die Zukunft von Conten...
Next Generation Information Experience – Gedanken über die Zukunft von Conten...Next Generation Information Experience – Gedanken über die Zukunft von Conten...
Next Generation Information Experience – Gedanken über die Zukunft von Conten...Wolfram Nagel
 
Multiscreen Experience Design (short presentation, English)
Multiscreen Experience Design (short presentation, English)Multiscreen Experience Design (short presentation, English)
Multiscreen Experience Design (short presentation, English)Wolfram Nagel
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Wolfram Nagel
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Wolfram Nagel
 
Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)Wolfram Nagel
 
Multiscreen Experience (in 90 Sekunden)
Multiscreen Experience (in 90 Sekunden)Multiscreen Experience (in 90 Sekunden)
Multiscreen Experience (in 90 Sekunden)Wolfram Nagel
 
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...Wolfram Nagel
 

Plus de Wolfram Nagel (11)

Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)
 
Content UI Mapping
Content UI MappingContent UI Mapping
Content UI Mapping
 
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)
 
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...
 
Next Generation Information Experience – Gedanken über die Zukunft von Conten...
Next Generation Information Experience – Gedanken über die Zukunft von Conten...Next Generation Information Experience – Gedanken über die Zukunft von Conten...
Next Generation Information Experience – Gedanken über die Zukunft von Conten...
 
Multiscreen Experience Design (short presentation, English)
Multiscreen Experience Design (short presentation, English)Multiscreen Experience Design (short presentation, English)
Multiscreen Experience Design (short presentation, English)
 
Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)Multiscreen Experience Design (September 2012, MuC UP12)
Multiscreen Experience Design (September 2012, MuC UP12)
 
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)
 
Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)Multiscreen Experience (Jan 2012, IxDA Berlin)
Multiscreen Experience (Jan 2012, IxDA Berlin)
 
Multiscreen Experience (in 90 Sekunden)
Multiscreen Experience (in 90 Sekunden)Multiscreen Experience (in 90 Sekunden)
Multiscreen Experience (in 90 Sekunden)
 
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...
 

Dernier

MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 

Dernier (20)

MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 

Content Design, UI Architecture and UI Mapping

  • 1. Methods and conceptual considerations for multiscreen-ready and channel-independent content management according to the building block principle Content Design, UI ArchiteCturE And Mapping Introduction / compact Wolfram Nagel, SETU GmbH (Germany) All rights reserved.
  • 2. From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295) Multiscreen
  • 3. Device / Screen Context of Use User Strategies and Examples From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295)
  • 4. „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)
  • 5. ITERATION 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
  • 6. User Content Rules UI Interfaces (API) Four core areas (+ the user, of course)
  • 7. 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
  • 12. Colorcodes AND Terms brick type / templatebrick group shape / variation
  • 13. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... componentbrick segment TYPE object
  • 14. brick component segment type object Atomic Design Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design brick UI typebrick group
  • 15. Source: Brad Frost, http://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces brick brick group UI type
  • 17. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen SEGMENT component brick TYPe
  • 18. instance of type (concrete specific web page)
  • 19. 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 correlation Building block principle brick Brick group type target system
  • 20. The essence of content design is to create units of content that can address diverse needs successfully. Michael Andrews http://storyneedle.com/what-is-content-design/
  • 22. 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
  • 23. 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 „Product“ and Shapes Content type: Amazon product › Shape: Book › Brick group: Dimensions and prices › Brick: Price | Value: 29,- EUR Brick Brick group Content type PRODUCT Shapes Book X X X X X X X X X X X X X X X X X
  • 24. 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 model„event“ content type content type brick Correlation of content types group shape Own illustration (source: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)
  • 25. Content Structure Mapping (in the centralized content hub / exemplified) 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 Article Title / Headline Short text Long text Image Date Author Document
  • 26. title image (with caption, originator) dateauthor(s) short textlong text Title / Headline Short text Long text Image Date Author Structure
  • 27. 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)
  • 29. 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 Brick „Headline“
  • 30. component / Element Title / 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
  • 32. LARGE Medium Small Correlation and Mapping (Same content → different presentation)
  • 33. LARGE Medium Small Content bricks Category | Image | Title | Subtitle | Date | Location | Description Content type (events) Correlation and Mapping (Same Content → Different presentation)
  • 34. LARGE 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) Medium Small
  • 35. 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
  • 36. 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
  • 38. SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen) → www.setusoft.de
  • 40. › 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)
  • 41. A user interface is not only visual! Input, output and interaction also via: › Audio / speech › Haptics / tangency › Temperature › Text only › ... Graphical User Interface
  • 42. 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/
  • 43. Information is outputted as temperature. brick Tado Smart-Thermostat Heating control via smarthpone app or browser
  • 44. Information is „just“ interchanged by words. Conversational User Interfaces and Chatbots Speech recognition and processing / Communication via automatic and personal chats
  • 45. 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.
  • 46. 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.
  • 47. Thank you! Slides: msxbook.com/CDUIMcompact Article: msxbook.com/CDUIMtxt E-mail: wolfram.nagel@setusoft.de Twitter: @wolframnagel Website: wolframnagel.com SETU: setusoft.de
  • 48. 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