responsive content experience

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

Upload: peter-rozek

Post on 13-Apr-2017

290 views

Category:

Design


0 download

TRANSCRIPT

RESPONSIVE CONTENT EXPERIENCE

MOBILETECHCON, 12. - 15. SEPTEMBER 2016, BERLIN

PETER ROZEK

SENIOR UX MANAGER

WORK BY GETIT

WEBINTERFACE

WIR SIND ALWAYS-ONDie Rezeption von Content hat sich dramatisch verändert.

DER KLASSISCHE DESIGN PROZESS IST ALWAYS-OFF

Your comfort zone

Where the magic happens

1. KONZEPT WORKSHOP

# PERSONAS

# PRODUCT EXPERIENCE MAPPINGKontextsensitive Benutzererlebnisse erkennen und verstehen

Schlanke und zielorientierte Methode im Kontext der Multidevice-Nutzung

Customer Journey

Experience Map

Skizziert das Benutzererlebnis

übergreifend

Nutzungskontext wird fühlbarer und nachvollziehbarer

Customer Journey

Empathy Map

Nutzungskontext im Fokus Multidevice-Nutzungsmuster verstehen Hypothesen über den Nutzer validierten

Komplexität minimieren

Experience Map

PRODUKTZIEL FORMULIERENRolle - Ziel und Wunsch - Nutzen

PERSPEKTIVEPersona oder Hypothesen

Find more tools and methods for your individual product design toolkit on ubercreative.me

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 personknow beforehand about the product?

What is the situationof the person?

What does the person feel and think?

CHANCESWhat opportunitiesdo you see foryour product?

How could youimprove theuser experience(short-term andlong-term?)

EXPERIENCE GOALWhat do you want to create?Which problem do you want to solve?

RISKS

Are there anyrisks for yourproduct success?

# STORY-DRIVEN DESIGNProduktkonzepte aus der Sicht des Nutzers und seinem Kontext

FOKUS AUF IDEEN VISUALISIERUNG Kreatives Denken steht im Mittelpunkt

CONTEXTUAL STORYBOARDS

EXPERIENCE-FOCUSED STORYBOARDS

# PROTOTYPING

ANWENDUNGSSZENARIEN Wesentlichen User Flows abbilden

PAPER PROTOTYPING

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

VISION PROTOTYPEHigh Fidelity Prototype mit Design Anmutungen

PRODUCT DESIGN PRINCIPLES

# USER TEST

Vorbereitung, Durchführung, Bewertung 1. Richtigen Nutzer finden und Konzept

erstellen 2. Richtigen Fragen stellen und im Team

testen 3. Ergebnisse bewerten

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

2. DESIGN UND DEVELOPMENT

# NETWORK OF CONTENT

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

STYLETILESDesign Konzepte entwickeln, keine Seiten

PATTERN LAB„Atomic Design“

FRONTEND STYLEGUIDEDokumentation, Living Styleguide

Source: An overview of Pattern Library Generators

Living Styleguide = Styleguide Driven Development

Styleguide Driven Development

1. HTML und CSS2. Bildet den produktiven Stand ab3. Interaktive UI4. Versionskontrolle

@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/

Kommunikations-Strategie mit den Stakeholdern:

1. Modulares System mit konsistenter UI2. Living Styleguide3. Interativer Prozess4. Schnelles Time to Market

# STEREOTYPE GESTALTUNG DOMINIERT

RESPONSIVE IS THE RENDERING OF CONTEXT.

TECHNIKEN

CSS FLEXBOX

CSS GRID LAYOUT

CSS3 MULTIPLE COLUMN LAYOUT

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

AJAX-INCLUDE PATTERN

https://www.filamentgroup.com/lab/...

CONDITIONAL LOADING

https://24ways.org/2011/...

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

CONTENT CHOREOGRAPHY

@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

Kommunikations-Strategie mit den Stakeholdern:

1. Handlungsrelevanz im jeweiligen Nutzungskontext vorhanden

2. Performance

# CONTENT BASED BREAKPOINTS

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

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

Content First

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

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

Kommunikations-Strategie mit den Stakeholdern:

1. Content steht im Vordergrund 2. Unabhängig von technischer

Geräteentwicklung 3. Prozess adressiert MVP

# F…K OFF LOREM IPSUM

Lorem Ipsum

Typischer Case

Worst case

LOREM IPSUM

HEADER

LOREM IPSUM

FOOTER

LOREM IPSUM LOREM IPSUM

LOREM IPSUM

A NICE LOOKING LAYOUT

REAL CONTENT

HEADER

FOOTER

REAL CONTENT

REAL CONTENT

REAL CONTENTREAL CONTENT

@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/

@Jacob Nielsen

„Text is a UI“

CONTENT MACHT USABILITY-TESTS ERST MÖGLICH!

Kommunikations-Strategie mit den Stakeholdern:1. Content macht Usabilitytests rest möglich 2. Realistische Anmutung des Produkts

ZUSAMMENFASSUNG

DON'T DEAL WITH DEVICES, PLAY WITH CONTENTS!

RESPONSIVE IS THE RENDERING OF CONTEXT

BUILDING FEATURES IS EASY, BUILDING THE RIGHT FEATURES FOR THE RIGHT CONTEXT IS CHALLENGING.

THANK YOU FOR YOUR ATTENTION