Wie kann ich ein besserer Designer werden? (Mit Konzeption die Welt retten.)
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. @ 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.
4. @ s e b a s t i a n w a t e r
s
Wer steht da
eigentlich und redet?
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. @ 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. @ s e b a s t i a n w a t e r
s
Und wer sitzt da und
guckt gelangweilt?
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. @ s e b a s t i a n w a t e r
s
Unsere Ziele für heute
9
Motivierendes Bild
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. @ 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
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. @ 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. @ 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. @ 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 )
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. @ s e b a s t i a n w a t e r
s 2 6
Kurzgesagt:
Was, wo, wie.
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. @ 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. @ 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. @ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
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. @ 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
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. @ 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. @ 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. @ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
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. @ s e b a s t i a n w a t e r
s 3 9
Das Salz in der Suppe.
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. @ 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
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. @ 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. @ 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. @ 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. @ 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. @ 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. @ s e b a s t i a n w a t e r
s
Don’t make users think.
Make them act.
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. @ s e b a s t i a n w a t e r
s
Happiness
Leads
Conversions
Commitment
Promotion
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. @ s e b a s t i a n w a t e r
s
Basics in
User Experience Design,
Information Architecture &
Usability
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. @ 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. @ 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. @ 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. @ 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. @ 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.
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. @ 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
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