Responsive Content Experience
1 gefällt mir1,028 aufrufe
Die Präsentation von Peter Rozeck bei der MobileTechCon 2016 thematisiert die evolutionäre Veränderung des Content-Designprozesses hin zu einem kontextuellen, nutzerzentrierten Ansatz in der multidevice-Nutzung. Schlüsselkonzepte sind die Entwicklung von Empathie-Maps, Prototyping-Methoden und die Bedeutung authentischer Inhalte für die Usability-Tests. Der Fokus liegt darauf, dass sich Design nicht mit einzelnen Geräten befasst, sondern sich auf Inhalte konzentriert, die kontextuell relevant sind.
Responsive Content Experience
- 1. RESPONSIVE CONTENT EXPERIENCE MOBILETECHCON, 12. - 15. SEPTEMBER 2016, BERLIN
- 2. PETER ROZEK
- 5. WEBINTERFACE
- 6. WIR SIND ALWAYS-ON Die Rezeption von Content hat sich dramatisch verändert.
- 7. DER KLASSISCHE DESIGN PROZESS IST ALWAYS-OFF
- 8. Your comfort zone Where the magic happens
- 10. # PERSONAS
- 12. # PRODUCT EXPERIENCE MAPPING Kontextsensitive Benutzererlebnisse erkennen und verstehen
- 13. Schlanke und zielorientierte Methode im Kontext der Multidevice-Nutzung
- 14. Customer Journey Experience Map Skizziert das Benutzererlebnis übergreifend Nutzungskontext wird fühlbarer und nachvollziehbarer
- 15. Customer Journey Empathy Map Nutzungskontext im Fokus Multidevice-Nutzungsmuster verstehen Hypothesen über den Nutzer validierten Komplexität minimieren Experience Map
- 16. PRODUKTZIEL FORMULIEREN Rolle - Ziel und Wunsch - Nutzen
- 18. PRODUCT EXPERIENCE MAP PERSONA CONTEXT EXPERIENCE SCENARIO Who is this person? What does the person want and need? EMOTIONS & THOUGHTS What is the person doing? How is the person interacting with the product? Which devices the person is using and where? Which features the person is using? What problems are occuring? What does the person know beforehand about the product? What is the situation of the person? What does the person feel and think? CHANCES What opportunities do you see for your product? How could you improve the user experience (short-term and long-term?) EXPERIENCE GOAL What do you want to create? Which problem do you want to solve? RISKS Are there any risks for your product success?
- 19. # STORY-DRIVEN DESIGN Produktkonzepte aus der Sicht des Nutzers und seinem Kontext
- 20. FOKUS AUF IDEEN VISUALISIERUNG Kreatives Denken steht im Mittelpunkt
- 24. # PROTOTYPING
- 26. ANWENDUNGSSZENARIEN Wesentlichen User Flows abbilden
- 28. VISION PROTOTYPE High Fidelity Prototype mit Design Anmutungen
- 30. # USER TEST
- 31. Vorbereitung, Durchführung, Bewertung 1. Richtigen Nutzer finden und Konzept erstellen 2. Richtigen Fragen stellen und im Team testen 3. Ergebnisse bewerten
- 32. Kommunikations-Strategie mit den Stakeholdern: 1. Bulletproof der Produkt Idee 2. Big-Picture: Fokus auf einen ganzheitlichen Produkt Fokus (Kann in Agilen Teams verloren gehen) 3. Produkt-Strategie im Team verankern
- 34. # NETWORK OF CONTENT
- 35. Nicht von Seiten sprechen, sondern von Content Systems oder Network of Content.
- 36. STYLETILES Design Konzepte entwickeln, keine Seiten
- 43. FRONTEND STYLEGUIDE Dokumentation, Living Styleguide
- 45. Source: An overview of Pattern Library Generators Living Styleguide = Styleguide Driven Development
- 46. Styleguide Driven Development 1. HTML und CSS 2. Bildet den produktiven Stand ab 3. Interaktive UI 4. Versionskontrolle
- 47. @Trend Walton „I traded the control I had in Photoshop for a new kind of control—using flexible grids, flexible images, and media queries to build not a page, but a network of content that can be rearranged at any screen size to best convey a message.“ http://trentwalton.com/2012/02/02/redefined/
- 48. Kommunikations-Strategie mit den Stakeholdern: 1. Modulares System mit konsistenter UI 2. Living Styleguide 3. Interativer Prozess 4. Schnelles Time to Market
- 51. RESPONSIVE IS THE RENDERING OF CONTEXT.
- 53. TECHNIKEN
- 54. CSS FLEXBOX
- 55. CSS GRID LAYOUT
- 60. RESPONSIVE WILL GET CONTENT THAT FITS, NOT DESKTOP HAND-ME-DOWNS.
- 62. @Linda van Deursen „Grids do not exist in a vacuum. They exist in relation to the content. We never start with a grid. We start with an idea which is then translated into a form, a structure.“ http://alistapart.com/article/content-out-layout
- 63. Kommunikations-Strategie mit den Stakeholdern: 1. Handlungsrelevanz im jeweiligen Nutzungskontext vorhanden 2. Performance
- 65. Workflow mit „Progressive Enhancement“ adressiert Content First, dann das Design.
- 67. Major Breakpoints (Layout Änderungen) Minor Breakpoints (Tweak für Komponenten)
- 69. Kommunikations-Strategie mit den Stakeholdern: 1. Content steht im Vordergrund 2. Unabhängig von technischer Geräteentwicklung 3. Prozess adressiert MVP
- 70. # F…K OFF LOREM IPSUM
- 71. Lorem Ipsum Typischer Case Worst case
- 72. LOREM IPSUM HEADER LOREM IPSUM FOOTER LOREM IPSUM LOREM IPSUM LOREM IPSUM
- 74. REAL CONTENT HEADER FOOTER REAL CONTENT REAL CONTENT REAL CONTENT REAL CONTENT
- 76. @Luke Wroblewski „Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn’t reflect what a living, breathing application must endure. Real data does.“ https://articles.uie.com/lorem_ipsum_defense/
- 77. @Jacob Nielsen „Text is a UI“
- 78. CONTENT MACHT USABILITY- TESTS ERST MÖGLICH!
- 79. Kommunikations-Strategie mit den Stakeholdern: 1. Content macht Usabilitytests rest möglich 2. Realistische Anmutung des Produkts
- 80. ZUSAMMENFASSUNG
- 81. DON'T DEAL WITH DEVICES, PLAY WITH CONTENTS!
- 82. RESPONSIVE IS THE RENDERING OF CONTEXT
- 83. BUILDING FEATURES IS EASY, BUILDING THE RIGHT FEATURES FOR THE RIGHT CONTEXT IS CHALLENGING.
- 84. THANK YOU FOR YOUR ATTENTION