Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Content Design and UI Architecture for Multiscreen-projects

776 views

Published on

We live in a Multiscreen world. Content and services have to be outputted and displayed across various devices and channels. This requires a holistic strategy. When you want to gather, manage and publish content and display it independently on any user interface and/or target channel you need a system that supports “Content Design and Content UI Mapping”. Content and user interfaces can be planned and assembled modularly and structured in a similar manner — comparable to bricks in a building block system. Content basically runs through three steps until it reaches its recipient: Gathering, management and output. A mapping has to occure at the intersections of these three steps. Wolfram Nagel (Senior UX Designer at TeamViewer and responsible for the Blizz UX) presented challenges and approaches in the multiscreen-context at World Usability Day 2017.

There's also an article on the topic: https://medium.com/@wolframnagel/content-design-and-ui-mapping-a35af8cac3f6#.3ylkxrakf

Published in: Design
  • Be the first to comment

Content Design and UI Architecture for Multiscreen-projects

  1. 1. Content Design and UI Architecture for Multiscreen Projects World Usability Day, Hochschule Aalen | 9th November 2017 | Wolfram Nagel, TeamViewer GmbH (Germany)
  2. 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. 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. 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. 5. 1 | Multiscreen 2 | Content Design 3 | UI Mapping
  6. 6. Multiscreen World
  7. 7. http://www.huffingtonpost.ca/2013/06/10/tv-viewing-habits-canada-rogers-survey_n_3415721.html
  8. 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. 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. 10. Device / Screen Context of Use User Strategies and Examples From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)
  11. 11. Multiscreen From „Multiscreen UX Design“ (www.msxbook.com/enbook ISBN: 978-0128027295)
  12. 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. 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. 14. Margaret Brown Kelly AdamsBarbara Stewart Melissa Anderson Andrew Collins Mark Hudson Robert Sullivan Larry Newton User Prototypes
  15. 15. Mark Hudson (Trend user) aged 35, single | event manager, secondary school
  16. 16. MODEOF US E SI TUATION Context of use ENVIRONMENT
  17. 17. mobile context of use
  18. 18. Multiscreen Strategies
  19. 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. 20. SimultanEITY Different devices or information services are used simultaneously. Different pieces of information may complement one another.
  21. 21. Parallel, additional information on the second screen. (http://www.designbynotion.com/metamirror-next-generation-tv)
  22. 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. 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. 24. Complementarity Both the devices and the information depicted on the screens reciprocally influence, control, and complement each other.
  25. 25. Connect the smarthpone with the desktop browser and navigate the website via smartphone. → http://www.diplomatic-cover.com/multi
  26. 26. With the TeamViewer QuickSupport smartphone app you can remotely control, monitor, and maintain other computers or mobile devices.
  27. 27. Screen Sharing An information (source) is displayed across multiple screens and shifted or expanded to them.
  28. 28. With the slot car racing game »Racer« you can use several screens to expand the race track. (http://g.co/racer).
  29. 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. 30. Fluidity Information offerings should function similarly across devices and offer an unchanging and fluid user experience.
  31. 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. 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. 33. Example Nike+ mit iPhone app, social network itegration, own community and gamification features.
  34. 34. Gamification Game mechanics simulate a competitive environment. A game factor can motivate people if it is challenging and provides relevant goals.
  35. 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. 36. Microjoyment Due to the increasing information density, you must simplify small and important subtasks. Focus on details to enhance the user experience.
  37. 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. 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. 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. 40. Smart Content Content should be as flexible as possible, to be easily used and published across different channels and devices.
  41. 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. 42. Content Design AND Touchpoints
  43. 43. Selection of target channels, devices and touchpoints Example „New York Times“ article
  44. 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. 45. Touchpoints foreign Instapaper Facebook (Desktop)Browser (Safari / iOS) own iPhone App
  46. 46. User Content Rules UI Interfaces (API) Four core areas (+ the user, of course)
  47. 47. Design from the Content out. Stephen Hay http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
  48. 48. Bricks and Modules
  49. 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. 50. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
  51. 51. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... brick
  52. 52. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... componentbrick
  53. 53. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... componentbrick segment
  54. 54. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... componentbrick segment TYPE object
  55. 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. 56. brick component segment type object Atomic Design Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design brick UI typebrick group
  57. 57. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen brick
  58. 58. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen component
  59. 59. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen SEGMENT
  60. 60. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen TYPe
  61. 61. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen SEGMENT component brick TYPe
  62. 62. instance of type (concrete specific web page)
  63. 63. brick component SEGMENT TYPe
  64. 64. Content type „Recipe“
  65. 65. name of recipe name of recipe footnote softlink instruction image author recipe information ingredients category Content type „Recipe“
  66. 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. 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. 68. Content and UI Mapping
  69. 69. Content flow Source: „Die Zukunft von Content (Management)“ / www.msxbook.com/ngixup14
  70. 70. Content flow (three-step) Input manage Output various sources various channelsContent Hub 1 2 3
  71. 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. 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. 73. https://twitter.com/sorenmalling/status/691388259377745920
  74. 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. 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. 76. title image (with caption, originator) dateauthor(s) short textlong text Content structure Title / Headline Short text Long text Image Date Author
  77. 77. Correlation and Mapping (SAME content → different presentation)
  78. 78. LARGE Medium Small
  79. 79. LARGE Medium Small Content type (events) Category Image Title Subtitle Date Location Description
  80. 80. LARGE Medium Small
  81. 81. LARGE Medium Small
  82. 82. Content bricks Category | Image | Title | Subtitle | Date | Location | Description Teaser Large Large image | Title | 4x Short text Teaser Medium Small image | Title | 5x Short text Teaser Small No image | Title | 4x Short text Content type (events) Different presentation LARGE Medium Small
  83. 83. Content bricks Category | Image | Title | Subtitle | Date | Location | Description Content type (events) LARGE Medium Small
  84. 84. LARGE Medium Small Content bricks Category | Image | Title | Subtitle | Date | Location | Description Content type (events)
  85. 85. Bricks Category | Image | Title | Subtitle | Date | Location | Description Bricks Category | Image | Title | Subtitle | Date | Location | Description Bricks Category | Image | Title | Subtitle | Date | Location | Description Content type (events) Content type (events) Content type (events) Small LARGE Medium
  86. 86. LARGE Medium Small Bricks Category | Image | Title | Subtitle | Date | Location | Descrip- Bricks Category | Image | Title | Subtitle | Date | Location | Descrip- Bricks Category | Image | Title | Subtitle | Date | Location | Descrip- Content type (events) Content type (events) Content type (events) Content bricks UI bricksMapping
  87. 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. 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. 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. 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. 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. 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. 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. 94. Book Smartphone Dress LEGO Shoe Television
  95. 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. 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. 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. 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. 99. SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen) → www.setusoft.de
  100. 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. 101. Outlook
  102. 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. 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. 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. 105. Information is outputted as temperature. brick Tado Smart-Thermostat Heating control via smarthpone app or browser
  106. 106. Information is „just“ interchanged by words. Conversational User Interfaces and Chatbots Speech recognition and processing / Communication via automatic and personal chats
  107. 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. 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. 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. 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. 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. 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 :-)

×