Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Content Experience

432 views

Published on

Die Grenzen zwischen mobiler und Desktopnutzung sind nicht mehr klar zu unterscheiden. Zentraler Ort der Interaktion ist das Web und nicht das Gerät. Menschen greifen über unterschiedliche Touchpoints auf Produkte und Dienstleistungen zu. Konsistenz und Klarheit unterstützen den Nutzer innerhalb eines Multiscreen-Experience-Umfelds. Das Denken und Designen in den Silos Mobile, Tablet und Desktop versperrt dabei den Blick auf das Wesentliche – auf eine nachhaltige User Experience, die Coherence, Fluidity und Adaptability adressiert. Content First, Breakpoints in Abhängigkeit einer fluiden Content Experience, frühzeitiges Prototyping und schnelles Iterieren führen zum Ziel. Klassische Designprozesse werden oder sind dagegen strategisch bedeutungslos. Der Vortag beleuchtet die Vorteile einer kontextsensitiven Experience und formuliert Empfehlungen für den Workflow und die Kommunikation mit den Stakeholdern.

Published in: Design
  • Be the first to comment

Responsive Content Experience

  1. 1. RESPONSIVE CONTENT EXPERIENCE MOBILETECHCON, 12. - 15. SEPTEMBER 2016, BERLIN
  2. 2. PETER ROZEK
  3. 3. SENIOR UX MANAGER
  4. 4. WORK BY GETIT
  5. 5. WEBINTERFACE
  6. 6. WIR SIND ALWAYS-ON Die Rezeption von Content hat sich dramatisch verändert.
  7. 7. DER KLASSISCHE DESIGN PROZESS IST ALWAYS-OFF
  8. 8. Your comfort zone Where the 
 magic happens
  9. 9. 1. KONZEPT WORKSHOP
  10. 10. # PERSONAS
  11. 11. # PRODUCT EXPERIENCE MAPPING Kontextsensitive Benutzererlebnisse erkennen und verstehen
  12. 12. Schlanke und zielorientierte Methode im Kontext der Multidevice-Nutzung
  13. 13. Customer 
 Journey Experience Map Skizziert das Benutzererlebnis übergreifend Nutzungskontext wird fühlbarer und nachvollziehbarer
  14. 14. Customer 
 Journey Empathy 
 Map Nutzungskontext im Fokus Multidevice-Nutzungsmuster verstehen Hypothesen über den Nutzer validierten Komplexität minimieren Experience Map
  15. 15. PRODUKTZIEL FORMULIEREN Rolle - Ziel und Wunsch - Nutzen
  16. 16. PERSPEKTIVE Persona oder Hypothesen
  17. 17. 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?
  18. 18. # STORY-DRIVEN DESIGN Produktkonzepte aus der Sicht des Nutzers und seinem Kontext
  19. 19. FOKUS AUF IDEEN VISUALISIERUNG Kreatives Denken steht im Mittelpunkt
  20. 20. CONTEXTUAL STORYBOARDS
  21. 21. EXPERIENCE-FOCUSED STORYBOARDS
  22. 22. # PROTOTYPING
  23. 23. ANWENDUNGSSZENARIEN Wesentlichen User Flows abbilden
  24. 24. PAPER PROTOTYPING Image: http://blog.invisionapp.com/10-tips-on-prototyping-uis-with-sketch/
  25. 25. VISION PROTOTYPE High Fidelity Prototype mit Design Anmutungen
  26. 26. PRODUCT DESIGN PRINCIPLES
  27. 27. # USER TEST
  28. 28. Vorbereitung, Durchführung, Bewertung 1. Richtigen Nutzer finden und Konzept erstellen 2. Richtigen Fragen stellen und im Team testen 3. Ergebnisse bewerten
  29. 29. 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
  30. 30. 2. DESIGN UND DEVELOPMENT
  31. 31. # NETWORK OF CONTENT
  32. 32. Nicht von Seiten sprechen, sondern von Content Systems oder Network of Content.
  33. 33. STYLETILES Design Konzepte entwickeln, keine Seiten
  34. 34. PATTERN LAB „Atomic Design“
  35. 35. FRONTEND STYLEGUIDE Dokumentation, Living Styleguide
  36. 36. Source: An overview of Pattern Library Generators Living Styleguide = Styleguide Driven Development
  37. 37. Styleguide Driven Development 1. HTML und CSS 2. Bildet den produktiven Stand ab 3. Interaktive UI 4. Versionskontrolle
  38. 38. @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/
  39. 39. Kommunikations-Strategie mit den Stakeholdern: 1. Modulares System mit konsistenter UI 2. Living Styleguide 3. Interativer Prozess 4. Schnelles Time to Market
  40. 40. # STEREOTYPE GESTALTUNG DOMINIERT
  41. 41. RESPONSIVE IS THE RENDERING OF CONTEXT.
  42. 42. TECHNIKEN
  43. 43. CSS FLEXBOX
  44. 44. CSS GRID LAYOUT
  45. 45. CSS3 MULTIPLE COLUMN LAYOUT
  46. 46. http://labs.thewebahead.net/thelayoutsahead/multicolumn/index.html
  47. 47. AJAX-INCLUDE PATTERN https://www.filamentgroup.com/lab/...
  48. 48. CONDITIONAL LOADING https://24ways.org/2011/...
  49. 49. RESPONSIVE WILL GET CONTENT THAT FITS, NOT DESKTOP HAND-ME-DOWNS.
  50. 50. CONTENT CHOREOGRAPHY
  51. 51. @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
  52. 52. Kommunikations-Strategie mit den Stakeholdern: 1. Handlungsrelevanz im jeweiligen Nutzungskontext vorhanden 2. Performance
  53. 53. # CONTENT BASED BREAKPOINTS
  54. 54. Workflow mit „Progressive Enhancement“ adressiert Content First, dann das Design.
  55. 55. http://www.slideshare.net/yiibu/pragmatic-responsive-design Content First
  56. 56. Major Breakpoints (Layout Änderungen) Minor Breakpoints (Tweak für Komponenten)
  57. 57. http://www.slideshare.net/yiibu/pragmatic-responsive-design
  58. 58. Kommunikations-Strategie mit den Stakeholdern: 1. Content steht im Vordergrund 2. Unabhängig von technischer Geräteentwicklung 3. Prozess adressiert MVP
  59. 59. # F…K OFF LOREM IPSUM
  60. 60. Lorem Ipsum Typischer Case Worst case
  61. 61. LOREM IPSUM HEADER LOREM IPSUM FOOTER LOREM IPSUM LOREM IPSUM LOREM IPSUM
  62. 62. A NICE LOOKING LAYOUT
  63. 63. REAL CONTENT HEADER FOOTER REAL CONTENT REAL CONTENT REAL CONTENT REAL CONTENT
  64. 64. @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/
  65. 65. @Jacob Nielsen „Text is a UI“
  66. 66. CONTENT MACHT USABILITY- TESTS ERST MÖGLICH!
  67. 67. Kommunikations-Strategie mit den Stakeholdern: 1. Content macht Usabilitytests rest möglich 2. Realistische Anmutung des Produkts
  68. 68. ZUSAMMENFASSUNG
  69. 69. DON'T DEAL WITH DEVICES, PLAY WITH CONTENTS!
  70. 70. RESPONSIVE IS THE RENDERING OF CONTEXT
  71. 71. BUILDING FEATURES IS EASY, BUILDING THE RIGHT FEATURES FOR THE RIGHT CONTEXT IS CHALLENGING.
  72. 72. THANK YOU FOR YOUR ATTENTION
  73. 73. peter.rozek@getit.de FRAGEN ? Dear Ellen

×