Download - Responsive Content Experience
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
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?
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
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
http://labs.thewebahead.net/thelayoutsahead/multicolumn/index.html
AJAX-INCLUDE PATTERN
https://www.filamentgroup.com/lab/...
CONDITIONAL LOADING
https://24ways.org/2011/...
@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
http://www.slideshare.net/yiibu/pragmatic-responsive-design
Content First
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
@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/
Kommunikations-Strategie mit den Stakeholdern:1. Content macht Usabilitytests rest möglich 2. Realistische Anmutung des Produkts