SlideShare ist ein Scribd-Unternehmen logo
Bild: David Iliff




Viele Wege führenRom Rom
Viele Wege führen nach nach
Methoden in der Website-Konzeption
Methoden in der Website-Konzeption
Hallo!




Hallo! Ich möchte kurz noch selbst ein paar Worte zu mir sagen...
...ich arbeite als Konzepter für NOLTE&LAUTH in Berlin. Zuvor war ich Konzepter bei Phase 4
in München. Ich habe in ein paar größeren Projekten gearbeitet, zum Beispiel für...
...die Allianz...
...das Europäische Patentamt...
...General Motors...
...und Daimler.
Wenn ich nicht gerade in der Agentur arbeite, dann fotografiere ich ganz gerne.
Was ich Euch nicht erzähle ...




Bevor wir einsteigen möchte ich noch sagen, was ich Euch nicht erzähle.
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

Es gibt jede Menge Methoden: Use Cases, Swimlanes, Backcasting... Wahrscheinlich haben
nur wenige alle diese Methoden schon genutzt. Ich selbst habe noch nicht alle genutzt.
Bild: David Iliff




Manchmal muss man auch völlig neue Wege gehen: Weil man mit einer Situation konfrontiert
ist, die einem so noch nicht begegnet ist. Im Frühjahr war ich in einem Projekt, in dem ein
Konzern ein neues CMS einführen wollte. Der Kunde sagte: „Übrigens, das muss für unsere 7
Marken funktionieren. Und nicht nur in Deutschland, sondern in 20 Ländern.“ Hmm, worauf
kommt‘s bei multi-brand in einem internationalen Projekt an? Hatte ich bisher noch nicht.
Aber macht nichts:
Reisevorbereitung




Mit einer guten Reisevorbereitung kann man jede Situation meistern!
Strukturiert vorgehen!


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




Eine strukturierte Vorgehensweise hilft: Zunächst stelle ich mir die Frage, an wen ich mich
richte - wer ist die Zielgruppe? Dann: Was möchte ich erreichen, was ist mein Ziel, oder was
ist der Zweck eines Dokuments? Fehlen mir noch Informationen, bevor ich anfangen kann?
Gibt es Beispiele, hat jemand so etwas schon einmal gemacht? Dann fange ich an etwas auf
Papier zu bringen, und anschließend muss das Dokument wahrscheinlich überarbeitet
werden. Ich fange mal vorne an:
An wen richte ich mich?




An wen richte ich mich, wer ist meine Zielgruppe? Sind diese Leute mit dem Projekt vertraut?
Sind sie technisch versiert? Hier ein paar Beispiele:
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




Kunden - z.B. aus der Marketingabteilung - denken in der Regel konkret. Sie beschäftigen
sich zur zeitweise mit dem Projekt, weil sie noch andere Aufgaben haben. Sie müssen interne,
politische Interessen berücksichtigen. Und sie benötigen von uns nicht nur eine Lösung,
sondern auch Argumente um diese Lösung intern vertreten zu können.
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




Grafiker denken visuell. Ich bin sehr wenigen Grafikern begegnet, die die Notizen neben
Wireframes durchlesen. Sie haben die Gestaltung im Blick und ihnen ist ein durchgängiges
Farbkonzept manchmal wichtiger als eine Usability-Frage. Grafiker lassen auch mal was weg,
weil sie es vergessen oder weil es „nicht gut aussieht“. Ich habe mal ein Layout von der
Produktdetailseite eines Online-Shops gesehen, auf dem der Button „In den Warenkorb legen“
gefehlt hat. Sowas passiert. :-)
Und Grafiker denken eher in ganzen Seiten statt in einzelnen Komponenten.
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




Techniker denken dagegen in Komponenten statt in ganzen Seiten; die brauchen es genau
umgekehrt. Techniker brauchen auch sehr detaillierte Angaben: Wenn ihnen etwas fehlt,
überlegen sie sich vielleicht selbst eine Lösung, die dann Usability-Probleme verursacht. Sie
wollen auch früh im Projekt Informationen haben und unter Umständen legen sie sich auf
eine technische Lösung fest, ohne die Erfordernisse der User Experience zu berücksichtigen.
Neue Team-Mitglieder

                                               •   Kennen die Projekthistorie
                                                   nicht




                 ?
Es gibt noch eine weitere Zielgruppe: Leute, die ich noch gar nicht kenne. Vielleicht kommen
zu einem späteren Zeitpunkt neue Kollegen ins Projektteam. Oder das Projekt wird für 3
Monate auf Eis gelegt, und jemand anders nimmt später die Arbeit daran wieder auf. Die
Deliverables sollten so etwas berücksichtigen.
Was möchte ich erreichen?




Ich weiß, wen ich erreichen möchte. Stellt sich die Frage: Was will ich erreichen? Ein
Dokument kann 4 Zwecken dienen: Verstehen, Kommunizieren, Produktion vorbereiten und
begleiten, und Dokumentieren. Ich habe ein paar Beispiele mitgebracht.
Verstehen




Bevor ich mir eine Lösung überlegen kann, muss ich erst einmal Verständnis zu ein paar
Punkten erlangen.
Context




                   Content                                                      Users



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


Das hier kennt jeder: Context, Content, Users. Context kann sein: Geschäftsziele oder zum
Beispiel technische Rahmenbedingungen. Content: Muss Content neu erstellt werden? Ist
Content da, der migriert werden soll? In welchen Datenstrukturen liegt Content vor? Und wo
kommen die Inhalte überhaupt her, wie sieht es mit der Datenversorgung aus? Users: Wer ist
die Zielgruppe? Welche Bedürfnisse, Motivationen und Ziele haben diese Leute? Das alles
muss im Projekt berücksichtigt werden.
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
Für den Münchner Verkehrsverbund habe ich letztes Jahr die Navigationsstruktur
überarbeitet. Bevor ich die 10 verschiedenen Zeitkarten sinnvoll gruppieren konnte, musste
ich selbst erst einmal den Tarif verstehen. Leider hat der Kunde dann gegen ärztlichen Rat
gehandelt, aber man kann nicht immer gewinnen. Trotzdem hat mir die Arbeit geholfen, als
es später um die Überarbeitung des Seitentyps „Ticketseite“ ging.
With kind permission by Indi Young.

                                                            Indi Young: Mental Models (Rosenfeld Media, 2008)
                                                                 www.rosenfeldmedia.com/books/mental-models




Mental Model
Eine sehr gute Methode um die Menschen zu verstehen die unser Angebot nutzen, sind
„Mental Models“ von Indi Young. In der oberen Hälfte werden die Motivationen und
Tätigkeiten eingetragen. In der unteren Hälfte stehen die Funktionen, Services und Produkte,
mit denen das Angebot diese Tätigkeiten unterstützt. Hier steht jetzt recht wenig in der
unteren Hälfte - vermutlich ist das aus einem echten Projekt von Indi Young. Ich zeige mal
einen größeren Ausschnitt.
With kind permission by Indi Young.

                                                            Indi Young: Mental Models (Rosenfeld Media, 2008)
                                                                 www.rosenfeldmedia.com/books/mental-models




Mental Model
Hier geht es um den Kauf bzw. die Anmietung einer Immobilie. Das hier ist ein „Mental
Space“. Innerhalb des Mental Space „Find likely houses“ gibt es verschiedene Tätigkeiten, zum
Beispiel „Look at ads“. Das Schöne bei Mental Models ist, dass diese grundlegenden
Tätigkeiten über lange Zeit gleich bleiben: Unsere Großeltern haben sich vor 60 Jahren
Anzeigen angesehen, wir machen das heute auch. Damals in Zeitungen, heute verwenden wir
ImmobilienScout.
With kind permission by Indi Young.

                                                            Indi Young: Mental Models (Rosenfeld Media, 2008)
                                                                 www.rosenfeldmedia.com/books/mental-models




Mental Model
Mental Models sind eine Art des qualitativen Research, und man kann sie für verschiedene
Zwecke einsetzen: Einerseits natürlich, um die Nutzer besser zu verstehen und um Empathie
für ihre Bedürfnisse und Motivationen zu entwickeln. Andererseits kann man in einem
zweiten Schritt Personas daraus ableiten oder ein High-Level-Navigationssystem. Oder man
kann es strategisch einsetzen: Wenn in der unteren Hälfte das Angebot eingetragen ist, lässt
sich leicht ablesen, wo es noch Handlungsbedarf gibt.
Kommunizieren




Ein anderer Zweck den Methoden erfüllen, ist Kommunizieren: Vermitteln von Ideen oder wie
etwas aufgebaut ist oder funktioniert.
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
Hier ein Beispiel von Joshua Porter. Kunden glauben oft, dass man eine Community nur
errichten und aufsperren muss, und schon nehmen alle begeistert daran teil. Dass es anders
ist, zeigt dieses Diagramm sehr anschaulich: Nutzer müssen erst verschiedene Hürden
überspringen, bevor sie zu passionierten Nutzern werden. So etwas kann man gut in einer
Kundenpräsentation einsetzen. Joshua Porter hat zu dem Thema auch ein Buch geschrieben,
das ich sehr empfehlen kann: „Designing for the Social Web.“
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
Wenn man weiß welche Personas das System verwenden, kann man sich auch mal grobe
Gedanken machen, welche Use Cases es gibt und wie jemand mit dem System interagiert.
Hier ist ein Beispiel: Jeff hat Werbung für ein neues Auto gesehen und möchte jetzt mehr
erfahren. Er setzt sich an seinen Computer und ruft die Homepage des Herstellers auf. Dort
findet er einen Teaser, der ihn zur Produktseite bringt. Ihm gefällt der Wagen und er wüsste
noch gerne, wie viel er kosten soll. Jeff findet den Einstieg in den Konfigurator und stellt fest,
dass der Preis von der Motorisierung abhängig ist. Er wird unterbrochen - das Essen ist fertig
- und speichert die begonnene Konfiguration.

So eine Foto-Love-Story ist schon sehr anschaulich, aber was ist, wenn man noch mehr dazu
sagen muss? In dem Fall bietet es sich an, die User Journey...
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
...zum Swimlane-Diagramm auszubauen. Hier stehen noch Notizen dabei, welche Use Cases
von dem Szenario betroffen sind, ein kleines Flow-Chart, und welche Geschäftsprozesse
betroffen sind. Sowas eignet sich gut um zu einem Stakeholder zu gehen: „Sie sind der Owner
des Systems X und wir haben da etwas vor, dass Ihr System beeinflusst. Wir möchten gerne
mit Ihnen ins Gespräch kommen.“
Produktion vorbereiten und begleiten




Okay, soweit das Thema Kommunizieren. Nummer 3 bei den Zielen ist die
Produktionsvorbereitung und -begleitung.
Zentraldokument
Ich arbeite gerne in Excel und lege ein Zentraldokument an, in dem die Struktur der Website
und ein paar Informationen zu Inhalten abgebildet sind. Andere Begriffe die ich dafür gehört
habe sind Content Inventory oder Take-up Grid. Das Mindeste was in so einer Tabelle stehen
sollte, ist eine Nummer für die Seite, der Seitenname und der Seitentyp. Das Schöne an Excel
ist, dass man das nach Bedarf noch ergänzen kann...
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
...zum Beispiel Spalten für die verwendeten Teaser, Infos zur Suchmaschinenoptimierung
oder weitere Informationen wie beispielsweise die Verantwortlichkeit auf Kundenseite.
Folgende Situation ...



  •   2 Grafiker
  •   3 Tage Zeit
  •   119 Layouts zu überarbeiten




Excel ist auch gut geeignet, um Dinge nachzuverfolgen. Letztes Jahr musste ich in einem
Projekt 2 Grafiker steuern. Wir hatten 3 Tage Zeit, um Änderungen in 120 Layouts
vorzunehmen.
Screen List
Unsere Partneragentur hat eine Liste von allen Screens erstellt, die ich für meine Zwecke
angepasst habe.
Screen List
Ich zeige das mal in groß: Es gibt Spalten für Dateinamen, die To-Dos, von wann ist die letzte
Version, wie ist der aktuelle Status, Kommentare.
Screen List
Ich habe alle Layouts ausgedruckt. Dazu habe ich sie in Safari geöffnet, da dann der
Dateiname mit ausgedruckt wird. Dann habe ich handschriftliche Notizen gemacht, bin damit
in die Grafik und bin das mit den Kollegen mündlich durchgegangen: Bitte die Datei nicht
hurz-purz nennen sondern s1010_search_advanced, Buttons müssen ausgetauscht werden,
eine Checkbox muss angehakt sein, der Suchen-Button muss woanders stehen und so weiter.

Ich habe hier osCommerce als Beispiel genommen - ich kann leider kein Layout aus dem
echten Projekt zeigen.
Screen List
Den aktuellen Status habe ich dann in die Excel-Tabelle eingetragen. Bei 10 Layouts kann
man sich Excel sparen, aber wenn man über 100 Layouts hat, den Grafikern stündlich neue
Sachen auf den Tisch legt und man von ihnen stündlich etwas zurückbekommt, dann hilft es
sehr. Wenn ich überarbeitete Layouts bekommen habe, dann habe ich mir immer auch wieder
die Ausdrucken mit den Anmerkungen geben lassen, um zu kontrollieren dass alles richtig
umgesetzt wurde. Wenn alles gepasst hat, habe ich die jeweilige Zeile auf hellgrün gesetzt.
Abends habe ich die fertigen Layouts in eine Zip-Datei gepackt und ausgeliefert - das sind
die dunkelgrünen Einträge. So konnte ich auch dem Projektmanagement leicht einen Status
geben.
Dokumentieren




Der letzte Zweck eines Dokuments ist das Dokumentieren selbst.
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
Zu Beginn eines Projekts ist es sinnvoll, eine Projektdefinition zu machen - auch Creative
Brief genannt.
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
Ich zeige das mal größer: Einfach nur in zwei, drei Sätzen sagen, worum es in dem Projekt
geht. Das hilft vor allem neuen Team-Mitgliedern, schnell in ein Projekt reinzukommen. Fünf
Präsentationen mit jeweils 100 Seiten können nur eine Ergänzung sein, aber irgendjemand
muss mal auf den Punkt bringen, worum es geht.
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.


                                                                                            Seite 2 von 3

Was man auch unbedingt festhalten sollte ist eine kurze Beschreibung des Problems, wer sind
die Zielgruppen, welche Ziele sollen erreicht werden und wie wird der Erfolg gemessen,
welche Rahmenbedingungen müssen berücksichtigt werden, was ist in scope und was ist out
of scope.

Eine Projektdefinition hilft, Scope Creep zu vermeiden: Angenommen in 3 Monaten macht ein
Stakeholder einen Vorschlag für ein weiteres Feature. Der Vorschlag kann gut sein, aber
vielleicht muss man sagen: „Vor 3 Monaten haben wir etwas anderes besprochen. Wir können
das machen, allerdings brauchen wir dann länger.“ Oder: „Der Vorschlag ist gut, aber wir
sollten überlegen, ob er unseren damals definierten Zielgruppen dient.“
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                                                                                                                  Seite 3 von 3

Am Schluss einer Projektdefinition können noch die Kontaktdaten der Ansprechpartner
stehen sowie eine Dokumenthistorie. Letzteres ist generell sinnvoll: Es wird der Tag kommen
an dem das Projektmanagement sagt: „Wir haben 10 Tage Konzept verkauft, wir sind jetzt bei
Tag 20. Wo ist die Zeit hingegangen?“ Mit der Historie eines Dokuments kann man zeigen,
wie viele Schleifen gedreht wurden. Das hilft dem Projektmanagement auch, um beim Kunden
das Budget nachzuverhandeln.
(.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



   Soweit die Projektdefinition. Am anderen Ende des Konzeptionsprozesses steht die
   Spezifikation. Neulich war im Wireframes Magazine ein Posting zu OAD - „object-oriented
   approach to design“ von Nick Iozzo. Er verfolgt einen extrem modularen Ansatz. Module
   können verschiedene Zustände haben, beispielsweise in Abhängigkeit davon, ob der Nutzer
   gerade angemeldet ist oder nicht, ob er anhand eines Cookies erkannt werden konnte oder
   nicht, oder eine regelbasierte Anzeige von Inhalten. Statt sämtliche Ausprägungen in
   Wireframes oder Layouts zu bauen, verwendet er Module. Zugegeben, ist jetzt nicht
   besonders revolutionär, aber Nick Iozzo treibt es auf die Spitze. Ich habe mir sagen lassen
   dass Axure ähnlich funktioniert, allerdings hatte ich noch keine Gelegenheit, Axure in einem
   Projekt zu testen.
+),-.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
Hier sind die:: verschiedenen Zustände für ein Modul zu 4.26.2009 at 8:40 PM
                 Copyright 2009 :: Proprietary and Confidential :: Last modified on sehen.                                                                 ::       Amazon on OAD example v1.0.vsd
With kind permission by Nathan Curtis.

                                                                Nathan Curtis: Modular Web Design (New Riders, t.b.a.)
                                                                                               unify.eightshapes.com




Unify
Dieses Poster hat Nathan Curtis vor ein paar Wochen auf dem IA Summit präsentiert (ich darf
es mit seiner freundlichen Genehmigung hier zeigen). Unfiy ist ein Vorlagenpaket seiner
Agentur EightShapes, das mit InDesign ab CS3 verwendet werden kann. Das Poster ist eine
InDesign-Datei, die Inhalte aus anderen Dateien einbindet. Der Vorteil ist, dass sich
Änderungen durch alle Deliverables durchziehen. Der Nachteil ist, dass man es mit jeder
Menge Dateien zu tun hat. Oder wie Nathan Curtis auf dem Poster selbst schreibt: „This ain‘t
your Grandma‘s single Visio file.“ Übrigens: Wenn man in dem PDF des Posters auf 600%
reinzoomt, kann man sogar die Inhalte der einzelnen Seiten lesen. :-)
Welche Informationen benötige ich?




Gut, ich weiß wen ich ansprechen möchte und welches Ziel ich erreichen möchte. Falls jetzt
das Gefühl aufkommt dass ich noch nicht alle Informationen habe um loslegen zu können,
versuche ich mir diese Infos zu beschaffen.
Welche Informationen benötige ich?


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




Welche Informationen fehlen mir? Wer kann mir diese Informationen geben? Ich spreche mit
Projektmitgliedern oder auch Stakeholdern, um alle nötigen Informationen zu sammeln.
Spätestens jetzt ist die Gelegenheit da, um mit diesen Personen über das Dokument zu
sprechen - um beispielsweise mit der Technik abzuklären was sie bekommen und um
nachzufragen, was sie brauchen.
Gibt es Beispiele?




Gibt es Beispiele? Hat jemand so etwas schon einmal gemacht? Ich suche nach ähnlichen
Dokumenten, bevor ich das Rad neu erfinde.
Gibt es Beispiele?


  •   Vorlagen
  •   Deliverables aus alten Projekten
  •   Mit Kollegen die Vorgehensweise beraten
  •   Literatur




Ich sehe natürlich erst in den Vorlagen nach, und sehe mir dann Deliverables aus alten bzw.
anderen Projekten an. Oder ich berate mich mit Kollegen, oder sehe in der Literatur nach. Auf
das Thema Literatur komme ich gleich nochmal zurück.
Loslegen!




Jetzt geht‘s auch mal los!
Wenn es schnell gehen muss, wenn ich nur einen Punkt verdeutlichen möchte, oder wenn ich
selbst noch nicht so genau weiß wo die Reise hingeht, fange ich mit Papier und Stift an.
Im weiteren Verlauf verfeinere ich die Dokumente - hier ist nochmal das Wireframe-Beispiel
von Nick Iozzo. Kleiner Einschub hierzu: Vorsicht mit all zu detaillierten Wireframes.
Erfahrene Grafiker könnten sich bevormundet fühlen, wenn man zu viel Layout vorgibt. Und
unerfahrene Grafiker machen in ihren Layouts vielleicht nur colorierte Wireframes daraus.
Hier kommt es auch wieder auf die Situation an.
Überarbeiten




Wenn ich etwas Vorzeigbares habe, gehe ich zu meinen Kollegen im Team und zeige es
ihnen. Hilft Euch das bei Eurer Aufgabe weiter? Braucht Ihr mehr oder etwas anderes? Ist das
aus Eurer Perspektive richtig was hier steht? Und dann geht‘s von vorne los. :-)
Fazit
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

Fazit: Bevor es losgeht, denke ich eine Minute über den Hauptzweck für ein Dokument nach:
Was brauche ich in der Situation? Den Umfang und den Inhalt passe ich an die Zielgruppe an.
Brauche ich überhaupt ein Dokument oder kann ich etwas informell in einem Gespräch am
Whiteboard lösen? Und: 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.
Das Wichtigste ...




Eine Sache noch...
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




Hier ein Auszug aus einem Briefing, das ich vor 2 Wochen bekommen habe: Zielgruppe sind
Vertriebsmitarbeiter in der Nutzfahrzeugsparte eines Automobilherstellers.
Kommunikationsziele: Stärkung der internen Kommunikation und Web 2.0. Schaffung eines
Community-Portals mit Incentive-Charakter. Verbesserung der Kommunikation, Identifikation
mit dem Unternehmen, Vertrieb dieser Nutzfahrzeuge.

Was fällt auf? Das sind alles Lösungen. Lösungen und Ziele. Im gesamten 6-seitigen Briefing
war nicht einmal von einem Problem die Rede. Warum soll die interne Kommunikation
gestärkt werden? Liegt die im Argen? Warum soll Web 2.0 verwendet werden? Weil es modern
ist? Warum soll ein Community-Portal geschaffen werden?

Ich stelle diese Fragen um herauszufinden, ob eine Community überhaupt das ist, was der
Kunde braucht. Ich muss wissen, wo der Schuh drückt. Vielleicht benötigen die
Vertriebsmitarbeiter ja etwas ganz anderes, und ein Informationsportal würde sich anbieten -
meinetwegen auch mit angeschlossenem Gewinnspiel und Tell-a-friend-Funktion. Und wenn
eine Community das Richtige ist, dann können wir sie nicht einfach aufsperren und mit
begeisterten Nutzern rechnen - es muss Community-Building betrieben werden. Der Usage
Lifecycle von Joshua Porter wird mir bei der Argumentation helfen.
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!


Wenn ich eins gelernt habe, dann das: Nicht mit der Lösung anfangen, sondern erst das
Problem verstehen!

Wir als Konzepter sollten aufpassen, dass wir uns nicht all zu sehr in unsere Methoden
verlieben, und „vor Liebe blind“ werden. Wir sollten uns einen klaren Blick bewahren und
Aufgaben hinterfragen, statt sofort loszulegen und mit dem Kopf durch die Wand zu gehen.
Lektüre für die Reise




Noch ein paar Literaturempfehlungen:
„Communicating Design“ von Dan Brown ist der Klassiker: Die 10 wichtigsten Dokumente und
Methoden werden ausführlich vorgestellt.
„Designing for the Digital Age“ von Kim Goodwin ist im März 2009 erschienen. Die Autorin
beschreibt auf 700 Seiten den Konzeptionsprozess der Agentur Cooper. Wenn Ihr nur ein
Buch lesen wollt, dann dieses.
Indi Young hat zu „Mental Models“ ein sehr gutes Buch geschrieben. Kaufbefehl - das lohnt
sich wirklich!
„Making things happen“ von Scott Berkun ist ein gutes Buch zum Thema Projektmanagement.
Als Konzepter ist man ja nicht nur Schnittstelle zwischen Agentur und Kunde, sondern auch
innerhalb der Agentur zwischen Grafik und Technik - dadurch muss man zwangsläufig auch
Projektmanagement-Aufgaben übernehmen. Das Buch enthält auch ein Kapitel zum Thema
Projektdefinition.
wireframes.linowski.ca

Da darf ich eine Kollegin aus Hamburg zitieren: „Die üblichen Branchenpornos“, zum Beispiel
„Boxes and Arrows“, das „Smashing Magazine“ oder das hier gezeigte „Wireframes Magazine“.
Gute Dank!
 VielenReise!
 stefan@freimark.de
 slideshare.net/sfreimark
 www.freimark.de




Vielen Dank!
Credits
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
Bildnachweis



Fotos
•   Titelbild: David Iliff
    de.wikipedia.org/w/index.php?title=Datei:Colosseum_in_Rome,_Italy_-_April_2007.jpg
•   BMW Welt: 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 ©

Weitere ähnliche Inhalte

Andere mochten auch

Consulta Matronas C S Nou Moles, 1 año
Consulta Matronas C S Nou Moles, 1 añoConsulta Matronas C S Nou Moles, 1 año
Consulta Matronas C S Nou Moles, 1 año
noumoles
 
la doncella que no quería ser la muerte y los granos de arroz
la doncella que no quería ser la muerte y los granos de arrozla doncella que no quería ser la muerte y los granos de arroz
la doncella que no quería ser la muerte y los granos de arroz
Laura Goez
 
Presentacion
PresentacionPresentacion
Presentacion
yennichacon
 
Motivadores del facilitador
Motivadores del facilitadorMotivadores del facilitador
Motivadores del facilitador
Asogpados
 
power lenguaje no verbal
power lenguaje no verbalpower lenguaje no verbal
power lenguaje no verbal
aliikitty
 
Word 2010
Word 2010Word 2010
Word 2010
Diana R
 
Taller toma fotográfica perspectiva
Taller toma fotográfica perspectivaTaller toma fotográfica perspectiva
Taller toma fotográfica perspectiva
manuposada23
 
Dia del planeta tierra
Dia del planeta tierraDia del planeta tierra
Dia del planeta tierra
MarjhoryLP
 
Aplicaciones de Google
Aplicaciones de GoogleAplicaciones de Google
Aplicaciones de Google
Matiaspardob
 
Herramientas digitales para la educacion en linea
Herramientas digitales para la educacion en lineaHerramientas digitales para la educacion en linea
Herramientas digitales para la educacion en linea
Berenice Mayo
 
Ready Mates ? Katalog 2013
Ready Mates ? Katalog 2013Ready Mates ? Katalog 2013
Ready Mates ? Katalog 2013Alexander Gaab
 
El lado cibernetico de la pluma
El lado cibernetico de la plumaEl lado cibernetico de la pluma
El lado cibernetico de la pluma
Nayely92
 
Lápiz vs camara
Lápiz vs camaraLápiz vs camara
Lápiz vs camara
Katy QR
 
Editorial Barrio Estación
Editorial Barrio Estación Editorial Barrio Estación
Editorial Barrio Estación
Marion Angoulême
 
Tecnologicas
TecnologicasTecnologicas
Suchwerbung Optimieren - Test, Taktik, Controlling (German)
Suchwerbung Optimieren - Test, Taktik, Controlling (German)Suchwerbung Optimieren - Test, Taktik, Controlling (German)
Suchwerbung Optimieren - Test, Taktik, Controlling (German)
Sapient GmbH
 
Telefónica
TelefónicaTelefónica
Telefónica
diego rivera
 
Sistemas wendyparra Unbosque
Sistemas wendyparra UnbosqueSistemas wendyparra Unbosque
Sistemas wendyparra Unbosque
wendyparra
 
Grandes exitos del hip hop
Grandes exitos del hip hopGrandes exitos del hip hop
Grandes exitos del hip hop
Necrosabe
 

Andere mochten auch (19)

Consulta Matronas C S Nou Moles, 1 año
Consulta Matronas C S Nou Moles, 1 añoConsulta Matronas C S Nou Moles, 1 año
Consulta Matronas C S Nou Moles, 1 año
 
la doncella que no quería ser la muerte y los granos de arroz
la doncella que no quería ser la muerte y los granos de arrozla doncella que no quería ser la muerte y los granos de arroz
la doncella que no quería ser la muerte y los granos de arroz
 
Presentacion
PresentacionPresentacion
Presentacion
 
Motivadores del facilitador
Motivadores del facilitadorMotivadores del facilitador
Motivadores del facilitador
 
power lenguaje no verbal
power lenguaje no verbalpower lenguaje no verbal
power lenguaje no verbal
 
Word 2010
Word 2010Word 2010
Word 2010
 
Taller toma fotográfica perspectiva
Taller toma fotográfica perspectivaTaller toma fotográfica perspectiva
Taller toma fotográfica perspectiva
 
Dia del planeta tierra
Dia del planeta tierraDia del planeta tierra
Dia del planeta tierra
 
Aplicaciones de Google
Aplicaciones de GoogleAplicaciones de Google
Aplicaciones de Google
 
Herramientas digitales para la educacion en linea
Herramientas digitales para la educacion en lineaHerramientas digitales para la educacion en linea
Herramientas digitales para la educacion en linea
 
Ready Mates ? Katalog 2013
Ready Mates ? Katalog 2013Ready Mates ? Katalog 2013
Ready Mates ? Katalog 2013
 
El lado cibernetico de la pluma
El lado cibernetico de la plumaEl lado cibernetico de la pluma
El lado cibernetico de la pluma
 
Lápiz vs camara
Lápiz vs camaraLápiz vs camara
Lápiz vs camara
 
Editorial Barrio Estación
Editorial Barrio Estación Editorial Barrio Estación
Editorial Barrio Estación
 
Tecnologicas
TecnologicasTecnologicas
Tecnologicas
 
Suchwerbung Optimieren - Test, Taktik, Controlling (German)
Suchwerbung Optimieren - Test, Taktik, Controlling (German)Suchwerbung Optimieren - Test, Taktik, Controlling (German)
Suchwerbung Optimieren - Test, Taktik, Controlling (German)
 
Telefónica
TelefónicaTelefónica
Telefónica
 
Sistemas wendyparra Unbosque
Sistemas wendyparra UnbosqueSistemas wendyparra Unbosque
Sistemas wendyparra Unbosque
 
Grandes exitos del hip hop
Grandes exitos del hip hopGrandes exitos del hip hop
Grandes exitos del hip hop
 

Ähnlich wie Viele Wege führen nach Rom (mit Notizen)

Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
Oliver Annen
 
Viele Wege führen nach Rom (nur Folien)
Viele Wege führen nach Rom (nur Folien)Viele Wege führen nach Rom (nur Folien)
Viele Wege führen nach Rom (nur Folien)
Stefan Freimark
 
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
integro
 
Workshop "Überblick Web-Strategie"
Workshop "Überblick Web-Strategie"Workshop "Überblick Web-Strategie"
Workshop "Überblick Web-Strategie"
JustRelate
 
Social Software _ mehr als Technologien ...
Social Software _ mehr als Technologien ...Social Software _ mehr als Technologien ...
Social Software _ mehr als Technologien ...Martin Koser
 
Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...
Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...
Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...
Socialbar
 
Online besser-nutzerfreundlich
Online besser-nutzerfreundlichOnline besser-nutzerfreundlich
Online besser-nutzerfreundlichArno Karrasch
 
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON
 
Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!
Lukas Fischer
 
JP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate WebsiteJP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate Website
JP KOM GmbH
 
Design OOA OOD
Design OOA OODDesign OOA OOD
Design OOA OOD
Jeffrey Groneberg
 
überproduct beim Usability Stammtisch Berlin 19. Februar 2014
überproduct beim Usability Stammtisch Berlin 19. Februar 2014überproduct beim Usability Stammtisch Berlin 19. Februar 2014
überproduct beim Usability Stammtisch Berlin 19. Februar 2014Christian Becker
 
Mental Model - Basis für eine nachhaltige Informationsarchitektur
Mental Model - Basis für eine nachhaltige InformationsarchitekturMental Model - Basis für eine nachhaltige Informationsarchitektur
Mental Model - Basis für eine nachhaltige InformationsarchitekturKaren Lindemann
 
Usability & Webdesign 2010
Usability & Webdesign 2010Usability & Webdesign 2010
Usability & Webdesign 2010
Benjamin Wiederkehr
 
Social Intranet Workshop
Social Intranet WorkshopSocial Intranet Workshop
Social Intranet Workshop
Michael Hafner
 
Corporate Travel Forum: UserExperience & EyeTracking
Corporate Travel Forum: UserExperience & EyeTrackingCorporate Travel Forum: UserExperience & EyeTracking
Corporate Travel Forum: UserExperience & EyeTracking
eResult_GmbH
 
SharePoint als ECM Plattform
SharePoint als ECM PlattformSharePoint als ECM Plattform
SharePoint als ECM Plattform
Christian Kiesewetter
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
SteffenHeim
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
Peter Rozek
 

Ähnlich wie Viele Wege führen nach Rom (mit Notizen) (20)

Website Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre TeamarbeitWebsite Konzeption - Eine interdisziplinäre Teamarbeit
Website Konzeption - Eine interdisziplinäre Teamarbeit
 
Viele Wege führen nach Rom (nur Folien)
Viele Wege führen nach Rom (nur Folien)Viele Wege führen nach Rom (nur Folien)
Viele Wege führen nach Rom (nur Folien)
 
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
Der Socio-Technical Walkthrough als Methode der Dokumentation und Analyse von...
 
Workshop "Überblick Web-Strategie"
Workshop "Überblick Web-Strategie"Workshop "Überblick Web-Strategie"
Workshop "Überblick Web-Strategie"
 
Social Software _ mehr als Technologien ...
Social Software _ mehr als Technologien ...Social Software _ mehr als Technologien ...
Social Software _ mehr als Technologien ...
 
Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...
Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...
Markus Schranner: "Das Lean Startup Prinzip - Potentiale für NGOs und soziale...
 
Online besser-nutzerfreundlich
Online besser-nutzerfreundlichOnline besser-nutzerfreundlich
Online besser-nutzerfreundlich
 
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
USECON & Microsoft: Wie Sie Ihren User Interface Design Prozess aufsetzen u…
 
Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!Design Thinking - Was niemand über Design Thinking sagt!
Design Thinking - Was niemand über Design Thinking sagt!
 
JP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate WebsiteJP│KOM:Relaunch Corporate Website
JP│KOM:Relaunch Corporate Website
 
Design OOA OOD
Design OOA OODDesign OOA OOD
Design OOA OOD
 
überproduct beim Usability Stammtisch Berlin 19. Februar 2014
überproduct beim Usability Stammtisch Berlin 19. Februar 2014überproduct beim Usability Stammtisch Berlin 19. Februar 2014
überproduct beim Usability Stammtisch Berlin 19. Februar 2014
 
Mental Model - Basis für eine nachhaltige Informationsarchitektur
Mental Model - Basis für eine nachhaltige InformationsarchitekturMental Model - Basis für eine nachhaltige Informationsarchitektur
Mental Model - Basis für eine nachhaltige Informationsarchitektur
 
Virtuelle projekte
Virtuelle projekteVirtuelle projekte
Virtuelle projekte
 
Usability & Webdesign 2010
Usability & Webdesign 2010Usability & Webdesign 2010
Usability & Webdesign 2010
 
Social Intranet Workshop
Social Intranet WorkshopSocial Intranet Workshop
Social Intranet Workshop
 
Corporate Travel Forum: UserExperience & EyeTracking
Corporate Travel Forum: UserExperience & EyeTrackingCorporate Travel Forum: UserExperience & EyeTracking
Corporate Travel Forum: UserExperience & EyeTracking
 
SharePoint als ECM Plattform
SharePoint als ECM PlattformSharePoint als ECM Plattform
SharePoint als ECM Plattform
 
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-KundenblogVorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
Vorteile von Kundenblogs anhand der Fallstudie Baur-Kundenblog
 
Responsive Content Experience
Responsive Content ExperienceResponsive Content Experience
Responsive Content Experience
 

Mehr von Stefan Freimark

15 Lessons from 15 Years in the Industry
15 Lessons from 15 Years in the Industry15 Lessons from 15 Years in the Industry
15 Lessons from 15 Years in the Industry
Stefan Freimark
 
UXcamp Europe Sponsor information 2017
UXcamp Europe Sponsor information 2017UXcamp Europe Sponsor information 2017
UXcamp Europe Sponsor information 2017
Stefan Freimark
 
How to organize UXcamp Europe
How to organize UXcamp EuropeHow to organize UXcamp Europe
How to organize UXcamp Europe
Stefan Freimark
 
Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)
Stefan Freimark
 
Designing Multi-Device Experiences (book review)
Designing Multi-Device Experiences (book review)Designing Multi-Device Experiences (book review)
Designing Multi-Device Experiences (book review)
Stefan Freimark
 
IAK13: Workshop-Workshop (Vorbereitung)
IAK13: Workshop-Workshop (Vorbereitung)IAK13: Workshop-Workshop (Vorbereitung)
IAK13: Workshop-Workshop (Vorbereitung)
Stefan Freimark
 
Mental Model für Individualreisende
Mental Model für IndividualreisendeMental Model für Individualreisende
Mental Model für Individualreisende
Stefan Freimark
 
Interview 100305a (ohne Tätigkeiten)
Interview 100305a (ohne Tätigkeiten)Interview 100305a (ohne Tätigkeiten)
Interview 100305a (ohne Tätigkeiten)
Stefan Freimark
 
Interview 100305a (mit Tätigkeiten)
Interview 100305a (mit Tätigkeiten)Interview 100305a (mit Tätigkeiten)
Interview 100305a (mit Tätigkeiten)
Stefan Freimark
 
Interview 100216a (ohne Tätigkeiten)
Interview 100216a (ohne Tätigkeiten)Interview 100216a (ohne Tätigkeiten)
Interview 100216a (ohne Tätigkeiten)
Stefan Freimark
 
Interview 100216a (mit Tätigkeiten)
Interview 100216a (mit Tätigkeiten)Interview 100216a (mit Tätigkeiten)
Interview 100216a (mit Tätigkeiten)
Stefan Freimark
 
Mental Models (nur Folien)
Mental Models (nur Folien)Mental Models (nur Folien)
Mental Models (nur Folien)
Stefan Freimark
 
Mental Models (mit Notizen)
Mental Models (mit Notizen)Mental Models (mit Notizen)
Mental Models (mit Notizen)
Stefan Freimark
 
Accessibility (mit Notizen)
Accessibility (mit Notizen)Accessibility (mit Notizen)
Accessibility (mit Notizen)
Stefan Freimark
 
Accessibility (ohne Notizen)
Accessibility (ohne Notizen)Accessibility (ohne Notizen)
Accessibility (ohne Notizen)
Stefan Freimark
 

Mehr von Stefan Freimark (15)

15 Lessons from 15 Years in the Industry
15 Lessons from 15 Years in the Industry15 Lessons from 15 Years in the Industry
15 Lessons from 15 Years in the Industry
 
UXcamp Europe Sponsor information 2017
UXcamp Europe Sponsor information 2017UXcamp Europe Sponsor information 2017
UXcamp Europe Sponsor information 2017
 
How to organize UXcamp Europe
How to organize UXcamp EuropeHow to organize UXcamp Europe
How to organize UXcamp Europe
 
Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)Berufsbild Konzepter (2015)
Berufsbild Konzepter (2015)
 
Designing Multi-Device Experiences (book review)
Designing Multi-Device Experiences (book review)Designing Multi-Device Experiences (book review)
Designing Multi-Device Experiences (book review)
 
IAK13: Workshop-Workshop (Vorbereitung)
IAK13: Workshop-Workshop (Vorbereitung)IAK13: Workshop-Workshop (Vorbereitung)
IAK13: Workshop-Workshop (Vorbereitung)
 
Mental Model für Individualreisende
Mental Model für IndividualreisendeMental Model für Individualreisende
Mental Model für Individualreisende
 
Interview 100305a (ohne Tätigkeiten)
Interview 100305a (ohne Tätigkeiten)Interview 100305a (ohne Tätigkeiten)
Interview 100305a (ohne Tätigkeiten)
 
Interview 100305a (mit Tätigkeiten)
Interview 100305a (mit Tätigkeiten)Interview 100305a (mit Tätigkeiten)
Interview 100305a (mit Tätigkeiten)
 
Interview 100216a (ohne Tätigkeiten)
Interview 100216a (ohne Tätigkeiten)Interview 100216a (ohne Tätigkeiten)
Interview 100216a (ohne Tätigkeiten)
 
Interview 100216a (mit Tätigkeiten)
Interview 100216a (mit Tätigkeiten)Interview 100216a (mit Tätigkeiten)
Interview 100216a (mit Tätigkeiten)
 
Mental Models (nur Folien)
Mental Models (nur Folien)Mental Models (nur Folien)
Mental Models (nur Folien)
 
Mental Models (mit Notizen)
Mental Models (mit Notizen)Mental Models (mit Notizen)
Mental Models (mit Notizen)
 
Accessibility (mit Notizen)
Accessibility (mit Notizen)Accessibility (mit Notizen)
Accessibility (mit Notizen)
 
Accessibility (ohne Notizen)
Accessibility (ohne Notizen)Accessibility (ohne Notizen)
Accessibility (ohne Notizen)
 

Viele Wege führen nach Rom (mit Notizen)

  • 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! Hallo! Ich möchte kurz noch selbst ein paar Worte zu mir sagen...
  • 3. ...ich arbeite als Konzepter für NOLTE&LAUTH in Berlin. Zuvor war ich Konzepter bei Phase 4 in München. Ich habe in ein paar größeren Projekten gearbeitet, zum Beispiel für...
  • 8. Wenn ich nicht gerade in der Agentur arbeite, dann fotografiere ich ganz gerne.
  • 9. Was ich Euch nicht erzähle ... Bevor wir einsteigen möchte ich noch sagen, 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 Es gibt jede Menge Methoden: Use Cases, Swimlanes, Backcasting... Wahrscheinlich haben nur wenige alle diese Methoden schon genutzt. Ich selbst habe noch nicht alle genutzt.
  • 11. Bild: David Iliff Manchmal muss man auch völlig neue Wege gehen: Weil man mit einer Situation konfrontiert ist, die einem so noch nicht begegnet ist. Im Frühjahr war ich in einem Projekt, in dem ein Konzern ein neues CMS einführen wollte. Der Kunde sagte: „Übrigens, das muss für unsere 7 Marken funktionieren. Und nicht nur in Deutschland, sondern in 20 Ländern.“ Hmm, worauf kommt‘s bei multi-brand in einem internationalen Projekt an? Hatte ich bisher noch nicht. Aber macht nichts:
  • 12. Reisevorbereitung Mit einer guten Reisevorbereitung kann man jede Situation meistern!
  • 13. Strukturiert vorgehen! • An wen richte ich mich? • Was möchte ich erreichen? • Welche Informationen benötige ich? • Gibt es Beispiele? • Loslegen! • Überarbeiten Eine strukturierte Vorgehensweise hilft: Zunächst stelle ich mir die Frage, an wen ich mich richte - wer ist die Zielgruppe? Dann: Was möchte ich erreichen, was ist mein Ziel, oder was ist der Zweck eines Dokuments? Fehlen mir noch Informationen, bevor ich anfangen kann? Gibt es Beispiele, hat jemand so etwas schon einmal gemacht? Dann fange ich an etwas auf Papier zu bringen, und anschließend muss das Dokument wahrscheinlich überarbeitet werden. Ich fange mal vorne an:
  • 14. An wen richte ich mich? An wen richte ich mich, wer ist meine Zielgruppe? Sind diese Leute mit dem Projekt vertraut? Sind sie technisch versiert? Hier ein paar Beispiele:
  • 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 Kunden - z.B. aus der Marketingabteilung - denken in der Regel konkret. Sie beschäftigen sich zur zeitweise mit dem Projekt, weil sie noch andere Aufgaben haben. Sie müssen interne, politische Interessen berücksichtigen. Und sie benötigen von uns nicht nur eine Lösung, sondern auch Argumente um diese Lösung intern vertreten zu können.
  • 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 Grafiker denken visuell. Ich bin sehr wenigen Grafikern begegnet, die die Notizen neben Wireframes durchlesen. Sie haben die Gestaltung im Blick und ihnen ist ein durchgängiges Farbkonzept manchmal wichtiger als eine Usability-Frage. Grafiker lassen auch mal was weg, weil sie es vergessen oder weil es „nicht gut aussieht“. Ich habe mal ein Layout von der Produktdetailseite eines Online-Shops gesehen, auf dem der Button „In den Warenkorb legen“ gefehlt hat. Sowas passiert. :-) Und Grafiker denken eher in ganzen Seiten statt in einzelnen 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 Techniker denken dagegen in Komponenten statt in ganzen Seiten; die brauchen es genau umgekehrt. Techniker brauchen auch sehr detaillierte Angaben: Wenn ihnen etwas fehlt, überlegen sie sich vielleicht selbst eine Lösung, die dann Usability-Probleme verursacht. Sie wollen auch früh im Projekt Informationen haben und unter Umständen legen sie sich auf eine technische Lösung fest, ohne die Erfordernisse der User Experience zu berücksichtigen.
  • 18. Neue Team-Mitglieder • Kennen die Projekthistorie nicht ? Es gibt noch eine weitere Zielgruppe: Leute, die ich noch gar nicht kenne. Vielleicht kommen zu einem späteren Zeitpunkt neue Kollegen ins Projektteam. Oder das Projekt wird für 3 Monate auf Eis gelegt, und jemand anders nimmt später die Arbeit daran wieder auf. Die Deliverables sollten so etwas berücksichtigen.
  • 19. Was möchte ich erreichen? Ich weiß, wen ich erreichen möchte. Stellt sich die Frage: Was will ich erreichen? Ein Dokument kann 4 Zwecken dienen: Verstehen, Kommunizieren, Produktion vorbereiten und begleiten, und Dokumentieren. Ich habe ein paar Beispiele mitgebracht.
  • 20. Verstehen Bevor ich mir eine Lösung überlegen kann, muss ich erst einmal Verständnis zu ein paar Punkten erlangen.
  • 21. Context Content Users Morville, Rosenfeld: Information Architecture for the World Wide Web (O‘Reilly, 2006) oreilly.com/catalog/infoarch3 Das hier kennt jeder: Context, Content, Users. Context kann sein: Geschäftsziele oder zum Beispiel technische Rahmenbedingungen. Content: Muss Content neu erstellt werden? Ist Content da, der migriert werden soll? In welchen Datenstrukturen liegt Content vor? Und wo kommen die Inhalte überhaupt her, wie sieht es mit der Datenversorgung aus? Users: Wer ist die Zielgruppe? Welche Bedürfnisse, Motivationen und Ziele haben diese Leute? Das alles muss im Projekt berücksichtigt werden.
  • 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 Für den Münchner Verkehrsverbund habe ich letztes Jahr die Navigationsstruktur überarbeitet. Bevor ich die 10 verschiedenen Zeitkarten sinnvoll gruppieren konnte, musste ich selbst erst einmal den Tarif verstehen. Leider hat der Kunde dann gegen ärztlichen Rat gehandelt, aber man kann nicht immer gewinnen. Trotzdem hat mir die Arbeit geholfen, als es später um die Überarbeitung des Seitentyps „Ticketseite“ ging.
  • 23. With kind permission by Indi Young. Indi Young: Mental Models (Rosenfeld Media, 2008) www.rosenfeldmedia.com/books/mental-models Mental Model Eine sehr gute Methode um die Menschen zu verstehen die unser Angebot nutzen, sind „Mental Models“ von Indi Young. In der oberen Hälfte werden die Motivationen und Tätigkeiten eingetragen. In der unteren Hälfte stehen die Funktionen, Services und Produkte, mit denen das Angebot diese Tätigkeiten unterstützt. Hier steht jetzt recht wenig in der unteren Hälfte - vermutlich ist das aus einem echten Projekt von Indi Young. Ich zeige mal einen größeren Ausschnitt.
  • 24. With kind permission by Indi Young. Indi Young: Mental Models (Rosenfeld Media, 2008) www.rosenfeldmedia.com/books/mental-models Mental Model Hier geht es um den Kauf bzw. die Anmietung einer Immobilie. Das hier ist ein „Mental Space“. Innerhalb des Mental Space „Find likely houses“ gibt es verschiedene Tätigkeiten, zum Beispiel „Look at ads“. Das Schöne bei Mental Models ist, dass diese grundlegenden Tätigkeiten über lange Zeit gleich bleiben: Unsere Großeltern haben sich vor 60 Jahren Anzeigen angesehen, wir machen das heute auch. Damals in Zeitungen, heute verwenden wir ImmobilienScout.
  • 25. With kind permission by Indi Young. Indi Young: Mental Models (Rosenfeld Media, 2008) www.rosenfeldmedia.com/books/mental-models Mental Model Mental Models sind eine Art des qualitativen Research, und man kann sie für verschiedene Zwecke einsetzen: Einerseits natürlich, um die Nutzer besser zu verstehen und um Empathie für ihre Bedürfnisse und Motivationen zu entwickeln. Andererseits kann man in einem zweiten Schritt Personas daraus ableiten oder ein High-Level-Navigationssystem. Oder man kann es strategisch einsetzen: Wenn in der unteren Hälfte das Angebot eingetragen ist, lässt sich leicht ablesen, wo es noch Handlungsbedarf gibt.
  • 26. Kommunizieren Ein anderer Zweck den Methoden erfüllen, ist Kommunizieren: Vermitteln von Ideen oder wie etwas aufgebaut ist oder funktioniert.
  • 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 Hier ein Beispiel von Joshua Porter. Kunden glauben oft, dass man eine Community nur errichten und aufsperren muss, und schon nehmen alle begeistert daran teil. Dass es anders ist, zeigt dieses Diagramm sehr anschaulich: Nutzer müssen erst verschiedene Hürden überspringen, bevor sie zu passionierten Nutzern werden. So etwas kann man gut in einer Kundenpräsentation einsetzen. Joshua Porter hat zu dem Thema auch ein Buch geschrieben, das ich sehr empfehlen kann: „Designing for the Social Web.“
  • 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 Wenn man weiß welche Personas das System verwenden, kann man sich auch mal grobe Gedanken machen, welche Use Cases es gibt und wie jemand mit dem System interagiert. Hier ist ein Beispiel: Jeff hat Werbung für ein neues Auto gesehen und möchte jetzt mehr erfahren. Er setzt sich an seinen Computer und ruft die Homepage des Herstellers auf. Dort findet er einen Teaser, der ihn zur Produktseite bringt. Ihm gefällt der Wagen und er wüsste noch gerne, wie viel er kosten soll. Jeff findet den Einstieg in den Konfigurator und stellt fest, dass der Preis von der Motorisierung abhängig ist. Er wird unterbrochen - das Essen ist fertig - und speichert die begonnene Konfiguration. So eine Foto-Love-Story ist schon sehr anschaulich, aber was ist, wenn man noch mehr dazu sagen muss? In dem Fall bietet es sich an, die 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 ...zum Swimlane-Diagramm auszubauen. Hier stehen noch Notizen dabei, welche Use Cases von dem Szenario betroffen sind, ein kleines Flow-Chart, und welche Geschäftsprozesse betroffen sind. Sowas eignet sich gut um zu einem Stakeholder zu gehen: „Sie sind der Owner des Systems X und wir haben da etwas vor, dass Ihr System beeinflusst. Wir möchten gerne mit Ihnen ins Gespräch kommen.“
  • 30. Produktion vorbereiten und begleiten Okay, soweit das Thema Kommunizieren. Nummer 3 bei den Zielen ist die Produktionsvorbereitung und -begleitung.
  • 31. Zentraldokument Ich arbeite gerne in Excel und lege ein Zentraldokument an, in dem die Struktur der Website und ein paar Informationen zu Inhalten abgebildet sind. Andere Begriffe die ich dafür gehört habe sind Content Inventory oder Take-up Grid. Das Mindeste was in so einer Tabelle stehen sollte, ist eine Nummer für die Seite, der Seitenname und der Seitentyp. Das Schöne an Excel ist, dass man das nach Bedarf noch ergänzen kann...
  • 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 ...zum Beispiel Spalten für die verwendeten Teaser, Infos zur Suchmaschinenoptimierung oder weitere Informationen wie beispielsweise die Verantwortlichkeit auf Kundenseite.
  • 33. Folgende Situation ... • 2 Grafiker • 3 Tage Zeit • 119 Layouts zu überarbeiten Excel ist auch gut geeignet, um Dinge nachzuverfolgen. Letztes Jahr musste ich in einem Projekt 2 Grafiker steuern. Wir hatten 3 Tage Zeit, um Änderungen in 120 Layouts vorzunehmen.
  • 34. Screen List Unsere Partneragentur hat eine Liste von allen Screens erstellt, die ich für meine Zwecke angepasst habe.
  • 35. Screen List Ich zeige das mal in groß: Es gibt Spalten für Dateinamen, die To-Dos, von wann ist die letzte Version, wie ist der aktuelle Status, Kommentare.
  • 36. Screen List Ich habe alle Layouts ausgedruckt. Dazu habe ich sie in Safari geöffnet, da dann der Dateiname mit ausgedruckt wird. Dann habe ich handschriftliche Notizen gemacht, bin damit in die Grafik und bin das mit den Kollegen mündlich durchgegangen: Bitte die Datei nicht hurz-purz nennen sondern s1010_search_advanced, Buttons müssen ausgetauscht werden, eine Checkbox muss angehakt sein, der Suchen-Button muss woanders stehen und so weiter. Ich habe hier osCommerce als Beispiel genommen - ich kann leider kein Layout aus dem echten Projekt zeigen.
  • 37. Screen List Den aktuellen Status habe ich dann in die Excel-Tabelle eingetragen. Bei 10 Layouts kann man sich Excel sparen, aber wenn man über 100 Layouts hat, den Grafikern stündlich neue Sachen auf den Tisch legt und man von ihnen stündlich etwas zurückbekommt, dann hilft es sehr. Wenn ich überarbeitete Layouts bekommen habe, dann habe ich mir immer auch wieder die Ausdrucken mit den Anmerkungen geben lassen, um zu kontrollieren dass alles richtig umgesetzt wurde. Wenn alles gepasst hat, habe ich die jeweilige Zeile auf hellgrün gesetzt. Abends habe ich die fertigen Layouts in eine Zip-Datei gepackt und ausgeliefert - das sind die dunkelgrünen Einträge. So konnte ich auch dem Projektmanagement leicht einen Status geben.
  • 38. Dokumentieren Der letzte Zweck eines Dokuments ist das Dokumentieren selbst.
  • 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 Zu Beginn eines Projekts ist es sinnvoll, eine Projektdefinition zu machen - auch Creative Brief genannt.
  • 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 Ich zeige das mal größer: Einfach nur in zwei, drei Sätzen sagen, worum es in dem Projekt geht. Das hilft vor allem neuen Team-Mitgliedern, schnell in ein Projekt reinzukommen. Fünf Präsentationen mit jeweils 100 Seiten können nur eine Ergänzung sein, aber irgendjemand muss mal auf den Punkt bringen, worum es geht.
  • 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. Seite 2 von 3 Was man auch unbedingt festhalten sollte ist eine kurze Beschreibung des Problems, wer sind die Zielgruppen, welche Ziele sollen erreicht werden und wie wird der Erfolg gemessen, welche Rahmenbedingungen müssen berücksichtigt werden, was ist in scope und was ist out of scope. Eine Projektdefinition hilft, Scope Creep zu vermeiden: Angenommen in 3 Monaten macht ein Stakeholder einen Vorschlag für ein weiteres Feature. Der Vorschlag kann gut sein, aber vielleicht muss man sagen: „Vor 3 Monaten haben wir etwas anderes besprochen. Wir können das machen, allerdings brauchen wir dann länger.“ Oder: „Der Vorschlag ist gut, aber wir sollten überlegen, ob er unseren damals definierten Zielgruppen dient.“
  • 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 Seite 3 von 3 Am Schluss einer Projektdefinition können noch die Kontaktdaten der Ansprechpartner stehen sowie eine Dokumenthistorie. Letzteres ist generell sinnvoll: Es wird der Tag kommen an dem das Projektmanagement sagt: „Wir haben 10 Tage Konzept verkauft, wir sind jetzt bei Tag 20. Wo ist die Zeit hingegangen?“ Mit der Historie eines Dokuments kann man zeigen, wie viele Schleifen gedreht wurden. Das hilft dem Projektmanagement auch, um beim Kunden das Budget nachzuverhandeln.
  • 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 Soweit die Projektdefinition. Am anderen Ende des Konzeptionsprozesses steht die Spezifikation. Neulich war im Wireframes Magazine ein Posting zu OAD - „object-oriented approach to design“ von Nick Iozzo. Er verfolgt einen extrem modularen Ansatz. Module können verschiedene Zustände haben, beispielsweise in Abhängigkeit davon, ob der Nutzer gerade angemeldet ist oder nicht, ob er anhand eines Cookies erkannt werden konnte oder nicht, oder eine regelbasierte Anzeige von Inhalten. Statt sämtliche Ausprägungen in Wireframes oder Layouts zu bauen, verwendet er Module. Zugegeben, ist jetzt nicht besonders revolutionär, aber Nick Iozzo treibt es auf die Spitze. Ich habe mir sagen lassen dass Axure ähnlich funktioniert, allerdings hatte ich noch keine Gelegenheit, Axure in einem Projekt zu testen.
  • 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 Hier sind die:: verschiedenen Zustände für ein Modul zu 4.26.2009 at 8:40 PM Copyright 2009 :: Proprietary and Confidential :: Last modified on sehen. :: Amazon on OAD example v1.0.vsd
  • 45. With kind permission by Nathan Curtis. Nathan Curtis: Modular Web Design (New Riders, t.b.a.) unify.eightshapes.com Unify Dieses Poster hat Nathan Curtis vor ein paar Wochen auf dem IA Summit präsentiert (ich darf es mit seiner freundlichen Genehmigung hier zeigen). Unfiy ist ein Vorlagenpaket seiner Agentur EightShapes, das mit InDesign ab CS3 verwendet werden kann. Das Poster ist eine InDesign-Datei, die Inhalte aus anderen Dateien einbindet. Der Vorteil ist, dass sich Änderungen durch alle Deliverables durchziehen. Der Nachteil ist, dass man es mit jeder Menge Dateien zu tun hat. Oder wie Nathan Curtis auf dem Poster selbst schreibt: „This ain‘t your Grandma‘s single Visio file.“ Übrigens: Wenn man in dem PDF des Posters auf 600% reinzoomt, kann man sogar die Inhalte der einzelnen Seiten lesen. :-)
  • 46. Welche Informationen benötige ich? Gut, ich weiß wen ich ansprechen möchte und welches Ziel ich erreichen möchte. Falls jetzt das Gefühl aufkommt dass ich noch nicht alle Informationen habe um loslegen zu können, versuche ich mir diese Infos zu beschaffen.
  • 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? Welche Informationen fehlen mir? Wer kann mir diese Informationen geben? Ich spreche mit Projektmitgliedern oder auch Stakeholdern, um alle nötigen Informationen zu sammeln. Spätestens jetzt ist die Gelegenheit da, um mit diesen Personen über das Dokument zu sprechen - um beispielsweise mit der Technik abzuklären was sie bekommen und um nachzufragen, was sie brauchen.
  • 48. Gibt es Beispiele? Gibt es Beispiele? Hat jemand so etwas schon einmal gemacht? Ich suche nach ähnlichen Dokumenten, bevor ich das Rad neu erfinde.
  • 49. Gibt es Beispiele? • Vorlagen • Deliverables aus alten Projekten • Mit Kollegen die Vorgehensweise beraten • Literatur Ich sehe natürlich erst in den Vorlagen nach, und sehe mir dann Deliverables aus alten bzw. anderen Projekten an. Oder ich berate mich mit Kollegen, oder sehe in der Literatur nach. Auf das Thema Literatur komme ich gleich nochmal zurück.
  • 51. Wenn es schnell gehen muss, wenn ich nur einen Punkt verdeutlichen möchte, oder wenn ich selbst noch nicht so genau weiß wo die Reise hingeht, fange ich mit Papier und Stift an.
  • 52. Im weiteren Verlauf verfeinere ich die Dokumente - hier ist nochmal das Wireframe-Beispiel von Nick Iozzo. Kleiner Einschub hierzu: Vorsicht mit all zu detaillierten Wireframes. Erfahrene Grafiker könnten sich bevormundet fühlen, wenn man zu viel Layout vorgibt. Und unerfahrene Grafiker machen in ihren Layouts vielleicht nur colorierte Wireframes daraus. Hier kommt es auch wieder auf die Situation an.
  • 53. Überarbeiten Wenn ich etwas Vorzeigbares habe, gehe ich zu meinen Kollegen im Team und zeige es ihnen. Hilft Euch das bei Eurer Aufgabe weiter? Braucht Ihr mehr oder etwas anderes? Ist das aus Eurer Perspektive richtig was hier steht? Und dann geht‘s von vorne los. :-)
  • 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 Fazit: Bevor es losgeht, denke ich eine Minute über den Hauptzweck für ein Dokument nach: Was brauche ich in der Situation? Den Umfang und den Inhalt passe ich an die Zielgruppe an. Brauche ich überhaupt ein Dokument oder kann ich etwas informell in einem Gespräch am Whiteboard lösen? Und: 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 ... Eine Sache noch...
  • 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 Hier ein Auszug aus einem Briefing, das ich vor 2 Wochen bekommen habe: Zielgruppe sind Vertriebsmitarbeiter in der Nutzfahrzeugsparte eines Automobilherstellers. Kommunikationsziele: Stärkung der internen Kommunikation und Web 2.0. Schaffung eines Community-Portals mit Incentive-Charakter. Verbesserung der Kommunikation, Identifikation mit dem Unternehmen, Vertrieb dieser Nutzfahrzeuge. Was fällt auf? Das sind alles Lösungen. Lösungen und Ziele. Im gesamten 6-seitigen Briefing war nicht einmal von einem Problem die Rede. Warum soll die interne Kommunikation gestärkt werden? Liegt die im Argen? Warum soll Web 2.0 verwendet werden? Weil es modern ist? Warum soll ein Community-Portal geschaffen werden? Ich stelle diese Fragen um herauszufinden, ob eine Community überhaupt das ist, was der Kunde braucht. Ich muss wissen, wo der Schuh drückt. Vielleicht benötigen die Vertriebsmitarbeiter ja etwas ganz anderes, und ein Informationsportal würde sich anbieten - meinetwegen auch mit angeschlossenem Gewinnspiel und Tell-a-friend-Funktion. Und wenn eine Community das Richtige ist, dann können wir sie nicht einfach aufsperren und mit begeisterten Nutzern rechnen - es muss Community-Building betrieben werden. Der Usage Lifecycle von Joshua Porter wird mir bei der Argumentation helfen.
  • 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! Wenn ich eins gelernt habe, dann das: Nicht mit der Lösung anfangen, sondern erst das Problem verstehen! Wir als Konzepter sollten aufpassen, dass wir uns nicht all zu sehr in unsere Methoden verlieben, und „vor Liebe blind“ werden. Wir sollten uns einen klaren Blick bewahren und Aufgaben hinterfragen, statt sofort loszulegen und mit dem Kopf durch die Wand zu gehen.
  • 59. Lektüre für die Reise Noch ein paar Literaturempfehlungen:
  • 60. „Communicating Design“ von Dan Brown ist der Klassiker: Die 10 wichtigsten Dokumente und Methoden werden ausführlich vorgestellt.
  • 61. „Designing for the Digital Age“ von Kim Goodwin ist im März 2009 erschienen. Die Autorin beschreibt auf 700 Seiten den Konzeptionsprozess der Agentur Cooper. Wenn Ihr nur ein Buch lesen wollt, dann dieses.
  • 62. Indi Young hat zu „Mental Models“ ein sehr gutes Buch geschrieben. Kaufbefehl - das lohnt sich wirklich!
  • 63. „Making things happen“ von Scott Berkun ist ein gutes Buch zum Thema Projektmanagement. Als Konzepter ist man ja nicht nur Schnittstelle zwischen Agentur und Kunde, sondern auch innerhalb der Agentur zwischen Grafik und Technik - dadurch muss man zwangsläufig auch Projektmanagement-Aufgaben übernehmen. Das Buch enthält auch ein Kapitel zum Thema Projektdefinition.
  • 64. wireframes.linowski.ca Da darf ich eine Kollegin aus Hamburg zitieren: „Die üblichen Branchenpornos“, zum Beispiel „Boxes and Arrows“, das „Smashing Magazine“ oder das hier gezeigte „Wireframes Magazine“.
  • 65. Gute Dank! VielenReise! stefan@freimark.de slideshare.net/sfreimark www.freimark.de Vielen Dank!
  • 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 © • 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 ©