1
Wie aus: "Wir wollen einen Relaunch"
eine nutzerorientierte, responsive Website wird.
(und welche Herausforderungen dabei ...
Sabine von Nordheim
Diplom-Kauffr. (Medienwirtschaft TU Ilmenau)
Erfahrung in mehreren Hamburger Agenturen
Aktuell als Kon...
Inhabergeführte Agentur, 3 Geschäftsführer
seit 1996
Wendenstraße (City Süd)
Brands & E-Commerce
Fullservice-Agentur
45 Mi...
Stellen wir uns einmal vor,…
… wir benutzen das Internet und
besuchen eine Website.
Was passiert da eigentlich in uns?

5
...
Unterbewusst finden wir Antworten auf folgende Fragen:
1. Wird das Ausgabegerät beachtet, mit dem ich die Inhalte betracht...
User Erwartungen treffen auf reale User Erfahrung mit der Seite
Daraus ergibt sich die USER EXPERIENCE.

Warum ist uns als...
Aufgabe eines Konzepters
ERWARTUNGS- & ERFAHRUNGSMANAGEMENT  Schaffen positiver UX

EINES?
8

Quelle: http://www.germanup...
Ein gutes Briefing ist der beste Start in ein erfolgreiches Projekt!
Inhalte des Briefingsworkshops:
• Darstellung des Sta...
Agenda: „Wir wollen einen Relaunch…“

Analyse

Festlegung und
Vorbereitung

Produktion

Testing

10
Analyse

Analyse

Festlegung und
Vorbereitung

Befragungen
Zielgruppenanalyse
Personas
User Szenarios
Benchmarking /
Konku...
30 Gründe für den Besuch des Lieblingsshops
1. „...ich gehe jeden Abend drauf, um zu sehen, was es Neues gibt.“
3. „...ich...
Faktoren hinter den Aussagen
Qualitative Faktoren:
• Vertrauen
• Nutzbarkeit / Funktionalität / Komfort in der Nutzung
• B...
Zielgruppe: „Großstadtcowboy“ ???

14
Beispiel: Zielgruppe Generation Y
Generation Y (nach 1980 Geborene) wird zur
zahlungskräftigen Zielgruppe und löst die
Bab...
Personas

16
User-Szenarien
Beschreibung einer repräsentativen
Interaktion eines Users mit dem System,
v.a. kontextbezogen.
„Als <Rolle...
Analyse

Analyse

Festlegung und
Vorbereitung

Befragungen
Zielgruppenanalyse
Personas
User Szenarios
Benchmarking /
Konku...
Benchmarking / Konkurrenzanalyse
„… zielgerichtete Vergleiche unter
mehreren Unternehmen das jeweils beste
als Referenz zu...
Analyse von Optimierungspotenzialen
Görtz benutzt ein simples Flyout-Menü,
wenn der User über eine Kategorie
navigiert.
An...
21
Der Kunde, sein Produkt und du!

22
Analyse

Festlegung und
Vorbereitung

Produktion

Testing

Kreative Ideen

Festlegung
und
Vorbereitung

Auswahl Responsive...
Ideen entwerfen und anscribbeln

24
Responsive Webdesign
Beim Responsive Webdesign (im Deutschen auch responsives Webdesign) handelt es sich um einen gestalte...
Auswahl eines CSS3 - Framework
• Notwendigkeit eines Frameworks?
• Browserkompatibilität
• Grid-Funktionalität
• Integrier...
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 welche...
Analyse

Festlegung und
Vorbereitung

Produktion

Testing

Wireframes
Abstimmung
Testen
Wireframes
Testen

Produktion

Abs...
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 ...
Herausforderungen Responsive Design
Agenturkunde und umsetzende Agentur ;-)
• Agenturkunde muss Responsive Webdesign verst...
Zusammenfassung der Zusammenfassung
• RWD – ist eine umfangreiche Aufgabe!
• Frühestmögliche Integration eines Konzepters ...
Vielen Dank für die Aufmerksamkeit!

Mail:
Sabine.vonnordheim@gmail.com

Blog:
http://derinformationarchitect.wordpress.co...
Sammlung Weblinks - UX & Usability
http://www.nngroup.com/articles/
http://www.drweb.de/magazin/
http://www.usabilityblog....
Sammlung Weblinks - Tools
Bildschirm teilen / Präsentationstool:
http://www.join.me
Ansicht der Website auf verschiedenen ...
Sammlung Weblinks - Responsive Design
Responsive Web Design Process
http://responsiveprocess.com/
Sammlung von Responsive ...
Sammlung Weblinks - Inspirationen
Sammlung kreativer Facebook Posts:
http://newsfeeder.com
Sammlung von Icons:
https://www...
Sammlung Weblinks - Sonstiges
Übersicht über Endgerätebreiten:
http://spirelightmedia.com/resources/responsive-design-devi...
Nächste SlideShare
Wird geladen in …5
×

UX aus der Sicht eines Konzepters

2.412 Aufrufe

Veröffentlicht am

Wie aus: "Wir wollen einen Relaunch" eine nutzerorientierte, responsive Website wird, und welche Herausforderungen dabei auftreten. Eine Betrachtung des Prozesse, der Tools und Ergebnisse aus Agentursicht.

Sabine ist Online Konzepterin / Information Architect bei der Medienwerft. Sie blogt als Der Informationarchitect.

Veröffentlicht in: Design, Technologie, Business
0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.412
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
7
Aktionen
Geteilt
0
Downloads
14
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

UX aus der Sicht eines Konzepters

  1. 1. 1
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. Agenda: „Wir wollen einen Relaunch…“ Analyse Festlegung und Vorbereitung Produktion Testing 10
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. Zielgruppe: „Großstadtcowboy“ ??? 14
  15. 15. 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
  16. 16. Personas 16
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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. 21. 21
  22. 22. Der Kunde, sein Produkt und du! 22
  23. 23. 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
  24. 24. Ideen entwerfen und anscribbeln 24
  25. 25. 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
  26. 26. 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
  27. 27. Das Grid – für „Large Devices“ (Bootstrap 3) 27
  28. 28. Sitemap (alt) 28
  29. 29. Sitemap (neu) 29
  30. 30. Templatetypen 30
  31. 31. 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
  32. 32. Analyse Festlegung und Vorbereitung Produktion Testing Wireframes Abstimmung Testen Wireframes Testen Produktion Abstimmung Wireframes Abstimmung Abstimmung Wireframes … 32
  33. 33. Wireframes in Axure RP (Beispiel) 33
  34. 34. Testen Wireframes auf Endgeräten 34
  35. 35. Abstimmung - intern & kurze Wege mit dem Kunden 35
  36. 36. Beispiel Wireframes in 4 Zuständen 36
  37. 37. Beispiel Wireframes, umgesetzt im Layout (Vergleich) 37
  38. 38. Beispiel Hawesko – Responsive Commerce 38
  39. 39. Feinkonzept 39
  40. 40. Analyse Testing Festlegung und Vorbereitung Produktion Testing User-Tests 40
  41. 41. User Testing und weitere Optimierung Testvariante 1 Testvariante 2 41
  42. 42. Zusammenfassung 42
  43. 43. 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
  44. 44. 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
  45. 45. 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
  46. 46. Vielen Dank für die Aufmerksamkeit! Mail: Sabine.vonnordheim@gmail.com Blog: http://derinformationarchitect.wordpress.com/ Fragen? Fragen! 46
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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

×