UX Design Studio

4,632
-1

Published on

Folien meines Workshops über Sketching und Design Studio for UX.

Published in: Design
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,632
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

UX Design Studio

  1. 1. UX Design Studio. Kooperative Produktkonzeption. Lennart Hennigs Fraunhofer FIT Absolventen-Tagung, 23.01.2014
  2. 2. h"p://www.flickr.com/photos/mlebemle/3511330328/: nart L en
  3. 3. Agenda. -  Prototyping. -  Zeichnen und User Experience Design. -  Ein Crashkurs. -  Design Studio.
  4. 4. Schnelle Vorstellungsrunde...   Wie heißt bist Du?   Dein Jobtitel und Arbeitgeber?   Was machst Du?   Prototyping Erfahung?   Web? Applikationen? Mobile Apps?   Kannst Du zeichnen?
  5. 5. Agenda. -  Prototyping. -  Zeichnen und User Experience Design. -  Ein Crashkurs. -  Design Studio.
  6. 6. Iterative Entwicklung. YOU: ARE: HERE: HPI School of Design Thinking
  7. 7. Zeichnen ist Rapid Prototyping.
  8. 8. Was ist Prototyping?
  9. 9. „Prototyping is practice for people who design and make things. It’s not simply another tool for your design toolkit – it’s a design philosophy.” Todd Zaki Warfel
  10. 10. Warum Prototyping?
  11. 11. Warum soll ich prototypen? !  Um ein Problem zu verstehen. !  Um eine Lösung zu erarbeiten. !  Um Ideen greifbar zu machen. !  Beim Prototypen kommen uns neue Ideen. !  ...und beim Erklären auch.
  12. 12. Ebenen der UX. Jesse James Garrett – The Elements of User Experience, 2000.
  13. 13. The floor plan. Your app’s structure.
  14. 14. How to get from A to B. Scenarios.
  15. 15. How things behave. Interaction.
  16. 16. How things appear and react. Metaphor & Posture.
  17. 17. …& its content.
  18. 18. …and not on the visual design.
  19. 19. Dimensionen eines Prototypen. YOU: ARE: HERE: … & Struktur Gail Swanson – The Right Type of Prototype.
  20. 20. Struktur Horizontaler Prototyp. Liefert einen Überblick über alle Key Screens.!
  21. 21. Struktur Vertikaler Prototyp. Stellt in der Regel einen Use Case vollständig dar.
  22. 22. Fragen, bevor es losgeht: !  Wer ist die Zielgruppe für deinen Prototypen? !  Und warum? !  Was willst Du mit deinen Prototypen erreichen? !  Was willst Du herausfinden bzw. verstehen? !  Was willst Du präsentieren? !  Wann ist Dein Prototyp „gut genug“?
  23. 23. “F early, fail fast & fail often.” ail
  24. 24. Geschwindigkeit und Masse zählen.
  25. 25. Was ist das Ziel? Und wie erreiche ich es?
  26. 26. Nicht das Aussehen, sondern die inneren Werte zählen.
  27. 27. Aber es ist natürlich nicht irrelevant… via youtube.com
  28. 28. Versuche nie die komplette Lösung zu bauen…
  29. 29. Prototype die relevanten Use Cases.
  30. 30. Welche 20% der F unktionen werden 80% der Zeit genutzt?
  31. 31. Was ist kritisch und schwierig?   Kritisch für eine gute UX   Schwierig für Nutzer Harrelson & Buley – Sketchboards and Prototypes, 2008.
  32. 32. Gut genug ist WIRKLICH gut genug!
  33. 33. Take-aways Prototyping. !  Ist ein Vorgehen, um Probleme zu lösen. !  Hilft uns ein Problem verstehen. !  ...und eine Lösung zu erarbeiten. !  Macht Ideen greifbar. !  Wir prototypen um frühzeitig Fehler zu machen. !  ...und um aus ihnen zu lernen.
  34. 34. Agenda. -  Prototyping. -  Zeichnen und User Experience Design. -  Ein Crashkurs im Zeichnen. -  Design Studio.
  35. 35. Zeichnen ist Rapid Prototyping.
  36. 36. Warum soll ich zeichnen? !  Um ein Problem zu verstehen. !  Um eine Lösung zu erarbeiten. !  Um eine Idee greifbar zu machen. !  Beim Zeichnen kommen uns neue Ideen. !  ...und beim Erklären auch.
  37. 37. Aber warum zeichnen? “[Paper] will continue to predominate in activities that involve knowledge work, including browsing through information, reading and make sense of information; organizing and structuring and reminding of ideas; […] and activities that involve showing and demonstrating ideas and actions to others.”
  38. 38. Es geht nicht um Kunst:
  39. 39. Sondern darum Ideen zu visualisieren.
  40. 40. Und es geht auch nicht um “schön”…
  41. 41. Ebenen der UX. Jesse James Garrett – The Elements of User Experience, 2000.
  42. 42. Information Architecture.
  43. 43. Wireframes.
  44. 44. UI Flows.
  45. 45. Storyboards. @ Wiebke Müller
  46. 46. Vorteile von Skizzen? !  Extrem schnell und unaufwendig. !  „Günstig“. !  Ein Bild sagt mehr als 1.000 Worte. !  Sie sehen unfertig aus. !  Feedback geben wird einfacher. !  Fehler werden eher verziehen. !  Jeder kann zeichnen.
  47. 47. Vorteile von Skizzen? !  Extrem schnell und unaufwendig. !  „Günstig“. !  Ein Bild sagt mehr als 1.000 Worte. !  Sie sehen unfertig aus. !  Feedback geben wird einfacher. !  Fehler werden eher verziehen. !  Jeder kann zeichnen.
  48. 48. Agenda. -  Prototyping. -  Zeichnen und User Experience Design. -  Ein Crashkurs im Zeichnen. -  Design Studio.
  49. 49. Starter Set. F okus Konturen Details Kommentare Links Schatten & 3D
  50. 50. Sketching Vorlagen.

  51. 51. Was ihr zeichnen können müsst… …denn damit lassen sich alle UI Elemente, die es gibt, zeichnen.
  52. 52. Buley – Good Design Faster, 2011.
  53. 53. Regeln fürs Zeichnen. !  Filzstifte, damit ihr nicht in die Versuchung kommt herumzuradieren. !  Streicht lieber alles durch, was falsch ist... !  … oder werft das Blatt weg.
  54. 54. Buley – Good Design Faster, 2011. Aufwärmen. 1.  2.  3.  Zeichnet sich überlappende Rechtecke. Zeigt sie innerhalb eurer Gruppe. Blatt weitergeben und ein Rechteck gelb ausmalen. 4.  Blatt weitergeben und 3 - 4 Rechtecke fett umranden. 5.  Blatt weitergeben und 3 - 4 Rechtecke grau ausmalen.
  55. 55. Buley – Good Design Faster, 2011.
  56. 56. Buley – Good Design Faster, 2011.
  57. 57. Buley – Good Design Faster, 2011.
  58. 58. Buley – Good Design Faster, 2011.
  59. 59. Nachmalen. DB Navigator Fantastical
  60. 60. Take-aways Zeichnen. !  Zeichnen ist Prototyping. !  Extrem schnell und unaufwendig. !  Jeder kann Linien, Kästchen und Pfeile zeichnen. !  Es geht nicht um schön, sondern um das Vermitteln einer Idee. !  Übung macht den Meister.
  61. 61. Agenda. -  Prototyping. -  Zeichnen und User Experience Design. -  Ein Crashkurs im Zeichnen. -  Design Studio.
  62. 62. Design Studio. Kooperatives Entwickeln von Design-Lösungen. !  Ziel ist es, möglichst viele Ideen in kurzer Zeit zu erzeugen. !  Teilnehmer entwickeln Lösungsideen für eine klar umrissene Problemstellung (ein oder mehrere Screens, ein Use Case, etc.). !  ...und zeichnen diese. !  Ergebnisse werden vorgestellt, diskutiert und iterativ verbessert. !  Es sollten Projektbeteiligte aus allen Bereichen teilnehmen.
  63. 63. User Experience! Technology! Business! Aspekte erfolgreicher Produkte. IDEO:–:Human:Centered:Design:Toolkit:
  64. 64. Warum Design Studio? !  Es können viele Ideen in sehr kurzer Zeit erzeugt werden Warfel: 400+ Ideen in 6 hrs. !  Baut Team-Wissen auf. !  Team buy-in und ownership !  Team building. !  Nicht gut zur Exploration von Details zu geeignet.
  65. 65. Design Studio Schritte. 1.  Das Problem beschreiben. 2.  Zeichnen. 3.  Ideen präsentieren. 4.  Diskussion. 5.  Iteration.
  66. 66. 0. Setup. !  Design Studio Methode & Regeln kurz erklären. !  Alle Teilnehmer sind gleich. !  Zeitlimits werden nicht überschritten. !  Teilnehmer werden in Gruppen eingeteilt. !  3 – 6 Teilnehmer pro Gruppe. !  (Idealerweise) ein Moderator pro Gruppe. !  Eine Design Studio Session ist anstrengend! Plant Pausen ein. max. 15 min.
  67. 67. 1. Das Problem beschreiben. !  Welches Problem soll gelöst werden? 2-3 Sätze, die die Design Challenge beschreiben. !  Was sind Ziele, die erreicht werden sollen? 3-4 Anforderungen, an der Lösungen später gemessen werden. !  Was gibt es an Insights? Personas, Szenarien, Benchmarks, Anforderungen, Business Ziele, technische Vorgaben, ... max. 45 min.
  68. 68. Ein aktuelles Projekt…
  69. 69. Ein aktuelles Projekt…
  70. 70. 2. Zeichnen. !  Jeder Teilnehmer zeichnet für sich. !  …so viele Ideen wie möglich (3 – 8). !  Quantität vor Qualität. !  Blockade? !  Was ist das Gegenteil von deinem letzten Entwurf? !  Lässt sich ein User Interface, dass du magst, adaptieren? !  Optional (vorweg): !  Für 3 Minuten so viele Ideen- wie möglich auf Post-Its schreiben (Cardstorming). 5 min.
  71. 71. Ein aktuelles Projekt…
  72. 72. 3. Ideen präsentieren. !  Ein Teilnehmer stellt jede seiner Ideen vor. !  „Mein Konzept löst unser Problem ___, indem ___" !  Alle anderen hören still zu. !  ...und machen sich Notizen. 3 min. / Teiln.
  73. 73. 4. Diskussion. !  Anschließend nennt jeder Teilnehmer... !  2 – 3 Dinge, die das Problem gut lösen. !  1 – 2 Dinge, die verbessert werden könnten. !  „Ich mag...“ ist irrelevant. !  Wie gut werden die vorgegebenen Ziele erreicht? !  Bei Fragen: Ideen nicht „verteidigen“, sondern nur erläutern. !  Für die nächste Runde Notizen machen / Post-its anheften. 2 min. / Teiln.
  74. 74. 5. Iteration. Remix: !  Jeder Teilnehmer erstellt aus seinen Ideen und dem Feedback einen detaillierten Vorschlag. !  Neue Ideen können auch eingebaut werden. !  Ideen „klauen“ ist erwünscht, wenn die Idee verbessert wird. !  Danach: Erneut präsentieren & Diskussion. Optional: !  3. Runde, in dem das Team gemeinsam einen präferierten Vorschlag erstellt und den anderen Teams vorstellt.
  75. 75. Take-aways Design Studio. !  Design Studio ist keine Kunststunde. !  Quantität erzeugt Qualität. !  Zeitlimits sind eure Freunde. !  Die erste beste Idee ist oft nicht die Beste. !  Eure Ideen werden durch Kritik und andere Sichtweisen besser. !  ...und euch werden neue Ideen kommen.
  76. 76. Zeichnet!
  77. 77. Dankeschön.
  78. 78. Literatur & Links. ! Bücher ▪ Todd Zaki Warfel – Prototyping ▪ Saul Greenberg – Sketching User Experiences: The Workbook ▪ Dan Roam – The Back of the Napkin ! Artikel & Präsentationen ▪ Leah Buley – Good Design Faster ▪ Harrelson & Buley – Sketchboards & Prototypes ▪ Lennart Hennigs – Sketching for Better Mobile User Experiences ▪ Ungar & White - Agile user centered design: enter the design studio ▪ Will Evans - Introduction to Design Studio Methodology ▪ Adam Connor – Discussing Design: The Art of Critique
  79. 79. @LennartHennigs ! http://www.axureformobile.com! ! http://www.usercentered.de

×