Berufsbild Konzepter (2015)

Berufsbild
KonzepterUser 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?

5
2006 2007 2008 2009 2010 2012 2014
Phase 4
20132011 2015
Nolte&Lauth Aperto
Hauptberuflicher Konzepter
Good School
Nebenberuflicher Dozent/Trainer
UXcamp Europe
Ehrenamtlicher Co-Organisator
Google
Ehrena. Mentor

Ich bin die Fusszeile 7
Foto: Aperto AG

10
Screenshot: BSH Hausgeräte GmbH

11
Screenshot: Asklepios Kliniken GmbH

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

Nur der verstandene
Nutzer wird zum
Kunden!

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 Experience
A basic duality: The Web was originally conceived as a hypertextual information space;
but the development of increasingly sophisticated front- and back-end technologies has
fostered 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 beyond
the scope of its original application. The goal of this document is to define some of these
terms within their appropriate contexts, and to clarify the underlying relationships among
these various elements.
Jesse James Garrett
jjg@jjg.net
Visual Design: graphic treatment of interface
elements (the "look" in "look-and-feel")
Information Architecture: structural design
of the information space to facilitate
intuitive access to content
Interaction Design: development of
application flows to facilitate user tasks,
defining how the user interacts with
site functionality
Navigation Design: design of interface
elements to facilitate the user's movement
through the information architecture
Information Design: in the Tuftean sense:
designing the presentation of information
to facilitate understanding
Functional Specifications: "feature set":
detailed descriptions of functionality the site
must include in order to meet user needs
User Needs: externally derived goals
for the site; identified through user research,
ethno/techno/psychographics, etc.
Site Objectives: business, creative, or other
internally derived goals for the site
Content Requirements: definition of
content elements required in the site
in order to meet user needs
Interface Design: as in traditional HCI:
design of interface elements to facilitate
user interaction with functionality
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,
graphic page elements and navigational
components
Concrete
Abstract
time
Conception
Completion
Functional
Specifications
Content
Requirements
Interaction
Design
Information
Architecture
Visual Design
Information Design
Interface Design Navigation Design
Site Objectives
User Needs
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 a
user 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

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!

Screenshot: Rijksmuseum Amsterdam

Screenshot: Liverpool City Council

Konzepter sind die Hauptverantwortlichen für
die User Experience.
43
Elements of User Experience
uality: The Web was originally conceived as a hypertextual information space;
evelopment of increasingly sophisticated front- and back-end technologies has
ts use as a remote software interface. This dual nature has led to much confusion,
xperience practitioners have attempted to adapt their terminology to cases beyond
of its original application. The goal of this document is to define some of these
hin their appropriate contexts, and to clarify the underlying relationships among
ous elements.
Jesse James Garr
jjg@jjg.
sign: graphic treatment of interface
(the "look" in "look-and-feel")
Information Architecture: structural desig
n Design: development of
on flows to facilitate user tasks,
how the user interacts with
ionality
elements to facilitate the user's movemen
al Specifications: "feature set":
descriptions of functionality the site
ude in order to meet user needs
ds: externally derived goals
e; identified through user research,
hno/psychographics, etc.
ctives: business, creative, or other
derived goals for the site
Design: as in traditional HCI:
interface elements to facilitate
action with functionality
on Design: in the Tuftean sense:
the presentation of information
te understanding
software interface Web as hypertext syst
components
Concrete
Abstract
time
Conception
Completion
Functional
Specifications
Content
Requirements
Interaction
Design
Information
Architecture
Visual Design
Information Design
Site Objectives
User Needs
for the site; identified through user resear
Site Objectives: business, creative, or oth
ented information-orien
30 March 20

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

47
...mal zusammen mit Kollegen aus anderen Disziplinen.
Foto: Aperto AG

48
Beim Kunden präsentieren wir Ideen und Lösungen...
Foto: Stefan Freimark

49
...oder moderieren Workshops.

50
Auch nach Vor-Ort-Terminen gibt es immer wieder Abstimmungen.

Wir erstellen verschiedene
Arbeitsergebnisse.

Wir erstellen verschiedene Arbeitsergebnisse.
52
Übersichten
Vergleich von MVV-Zeitkarten
IsarCard-Woche
IsarCard-Monat
IsarCardAbo
IsarCard9Uhr
IsarCard9UhrimAbo
IsarCard60
IsarCard60imAbo
AusbildungstarifI+II
IsarCardJob
AboPlusCard
IsarCard-Woche
IsarCard-Monat
IsarCardAbo
IsarCard9Uhr
IsarCard9UhrimAbo
IsarCard60
IsarCard60imAbo
AusbildungstarifI+II
IsarCardJob
AboPlusCard
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
oder Gesamtnetz
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 KombinationPreis 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
Automanten
Bestellung
Automanten
Bestellung
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
("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 KundenkarteBesonderheit 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 (freimark@phase4.de)

53
Inhaltsstrukturen
Screenshot: Stefan Freimark

54
Skizzen
Scan: Stefan Freimark

55
Wireframes

56
Präsentationen

57
Dokumentation

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

60
Bildungswesen
Foto: commons.wikimedia.org/wiki/File:Vorlesung_Uni_Aachen.JPG

61
Ministerien und Behörden
Foto: flickr.com/photos/manoftaste-de/9786409793 + manoftaste.de (Christian Schnettelker)

62
Nutzfahrzeugbranche
Foto: commons.wikimedia.org/wiki/File:Hellmann_LKW.jpg

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.

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

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

Wir sehen uns an, was Wettbewerber machen.
79

Durch Interviews lernen wir die Bedürfnisse
der Nutzer besser kennen.
Foto: flickr.com/photos/marfis75/2939337382

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

Wir überlegen, welche Inhalte zu Nutzerbe-
dürfnissen & Auftraggeberzielen passen.
86

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

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

Ersten Skizzen zeigen, wie Inhalte/Funktionen
auf den Seiten angeordnet sein könnten.
Foto: Stefan FreimarkFoto: Stefan Freimark

Die Skizzen bzw. Scribbles werden auf Papier
zu feineren Wireframes ausgearbeitet.

Bei Bedarf zeichnen wir die Wireframes mit
einer Software wie Axure oder OmniGraffle.

Auch später im Projekt haben wir mit
Informationsarchitektur zu tun.

100
Layout: Ricardo Hahn für Aperto AG

Konzepter unterstützen die Designer bei der
Produktion, indem sie den Überblick behalten.
102

Schleichen sich bei der Gestaltung Fehler ein,
geben wir konzeptionelles Feedback.
103

Die laufende Abstimmung mit Kollegen aus
anderen Disziplinen ist enorm wichtig.
104

Testing und Qualitätssicherung

In Usability-Tests überprüfen wir unsere Ideen.
Foto: flickr.com/photos/marfis75/2939337382

Bei der Qualitätssicherung (QS) prüfen wir die
fertige Website auf Fehler.
xxx
107

Technische Fehler werden in einem
Bugtracking-System wie Jira festgehalten.
Foto: flickr.com/photos/marfis75/2939337382Screenshot: Stefan Freimark

Foto: flickr.com/photos/95213174@N08/13296040014

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

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

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

Ich bin gespannt auf Ihre Fragen!
123
Foto: flickr.com/photos/highwaysagency/6032691030 (Highways Agency)

Danke
Stefan Freimark Senior-Konzepter
E-Mail stefan.freimark@aperto.de
Slideshare slideshare.net/sfreimark
Twitter @freimark
Aperto AG – In der Pianofabrik
Chausseestr. 5
10115 Berlin
www.aperto.de

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
Papier-Wireframe Bereichsübersichtsseite
Ricardo Hahn für Aperto AG
Erster Design-Entwurf
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
Mixabest
commons.wikimedia.org/wiki/
File:KUKA_Industrial_Robots_IR.jpg
BY-SA 2.0
Trexer
File:Vorlesung_Uni_Aachen.JPG
BY-SA 2.0
AHolzmann
File:Hellmann_LKW.jpg
BY-SA 2.0
Lasse Fuss
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
File:US_Navy_060203-
N-7711S-004_Hospital_Corpsman_3rd_Class
_Justin_Brock_assists_during_a_hernia_oper
ation_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 Experience
A basic duality: The Web was originally conceived as a hypertextual information space;
but the development of increasingly sophisticated front- and back-end technologies has
fostered 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 beyond
the scope of its original application. The goal of this document is to define some of these
terms within their appropriate contexts, and to clarify the underlying relationships among
these various elements.
Jesse James Garrett
jjg@jjg.net
Visual Design: graphic treatment of interface
elements (the "look" in "look-and-feel")
Information Architecture: structural design
Interaction Design: development of
application flows to facilitate user tasks,
defining how the user interacts with
site functionality
elements to facilitate the user's movement
Functional Specifications: "feature set":
detailed descriptions of functionality the site
must include in order to meet user needs
Interface Design: as in traditional HCI:
design of interface elements to facilitate
user interaction with functionality
Web as software interface Web as hypertext system
components
Concrete
Abstract
time
Conception
Completion
Functional
Specifications
Content
Requirements
Interaction
Design
Information
Architecture
Visual Design
Information Design
Site Objectives
User Needs
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 a
user 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
File:Human_evolution.svg

Screenshots von verschiedenen
Rechteinhabern
136
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

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

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

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

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

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

Berufsbild Konzepter (2015)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Berufsbild Konzepter (2015)

Ähnlich wie Berufsbild Konzepter (2015) (20)

Mehr von Stefan Freimark

Mehr von Stefan Freimark (11)

Berufsbild Konzepter (2015)