Berufsbild Konzepter (2015)

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

Transcript of Berufsbild Konzepter (2015)

Page 1: Berufsbild Konzepter (2015)

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.

Page 2: Berufsbild Konzepter (2015)

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

Page 3: Berufsbild Konzepter (2015)

? ? Wer von Ihnen hat denn schon mal vom Beruf „Konzepter“ gehört?

Page 4: Berufsbild Konzepter (2015)

Foto: Stefan Freimark

Page 5: Berufsbild Konzepter (2015)

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

Google

Ehrena. Mentor

Page 6: Berufsbild Konzepter (2015)

Wer ist Aperto?

Page 7: Berufsbild Konzepter (2015)

Ich bin die Fusszeile 7 Foto: Aperto AG

Page 8: Berufsbild Konzepter (2015)

Ich bin die Fusszeile 8

Page 9: Berufsbild Konzepter (2015)

9 Screenshot: RWTH Aachen

Page 10: Berufsbild Konzepter (2015)

10 Screenshot: BSH Hausgeräte GmbH

Page 11: Berufsbild Konzepter (2015)

11 Screenshot: Asklepios Kliniken GmbH

Page 12: Berufsbild Konzepter (2015)

Was ist User Experience?

Page 13: Berufsbild Konzepter (2015)

slideshare.net/Hienadz.Drahun/50-visual-definitions-of-user-experience

Page 14: Berufsbild Konzepter (2015)

Foto: flickr.com/photos/sfreimark/16061812244

Page 15: Berufsbild Konzepter (2015)

„ „ User experience (UX) is the way a person feels about using a product, system or service. Englische Wikipedia

Page 16: Berufsbild Konzepter (2015)

2004, Peter Morville semanticstudios.com/user_experience_design

Page 17: Berufsbild Konzepter (2015)

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

Page 18: Berufsbild Konzepter (2015)

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

Page 19: Berufsbild Konzepter (2015)

Screenshot: AXA Schweiz

Page 20: Berufsbild Konzepter (2015)

! Nur der verstandene Nutzer wird zum Kunden!

Page 21: Berufsbild Konzepter (2015)

2004, Peter Morville semanticstudios.com/user_experience_design

valuable

Page 22: Berufsbild Konzepter (2015)

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

Page 23: Berufsbild Konzepter (2015)

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

Page 24: Berufsbild Konzepter (2015)

Die UX wird durch Über-legungen auf mehreren Ebenen beeinflusst.

Page 25: Berufsbild Konzepter (2015)

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/

Page 26: Berufsbild Konzepter (2015)
Page 27: Berufsbild Konzepter (2015)

„ Design is not how it looks like. Design is how it works. Steve Jobs

Page 28: Berufsbild Konzepter (2015)

Nicht so gute Beispiele...

Page 29: Berufsbild Konzepter (2015)

Foto: flickr.com/photos/billjacobus1/2482521750

Page 30: Berufsbild Konzepter (2015)

Foto: flickr.com/photos/nicmcphee/2053737914

Page 31: Berufsbild Konzepter (2015)

Screenshot: Bundesministerium für Arbeit und Soziales

Page 32: Berufsbild Konzepter (2015)
Page 33: Berufsbild Konzepter (2015)
Page 34: Berufsbild Konzepter (2015)

Inhalte sind nicht webgerecht aufbereitet! Nicht useable!

Page 35: Berufsbild Konzepter (2015)

Screenshot: Staatliche Museen zu Berlin

Page 36: Berufsbild Konzepter (2015)

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

Page 37: Berufsbild Konzepter (2015)

! Eine schlechte Nutzungserfahrung ist auch ein negatives Markenerlebnis!

Page 38: Berufsbild Konzepter (2015)

Bessere Beispiele.

Page 39: Berufsbild Konzepter (2015)

Screenshot: Rijksmuseum Amsterdam

Page 40: Berufsbild Konzepter (2015)

Screenshot: Square, Inc.

Page 41: Berufsbild Konzepter (2015)

Screenshot: Liverpool City Council

Page 42: Berufsbild Konzepter (2015)

Was macht ein Konzepter?

Page 43: Berufsbild Konzepter (2015)

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/

Page 44: Berufsbild Konzepter (2015)

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

Page 45: Berufsbild Konzepter (2015)

Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.

Page 46: Berufsbild Konzepter (2015)

Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.

46

Mal allein...

Foto: Aperto AG

Page 47: Berufsbild Konzepter (2015)

Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.

47

...mal zusammen mit Kollegen aus anderen Disziplinen.

Foto: Aperto AG

Page 48: Berufsbild Konzepter (2015)

Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.

48

Beim Kunden präsentieren wir Ideen und Lösungen...

Foto: Stefan Freimark

Page 49: Berufsbild Konzepter (2015)

Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.

49

...oder moderieren Workshops.

Foto: Stefan Freimark

Page 50: Berufsbild Konzepter (2015)

Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.

50

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

Foto: Stefan Freimark

Page 51: Berufsbild Konzepter (2015)

Wir erstellen verschiedene Arbeitsergebnisse.

Page 52: Berufsbild Konzepter (2015)

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

Page 53: Berufsbild Konzepter (2015)

Wir erstellen verschiedene Arbeitsergebnisse.

53

Inhaltsstrukturen

Screenshot: Stefan Freimark

Page 54: Berufsbild Konzepter (2015)

Wir erstellen verschiedene Arbeitsergebnisse.

54

Skizzen

Scan: Stefan Freimark

Page 55: Berufsbild Konzepter (2015)

Wir erstellen verschiedene Arbeitsergebnisse.

55

Wireframes

Screenshot: Stefan Freimark

Page 56: Berufsbild Konzepter (2015)

Wir erstellen verschiedene Arbeitsergebnisse.

56

Präsentationen

Screenshot: Stefan Freimark

Page 57: Berufsbild Konzepter (2015)

Wir erstellen verschiedene Arbeitsergebnisse.

57

Dokumentation

Screenshot: Stefan Freimark

Page 58: Berufsbild Konzepter (2015)

Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.

Page 59: Berufsbild Konzepter (2015)

Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.

59

Automobilhersteller

Foto: commons.wikimedia.org/wiki/File:KUKA_Industrial_Robots_IR.jpg

Page 60: Berufsbild Konzepter (2015)

Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.

60

Bildungswesen

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

Page 61: Berufsbild Konzepter (2015)

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)

Page 62: Berufsbild Konzepter (2015)

Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.

62

Nutzfahrzeugbranche

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

Page 63: Berufsbild Konzepter (2015)

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

Page 64: Berufsbild Konzepter (2015)

Die Art des Projekts kann ebenfalls ganz unterschiedlich sein.

Page 65: Berufsbild Konzepter (2015)

65 Screenshot: Volkswagen AG

Page 66: Berufsbild Konzepter (2015)

66 Screenshot: Deutsche See GmbH

Page 67: Berufsbild Konzepter (2015)

67 Screenshot: MAN Truck & Bus AG

Page 68: Berufsbild Konzepter (2015)

68 Screenshot: Asklepios Kliniken GmbH

Page 69: Berufsbild Konzepter (2015)

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)

Page 70: Berufsbild Konzepter (2015)

Der Arbeitsalltag anhand eines Beispiels

Page 71: Berufsbild Konzepter (2015)

Hinweis

Nicht alle der folgenden Arbeitsergebnisse wurden im gleichen Projekt erstellt.

71

Page 72: Berufsbild Konzepter (2015)

Foto: flickr.com/photos/ddebold/5384292000

Page 73: Berufsbild Konzepter (2015)

Foto: de.wikipedia.org/wiki/Datei:RWTH_Aachen_Hauptgebäude.jpg

Page 74: Berufsbild Konzepter (2015)
Page 75: Berufsbild Konzepter (2015)

Wir führen erste Gespräche mit dem Kunden.

75 Foto: commons.wikimedia.org/wiki/File:Air_Berlin_Boeing_737-700_D-AHXD.jpg

Page 76: Berufsbild Konzepter (2015)

Wir machen uns erste Gedanken zur Vorgehensweise.

76 Foto: Stefan Freimark

Page 77: Berufsbild Konzepter (2015)

Wir arbeiten uns in die Materie ein – damit wir Markt, Kunde und Produkte verstehen.

77 Foto: flickr.com/photos/gadl/320300354

Page 78: Berufsbild Konzepter (2015)

In Workshops nehmen wir die Anforderungen von Stakeholdern auf.

78 Foto: Stefan Freimark

Page 79: Berufsbild Konzepter (2015)

Wir sehen uns an, was Wettbewerber machen.

79 Screenshot: Stefan Freimark

Page 80: Berufsbild Konzepter (2015)

Durch Interviews lernen wir die Bedürfnisse der Nutzer besser kennen.

Foto: flickr.com/photos/marfis75/2939337382 Foto: Stefan Freimark

Page 81: Berufsbild Konzepter (2015)

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

Page 82: Berufsbild Konzepter (2015)

Bei der Konzeption müssen wir die User Journeys der Personas berücksichtigen.

82

Im Studium

Nach dem

Studium Vor dem Studium

Page 83: Berufsbild Konzepter (2015)

Manchmal sind diese Journeys auch sehr ausführlich.

83 Grafik: Johanna Hintz, Urs Bellermann, Stefan Freimark

Page 84: Berufsbild Konzepter (2015)

Aus den bisherigen Erkenntnissen ergeben sich erste Ideen.

84 Foto: Stefan Freimark

Page 85: Berufsbild Konzepter (2015)
Page 86: Berufsbild Konzepter (2015)

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

86 Foto: Stefan Freimark

Page 87: Berufsbild Konzepter (2015)

Wir überlegen, welche Funktionen das Angebot bieten muss.

87

Page 88: Berufsbild Konzepter (2015)

Unsere Ideen und Vorschläge präsentieren wir während des gesamten Prozesses.

Foto: flickr.com/photos/evanforester/6732501771

Page 89: Berufsbild Konzepter (2015)
Page 90: Berufsbild Konzepter (2015)

Im weiteren Verlauf arbeiten wir die Inhalts-struktur feiner aus.

90 Screenshot: Stefan Freimark

Page 91: Berufsbild Konzepter (2015)

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

Page 92: Berufsbild Konzepter (2015)

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

Page 93: Berufsbild Konzepter (2015)

Die Funktionen werden genau durchdacht, und in einem Flow Chart dokumentiert.

93 Screenshot: Stefan Freimark

Page 94: Berufsbild Konzepter (2015)
Page 95: Berufsbild Konzepter (2015)

Ersten Skizzen zeigen, wie Inhalte/Funktionen auf den Seiten angeordnet sein könnten.

Foto: Stefan Freimark Foto: Stefan Freimark

Page 96: Berufsbild Konzepter (2015)

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

Foto: Stefan Freimark Foto: Stefan Freimark

Page 97: Berufsbild Konzepter (2015)

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

Foto: Stefan Freimark Foto: Stefan Freimark

Page 98: Berufsbild Konzepter (2015)

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

Foto: Stefan Freimark Foto: Stefan Freimark

Page 99: Berufsbild Konzepter (2015)
Page 100: Berufsbild Konzepter (2015)

100 Layout: Ricardo Hahn für Aperto AG

Page 101: Berufsbild Konzepter (2015)

101 Screenshot: RWTH Aachen

Page 102: Berufsbild Konzepter (2015)

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

102 Screenshot: Stefan Freimark

Page 103: Berufsbild Konzepter (2015)

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

103 Foto: Stefan Freimark

Page 104: Berufsbild Konzepter (2015)

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

104 Foto: Stefan Freimark

Page 105: Berufsbild Konzepter (2015)

Testing und Qualitätssicherung

Page 106: Berufsbild Konzepter (2015)

In Usability-Tests überprüfen wir unsere Ideen.

Foto: flickr.com/photos/marfis75/2939337382 Foto: Stefan Freimark

Page 107: Berufsbild Konzepter (2015)

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

xxx

107 Screenshot: Stefan Freimark

Page 108: Berufsbild Konzepter (2015)

Technische Fehler werden in einem Bugtracking-System wie Jira festgehalten.

Foto: flickr.com/photos/marfis75/2939337382 Screenshot: Stefan Freimark

Page 109: Berufsbild Konzepter (2015)

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

Page 110: Berufsbild Konzepter (2015)

Wie wird man Konzepter?

Page 111: Berufsbild Konzepter (2015)

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

Page 112: Berufsbild Konzepter (2015)

„Konzepter brauchen Neugier und Mut.“

112

Andrej Balaz

Foto mit freundlicher Genehmigung zur Verfügung gestellt von Andrej Balaz.

Page 113: Berufsbild Konzepter (2015)

„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

Page 114: Berufsbild Konzepter (2015)

Berufseinstieg

114 Foto: Stefan Freimark

Page 115: Berufsbild Konzepter (2015)

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

Page 116: Berufsbild Konzepter (2015)

Es gibt noch andere Berufsbezeichnungen.

116

Generalisten:

§  Konzeptioner

§  User Experience Designer

Engere Tätigkeitsfelder:

§  User Researcher

§  Usability Professional

§  Informationsarchitekt

§  Interaction Designer

Page 117: Berufsbild Konzepter (2015)

Es gibt Berufe/Rollen, die Ähnlichkeiten mit Konzeptern haben.

117

§  Produktmanager

§  Product Owner

Page 118: Berufsbild Konzepter (2015)

Aktuelle Themen und Trends

Page 119: Berufsbild Konzepter (2015)

User Experience gewinnt an Bedeutung.

119 Grafik: commons.wikimedia.org/wiki/File:Human_evolution.svg

Page 120: Berufsbild Konzepter (2015)

Service Design und Customer Experience sind die nächsthöhere Stufe.

120 Grafik: flickr.com/photos/brandonschauer/3363169836/

Page 121: Berufsbild Konzepter (2015)

Durch neue Geräte steigt die Komplexität.

121 Foto: Stefan Freimark

Page 122: Berufsbild Konzepter (2015)
Page 123: Berufsbild Konzepter (2015)

Ich bin gespannt auf Ihre Fragen!

123 Foto: flickr.com/photos/highwaysagency/6032691030 (Highways Agency)

Page 124: Berufsbild Konzepter (2015)

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

Page 125: Berufsbild Konzepter (2015)

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/

Page 126: Berufsbild Konzepter (2015)

Bildnachweise

Page 127: Berufsbild Konzepter (2015)

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

Page 128: Berufsbild Konzepter (2015)

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

Page 129: Berufsbild Konzepter (2015)

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

Page 130: Berufsbild Konzepter (2015)

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

Page 131: Berufsbild Konzepter (2015)

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

Page 132: Berufsbild Konzepter (2015)

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

Page 133: Berufsbild Konzepter (2015)

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

Page 134: Berufsbild Konzepter (2015)

Fotos von verschiedenen Rechteinhabern

134

© der jeweiligen Rechteinhaber

Andrej Balaz Foto mit freundlicher Genehmigung zur Verfügung gestellt von Andrej Balaz.

Page 135: Berufsbild Konzepter (2015)

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

Page 136: Berufsbild Konzepter (2015)

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

Page 137: Berufsbild Konzepter (2015)

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

Page 138: Berufsbild Konzepter (2015)

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

Page 139: Berufsbild Konzepter (2015)

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

Page 140: Berufsbild Konzepter (2015)

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

Page 141: Berufsbild Konzepter (2015)

Screenshots/Scans von Stefan Freimark

141

©

Stefan Freimark Qualitätssicherung

Stefan Freimark Bugtracking in Jira

Page 142: Berufsbild Konzepter (2015)

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.

Page 143: Berufsbild Konzepter (2015)

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

Page 144: Berufsbild Konzepter (2015)

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

Page 145: Berufsbild Konzepter (2015)

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.