Vortrag auf der IA-Konferenz 2009 in Hamburg. Kernaussage: Es gibt jede Menge Methoden, und es gibt nicht den einen Weg, um ein Problem zu lösen. Es hängt davon ab, an wen ich mich richte und welchen Zweck ich erreichen möchte. Daher müssen Umfang und Inhalt von Konzeptionsdokumenten an die Adressaten und den Zweck angepasst werden. Beispiele veranschaulichen wie Methoden das Verstehen, Kommunizieren, die Produktionsvorbereitung und -begleitung, sowie das Dokumentieren unterstützen können. Diese Version enthält keine Sprechernotizen, nur die Folien.

1. Bild: David Iliff
Viele Wege führenRom Rom
Viele Wege führen nach nach
Methoden in der Website-Konzeption
Methoden in der Website-Konzeption

2. Hallo!

9. Was ich Euch nicht erzähle ...

10. Design the Box Concept Maps
Mental Model
Multi Variant Tests
Affinity Diagram Benchmark Analysis
Task Analysis Gap Analysis Page Description Diagram
Swimlanes
Controlled Vocabulary
Use Cases
Guerilla Ethnography
Backcasting
Taxonomy
Storyboard
Components
Paper Prototype
Personas
Content Inventory
Wireframes HiFi Prototype
Focus Group
Templates
Scribbles Creative Brief
Content Analysis
Content Audit
Sitemaps Card Sort
Heuristic Evaluation Patterns Wireflows
User Journey Usability Test
Business Requirements Capture
Scenarios Prototypes
Specification Split Tests
Conversational Sketching
Page Types

11. Bild: David Iliff

12. Reisevorbereitung

13. Strukturiert vorgehen!
• An wen richte ich mich?
• Was möchte ich erreichen?
• Welche Informationen benötige ich?
• Gibt es Beispiele?
• Loslegen!
• Überarbeiten

14. An wen richte ich mich?

15. Kunde
• Denkt konkret
• Beschäftigt sich nur zeitweise
mit dem Projekt
• Muss interne Interessen
berücksichtigen
• Benötigt neben Lösungen auch
Argumente, um sie intern zu
vertreten

16. Grafik
• Denkt visuell: Liest oft keine
Anmerkungen bei Wireframes
• Farbkonzepte sind manchmal
wichtiger als gute Usability
• Lässt auch mal was weg
• Denkt eher in Seiten statt in
Komponenten

17. Technik
• Denkt abstrakt
• Denkt in Komponenten statt
in Seiten
• Braucht detaillierte Angaben
• Wollen sehr früh im Projekt
Informationen haben
• Legt früh technische Vorgaben
fest, die u.U. mit dem Konzept
kollidieren

18. Neue Team-Mitglieder
• Kennen die Projekthistorie
nicht
?

19. Was möchte ich erreichen?

20. Verstehen

21. Context
Content Users
Morville, Rosenfeld: Information Architecture for the World Wide Web (O‘Reilly, 2006)
oreilly.com/catalog/infoarch3

22. Vergleich von MVV-Zeitkarten
IsarCard9Uhr im Abo
Ausbildungstarif I + II
IsarCard60 im Abo
IsarCard-Woche
IsarCard-Monat
IsarCard9Uhr
AboPlusCard
IsarCardAbo
IsarCardJob
IsarCard60
Art (Dauer) Wochenkarte Monatskarte Monats- oder Jahreskarte Monatskarte Monats- oder Jahreskarte Monatskarte Monats- oder Jahreskarte Wochen- oder Jahreskarte Jahreskarte
Monatskarte
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 Innenraum, Außenraum Innenraum, Außenraum Innenraum, Außenraum je nach Anzahl der Ringe je nach Anzahl der je nach Kombination
oder Gesamtnetz oder Gesamtnetz oder Gesamtnetz oder Gesamtnetz Ringe von Verkehrs-verbünden
Gültigkeitsdauer 1 Woche + bis 12:00 am 1 Monat + bis 12:00 am 1 Jahr 1 Monat + bis 12:00 am 1 Jahr 1 Monat + bis 12:00 am 1 Jahr 1 Woche oder 1 Monat 1 Jahr 1 Jahr
ersten Werktag der ersten Werktag des ersten Werktag des ersten Werktag des
Folgewoche Folgemonats Folgemonats Folgemonats
Ü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
Zahlungs-intervall Zahlungs-intervall Zahlungs-intervall Zahlungsintervall + Rabattstufe von Verkehrs-verbünden
Ausbildungs-tarif
Verkaufsstellen Alle Verkaufsstellen + Alle Verkaufsstellen + 2 Abo-Center + Online- Alle Verkaufsstellen + 2 Abo-Center + Online- Alle Verkaufsstellen + 2 Abo-Center + Online- Alle Verkaufsstellen + nur Tarifabteilung nur DB-Abo-Center
Automanten Automanten Bestellung Automanten Bestellung Automanten Bestellung Automaten [vorherige Landshut
Ausstellung einer
Kundenkarte nötig!]
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 Erweiterungskarte für Erweiterungskarte für Erweiterungskarte für Erweiterungskarte für Weiterer Rabatt Kostenlose BC25 bei
andere Zonen verfügbar. andere Zonen verfügbar. andere Zonen verfügbar. andere Zonen verfügbar. andere Zonen verfügbar gegenüber IsarCardAbo pers. Abo
(quot;grüne Jugendkartequot;).
Besonderheit 2 Keine Fahrten in der Keine Fahrten in der Fahrten in der Sperrzeit Fahrten in der Sperrzeit Kundenkarte
Sperrzeit möglich Sperrzeit möglich möglich. möglich. erforderlich
Stand: 22. Juni 2007
Autor: Stefan Freimark, Phase 4 Communications GmbH (freimark@phase4.de)
Content Audit

23. With kind permission by Indi Young.
Indi Young: Mental Models (Rosenfeld Media, 2008)
www.rosenfeldmedia.com/books/mental-models
Mental Model

24. With kind permission by Indi Young.
Indi Young: Mental Models (Rosenfeld Media, 2008)
www.rosenfeldmedia.com/books/mental-models
Mental Model

25. With kind permission by Indi Young.
Indi Young: Mental Models (Rosenfeld Media, 2008)
www.rosenfeldmedia.com/books/mental-models
Mental Model

26. Kommunizieren

27. With kind permission by Joshua Porter.
Joshua Porter: Designing for the Social Web (New Riders, 2008)
bokardo.com/archives/designing-for-the-social-web-the-book
Process Flow

28. Jeff sits down at his computer and Maybe they tell if I
navigates to the manufacturer's website.
That car looks good click on quot;Build your
ownquot;.
Honey,
and it has some very
nice features. But how lunch is
much does it cost? ready!
Ah, it's right on the The price differs with
I saw that ad about this homepage. Let's see if the engine. I go with
I like that. I'll save I'll be right
that for later.
new car and would like to
know more.
they can tell me more. that one and add more there!
equipment.
Stencils:
• boxesandarrows.com/view/comics-not-just-for
• graffletopia.com/stencils/128
User Journey

29. Scenario: Find product information, configure car
Start point: Jeff watched a television ad about a new product
End point: Jeff found some information including price, and has started a configuration (which he saves for later)
Jeff sits down at his computer and Maybe they tell if I
navigates to the manufacturer's website.
That car looks good click on quot;Build your
ownquot;.
Honey,
and it has some very
lunch is
Storyboard
nice features. But how
much does it cost? ready!
Ah, it's right on the The price differs with
I saw that ad about this homepage. Let's see if the engine. I go with
I like that. I'll save I'll be right
that for later.
new car and would like to
know more.
they can tell me more. that one and add more there!
equipment.
The homepage displays the The new features are the most Configuring a car is the next A seperate user journey explains In this case, Jeff opts for a break
Notes
offered car in a teaser. important point to communicate. best activity. Secondary in this the configurator in detail. and uses the Save vehicle
Alternative: A landing page Price information is secondary. context: ordering a brochure, function to resume later.
which URL has been promoted. locate a dealer.
Business User Experience Use case
CC CC.engine, CC.extras CC.save
Car Configurator
Go to Learning Scanning for
Configure Configure
Start manufacturer.com Follow a teaser about the price Save vehicle End
engine extras
via browser product information
Process
Car Configurator Car Configurator Car Configurator
Swimlanes

30. Produktion vorbereiten und begleiten

31. Zentraldokument

32. Structure Content SEO Other info
Teaser
txt_chron
txt_az
img1
img2
1st 2nd 3rd 4th 5th 6th Name in navigation Page type Page title (TITLE) Meta description Meta keywords Subdomain Shortname Owner Status Comment
0.0 Startseite Home x x Fiktiv Schreibgeräte AG
1.0 Produkte Product Entry x x x Produkte - [Standardtext]
1.1 Füllfederhalter (Skip)
1.1.1 Classic Product Detail x
1.1.2 Premium Product Detail x
1.2 Kugelschreiber (Skip)
1.2.1 Ball pen classic Product Detail
1.2.2 Ball pen premium Product Detail
1.3 Etuis (Skip)
1.3.1 Classic Etui Product Detail
1.3.2 Deluxe Etui Product Detail
1.4 Zubehör (Skip)
1.4.1 Tinte Product Detail
1.4.2 Minen Product Detail
2.0 Service Entry
2.1 Garantie Content
2.2 Anleitungen Subindex
2.2.1 Füllfederhalter (Skip)
2.2.1.1 Classic Content
2.2.2 Kugelschreiber (Skip)
2.2.2.1 Ball pen classic Content
3.0 Unternehmen Entry
3.1 Aktuell News Archive
3.1.n [Datum] News Detail
3.2 Innovation Content
3.3 Geschichte Content
3.4 Team Matrix
3.5 Kontakt Content
M1 Startseite (Link)
M2 [Search box] (Input field)
M2.1 Suchergebnisse Search results
M3 Kontakt (Link)
Zentraldokument

33. Folgende Situation ...
• 2 Grafiker
• 3 Tage Zeit
• 119 Layouts zu überarbeiten

34. Screen List

35. Screen List

36. Screen List

37. Screen List

38. Dokumentieren

39. Projektdefinition
Kunde: Fiktiv Schreibwaren AG
Projekt: Relaunch Online-Shop
Datum: 04.05.2009
Thema:
Der Online-Shop soll für die Besucher übersichtlicher werden und zudem die Wertigkeit der
Marke und ihrer Produkte widerspiegeln. Ziele sind die Steigerung des Online-Umsatzes
sowie die Verbesserung der Kundenzufriedenheit. Im Backend soll der Shop an ein
Warenwirtschaftssystem angebunden werden.
Projektdefinition

40. Projektdefinition
Kunde: Fiktiv Schreibwaren AG
Projekt: Relaunch Online-Shop
Datum: 04.05.2009
Thema:
Der Online-Shop soll für die Besucher übersichtlicher werden und zudem die Wertigkeit der
Marke und ihrer Produkte widerspiegeln. Ziele sind die Steigerung des Online-Umsatzes
sowie die Verbesserung der Kundenzufriedenheit. Im Backend soll der Shop an ein
Warenwirtschaftssystem angebunden werden.
Projektdefinition

41. Projektdefinition
Fiktiv Schreibwaren AG wg. Relaunch Online-Shop
Bestandsaufnahme
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
• Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat
• vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto
• odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait
Zielgruppen
Hauptzielgruppe: Endkunden
• Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat
• vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto
Sekundäre Zielgruppe: Händler
• Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat
• vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto
Ziele
quantitative Ziele: Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit esse.
qualitative Ziele: Vel illum dolore eu feugiat nulla facilisis at vero et
accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
augue duis dolore te feugait nulla facilisi.
Rahmenbedingungen
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
volutpat.
• Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat
• vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto
• odio dignissim qui blandit praesent luptatum zzril delenit augue duis
dolore te feugait
In scope
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna.
Out of scope
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
Projektdefinition
nonummy nibh euismod tincidunt.

42. Projektdefinition
Fiktiv Schreibwaren AG wg. Relaunch Online-Shop
Ansprechpartner Kunde
Unternehmen Ansprechpartner Kontaktdaten
Fiktiv Schreibwaren AG Heinz Hohmann heinz.hohmann@fiktiv-schreibwaren.de
Marketing Tel.: +49-89-555123-10
Bayerstraße 82, 80335 München
Marion Nagel marion.nagel@fiktiv-schreibwaren.de
Vertrieb Tel.: +49-89-555123-25
Bernd Schuster bernd.schuster@fiktiv-schreibwaren.de
Produktmanagement Tel.: +49-89-555123-47
Ansprechpartner Dienstleister
Unternehmen Ansprechpartner Kontaktdaten
Online-Agentur Anne Mauer amauer@online-agentur.de
Projektmanagement Tel.: +49-30-123555-38
Märkisches Ufer 37, 10179 Berlin
Stefan Freimark sfreimark@online-agentur.de
Konzeption Tel.: +49-30-123555-44
Sarah Winter swinter@online-agentur.de
Art Direktion Tel.: +49-30-123555-62
Florian Maierl florian.maierl@online-agentur.de
Frontend-Development Tel.: +49-30-123555-24
Systemhaus Maximilian Raab raab@systemhaus.com
System-Entwicklung Henkestraße 43, 91052 Erlangen
Tel.: +49-9131-448822-03
Historie dieses Dokuments
Datum Autor Notiz
30.04.2009 Stefan Freimark Initialdokument
04.05.2009 Stefan Freimark Anpassungen nach Kunden-Feedback
Projektdefinition

43. (.41()
Amazon.com logo Hello. Sign in to get personalized recommendations. New customer? Start here. Free 2-Day Shipping. No Minimum Purchase [v] 789:;<<4?<
/$'0%#$%
Your Amazon.com [v] Today’s Deals [v] Gifts & Wish Lists [v] Gift Cards [v] Your Account | Help 789:;<<4?>
789:;<<4;< Search All Department GO Cart [v] Your Lists [v] 789:;<<4?@
Shop All Departments
1 2 3
Books >
Movies, Music & Games > Amazon Daily {n} posts since yesterday 789:;<<4@<
Blog Read posts
Digital Downloads >
Computers & Office >
789:;<<4A<
Electronics > Product Product Name
image Duis autem vel eum iriure dolor
Home & Garden > in
Grocery, Health & Beauty > Read More
Toys, Kids & Baby > {$88.88} $66.66
Apparel, Shoes & Jewelry > Ad inventory for internal product
> Find similar items
Sports & Outdoors >
Tools, Auto & Industrial >
789:;<<4>< Check This Out
Product Name
Duis autem vel eum
iriure dolor in
Product Name {Personalization category heading}
Duis autem vel eum
iriure dolor in
Product Product Product
image image image
Ad inventory for internal product
Product Name
Duis autem vel eum
iriure dolor in
Product Name
Duis autem vel eum
iriure dolor in Product Name... Duis Product Name... Duis Product Name... Duis
autem vel eum iriure autem vel eum iriure autem vel eum iriure
dolor in dolor in dolor in
{$88.88} $66.66 {$88.88} $66.66 {$88.88} $66.66
789:;<<4A< 5
4
| Movies, Music & Games |
puters & Office | Electronics
ery, Health & Beauty | Toys,
hoes & Jewelry | Sports &
Industrial With kind permission by Nick Iozzo.
oad.humansize.com
what is selected here
OAD – Object-oriented Approach to Design
:: Proprietary and Confidential :: Last modified on 4.26.2009 at 8:40 PM :: Amazon on OAD example v1.0.vsd HOME100 :: Page 3 of 7

44. +),-.quot;/2! !quot;#$%&&'B)
+),-.quot;/*01quot; A8:/6217.>890213.415.62
,-./0./0100213.415.62170-8198:0;-.<-0
!quot;#$%&'(&)* <6251.2/017705-80=8:/6217.>890<6258250
?6:05-80<@::8250@/8:'0
10 – Initial State
User can not be identified via cookie (or they said
they are not that user as stored in the cookie)
Get more with Amazon [v] Gifts & Wish Lists [v] Gift Cards [v] Your Account | Help
!quot;#$%&&'(& !quot;#$%&&'() !quot;#$%&&'(*
1 2
20 – Initial State
Cookie on machine IDs user
User not logged in
Your Amazon.com [v] Today’s Deals [v] Gifts & Wish Lists [v] Gift Cards [v] Your Account | Help
!quot;#$%&&'(+ !quot;#$%&&'(( !quot;#$%&&'() !quot;#$%&&'(* 1 2
30 – Initial State
User logged in
Your Amazon.com (5) [v] Today’s Deals (2) [v] Gifts & Wish Lists (none) [v] Gift Cards [v] Your Account | Help
!quot;#$%&&'(+ !quot;#$%&&'(( !quot;#$%&&'() !quot;#$%&&'(*
2
1
Specifications for HOME100.32
Your Account Link With kind permission by Nick Iozzo.
oad.humansize.com
1
OAD – Object-oriented Approach to Design

45. With kind permission by Nathan Curtis.
Nathan Curtis: Modular Web Design (New Riders, t.b.a.)
unify.eightshapes.com
Unify

46. Welche Informationen benötige ich?

47. Welche Informationen benötige ich?
• Habe ich alle Informationen, um loslegen zu können?
• Welche Informationen fehlen mir?
• Wer kann mir diese Informationen geben?

48. Gibt es Beispiele?

49. Gibt es Beispiele?
• Vorlagen
• Deliverables aus alten Projekten
• Mit Kollegen die Vorgehensweise beraten
• Literatur

50. Loslegen!

53. Überarbeiten

54. Fazit

55. Fazit
• Hauptzweck für das Dokument überlegen
- Verstehen
- Kommunizieren
- Produktion vorbereiten und begleiten
- Dokumentieren
• Umfang und Inhalt von Dokumenten an die Zielgruppe
anpassen
• Brauche ich überhaupt ein Dokument?
• Viele Wege führen nach Rom: Es gibt nicht den einen Weg, um
eine Aufgabe zu lösen – nutzen Sie das, was in der Situation
sinnvoll ist

56. Das Wichtigste ...

57. Das Wichtigste ...
Auszug aus einem Briefing
• Zielgruppe:Vertriebsmitarbeiter Nutzfahrzeuge
• Kommunikationsschwerpunkte: Stärkung der internen
Kommunikation, Web 2.0
• Schaffung eines Community-Portals mit Incentive-Charakter
• Verbesserung der Kommunikation, Identifikation mit dem
Unternehmen, Vertrieb der Nutzfahrzeuge

58. Das Wichtigste ...
Auszug aus einem Briefing
• Zielgruppe:Vertriebsmitarbeiter Nutzfahrzeuge
• Kommunikationsschwerpunkte: Stärkung der internen
Kommunikation, Web 2.0
• Schaffung eines Community-Portals mit Incentive-Charakter
• Verbesserung der Kommunikation, Identifikation mit dem
Unternehmen, Vertrieb der Nutzfahrzeuge
Nicht mit der Lösung anfangen, sondern erst das Problem
verstehen!

59. Lektüre für die Reise

64. wireframes.linowski.ca

65. Gute Dank!
VielenReise!
stefan@freimark.de
slideshare.net/sfreimark
www.freimark.de

66. Credits

67. Credits
Review
• Anna Buß
Deliverables
Content Audit Stefan Freimark
Mental Model Indi Young – used with kind permission
Process Flow (Usage Lifecycle) Joshua Porter – used with kind permission
User Journey & Swimlane Stefan Freimark
Stencils:
• boxesandarrows.com/view/comics-not-just-for
• graffletopia.com/stencils/128
Zentraldokument Stefan Freimark
Screen List Stefan Freimark
Projektdefinition Stefan Freimark
OAD Nick Iozzo – used with kind permission
Unify (IA Summit 2009 Poster) Nathan Curtis – used with kind permission

68. Bildnachweis
Fotos
• Titelbild: David Iliff
de.wikipedia.org/w/index.php?title=Datei:Colosseum_in_Rome,_Italy_-_April_2007.jpg
• BMW Welt: Stefan Freimark ©
• Graffiti: Stefan Freimark
• Zielgruppe Kunde: istockphoto.com, ID 7763242 ©
• Zielgruppe Grafik: istockphoto.com, ID 4087682 ©
• Zielgruppe Technik: istockphoto.com, ID 5305920 ©
• Deliverables: Stefan Freimark
Buchcover
• Communicating Design: Peachpit ©
• Designing for the Digital Age: Wiley ©
• Mental Models: Rosenfeld Media ©
• Making things happen: O‘Reilly ©
Screenshots
• Wireframes Magazine: Jakub Linowski ©