UX aus Sicht eines Concepters

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

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/

Sabine von Nordheim

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?

Bildquelle: Stephanie Hofschlaeger pixelio.de5

ERWARTUNGEN

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. …

Unterbewusst finden wir Antworten auf folgende Fragen:

treffen auf reale USER ERFAHRUNG mit der Seite.

6

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!

User Erwartungen treffen auf reale User Erfahrung mit der Seite

7

ERWARTUNGS- & ERFAHRUNGSMANAGEMENT Æ Schaffen positiver UX

EINES?

Aufgabe eines Konzepters

Quelle: http://www.germanupa.de; http://issuu.com/germanupa/docs/german-upa_tagungsband_up13_web8

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

Ein gutes Briefing ist der beste Start in ein erfolgreiches Projekt!

Vorlage für das Angebot / Grobkonzept!9

Analyse Festlegung und Vorbereitung Produktion Testing

Agenda:  „Wir  wollen  einen  Relaunch…“

10

Befragungen

Zielgruppenanalyse

Personas

User Szenarios

Benchmarking /

Konkurrenzanalyse

Optimierungen

Den Kunden und sein

Produkt kennen (lernen)

Endkunde bezogen

Agenturkunde bezogen

11

Analyse

Analyse Festlegung und Vorbereitung Produktion Testing

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  kaufenmö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 machenmö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  Lieferzeitengering  sind.“„...  weil  es  keine Versandkostengibt.“

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.“  

…

30 Gründe für den Besuch des Lieblingsshops

12

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

Faktoren hinter den Aussagen

Sehr heterogen!13

Zielgruppe:  „Großstadtcowboy“  ???

14

Beispiel: Zielgruppe Generation Y

Bildquelle: http://www.egonzehnder.com/the-focus-magazine/the-focus-

editions/the-focus-volume-20091-reward/expertise/wooing-generation-

y.html

Text: http://static.dgfp.de/assets/publikationen/2011/GenerationY-finden-

foerdern-binden.pdf

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

15

Personas

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.

17

Befragungen

Zielgruppenanalyse

Personas

User Szenarios

Benchmarking /

Konkurrenzanalyse

Optimierungen

Den Kunden und sein Produkt

kennen (lernen)

Endkunde bezogen

Agenturkunde bezogen

18

Analyse

Analyse Festlegung und Vorbereitung Produktion Testing

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

Kreative Ideen

Auswahl Responsive Framework

Grid-Festlegungen / Aufsetzen

Sichtung bestehender Seite,

Erstellung alter Sitemap

Erstellung Neue Sitemap

Seitentypen/ Templatetypen

23

Festlegung und

Vorbereitung

Analyse Festlegung und Vorbereitung Produktion Testing

Ideen entwerfen und anscribbeln

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

Wireframes

Abstimmung

Testen

Wireframes

Testen

Abstimmung

Wireframes

Abstimmung

Abstimmung

Wireframes

…

32

Produktion

Analyse Festlegung und Vorbereitung Produktion Testing

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

40

Testing User-Tests

Analyse Festlegung und Vorbereitung Produktion Testing

User Testing und weitere Optimierung

Testvariante 1 Testvariante 2

41

Zusammenfassung

42

• Positives Nutzererlebnis ist auf allen genutzten Geräten

sicher gestellt

• Funktionen je nach Nutzersituation / Gerät optimiert

• Optischer Wiedererkennungseffekt, egal, wie der Einstieg

in den Shop erfolgt

• Genutzte Login-Daten sind die selben

• Kein Verbrauchen von Speicherplatz auf dem Smartphone

Vorteile Responsive Design (bei Shops)

Aus Agenturkunden Sicht: Aus (Shop-) User Sicht:

• Shop/Website funktioniert auf allen Endgeräten

• Aktualisierungen einfach und übergreifend möglich

• den Pflegeaufwand deutlich reduziert

• nur einmal Implementierungskosten

• Qualitätsmanagement-Zyklen reduziert

• Keine Probleme im SEO Bereich hat, da es keinen

„Duplicated Content“  gibt

• Zukunftssicher, erweiterbar

43

Herausforderungen Responsive Design

• 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

Agenturkunde und umsetzende Agentur ;-)

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

Mail:Sabine.vonnordheim@gmail.com

Blog:http://derinformationarchitect.wordpress.com/

Vielen Dank für die Aufmerksamkeit!

Fragen? Fragen!

46

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/

…

Sammlung Weblinks - UX & Usability

47

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

Sammlung Weblinks - Tools

48

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

Sammlung Weblinks - Responsive Design

49

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

Sammlung Weblinks - Inspirationen

50

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

Sammlung Weblinks - Sonstiges

51