1.
Multiscreen and beyond
My Topics and focus areas
UX Thinking Kaminabend,artop
15.September 2018
Wolfram Nagel / UX Designer
All rights reserved.

2.
Wolfram Nagel
Senior UX Designer (TeamViewer)
UI Architecture
UX Design and Resarch
Author „Multiscreen UX Design“
CMS and Content Design
Design Methods Finder
Jobs to be Done
Twitter:@wolframnagel#Multiscreen #UX@msxbook
@dmfndr

3.
Remote Access
Remote Support
Remote Maintenance
Home Office
Online Meetings
Online Meetings
Online Collaboration
Screen Sharing
Video calls (with up to 300 people)
Free for up to 5 participants
www.blizz.com

4.
www.blizz.com

5.
https://medium.com/@wolframnagel/reworking-the-meeting-user-interface-of-blizz-6441292e1408

6.
Device / Screen
Context of Use
User
Strategies
and Examples
Article:https://medium.com/@wolframnagel/multiscreen-ux-design-3e17d1f0731

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

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

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

10.
MODEOFU
SE S
ITUATION
Context of use
ENVIRONMENT

11.
mobile context of use

12.
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
From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)

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

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

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

16.
Flight booking on the laptop, flight information and boarding pass via smartphone, notifications and status updates on the smartwatch.

17.
AllRecipes: Search for recipes and add ingredients to the shopping list. Cook- and user-friendly iPad app with big fonts and buttons.

18.
Tado Smart Thermostat: Heating system remote controlled via smarthpone app or browser

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

20.
»Llévalos a la escuela« (ING DIRECT / UNICEF). Hold smartphone over the orange area. One by one the children come off the website
and jump into the phone in order to go to school. → http://www.llevalosalaescuela.com/en

21.
Applications (e.g., smartphone apps) should generally offer the same functionality across various platforms. 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).

22.
Zeebox (since 2014 beamly): Interactive social networking and social TV service for mobile devices

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

24.
Microjoyment (Micro UX) example. With the mytaxi app you can 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).

25.
Hybrid media example 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).

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

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

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

29.
Content Design and UI Mapping in a nutshell:https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff

30.
1 2 4 53
brickLEGO bumper bar truck fire truckdriving cab
CONTENT
USER
INTERFACE
ELEMENT COMPONENT TYPE INSTANCE /
OBJECT
SEGMENT
generic / strukture
(MADE from)
concret / specific
(IS)
atomAtomic Design molecule template pageorganism
real content
information object
incl. tone of voice
real page
instance of the template
incl. visual design
content wireframe
article, recipe,
application for leave,
product specification
(semantic structure)
UI template (+IxD)
touchpoint-dependent
and preview-relevant
module group
text section,
paragraph, chapter,
rubric
layout area
(e.g. header with
search form, logo,
navigation)
brick group
(combination of smallest possible elements)
content module
image + caption
quote + author
teaser with headline,
image and description
search form
(consisting of label,
input field and button)
smallest possible
unit / brick
title, subtitle,
description,
reference, date,
image, caption,
metainfo, author
label, input field,
button
Building block principle
brick type
target system
brick group

31.
Article:Content Design and UI Mapping in a nutshell
https://medium.com/@wolframnagel/content-design-and-ui-mapping-in-a-nutshell-7dce5634afff

32.
LARGE Medium
Small

33.
Content flow
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
The future of content management (2014) / https://medium.com/@wolframnagel/next-generation-information-experience-trends-und-herausforderungen-von-morgen-9929b17d8b5e

34.
www.designmethodsfinder.com

35.
Design Methods FTW – https://medium.com/@wolframnagel/design-methods-ftw-ddf5d8033d06

36.
Design Methods FTW – https://medium.com/@wolframnagel/design-methods-ftw-ddf5d8033d06

37.
http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/
https://strategyn.com/jobs-to-be-done/jobs-to-be-done-theory/
* Or a shelf on the wall or rather a storage option for their books.
People don‘t want a
quarter-inch drill, they want
a quarter-inch hole.*
Theodore Levitt

38.
Taken from: Martin Pattera, Managing Partner at STRATEGYN
Source: https://de.slideshare.net/coliquio/coliquio-summit-the-path-to-market-leadership-turn-customer-input-into-innovation

39.
Via Quantify Your Customer’s Unmet Needs
https://jobs-to-be-done.com/quantify-your-customers-unmet-needs-fda5b20fce54

40.
Bringing Together Personas, Jobs To Be Done, and Customer Journey Maps
https://www.cooper.com/journal/2017/1/bringing-together-personas-jobs-to-be-done-and-customer-journey-maps

41.
Content structure of a persona template with a Jobs-to-be-Done focus. Specific context and usage related traits are needed to understand
the user‘s specific needs and to be sure to ask the right users. Test users and interviewees are selected based on this information.

42.
via »Replacing The User Story With The Job Story«
https://jtbd.info/replacing-the-user-story-with-the-job-story-af7cdee10c27

43.
Focus areas
Three main aspects are relevant: User, Journey and Job Story
(inspired by Cooper »Bringing Together Personas, Jobs To Be Done, and Customer Journey Maps«)

44.
User Focussed Decision Process (draft)
via https://medium.com/@wolframnagel/reworking-the-meeting-user-interface-of-blizz-6441292e1408

45.
Questions?
Slides: www.slideshare.net/wolframnagel
Articles: https://medium.com/@wolframnagel
E-mail: hello@wolframnagel.com
Twitter: @wolframnagel
Web: www.wolframnagel.com