Embed Size (px)
Citation preview
@ 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
@ 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.
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-
Designer? Interfacedesigner? Interaction-Designer?)
Klugscheißer, Besserwisser und Profi-Nörgler
Der Typ, der steht und spricht...
5
@ 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
@ 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 HTW studiert?
Wollt ihr auch mal was sagen? (zum Beispiel was so ihr erwartet.)
„Und die Hände zum Himmel...“
8
@ 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.
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
@ 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
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 rausziehen
@ 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 Funktionen1. 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 verstehen, Hilfe und Alternativen bieten
@ 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 )
@ 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 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?
@ 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 arrangiert
werden
Information Architecture
@ 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 das Salz für
die Suppe (und den
Nutzer) gestalten
@ 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
4 4
Man schafft, verarbeitet, löscht Informationen
Dafür benutzt man ein Interface
@ 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 ?
@ s e b a s t i a n w a t e r
s
Social InteractionsTeilen, kontrollieren und sein Ego fördern
4 6
@ s e b a s t i a n w a t e r
s
GamificationEine verbesserte Experience durch spielerische Elemente
4 7
@ s e b a s t i a n w a t e r
s
StorytellingDurch Geschichten erzählen das Interesse wecken
4 8
@ s e b a s t i a n w a t e r
s
Persuasive DesignDurch 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
ProductExperience
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...
Informations-architektur
User Experience Design
@ 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
@ 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
@ 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
@ s e b a s t i a n w a t e r
s
Die typischen ArbeitsplätzeHier 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
@ s e b a s t i a n w a t e r
s
WerkzeugeWas 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.
Gute Beispiele
Schlechte Beispiele
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 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
@ 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
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.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
