Content Design and UI Architecture for Multiscreen-projects

1. Content Design and UI Architecture for Multiscreen Projects World Usability Day, Hochschule Aalen | 9th November 2017 | Wolfram Nagel, TeamViewer GmbH (Germany)

2. Methods and conceptual considerations for multiscreen-ready content and user interfaces according to the building block principle Content Design AND UI Architecture For Multiscreen Projects World Usability Day, Hochschule Aalen 9. November 2017 Wolfram Nagel, TeamViewer GmbH (Germany) All rights reserved.

3. Wolfram Nagel Senior UX Designer (TeamViewer) Blizz Online Meeting and Collaboration UI/UX, Multiscreen, Content Design Author „Multiscreen UX Design“ Co-Initiator Design Methoden Finder www.designmethodenfinder.de Twitter:@wolframnagel#Multiscreen #UX#ContentDesign

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

5. 1 | Multiscreen 2 | Content Design 3 | UI Mapping

6. Multiscreen World

7. http://www.huffingtonpost.ca/2013/06/10/tv-viewing-habits-canada-rogers-survey_n_3415721.html

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

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

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

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

12. 10 – 30 cm 30 – 50 cm 1 m 3 m Distance User <––> Screen From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)

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

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

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

16. MODEOF US E SI TUATION Context of use ENVIRONMENT

17. mobile context of use

18. Multiscreen Strategies

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

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

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

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

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

24. Complementarity Both the devices and the information depicted on the screens reciprocally influence, control, and complement each other.

25. Connect the smarthpone with the desktop browser and navigate the website via smartphone. → http://www.diplomatic-cover.com/multi

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

27. Screen Sharing An information (source) is displayed across multiple screens and shifted or expanded to them.

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

29. Blizz is an online meeting and collaboration service. You can share your screen or a specific application with up to 300 participants across various devices.

30. Fluidity Information offerings should function similarly across devices and offer an unchanging and fluid user experience.

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

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

33. Example Nike+ mit iPhone app, social network itegration, own community and gamification features.

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

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

36. Microjoyment Due to the increasing information density, you must simplify small and important subtasks. Focus on details to enhance the user experience.

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

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

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

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

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

42. Content Design AND Touchpoints

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

44. 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) Selection of target channels, devices and touchpoints Example „New York Times“ article

45. Touchpoints foreign Instapaper Facebook (Desktop)Browser (Safari / iOS) own iPhone App

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

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

48. Bricks and Modules

49. Source: LEGO® bricks: http://cache.lego.com/r/www/r/aboutus/-/media/about%20us/media%20assets%20library/products/lego%20bricks/720_lego_bricksloose.jpg?l.r2=-1799651218 LEGO Bricks

50. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...

51. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... brick

52. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... componentbrick

53. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... componentbrick segment

54. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... componentbrick segment TYPE object

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

56. brick component segment type object Atomic Design Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design brick UI typebrick group

57. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen brick

58. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen component

59. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen SEGMENT

60. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen TYPe

61. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen SEGMENT component brick TYPe

62. instance of type (concrete specific web page)

63. brick component SEGMENT TYPe

64. Content type „Recipe“

65. name of recipe name of recipe footnote softlink instruction image author recipe information ingredients category Content type „Recipe“

66. Content model xxx 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 Own illustration (source: Jonathan Kahn, http://alistapart.com/article/strategic-content-management)

67. Content model Correlation of content types Own illustration (source: Jonathan Kahn, http://alistapart.com/article/strategic-content-management) 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 type content type brick group shape

68. Content and UI Mapping

69. Content flow Source: „Die Zukunft von Content (Management)“ / www.msxbook.com/ngixup14

70. Content flow (three-step) Input manage Output various sources various channelsContent Hub 1 2 3

71. Content flow (three-step) content structure mapping Content from any source is mapped to defined content structure. 1 2 3 Input manage Output various sources various channelsContent Hub

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

73. https://twitter.com/sorenmalling/status/691388259377745920

74. Content Structure Mapping (in the centralized content hub / exemplified) Title / Headline Short text Long text* Image Date Author Document 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 Content elements can be generated via variable input channels (each channel quasi serves as CMS) *Semantic structuring (e.g. H1, bold, quote, listing, etc.) is adopted.

75. Content Structure Mapping (in the centralized content hub / exemplified) Article Title / Headline Short text Long text* Image Date Author Document 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

76. title image (with caption, originator) dateauthor(s) short textlong text Content structure Title / Headline Short text Long text Image Date Author

77. Correlation and Mapping (SAME content → different presentation)

78. LARGE Medium Small

79. LARGE Medium Small Content type (events) Category Image Title Subtitle Date Location Description

87. Correlation and Mapping (Different content → Same presentation) Article Headline, Date, Abstract, Category, Image, Author, ... Teaser (Article) Event Title, Date, Location, Category, Image, Time, Admissi- on, ... Teaser (Event) Generic structure Main text, Short text (3x), Image Teaser component (generic) Different content types Identical presentation Content type „events“ Title Date Location Category Image Time Admission Content type „article“ Headline Date Abstract Category Image Author ... Generic structure Main text Short text Short text Short text Image

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

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

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

91. Article Headline, Date, Abstract, Category, Image, Au- thor, ... Event Title, Date, Location, Category, Image, Time, Admission, ... Generic structure Main text, Short text (3x), Image Different content types Correlation and Mapping (Different content → same presentation) Teaser (Article)Teaser (Event) Teaser component (generic) Identical presentation Content type „events“ Titel Termin Location Rubrik Bild Uhrzeit Eintritt Content type „article“ Headline Datum Abstract Rubrik Bild Author ... Generic structure Haupttext Kurztext Kurztext Kurztext Bild

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

93. 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 ITERATION

94. Book Smartphone Dress LEGO Shoe Television

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

96. 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: Amazon product › Shape: Book › Brick group: Dimensions and prices › Brick: Price | Value: 29,- EUR Brick Brick group Shapes Book X X X X X X X X X X X X X X X X X Content type PRODUCT Content Type „Product“ and Shapes

97. component / Element 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

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

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

100. Magnolia stories app for content authoring: You can create rich structured content and publish across multiple channels. → https://www.magnolia-cms.com/magnolia/use-cases/stories-app.html

101. Outlook

102. › 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)

103. A user interface is not only visual! Input, output and interaction also via: › Audio / speech › Haptics / tangency › Temperature › Text only › ... Graphical User Interface

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

105. Information is outputted as temperature. brick Tado Smart-Thermostat Heating control via smarthpone app or browser

106. Information is „just“ interchanged by words. Conversational User Interfaces and Chatbots Speech recognition and processing / Communication via automatic and personal chats

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

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

109. roundup › Central hub for content › Central system for UI definitions › General separation of content and presentation › Content and UI according to the brick building system › Correlation and mapping › Consider future UIs › Combine proven methods › Support processes using software › Automation

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

111. Thankyou! Slides: msxbook.com/CDUIA Article: msxbook.com/CDUIAtxt E-mail: wolfram.nagel@teamviewer.com Twitter: @wolframnagel Web: www.wolframnagel.com www.teamviewer.com / www.blizz.com

112. Thankyou! Slides: msxbook.com/CDUIA Article: msxbook.com/CDUIAtxt E-mail: wolfram.nagel@teamviewer.com Twitter: @wolframnagel Web: www.wolframnagel.com www.teamviewer.com / www.blizz.com btw: TEAMVIEWERIS HIRING :-)