This document discusses methods and conceptual considerations for content design and user interface architecture for multiscreen projects according to the building block principle. It introduces concepts like multiscreen strategies, content modeling, content structure mapping, content and UI mapping, and using a building block approach to define smallest reusable elements that can be combined to create interfaces for different devices and contexts. The document is from a presentation given at the World Usability Day at Hochschule Aalen on November 9th, 2017.
Content Design and UI Architecture for Multiscreen Projects (compact)Wolfram Nagel
These days, each project is a project for multiple screens. Multiscreen has become digital reality and requires a continuous information flow, a central hub for contents and a system for the definition of user interface (UI) elements. Content and user interface should basically be independent, but there's a correlation. Content and user interfaces can be built and planned modularly and structured according to a similar pattern - comparable to the bricks in a building block system.
You can find more information on that topic in the book "Multiscreen UX Design": http://www.msxbook.com/enbook
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)Wolfram Nagel
Wolfram Nagel is a Senior User Experience Designer, UI Architect and Concept Developer. He's mainly responsible for conception and design in close collaboration with product owners, product managers, front-end and back-end developers.
His goal is to solve users’ problems, consider and address strategic and economic goals, and to help developers to implement potential solutions in a pragmatic and feasible way.
This rough overview on the focus areas of Wolfram Nagel has been presented at the "UX Thinking Seminar" by artop (https://www.artop.de/akademie/seminare/ux-thinking/)
Multiscreen UX Design - Developing for a multitude of devices (summary) Wolfram Nagel
We live in a Multiscreen-World. Everything needs to work across devices. This requires a holistic strategy. +++ People today use technology on different devices in different locations. Users expect to access information on all relevant screens and across multiple channels through smartphones, tablets, laptops/desktops, smart (internet-connected) TVs, and other devices, such as smartwatches for example. Multiscreen is no longer a nice add-on, it’s a requirement. In this environment, user experience needs to cater to multiple devices. +++ These slides are a compact summary of the book. More via www.msxbook.com/en
Multiscreen UX Design - Developing for a multitude of devices Wolfram Nagel
We live in a Multiscreen-World. Everything needs to work across devices. This requires a holistic strategy. +++ People today use technology on different devices in different locations. Users expect to access information on all relevant screens and across multiple channels through smartphones, tablets, laptops/desktops, smart (internet-connected) TVs, and other devices, such as smartwatches for example. Multiscreen is no longer a nice add-on, it’s a requirement. In this environment, user experience needs to cater to multiple devices. +++ These slides are a summary of the book. More via www.msxbook.com/en
Content Design, UI Architecture and Content-UI-MappingWolfram Nagel
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.
This is the extended slides version on the topic.
There's also an article on the topic: https://medium.com/@wolframnagel/content-design-and-ui-mapping-a35af8cac3f6#.3ylkxrakf
Content Design, UI Architecture and UI MappingWolfram Nagel
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
Content Design and UI Architecture for Multiscreen Projects (compact)Wolfram Nagel
These days, each project is a project for multiple screens. Multiscreen has become digital reality and requires a continuous information flow, a central hub for contents and a system for the definition of user interface (UI) elements. Content and user interface should basically be independent, but there's a correlation. Content and user interfaces can be built and planned modularly and structured according to a similar pattern - comparable to the bricks in a building block system.
You can find more information on that topic in the book "Multiscreen UX Design": http://www.msxbook.com/enbook
Multiscreen and Beyond – Topics and Focus Areas (Wolfram Nagel)Wolfram Nagel
Wolfram Nagel is a Senior User Experience Designer, UI Architect and Concept Developer. He's mainly responsible for conception and design in close collaboration with product owners, product managers, front-end and back-end developers.
His goal is to solve users’ problems, consider and address strategic and economic goals, and to help developers to implement potential solutions in a pragmatic and feasible way.
This rough overview on the focus areas of Wolfram Nagel has been presented at the "UX Thinking Seminar" by artop (https://www.artop.de/akademie/seminare/ux-thinking/)
Multiscreen UX Design - Developing for a multitude of devices (summary) Wolfram Nagel
We live in a Multiscreen-World. Everything needs to work across devices. This requires a holistic strategy. +++ People today use technology on different devices in different locations. Users expect to access information on all relevant screens and across multiple channels through smartphones, tablets, laptops/desktops, smart (internet-connected) TVs, and other devices, such as smartwatches for example. Multiscreen is no longer a nice add-on, it’s a requirement. In this environment, user experience needs to cater to multiple devices. +++ These slides are a compact summary of the book. More via www.msxbook.com/en
Multiscreen UX Design - Developing for a multitude of devices Wolfram Nagel
We live in a Multiscreen-World. Everything needs to work across devices. This requires a holistic strategy. +++ People today use technology on different devices in different locations. Users expect to access information on all relevant screens and across multiple channels through smartphones, tablets, laptops/desktops, smart (internet-connected) TVs, and other devices, such as smartwatches for example. Multiscreen is no longer a nice add-on, it’s a requirement. In this environment, user experience needs to cater to multiple devices. +++ These slides are a summary of the book. More via www.msxbook.com/en
Content Design, UI Architecture and Content-UI-MappingWolfram Nagel
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.
This is the extended slides version on the topic.
There's also an article on the topic: https://medium.com/@wolframnagel/content-design-and-ui-mapping-a35af8cac3f6#.3ylkxrakf
Content Design, UI Architecture and UI MappingWolfram Nagel
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
A strategic overview of developing for Chrome on Android and native on Android. Touching on the migration from the open web to walled gardens of applications.
According to jqtouch.com, jQTouch is a “jQuery plugin for mobile Web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.” Web apps can easily be created using jQTouch, and they resemble native apps. jQTouch includes native WebKit animations, automatic navigation, extensions for geo-location and offline capabilities, and themes built specifically for mobile WebKit browsers like the above-mentioned mobile devices. In this session, Chad Mairn will explain the differences between native and Web apps, highlight some free and useful web development tools, and will then demonstrate how to install and customize jQTouch in order to help kick start your library’s mobile Web presence.
Mobile Developer's Guide To The Galaxy, 14th EditionMarco Tabor
The latest edition of the community-driven handbook on mobile technologies. 256 pages packed with everything you need to know to start your mobile business: Which platforms exist and what's their potential? What about cross-platform app development? How do I create an app concept that works? How do I implement location-based services, NFC, mobile analytics, augmented reality or media content? What do I need to know about accessibility, monetization, security and app testing?
20 experts share their know-how in this book and you are invited to join them! See www.enough.de/mdgg for details.
Talk to inspire creating surprising new user experiences (like the examples in the talk) that use powerful new technologies (like AI, AR, VR, IoT, brainwave-control, depth-sensing, eye-tracking, etc.) through mostly free SDKs and software (to which the presentation provides some links).
The presentation shows examples of experiences that are literally 'wonder'-ful, and fulfill a real need at the same time (they're not just games), like a school bus to Mars, AI robot for the elderly, and apps that teach our thoughts.
It bundles information that is freely available on the Internet, and mostly not my own work.
SlideShare doesn't run embedded videos, but they run if you downloaded this PDF.
Build once deploy everywhere using the telerik platformAspenware
The Telerik Platform is a suite of tools for developing, testing, deploying and analyzing hybrid mobile applications. Hybrid mobile applications are most commonly built using PhoneGap, which interprets HTML5/CSS3/JavaScript and compiles it into a package that can be delivered in the app stores. PhoneGap also utilizes Apache Cordova JavaScript APIs to access certain native mobile features of the device. The Telerik Platform uses AppBuilder to abstract the complexity of PhoneGap/Cordova and provides a more intuitive way to build hybrid mobile applications. If you are looking to expand your .NET and web based development skills into the mobile market this is the session for you.
Lessons learned:
-What a hybrid mobile apps can do
-How Icenium helps build a hybrid mobile app
-How you can leverage your current web knowledge and assets to create a mobile app
In a cutthroat business scenario, companies want to reach as many people as possible, but then as people use different mobile devices working on different OS, it is difficult for them to address a huge smartphone users’ community with native apps for a specific platform. Out of several available cross-platform app tools, Titanium, Sencha Touch and PhoneGap are outstanding tools that can readily develop mobile apps that work fine on different platforms. Let us compare them in this slide.
Screen and Context: Usability in the Postdesktop WorldDoug Gapinski
The era of desktop-first methodologies has ended. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. People aren't just visiting your site on phones and desktop computers, they are also using game consoles, laptops, tablets, and other devices. As we enter into the renaissance of the postdesktop web, we must be prepared to boldly alter how we prototype, design, and gather feedback from audiences. Two of the most important factors for current web usability are considering the screen (designing and testing for multiple displays) and context.
The use of mobile applications is now so common that users now expect companies whose services which
they consume already have an application to provide these services or a mobile version of your site, but this is not always simple to do or cheap. Thus, the hybrid development has emerged as a potential alternative to this need. The evolution of this new paradigm has taken the attention of researchers and companies as viable alternative to the mobile development. This paper shows how hybrid development can be an alternative for companies provide their services with a low investment and still offer a great service to their clients.
More people are using mobile platforms to access information - can your business afford to be left behind in an age of rapid digital transformation?
When once it was acceptable to be in the late majority when it came to adjusting your business to technological advancements, nowadays you have to lead the pack in order to be a viable business.
Meetup #7 Voiture Connectée et Autonome à ParisLaurent Dunys
Le 20 avril 2017 chez INGIMA à Paris.
Le Meetup Voiture Connectée et Autonome est un événement réunissant la communauté des professionnels du secteur.
Pour cette 7ème édition, nous avons le plaisir de vous présenter 4 projets qui ont pour mission de transformer l'usage de l'automobile, de la mobilité et des transports à travers des solutions technologiques et des business models innovants.
1) GPSGate: Your Next GPS Tracking and IoT Platform
2) YoGoKo conçoit et met en œuvre des solutions de communication pour le véhicule connecté & coopératif dans la ville intelligente. Conformes aux standards des ITS Coopératifs, ces solutions permettent l’échange de données entre les véhicules et avec l’infrastructure routière ou urbaine, tout en fournissant une connectivité Internet sécurisée. Les solutions YoGoKo sont notamment déployés dans les véhicules de gestionnaires d’infrastructure routière (déploiement pilote SCOOP@F) et chez plusieurs acteurs du véhicule autonome et connecté, en particulier VEDECOM, pour ses expérimentations sur route ouverte.
3) Cabine connectée COVED by SMILE: Smile, leader européen de l’intégration, de l’infogérance et de l'IoT à partir de solutions open source, accompagne le groupe Coved dans son projet à la fois ambitieux et structurant de cabines connectées. Ce projet a reçu l'IoT Awards 2017 dans la catégorie "Hi-Tech".
4) Munic.Box by Mobile Devices: Proven independent aftermarket and OEM connected car platform, hardware & tools.
De plus, Ross Douglas est venu nous présenter le nouveau format de l'événement Autonomy, prévu à Paris du 19 au 21 Octobre, dédié à la mobilité urbaine.
Les Meetups Voiture Connectée et Autonome vous sont proposés par Laurent Dunys, https://www.linkedin.com/in/laurentdunys, depuis 2016.
Rejoignez notre groupe en ligne: https://www.meetup.com/fr-FR/MeetupVoitureConnecteeAutonome
25+ mLearning Tools in 60 Minutes - DevLearn 2010B.J. Schone
A variety of mLearning platforms, development tools, and applications has emerged in recent years. It’s often difficult to know what’s available without doing dedicated research (and project timelines don’t always allow for research!).
This presentation shows 25+ different mLearning tools (such as systems, development tools, emulators, assessment tools, etc.) along with a brief description and URL for each.
Audience: Novice to intermediate level participants with a general understanding of mLearning and the situations when or where it can be used.
Powerpoint created for October 2019 Augmenting Reality Meetup hosted by Steve Dann, as well as the PARIS event organized by Vincent Trastour/Flamingo Filtershttps://flamingofilter.co/.(PARIS = Paris Augmented Reality Influencers Show)
Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)Wolfram Nagel
This topic was presented on May 22, 2022 at the "UX Festival by German UPA" in Erfurt. Original German title of the talk: "UX FTW – Pragmatische Wertschätzung durch Nutzerfokus mit Jobs To Be Done".
The official English title is "Customer-Centric Value Creation with a Jobs-To-Be-Done Mindset".
In the talk I explained how we create value for our customers and your company by applying Jobs-To-Be-Done. I introduced the respective UX mindset, Jobs To Be Done, some examples, our self-developed Research Tool (the User Focus Program), and the CCVC Framework.
There is also an article on the topic available: https://wolframnagel.medium.com/customer-centric-value-creation-b71ac49172b6
Wie funktioniert ein System zur Erfassung, Verwaltung, regelbasierten Ausgabe und Darstellung von Informationen in unterschiedlichsten Zielkanälen?
Der Artikel zum Thema: http://www.msxbook.com/CUIMUP16txt
Zusammenfassung: Inhalte und User Interfaces lassen sich nach einem jeweils ähnlichen Muster modular und strukturiert planen und zusammenbauen — vergleichbar mit den Bausteinen in einem Baukastensystem. Inhalt durchläuft von der Entstehung bis zur Rezeption in verschiedensten Kanälen grundsätzlich drei Stufen: Erfassung, Verwaltung und Ausgabe. An den beiden Übergängen muss jeweils ein Mapping stattfinden. Zum einen müssen Inhalte zur definierten Inhaltsstruktur passen (Inhalt Struktur Mapping). Zum anderen müssen die einzelnen Bausteine der strukturierten Inhalte auf die Ausgabe-Bausteine zur Darstellung in verschiedenen Zielkanälen gemappt werden (UI Mapping). Das Baukasten-Prinzip und die methodische Herangehensweise lassen sich mit Hilfe von intelligenter Software unterstützen. Wolfram Nagel (Head of UX / SETU GmbH) stellt in dem Vortrag hilfreiche und in der Praxis bewährte Prinzipien, Muster, Methoden und Erkenntnisse vor.
More Related Content
Similar to Content Design and UI Architecture for Multiscreen-projects
A strategic overview of developing for Chrome on Android and native on Android. Touching on the migration from the open web to walled gardens of applications.
According to jqtouch.com, jQTouch is a “jQuery plugin for mobile Web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.” Web apps can easily be created using jQTouch, and they resemble native apps. jQTouch includes native WebKit animations, automatic navigation, extensions for geo-location and offline capabilities, and themes built specifically for mobile WebKit browsers like the above-mentioned mobile devices. In this session, Chad Mairn will explain the differences between native and Web apps, highlight some free and useful web development tools, and will then demonstrate how to install and customize jQTouch in order to help kick start your library’s mobile Web presence.
Mobile Developer's Guide To The Galaxy, 14th EditionMarco Tabor
The latest edition of the community-driven handbook on mobile technologies. 256 pages packed with everything you need to know to start your mobile business: Which platforms exist and what's their potential? What about cross-platform app development? How do I create an app concept that works? How do I implement location-based services, NFC, mobile analytics, augmented reality or media content? What do I need to know about accessibility, monetization, security and app testing?
20 experts share their know-how in this book and you are invited to join them! See www.enough.de/mdgg for details.
Talk to inspire creating surprising new user experiences (like the examples in the talk) that use powerful new technologies (like AI, AR, VR, IoT, brainwave-control, depth-sensing, eye-tracking, etc.) through mostly free SDKs and software (to which the presentation provides some links).
The presentation shows examples of experiences that are literally 'wonder'-ful, and fulfill a real need at the same time (they're not just games), like a school bus to Mars, AI robot for the elderly, and apps that teach our thoughts.
It bundles information that is freely available on the Internet, and mostly not my own work.
SlideShare doesn't run embedded videos, but they run if you downloaded this PDF.
Build once deploy everywhere using the telerik platformAspenware
The Telerik Platform is a suite of tools for developing, testing, deploying and analyzing hybrid mobile applications. Hybrid mobile applications are most commonly built using PhoneGap, which interprets HTML5/CSS3/JavaScript and compiles it into a package that can be delivered in the app stores. PhoneGap also utilizes Apache Cordova JavaScript APIs to access certain native mobile features of the device. The Telerik Platform uses AppBuilder to abstract the complexity of PhoneGap/Cordova and provides a more intuitive way to build hybrid mobile applications. If you are looking to expand your .NET and web based development skills into the mobile market this is the session for you.
Lessons learned:
-What a hybrid mobile apps can do
-How Icenium helps build a hybrid mobile app
-How you can leverage your current web knowledge and assets to create a mobile app
In a cutthroat business scenario, companies want to reach as many people as possible, but then as people use different mobile devices working on different OS, it is difficult for them to address a huge smartphone users’ community with native apps for a specific platform. Out of several available cross-platform app tools, Titanium, Sencha Touch and PhoneGap are outstanding tools that can readily develop mobile apps that work fine on different platforms. Let us compare them in this slide.
Screen and Context: Usability in the Postdesktop WorldDoug Gapinski
The era of desktop-first methodologies has ended. According to Google, 90% of consumers now use multiple screens to accomplish tasks on the web. People aren't just visiting your site on phones and desktop computers, they are also using game consoles, laptops, tablets, and other devices. As we enter into the renaissance of the postdesktop web, we must be prepared to boldly alter how we prototype, design, and gather feedback from audiences. Two of the most important factors for current web usability are considering the screen (designing and testing for multiple displays) and context.
The use of mobile applications is now so common that users now expect companies whose services which
they consume already have an application to provide these services or a mobile version of your site, but this is not always simple to do or cheap. Thus, the hybrid development has emerged as a potential alternative to this need. The evolution of this new paradigm has taken the attention of researchers and companies as viable alternative to the mobile development. This paper shows how hybrid development can be an alternative for companies provide their services with a low investment and still offer a great service to their clients.
More people are using mobile platforms to access information - can your business afford to be left behind in an age of rapid digital transformation?
When once it was acceptable to be in the late majority when it came to adjusting your business to technological advancements, nowadays you have to lead the pack in order to be a viable business.
Meetup #7 Voiture Connectée et Autonome à ParisLaurent Dunys
Le 20 avril 2017 chez INGIMA à Paris.
Le Meetup Voiture Connectée et Autonome est un événement réunissant la communauté des professionnels du secteur.
Pour cette 7ème édition, nous avons le plaisir de vous présenter 4 projets qui ont pour mission de transformer l'usage de l'automobile, de la mobilité et des transports à travers des solutions technologiques et des business models innovants.
1) GPSGate: Your Next GPS Tracking and IoT Platform
2) YoGoKo conçoit et met en œuvre des solutions de communication pour le véhicule connecté & coopératif dans la ville intelligente. Conformes aux standards des ITS Coopératifs, ces solutions permettent l’échange de données entre les véhicules et avec l’infrastructure routière ou urbaine, tout en fournissant une connectivité Internet sécurisée. Les solutions YoGoKo sont notamment déployés dans les véhicules de gestionnaires d’infrastructure routière (déploiement pilote SCOOP@F) et chez plusieurs acteurs du véhicule autonome et connecté, en particulier VEDECOM, pour ses expérimentations sur route ouverte.
3) Cabine connectée COVED by SMILE: Smile, leader européen de l’intégration, de l’infogérance et de l'IoT à partir de solutions open source, accompagne le groupe Coved dans son projet à la fois ambitieux et structurant de cabines connectées. Ce projet a reçu l'IoT Awards 2017 dans la catégorie "Hi-Tech".
4) Munic.Box by Mobile Devices: Proven independent aftermarket and OEM connected car platform, hardware & tools.
De plus, Ross Douglas est venu nous présenter le nouveau format de l'événement Autonomy, prévu à Paris du 19 au 21 Octobre, dédié à la mobilité urbaine.
Les Meetups Voiture Connectée et Autonome vous sont proposés par Laurent Dunys, https://www.linkedin.com/in/laurentdunys, depuis 2016.
Rejoignez notre groupe en ligne: https://www.meetup.com/fr-FR/MeetupVoitureConnecteeAutonome
25+ mLearning Tools in 60 Minutes - DevLearn 2010B.J. Schone
A variety of mLearning platforms, development tools, and applications has emerged in recent years. It’s often difficult to know what’s available without doing dedicated research (and project timelines don’t always allow for research!).
This presentation shows 25+ different mLearning tools (such as systems, development tools, emulators, assessment tools, etc.) along with a brief description and URL for each.
Audience: Novice to intermediate level participants with a general understanding of mLearning and the situations when or where it can be used.
Powerpoint created for October 2019 Augmenting Reality Meetup hosted by Steve Dann, as well as the PARIS event organized by Vincent Trastour/Flamingo Filtershttps://flamingofilter.co/.(PARIS = Paris Augmented Reality Influencers Show)
Similar to Content Design and UI Architecture for Multiscreen-projects (20)
Customer-Centric Value Creation (with a Jobs-To-Be-Done Mindset)Wolfram Nagel
This topic was presented on May 22, 2022 at the "UX Festival by German UPA" in Erfurt. Original German title of the talk: "UX FTW – Pragmatische Wertschätzung durch Nutzerfokus mit Jobs To Be Done".
The official English title is "Customer-Centric Value Creation with a Jobs-To-Be-Done Mindset".
In the talk I explained how we create value for our customers and your company by applying Jobs-To-Be-Done. I introduced the respective UX mindset, Jobs To Be Done, some examples, our self-developed Research Tool (the User Focus Program), and the CCVC Framework.
There is also an article on the topic available: https://wolframnagel.medium.com/customer-centric-value-creation-b71ac49172b6
Wie funktioniert ein System zur Erfassung, Verwaltung, regelbasierten Ausgabe und Darstellung von Informationen in unterschiedlichsten Zielkanälen?
Der Artikel zum Thema: http://www.msxbook.com/CUIMUP16txt
Zusammenfassung: Inhalte und User Interfaces lassen sich nach einem jeweils ähnlichen Muster modular und strukturiert planen und zusammenbauen — vergleichbar mit den Bausteinen in einem Baukastensystem. Inhalt durchläuft von der Entstehung bis zur Rezeption in verschiedensten Kanälen grundsätzlich drei Stufen: Erfassung, Verwaltung und Ausgabe. An den beiden Übergängen muss jeweils ein Mapping stattfinden. Zum einen müssen Inhalte zur definierten Inhaltsstruktur passen (Inhalt Struktur Mapping). Zum anderen müssen die einzelnen Bausteine der strukturierten Inhalte auf die Ausgabe-Bausteine zur Darstellung in verschiedenen Zielkanälen gemappt werden (UI Mapping). Das Baukasten-Prinzip und die methodische Herangehensweise lassen sich mit Hilfe von intelligenter Software unterstützen. Wolfram Nagel (Head of UX / SETU GmbH) stellt in dem Vortrag hilfreiche und in der Praxis bewährte Prinzipien, Muster, Methoden und Erkenntnisse vor.
Content Design und UI Architektur fuer Multiscreen-Projekte (kompakt)Wolfram Nagel
Multiscreen ist inzwischen digitale Realität und erfordert einen durchgängigen Informationsfluss, einen zentralen Knotenpunkt für Inhalte und ein System zur Definition von UI Elementen. Inhalte und User Interfaces sollten grundsätzlich unabhängig voneinander sein. Es besteht aber eine Korrelation. Inhalt und User Interfaces lassen sich (beginnend mit dem Inhalt) nach einem jeweils ähnlichen Muster modular und strukturiert planen und zusammenbauen – vergleichbar mit den Bausteinen in einem Baukastensystem.
Mehr zu diesem Thema findet sich im (englischen) Buch "Multiscreen UX Design": http://www.msxbook.com/enbook
Die Folien einer ausführlicheren Version von der Usability Professionals Konferenz 2015 gibt es hier: http://de.slideshare.net/wolframnagel/content-design-und-ui-architektur-fr-multiscreenprojekte-usability-professionals-2015
Content Design und UI Architektur für Multiscreen-Projekte (Usability Profess...Wolfram Nagel
Methoden und Regelwerke für die Konzeption, Gestaltung und Umsetzung von Layout, Inhalt und Workflows im Baukasten-Prinzip.
Digitale Inhalte können heute überall erscheinen. Wir nutzen täglich digitale Services auf verschiedensten Geräten und Medien. Informationen fließen in alle Kanäle. Multiscreen ist inzwischen digitale Realität geworden. Um ein einheitliches Nutzungserlebnis zu erschaffen, benötigt es einen durchgängigen Informationsfluss. Voraussetzung dafür sind ein zentraler Knotenpunkt für Inhalte, ein System zur Definition von UI Elementen und Regeln wann welche Inhalte in welcher Kombination wo und wie angezeigt werden. Damit dies technisch gelöst werden kann, ist es erforderlich Inhalte, User Interfaces und Workflows nach einem jeweils ähnlichen Muster modular und strukturiert zu planen und aufzubauen – vergleichbar mit den Bausteinen in einem Baukastensystem.
Das Thema wurde in ähnlicher Form auch auf dem World Usability Day in München präsentiert. Die Folien hier wurden am 13.11.2015 aktualisiert.
Mehr zu diesem Content Design und UI Architektur und allgemein zum Thema Multiscreen findet sich auch in meinem neuen (englischen) Buch "Multiscreen UX Design": http://www.msxbook.com/enbook
Next Generation Information Experience – Gedanken über die Zukunft von Conten...Wolfram Nagel
Digitale Informationen und Services müssen zukünftig aus unterschiedlichsten Quellen zum Abruf auf verschiedenen Geräten, in unterschiedlichsten Medien, für mehrere Screens und Ausgabekanäle zur Verfügung stehen. Wolfram Nagel (Autor des Buchs „Multiscreen Experience Design“) beschäftigt sich mit zukünftigen „Content-Szenarien“, den potentiellen Anforderungen von Nutzern und den Herausforderungen für Content-Ersteller und -anbieter, Website-Betreiber, Publisher, Journalisten und Medienunternehmen. Er stellt sich die Frage: Wie gehen wir als Ersteller, Verwalter und Nutzer zukünftig mit Inhalten, Informationen und Wissen um? In dem Vortrag stellt er seine Erkenntnisse und ausgewählte Quellen vor und skizziert, wie der Umgang mit Informationen und Content Management zukünftig aussehen könnte.
Artikel dazu hier: https://wolframnagel.wordpress.com/2014/12/09/next-generation-information-experience-trends-und-herausforderungen-von-morgen/
Oder hier: https://medium.com/@wolframnagel/next-generation-information-experience-trends-und-herausforderungen-von-morgen-9929b17d8b5e
Multiscreen Experience Design – Strategy and concept development for digital services for multiple screens (executive summary / short presentation). July 2013. English short presentation of the book and project by Wolfram Nagel and Valentin Fischer (authors) and digiparden (publisher/editor, an imprint of SETU GmbH). More information via info@msxbook.com
Vortrag von Wolfram Nagel (digiparden GmbH) zum Thema "Multiscreen Experience Design" auf der Usability Professionals Konferenz 2012 in Konstanz.
Die Gerätelandschaft wird immer dynamischer und fragmentierter. Viele Anwender werden zukünftig mehrere verschiedene Endgeräte (gleichzeitig) benutzen. Deshalb müssen Informationen auf möglichst allen (relevanten) Screens und Ausgabekanälen verfügbar sein. Das wiederum bedeutet, dass jedes Projekt generell für mehrere Screens und Ausgabekanäle gedacht und konzipiert werden muss, um dem Anwender eine möglichst „fließende Multiscreen Experience“ zu bieten. Der Vortrag stellt Prinzipien, Muster und Empfehlungen vor, die man bei der Konzeption von Multiscreen Projekten berücksichtigen sollte. Zwei Schwerpunkte des Vortrags sind Content- und Informationsmanagement für verschiedene Screens, sowie Kommunikation und Nutzung von Informationen auf mobilen Endgeräten.
Multiscreen Experience (Mai 2012, IA Konferenz, Essen)Wolfram Nagel
Vortrag von Wolfram Nagel (digiparden GmbH) und Vorstellung des Projekts "Multiscreen Experience" auf der IA Konferenz 2012 in Essen (www.iakonferenz.org).
Die Gerätelandschaft wird immer dynamischer, fragmentierter und vernetzter. Zukünftig müssen Informationen und Services auf möglichst allen (relevanten) Screens und Ausgabekanälen verfügbar sein und geräteübergreifend funktionieren. In dem Vortrag stelle ich Prinzipien, Muster und Empfehlungen vor, die man bei der Konzeption von Multiscreen Projekten und der Entwicklung einer passenden Content Strategy berücksichtigen sollte.
Vorstellung des Projekts "Multiscreen Experience" beim Season Opening der IxDA Berlin am 11. Januar 2012.
Die Gerätelandschaft wird immer dynamischer und fragmentierter. Generell muss zukünftig jedes Projekt für mehrere Screens und Ausgabekanäle gedacht und konzipiert werden. Wolfram stellt in dem Vortrag Prinzipien, Muster und Empfehlungen vor (es sind keine Patentrezepte!), die Hilfestellung bei der Konzeption von Multiscreen Projekten bieten sollen. Er beschreibt die Kombinationsmöglichkeiten der verschiedenen Screens, empfiehlt unterschiedliche konzeptionelle Ansätze, beschreiben die potentiellen Anwender und geht auf die Parameter für den Nutzungskontext ein. In dem Vortrag stellt er sowohl die Entstehung des Projekts als auch neue Ansätze und Muster vor.
Multiscreen Experience (in 90 Sekunden)Wolfram Nagel
Im Rahmen des Studentenwettbewerbs des "World Usability Day Mannheim" haben wir im Finale am 10.11.2011 das Projekt in einem Elevator Pitch vorgestellt. Wir hatten maximal 90 Sekunden Zeit.
Multiscreen Experience - Prinzipien und Muster für das Informationsmanagement...Wolfram Nagel
Master-Thesis: Multiscreen Experience
Die Gerätelandschaft wird immer dynamischer und fragmentierter. Viele Anwender werden in unterschiedlichen Situationen zukünftig verschiedene digitale Endgeräte verwenden. Deshalb werden plattform- und geräteübergreifende Angebote in Zukunft sehr relevant sein. Mittelfristig stehen vier Geräteklassen im Fokus: Smartphones, Tablet-PCs, Laptops oder Desktop-PCs und internetfähige TV-Geräte.
Mit unserer Master-Thesis stellen wir Prinzipien, Muster und Definitionen vor, die für Multiscreen Projekte und das Informationsmanagement in der Digitalen Gesellschaft von Bedeutung sind. Unsere Empfehlungen und Anregungen (es sind keine Patentrezepte!) sollen Hilfestellung bei der Konzeption einer fließenden Multiscreen Experience bieten. Wir gehen auf die (zuvor genannten) vier Screens ein, beschreiben die potentiellen Anwender, empfehlen unterschiedliche konzeptionelle Ansätze und erklären die Parameter für den Nutzungskontext.
Multiscreen Experience bedeutet Informationen geräteübergreifend (für mehrere Screens) ansprechend anzubieten und maximal benutzerfreundlich aufzubereiten.
Einen Teil unserer Master-Thesis haben wir im Internet veröffentlicht unter www.multiscreen-experience.com.
Das Projekt ist entstanden an der Hochschule für Gestaltung Schwäbisch Gmünd und wurde betreut von den Professoren Ulrich Schendzielorz und Steffen Süpple.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
PDF SubmissionDigital Marketing Institute in NoidaPoojaSaini954651
https://www.safalta.com/online-digital-marketing/advance-digital-marketing-training-in-noidaTop Digital Marketing Institute in Noida: Boost Your Career Fast
[3:29 am, 30/05/2024] +91 83818 43552: Safalta Digital Marketing Institute in Noida also provides advanced classes for individuals seeking to develop their expertise and skills in this field. These classes, led by industry experts with vast experience, focus on specific aspects of digital marketing such as advanced SEO strategies, sophisticated content creation techniques, and data-driven analytics.
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
Storytelling For The Web: Integrate Storytelling in your Design ProcessChiara Aliotta
In this slides I explain how I have used storytelling techniques to elevate websites and brands and create memorable user experiences. You can discover practical tips as I showcase the elements of good storytelling and its applied to some examples of diverse brands/projects..
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.
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
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)
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.
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.
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
55. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
56. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
brick
57. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
componentbrick
58. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
componentbrick segment
59. Bricks → bumper bar → driving cab → truck → fire truck or police truck or ...
componentbrick segment TYPE object
60. 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
61. brick component segment type object
Atomic Design
Source: Brad Frost, http://bradfrost.com/blog/post/atomic-web-design
brick UI typebrick group
70. name of recipe
name of recipe
footnote
softlink
instruction
image
author
recipe information
ingredients
category
Content type „Recipe“
71. 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)
72. 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
76. 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
77. 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
79. 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.
80. 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
81. title
image (with caption, originator)
dateauthor(s)
short textlong text
Content structure
Title / Headline
Short text
Long text
Image
Date
Author
88. 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
89. Content bricks
Category | Image | Title | Subtitle | Date | Location | Description
Content type (events)
LARGE
Medium
Small
91. 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
92. 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
93. 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
94. 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
95. 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
96. 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
97. 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
98.
99. 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
100. 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
103. 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
104. 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
105. 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
106. SETU 3.0: Content Modeling Software according to the building block principle (Demo moodscreen)
→ www.setusoft.de
107. 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
109. › 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)
110. A user interface is not only visual!
Input, output and interaction also via:
› Audio / speech
› Haptics / tangency
› Temperature
› Text only
› ...
Graphical User Interface
111. 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/
112. Information is outputted
as temperature.
brick
Tado Smart-Thermostat
Heating control via smarthpone app or browser
113. Information is „just“
interchanged by words.
Conversational User Interfaces and Chatbots
Speech recognition and processing /
Communication via automatic and personal chats
114. 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.
115. 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.
116. 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