Content Design, UI Architecture and UI Mapping
5 likes14,428 views
The document discusses content management methods for multiscreen and channel-independent design, focusing on a building block principle that emphasizes user-centered content mapping and structuring. It outlines a multi-phase approach involving user strategies, content inventory, design workflows, and structural mapping for various target devices and channels. The document also introduces content modeling concepts and tools that optimize the presentation and interaction of content across diverse digital platforms.
![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)](https://image.slidesharecdn.com/msx-cduia-cuim01-2compact20161211-161211091354/85/Content-Design-UI-Architecture-and-UI-Mapping-24-320.jpg)
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
- 12. Colorcodes AND Terms brick type / templatebrick group shape / variation
- 13. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ... componentbrick segment TYPE object
- 14. brick component segment type object Atomic Design Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design brick UI typebrick group
- 15. Source: Brad Frost, http://atomicdesign.bradfrost.com/chapter-2/#atomic-design-is-for-user-interfaces brick brick group UI type
- 17. HOME PRODUKTE SERVICE KONTAKT Suchbegriff SEITE DURCHSUCHEN Suchen SEGMENT component brick TYPe
- 18. instance of type (concrete specific web page)
- 19. 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
- 20. 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/
- 22. 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
- 23. 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
- 24. 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)
- 25. 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
- 26. title image (with caption, originator) dateauthor(s) short textlong text Title / Headline Short text Long text Image Date Author Structure
- 27. 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)
- 28. Touchpoints foreign Instapaper Facebook (Desktop)Browser (Safari / iOS) own iPhone App
- 29. 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“
- 30. 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
- 32. LARGE Medium Small Correlation and Mapping (Same content → different presentation)
- 33. LARGE Medium Small Content bricks Category | Image | Title | Subtitle | Date | Location | Description Content type (events) Correlation and Mapping (Same Content → Different presentation)
- 34. 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
- 35. 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
- 36. 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
- 38. SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen) → www.setusoft.de
- 39. Outlook
- 40. › 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)
- 41. A user interface is not only visual! Input, output and interaction also via: › Audio / speech › Haptics / tangency › Temperature › Text only › ... Graphical User Interface
- 42. 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/
- 43. Information is outputted as temperature. brick Tado Smart-Thermostat Heating control via smarthpone app or browser
- 44. Information is „just“ interchanged by words. Conversational User Interfaces and Chatbots Speech recognition and processing / Communication via automatic and personal chats
- 45. 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.
- 46. 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.
- 47. Thank you! Slides: msxbook.com/CDUIMcompact Article: msxbook.com/CDUIMtxt E-mail: wolfram.nagel@setusoft.de Twitter: @wolframnagel Website: wolframnagel.com SETU: setusoft.de
- 48. 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