Wie aus: "Wir wollen einen Relaunch"
eine nutzerorientierte, responsive Website wird.
(und welche Herausforderungen dabei auftreten)
UX aus der Sicht eines Konzepters
Eine agenturbezogene Betrachtung.
2

Sabine von Nordheim
Diplom-Kauffr. (Medienwirtschaft TU Ilmenau)
Erfahrung in mehreren Hamburger Agenturen
Aktuell als Konzepterin bei der Medienwerft GmbH
Analysen, Grob- und Feinkonzepte, Responsive Webdesign
Mail:
Sabine.vonnordheim@gmail.com
Blog:
http://derinformationarchitect.word
press.com/
3

Inhabergeführte Agentur, 3 Geschäftsführer
seit 1996
Wendenstraße (City Süd)
Brands & E-Commerce
Fullservice-Agentur
45 Mitarbeiter:
Beratung
Online-Marketing , Markenentwicklung, Markenauftritte
Social Media
SEO
Konzeption
Kreation
Frontend
Backend
Maintanance
Web:
http://www.medienwerft.de
4

Stellen wir uns einmal vor,…
… wir benutzen das Internet und
besuchen eine Website.
Was passiert da eigentlich in uns?
5
Bildquelle: Stephanie Hofschlaeger pixelio.de

Unterbewusst finden wir Antworten auf folgende Fragen:
1. Wird das Ausgabegerät beachtet, mit dem ich die Inhalte betrachte?
2. Stimmt die Performance?
3. Ist die Gestaltung/Optik passend zur Marke?
4. Enthält die (Ziel-) Seite die richtigen Informationen bzw. werden die schnell gefunden?
5. Ist die Seite logisch aufgebaut? (hierarchisch)
6. Werden gelernte Mechanismen/ Funktionen eingesetzt? D.h. ist die Seite intuitiv benutzbar?
7. Ist die Seite aktuell? (inhaltlich)
8. Habe ich ein (positives) Nutzererlebnis? Macht die Seite Spaß?
9. Ist die Aufbereitung der Inhalte zielgruppenspezifisch?
10. Werden die richtigen Hilfen/ Fehlermeldungen angezeigt?
11. Ist die Seite sicher?
12. Ist die Seite barrierefrei?
13. Können Inhalte geliked und geteilt werden?
14. …
ERWARTUNGEN treffen auf reale USER ERFAHRUNG mit der Seite.
6

User Erwartungen treffen auf reale User Erfahrung mit der Seite
Daraus ergibt sich die USER EXPERIENCE.
Warum ist uns also die User Experience so wichtig?
Wenn ich ein positives Gefühl bei dieser Website habe:
•
•
•
•
•
•
Komme ich gerne wieder
Halte ich mich länger dort auf
Kaufe ich genau dort ein, und nicht woanders
Empfehle das Angebot meinen Freunden weiter
Habe Sympathie mit der Marke
Möchte Teil werden
Die positive Erfahrung, die ein User auf einer Website macht, entscheidet
essentiell über den (langfristigen) Erfolg der Website!
7

Aufgabe eines Konzepters
ERWARTUNGS- & ERFAHRUNGSMANAGEMENT
Schaffen positiver UX
EINES?
8
Quelle: http://www.germanupa.de; http://issuu.com/germanupa/docs/german-upa_tagungsband_up13_web

Ein gutes Briefing ist der beste Start in ein erfolgreiches Projekt!
Inhalte des Briefingsworkshops:
• Darstellung des Status-Quo
• Übergeordnete Vision und strategisches Konzept
• Klare Vorstellung von den Zielen, Anforderungen, Aufgaben &
Funktionen
• Form und Art der Ergebnisse / Deliverables
• Vorgaben zu Zeit, Umfang und Budget, sonst. Rahmenbedingungen
• Ggf. eine Priorisierung (Muss und Wunsch)
• Qualitätsanforderungen, Definierte Kriterien für den Erfolg
• Angaben zum Vorgehen, genutzte Methoden, relevante technische
Daten
• Klar definierte Zielgruppen, SWOT-Analyse, Benchmarking
Vorlage für das Angebot / Grobkonzept!
9

Agenda: „Wir wollen einen Relaunch…“
Analyse
Festlegung und
Vorbereitung
Produktion
Testing
10

Analyse
Analyse
Festlegung und
Vorbereitung
Befragungen
Zielgruppenanalyse
Personas
User Szenarios
Benchmarking /
Konkurrenzanalyse
Optimierungen
Den Kunden und sein
Produkt kennen (lernen)
Produktion
Testing
Endkunde bezogen
Agenturkunde bezogen
11

30 Gründe für den Besuch des Lieblingsshops
1. „...ich gehe jeden Abend drauf, um zu sehen, was es Neues gibt.“
3. „...ich die Produkte dort günstig(er) erhalte.„
5. „... um mich inspirieren zu lassen.“
6. „... weil ich etwas konkretes kaufen möchte.“
7. „... weil es dort Dinge gibt, die es im Laden nicht gibt.“
8. „... weil ich mir, bevor ich ein Produkt kaufe, mir erst einmal ein Bild davon machen möchte.“
10. „... weil der Shop tolle Funktionalitäten hat.“
11. „... weil ich diesem Shop vertraue.“
12. „... weil es dort die Produkte auch in meiner Größe gibt.“
14. „... weil die Bedienung dieses Shops einfach und unkompliziert ist.“
16. „... weil die Lieferzeiten gering sind.“„... weil es keine Versandkosten gibt.“
21. „... weil ich die Marke / das Image gut finde.“
29. „... weil der Service und Kontakt toll ist.“
30. „... weil der Shop Wert auf Nachhaltigkeit legt.“
…
12

Faktoren hinter den Aussagen
Qualitative Faktoren:
• Vertrauen
• Nutzbarkeit / Funktionalität / Komfort in der Nutzung
• Bedarfsdeckung
• Neugierde
• Image /Prestige
• Kostenbewusstsein
Quantitativer Faktor:
Bei der Befragung fiel auf, dass
• am Häufigsten wurden Dinge, die unter Komfort in der Nutzung zusammen gefasst werden können genannt,
• vor allem Jüngere eher mit der Intension Neugierde und Prestige argumentierten,
• Ältere eher auf Vertrauen setzen,
• Männer eher die technischen Dinge hervorhoben,
• Frauen die Vielfalt
Sehr heterogen!
13

Zielgruppe: „Großstadtcowboy“ ???
Photos fehlen aus rechtlichen Gründen
14

Beispiel: Zielgruppe Generation Y
Generation Y (nach 1980 Geborene) wird zur
zahlungskräftigen Zielgruppe und löst die
Babyboomer (ab 1940) ab.
Merkmale dieser Zielgruppe:
•
•
•
•
•
•
In komplexer und dynamischer Welt aufgewachsen
Tritt selbstbewusst auf
Ist jedoch orientierungslos und sprunghaft
Sucht nach Sicherheit und Stabilität
Ist geübt im Umgang mit Technologie und Netzwerken
Strebt nach Leistung, Sinn und Spaß im (Arbeits-) Leben
Bildquelle: http://www.egonzehnder.com/the-focus-magazine/the-focuseditions/the-focus-volume-20091-reward/expertise/wooing-generationy.html
Text: http://static.dgfp.de/assets/publikationen/2011/GenerationY-findenfoerdern-binden.pdf
15

Personas
Photos fehlen aus rechtlichen Gründen
16

User-Szenarien
Beschreibung einer repräsentativen
Interaktion eines Users mit dem System,
v.a. kontextbezogen.
„Als <Rolle> möchte ich <Ziel/Wunsch>,
um <Nutzen>“
User-Anforderungen
Gesamtanforderungen an das System
werden damit in kleine, konkrete
Häppchen (Funktion) unterteilt.
Die konkrete Beschreibung/Ablauf der
Funktion wird später im Feinkonzept
anhand von Use Cases beschrieben.
Photos fehlen aus rechtlichen Gründen
17

Analyse
Analyse
Festlegung und
Vorbereitung
Befragungen
Zielgruppenanalyse
Personas
User Szenarios
Benchmarking /
Konkurrenzanalyse
Optimierungen
Den Kunden und sein Produkt
kennen (lernen)
Produktion
Testing
Endkunde bezogen
Agenturkunde bezogen
18

Benchmarking / Konkurrenzanalyse
„… zielgerichtete Vergleiche unter
mehreren Unternehmen das jeweils beste
als Referenz zur Leistungsoptimierung
herausfinden lässt.“
Wikipedia
Vor dem Hintergrund aller bisher
betrachteten Anforderungen:
Frage:
Wo steckt der eigene USP?
19

Analyse von Optimierungspotenzialen
Görtz benutzt ein simples Flyout-Menü,
wenn der User über eine Kategorie
navigiert.
Andere Shops haben wesentlich
ansprechendere Flyout-Menüs.
20

21

Der Kunde, sein Produkt und du!
22

Analyse
Festlegung und
Vorbereitung
Produktion
Testing
Kreative Ideen
Festlegung
und
Vorbereitung
Auswahl Responsive Framework
Grid-Festlegungen / Aufsetzen
Sichtung bestehender Seite,
Erstellung alter Sitemap
Erstellung Neue Sitemap
Seitentypen/ Templatetypen
23

Ideen entwerfen und anscribbeln
Abbildung fehlt aus rechtlichen Gründen
24

Responsive Webdesign
Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um einen gestalterischen und
technischen Ansatz zur Erstellung von Websites, so dass diese Websites auf Eigenschaften des jeweils benutzten Endgeräts
reagieren können.
…
Technische Basis hierfür sind neuere Webstandards wie HTML5, CSS3 und JavaScript.
Quelle:http://de.wikipedia.org/wiki/Responsive_Webdesign
http://www.almased.de/
25

Auswahl eines CSS3 - Framework
• Notwendigkeit eines Frameworks?
• Browserkompatibilität
• Grid-Funktionalität
• Integrierten Funktionen & Modularität
• Flexibilität (eigene Layouts mögl.)
• Dokumentation & Versionsgeschichte
• Barrierefreiheit (z.B. Tastaturnavigation in Formularen)
• Lizenzkosten
• Support / Gemeinde
• Updates / Bugfixes
• Integrierte Bibliotheken
• Erfahrung der eigenen Entwickler mit dem Framework
http://www.highresolution.info/weblog/entry/evaluierung_von_css_frameworks/
26

Das Grid – für „Large Devices“ (Bootstrap 3)
27

Sitemap (alt)
28

Sitemap (neu)
29

Templatetypen
30

Ergebnis Analyse und Vorüberlegungen
Am Ende des Grobkonzepts steht ein Plan:
• welche Inhalte
• wie umgesetzt
• an welcher Stelle stehen
• wie die diese Inhalte über Navigation
verknüpft sind
• und welche Funktionen zu welchem
Ergebnis führen.
Deliverables:
• Strukturbaum/ Sitemap
• Beschreibung der Inhalte / Regelwerk
• Definition der Seitentypen
• Beschreibung der Funktionen
Beschreibung der Anbindung, …
• Workflow
Quelle: http://www.dreisechsachtnull.de/handbuch_fuer_konzeption/37/Grobkonzeption
31

Analyse
Festlegung und
Vorbereitung
Produktion
Testing
Wireframes
Abstimmung
Testen
Wireframes
Testen
Produktion
Abstimmung
Wireframes
Abstimmung
Abstimmung
Wireframes
…
32

Wireframes in Axure RP (Beispiel)
33

Testen Wireframes auf Endgeräten
34

Abstimmung - intern & kurze Wege mit dem Kunden
35

Beispiel Wireframes in 4 Zuständen
36

Beispiel Wireframes, umgesetzt im Layout (Vergleich)
37

Beispiel Hawesko – Responsive Commerce
38

Feinkonzept
39

Analyse
Testing
Festlegung und
Vorbereitung
Produktion
Testing
User-Tests
40

User Testing und weitere Optimierung
Testvariante 1
Testvariante 2
41

Zusammenfassung
42

Vorteile Responsive Design (bei Shops)
Aus Agenturkunden Sicht:
Aus (Shop-) User Sicht:
• Shop/Website funktioniert auf allen Endgeräten
• Positives Nutzererlebnis ist auf allen genutzten Geräten
• Aktualisierungen einfach und übergreifend möglich
sicher gestellt
• den Pflegeaufwand deutlich reduziert
• Funktionen je nach Nutzersituation / Gerät optimiert
• nur einmal Implementierungskosten
• Optischer Wiedererkennungseffekt, egal, wie der Einstieg
• Qualitätsmanagement-Zyklen reduziert
• Keine Probleme im SEO Bereich hat, da es keinen
„Duplicated Content“ gibt
in den Shop erfolgt
• Genutzte Login-Daten sind die selben
• Kein Verbrauchen von Speicherplatz auf dem Smartphone
• Zukunftssicher, erweiterbar
43

Herausforderungen Responsive Design
Agenturkunde und umsetzende Agentur ;-)
• Agenturkunde muss Responsive Webdesign verstehen (eine Sprache sprechen)
• Umdenken in Konzeption, Layout und auch Programmierung
(Reduktion: Anordnung Elemente, mobile first, Nutzerkontext etc.)
• Erhöhten Abstimmungsaufwand (intern und extern)
• iFrames bzw. externer Content, z.B. Bezahlverfahren
• Trackingsysteme (CR-Optimierung) und Mediaagenturen (Responsive Ads)
• Device Bugs
• Bilder Problematik (Retina, Dateigrößen)
• Hardwarekomponenten des Devices können (noch) nicht genutzt werden (Kamera, NFC)
• Ständige Weiterentwicklungen
44

Zusammenfassung der Zusammenfassung
• RWD – ist eine umfangreiche Aufgabe!
• Frühestmögliche Integration eines Konzepters ins Projekt
• Ein Konzepter hat im Projekt damit eine der Schlüsselrollen inne
• Konzepter = Erfahrungs- und Erwartungsmanager, behält das Anliegen
des Endnutzers im Auge
• Wichtig ist ein gutes Zusammenspiel zwischen den Abteilungen.
• Offene Kommunikation (auch mit dem Kunden) ist das A und O!
• RWD = Prozess = hohes Lernpotenzial für alle
Es macht verdammt viel Spaß!
45

Vielen Dank für die Aufmerksamkeit!
Mail:
Sabine.vonnordheim@gmail.com
Blog:
http://derinformationarchitect.wordpress.com/
Fragen? Fragen!
46

Sammlung Weblinks - UX & Usability
http://www.nngroup.com/articles/
http://www.drweb.de/magazin/
http://www.usabilityblog.de/
http://webkrauts.de/
http://www.uxbooth.com/
http://www.ibusiness.de/
http://www.smashingmagazine.com/
http://www.t3n.de
http://www.internetworld.de
http://www.marktforschung.de/
http://mobilbranche.de/
http://www.produktbezogen.de/
…
47

Sammlung Weblinks - Tools
Bildschirm teilen / Präsentationstool:
http://www.join.me
Ansicht der Website auf verschiedenen Endgeräten:
http://lab.maltewassermann.com/viewport-resizer/; http://www.responsinator.com/;
http://mattkersley.com/responsive/, http://responsivetest.net
Responsive Grid Generatoren:
http://gridpak.com/ oder http://gridcalculator.dk/
Platzhaltertext und Platzhalterbilder:
http://www.loremipsum.de/ und http://lorempixel.com/
Website Speed Testing Tool:
https://developers.google.com/speed/pagespeed/insights
48

Sammlung Weblinks - Responsive Design
Responsive Web Design Process
http://responsiveprocess.com/
Sammlung von Responsive Webseiten
http://mediaqueri.es/
Responsive Themes für Twitter Bootstrap
https://wrapbootstrap.com/
Responsive Ads
http://www.responsiveads.com/ad-formats-showcase
49

Sammlung Weblinks - Inspirationen
Sammlung kreativer Facebook Posts:
http://newsfeeder.com
Sammlung von Icons:
https://www.iconfinder.com/
Sammlung UX Elemente:
http://patterntap.com/
Sammlung von One-Pagern:
http://onepagelove.com/
Sammlung schöner / innovativer Websites:
http://designtaxi.com/wod-list.php
50

Sammlung Weblinks - Sonstiges
Übersicht über Endgerätebreiten:
http://spirelightmedia.com/resources/responsive-design-device-resolution-reference
Sammlung Infografiken:
http://blog.kissmetrics.com/infographics/
Sammlung verschiedener Dinge (Typo, Widgets, eCommerce Website Designs, …)
http://www.tripwiremagazine.com/
Kostenlose SEO-Magazine:
http://www.suchradar.de/magazin/archiv/
Blätter PDF – Tagungsband: Usability Professionals 2013
http://issuu.com/germanupa/docs/german-upa_tagungsband_up13_web
Mein Blog:
http://derinformationarchitect.wordpress.com/
51