SlideShare une entreprise Scribd logo
1  sur  67
MULTISCREEN UX DESIGN
Developing For A Multitude Of Devices
Executive summary of the book‘s topic
Wolfram Nagel | SETU GmbH (Germany)
All rights reserved.
These slides are a summary of the book „Multiscreen UX Design“ (Morgan Kaufmann)
More via www.multiscreen-ux-design.com
Wolfram Nagel
Senior UX Designer and UI Architect
Multiscreen, Content Design, UI Architecture
Author „Multiscreen UX Design“
Co-Initiator Design Methoden Finder
www.designmethodenfinder.de
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
Multiscreen UX Design - Developing for a multitude of devices
Device / Screen
Context of Use
User
Strategies
and Examples
From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295)
Multiscreen UX Design - Developing for a multitude of devices
Screens, Users,
and Context of Use
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
Smartwatch: 	 Instant information, tracking, hands-free interaction
Smartphone:	 Communication, networking, entertainment
Tablet:	 Entertainment and communication
Desktop:	 Work- and free time usage
Smart TV:	 Visual informationen and simultaneous usage
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
MODEOFUS
E S
ITUATION
ENVIRONMENT
Context of use
mobile context of use
Strategies
and examples
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
Mobile First
It is advisable to concentrate on the most important device first. The smallest screen forces a meaningful structure of information.
Design for the screen with the most constraints first. The small screen forces you into structuring your information. (Luke Wroblewski: Mo-
bile First, A Book Apart – http://bkaprt.com/mf)
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)
Social TV
Spatially separated viewers can quasi watch TV together or directly participate. Broadcasts are recommended by user profiles.
Zeebox offers additional information to the current TV show including parallel watching friends and their other preferred shows.
→ http://www.youtube.com/watch?v=sPuAiA4O344
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
The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
Connect the smarthpone with the desktop browser and navigate the website via smartphone. → http://www.diplomatic-cover.com/multi
Synchronisation
Information is kept in sync and up-to-date across devices.
Flight booking on the laptop, flight information and boarding pass via smartphone, notifications and status updates on the smartwatch.
Screen Sharing
The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
With the slot car racing game »Racer« you can use several screens
to expand the race track. (http://g.co/racer).
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
Fluidity
The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
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).
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
Mashability
The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
Qwiki and Storify use(d) APIs of other services to aggregate various content (text, image, video) to a new information package.
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.
Storyfication
The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
Who Will Save Dina Foxx” was initially broadcast on ZDF (a German public-service TV broadcaster). The viewers became investigators
and had to solve small mysteries. The information to be communicated about the data protection theme was embedded in the story.
Emotionality
A service is emotionally more attractive, if it is fun and supports a device fragmented daily routine.
The Instagram iPhone app for social photo sharing is a fast, pleasant, and entertaining way to allow your friends to take part in your life
and personal experiences through photos. (http://instagram.com)
Microjoyment
The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
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).
Hybrid Media
The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
PhoneBook: Combination of a digitale und analogue medium. For every page, there is a suitable little
background film. (http://www.creativeapplications.net/iphone/phonebook-ride-ride-iphone).
Josh Clark
https://twitter.com/#!/globalmoxie/status/192276891913297920
A part of Multi-device
strategy is simply
embracing the uncertainty.
Content Design
and UI Mapping
Design from the Content out.
Stephen Hay
http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
User
Content
Rules UI
Interfaces (API)
Four core areas (+ the user, of course)
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)
Multiscreen UX Design - Developing for a multitude of devices
If you have a bunch of unsorted elements (e.g. LEGO bricks, UI elements or a lot of content) take the time to organize these parts. Make
an inventory. Then you can create the whole in a more deliberate and efficient way. → www.msxbook.com/CDUIMtxt
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
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
Five-Step Building Block Principle
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
Three-Step Content Flow
Content UI Mapping: More about the topic via → www.msxbook.com/CDUIM and www.msxbook.com/CDUIMtxt
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/
SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen)
→ www.setusoft.de
Multiscreen Books
Multiscreen UX Design (2015)
Publisher: Morgan Kaufmann
ISBN: 978-0128027295
Multiscreen Experience Design (2013)
Publsiher: digiparden (SETU GmbH)
ISBN: 978-3-9815872-0-3
www.multiscreen-ux-design.com
Thank you!
Slides:	 msxbook.com/muxd
Article:	msxbook.com/muxdtxt
E-mail:	 hello@wolframnagel.com
Twitter:	@wolframnagel
Website:	wolframnagel.com

Contenu connexe

Tendances

공간정보, 디지털트윈, 그리고 스마트시티
공간정보, 디지털트윈, 그리고 스마트시티 공간정보, 디지털트윈, 그리고 스마트시티
공간정보, 디지털트윈, 그리고 스마트시티 SANGHEE SHIN
 
Ux Ui Design for Mobile Apps
Ux Ui Design  for  Mobile AppsUx Ui Design  for  Mobile Apps
Ux Ui Design for Mobile AppsVishal Kirti
 
Lecture 5: 3D User Interfaces for Virtual Reality
Lecture 5: 3D User Interfaces for Virtual RealityLecture 5: 3D User Interfaces for Virtual Reality
Lecture 5: 3D User Interfaces for Virtual RealityMark Billinghurst
 
Extended Reality (XR): The End of Distance @ SXSW
Extended Reality (XR): The End of Distance @ SXSWExtended Reality (XR): The End of Distance @ SXSW
Extended Reality (XR): The End of Distance @ SXSWRori DuBoff
 
Augmented Reality - the next big thing in mobile
Augmented Reality - the next big thing in mobileAugmented Reality - the next big thing in mobile
Augmented Reality - the next big thing in mobileHari Gottipati
 
Masterclass on Immersive Storytelling & Experiential Design
Masterclass on Immersive Storytelling & Experiential DesignMasterclass on Immersive Storytelling & Experiential Design
Masterclass on Immersive Storytelling & Experiential DesignKent Bye
 
Augmented Reality - Connecting Physical and Virtual Worlds
Augmented Reality - Connecting Physical and Virtual WorldsAugmented Reality - Connecting Physical and Virtual Worlds
Augmented Reality - Connecting Physical and Virtual WorldsDunavNET
 
UX Strategy Blueprint
UX Strategy BlueprintUX Strategy Blueprint
UX Strategy BlueprintJim Kalbach
 
AR and VR development tools and platforms
AR and VR development tools and platformsAR and VR development tools and platforms
AR and VR development tools and platformsSushmita Chatterjee
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The WorldBuiltByHQ
 

Tendances (20)

UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
What is UX?
What is UX?What is UX?
What is UX?
 
BASIC UX PRESENTATION
BASIC UX PRESENTATIONBASIC UX PRESENTATION
BASIC UX PRESENTATION
 
Personas for Accessible UX
Personas for Accessible UXPersonas for Accessible UX
Personas for Accessible UX
 
Virtual reality
Virtual realityVirtual reality
Virtual reality
 
공간정보, 디지털트윈, 그리고 스마트시티
공간정보, 디지털트윈, 그리고 스마트시티 공간정보, 디지털트윈, 그리고 스마트시티
공간정보, 디지털트윈, 그리고 스마트시티
 
Ux Ui Design for Mobile Apps
Ux Ui Design  for  Mobile AppsUx Ui Design  for  Mobile Apps
Ux Ui Design for Mobile Apps
 
Lecture 5: 3D User Interfaces for Virtual Reality
Lecture 5: 3D User Interfaces for Virtual RealityLecture 5: 3D User Interfaces for Virtual Reality
Lecture 5: 3D User Interfaces for Virtual Reality
 
Extended Reality (XR): The End of Distance @ SXSW
Extended Reality (XR): The End of Distance @ SXSWExtended Reality (XR): The End of Distance @ SXSW
Extended Reality (XR): The End of Distance @ SXSW
 
Ux is not UI
Ux is not UIUx is not UI
Ux is not UI
 
Augmented Reality - the next big thing in mobile
Augmented Reality - the next big thing in mobileAugmented Reality - the next big thing in mobile
Augmented Reality - the next big thing in mobile
 
Masterclass on Immersive Storytelling & Experiential Design
Masterclass on Immersive Storytelling & Experiential DesignMasterclass on Immersive Storytelling & Experiential Design
Masterclass on Immersive Storytelling & Experiential Design
 
Augmented Reality - Connecting Physical and Virtual Worlds
Augmented Reality - Connecting Physical and Virtual WorldsAugmented Reality - Connecting Physical and Virtual Worlds
Augmented Reality - Connecting Physical and Virtual Worlds
 
3 d tv
3 d tv3 d tv
3 d tv
 
What is ux?
What is ux?What is ux?
What is ux?
 
UX Strategy Blueprint
UX Strategy BlueprintUX Strategy Blueprint
UX Strategy Blueprint
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
AR and VR development tools and platforms
AR and VR development tools and platformsAR and VR development tools and platforms
AR and VR development tools and platforms
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
 
Augmented Reality
Augmented RealityAugmented Reality
Augmented Reality
 

En vedette

Content Design and UI Architecture for Multiscreen Projects (compact)
Content Design and UI Architecture for Multiscreen Projects (compact)Content Design and UI Architecture for Multiscreen Projects (compact)
Content Design and UI Architecture for Multiscreen Projects (compact)Wolfram Nagel
 
мой любимы предмет физика
мой любимы предмет физикамой любимы предмет физика
мой любимы предмет физикаmakpaleseeva
 
Content Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI MappingContent Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI MappingWolfram Nagel
 
Game Development als Motivation für IT‐Studierende im ersten Jahr, Krajnc&Hutter
Game Development als Motivation für IT‐Studierende im ersten Jahr, Krajnc&HutterGame Development als Motivation für IT‐Studierende im ersten Jahr, Krajnc&Hutter
Game Development als Motivation für IT‐Studierende im ersten Jahr, Krajnc&HutterElmar Krainz
 
Universal principles of design
Universal principles of designUniversal principles of design
Universal principles of designCarlos Fuentes
 
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
 
Content Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingContent Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingWolfram Nagel
 

En vedette (8)

Content Design and UI Architecture for Multiscreen Projects (compact)
Content Design and UI Architecture for Multiscreen Projects (compact)Content Design and UI Architecture for Multiscreen Projects (compact)
Content Design and UI Architecture for Multiscreen Projects (compact)
 
мой любимы предмет физика
мой любимы предмет физикамой любимы предмет физика
мой любимы предмет физика
 
Content Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI MappingContent Design, UI Architecture and UI Mapping
Content Design, UI Architecture and UI Mapping
 
Game Development als Motivation für IT‐Studierende im ersten Jahr, Krajnc&Hutter
Game Development als Motivation für IT‐Studierende im ersten Jahr, Krajnc&HutterGame Development als Motivation für IT‐Studierende im ersten Jahr, Krajnc&Hutter
Game Development als Motivation für IT‐Studierende im ersten Jahr, Krajnc&Hutter
 
Universal principles of design
Universal principles of designUniversal principles of design
Universal principles of design
 
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...
 
Content Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-MappingContent Design, UI Architecture and Content-UI-Mapping
Content Design, UI Architecture and Content-UI-Mapping
 
Mit Sharepoint und Suche zum intelligenten Informationsarbeitsplatz
Mit Sharepoint und Suche zum intelligenten InformationsarbeitsplatzMit Sharepoint und Suche zum intelligenten Informationsarbeitsplatz
Mit Sharepoint und Suche zum intelligenten Informationsarbeitsplatz
 

Similaire à Multiscreen UX Design - Developing for a multitude of devices

Content Design and UI Architecture for Multiscreen-projects
Content Design and UI Architecture for Multiscreen-projectsContent Design and UI Architecture for Multiscreen-projects
Content Design and UI Architecture for Multiscreen-projectsWolfram Nagel
 
Multiscreen UX Design - Developing for a multitude of devices (summary)
Multiscreen UX Design - Developing for a multitude of devices (summary) Multiscreen UX Design - Developing for a multitude of devices (summary)
Multiscreen UX Design - Developing for a multitude of devices (summary) Wolfram Nagel
 
Project Proposal - Digital Media
Project Proposal - Digital MediaProject Proposal - Digital Media
Project Proposal - Digital MediaRebecca Fitzgerald
 
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)Wolfram Nagel
 
Pioneering Personal Storage as a Platform
Pioneering Personal Storage as a PlatformPioneering Personal Storage as a Platform
Pioneering Personal Storage as a PlatformHannry Chan
 
Inmobi Case Study
Inmobi Case StudyInmobi Case Study
Inmobi Case StudyAppscrip
 
Portfolio of Julia Kuznetsov
Portfolio of Julia KuznetsovPortfolio of Julia Kuznetsov
Portfolio of Julia Kuznetsovjuliakuznetsov
 
Are we thinking multi-screen?
Are we thinking multi-screen?Are we thinking multi-screen?
Are we thinking multi-screen?Beerajaah Sswain
 
User Interface and Future Interaction Technologies
User Interface and Future Interaction Technologies User Interface and Future Interaction Technologies
User Interface and Future Interaction Technologies Carlos Hugo Huertas Pérez
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10Almog Koren
 
Digital Fun for the Digital Home
Digital Fun for the Digital HomeDigital Fun for the Digital Home
Digital Fun for the Digital HomeRenaun Erickson
 
Social shock: leading in today's digital, social, and mobile world
Social shock: leading in today's digital, social, and mobile worldSocial shock: leading in today's digital, social, and mobile world
Social shock: leading in today's digital, social, and mobile worldPerry Hewitt
 
2016 NEMO-UX Introduction
2016 NEMO-UX Introduction2016 NEMO-UX Introduction
2016 NEMO-UX Introductionnemoux
 
It's All About Context
It's All About ContextIt's All About Context
It's All About ContextKevin Suttle
 
Second Screen Strategy: Planning For (And Against) A Multi-Screen World
Second Screen Strategy: Planning For (And Against) A Multi-Screen WorldSecond Screen Strategy: Planning For (And Against) A Multi-Screen World
Second Screen Strategy: Planning For (And Against) A Multi-Screen WorldBen Grossman
 
Windows Phone UX
Windows Phone UXWindows Phone UX
Windows Phone UXSeo Jinho
 
Converging technology in the digital media world powerpoint presentation
Converging technology in the digital media world   powerpoint presentationConverging technology in the digital media world   powerpoint presentation
Converging technology in the digital media world powerpoint presentationtanikosky
 
Augmented Reality possibilities
Augmented Reality possibilitiesAugmented Reality possibilities
Augmented Reality possibilitiesElisa Aunola
 
The Brand Of Mobile Phone Using Android Os
The Brand Of Mobile Phone Using Android OsThe Brand Of Mobile Phone Using Android Os
The Brand Of Mobile Phone Using Android OsNatasha Barnett
 

Similaire à Multiscreen UX Design - Developing for a multitude of devices (20)

Content Design and UI Architecture for Multiscreen-projects
Content Design and UI Architecture for Multiscreen-projectsContent Design and UI Architecture for Multiscreen-projects
Content Design and UI Architecture for Multiscreen-projects
 
Multiscreen UX Design - Developing for a multitude of devices (summary)
Multiscreen UX Design - Developing for a multitude of devices (summary) Multiscreen UX Design - Developing for a multitude of devices (summary)
Multiscreen UX Design - Developing for a multitude of devices (summary)
 
Project Proposal - Digital Media
Project Proposal - Digital MediaProject Proposal - Digital Media
Project Proposal - Digital Media
 
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)
 
Pioneering Personal Storage as a Platform
Pioneering Personal Storage as a PlatformPioneering Personal Storage as a Platform
Pioneering Personal Storage as a Platform
 
Inmobi Case Study
Inmobi Case StudyInmobi Case Study
Inmobi Case Study
 
Portfolio of Julia Kuznetsov
Portfolio of Julia KuznetsovPortfolio of Julia Kuznetsov
Portfolio of Julia Kuznetsov
 
Are we thinking multi-screen?
Are we thinking multi-screen?Are we thinking multi-screen?
Are we thinking multi-screen?
 
User Interface and Future Interaction Technologies
User Interface and Future Interaction Technologies User Interface and Future Interaction Technologies
User Interface and Future Interaction Technologies
 
QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10QuickSoft Mobile Tips & Tricks 11-03-10
QuickSoft Mobile Tips & Tricks 11-03-10
 
Digital Fun for the Digital Home
Digital Fun for the Digital HomeDigital Fun for the Digital Home
Digital Fun for the Digital Home
 
Social shock: leading in today's digital, social, and mobile world
Social shock: leading in today's digital, social, and mobile worldSocial shock: leading in today's digital, social, and mobile world
Social shock: leading in today's digital, social, and mobile world
 
2016 NEMO-UX Introduction
2016 NEMO-UX Introduction2016 NEMO-UX Introduction
2016 NEMO-UX Introduction
 
It's All About Context
It's All About ContextIt's All About Context
It's All About Context
 
Second Screen Strategy: Planning For (And Against) A Multi-Screen World
Second Screen Strategy: Planning For (And Against) A Multi-Screen WorldSecond Screen Strategy: Planning For (And Against) A Multi-Screen World
Second Screen Strategy: Planning For (And Against) A Multi-Screen World
 
Windows Phone UX
Windows Phone UXWindows Phone UX
Windows Phone UX
 
Converging technology in the digital media world powerpoint presentation
Converging technology in the digital media world   powerpoint presentationConverging technology in the digital media world   powerpoint presentation
Converging technology in the digital media world powerpoint presentation
 
ROCK the MIC: 29 Great Taiwan Startups
ROCK the MIC: 29 Great Taiwan StartupsROCK the MIC: 29 Great Taiwan Startups
ROCK the MIC: 29 Great Taiwan Startups
 
Augmented Reality possibilities
Augmented Reality possibilitiesAugmented Reality possibilities
Augmented Reality possibilities
 
The Brand Of Mobile Phone Using Android Os
The Brand Of Mobile Phone Using Android OsThe Brand Of Mobile Phone Using Android Os
The Brand Of Mobile Phone Using Android Os
 

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
 
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 (10)

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

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
 
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
 
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
 
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
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
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
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfoliopagei
 
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
 
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
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
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
 
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
 
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
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy 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
 
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
 

Dernier (20)

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
 
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...
 
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...
 
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
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
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
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
Oregon State University Interior Design Portfolio
Oregon State University Interior Design PortfolioOregon State University Interior Design Portfolio
Oregon State University Interior Design Portfolio
 
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.
 
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.
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
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
 
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
 
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|
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy 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
 
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...
 

Multiscreen UX Design - Developing for a multitude of devices

  • 1. MULTISCREEN UX DESIGN Developing For A Multitude Of Devices Executive summary of the book‘s topic Wolfram Nagel | SETU GmbH (Germany) All rights reserved.
  • 2. These slides are a summary of the book „Multiscreen UX Design“ (Morgan Kaufmann) More via www.multiscreen-ux-design.com
  • 3. Wolfram Nagel Senior UX Designer and UI Architect Multiscreen, Content Design, UI Architecture Author „Multiscreen UX Design“ Co-Initiator Design Methoden Finder www.designmethodenfinder.de
  • 4. 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
  • 6. Device / Screen Context of Use User Strategies and Examples From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295)
  • 9. From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295) Multiscreen
  • 10. 10 – 30 cm 30 – 50 cm 1 m 3 m Distance User <––> Screen
  • 11. Smartwatch: Instant information, tracking, hands-free interaction Smartphone: Communication, networking, entertainment Tablet: Entertainment and communication Desktop: Work- and free time usage Smart TV: Visual informationen and simultaneous usage
  • 13. Margaret Brown Kelly AdamsBarbara Stewart Melissa Anderson Andrew Collins Mark Hudson Robert Sullivan Larry Newton User Prototypes
  • 14. Mark Hudson (Trend user) aged 35, single | event manager, secondary school
  • 18. 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
  • 19. Mobile First It is advisable to concentrate on the most important device first. The smallest screen forces a meaningful structure of information.
  • 20. Design for the screen with the most constraints first. The small screen forces you into structuring your information. (Luke Wroblewski: Mo- bile First, A Book Apart – http://bkaprt.com/mf)
  • 21. SimultanEITY Different devices or information services are used simultaneously. Different pieces of information may complement one another.
  • 22. Parallel, additional information on the second screen. (http://www.designbynotion.com/metamirror-next-generation-tv)
  • 23. Social TV Spatially separated viewers can quasi watch TV together or directly participate. Broadcasts are recommended by user profiles.
  • 24. Zeebox offers additional information to the current TV show including parallel watching friends and their other preferred shows. → http://www.youtube.com/watch?v=sPuAiA4O344
  • 25. 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.
  • 26. 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
  • 27. Complementarity The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  • 28. Connect the smarthpone with the desktop browser and navigate the website via smartphone. → http://www.diplomatic-cover.com/multi
  • 29. Synchronisation Information is kept in sync and up-to-date across devices.
  • 30. Flight booking on the laptop, flight information and boarding pass via smartphone, notifications and status updates on the smartwatch.
  • 31. Screen Sharing The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  • 32. With the slot car racing game »Racer« you can use several screens to expand the race track. (http://g.co/racer).
  • 33. 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.)
  • 34. 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
  • 35. Fluidity The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  • 36. 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).
  • 37. Smart Content Content should be as flexible as possible, to be easily used and published across different channels and devices.
  • 38. 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
  • 39. Mashability The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  • 40. Qwiki and Storify use(d) APIs of other services to aggregate various content (text, image, video) to a new information package.
  • 41. 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.
  • 42. Example Nike+ mit iPhone app, social network itegration, own community and gamification features.
  • 43. Gamification Game mechanics simulate a competitive environment. A game factor can motivate people if it is challenging and provides relevant goals.
  • 44. 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.
  • 45. Storyfication The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  • 46. Who Will Save Dina Foxx” was initially broadcast on ZDF (a German public-service TV broadcaster). The viewers became investigators and had to solve small mysteries. The information to be communicated about the data protection theme was embedded in the story.
  • 47. Emotionality A service is emotionally more attractive, if it is fun and supports a device fragmented daily routine.
  • 48. The Instagram iPhone app for social photo sharing is a fast, pleasant, and entertaining way to allow your friends to take part in your life and personal experiences through photos. (http://instagram.com)
  • 49. Microjoyment The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  • 50. 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).
  • 51. Hybrid Media The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  • 52. PhoneBook: Combination of a digitale und analogue medium. For every page, there is a suitable little background film. (http://www.creativeapplications.net/iphone/phonebook-ride-ride-iphone).
  • 53. Josh Clark https://twitter.com/#!/globalmoxie/status/192276891913297920 A part of Multi-device strategy is simply embracing the uncertainty.
  • 55. Design from the Content out. Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  • 56. User Content Rules UI Interfaces (API) Four core areas (+ the user, of course)
  • 57. 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)
  • 59. If you have a bunch of unsorted elements (e.g. LEGO bricks, UI elements or a lot of content) take the time to organize these parts. Make an inventory. Then you can create the whole in a more deliberate and efficient way. → www.msxbook.com/CDUIMtxt
  • 60. 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
  • 61. 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 Five-Step Building Block Principle
  • 62. 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 Three-Step Content Flow
  • 63. Content UI Mapping: More about the topic via → www.msxbook.com/CDUIM and www.msxbook.com/CDUIMtxt
  • 64. 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/
  • 65. SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen) → www.setusoft.de
  • 66. Multiscreen Books Multiscreen UX Design (2015) Publisher: Morgan Kaufmann ISBN: 978-0128027295 Multiscreen Experience Design (2013) Publsiher: digiparden (SETU GmbH) ISBN: 978-3-9815872-0-3 www.multiscreen-ux-design.com
  • 67. Thank you! Slides: msxbook.com/muxd Article: msxbook.com/muxdtxt E-mail: hello@wolframnagel.com Twitter: @wolframnagel Website: wolframnagel.com