@ 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...
@ 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 Unterschied...
Eine ganz kurze Einleitung
@ s e b a s t i a n w a t e r
s
Wer steht da
eigentlich und redet?
@ s e b a s t i a n w a t e r
s
Einleitung
 Name: Sebastian
 Beruf: Konzepter (Informationsarchitekt? User-Experience-
D...
@ 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 Jah...
@ s e b a s t i a n w a t e r
s
Und wer sitzt da und
guckt gelangweilt?
@ 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...
@ s e b a s t i a n w a t e r
s
Unsere Ziele für heute
9
Motivierendes Bild
@ 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.
 wor...
@ 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...
Konzeption:
User Experience Design,
Informationsarchitektur
und Usability
@ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
@ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
@ s e b a s t i a n w a t e r
s
Rating the ability of
how to use something.
@ 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 rauszi...
@ 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
@ 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
@ s e b a s t i a n w a t e r
s
Web Usability
@ 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
@ s e b a s t i a n w a t e r
s 2 1
Einfach zu verstehen, erkunden und stöbern
@ 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 verst...
@ 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 patter...
@ s e b a s t i a n w a t e r
s 2 4
@ 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...
@ s e b a s t i a n w a t e r
s 2 6
Kurzgesagt:
Was, wo, wie.
@ s e b a s t i a n w a t e r
s
Rating the ability of
how to use a website.
@ s e b a s t i a n w a t e r
s
Rating the ability of
how to use a website.
@ 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...
@ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
@ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
@ 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 arrangie...
@ s e b a s t i a n w a t e r
s 3 3
@ 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.
@ 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.
@ 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.
@ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
@ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
@ s e b a s t i a n w a t e r
s 3 9
Das Salz in der Suppe.
@ 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 d...
@ 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
@ s e b a s t i a n w a t e r
s 4 2
@ s e b a s t i a n w a t e r
s 4 3
@ 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
...
@ 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 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
@ s e b a s t i a n w a t e r
s
Gamification
Eine verbesserte Experience durch spielerische Elemente
4 7
@ 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
@ 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
@ s e b a s t i a n w a t e r
s
Don’t make users think.
Make them act.
@ s e b a s t i a n w a t e r
s
Und was ist am Ende
das Ziel von alledem?
@ s e b a s t i a n w a t e r
s
Happiness
Leads
Conversions
Commitment
Promotion
Wait, what?
@ s e b a s t i a n w a t e r
s 5 4
Brand
Experience
Product
Experience
User
Experience
Der berufliche Alltag
@ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
@ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
@ 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...
Info...
@ 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
...
@ 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
...
@ 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
Usa...
@ 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
Sta...
@ 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
Micro...
Gute Beispiele
@ s e b a s t i a n w a t e r
s 6 5
@ s e b a s t i a n w a t e r
s 6 6
@ s e b a s t i a n w a t e r
s 6 7
@ s e b a s t i a n w a t e r
s 6 8
@ s e b a s t i a n w a t e r
s 6 9
Schlechte Beispiele
@ s e b a s t i a n w a t e r
s 7 1
@ s e b a s t i a n w a t e r
s 7 2
@ s e b a s t i a n w a t e r
s 7 3
Fazit
@ 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?
@ s e b a s t i a n w a t e r
s
Ja, jetzt gleich schon.
Praktischer Teil
@ 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
@ 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
@ 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
@ 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
@ 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
Quellen und so.
@ 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 Desig...
@ 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/cate...
Fragen, Kritik und Kommentare
@sebastianwaters
@ 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.f...
Upcoming SlideShare
Loading in …5
×

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

1,024 views

Published on

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

Published in: Design

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

×