Your SlideShare is downloading. ×

UX Design Studio

2,619

Published on

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

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

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

No Downloads
Views
Total Views
2,619
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UX Design Studio. Kooperative Produktkonzeption. Lennart Hennigs Fraunhofer FIT Absolventen-Tagung, 23.01.2014
  • 2. h"p://www.flickr.com/photos/mlebemle/3511330328/: nart L en
  • 3. Agenda. -  Prototyping. -  Zeichnen und User Experience Design. -  Ein Crashkurs. -  Design Studio.
  • 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. Agenda. -  Prototyping. -  Zeichnen und User Experience Design. -  Ein Crashkurs. -  Design Studio.
  • 6. Iterative Entwicklung. YOU: ARE: HERE: HPI School of Design Thinking
  • 7. Zeichnen ist Rapid Prototyping.
  • 8. Was ist Prototyping?
  • 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. Warum Prototyping?
  • 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. Ebenen der UX. Jesse James Garrett – The Elements of User Experience, 2000.
  • 13. The floor plan. Your app’s structure.
  • 14. How to get from A to B. Scenarios.
  • 15. How things behave. Interaction.
  • 16. How things appear and react. Metaphor & Posture.
  • 17. …& its content.
  • 18. …and not on the visual design.
  • 19. Dimensionen eines Prototypen. YOU: ARE: HERE: … & Struktur Gail Swanson – The Right Type of Prototype.
  • 20. Struktur Horizontaler Prototyp. Liefert einen Überblick über alle Key Screens.!
  • 21. Struktur Vertikaler Prototyp. Stellt in der Regel einen Use Case vollständig dar.
  • 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. “F early, fail fast & fail often.” ail
  • 24. Geschwindigkeit und Masse zählen.
  • 25. Was ist das Ziel? Und wie erreiche ich es?
  • 26. Nicht das Aussehen, sondern die inneren Werte zählen.
  • 27. Aber es ist natürlich nicht irrelevant… via youtube.com
  • 28. Versuche nie die komplette Lösung zu bauen…
  • 29. Prototype die relevanten Use Cases.
  • 30. Welche 20% der F unktionen werden 80% der Zeit genutzt?
  • 31. Was ist kritisch und schwierig?   Kritisch für eine gute UX   Schwierig für Nutzer Harrelson & Buley – Sketchboards and Prototypes, 2008.
  • 32. Gut genug ist WIRKLICH gut genug!
  • 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. Agenda. -  Prototyping. -  Zeichnen und User Experience Design. -  Ein Crashkurs im Zeichnen. -  Design Studio.
  • 35. Zeichnen ist Rapid Prototyping.
  • 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. 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. Es geht nicht um Kunst:
  • 39. Sondern darum Ideen zu visualisieren.
  • 40. Und es geht auch nicht um “schön”…
  • 41. Ebenen der UX. Jesse James Garrett – The Elements of User Experience, 2000.
  • 42. Information Architecture.
  • 43. Wireframes.
  • 44. UI Flows.
  • 45. Storyboards. @ Wiebke Müller
  • 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. 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. Agenda. -  Prototyping. -  Zeichnen und User Experience Design. -  Ein Crashkurs im Zeichnen. -  Design Studio.
  • 49. Starter Set. F okus Konturen Details Kommentare Links Schatten & 3D
  • 50. Sketching Vorlagen.

  • 51. Was ihr zeichnen können müsst… …denn damit lassen sich alle UI Elemente, die es gibt, zeichnen.
  • 52. Buley – Good Design Faster, 2011.
  • 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. 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. Buley – Good Design Faster, 2011.
  • 56. Buley – Good Design Faster, 2011.
  • 57. Buley – Good Design Faster, 2011.
  • 58. Buley – Good Design Faster, 2011.
  • 59. Nachmalen. DB Navigator Fantastical
  • 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. Agenda. -  Prototyping. -  Zeichnen und User Experience Design. -  Ein Crashkurs im Zeichnen. -  Design Studio.
  • 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. User Experience! Technology! Business! Aspekte erfolgreicher Produkte. IDEO:–:Human:Centered:Design:Toolkit:
  • 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. Design Studio Schritte. 1.  Das Problem beschreiben. 2.  Zeichnen. 3.  Ideen präsentieren. 4.  Diskussion. 5.  Iteration.
  • 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. 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. Ein aktuelles Projekt…
  • 69. Ein aktuelles Projekt…
  • 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. Ein aktuelles Projekt…
  • 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. 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. 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. 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. Zeichnet!
  • 77. Dankeschön.
  • 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. @LennartHennigs ! http://www.axureformobile.com! ! http://www.usercentered.de

×