Content Design, UI Architecture and UI Mapping

1,877 views

Published on

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. There's also an extended version with more and detailed slides available. And here's an article on the topic: https://medium.com/@wolframnagel/content-design-and-ui-mapping-a35af8cac3f6#.3ylkxrakf

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,877
On SlideShare
0
From Embeds
0
Number of Embeds
1,436
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Content Design, UI Architecture and UI Mapping

  1. 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. 2. From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295) Multiscreen
  3. 3. Device / Screen Context of Use User Strategies and Examples From „Multiscreen UX Design“ (www.msxbook.com/enbook → ISBN: 978-0128027295)
  4. 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. 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. 6. User Content Rules UI Interfaces (API) Four core areas (+ the user, of course)
  7. 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. 8. Bricks and Modules
  9. 9. Colorcodes AND Terms brick type / templatebrick group shape / variation
  10. 10. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... componentbrick segment TYPE object
  11. 11. brick component segment type object Atomic Design Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design brick UI typebrick group
  12. 12. Source: Brad Frost, http://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces brick brick group UI type
  13. 13. brick component SEGMENT TYPe
  14. 14. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen SEGMENT component brick TYPe
  15. 15. instance of type (concrete specific web page)
  16. 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. 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. 18. Content and UI Mapping
  19. 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. 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. 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. 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. 23. title image (with caption, originator) dateauthor(s) short textlong text Title / Headline Short text Long text Image Date Author Structure
  24. 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. 25. Touchpoints foreign Instapaper Facebook (Desktop)Browser (Safari / iOS) own iPhone App
  26. 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. 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. 28. LARGE Medium Small Correlation and Mapping (Same content → different presentation)
  29. 29. LARGE Medium Small Content bricks Category | Image | Title | Subtitle | Date | Location | Description Content type (events) Correlation and Mapping (Same Content → Different presentation)
  30. 30. LARGE 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) Medium Small
  31. 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. 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. 33. SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen) → www.setusoft.de
  34. 34. Outlook
  35. 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. 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. 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. 38. Information is outputted as temperature. brick Tado Smart-Thermostat Heating control via smarthpone app or browser
  39. 39. Information is „just“ interchanged by words. Conversational User Interfaces and Chatbots Speech recognition and processing / Communication via automatic and personal chats
  40. 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. 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. 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. 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

×