MULTISCREEN UX DESIGN
Developing For A Multitude Of Devices
Executive summary of the book‘s topic
Wolfram Nagel | SETU Gmb...
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 Desi...
We are a nation
of multiscreeners.
Most of media time today
is spent in front of a
screen.
Google Study 2012
http://www.th...
Device / Screen
Context of Use
User
Strategies
and Examples
From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 9...
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
...
http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/
http://www.cxpartners.co.uk/cxblog/mobile-app-or-mobile-web/
...
Margaret Brown Kelly AdamsBarbara Stewart Melissa Anderson
Andrew Collins Mark Hudson Robert Sullivan Larry Newton
User Pr...
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 Fi...
Mobile First
It is advisable to concentrate on the most important device first. The smallest screen forces a meaningful st...
Design for the screen with the most constraints first. The small screen forces you into structuring your information. (Luk...
SimultanEITY
Different devices or information services are used simultaneously. Different pieces of information may comple...
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 u...
Zeebox offers additional information to the current TV show including parallel watching friends and their other preferred ...
Device Shifting
The display of information or content is shifted to a separate device by the user. The display is switched...
With Apple AirPlay (and Apple TV) you can change devices in the middle of a film and continue obtaining information on ano...
Complementarity
The display of information or content is shifted to a separate device by the user. The display is switched...
Connect the smarthpone with the desktop browser and navigate the website via smartphone. → http://www.diplomatic-cover.com...
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...
Screen Sharing
The display of information or content is shifted to a separate device by the user. The display is switched ...
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 fe...
HOME PRODUKTE SERVICE KONTAKT Suchbegriff
SEITE DURCHSUCHEN
Suchen
More about coherent interfaces and smart content via → ...
Fluidity
The display of information or content is shifted to a separate device by the user. The display is switched betwee...
Applications (e.g., smartphone apps) should generally offer the same functionality. That was previously not the case with ...
Smart Content
Content should be as flexible as possible, to be easily used and published across different channels and dev...
National Public Radio (NPR) uses and provides an open API according to the COPE principle—create once, publish everywhere
...
Mashability
The display of information or content is shifted to a separate device by the user. The display is switched bet...
Qwiki and Storify use(d) APIs of other services to aggregate various content (text, image, video) to a new information pac...
Communification
Social networking and creating a community can make an information service more attractive for the users.
...
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...
With the Heineken Star Player iPhone app, viewers can predict live the outcome of individual game situations during a socc...
Storyfication
The display of information or content is shifted to a separate device by the user. The display is switched b...
Who Will Save Dina Foxx” was initially broadcast on ZDF (a German public-service TV broadcaster). The viewers became inves...
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 ...
Microjoyment
The display of information or content is shifted to a separate device by the user. The display is switched be...
mytaxi app: Find and order a nearbby taxi. Reduced interface for the watch screen. At the end of the taxi ride the passeng...
Hybrid Media
The display of information or content is shifted to a separate device by the user. The display is switched be...
PhoneBook: Combination of a digitale und analogue medium. For every page, there is a suitable little
background film. (htt...
Josh Clark
https://twitter.com/#!/globalmoxie/status/192276891913297920
A part of Multi-device
strategy is simply
embracin...
Content Design
and UI Mapping
Design from the Content out.
Stephen Hay
http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-wo...
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-M...
If you have a bunch of unsorted elements (e.g. LEGO bricks, UI elements or a lot of content) take the time to organize the...
name (1 day ticket)
price
date of purchase
[...]
TICKET (TYPE)
title
date
description
[...]
EVENT
title
date
body
[...]
NE...
1 2 4 53
brickLEGO bumper bar truck fire truckdriving cab
CONTENT
USER
INTERFACE
ELEMENT COMPONENT TYPE INSTANCE /
OBJECT
S...
UI MAPPING
Structured content is mapped
for presentation in various target
channels.
content structure mapping
Content fro...
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
h...
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 Desi...
Thank you!
Slides:	 msxbook.com/muxd
Article:	msxbook.com/muxdtxt
E-mail:	 hello@wolframnagel.com
Twitter:	@wolframnagel
W...
Multiscreen UX Design - Developing for a multitude of devices
Multiscreen UX Design - Developing for a multitude of devices
Multiscreen UX Design - Developing for a multitude of devices
Nächste SlideShare
Wird geladen in …5
×

Multiscreen UX Design - Developing for a multitude of devices

2.116 Aufrufe

Veröffentlicht am

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 summary of the book. More via www.msxbook.com/en

Veröffentlicht in: Design

Multiscreen UX Design - Developing for a multitude of devices

  1. 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. 2. These slides are a summary of the book „Multiscreen UX Design“ (Morgan Kaufmann) More via www.multiscreen-ux-design.com
  3. 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. 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
  5. 5. Device / Screen Context of Use User Strategies and Examples From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295)
  6. 6. Screens, Users, and Context of Use
  7. 7. From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295) Multiscreen
  8. 8. 10 – 30 cm 30 – 50 cm 1 m 3 m Distance User <––> Screen
  9. 9. 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
  10. 10. 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
  11. 11. Margaret Brown Kelly AdamsBarbara Stewart Melissa Anderson Andrew Collins Mark Hudson Robert Sullivan Larry Newton User Prototypes
  12. 12. Mark Hudson (Trend user) aged 35, single | event manager, secondary school
  13. 13. MODEOFUS E S ITUATION ENVIRONMENT Context of use
  14. 14. mobile context of use
  15. 15. Strategies and examples
  16. 16. 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
  17. 17. Mobile First It is advisable to concentrate on the most important device first. The smallest screen forces a meaningful structure of information.
  18. 18. 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)
  19. 19. SimultanEITY Different devices or information services are used simultaneously. Different pieces of information may complement one another.
  20. 20. Parallel, additional information on the second screen. (http://www.designbynotion.com/metamirror-next-generation-tv)
  21. 21. Social TV Spatially separated viewers can quasi watch TV together or directly participate. Broadcasts are recommended by user profiles.
  22. 22. 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
  23. 23. 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.
  24. 24. 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
  25. 25. Complementarity The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  26. 26. Connect the smarthpone with the desktop browser and navigate the website via smartphone. → http://www.diplomatic-cover.com/multi
  27. 27. Synchronisation Information is kept in sync and up-to-date across devices.
  28. 28. Flight booking on the laptop, flight information and boarding pass via smartphone, notifications and status updates on the smartwatch.
  29. 29. 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.
  30. 30. With the slot car racing game »Racer« you can use several screens to expand the race track. (http://g.co/racer).
  31. 31. 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.)
  32. 32. 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
  33. 33. Fluidity The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  34. 34. 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).
  35. 35. Smart Content Content should be as flexible as possible, to be easily used and published across different channels and devices.
  36. 36. 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
  37. 37. Mashability The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  38. 38. Qwiki and Storify use(d) APIs of other services to aggregate various content (text, image, video) to a new information package.
  39. 39. 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.
  40. 40. Example Nike+ mit iPhone app, social network itegration, own community and gamification features.
  41. 41. Gamification Game mechanics simulate a competitive environment. A game factor can motivate people if it is challenging and provides relevant goals.
  42. 42. 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.
  43. 43. Storyfication The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  44. 44. 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.
  45. 45. Emotionality A service is emotionally more attractive, if it is fun and supports a device fragmented daily routine.
  46. 46. 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)
  47. 47. Microjoyment The display of information or content is shifted to a separate device by the user. The display is switched between the screens involved.
  48. 48. 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).
  49. 49. 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.
  50. 50. 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).
  51. 51. Josh Clark https://twitter.com/#!/globalmoxie/status/192276891913297920 A part of Multi-device strategy is simply embracing the uncertainty.
  52. 52. Content Design and UI Mapping
  53. 53. Design from the Content out. Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  54. 54. User Content Rules UI Interfaces (API) Four core areas (+ the user, of course)
  55. 55. 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)
  56. 56. 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
  57. 57. 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
  58. 58. 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
  59. 59. 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
  60. 60. Content UI Mapping: More about the topic via → www.msxbook.com/CDUIM and www.msxbook.com/CDUIMtxt
  61. 61. 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/
  62. 62. SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen) → www.setusoft.de
  63. 63. 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
  64. 64. Thank you! Slides: msxbook.com/muxd Article: msxbook.com/muxdtxt E-mail: hello@wolframnagel.com Twitter: @wolframnagel Website: wolframnagel.com

×