SlideShare ist ein Scribd-Unternehmen logo
1 von 87
Downloaden Sie, um offline zu lesen
@ 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 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 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 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...
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ä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 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.
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 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

Weitere ähnliche Inhalte

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

Human Interface Guidelines für Enterprise 2.0
Human Interface Guidelines für Enterprise 2.0Human Interface Guidelines für Enterprise 2.0
Human Interface Guidelines für Enterprise 2.0Jens Scholz
 
Sitecore Digital Trendspot 2013 – Das Ende vom Anfang des digitalen Marketing
Sitecore Digital Trendspot 2013 – Das Ende vom Anfang des digitalen MarketingSitecore Digital Trendspot 2013 – Das Ende vom Anfang des digitalen Marketing
Sitecore Digital Trendspot 2013 – Das Ende vom Anfang des digitalen MarketingNamics – A Merkle Company
 
Das Ende vom Anfang des digitalen Marketing @ SDT2013
Das Ende vom Anfang des digitalen Marketing @ SDT2013Das Ende vom Anfang des digitalen Marketing @ SDT2013
Das Ende vom Anfang des digitalen Marketing @ SDT2013Yann Wanner
 
Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017eResult_GmbH
 
Verhaltensänderung speichern? Über persuasives Webdesign
Verhaltensänderung speichern? Über persuasives WebdesignVerhaltensänderung speichern? Über persuasives Webdesign
Verhaltensänderung speichern? Über persuasives WebdesignSebastian Deterding
 
Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?Bogo Vatovec
 
Vortrag das agile mindset borisglogerconsulting
Vortrag das agile mindset borisglogerconsultingVortrag das agile mindset borisglogerconsulting
Vortrag das agile mindset borisglogerconsultingHelene Valadon
 
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...Carsten Rasche
 
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...eparo GmbH
 
Innovation im Mittelstand -Veranstaltungs Slides
Innovation im Mittelstand -Veranstaltungs SlidesInnovation im Mittelstand -Veranstaltungs Slides
Innovation im Mittelstand -Veranstaltungs SlidesMela Chu
 
Game ux handout - Susan Hartmann
Game ux handout -  Susan HartmannGame ux handout -  Susan Hartmann
Game ux handout - Susan HartmannEvgeny Becker
 
eparo – IA und agile Softwareentwicklung verbinden (Vortrag IA-Konferenz 2009...
eparo – IA und agile Softwareentwicklung verbinden (Vortrag IA-Konferenz 2009...eparo – IA und agile Softwareentwicklung verbinden (Vortrag IA-Konferenz 2009...
eparo – IA und agile Softwareentwicklung verbinden (Vortrag IA-Konferenz 2009...eparo GmbH
 
Usability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
Usability-Trends 2014 - Worauf es ankommt bei der Online-PräsenzUsability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
Usability-Trends 2014 - Worauf es ankommt bei der Online-Präsenzuserfeedback
 
UX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, PrototypingUX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, PrototypingMaria Mory
 
mediaman beim UX Camp HH 2013
mediaman beim UX Camp HH 2013mediaman beim UX Camp HH 2013
mediaman beim UX Camp HH 2013mediaman
 
reqorder overview
reqorder overviewreqorder overview
reqorder overviewreqorder
 
Dnug05 2011 twenty-one_v1.0
Dnug05 2011 twenty-one_v1.0Dnug05 2011 twenty-one_v1.0
Dnug05 2011 twenty-one_v1.0TwentyOne AG
 
Design Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeDesign Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeWolf Brüning
 

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

Human Interface Guidelines für Enterprise 2.0
Human Interface Guidelines für Enterprise 2.0Human Interface Guidelines für Enterprise 2.0
Human Interface Guidelines für Enterprise 2.0
 
Sitecore Digital Trendspot 2013 – Das Ende vom Anfang des digitalen Marketing
Sitecore Digital Trendspot 2013 – Das Ende vom Anfang des digitalen MarketingSitecore Digital Trendspot 2013 – Das Ende vom Anfang des digitalen Marketing
Sitecore Digital Trendspot 2013 – Das Ende vom Anfang des digitalen Marketing
 
Das Ende vom Anfang des digitalen Marketing @ SDT2013
Das Ende vom Anfang des digitalen Marketing @ SDT2013Das Ende vom Anfang des digitalen Marketing @ SDT2013
Das Ende vom Anfang des digitalen Marketing @ SDT2013
 
Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017Conversational ux eresult-kundenevent-muenchen_10-2017
Conversational ux eresult-kundenevent-muenchen_10-2017
 
Verhaltensänderung speichern? Über persuasives Webdesign
Verhaltensänderung speichern? Über persuasives WebdesignVerhaltensänderung speichern? Über persuasives Webdesign
Verhaltensänderung speichern? Über persuasives Webdesign
 
Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?Wieviel Facebook braucht ein Unternehmen?
Wieviel Facebook braucht ein Unternehmen?
 
Vortrag das agile mindset borisglogerconsulting
Vortrag das agile mindset borisglogerconsultingVortrag das agile mindset borisglogerconsulting
Vortrag das agile mindset borisglogerconsulting
 
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...
Vortrag Das Agile Mindset borisglogerconsulting - Agilen-Konferenz – Frankfur...
 
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
eparo – Online-Konzeption (Vortrag ADC Young Masters 2012 – Rolf Schulte Stra...
 
Innovation im Mittelstand -Veranstaltungs Slides
Innovation im Mittelstand -Veranstaltungs SlidesInnovation im Mittelstand -Veranstaltungs Slides
Innovation im Mittelstand -Veranstaltungs Slides
 
Game ux handout - Susan Hartmann
Game ux handout -  Susan HartmannGame ux handout -  Susan Hartmann
Game ux handout - Susan Hartmann
 
eparo – IA und agile Softwareentwicklung verbinden (Vortrag IA-Konferenz 2009...
eparo – IA und agile Softwareentwicklung verbinden (Vortrag IA-Konferenz 2009...eparo – IA und agile Softwareentwicklung verbinden (Vortrag IA-Konferenz 2009...
eparo – IA und agile Softwareentwicklung verbinden (Vortrag IA-Konferenz 2009...
 
Das Ende der Karriere
Das Ende der KarriereDas Ende der Karriere
Das Ende der Karriere
 
Usability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
Usability-Trends 2014 - Worauf es ankommt bei der Online-PräsenzUsability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
Usability-Trends 2014 - Worauf es ankommt bei der Online-Präsenz
 
UX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, PrototypingUX Methoden, Costumer Journey, Prototyping
UX Methoden, Costumer Journey, Prototyping
 
mediaman beim UX Camp HH 2013
mediaman beim UX Camp HH 2013mediaman beim UX Camp HH 2013
mediaman beim UX Camp HH 2013
 
reqorder overview
reqorder overviewreqorder overview
reqorder overview
 
Scrum4Schools - Die Rettung des Schulsystems
Scrum4Schools - Die Rettung des SchulsystemsScrum4Schools - Die Rettung des Schulsystems
Scrum4Schools - Die Rettung des Schulsystems
 
Dnug05 2011 twenty-one_v1.0
Dnug05 2011 twenty-one_v1.0Dnug05 2011 twenty-one_v1.0
Dnug05 2011 twenty-one_v1.0
 
Design Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und PflegeDesign Pattern Libraries, Aufzucht und Pflege
Design Pattern Libraries, Aufzucht und Pflege
 

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.
  • 3. Eine ganz kurze Einleitung
  • 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
  • 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. @ s e b a s t i a n w a t e r s Basics in User Experience Design, Information Architecture & Usability
  • 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. @ 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. @ 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. @ 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. @ s e b a s t i a n w a t e r s Web Usability
  • 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 )
  • 24. @ s e b a s t i a n w a t e r s 2 4
  • 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
  • 33. @ s e b a s t i a n w a t e r s 3 3
  • 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
  • 42. @ s e b a s t i a n w a t e r s 4 2
  • 43. @ s e b a s t i a n w a t e r s 4 3
  • 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
  • 54. @ s e b a s t i a n w a t e r s 5 4 Brand Experience Product Experience User Experience
  • 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.
  • 65. @ s e b a s t i a n w a t e r s 6 5
  • 66. @ s e b a s t i a n w a t e r s 6 6
  • 67. @ s e b a s t i a n w a t e r s 6 7
  • 68. @ s e b a s t i a n w a t e r s 6 8
  • 69. @ s e b a s t i a n w a t e r s 6 9
  • 71. @ s e b a s t i a n w a t e r s 7 1
  • 72. @ s e b a s t i a n w a t e r s 7 2
  • 73. @ s e b a s t i a n w a t e r s 7 3
  • 74. Fazit
  • 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. @ s e b a s t i a n w a t e r s Ja, jetzt gleich schon.
  • 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. @ 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. @ 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. @ 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. @ 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
  • 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
  • 86. Fragen, Kritik und Kommentare @sebastianwaters
  • 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