Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)

1.206 Aufrufe

Veröffentlicht am

Vortrag über Konzeption bei "Sehen & Ernten" am 5. April 2014 – "Basics in User Experience Design, Information Architecture & Usability" Vol. 2

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)

  1. 1. @ s e b a s t i a n w a t e r s Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.) S e h e n u n d E r n t e n e . V. , 5 . A p r i l 2 0 1 4
  2. 2. @ s e b a s t i a n w a t e r s Agenda  Kurze Einleitung (und Haribos)  Was heißt Konzeption?  Was sind die Unterschiede von UX, IA und Usability? (ja, ich wiederhole einfach meinen Vortrag vom letzten Jahr)  Wozu braucht man das? Und kann man damit Geld verdienen? (ja, kann man)  Gute Beispiele, schlechte Beispiele  Fazit  Praktischer Teil (falls dann noch einer hier ist) 2 Wie immer gilt: aufpassen, mitschreiben, Fragen stellen.
  3. 3. Eine ganz kurze Einleitung
  4. 4. @ s e b a s t i a n w a t e r s Wer steht da eigentlich und redet?
  5. 5. @ s e b a s t i a n w a t e r s Einleitung  Name: Sebastian  Beruf: Konzepter (Informationsarchitekt? User-Experience- Designer? Interfacedesigner? Interaction-Designer?)  Klugscheißer, Besserwisser und Profi-Nörgler Der Typ, der steht und spricht... 5
  6. 6. @ s e b a s t i a n w a t e r s Einleitung  B.A. in Kommunikationsdesign („Web 3.0 – Social Semantics“)  seit sieben Jahren Freelancer  seit einem Jahr ein eigenes „Büro für digitale Kommunikation“ zusammen mit Patrick Beser (der hat’s wenigstens zur HTW geschafft)  Brille, Linkshänder und Hunde sind besser als Katzen Warum darf der Typ hier sprechen? 6
  7. 7. @ s e b a s t i a n w a t e r s Und wer sitzt da und guckt gelangweilt?
  8. 8. @ s e b a s t i a n w a t e r s Einleitung  Welches Semester? (Achtung, ich zähle durch!)  Jemand hier, der nicht an der HTW studiert?  Wollt ihr auch mal was sagen? (zum Beispiel was so ihr erwartet.) „Und die Hände zum Himmel...“ 8
  9. 9. @ s e b a s t i a n w a t e r s Unsere Ziele für heute 9 Motivierendes Bild
  10. 10. @ s e b a s t i a n w a t e r s Unsere Ziele für heute Wir wollen heute  darüber sprechen, was Konzeption ausmacht.  worin die Unterschiede liegen und wann man das Wort Usability verwenden sollte, und wann eher von Informationsarchitektur und User-Experience-Design spricht  über die Grundlagen der Konzeption sprechen  über den Berufsalltag sprechen (und über Kunden lästern)  uns danach irgendwie besser fühlen... 1 0
  11. 11. @ s e b a s t i a n w a t e r s Diese Präsentation gibt‘s später auch online. Ihr dürft gern mitschreiben, Notizen oder blöde Kommentare machen. Aber ich wird die Folien auch später auf Slideshare packen und dann könnt ihr auf Twitter über mich lästern. Oder Fragen stellen. Oder beides. Aber ihr könnt auch jederzeit während des Vortrags Fragen stellen oder wenn etwas unklar ist, den Raum verlassen. Hauptsache die Gummibärchen bleiben bei denen, die hier bis zum Schluss durchhalten. 1 1
  12. 12. Konzeption: User Experience Design, Informationsarchitektur und Usability
  13. 13. @ s e b a s t i a n w a t e r s Basics in User Experience Design, Information Architecture & Usability
  14. 14. @ s e b a s t i a n w a t e r s Basics in User Experience Design, Information Architecture & Usability
  15. 15. @ s e b a s t i a n w a t e r s Rating the ability of how to use something.
  16. 16. @ s e b a s t i a n w a t e r s 1 6 Ein Hammer hat zwei Funktionen: 1. Nagel in die Wand hauen, 2. den Nagel wieder rausziehen
  17. 17. @ s e b a s t i a n w a t e r s 1 7 Ein Autoschlüssel kann auch ne Menge: 1. Öffnen, 2. Abschließen, 3. Schlüsselanhänger
  18. 18. @ s e b a s t i a n w a t e r s 1 8 „Juicy Salif“ hat auch zwei Funktionen 1. Entsaften, 2. Tisch reinigen
  19. 19. @ s e b a s t i a n w a t e r s Web Usability
  20. 20. @ s e b a s t i a n w a t e r s 2 0 Dem Nutzer Orientierung geben – durch Navigation und Struktur
  21. 21. @ s e b a s t i a n w a t e r s 2 1 Einfach zu verstehen, erkunden und stöbern
  22. 22. @ s e b a s t i a n w a t e r s 2 2 Nutzer neue Funktionen testen und lernen lassen. Und wenn sie diese nicht sofort verstehen, Hilfe und Alternativen bieten
  23. 23. @ s e b a s t i a n w a t e r s 2 3 „Eyetracking visualizations show that users often read web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe.“ ( J a k o b N i e l s e n , 2 0 0 6 )
  24. 24. @ s e b a s t i a n w a t e r s 2 4
  25. 25. @ s e b a s t i a n w a t e r s 2 5 Bei Web Usability geht’s darum, wie man suchen, finden, stöbern und navigieren kann...
  26. 26. @ s e b a s t i a n w a t e r s 2 6 Kurzgesagt: Was, wo, wie.
  27. 27. @ s e b a s t i a n w a t e r s Rating the ability of how to use a website.
  28. 28. @ s e b a s t i a n w a t e r s Rating the ability of how to use a website.
  29. 29. @ s e b a s t i a n w a t e r s Fünf Qualitätsmerkmale von Web Usability 2 9  Erlernbarkeit Ist das Design auf den ersten Blick einfach zu verstehen?  Effizienz Wie schnell können Nutzer Aufgaben erledigen?  Einprägsamkeit Wenn Nutzer nach einiger Zeit zurückkehren, wie schnell können sie bestimmte Dinge im Design wiederfinden?  Fehlertoleranz Wie viele Fehler macht ein Nutzer und wie schnell kann er selbst eine Lösung finden?  Zufriedenheit Wie angenehm ist es das Design zu nutzen?
  30. 30. @ s e b a s t i a n w a t e r s Basics in User Experience Design, Information Architecture & Usability
  31. 31. @ s e b a s t i a n w a t e r s Basics in User Experience Design, Information Architecture & Usability
  32. 32. @ s e b a s t i a n w a t e r s Texte, Fotos, Videos, Orte, ... Wie Informationen gesammelt, zusammen- gefügt und arrangiert werden Information Architecture
  33. 33. @ s e b a s t i a n w a t e r s 3 3
  34. 34. @ s e b a s t i a n w a t e r s 3 4 Wenn man ordentlich plant, kann man tolle Sachen erschaffen.
  35. 35. @ s e b a s t i a n w a t e r s 3 5 Das kann aber auch ohne große Pläne klappen.
  36. 36. @ s e b a s t i a n w a t e r s 3 6 Oder trotz großer Pläne ziemlich schiefgehen.
  37. 37. @ s e b a s t i a n w a t e r s Basics in User Experience Design, Information Architecture & Usability
  38. 38. @ s e b a s t i a n w a t e r s Basics in User Experience Design, Information Architecture & Usability
  39. 39. @ s e b a s t i a n w a t e r s 3 9 Das Salz in der Suppe.
  40. 40. @ s e b a s t i a n w a t e r s der Nutzer Wie der Nutzer die Suppe und das Salz empfindet User DesignExperience Wie wir das Salz für die Suppe (und den Nutzer) gestalten
  41. 41. @ s e b a s t i a n w a t e r s 4 1 „Man kann nicht nicht kommunizieren.“ – P a u l W a t z l a w i c k
  42. 42. @ s e b a s t i a n w a t e r s 4 2
  43. 43. @ s e b a s t i a n w a t e r s 4 3
  44. 44. @ s e b a s t i a n w a t e r s Kontext Sobald man kommuniziert, empfindet man etwas Wie Informationen verarbeitet werden 4 4 Man schafft, verarbeitet, löscht Informationen Dafür benutzt man ein Interface
  45. 45. @ s e b a s t i a n w a t e r s 4 5 Es gibt verschiedene Möglichkeiten ein Interface zu verbessern. K ö n n e n w i r d a s L o g o n o c h g r ö ß e r m a c h e n ?
  46. 46. @ s e b a s t i a n w a t e r s Social Interactions Teilen, kontrollieren und sein Ego fördern 4 6
  47. 47. @ s e b a s t i a n w a t e r s Gamification Eine verbesserte Experience durch spielerische Elemente 4 7
  48. 48. @ s e b a s t i a n w a t e r s Storytelling Durch Geschichten erzählen das Interesse wecken 4 8
  49. 49. @ s e b a s t i a n w a t e r s Persuasive Design Durch künstliche Verknappung oder Bewertungen reizen 4 9
  50. 50. @ s e b a s t i a n w a t e r s Don’t make users think. Make them act.
  51. 51. @ s e b a s t i a n w a t e r s Und was ist am Ende das Ziel von alledem?
  52. 52. @ s e b a s t i a n w a t e r s Happiness Leads Conversions Commitment Promotion
  53. 53. Wait, what?
  54. 54. @ s e b a s t i a n w a t e r s 5 4 Brand Experience Product Experience User Experience
  55. 55. Der berufliche Alltag
  56. 56. @ s e b a s t i a n w a t e r s Basics in User Experience Design, Information Architecture & Usability
  57. 57. @ s e b a s t i a n w a t e r s Basics in User Experience Design, Information Architecture & Usability
  58. 58. @ s e b a s t i a n w a t e r s Die drei Grundlagen 5 8 Usability Damit man sich auch mehr als Haribo leisten kann... Informations- architektur User Experience Design
  59. 59. @ s e b a s t i a n w a t e r s 5 9 User Research Remote Testing A/B Testing Uselabs UXIAUsability Content Audit Sitemaps Cardsorting Wireframes Paper Prototypes Navigation verbessern Interaction stärken Informationen anreichern Clickdummys Technische Spezifikationen Umfragen
  60. 60. @ s e b a s t i a n w a t e r s Die externe Rolle 6 0 Inhalt Nutzer Kontext zwischen Inhalt und Nutzer schaffen Usability Informations- architektur User Experience Design
  61. 61. @ s e b a s t i a n w a t e r s Die interne Rolle „Übersetzer“ zwischen Designer und Entwickler spielen 6 1 Design Dev Usability Informations- architektur User Experience Design
  62. 62. @ s e b a s t i a n w a t e r s Die typischen Arbeitsplätze Hier findet man Konzepter in freier Wildbahn 6 2 Agenturen Startups Unternehmen I n h a l t e u n d N u t z e r
  63. 63. @ s e b a s t i a n w a t e r s Werkzeuge Was man so alltäglich braucht 6 3  Sammeln, zusammenfügen und arrangieren Microsoft Word, Excel, Powerpoint, Omnigraffle, Stift und Papier  Erste Entwürfe Stift und Papier, Omnigraffle, Axure, Balsamiq, Hot Gloo  Um das Ganze mal zu testen usabilla.com, intuitionhq.com, silverbackapp.com oder ein Uselab  Um es zu verbessern Mit dem Team zusammensetzen und Ideen besprechen. Und wenn man sich nicht sicher ist, kann man es immer noch testen und ändern. Und ja, Meetings zählen für mich als Werkzeug. Meistens.
  64. 64. Gute Beispiele
  65. 65. @ s e b a s t i a n w a t e r s 6 5
  66. 66. @ s e b a s t i a n w a t e r s 6 6
  67. 67. @ s e b a s t i a n w a t e r s 6 7
  68. 68. @ s e b a s t i a n w a t e r s 6 8
  69. 69. @ s e b a s t i a n w a t e r s 6 9
  70. 70. Schlechte Beispiele
  71. 71. @ s e b a s t i a n w a t e r s 7 1
  72. 72. @ s e b a s t i a n w a t e r s 7 2
  73. 73. @ s e b a s t i a n w a t e r s 7 3
  74. 74. Fazit
  75. 75. @ s e b a s t i a n w a t e r s Kann ich das alles auch machen ohne Konzepter zu sein?
  76. 76. @ s e b a s t i a n w a t e r s Ja, jetzt gleich schon.
  77. 77. Praktischer Teil
  78. 78. @ s e b a s t i a n w a t e r s A) Card Sorting B) Storyboard C) Paper Prototype D) Wireframes
  79. 79. @ s e b a s t i a n w a t e r s A) Card Sorting B) Storyboard C) Paper Prototype D) Wireframes
  80. 80. @ s e b a s t i a n w a t e r s A) Card Sorting B) Storyboard C) Paper Prototype D) Wireframes
  81. 81. @ s e b a s t i a n w a t e r s A) Card Sorting B) Storyboard C) Paper Prototype D) Wireframes
  82. 82. @ s e b a s t i a n w a t e r s A) Card Sorting B) Storyboard C) Paper Prototype D) Wireframes
  83. 83. Quellen und so.
  84. 84. @ s e b a s t i a n w a t e r s Gedruckte Quellen  Don’t make me think!, von Steve Krug, New Riders, 2006  Playful Design, von John Ferrara, Rosenfeld Media, 2012  Storytelling for User Experience, von Whitney Quesenbery & Kevin Brooks, Rosenfeld Media, 2010  Design is a Job, von Mike Monteiro, A Book Apart, 2012  Information Architecture for the World Wide Web, von Louis Rosenfeld, O’Reilly, 2006  Branded Interactions, von Marco Spies, Schmidt Hermann Verlag, 2012  Elements of User Experience Design, von Jesse James Garrett, Addison-Wesley, 2011 Man nennt sie Bücher 8 4
  85. 85. @ s e b a s t i a n w a t e r s Online-Quellen  http://www.nngroup.com/topic/web-usability/  http://trentwalton.com/category/articles/  http://www.netmagazine.com/  http://uxmag.com/  http://www.uxbooth.com/  http://www.adaptivepath.com/  http://bradfrostweb.com/blog/  http://informationarchitects.net/blog/ Website und Blogs, die ihr lesen solltet 8 5
  86. 86. Fragen, Kritik und Kommentare @sebastianwaters
  87. 87. @ s e b a s t i a n w a t e r s Danke für die Bilder  http://www.flickr.com/photos/kheelcenter/5279838586/  http://www.flickr.com/photos/evaekeblad/2437478729/  http://www.flickr.com/photos/umpcportal/4581962986/  http://www.flickr.com/photos/laurenmanning/2395602145/ und Googles Bildersuche Bier (2), Whisky (2), Red Bull (3), Espresso (5), Post-its (83) 8 7 Unnütze Zahlen zur Präsentation Creative Commons

×