We live in a Multiscreen-World. Everything needs to work across devices. This requires a holistic strategy. +++ People today use technology on different devices in different locations. Users expect to access information on all relevant screens and across multiple channels through smartphones, tablets, laptops/desktops, smart (internet-connected) TVs, and other devices, such as smartwatches for example. Multiscreen is no longer a nice add-on, it’s a requirement. In this environment, user experience needs to cater to multiple devices. +++ These slides are a compact summary of the book. More via www.msxbook.com/en

1. MULTISCREEN UX DESIGN
Developing For A Multitude Of Devices
Executive summary (compact)
Wolfram Nagel | SETU GmbH (Germany)
All rights reserved.

2. Wolfram Nagel
Senior UX Designer / Head of UX
Multiscreen, Content Design, UI Architecture
Author „Multiscreen UX Design“
Co-Initiator Design Methoden Finder
www.designmethodenfinder.de

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

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

6. Screens, Users,
and Context of Use

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

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

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

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

11. MODEOFUS
E S
ITUATION
ENVIRONMENT
Context of use

12. Strategies
and examples

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

14. Mobile First
It is advisable to concentrate on the most important device first. The smallest screen forces a meaningful structure of information.

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

16. Social TV
Spatially separated viewers can quasi watch TV together or directly participate. Broadcasts are recommended by user profiles.

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

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

19. Synchronisation
Information is kept in sync and up-to-date across devices.

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

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

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

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

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

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

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

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

28. Emotionality
A service is emotionally more attractive, if it is fun and supports a device fragmented daily routine.

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

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

31. Josh Clark
https://twitter.com/#!/globalmoxie/status/192276891913297920
A part of Multi-device
strategy is simply
embracing the uncertainty.

32. Content Design
and UI Mapping

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

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

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

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

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

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

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

41. Content UI Mapping: More about the topic via → www.msxbook.com/CDUIM and www.msxbook.com/CDUIMtxt

42. 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/

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

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

45. Thank you!
Slides: msxbook.com/muxdsummary
Article: msxbook.com/muxdtxt
E-mail: hello@wolframnagel.com
Twitter: @wolframnagel
Website: wolframnagel.com