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.

1. RESPONSIVE CONTENT
EXPERIENCE
MOBILETECHCON, 12. - 15. SEPTEMBER 2016, BERLIN

2. PETER ROZEK

3. SENIOR UX MANAGER

4. WORK BY GETIT

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

9. 1. KONZEPT WORKSHOP

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

17. PERSPEKTIVE
Persona oder Hypothesen

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

22. CONTEXTUAL STORYBOARDS

23. EXPERIENCE-FOCUSED
STORYBOARDS

24. # PROTOTYPING

26. ANWENDUNGSSZENARIEN
Wesentlichen User Flows abbilden

27. PAPER PROTOTYPING
Image: http://blog.invisionapp.com/10-tips-on-prototyping-uis-with-sketch/

28. VISION PROTOTYPE
High Fidelity Prototype mit Design Anmutungen

29. PRODUCT DESIGN PRINCIPLES

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

33. 2. DESIGN UND
DEVELOPMENT

34. # NETWORK OF CONTENT

35. Nicht von Seiten sprechen, sondern von
Content Systems oder Network of Content.

36. STYLETILES
Design Konzepte entwickeln, keine Seiten

41. PATTERN LAB
„Atomic Design“

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

49. # STEREOTYPE GESTALTUNG
DOMINIERT

51. RESPONSIVE IS THE
RENDERING OF CONTEXT.

53. TECHNIKEN

54. CSS FLEXBOX

55. CSS GRID LAYOUT

56. CSS3 MULTIPLE COLUMN
LAYOUT

57. http://labs.thewebahead.net/thelayoutsahead/multicolumn/index.html

58. AJAX-INCLUDE PATTERN
https://www.filamentgroup.com/lab/...

59. CONDITIONAL LOADING
https://24ways.org/2011/...

60. RESPONSIVE WILL GET
CONTENT THAT FITS, NOT
DESKTOP HAND-ME-DOWNS.

61. CONTENT CHOREOGRAPHY

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

64. # CONTENT BASED
BREAKPOINTS

65. Workflow mit „Progressive Enhancement“
adressiert Content First, dann das Design.

66. http://www.slideshare.net/yiibu/pragmatic-responsive-design
Content First

67. Major Breakpoints (Layout Änderungen)
Minor Breakpoints (Tweak für Komponenten)

68. http://www.slideshare.net/yiibu/pragmatic-responsive-design

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

73. A NICE LOOKING
LAYOUT

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

85. peter.rozek@getit.de
FRAGEN ?
Dear Ellen