Berufsbild Konzepter (2015)

Post on 07-Aug-2015

263 views 0 download

Transcript of 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.

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

Google

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 Garrettjjg@jjg.net

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 Garrettjjg@jjg.net

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 (freimark@phase4.de)

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 stefan.freimark@aperto.de 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 Garrettjjg@jjg.net

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 Garrettjjg@jjg.net

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.