Berufsbild Konzepter (2015)

1.233 Aufrufe

Veröffentlicht am

Wenn Sie auf einer Website ein Produkt kaufen, einen Flug buchen oder einen Termin vereinbaren, muss ziemlich viel glatt gehen: Die jeweilige Funktion muss vorhanden sein, sie muss auffindbar sein, sie muss leicht bedienbar sein – und dann sollte sie natürlich auch zum gewünschten Ergebnis führen. Zu all diesen Dingen hat sich vorher jemand Gedanken gemacht – in großen Digitalprojekten sind Konzepter dafür verantwortlich.

Der Vortrag erläutert anhand von Beispielen, wie in Digitalagenturen große Informationsportale und Anwendungen entstehen, und welche Rolle dabei Konzepter bzw. User Experience Designer einnehmen. So soll der vielfältige Arbeitsalltag dieses Berufs gezeigt und klargemacht werden, wie Konzepter sowohl Nutzerbedürfnissen als auch Auftraggeberzielen gleichermaßen gerecht werden müssen. Außerdem werden aktuelle Themen und Trends der Branche diskutiert.

Der Vortrag wurde am 28. April 2015 am Institut für Bibliotheks- und Informations­wissen­schaft (IBI) der Humboldt-Universität Berlin im Rahmen der Reihe "Berliner Bibliothekswissenschaftliches Kolloquium" (BBK) gehalten.

Auf der Website der Veranstaltung gibt es auch einen Screencast aus Folien und Audiomitschnitt:
https://www.ibi.hu-berlin.de/de/bbk/abstracts/ss15/freimark

Veröffentlicht in: Internet

Berufsbild Konzepter (2015)

  1. 1. 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.
  2. 2. 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
  3. 3. Wer von Ihnen hat denn schon mal vom Beruf „Konzepter“ gehört?
  4. 4. Foto: Stefan Freimark
  5. 5. 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
  6. 6. Wer ist Aperto?
  7. 7. Ich bin die Fusszeile 7 Foto: Aperto AG
  8. 8. Ich bin die Fusszeile 8
  9. 9. 9 Screenshot: RWTH Aachen
  10. 10. 10 Screenshot: BSH Hausgeräte GmbH
  11. 11. 11 Screenshot: Asklepios Kliniken GmbH
  12. 12. Was ist User Experience?
  13. 13. slideshare.net/Hienadz.Drahun/50-visual-definitions-of-user-experience
  14. 14. Foto: flickr.com/photos/sfreimark/16061812244
  15. 15. „„User experience (UX) is the way a person feels about using a product, system or service. Englische Wikipedia
  16. 16. 2004, Peter Morville semanticstudios.com/user_experience_design
  17. 17. 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
  18. 18. 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
  19. 19. Screenshot: AXA Schweiz
  20. 20. Nur der verstandene Nutzer wird zum Kunden!
  21. 21. 2004, Peter Morville semanticstudios.com/user_experience_design
  22. 22. 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
  23. 23. 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
  24. 24. Die UX wird durch Über- legungen auf mehreren Ebenen beeinflusst.
  25. 25. 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 Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding 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 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 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/
  26. 26. „Design is not how it looks like. Design is how it works. Steve Jobs
  27. 27. Nicht so gute Beispiele...
  28. 28. Foto: flickr.com/photos/billjacobus1/2482521750
  29. 29. Foto: flickr.com/photos/nicmcphee/2053737914
  30. 30. Screenshot: Bundesministerium für Arbeit und Soziales
  31. 31. Inhalte sind nicht webgerecht aufbereitet! Nicht useable!
  32. 32. Screenshot: Staatliche Museen zu Berlin
  33. 33. „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!
  34. 34. Eine schlechte Nutzungserfahrung ist auch ein negatives Markenerlebnis!
  35. 35. Bessere Beispiele.
  36. 36. Screenshot: Rijksmuseum Amsterdam
  37. 37. Screenshot: Square, Inc.
  38. 38. Screenshot: Liverpool City Council
  39. 39. Was macht ein Konzepter?
  40. 40. 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 of the information space to facilitate intuitive access to content n Design: development of on flows to facilitate user tasks, how the user interacts with ionality Navigation Design: design of interface elements to facilitate the user's movemen through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding 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 Content Requirements: definition of content elements required in the site in order to meet user needs 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 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 User Needs: externally derived goals for the site; identified through user resear ethno/techno/psychographics, etc. Site Objectives: business, creative, or oth internally derived goals for the site ented information-orien 30 March 20
  41. 41. 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
  42. 42. Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen.
  43. 43. Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen. 46 Mal allein... Foto: Aperto AG
  44. 44. Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen. 47 ...mal zusammen mit Kollegen aus anderen Disziplinen. Foto: Aperto AG
  45. 45. Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen. 48 Beim Kunden präsentieren wir Ideen und Lösungen... Foto: Stefan Freimark
  46. 46. Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen. 49 ...oder moderieren Workshops. Foto: Stefan Freimark
  47. 47. Konzepter arbeiten mal so, mal so – je nach Projekterfordernissen. 50 Auch nach Vor-Ort-Terminen gibt es immer wieder Abstimmungen. Foto: Stefan Freimark
  48. 48. Wir erstellen verschiedene Arbeitsergebnisse.
  49. 49. Wir erstellen verschiedene Arbeitsergebnisse. 52 Übersichten Foto: Stefan Freimark 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 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 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 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 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)
  50. 50. Wir erstellen verschiedene Arbeitsergebnisse. 53 Inhaltsstrukturen Screenshot: Stefan Freimark
  51. 51. Wir erstellen verschiedene Arbeitsergebnisse. 54 Skizzen Scan: Stefan Freimark
  52. 52. Wir erstellen verschiedene Arbeitsergebnisse. 55 Wireframes Screenshot: Stefan Freimark
  53. 53. Wir erstellen verschiedene Arbeitsergebnisse. 56 Präsentationen Screenshot: Stefan Freimark
  54. 54. Wir erstellen verschiedene Arbeitsergebnisse. 57 Dokumentation Screenshot: Stefan Freimark
  55. 55. Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen.
  56. 56. Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen. 59 Automobilhersteller Foto: commons.wikimedia.org/wiki/File:KUKA_Industrial_Robots_IR.jpg
  57. 57. Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen. 60 Bildungswesen Foto: commons.wikimedia.org/wiki/File:Vorlesung_Uni_Aachen.JPG
  58. 58. 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)
  59. 59. Als Berater in Agenturen lernen wir sehr unterschiedliche Branchen kennen. 62 Nutzfahrzeugbranche Foto: commons.wikimedia.org/wiki/File:Hellmann_LKW.jpg
  60. 60. 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
  61. 61. Die Art des Projekts kann ebenfalls ganz unterschiedlich sein.
  62. 62. 65 Screenshot: Volkswagen AG
  63. 63. 66 Screenshot: Deutsche See GmbH
  64. 64. 67 Screenshot: MAN Truck & Bus AG
  65. 65. 68 Screenshot: Asklepios Kliniken GmbH
  66. 66. 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)
  67. 67. Der Arbeitsalltag anhand eines Beispiels
  68. 68. Hinweis Nicht alle der folgenden Arbeitsergebnisse wurden im gleichen Projekt erstellt. 71
  69. 69. Foto: flickr.com/photos/ddebold/5384292000
  70. 70. Foto: de.wikipedia.org/wiki/Datei:RWTH_Aachen_Hauptgebäude.jpg
  71. 71. Wir führen erste Gespräche mit dem Kunden. 75 Foto: commons.wikimedia.org/wiki/File:Air_Berlin_Boeing_737-700_D-AHXD.jpg
  72. 72. Wir machen uns erste Gedanken zur Vorgehensweise. 76 Foto: Stefan Freimark
  73. 73. Wir arbeiten uns in die Materie ein – damit wir Markt, Kunde und Produkte verstehen. 77 Foto: flickr.com/photos/gadl/320300354
  74. 74. In Workshops nehmen wir die Anforderungen von Stakeholdern auf. 78 Foto: Stefan Freimark
  75. 75. Wir sehen uns an, was Wettbewerber machen. 79 Screenshot: Stefan Freimark
  76. 76. Durch Interviews lernen wir die Bedürfnisse der Nutzer besser kennen. Foto: flickr.com/photos/marfis75/2939337382 Foto: Stefan Freimark
  77. 77. 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
  78. 78. Bei der Konzeption müssen wir die User Journeys der Personas berücksichtigen. 82 Im Studium Nach dem Studium Vor dem Studium
  79. 79. Manchmal sind diese Journeys auch sehr ausführlich. 83 Grafik: Johanna Hintz, Urs Bellermann, Stefan Freimark
  80. 80. Aus den bisherigen Erkenntnissen ergeben sich erste Ideen. 84 Foto: Stefan Freimark
  81. 81. Wir überlegen, welche Inhalte zu Nutzerbe- dürfnissen & Auftraggeberzielen passen. 86 Foto: Stefan Freimark
  82. 82. Wir überlegen, welche Funktionen das Angebot bieten muss. 87
  83. 83. Unsere Ideen und Vorschläge präsentieren wir während des gesamten Prozesses. Foto: flickr.com/photos/evanforester/6732501771
  84. 84. Im weiteren Verlauf arbeiten wir die Inhalts- struktur feiner aus. 90 Screenshot: Stefan Freimark
  85. 85. 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
  86. 86. 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
  87. 87. Die Funktionen werden genau durchdacht, und in einem Flow Chart dokumentiert. 93 Screenshot: Stefan Freimark
  88. 88. Ersten Skizzen zeigen, wie Inhalte/Funktionen auf den Seiten angeordnet sein könnten. Foto: Stefan FreimarkFoto: Stefan Freimark
  89. 89. Die Skizzen bzw. Scribbles werden auf Papier zu feineren Wireframes ausgearbeitet. Foto: Stefan FreimarkFoto: Stefan Freimark
  90. 90. Bei Bedarf zeichnen wir die Wireframes mit einer Software wie Axure oder OmniGraffle. Foto: Stefan FreimarkFoto: Stefan Freimark
  91. 91. Auch später im Projekt haben wir mit Informationsarchitektur zu tun. Foto: Stefan FreimarkFoto: Stefan Freimark
  92. 92. 100 Layout: Ricardo Hahn für Aperto AG
  93. 93. 101 Screenshot: RWTH Aachen
  94. 94. Konzepter unterstützen die Designer bei der Produktion, indem sie den Überblick behalten. 102 Screenshot: Stefan Freimark
  95. 95. Schleichen sich bei der Gestaltung Fehler ein, geben wir konzeptionelles Feedback. 103 Foto: Stefan Freimark
  96. 96. Die laufende Abstimmung mit Kollegen aus anderen Disziplinen ist enorm wichtig. 104 Foto: Stefan Freimark
  97. 97. Testing und Qualitätssicherung
  98. 98. In Usability-Tests überprüfen wir unsere Ideen. Foto: flickr.com/photos/marfis75/2939337382 Foto: Stefan Freimark
  99. 99. Bei der Qualitätssicherung (QS) prüfen wir die fertige Website auf Fehler. xxx 107 Screenshot: Stefan Freimark
  100. 100. Technische Fehler werden in einem Bugtracking-System wie Jira festgehalten. Foto: flickr.com/photos/marfis75/2939337382Screenshot: Stefan Freimark
  101. 101. Foto: flickr.com/photos/95213174@N08/13296040014
  102. 102. Wie wird man Konzepter?
  103. 103. 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
  104. 104. „Konzepter brauchen Neugier und Mut.“ 112 Andrej Balaz Foto mit freundlicher Genehmigung zur Verfügung gestellt von Andrej Balaz.
  105. 105. „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
  106. 106. Berufseinstieg 114 Foto: Stefan Freimark
  107. 107. 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
  108. 108. Es gibt noch andere Berufsbezeichnungen. 116 Generalisten: §  Konzeptioner §  User Experience Designer Engere Tätigkeitsfelder: §  User Researcher §  Usability Professional §  Informationsarchitekt §  Interaction Designer
  109. 109. Es gibt Berufe/Rollen, die Ähnlichkeiten mit Konzeptern haben. 117 §  Produktmanager §  Product Owner
  110. 110. Aktuelle Themen und Trends
  111. 111. User Experience gewinnt an Bedeutung. 119 Grafik: commons.wikimedia.org/wiki/File:Human_evolution.svg
  112. 112. Service Design und Customer Experience sind die nächsthöhere Stufe. 120 Grafik: flickr.com/photos/brandonschauer/3363169836/
  113. 113. Durch neue Geräte steigt die Komplexität. 121 Foto: Stefan Freimark
  114. 114. Ich bin gespannt auf Ihre Fragen! 123 Foto: flickr.com/photos/highwaysagency/6032691030 (Highways Agency)
  115. 115. 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
  116. 116. 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 Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding 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 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 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/
  117. 117. Bildnachweise
  118. 118. 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
  119. 119. 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
  120. 120. 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
  121. 121. 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
  122. 122. 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
  123. 123. 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
  124. 124. 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_oper ation_aboard_the_Nimitz- class_aircraft_carrier_USS_Ronald_Reagan_ (CVN_76).jpg
  125. 125. Fotos von verschiedenen Rechteinhabern 134 © der jeweiligen Rechteinhaber Andrej Balaz Foto mit freundlicher Genehmigung zur Verfügung gestellt von Andrej Balaz.
  126. 126. 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 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 Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding 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 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 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 commons.wikimedia.org/wiki/ File:Human_evolution.svg
  127. 127. 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
  128. 128. 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
  129. 129. 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
  130. 130. 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
  131. 131. 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
  132. 132. Screenshots/Scans von Stefan Freimark 141 © Stefan Freimark Qualitätssicherung Stefan Freimark Bugtracking in Jira
  133. 133. 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.
  134. 134. 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
  135. 135. 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
  136. 136. 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.

×