SlideShare ist ein Scribd-Unternehmen logo
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

Weitere ähnliche Inhalte

Was ist angesagt?

SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016
André Scharf
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
Peter Rozek
 
Mentales modell lindemann website_boosting
Mentales modell lindemann website_boostingMentales modell lindemann website_boosting
Mentales modell lindemann website_boostingKaren Lindemann
 
Usability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
Usability / Designtrends in Kommunalen Internetportalen - Nicole ArmbrusterUsability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
Usability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
City & Bits GmbH
 
JP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate WebsiteJP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate Website
JP KOM GmbH
 
6 schritte zur_onlinekommunikationsstrategie
6 schritte zur_onlinekommunikationsstrategie6 schritte zur_onlinekommunikationsstrategie
6 schritte zur_onlinekommunikationsstrategie
Mittelstand 4.0-Kompetenzzentrum Kommunikation
 

Was ist angesagt? (6)

SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016SEO + UX = Search Experience Optimization (SXO) - webinale 2016
SEO + UX = Search Experience Optimization (SXO) - webinale 2016
 
Search Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt SilodenkenSearch Experience Optimization, Nutzerfokus statt Silodenken
Search Experience Optimization, Nutzerfokus statt Silodenken
 
Mentales modell lindemann website_boosting
Mentales modell lindemann website_boostingMentales modell lindemann website_boosting
Mentales modell lindemann website_boosting
 
Usability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
Usability / Designtrends in Kommunalen Internetportalen - Nicole ArmbrusterUsability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
Usability / Designtrends in Kommunalen Internetportalen - Nicole Armbruster
 
JP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate WebsiteJP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate Website
 
6 schritte zur_onlinekommunikationsstrategie
6 schritte zur_onlinekommunikationsstrategie6 schritte zur_onlinekommunikationsstrategie
6 schritte zur_onlinekommunikationsstrategie
 

Ähnlich wie UX aus Sicht eines Concepters

Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
eResult_GmbH
 
Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im Entwicklungsprozess
Immacon
 
TWT Usability Testing
TWT Usability Testing TWT Usability Testing
TWT Usability Testing TWT
 
Fallstudie Fokusgruppen eResult GmbH
Fallstudie Fokusgruppen eResult GmbHFallstudie Fokusgruppen eResult GmbH
Fallstudie Fokusgruppen eResult GmbH
eResult_GmbH
 
Über Service Design @ Plexgroup Open
Über Service Design @ Plexgroup OpenÜber Service Design @ Plexgroup Open
Über Service Design @ Plexgroup Open
Jens Otto Lange
 
Employer und Employee Branding | MarketTeam und Quadeo
Employer und Employee Branding | MarketTeam und QuadeoEmployer und Employee Branding | MarketTeam und Quadeo
Employer und Employee Branding | MarketTeam und Quadeo
Heiko Luedemann
 
Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?
Bogo Vatovec
 
Wettbewerbsanalyse alle an Bord beim Relaunch
Wettbewerbsanalyse alle an Bord beim RelaunchWettbewerbsanalyse alle an Bord beim Relaunch
Wettbewerbsanalyse alle an Bord beim Relaunch
Alexander Keller
 
Eine praktische Anleitung zur Auswahl eines CMS
Eine praktische Anleitung zur Auswahl eines CMSEine praktische Anleitung zur Auswahl eines CMS
Eine praktische Anleitung zur Auswahl eines CMSAcquia
 
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Robert Weller
 
10 05 31_siteforum_verlage_webmonday_augsburg
10 05 31_siteforum_verlage_webmonday_augsburg10 05 31_siteforum_verlage_webmonday_augsburg
10 05 31_siteforum_verlage_webmonday_augsburg
Karsten Schmidt
 
Innovationspotenzial heben – Vortrag/Workshop
Innovationspotenzial heben – Vortrag/WorkshopInnovationspotenzial heben – Vortrag/Workshop
Innovationspotenzial heben – Vortrag/Workshop
WOHOFSKY | Digitale Kommunikation
 
design
designdesign
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
Vitaly Friedman
 
SEO - SEA - Websiteanalyse - Social Media
SEO - SEA - Websiteanalyse - Social MediaSEO - SEA - Websiteanalyse - Social Media
SEO - SEA - Websiteanalyse - Social Media
www.rw-oberwallis.ch
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Stephan Hamberger
 
Fallstudie Websitekonzeption eResult GmbH
Fallstudie Websitekonzeption eResult GmbHFallstudie Websitekonzeption eResult GmbH
Fallstudie Websitekonzeption eResult GmbH
eResult_GmbH
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
AlineDeicke
 
Cyberforum RoundTable "Social Media Strategie & Planung"
Cyberforum RoundTable "Social Media Strategie & Planung"Cyberforum RoundTable "Social Media Strategie & Planung"
Cyberforum RoundTable "Social Media Strategie & Planung"Rebecca Rutschmann
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne Designprozesse
Hans-Joachim Belz
 

Ähnlich wie UX aus Sicht eines Concepters (20)

Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
 
Usability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im EntwicklungsprozessUsability als strategisches Element im Entwicklungsprozess
Usability als strategisches Element im Entwicklungsprozess
 
TWT Usability Testing
TWT Usability Testing TWT Usability Testing
TWT Usability Testing
 
Fallstudie Fokusgruppen eResult GmbH
Fallstudie Fokusgruppen eResult GmbHFallstudie Fokusgruppen eResult GmbH
Fallstudie Fokusgruppen eResult GmbH
 
Über Service Design @ Plexgroup Open
Über Service Design @ Plexgroup OpenÜber Service Design @ Plexgroup Open
Über Service Design @ Plexgroup Open
 
Employer und Employee Branding | MarketTeam und Quadeo
Employer und Employee Branding | MarketTeam und QuadeoEmployer und Employee Branding | MarketTeam und Quadeo
Employer und Employee Branding | MarketTeam und Quadeo
 
Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?
 
Wettbewerbsanalyse alle an Bord beim Relaunch
Wettbewerbsanalyse alle an Bord beim RelaunchWettbewerbsanalyse alle an Bord beim Relaunch
Wettbewerbsanalyse alle an Bord beim Relaunch
 
Eine praktische Anleitung zur Auswahl eines CMS
Eine praktische Anleitung zur Auswahl eines CMSEine praktische Anleitung zur Auswahl eines CMS
Eine praktische Anleitung zur Auswahl eines CMS
 
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
Content ist Design. Design ist Content – Ansätze für eine ganzheitliche Conte...
 
10 05 31_siteforum_verlage_webmonday_augsburg
10 05 31_siteforum_verlage_webmonday_augsburg10 05 31_siteforum_verlage_webmonday_augsburg
10 05 31_siteforum_verlage_webmonday_augsburg
 
Innovationspotenzial heben – Vortrag/Workshop
Innovationspotenzial heben – Vortrag/WorkshopInnovationspotenzial heben – Vortrag/Workshop
Innovationspotenzial heben – Vortrag/Workshop
 
design
designdesign
design
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
SEO - SEA - Websiteanalyse - Social Media
SEO - SEA - Websiteanalyse - Social MediaSEO - SEA - Websiteanalyse - Social Media
SEO - SEA - Websiteanalyse - Social Media
 
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
Netd@ys 08/09 Workshop - "Von der kreativen Idee zum innovativen Projekt"
 
Fallstudie Websitekonzeption eResult GmbH
Fallstudie Websitekonzeption eResult GmbHFallstudie Websitekonzeption eResult GmbH
Fallstudie Websitekonzeption eResult GmbH
 
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen OnlinedatenbankenUsability in (geistes-)wissenschaftlichen Onlinedatenbanken
Usability in (geistes-)wissenschaftlichen Onlinedatenbanken
 
Cyberforum RoundTable "Social Media Strategie & Planung"
Cyberforum RoundTable "Social Media Strategie & Planung"Cyberforum RoundTable "Social Media Strategie & Planung"
Cyberforum RoundTable "Social Media Strategie & Planung"
 
Agil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne DesignprozesseAgil und kreativ - Moderne Designprozesse
Agil und kreativ - Moderne Designprozesse
 

Mehr von uxHH

Web-Analytics für UXler
Web-Analytics für UXlerWeb-Analytics für UXler
Web-Analytics für UXler
uxHH
 
VR/AR Experience - Speicherstadt Digital und William Lindley
VR/AR Experience - Speicherstadt Digital und William LindleyVR/AR Experience - Speicherstadt Digital und William Lindley
VR/AR Experience - Speicherstadt Digital und William Lindley
uxHH
 
Gamified Customer Experiene
Gamified Customer ExperieneGamified Customer Experiene
Gamified Customer Experiene
uxHH
 
Kontinuierliche User Research und UX Design
Kontinuierliche User Research und UX DesignKontinuierliche User Research und UX Design
Kontinuierliche User Research und UX Design
uxHH
 
Lebensmittel Online – diesmal richtig
Lebensmittel Online – diesmal richtigLebensmittel Online – diesmal richtig
Lebensmittel Online – diesmal richtig
uxHH
 
UX Communities - Skopos Nova
UX Communities - Skopos NovaUX Communities - Skopos Nova
UX Communities - Skopos Nova
uxHH
 
Conversational UX & Shopping-Convenience
Conversational UX & Shopping-ConvenienceConversational UX & Shopping-Convenience
Conversational UX & Shopping-Convenience
uxHH
 
UXR817_Fahrradstadt-Koldorf-Hipp
UXR817_Fahrradstadt-Koldorf-HippUXR817_Fahrradstadt-Koldorf-Hipp
UXR817_Fahrradstadt-Koldorf-Hipp
uxHH
 
Werkstattgespräch Agile Requirements Engineering
Werkstattgespräch Agile Requirements EngineeringWerkstattgespräch Agile Requirements Engineering
Werkstattgespräch Agile Requirements Engineering
uxHH
 
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
uxHH
 
UXR 7/16 Ediz Kiratli: Car Remote Apps
UXR 7/16 Ediz Kiratli: Car Remote AppsUXR 7/16 Ediz Kiratli: Car Remote Apps
UXR 7/16 Ediz Kiratli: Car Remote Apps
uxHH
 
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte InnovationGrounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
uxHH
 
Riding the Wave of Exponential Innovation
Riding the Wave of Exponential InnovationRiding the Wave of Exponential Innovation
Riding the Wave of Exponential Innovation
uxHH
 
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
uxHH
 
Gamified Nachbarschaft
Gamified NachbarschaftGamified Nachbarschaft
Gamified Nachbarschaft
uxHH
 
Neue Strategie bei Stuffle nach Research
Neue Strategie bei Stuffle nach ResearchNeue Strategie bei Stuffle nach Research
Neue Strategie bei Stuffle nach Research
uxHH
 
Virtual & Augmented Reality: Neue Entertainment Experience
Virtual & Augmented Reality: Neue Entertainment ExperienceVirtual & Augmented Reality: Neue Entertainment Experience
Virtual & Augmented Reality: Neue Entertainment Experience
uxHH
 
U-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
U-Multirank - Entwicklung eines WebTools für ein neues globales HochschulrankingU-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
U-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
uxHH
 
Enhancing the Touch
Enhancing the TouchEnhancing the Touch
Enhancing the Touch
uxHH
 
Mastering SCRUM & UCD
Mastering SCRUM & UCDMastering SCRUM & UCD
Mastering SCRUM & UCD
uxHH
 

Mehr von uxHH (20)

Web-Analytics für UXler
Web-Analytics für UXlerWeb-Analytics für UXler
Web-Analytics für UXler
 
VR/AR Experience - Speicherstadt Digital und William Lindley
VR/AR Experience - Speicherstadt Digital und William LindleyVR/AR Experience - Speicherstadt Digital und William Lindley
VR/AR Experience - Speicherstadt Digital und William Lindley
 
Gamified Customer Experiene
Gamified Customer ExperieneGamified Customer Experiene
Gamified Customer Experiene
 
Kontinuierliche User Research und UX Design
Kontinuierliche User Research und UX DesignKontinuierliche User Research und UX Design
Kontinuierliche User Research und UX Design
 
Lebensmittel Online – diesmal richtig
Lebensmittel Online – diesmal richtigLebensmittel Online – diesmal richtig
Lebensmittel Online – diesmal richtig
 
UX Communities - Skopos Nova
UX Communities - Skopos NovaUX Communities - Skopos Nova
UX Communities - Skopos Nova
 
Conversational UX & Shopping-Convenience
Conversational UX & Shopping-ConvenienceConversational UX & Shopping-Convenience
Conversational UX & Shopping-Convenience
 
UXR817_Fahrradstadt-Koldorf-Hipp
UXR817_Fahrradstadt-Koldorf-HippUXR817_Fahrradstadt-Koldorf-Hipp
UXR817_Fahrradstadt-Koldorf-Hipp
 
Werkstattgespräch Agile Requirements Engineering
Werkstattgespräch Agile Requirements EngineeringWerkstattgespräch Agile Requirements Engineering
Werkstattgespräch Agile Requirements Engineering
 
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
UXR2/17: Accessibility Trends – Anspruch und Wirklichkeit der Barrierefreihei...
 
UXR 7/16 Ediz Kiratli: Car Remote Apps
UXR 7/16 Ediz Kiratli: Car Remote AppsUXR 7/16 Ediz Kiratli: Car Remote Apps
UXR 7/16 Ediz Kiratli: Car Remote Apps
 
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte InnovationGrounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
Grounded Innovation – Ethnografie als Schlüssel für user-zentrierte Innovation
 
Riding the Wave of Exponential Innovation
Riding the Wave of Exponential InnovationRiding the Wave of Exponential Innovation
Riding the Wave of Exponential Innovation
 
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
Creative Space for Technical Innovations (CSTI) im Kontext von Human-Computer...
 
Gamified Nachbarschaft
Gamified NachbarschaftGamified Nachbarschaft
Gamified Nachbarschaft
 
Neue Strategie bei Stuffle nach Research
Neue Strategie bei Stuffle nach ResearchNeue Strategie bei Stuffle nach Research
Neue Strategie bei Stuffle nach Research
 
Virtual & Augmented Reality: Neue Entertainment Experience
Virtual & Augmented Reality: Neue Entertainment ExperienceVirtual & Augmented Reality: Neue Entertainment Experience
Virtual & Augmented Reality: Neue Entertainment Experience
 
U-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
U-Multirank - Entwicklung eines WebTools für ein neues globales HochschulrankingU-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
U-Multirank - Entwicklung eines WebTools für ein neues globales Hochschulranking
 
Enhancing the Touch
Enhancing the TouchEnhancing the Touch
Enhancing the Touch
 
Mastering SCRUM & UCD
Mastering SCRUM & UCDMastering SCRUM & UCD
Mastering SCRUM & UCD
 

UX aus Sicht eines Concepters

  • 1.
  • 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. 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. 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. 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. 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. 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. 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. 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. Agenda:  „Wir  wollen  einen  Relaunch…“ Analyse Festlegung und Vorbereitung Produktion Testing 10
  • 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. 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. 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. Zielgruppe:  „Großstadtcowboy“   ??? Photos fehlen aus rechtlichen Gründen 14
  • 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. Personas Photos fehlen aus rechtlichen Gründen 16
  • 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. Photos fehlen aus rechtlichen Gründen 17
  • 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. 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. 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
  • 22. Der Kunde, sein Produkt und du! 22
  • 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. Ideen entwerfen und anscribbeln Abbildung fehlt aus rechtlichen Gründen 24
  • 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. 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. Das Grid – für  „Large  Devices“  (Bootstrap  3) 27
  • 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
  • 33. Wireframes in Axure RP (Beispiel) 33
  • 34. Testen Wireframes auf Endgeräten 34
  • 35. Abstimmung - intern & kurze Wege mit dem Kunden 35
  • 36. Beispiel Wireframes in 4 Zuständen 36
  • 37. Beispiel Wireframes, umgesetzt im Layout (Vergleich) 37
  • 38. Beispiel Hawesko – Responsive Commerce 38
  • 41. User Testing und weitere Optimierung Testvariante 1 Testvariante 2 41
  • 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. 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. 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. Vielen Dank für die Aufmerksamkeit! Mail: Sabine.vonnordheim@gmail.com Blog: http://derinformationarchitect.wordpress.com/ Fragen? Fragen! 46
  • 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. 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. 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. 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. 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