Berufsbild Konzepter User Experience in der Praxis
bd Creative Commons Lizenz für diese Präsentation. Für verwendete Bilder gelten abweichende Lizenzen oder sie sind urheberrechtlich geschützt.
Themen
2
Wer ist Aperto?
Was ist User Experience?
Was macht ein Konzepter?
Der Arbeitsalltag anhand eines Beispiels
Wie wird man Konzepter?
Aktuelle Themen und Trends
01
02
03
04
05
06
? ? Wer von Ihnen hat denn schon mal vom Beruf „Konzepter“ gehört?
Foto: Stefan Freimark
5
2006 2007 2008 2009 2010 2012 2014
Phase 4
2013 2011 2015
Nolte&Lauth Aperto
Hauptberuflicher Konzepter
Good School
Nebenberuflicher Dozent/Trainer
UXcamp Europe
Ehrenamtlicher Co-Organisator
Ehrena. Mentor
Wer ist Aperto?
Ich bin die Fusszeile 7 Foto: Aperto AG
Ich bin die Fusszeile 8
9 Screenshot: RWTH Aachen
10 Screenshot: BSH Hausgeräte GmbH
11 Screenshot: Asklepios Kliniken GmbH
Was ist User Experience?
slideshare.net/Hienadz.Drahun/50-visual-definitions-of-user-experience
Foto: flickr.com/photos/sfreimark/16061812244
„ „ User experience (UX) is the way a person feels about using a product, system or service. Englische Wikipedia
2004, Peter Morville semanticstudios.com/user_experience_design
Gute UX unterstützt Nutzer bei der Erledigung ihrer Aufgaben.
17
Über ein Produkt informieren
Preise recherchieren
Produkt/Service bestellen
Weitere Informationen
anfordern
Supportinfos finden
Mit Gleichgesinnten austauschen
Öffnungszeiten nachschlagen
Ansprechpartner finden
Neuigkeiten abfragen
An einer Diskussion beteiligen
Termin vereinbaren
Sich beschweren
Chatten
Inspirieren lassen, stöben
Gute UX unterstützt Nutzer bei der Erledigung ihrer Aufgaben.
18
SIM-Lock entfernen
Studienbeginn nachschlagen
Über einen Krankheitsverlauf
informieren
Kinokarten reservieren
Updates herunterladen
Eine Veranstaltung organisieren
Eine Reise planen
Eine Rezension schreiben
Podcast abonnieren
Über ein Produkt informieren
Preise recherchieren
Produkt/Service bestellen
Weitere Informationen
anfordern
Supportinfos finden
Mit Gleichgesinnten austauschen
Öffnungszeiten nachschlagen
Ansprechpartner finden
Neuigkeiten abfragen
An einer Diskussion beteiligen
Termin vereinbaren
Sich beschweren
Chatten
Inspirieren lassen, stöben
Screenshot: AXA Schweiz
! Nur der verstandene Nutzer wird zum Kunden!
2004, Peter Morville semanticstudios.com/user_experience_design
valuable
Gute UX muss zu den Businesszielen unseres Auftraggebers beitragen.
Unterstützt bei...
§ Umsatz, Cross-Selling, Up-Selling
§ Aufbau/Pflege eines bestimmten Image
§ Nutzung, Lead-Generierung, Kundenbindung, Neugierde oder Vorfreude wecken
§ Weiterempfehlung, Verfassen einer positiven Rezension
§ Reduzierung von Hotline-Anfragen
§ Zufriedenheit erzeugen (z.B. durch erfolgreiche Informationssuche, intuitive oder effiziente Bedienung)
22
Gute UX muss zu den Businesszielen unseres Auftraggebers beitragen.
Vermeidet/Verringert...
§ Verwirrung und Frustration bei Nutzern
§ Kaufabbruch und Kaufreue
§ schlechte Rezensionen
§ hohes Anruferaufkommen beim Support
§ Beschwerden
23
Die UX wird durch Über-legungen auf mehreren Ebenen beeinflusst.
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
„ Design is not how it looks like. Design is how it works. Steve Jobs
Nicht so gute Beispiele...
Foto: flickr.com/photos/billjacobus1/2482521750
Foto: flickr.com/photos/nicmcphee/2053737914
Screenshot: Bundesministerium für Arbeit und Soziales
Inhalte sind nicht webgerecht aufbereitet! Nicht useable!
Screenshot: Staatliche Museen zu Berlin
„Das Pergamonmuseum wurde nach Entwürfen Alfred Messels durch Ludwig Hoffmann zwischen 1910 und 1930 errichtet. Zuvor hatte an gleicher Stelle für wenige Jahre ein kleinerer Bau gestanden. In ihm waren zunächst die bedeu-tenden Ausgrabungsfunde der Berliner Museen, wie die zwischen 1878 und 1886 geborgenen Friesplatten des Pergamonaltars, untergebracht. Ungenügende Fundamentierungen führten jedoch bald zu Schäden am Gebäude, sodass es abgerissen werden musste.“ Nicht desirable!
! Eine schlechte Nutzungserfahrung ist auch ein negatives Markenerlebnis!
Bessere Beispiele.
Screenshot: Rijksmuseum Amsterdam
Screenshot: Square, Inc.
Screenshot: Liverpool City Council
Was macht ein Konzepter?
Konzepter sind die Hauptverantwortlichen für die User Experience.
43
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
Der perfekte Beruf...
44
§ für Kreative
§ für Analytiker
§ für Neugierige
§ für Generalisten
§ für Menschen, die gerne mit anderen zusammen arbeiten
Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.
Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.
46
Mal allein...
Foto: Aperto AG
Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.
47
...mal zusammen mit Kollegen aus anderen Disziplinen.
Foto: Aperto AG
Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.
48
Beim Kunden präsentieren wir Ideen und Lösungen...
Foto: Stefan Freimark
Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.
49
...oder moderieren Workshops.
Foto: Stefan Freimark
Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.
50
Auch nach Vor-Ort-Terminen gibt es immer wieder Abstimmungen.
Foto: Stefan Freimark
Wir erstellen verschiedene Arbeitsergebnisse.
Wir erstellen verschiedene Arbeitsergebnisse.
52
Übersichten
Foto: Stefan Freimark
Vergleich von MVV-Zeitkarten
Isar
Car
d-W
oche
Isar
Car
d-M
onat
Isar
Car
dAbo
Isar
Car
d9U
hr
Isar
Car
d9U
hr im
Abo
Isar
Car
d60
Isar
Car
d60
im A
bo
Aus
bild
ungs
tarif
I +
II
Isar
Car
dJob
Abo
Plu
sCar
d
Isar
Car
d-W
oche
Isar
Car
d-M
onat
Isar
Car
dAbo
Isar
Car
d9U
hr
Isar
Car
d9U
hr im
Abo
Isar
Car
d60
Isar
Car
d60
im A
bo
Aus
bild
ungs
tarif
I +
II
Isar
Car
dJob
Abo
Plu
sCar
d
Art (Dauer) Wochenkarte Monatskarte Monats- oder Jahreskarte Monatskarte Monats- oder Jahreskarte Monatskarte Monats- oder Jahreskarte Wochen- oder Monatskarte
Jahreskarte Jahreskarte
Art (Abo) Bar Bar Abo Bar Abo Bar Abo Bar Firmen-Abo Abo
Gültigkeitsbereich je nach Anzahl der Ringe je nach Anzahl der Ringe je nach Anzahl der Ringe Innenraum, Außenraum oder Gesamtnetz
Innenraum, Außenraum oder Gesamtnetz
Innenraum, Außenraum oder Gesamtnetz
Innenraum, Außenraum oder Gesamtnetz
je nach Anzahl der Ringe je nach Anzahl der
Ringe
je nach Kombination
von Verkehrs-verbünden
Gültigkeitsdauer 1 Woche + bis 12:00 am ersten Werktag der Folgewoche
1 Monat + bis 12:00 am ersten Werktag des Folgemonats
1 Jahr 1 Monat + bis 12:00 am ersten Werktag des Folgemonats
1 Jahr 1 Monat + bis 12:00 am ersten Werktag des Folgemonats
1 Jahr 1 Woche oder 1 Monat 1 Jahr 1 Jahr
Übertragbarkeit ja ja wahlweise ja wahlweise ja wahlweise nein nein wahlweise
Mitnahme Kinder-Regelung Kinder-Regelung Kinder-Regelung Kinder-Regelung Kinder-Regelung nein nein nein Kinder-Regelung Erwachsenen-Minahme
SA + SO (4 Personen)
Ausschlusszeit nein nein nein MO-FR, 6-9 Uhr MO-FR, 6-9 Uhr MO-FR, 6-9 Uhr MO-FR, 6-9 Uhr nein nein nein
Für jeden? ja ja ja ja ja nur ab 60 nur ab 60 nein nur Firmen ja
Preis abhängig von Ringen abhängig von Ringen abhängig von Ringen + abhängig von Zonen abhängig von Zonen + abhängig von Zonen abhängig von Zonen + abhängig von Ringen + abhängig von Ringen + je nach Kombination Preis abhängig von Ringen abhängig von Ringen abhängig von Ringen + Zahlungs-intervall
abhängig von Zonen abhängig von Zonen + Zahlungs-intervall
abhängig von Zonen abhängig von Zonen + Zahlungs-intervall
abhängig von Ringen + Zahlungsintervall + Ausbildungs-tarif
abhängig von Ringen +
Rabattstufe
je nach Kombination
von Verkehrs-verbünden
Verkaufsstellen Alle Verkaufsstellen + Automanten
Alle Verkaufsstellen + Automanten
2 Abo-Center + Online-Bestellung
Alle Verkaufsstellen + Automanten
2 Abo-Center + Online-Bestellung
Alle Verkaufsstellen + Automanten
2 Abo-Center + Online-Bestellung
Alle Verkaufsstellen + Automaten [vorherige Ausstellung einer Kundenkarte nötig!]
nur Tarifabteilung nur DB-Abo-Center
Landshut
Abo möglich? nein ja [Ist Abo] ja [Ist Abo] ja [Ist Abo] nein [Ist Abo] [Ist Abo]
Zahlungsweise vor Ort vor Ort Lastschrift vor Ort Lastschrift vor Ort Lastschrift vor Ort Abrechnung über Firma Lastschrift
Zahlungsintervall wöchentlich monatlich monatlich oder jährlich monatlich monatlich oder jährlich monatlich monatlich oder jährlich wöchentlich oder monatlich
monatlich monatlich
Kündigung nötig? nein nein Ja [Abo] nein Ja [Abo] nein Ja [Abo] nein Ja [Abo] Ja [Abo]
Boni - - Carsharing + Tierpark - Carsharing + Tierpark - Carsharing + Tierpark - - Carsharing + Tierpark
Besonderheit 1 Erweiterungskarte für andere Zonen verfügbar.
Erweiterungskarte für andere Zonen verfügbar.
Erweiterungskarte für andere Zonen verfügbar.
Erweiterungskarte für andere Zonen verfügbar.
Erweiterungskarte für andere Zonen verfügbar ("grüne Jugendkarte").
Weiterer Rabatt gegenüber IsarCardAbo
Kostenlose BC25 bei pers. Abo
Besonderheit 2 Keine Fahrten in der Keine Fahrten in der Fahrten in der Sperrzeit Fahrten in der Sperrzeit Kundenkarte Besonderheit 2 Keine Fahrten in der
Sperrzeit möglich
Keine Fahrten in der
Sperrzeit möglich
Fahrten in der Sperrzeit möglich.
Fahrten in der Sperrzeit möglich.
Kundenkarte
erforderlich
Stand: 22. Juni 2007
Autor: Stefan Freimark, Phase 4 Communications GmbH ([email protected])
Wir erstellen verschiedene Arbeitsergebnisse.
53
Inhaltsstrukturen
Screenshot: Stefan Freimark
Wir erstellen verschiedene Arbeitsergebnisse.
54
Skizzen
Scan: Stefan Freimark
Wir erstellen verschiedene Arbeitsergebnisse.
55
Wireframes
Screenshot: Stefan Freimark
Wir erstellen verschiedene Arbeitsergebnisse.
56
Präsentationen
Screenshot: Stefan Freimark
Wir erstellen verschiedene Arbeitsergebnisse.
57
Dokumentation
Screenshot: Stefan Freimark
Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.
Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.
59
Automobilhersteller
Foto: commons.wikimedia.org/wiki/File:KUKA_Industrial_Robots_IR.jpg
Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.
60
Bildungswesen
Foto: commons.wikimedia.org/wiki/File:Vorlesung_Uni_Aachen.JPG
Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.
61
Ministerien und Behörden
Foto: flickr.com/photos/manoftaste-de/9786409793 + manoftaste.de (Christian Schnettelker)
Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.
62
Nutzfahrzeugbranche
Foto: commons.wikimedia.org/wiki/File:Hellmann_LKW.jpg
Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.
63
Gesundheitswesen
Foto: commons.wikimedia.org/wiki/File:US_Navy_060203-N-7711S-004_Hospital_Corpsman_3rd_Class_Justin_Brock_assists_during_a_hernia_operation_aboard_the_Nimitz-class_aircraft_carrier_USS_Ronald_Reagan_(CVN_76).jpg
Die Art des Projekts kann ebenfalls ganz unterschiedlich sein.
65 Screenshot: Volkswagen AG
66 Screenshot: Deutsche See GmbH
67 Screenshot: MAN Truck & Bus AG
68 Screenshot: Asklepios Kliniken GmbH
69
Es gibt zwei Arten von Konzeptern: werbliche Kreativkonzepter und analytische Denker.
Foto: flickr.com/photos/jdhancock/5544815161 (JD Hancock) Foto: flickr.com/photos/wilhei/109403659 (Willi Heidelbach)
Der Arbeitsalltag anhand eines Beispiels
Hinweis
Nicht alle der folgenden Arbeitsergebnisse wurden im gleichen Projekt erstellt.
71
Foto: flickr.com/photos/ddebold/5384292000
Foto: de.wikipedia.org/wiki/Datei:RWTH_Aachen_Hauptgebäude.jpg
Wir führen erste Gespräche mit dem Kunden.
75 Foto: commons.wikimedia.org/wiki/File:Air_Berlin_Boeing_737-700_D-AHXD.jpg
Wir machen uns erste Gedanken zur Vorgehensweise.
76 Foto: Stefan Freimark
Wir arbeiten uns in die Materie ein – damit wir Markt, Kunde und Produkte verstehen.
77 Foto: flickr.com/photos/gadl/320300354
In Workshops nehmen wir die Anforderungen von Stakeholdern auf.
78 Foto: Stefan Freimark
Wir sehen uns an, was Wettbewerber machen.
79 Screenshot: Stefan Freimark
Durch Interviews lernen wir die Bedürfnisse der Nutzer besser kennen.
Foto: flickr.com/photos/marfis75/2939337382 Foto: Stefan Freimark
Unsere Erkenntnisse verdichten wir in Personas.
81 Foto: Stefan Freimark. Picture of the family shown in this image: istockphoto.com/photo/cute-family-with-two-children-18670884 © iStockphoto LP
Bei der Konzeption müssen wir die User Journeys der Personas berücksichtigen.
82
Im Studium
Nach dem
Studium Vor dem Studium
Manchmal sind diese Journeys auch sehr ausführlich.
83 Grafik: Johanna Hintz, Urs Bellermann, Stefan Freimark
Aus den bisherigen Erkenntnissen ergeben sich erste Ideen.
84 Foto: Stefan Freimark
Wir überlegen, welche Inhalte zu Nutzerbe-dürfnissen & Auftraggeberzielen passen.
86 Foto: Stefan Freimark
Wir überlegen, welche Funktionen das Angebot bieten muss.
87
Unsere Ideen und Vorschläge präsentieren wir während des gesamten Prozesses.
Foto: flickr.com/photos/evanforester/6732501771
Im weiteren Verlauf arbeiten wir die Inhalts-struktur feiner aus.
90 Screenshot: Stefan Freimark
Ein paar IA-Grundlagen (1/2)
– Apfel, Banane, Birne, Obst
+ Obst: Apfel, Banane, Birne, Zitrone
91
IA = Informationsarchitektur
Einheitliche Granularität
– Berufseinstieg, International Office, Bekanntmachungen
+ Career Center, International Office, Studierendensekretariat [organisatorisch]
+ Berufseinstieg, Auslandsprogramm, Schlichtung, Organisatorisches [thematisch]
Einheitliche Semantik
Ein paar IA-Grundlagen (2/2)
– Meldungen, Mitteilungen, Bekanntmachungen
+ Meldungen, Pressemitteilungen, Amtliche Bekanntmachungen
92
IA = Informationsarchitektur
Hohe Trennschärfe
– Vor Studienbeginn, Im Studium, Abschluss – Studium & Lehre, Forschen, Wirtschaft
+ Vor dem Studium, Im Studium, Nach dem Studium [einheitlich durch Präposition + „Studium“]
+ Studium, Forschung, Wirtschaft [alles Nomen]
+ Geld anlegen, Existenz absichern, Eigentum
schützen [Nomen + Verb]
Geschlossenes Vokabular
Die Funktionen werden genau durchdacht, und in einem Flow Chart dokumentiert.
93 Screenshot: Stefan Freimark
Ersten Skizzen zeigen, wie Inhalte/Funktionen auf den Seiten angeordnet sein könnten.
Foto: Stefan Freimark Foto: Stefan Freimark
Die Skizzen bzw. Scribbles werden auf Papier zu feineren Wireframes ausgearbeitet.
Foto: Stefan Freimark Foto: Stefan Freimark
Bei Bedarf zeichnen wir die Wireframes mit einer Software wie Axure oder OmniGraffle.
Foto: Stefan Freimark Foto: Stefan Freimark
Auch später im Projekt haben wir mit Informationsarchitektur zu tun.
Foto: Stefan Freimark Foto: Stefan Freimark
100 Layout: Ricardo Hahn für Aperto AG
101 Screenshot: RWTH Aachen
Konzepter unterstützen die Designer bei der Produktion, indem sie den Überblick behalten.
102 Screenshot: Stefan Freimark
Schleichen sich bei der Gestaltung Fehler ein, geben wir konzeptionelles Feedback.
103 Foto: Stefan Freimark
Die laufende Abstimmung mit Kollegen aus anderen Disziplinen ist enorm wichtig.
104 Foto: Stefan Freimark
Testing und Qualitätssicherung
In Usability-Tests überprüfen wir unsere Ideen.
Foto: flickr.com/photos/marfis75/2939337382 Foto: Stefan Freimark
Bei der Qualitätssicherung (QS) prüfen wir die fertige Website auf Fehler.
xxx
107 Screenshot: Stefan Freimark
Technische Fehler werden in einem Bugtracking-System wie Jira festgehalten.
Foto: flickr.com/photos/marfis75/2939337382 Screenshot: Stefan Freimark
Foto: flickr.com/photos/95213174@N08/13296040014
Wie wird man Konzepter?
Ausbildungen unserer Konzepter
111
§ Ausbildung zum Bankkaufmann + Weiterbildung Medienproduktion
§ Studium: Medienmanagement
§ Studium: Publizistik (Kommunikationswissenschaft)
§ Studium: Kommunikationsdesign
§ Studium: Publizistik & Amerikanistik
§ Studium: Gesellschafts- und Wirtschaftskommunikation
§ Studium: Neuere Deutsche Literatur, Philosophie, Soziologie
§ Studium: B.A. Integrated Design + MFA Interaction Design
§ Ausbildung zur Mediengestalterin Digital und Print
§ Ausbildung zum Facharbeiter für Offset-Drucktechnik + FH-Studium Medientechnik
§ Ausbildung zur Werbekauffrau, M.A. Politikwissenschaft & Geschichte
§ Studium Computerlinguistik und Anglistik
„Konzepter brauchen Neugier und Mut.“
112
Andrej Balaz
Foto mit freundlicher Genehmigung zur Verfügung gestellt von Andrej Balaz.
„Konzepter brauchen Neugier und Mut.“
113
Andrej Balaz
Foto mit freundlicher Genehmigung zur Verfügung gestellt von Andrej Balaz.
Und:
§ abstraktes Denkvermögen
§ methodische Vorgehensweise
§ Lust, in Strukturen, Prozessen und Systemen/Zusammenhängen zu denken
§ Empathie/Einfühlungsvermögen
§ Fähigkeit, komplizierte Zusammen-hänge zu erklären
Berufseinstieg
114 Foto: Stefan Freimark
Verdienstmöglichkeiten Bruttogehalt pro Monat (2015)
115
Erfahrungsstufe Berufserfahrung (ca.) Gehalt (ca.)
Director / Principal > 10 Jahre Berufserfahrung, oft mit Führungsverantwortung
> 6.000 €
Senior > 5 Jahre Berufserfahrung, Verantwortung für große Projekte
4.000 – 5.000 €
Mid-Level 2-4 Jahre Berufserfahrung als Konzepter, Verantwortung für kleine Projekte oder Teilprojekte
2.800 – 3.500 €
Junior Abgeschlossenes Studium in relevanter Fachrichtung
2.200 – 2.800 €
Trainee Erste Berührungspunkte, z.B. durch Studium oder Praktika
ca. 1.500 €
Werkstudent Erste Berührungspunkte, z.B. durch Studium oder Praktika
ca. 10-12 € pro Stunde
Es gibt noch andere Berufsbezeichnungen.
116
Generalisten:
§ Konzeptioner
§ User Experience Designer
Engere Tätigkeitsfelder:
§ User Researcher
§ Usability Professional
§ Informationsarchitekt
§ Interaction Designer
Es gibt Berufe/Rollen, die Ähnlichkeiten mit Konzeptern haben.
117
§ Produktmanager
§ Product Owner
Aktuelle Themen und Trends
User Experience gewinnt an Bedeutung.
119 Grafik: commons.wikimedia.org/wiki/File:Human_evolution.svg
Service Design und Customer Experience sind die nächsthöhere Stufe.
120 Grafik: flickr.com/photos/brandonschauer/3363169836/
Durch neue Geräte steigt die Komplexität.
121 Foto: Stefan Freimark
Ich bin gespannt auf Ihre Fragen!
123 Foto: flickr.com/photos/highwaysagency/6032691030 (Highways Agency)
! ! Danke Stefan Freimark Senior-Konzepter E-Mail [email protected] Slideshare slideshare.net/sfreimark Twitter @freimark Aperto AG – In der Pianofabrik Chausseestr. 5 10115 Berlin www.aperto.de
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
Bildnachweise
Lizenzen und Bildrechte
Diese Präsentation ist unter CC BY-SA lizenziert: www.creativecommons.org/licenses/by-sa/2.0
Sie können sie in ihrer Gesamtheit nutzen, kopieren, weitergeben, senden, etc. – oder Teile und Ideen daraus z.B. für eigene Vorträge verwenden.
Bitte beachten Sie, dass das Foliendesign dem Urheberrecht der Aperto AG unterliegt.
Bitte beachten Sie, dass Fotos, Layouts, Grafiken und Diagramme innerhalb dieser Präsentation nicht die CC BY-SA-Lizenz des Gesamtwerks erben. Zwar sind einige Bilder ebenfalls unter dieser Lizenz verfügbar, jedoch gelten auch abweichende Rechte – teilweise sind sie auch urheberrechtlich geschützt und dürfen nicht frei verwendet werden. Details finden Sie auf den folgenden Seiten.
127
Fotos aus dem Website-Projekt für die RWTH Aachen – mit freundlicher Genehmigung
128
© RWTH Aachen
Stefan Freimark für Aperto AG Scribble Bereichsübersichtsseite
Stefan Freimark für Aperto AG Papier-Wireframe Bereichsübersichtsseite
Ricardo Hahn für Aperto AG Erster Design-Entwurf
Stefan Freimark für Aperto AG Axure-Wireframes
Ricardo Hahn für Aperto AG Finales Design Bühnenbild: © CERN
Flickr-Fotos
129
b Lizenzinformation: www.creativecommons.org/licenses/by/2.0
Scott www.flickr.com/photos/lunchtimemama/110765169 BY 2.0
skyseeker www.flickr.com/photos/skyseeker/14330266 BY 2.0
Christian Schnettelker www.flickr.com/photos/manoftaste-de/9786409793 www.manoftaste.de BY 2.0
Willi Heidelbach www.flickr.com/photos/wilhei/109403659 BY 2.0
JD Hancock www.flickr.com/photos/jdhancock/5544815161 BY 2.0
Don DeBold www.flickr.com/photos/ddebold/5384292000 BY 2.0
Flickr-Fotos
130
b Lizenzinformation: www.creativecommons.org/licenses/by/2.0
Evan Forester www.flickr.com/photos/evanforester/6732501771 BY 2.0
Highways England www.flickr.com/photos/highwaysagency/6032691030 BY 2.0
Bill Jacobus www.flickr.com/photos/billjacobus1/2482521750 BY 2.0
Flickr-Fotos
131
ba Lizenzinformation: www.creativecommons.org/licenses/by-sa/2.0
blu-news.org www.flickr.com/photos/95213174@N08/13296040014 BY-SA 2.0
brandon schauer www.flickr.com/photos/brandonschauer/3363169836/ BY-SA 2.0
Alexandre Duret-Lutz www.flickr.com/photos/gadl/32030035 BY-SA 2.0
Nic McPhee www.flickr.com/photos/nicmcphee/2053737914 BY-SA 2.0
Wikimedia Commons
132
ba Lizenzinformation: www.creativecommons.org/licenses/by-sa/2.0
Mixabest commons.wikimedia.org/wiki/File:KUKA_Industrial_Robots_IR.jpg BY-SA 2.0
Trexer commons.wikimedia.org/wiki/File:Vorlesung_Uni_Aachen.JPG BY-SA 2.0
AHolzmann commons.wikimedia.org/wiki/File:Hellmann_LKW.jpg BY-SA 2.0
Lasse Fuss commons.wikimedia.org/wiki/File:Air_Berlin_Boeing_737-700_D-AHXD.jpg BY-SA 2.0
Wikimedia Commons
133
Public Domain
U.S. Navy photo by Photographer's Mate Airman Christine Singh commons.wikimedia.org/wiki/File:US_Navy_060203-N-7711S-004_Hospital_Corpsman_3rd_Class_Justin_Brock_assists_during_a_hernia_operation_aboard_the_Nimitz-class_aircraft_carrier_USS_Ronald_Reagan_(CVN_76).jpg
Fotos von verschiedenen Rechteinhabern
134
© der jeweiligen Rechteinhaber
Andrej Balaz Foto mit freundlicher Genehmigung zur Verfügung gestellt von Andrej Balaz.
Karten, Diagramme und Grafiken
135
© Verschiedene Rechteinhaber
The Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered its use as a remote software interface. This dual nature has led to much confusion,as user experience practitioners have attempted to adapt their terminology to cases beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
© OpenStreetMap-Mitwirkende Die OpenStreetMap basiert auf Daten, die unter der Open Data Commons Open Database Lizenz (ODbL) verfügbar sind. www.opendatacommons.org/licenses/odbl/ Die Kartografie und die Dokumentation sind unter der Lizenz (CC BY-SA) verfügbar. www.creativecommons.org/licenses/by-sa/2.0/
Jesse James Garrett www.jjg.net/elements/pdf/elements.pdf
Stefan Freimark PowerPoint-Formelemente, die auf dem Diagramm von Jesse James Garrett basieren.
Peter Morville www.semanticstudios.com/user_experience_design
Johanna Hintz, Urs Bellermann, Stefan Freimark für Aperto AG www.slideshare.net/aperto/gibet-workshop-mental-model www.hochschulmarketing-magazin.de/mental-models/
Tkgd2007 commons.wikimedia.org/wiki/File:Human_evolution.svg
Screenshots von verschiedenen Rechteinhabern
136
© der jeweiligen Rechteinhaber
MAN Truck & Bus AG www.truck.man.eu
BSH Hausgeräte GmbH www.siemens-home.de
Volkswagen AG www.rallytheworld.com
Asklepios Kliniken GmbH www.asklepios.de/hamburg/harburg/
Deutsche See GmbH www.deutschesee.de
Screenshots von verschiedenen Rechteinhabern
137
© der jeweiligen Rechteinhaber
Rijksmuseum Amsterdam www.rijksmuseum.nl/en
Liverpool City Council www.liverpool.gov.uk
Square, Inc. www.squareup.com
Staatliche Museen zu Berlin www.smb.museum/museen-und-einrichtungen/pergamonmuseum/home.html
Screenshots von verschiedenen Rechteinhabern
138
© der jeweiligen Rechteinhaber
Hienadź "Gena" Drahun www.slideshare.net/Hienadz.Drahun/50-visual-definitions-of-user-experience
AXA Schweiz www.axa-winterthur.ch
Bundesministerium für Arbeit und Soziales www.bmas.de
Screenshots/Scans von Stefan Freimark
139
ba
Stefan Freimark Foliensortierung in PowerPoint 2011
Stefan Freimark Inhaltsstruktur in Excel 2011
Lizenzinformation: www.creativecommons.org/licenses/by-sa/2.0
Stefan Freimark Screenliste eines Beispielprojekts
Stefan Freimark Layout-Korrektur eines Beispielprojekts Screenshot: © osCommerce
Screenshots/Scans von Stefan Freimark
140
©
Stefan Freimark Benchmarkanalyse. Screenshot: © Imperial College London
Stefan Freimark Flow Chart
Stefan Freimark Skizze/Scribble
Stefan Freimark Notizen in der Projektanbahnungsphase
Stefan Freimark Dokumentation in Atlassian Confluence
Stefan Freimark Wireframe in Axure RP 6.5
Screenshots/Scans von Stefan Freimark
141
©
Stefan Freimark Qualitätssicherung
Stefan Freimark Bugtracking in Jira
Fotos von Aperto
142
© Aperto AG
Aperto AG Innenhof
Aperto AG Konzepter bei der Arbeit DSC_1499.JPG
Aperto AG Team-Diskussion DSC_1726.JPG Einverständnis der Abgebildeten liegt vor.
Fotos von Stefan Freimark
143
ba Lizenzinformation: www.creativecommons.org/licenses/by-sa/2.0
Stefan Freimark Telefonkonferenz
Stefan Freimark Übung in internem Konzeptionsworkshop
Stefan Freimark Job-Board bei einer Aperto-Veranstaltung
Stefan Freimark Apple Watch im Apple Store Kurfürstendamm
Stefan Freimark Fensterplatz 73C an Bord einer Singapore Airlines A380 www.flickr.com/photos/sfreimark/16061812244
Fotos von Stefan Freimark
144
©
Stefan Freimark Visitenkarte Design der Visitenkarte: © Aperto AG
Stefan Freimark Titelfolie einer Präsentation Design der Vorlage: © Aperto AG
Stefan Freimark Workshop-Ergebnis
Stefan Freimark Interview-Situation Einverständnis der Abgebildeten liegt vor.
Stefan Freimark Workshop-Ergebnis (Personas) Foto der Familie auf dem Blatt: www.istockphoto.com/photo/cute-family-with-two-children-18670884 © AngiePhotos
Stefan Freimark Whiteboard-Notizen
Fotos von Stefan Freimark
145
©
Stefan Freimark Diskussion zwischen Frontend und Konzept. Einverständnis der Abgebildeten liegt vor.
Stefan Freimark Usability-Test Einverständnis der Abgebildeten liegt vor.