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

@ 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
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.

s
Wer steht da
eigentlich und redet?

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
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
Und wer sitzt da und
guckt gelangweilt?

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
Unsere Ziele für heute
9
Motivierendes Bild

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
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
Basics in
User Experience Design,
Information Architecture &
Usability

s
Rating the ability of
how to use something.

s 1 6
Ein Hammer hat zwei Funktionen:
1. Nagel in die Wand hauen, 2. den Nagel wieder rausziehen

s 1 7
Ein Autoschlüssel kann auch ne Menge:
1. Öffnen, 2. Abschließen, 3. Schlüsselanhänger

s 1 8
„Juicy Salif“ hat auch zwei Funktionen
1. Entsaften, 2. Tisch reinigen

s
Web Usability

s 2 0
Dem Nutzer Orientierung geben – durch Navigation und Struktur

s 2 1
Einfach zu verstehen, erkunden und stöbern

s 2 2
Nutzer neue Funktionen testen und lernen lassen. Und wenn sie diese
nicht sofort verstehen, Hilfe und Alternativen bieten

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 2 4

s 2 5
Bei Web Usability geht’s
darum, wie man suchen,
finden, stöbern und
navigieren kann...

s 2 6
Kurzgesagt:
Was, wo, wie.

s
Rating the ability of
how to use a website.

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
Texte, Fotos, Videos,
Orte, ...
Wie Informationen
gesammelt, zusammen-
gefügt und arrangiert
werden
Information Architecture

s 3 3

s 3 4
Wenn man ordentlich plant, kann man tolle Sachen erschaffen.

s 3 5
Das kann aber auch ohne große Pläne klappen.

s 3 6
Oder trotz großer Pläne ziemlich schiefgehen.

s 3 9
Das Salz in der Suppe.

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 4 1
„Man kann nicht nicht kommunizieren.“
– P a u l W a t z l a w i c k

s 4 2

s 4 3

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 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
Social Interactions
Teilen, kontrollieren und sein Ego fördern
4 6

s
Gamification
Eine verbesserte Experience durch spielerische Elemente
4 7

s
Storytelling
Durch Geschichten erzählen das Interesse wecken
4 8

s
Persuasive Design
Durch künstliche Verknappung oder Bewertungen reizen
4 9

s
Don’t make users think.
Make them act.

s
Und was ist am Ende
das Ziel von alledem?

s
Happiness
Leads
Conversions
Commitment
Promotion

s 5 4
Brand
Experience
Product
Experience
User
Experience

s
Die drei Grundlagen
5 8
Usability
Damit man sich auch mehr als Haribo leisten kann...
Informations-
architektur
User Experience
Design

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
Die externe Rolle
6 0
Inhalt Nutzer
Kontext zwischen Inhalt und Nutzer schaffen
Usability
Informations-
architektur
User Experience
Design

s
Die interne Rolle
„Übersetzer“ zwischen Designer und Entwickler spielen
6 1
Design Dev
Usability
Informations-
architektur
User Experience
Design

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

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.

s 6 5

s 6 6

s 6 7

s 6 8

s 6 9

s 7 1

s 7 2

s 7 3

s
Kann ich das alles
auch machen ohne
Konzepter zu sein?

s
Ja, jetzt gleich schon.

s
A) Card Sorting
B) Storyboard
C) Paper Prototype
D) Wireframes

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
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
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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

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

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

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