Content Design, UI Architecture and UI Mapping

1. Methods and conceptual considerations for multiscreen-ready and channel-independent content management according to the building block principle Content Design, UI ArchiteCturE And Mapping Introduction / compact Wolfram Nagel, SETU GmbH (Germany) All rights reserved.

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

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

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

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

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

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

8. Bricks and Modules

9. Colorcodes AND Terms brick type / templatebrick group shape / variation

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

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

12. Source: Brad Frost, http://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces brick brick group UI type

13. brick component SEGMENT TYPe

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

15. instance of type (concrete specific web page)

16. 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 Building block principle brick Brick group type target system

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

18. Content and UI Mapping

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

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

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

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

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

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

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

26. 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 Brick „Headline“

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

28. LARGE Medium Small Correlation and Mapping (Same content → different presentation)

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

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

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

34. Outlook

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

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

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

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

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

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

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

42. Thank you! Slides: msxbook.com/CDUIMcompact Article: msxbook.com/CDUIMtxt E-mail: wolfram.nagel@setusoft.de Twitter: @wolframnagel Website: wolframnagel.com SETU: setusoft.de

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