in2code.deWir leben TYPO3
Wir leben TYPO3
User Experience Design
von der Idee zum erfolgreichen Produkt
in2code.deWir leben TYPO3
Was machen
die bei in2code
Maßgeschneiderte Lösungen
mit TYPO3 für
• Websites
• Corporate Intern...
in2code.deWir leben TYPO3
Ein Produkt wird nur erfolgreich,
wenn es für den Benutzer
ein positives Erlebnis ist!
in2code.deWir leben TYPO3
Der Prozess
Produktvision
Ideenfindung
Konzept & Planung
Business-Analyse
Nutzerforschung
Anford...
in2code.deWir leben TYPO3
Warum UX Design?
• höhere Kundenzufriedenheit  ROI
• benutzerfreundlicher  weniger Support/Sch...
in2code.deWir leben TYPO3
Teams
in2code.deWir leben TYPO3
Ein interdisziplinäres Team
Rollenverteilung anhand der Teamgrösse
• kleines Team mit mind. 3 Pe...
in2code.deWir leben TYPO3
Rollen im Team
• Management
Projektleitung, Businessanalyse,
Produktmanagement
• Design
Nutzerfo...
in2code.deWir leben TYPO3
Die Idee
in2code.deWir leben TYPO3
Am Anfang ist die Idee
Ideenfindungsprozess
ANALYTISCHEPHASE
Briefing
Ziele
Bedingungen KREATIVE...
in2code.deWir leben TYPO3
Kreativitätsmethoden
(kreative Phase)
Intuitive Methoden
• Brainstorming
• Galeriemethode
• Sema...
in2code.deWir leben TYPO3
Kreativitätsmethoden
(kreative Phase)
Diskursive Methoden
• Morphologischer Kasten
• Scramper
• ...
in2code.deWir leben TYPO3
Ideenworkshop
• Kartenabfrage
• Punkteabfrage
• Zurufverfahren
• Fragen- und
Themenspeicher
• Kl...
in2code.deWir leben TYPO3
Business-Analyse
in2code.deWir leben TYPO3
Business-Analyse
Ausfiltern der Ideen
• Passt die Idee zu unseren Zielen?
• Ist die Idee organis...
in2code.deWir leben TYPO3
Business-Analyse
Elevator Pitch
Eine Idee ist erfolgreich, wenn man
diese in wenigen Sekunden er...
in2code.deWir leben TYPO3
Business-Analyse
Fragen, die eine Idee beantworten soll
• Welche Zielgruppe spricht das Produkt ...
in2code.deWir leben TYPO3
Business-Analyse
Umweltanalyse mit dem PESTEL-Modell
• Politik
• Wirtschaft
• Soziales Verhalten...
in2code.deWir leben TYPO3
Business-Analyse
Konkurrenzanalyse
• Festlegen der Kriterien
• Recherche von Sekundärdaten
• Erh...
in2code.deWir leben TYPO3
Business-Analyse
SWOT-Analyse
• Interne Analyse
• Externe Analyse
• SWOT-Kombinationen
• Entwick...
in2code.deWir leben TYPO3
Business-Analyse
SWOT-Analyse Beispiel
Externe Faktoren
Chancen Risiken
Interne
Faktoren
Stärken...
in2code.deWir leben TYPO3
Business-Analyse
Kano-Analyse
Basierend auf dem Kano-Modell werden die
Produktmerkmale in fünf K...
in2code.deWir leben TYPO3
Business-Analyse
Kano-Analyse Beispiel
O Das wäre toll
O Das muss so sein
O Das ist mir egal
O D...
in2code.deWir leben TYPO3
Business-Analyse
Weitere Punkte
• Zielgruppenanalyse
• Roadmaperstellung
in2code.deWir leben TYPO3
Stakeholder-Management
in2code.deWir leben TYPO3
Stakeholder-Management
Alle beteiligten Personen und Gruppen sind Stakeholder!
Dazu zählen inter...
in2code.deWir leben TYPO3
Stakeholder-Management
Einordnung der Stakeholder für das Projekt
• Wie hoch ist das Interesse a...
in2code.deWir leben TYPO3
Stakeholder-Management
Stakeholderliste erstellen
Name
Rolle
Interesse
Einfluss
Risiken
Maßnahme...
in2code.deWir leben TYPO3
Stakeholder-Management
Stakeholder-Interviews
1. Interview mit dem Hauptsponsor
2. Gruppeninterv...
in2code.deWir leben TYPO3
Der Nutzer
in2code.deWir leben TYPO3
Nutzerforschung
• Erkennen von Erwartungen,
Bedürfnissen und Gewohnheiten
• Kennenlernen von Den...
in2code.deWir leben TYPO3
Nutzerforschung
• verständliche Modelle und Grafiken anstatt Tabellen
und technischer Diagramme ...
in2code.deWir leben TYPO3
Anforderungen
Um die Anforderungen der Benutzer besser kennen zu
lernen eignen sich folgende Met...
in2code.deWir leben TYPO3
Design
in2code.deWir leben TYPO3
Interaktionsdesign
Designprinzipien von Norman (2005)
• Sichtbarkeit
• Feedback
• Einschränkunge...
in2code.deWir leben TYPO3
Interaktionsdesign
Interaktionselemente
• immer die passenden Elemente wählen
• wenn möglich die...
in2code.deWir leben TYPO3
Interaktionsdesign
Interaktionsprototypen
• Skizzen
• Papierprototypen
• Wireframes / Mockups
• ...
in2code.deWir leben TYPO3
Informationsdesign
• Komplexe Sachverhalte einfach darstellen
• Informationen visuell darstellen...
in2code.deWir leben TYPO3
Visual Design
Gestaltungsgesetze
• Figur-Grund-Trennung
• Gesetz der Einfachheit
• Gesetz der Sy...
in2code.deWir leben TYPO3
Visual Design
Gestaltungsgesetze
• Gesetz der Nähe
• Gesetz der Kontinuität
• Gesetz der Prägnanz
in2code.deWir leben TYPO3
Visual Design
Gestaltungsgesetze
• Gesetz der Verbundenheit
• Gesetz der Ähnlichkeit
• Gesetz de...
in2code.deWir leben TYPO3
Visual Design
Gestaltungsgesetze
• Gesetz des gemeinsamen
Schicksals
in2code.deWir leben TYPO3
Visual Design
Farben
• Farbharmonien beachten (www.colorschemedesigner.com)
• Farbkontraste beac...
in2code.deWir leben TYPO3
Visual Design
Typographie
• Schriftart auf dem Zielsystem verfügbar?
• Hat die Schrift eine gute...
in2code.deWir leben TYPO3
Visual Design
Makrotypographie
• Satzspiegel und Gestaltungsraster
• Überschriften
• Absätze
• A...
in2code.deWir leben TYPO3
Visual Design
Affordance
• Effektive und wahrgenommene Affordances
• Visuelle Hinweise durch:
• ...
in2code.deWir leben TYPO3
Das Erlebnis prüfen
in2code.deWir leben TYPO3
Usability Testing
Ablauf eines Usability-Tests
• Ziel und Zweck festlegen
• Untersuchungsdesign ...
in2code.deWir leben TYPO3
Usability Testing
Evaluationsmethoden
• Gütekriterien:
• Objektivität
• Reliabilität
• Validität...
in2code.deWir leben TYPO3
Usability Testing
• Hallway-Testing
• Pluralistic Walkthrough
• Formaler Usability-Test
• Heuris...
in2code.deWir leben TYPO3
Release!
Alle Usability-Test erfolgreich?
You‘re ready!
in2code.deWir leben TYPO3
Quellen
Vor allem
dieses Buch:
…und natürlich
Google und
Wikipedia 
in2code.deWir leben TYPO3
Fragen?
Danke!
Martin Huber
Follow me: @huaba
in2code.deWir leben TYPO3
Wir suchen
Projektmanager
Webentwickler
Administratoren
www.in2code.de/starterbox
Nächste SlideShare
Wird geladen in …5
×

User Experience Design - von der Idee zum erfolgreichen Produkt

3.578 Aufrufe

Veröffentlicht am

Ein Produkt benutzerzentriert entwickeln: Ideenfindung, Markt- und Businessanalyse, Interaktions- und Visual Design

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

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.578
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
50
Aktionen
Geteilt
0
Downloads
22
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

User Experience Design - von der Idee zum erfolgreichen Produkt

  1. 1. in2code.deWir leben TYPO3 Wir leben TYPO3 User Experience Design von der Idee zum erfolgreichen Produkt
  2. 2. in2code.deWir leben TYPO3 Was machen die bei in2code Maßgeschneiderte Lösungen mit TYPO3 für • Websites • Corporate Internet • Intranet • mobile Apps
  3. 3. in2code.deWir leben TYPO3 Ein Produkt wird nur erfolgreich, wenn es für den Benutzer ein positives Erlebnis ist!
  4. 4. in2code.deWir leben TYPO3 Der Prozess Produktvision Ideenfindung Konzept & Planung Business-Analyse Nutzerforschung Anforderungen Iterative Umsetzung Prototypen Implementierung Usability Testing Release
  5. 5. in2code.deWir leben TYPO3 Warum UX Design? • höhere Kundenzufriedenheit  ROI • benutzerfreundlicher  weniger Support/Schulung • keine teuren Konzeptfehler • benutzerzentrierten Ansatz  Effizienz/Produktivität • kreative Improvisationsmöglichkeiten
  6. 6. in2code.deWir leben TYPO3 Teams
  7. 7. in2code.deWir leben TYPO3 Ein interdisziplinäres Team Rollenverteilung anhand der Teamgrösse • kleines Team mit mind. 3 Personen • mittleres Team ab 5 Personen • großes Team ab 9 Personen
  8. 8. in2code.deWir leben TYPO3 Rollen im Team • Management Projektleitung, Businessanalyse, Produktmanagement • Design Nutzerforschung, Informationsarchitektur, Interaktions- und Visualdesign, Usability Testing • Entwicklung Software-Architektur, -Entwicklung und Testing
  9. 9. in2code.deWir leben TYPO3 Die Idee
  10. 10. in2code.deWir leben TYPO3 Am Anfang ist die Idee Ideenfindungsprozess ANALYTISCHEPHASE Briefing Ziele Bedingungen KREATIVEPHASE Generieren Vergleichen Kombinieren Nachbessern KEINE KRITIK KRITISCHEPHASE Bewertung Aussortierung Ausarbeitung
  11. 11. in2code.deWir leben TYPO3 Kreativitätsmethoden (kreative Phase) Intuitive Methoden • Brainstorming • Galeriemethode • Semantische Intuition • Methode 6-3-5 • Kopfstandtechnik • Provokationstechnik
  12. 12. in2code.deWir leben TYPO3 Kreativitätsmethoden (kreative Phase) Diskursive Methoden • Morphologischer Kasten • Scramper • Trix • Kraftfeldanalyse • Sechs-Hut Methode
  13. 13. in2code.deWir leben TYPO3 Ideenworkshop • Kartenabfrage • Punkteabfrage • Zurufverfahren • Fragen- und Themenspeicher • Kleingruppen • Blitzlicht
  14. 14. in2code.deWir leben TYPO3 Business-Analyse
  15. 15. in2code.deWir leben TYPO3 Business-Analyse Ausfiltern der Ideen • Passt die Idee zu unseren Zielen? • Ist die Idee organisatorisch machbar? • Ist die Idee wirtschaftlich machbar? • Ist die Idee zeitlich machbar? • Ist die Idee technologisch machbar? • Ist die Idee rechtlich machbar?
  16. 16. in2code.deWir leben TYPO3 Business-Analyse Elevator Pitch Eine Idee ist erfolgreich, wenn man diese in wenigen Sekunden erklärt werden kann. Sie müssen also einen Interessenten während einer Aufzugsfahrt (innerhalb von 30 Sekunden) von ihrer Idee überzeugen können.
  17. 17. in2code.deWir leben TYPO3 Business-Analyse Fragen, die eine Idee beantworten soll • Welche Zielgruppe spricht das Produkt an? • Welche Kundenbedürfnisse deckt das Produkt ab? • Welche Merkmale müssen vorhanden sein um obige Bedürfnisse abdecken zu können? • Was sind die USP und wie unter- scheidet sich das Produkt von andern (eigene und Mitbewerber)? • Was sind die Rahmenbedingungen (Budget, Zeit usw.)?
  18. 18. in2code.deWir leben TYPO3 Business-Analyse Umweltanalyse mit dem PESTEL-Modell • Politik • Wirtschaft • Soziales Verhalten und Kultur • Technologie • Ökologie • Recht
  19. 19. in2code.deWir leben TYPO3 Business-Analyse Konkurrenzanalyse • Festlegen der Kriterien • Recherche von Sekundärdaten • Erheben von Primärdaten • Verdichten und Bereinigen der Daten • Auswerten und Visualisieren • Wertungspunkte werden mit der Gewichtung multipliziert • Gesamtpunktzahl aller Kriterien ist vergleichbar • Periodische Aktualisierung
  20. 20. in2code.deWir leben TYPO3 Business-Analyse SWOT-Analyse • Interne Analyse • Externe Analyse • SWOT-Kombinationen • Entwickeln von Maßnahmen
  21. 21. in2code.deWir leben TYPO3 Business-Analyse SWOT-Analyse Beispiel Externe Faktoren Chancen Risiken Interne Faktoren Stärken Maßnahmen Maßnahmen Schwächen Maßnahmen Maßnahmen
  22. 22. in2code.deWir leben TYPO3 Business-Analyse Kano-Analyse Basierend auf dem Kano-Modell werden die Produktmerkmale in fünf Kategorien unterteilt: • Basismerkmale • Leistungsmerkmale • Begeisterungsmerkmale • Unerhebliche Merkmale • Rückweisungsmerkmale
  23. 23. in2code.deWir leben TYPO3 Business-Analyse Kano-Analyse Beispiel O Das wäre toll O Das muss so sein O Das ist mir egal O Damit kann ich leben O Das finde ich nicht gut O Das wäre toll O Das muss so sein O Das ist mir egal O Damit kann ich leben O Das finde ich nicht gut Wie wichtig ist ihnen die Warenkorb-speichern Funktion? Unwichtig wichtig sehr wichtig 1 2 3 4 5 6 7 8 9 10
  24. 24. in2code.deWir leben TYPO3 Business-Analyse Weitere Punkte • Zielgruppenanalyse • Roadmaperstellung
  25. 25. in2code.deWir leben TYPO3 Stakeholder-Management
  26. 26. in2code.deWir leben TYPO3 Stakeholder-Management Alle beteiligten Personen und Gruppen sind Stakeholder! Dazu zählen interne Mitarbeiter wie z.B. Produktmanager, Projektleiter, Marketingverantwortliche oder Designer sowie externe Mitarbeiter wie z.B. Sponsoren, Investoren oder Organisatoren. Die rechtzeitige Einbeziehung aller Stakeholder trägt zum erfolgreichen Produkt bei.
  27. 27. in2code.deWir leben TYPO3 Stakeholder-Management Einordnung der Stakeholder für das Projekt • Wie hoch ist das Interesse am Erfolg • Wie groß ist sein Einfluss auf den Verlauf • Wie ist seine Rolle und Informationsbedürfnis • Wie kann er motiviert und eingebunden werden
  28. 28. in2code.deWir leben TYPO3 Stakeholder-Management Stakeholderliste erstellen Name Rolle Interesse Einfluss Risiken Maßnahmen Max Mustermann CEO groß groß Kann das Projekt stoppen, unpassende Anforderungen eng einbeziehen und aktiv beeinflussen Bastian Beispiel IT-Administrator mittel klein Will die Administration nicht übernehmen In den Technikprozess mit einbeziehen
  29. 29. in2code.deWir leben TYPO3 Stakeholder-Management Stakeholder-Interviews 1. Interview mit dem Hauptsponsor 2. Gruppeninterviews mit den am stärksten involvierten Stakeholdern 3. Einzelinterviews mit den übrigen Stakeholdern Daraus werden die Bedürfnisse der einzelnen Stakeholder abgeleitet und dokumentiert. Achtung: meistens werden nur Lösungen und nicht die Bedürfnisse genannt!
  30. 30. in2code.deWir leben TYPO3 Der Nutzer
  31. 31. in2code.deWir leben TYPO3 Nutzerforschung • Erkennen von Erwartungen, Bedürfnissen und Gewohnheiten • Kennenlernen von Denken, Handeln und Kontext • Wissen durch Beobachtungen, Befragungen oder Inhaltsanalysen • Bereinigen von Daten und Eindrücke  Effektivität
  32. 32. in2code.deWir leben TYPO3 Nutzerforschung • verständliche Modelle und Grafiken anstatt Tabellen und technischer Diagramme nutzen • Modellierung von Benutzergruppen mit Personas um Arbeitsabläufe, Szenarien, soziales und physisches Umfeld zu erkennen
  33. 33. in2code.deWir leben TYPO3 Anforderungen Um die Anforderungen der Benutzer besser kennen zu lernen eignen sich folgende Methoden: • Anforderungsdefinitionen • Use Cases • Use-Case-Diagramm • User Stories • Kontextszenarien • Storyboards
  34. 34. in2code.deWir leben TYPO3 Design
  35. 35. in2code.deWir leben TYPO3 Interaktionsdesign Designprinzipien von Norman (2005) • Sichtbarkeit • Feedback • Einschränkungen • Aktion und Wirkung • Konsistenz • Affordance
  36. 36. in2code.deWir leben TYPO3 Interaktionsdesign Interaktionselemente • immer die passenden Elemente wählen • wenn möglich die Eingabe erleichtern z.B. mit Autocomplete, Datepicker, RTE usw. • Gruppieren von zusammengehörigen Elementen • Logische Anordnung • Wirkungsbereiche klar darstellen • Abhängigkeiten sichtbar machen • Natürlichen Lesefluss beachten • Zustände richtig anzeigen
  37. 37. in2code.deWir leben TYPO3 Interaktionsdesign Interaktionsprototypen • Skizzen • Papierprototypen • Wireframes / Mockups • Interaktive Prototypen • Grafische Mockups
  38. 38. in2code.deWir leben TYPO3 Informationsdesign • Komplexe Sachverhalte einfach darstellen • Informationen visuell darstellen • Interaktionstechniken nutzen wie z.B. Filtern, Zoomen und Scrollen, Markieren, Drill-Down (Semantischer Zoom), Verknüpfen von Ansichten oder Details-on- demand • Technisches Schreiben: verständlich, übersichtlich formatieren, Konsistenz
  39. 39. in2code.deWir leben TYPO3 Visual Design Gestaltungsgesetze • Figur-Grund-Trennung • Gesetz der Einfachheit • Gesetz der Symmetrie
  40. 40. in2code.deWir leben TYPO3 Visual Design Gestaltungsgesetze • Gesetz der Nähe • Gesetz der Kontinuität • Gesetz der Prägnanz
  41. 41. in2code.deWir leben TYPO3 Visual Design Gestaltungsgesetze • Gesetz der Verbundenheit • Gesetz der Ähnlichkeit • Gesetz der Geschlossenheit
  42. 42. in2code.deWir leben TYPO3 Visual Design Gestaltungsgesetze • Gesetz des gemeinsamen Schicksals
  43. 43. in2code.deWir leben TYPO3 Visual Design Farben • Farbharmonien beachten (www.colorschemedesigner.com) • Farbkontraste beachten • Wirkung von Farben • Natürliche Assoziation • Kulturelle Assoziation • Fachspezifische Assoziation
  44. 44. in2code.deWir leben TYPO3 Visual Design Typographie • Schriftart auf dem Zielsystem verfügbar? • Hat die Schrift eine gute Lesbarkeit? • Der Charakter der Schrift passt zum Einsatzzweck
  45. 45. in2code.deWir leben TYPO3 Visual Design Makrotypographie • Satzspiegel und Gestaltungsraster • Überschriften • Absätze • Auszeichnungen • Satzformen • Zeilenabstand und Zeilenlänge • Blindtexte
  46. 46. in2code.deWir leben TYPO3 Visual Design Affordance • Effektive und wahrgenommene Affordances • Visuelle Hinweise durch: • Tiefenwirkung durch Licht und Schatten • Bewegungsrichtung durch Form • Materialwirkung durch Glanz und Textur • Realistisches Verhalten durch physische Eigenschaften
  47. 47. in2code.deWir leben TYPO3 Das Erlebnis prüfen
  48. 48. in2code.deWir leben TYPO3 Usability Testing Ablauf eines Usability-Tests • Ziel und Zweck festlegen • Untersuchungsdesign entwerfen • Teilnehmer rekrutieren • Evaluation vorbereiten • Evaluation durchführen • Resultate auswerten
  49. 49. in2code.deWir leben TYPO3 Usability Testing Evaluationsmethoden • Gütekriterien: • Objektivität • Reliabilität • Validität • Art des Gutachtens • Nutzertests • Expertentests
  50. 50. in2code.deWir leben TYPO3 Usability Testing • Hallway-Testing • Pluralistic Walkthrough • Formaler Usability-Test • Heuristische Evaluation • Cognitive Walkthrough • Usability-Befragung • GOMS • A/B-Tests
  51. 51. in2code.deWir leben TYPO3 Release! Alle Usability-Test erfolgreich? You‘re ready!
  52. 52. in2code.deWir leben TYPO3 Quellen Vor allem dieses Buch: …und natürlich Google und Wikipedia 
  53. 53. in2code.deWir leben TYPO3 Fragen? Danke! Martin Huber Follow me: @huaba
  54. 54. in2code.deWir leben TYPO3 Wir suchen Projektmanager Webentwickler Administratoren www.in2code.de/starterbox

×