SlideShare ist ein Scribd-Unternehmen logo
1 von 68
Downloaden Sie, um offline zu lesen
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!
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
Bild: David Iliff
Reisevorbereitung
Strukturiert vorgehen!


•   An wen richte ich mich?
•   Was möchte ich erreichen?
•   Welche Informationen benötige ich?
•   Gibt es Beispiele?
•   Loslegen!
•   Überarbeiten
An wen richte ich mich?
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
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
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
Neue Team-Mitglieder

    • Kennen die Projekthistorie
     nicht




?
Was möchte ich erreichen?
Verstehen
Context




Content                                          Users



            Morville, Rosenfeld: Information Architecture for the World Wide Web (O‘Reilly, 2006)
                                                                      oreilly.com/catalog/infoarch3
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
With kind permission by Indi Young.

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




Mental Model
With kind permission by Indi Young.

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




Mental Model
With kind permission by Indi Young.

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




Mental Model
Kommunizieren
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
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
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
Produktion vorbereiten und begleiten
Zentraldokument
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
Folgende Situation ...



• 2 Grafiker
• 3 Tage Zeit
• 119 Layouts zu überarbeiten
Screen List
Screen List
Screen List
Screen List
Dokumentieren
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
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
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.
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
(.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
+),-.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
With kind permission by Nathan Curtis.

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




Unify
Welche Informationen benötige ich?
Welche Informationen benötige ich?


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


•   Vorlagen
•   Deliverables aus alten Projekten
•   Mit Kollegen die Vorgehensweise beraten
•   Literatur
Loslegen!
Überarbeiten
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
Das Wichtigste ...
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
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!
Lektüre für die Reise
wireframes.linowski.ca
Gute Dank!
VielenReise!
stefan@freimark.de
slideshare.net/sfreimark
www.freimark.de
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 ©
•   Graffiti: Stefan Freimark
•   Zielgruppe Kunde: istockphoto.com, ID 7763242 ©
•   Zielgruppe Grafik: istockphoto.com, ID 4087682 ©
•   Zielgruppe Technik: istockphoto.com, ID 5305920 ©
•   Deliverables: Stefan Freimark

Buchcover
• Communicating Design: Peachpit ©
• Designing for the Digital Age: Wiley ©
• Mental Models: Rosenfeld Media ©
• Making things happen: O‘Reilly ©
Screenshots
• Wireframes Magazine: Jakub Linowski ©

Weitere ähnliche Inhalte

Mehr von 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 (8)

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 (nur Folien)

  • 1. Bild: David Iliff Viele Wege führenRom Rom Viele Wege führen nach nach Methoden in der Website-Konzeption Methoden in der Website-Konzeption
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9. Was ich Euch nicht erzähle ...
  • 10. Design the Box Concept Maps Mental Model Multi Variant Tests Affinity Diagram Benchmark Analysis Task Analysis Gap Analysis Page Description Diagram Swimlanes Controlled Vocabulary Use Cases Guerilla Ethnography Backcasting Taxonomy Storyboard Components Paper Prototype Personas Content Inventory Wireframes HiFi Prototype Focus Group Templates Scribbles Creative Brief Content Analysis Content Audit Sitemaps Card Sort Heuristic Evaluation Patterns Wireflows User Journey Usability Test Business Requirements Capture Scenarios Prototypes Specification Split Tests Conversational Sketching Page Types
  • 13. Strukturiert vorgehen! • An wen richte ich mich? • Was möchte ich erreichen? • Welche Informationen benötige ich? • Gibt es Beispiele? • Loslegen! • Überarbeiten
  • 14. An wen richte ich mich?
  • 15. Kunde • Denkt konkret • Beschäftigt sich nur zeitweise mit dem Projekt • Muss interne Interessen berücksichtigen • Benötigt neben Lösungen auch Argumente, um sie intern zu vertreten
  • 16. Grafik • Denkt visuell: Liest oft keine Anmerkungen bei Wireframes • Farbkonzepte sind manchmal wichtiger als gute Usability • Lässt auch mal was weg • Denkt eher in Seiten statt in Komponenten
  • 17. Technik • Denkt abstrakt • Denkt in Komponenten statt in Seiten • Braucht detaillierte Angaben • Wollen sehr früh im Projekt Informationen haben • Legt früh technische Vorgaben fest, die u.U. mit dem Konzept kollidieren
  • 18. Neue Team-Mitglieder • Kennen die Projekthistorie nicht ?
  • 19. Was möchte ich erreichen?
  • 21. Context Content Users Morville, Rosenfeld: Information Architecture for the World Wide Web (O‘Reilly, 2006) oreilly.com/catalog/infoarch3
  • 22. Vergleich von MVV-Zeitkarten IsarCard9Uhr im Abo Ausbildungstarif I + II IsarCard60 im Abo IsarCard-Woche IsarCard-Monat IsarCard9Uhr AboPlusCard IsarCardAbo IsarCardJob IsarCard60 Art (Dauer) Wochenkarte Monatskarte Monats- oder Jahreskarte Monatskarte Monats- oder Jahreskarte Monatskarte Monats- oder Jahreskarte Wochen- oder Jahreskarte Jahreskarte Monatskarte Art (Abo) Bar Bar Abo Bar Abo Bar Abo Bar Firmen-Abo Abo Gültigkeitsbereich je nach Anzahl der Ringe je nach Anzahl der Ringe je nach Anzahl der Ringe Innenraum, Außenraum Innenraum, Außenraum Innenraum, Außenraum Innenraum, Außenraum je nach Anzahl der Ringe je nach Anzahl der je nach Kombination oder Gesamtnetz oder Gesamtnetz oder Gesamtnetz oder Gesamtnetz Ringe von Verkehrs-verbünden Gültigkeitsdauer 1 Woche + bis 12:00 am 1 Monat + bis 12:00 am 1 Jahr 1 Monat + bis 12:00 am 1 Jahr 1 Monat + bis 12:00 am 1 Jahr 1 Woche oder 1 Monat 1 Jahr 1 Jahr ersten Werktag der ersten Werktag des ersten Werktag des ersten Werktag des Folgewoche Folgemonats Folgemonats Folgemonats Übertragbarkeit ja ja wahlweise ja wahlweise ja wahlweise nein nein wahlweise Mitnahme Kinder-Regelung Kinder-Regelung Kinder-Regelung Kinder-Regelung Kinder-Regelung nein nein nein Kinder-Regelung Erwachsenen-Minahme SA + SO (4 Personen) Ausschlusszeit nein nein nein MO-FR, 6-9 Uhr MO-FR, 6-9 Uhr MO-FR, 6-9 Uhr MO-FR, 6-9 Uhr nein nein nein Für jeden? ja ja ja ja ja nur ab 60 nur ab 60 nein nur Firmen ja Preis abhängig von Ringen abhängig von Ringen abhängig von Ringen + abhängig von Zonen abhängig von Zonen + abhängig von Zonen abhängig von Zonen + abhängig von Ringen + abhängig von Ringen + je nach Kombination Zahlungs-intervall Zahlungs-intervall Zahlungs-intervall Zahlungsintervall + Rabattstufe von Verkehrs-verbünden Ausbildungs-tarif Verkaufsstellen Alle Verkaufsstellen + Alle Verkaufsstellen + 2 Abo-Center + Online- Alle Verkaufsstellen + 2 Abo-Center + Online- Alle Verkaufsstellen + 2 Abo-Center + Online- Alle Verkaufsstellen + nur Tarifabteilung nur DB-Abo-Center Automanten Automanten Bestellung Automanten Bestellung Automanten Bestellung Automaten [vorherige Landshut Ausstellung einer Kundenkarte nötig!] Abo möglich? nein ja [Ist Abo] ja [Ist Abo] ja [Ist Abo] nein [Ist Abo] [Ist Abo] Zahlungsweise vor Ort vor Ort Lastschrift vor Ort Lastschrift vor Ort Lastschrift vor Ort Abrechnung über Firma Lastschrift Zahlungsintervall wöchentlich monatlich monatlich oder jährlich monatlich monatlich oder jährlich monatlich monatlich oder jährlich wöchentlich oder monatlich monatlich monatlich Kündigung nötig? nein nein Ja [Abo] nein Ja [Abo] nein Ja [Abo] nein Ja [Abo] Ja [Abo] Boni - - Carsharing + Tierpark - Carsharing + Tierpark - Carsharing + Tierpark - - Carsharing + Tierpark Besonderheit 1 Erweiterungskarte für Erweiterungskarte für Erweiterungskarte für Erweiterungskarte für Erweiterungskarte für Weiterer Rabatt Kostenlose BC25 bei andere Zonen verfügbar. andere Zonen verfügbar. andere Zonen verfügbar. andere Zonen verfügbar. andere Zonen verfügbar gegenüber IsarCardAbo pers. Abo (quot;grüne Jugendkartequot;). Besonderheit 2 Keine Fahrten in der Keine Fahrten in der Fahrten in der Sperrzeit Fahrten in der Sperrzeit Kundenkarte Sperrzeit möglich Sperrzeit möglich möglich. möglich. erforderlich Stand: 22. Juni 2007 Autor: Stefan Freimark, Phase 4 Communications GmbH (freimark@phase4.de) Content Audit
  • 23. With kind permission by Indi Young. Indi Young: Mental Models (Rosenfeld Media, 2008) www.rosenfeldmedia.com/books/mental-models Mental Model
  • 24. With kind permission by Indi Young. Indi Young: Mental Models (Rosenfeld Media, 2008) www.rosenfeldmedia.com/books/mental-models Mental Model
  • 25. With kind permission by Indi Young. Indi Young: Mental Models (Rosenfeld Media, 2008) www.rosenfeldmedia.com/books/mental-models Mental Model
  • 27. With kind permission by Joshua Porter. Joshua Porter: Designing for the Social Web (New Riders, 2008) bokardo.com/archives/designing-for-the-social-web-the-book Process Flow
  • 28. Jeff sits down at his computer and Maybe they tell if I navigates to the manufacturer's website. That car looks good click on quot;Build your ownquot;. Honey, and it has some very nice features. But how lunch is much does it cost? ready! Ah, it's right on the The price differs with I saw that ad about this homepage. Let's see if the engine. I go with I like that. I'll save I'll be right that for later. new car and would like to know more. they can tell me more. that one and add more there! equipment. Stencils: • boxesandarrows.com/view/comics-not-just-for • graffletopia.com/stencils/128 User Journey
  • 29. Scenario: Find product information, configure car Start point: Jeff watched a television ad about a new product End point: Jeff found some information including price, and has started a configuration (which he saves for later) Jeff sits down at his computer and Maybe they tell if I navigates to the manufacturer's website. That car looks good click on quot;Build your ownquot;. Honey, and it has some very lunch is Storyboard nice features. But how much does it cost? ready! Ah, it's right on the The price differs with I saw that ad about this homepage. Let's see if the engine. I go with I like that. I'll save I'll be right that for later. new car and would like to know more. they can tell me more. that one and add more there! equipment. The homepage displays the The new features are the most Configuring a car is the next A seperate user journey explains In this case, Jeff opts for a break Notes offered car in a teaser. important point to communicate. best activity. Secondary in this the configurator in detail. and uses the Save vehicle Alternative: A landing page Price information is secondary. context: ordering a brochure, function to resume later. which URL has been promoted. locate a dealer. Business User Experience Use case CC CC.engine, CC.extras CC.save Car Configurator Go to Learning Scanning for Configure Configure Start manufacturer.com Follow a teaser about the price Save vehicle End engine extras via browser product information Process Car Configurator Car Configurator Car Configurator Swimlanes
  • 32. Structure Content SEO Other info Teaser txt_chron txt_az img1 img2 1st 2nd 3rd 4th 5th 6th Name in navigation Page type Page title (TITLE) Meta description Meta keywords Subdomain Shortname Owner Status Comment 0.0 Startseite Home x x Fiktiv Schreibgeräte AG 1.0 Produkte Product Entry x x x Produkte - [Standardtext] 1.1 Füllfederhalter (Skip) 1.1.1 Classic Product Detail x 1.1.2 Premium Product Detail x 1.2 Kugelschreiber (Skip) 1.2.1 Ball pen classic Product Detail 1.2.2 Ball pen premium Product Detail 1.3 Etuis (Skip) 1.3.1 Classic Etui Product Detail 1.3.2 Deluxe Etui Product Detail 1.4 Zubehör (Skip) 1.4.1 Tinte Product Detail 1.4.2 Minen Product Detail 2.0 Service Entry 2.1 Garantie Content 2.2 Anleitungen Subindex 2.2.1 Füllfederhalter (Skip) 2.2.1.1 Classic Content 2.2.2 Kugelschreiber (Skip) 2.2.2.1 Ball pen classic Content 3.0 Unternehmen Entry 3.1 Aktuell News Archive 3.1.n [Datum] News Detail 3.2 Innovation Content 3.3 Geschichte Content 3.4 Team Matrix 3.5 Kontakt Content M1 Startseite (Link) M2 [Search box] (Input field) M2.1 Suchergebnisse Search results M3 Kontakt (Link) Zentraldokument
  • 33. Folgende Situation ... • 2 Grafiker • 3 Tage Zeit • 119 Layouts zu überarbeiten
  • 39. Projektdefinition Kunde: Fiktiv Schreibwaren AG Projekt: Relaunch Online-Shop Datum: 04.05.2009 Thema: Der Online-Shop soll für die Besucher übersichtlicher werden und zudem die Wertigkeit der Marke und ihrer Produkte widerspiegeln. Ziele sind die Steigerung des Online-Umsatzes sowie die Verbesserung der Kundenzufriedenheit. Im Backend soll der Shop an ein Warenwirtschaftssystem angebunden werden. Projektdefinition
  • 40. Projektdefinition Kunde: Fiktiv Schreibwaren AG Projekt: Relaunch Online-Shop Datum: 04.05.2009 Thema: Der Online-Shop soll für die Besucher übersichtlicher werden und zudem die Wertigkeit der Marke und ihrer Produkte widerspiegeln. Ziele sind die Steigerung des Online-Umsatzes sowie die Verbesserung der Kundenzufriedenheit. Im Backend soll der Shop an ein Warenwirtschaftssystem angebunden werden. Projektdefinition
  • 41. Projektdefinition Fiktiv Schreibwaren AG wg. Relaunch Online-Shop Bestandsaufnahme Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat • vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto • odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait Zielgruppen Hauptzielgruppe: Endkunden • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat • vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto Sekundäre Zielgruppe: Händler • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat • vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto Ziele quantitative Ziele: Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse. qualitative Ziele: Vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Rahmenbedingungen Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. • Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat • vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto • odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait In scope Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna. Out of scope Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Projektdefinition nonummy nibh euismod tincidunt.
  • 42. Projektdefinition Fiktiv Schreibwaren AG wg. Relaunch Online-Shop Ansprechpartner Kunde Unternehmen Ansprechpartner Kontaktdaten Fiktiv Schreibwaren AG Heinz Hohmann heinz.hohmann@fiktiv-schreibwaren.de Marketing Tel.: +49-89-555123-10 Bayerstraße 82, 80335 München Marion Nagel marion.nagel@fiktiv-schreibwaren.de Vertrieb Tel.: +49-89-555123-25 Bernd Schuster bernd.schuster@fiktiv-schreibwaren.de Produktmanagement Tel.: +49-89-555123-47 Ansprechpartner Dienstleister Unternehmen Ansprechpartner Kontaktdaten Online-Agentur Anne Mauer amauer@online-agentur.de Projektmanagement Tel.: +49-30-123555-38 Märkisches Ufer 37, 10179 Berlin Stefan Freimark sfreimark@online-agentur.de Konzeption Tel.: +49-30-123555-44 Sarah Winter swinter@online-agentur.de Art Direktion Tel.: +49-30-123555-62 Florian Maierl florian.maierl@online-agentur.de Frontend-Development Tel.: +49-30-123555-24 Systemhaus Maximilian Raab raab@systemhaus.com System-Entwicklung Henkestraße 43, 91052 Erlangen Tel.: +49-9131-448822-03 Historie dieses Dokuments Datum Autor Notiz 30.04.2009 Stefan Freimark Initialdokument 04.05.2009 Stefan Freimark Anpassungen nach Kunden-Feedback Projektdefinition
  • 43. (.41() Amazon.com logo Hello. Sign in to get personalized recommendations. New customer? Start here. Free 2-Day Shipping. No Minimum Purchase [v] 789:;<<4?< /$'0%#$% Your Amazon.com [v] Today’s Deals [v] Gifts & Wish Lists [v] Gift Cards [v] Your Account | Help 789:;<<4?> 789:;<<4;< Search All Department GO Cart [v] Your Lists [v] 789:;<<4?@ Shop All Departments 1 2 3 Books > Movies, Music & Games > Amazon Daily {n} posts since yesterday 789:;<<4@< Blog Read posts Digital Downloads > Computers & Office > 789:;<<4A< Electronics > Product Product Name image Duis autem vel eum iriure dolor Home & Garden > in Grocery, Health & Beauty > Read More Toys, Kids & Baby > {$88.88} $66.66 Apparel, Shoes & Jewelry > Ad inventory for internal product > Find similar items Sports & Outdoors > Tools, Auto & Industrial > 789:;<<4>< Check This Out Product Name Duis autem vel eum iriure dolor in Product Name {Personalization category heading} Duis autem vel eum iriure dolor in Product Product Product image image image Ad inventory for internal product Product Name Duis autem vel eum iriure dolor in Product Name Duis autem vel eum iriure dolor in Product Name... Duis Product Name... Duis Product Name... Duis autem vel eum iriure autem vel eum iriure autem vel eum iriure dolor in dolor in dolor in {$88.88} $66.66 {$88.88} $66.66 {$88.88} $66.66 789:;<<4A< 5 4 | Movies, Music & Games | puters & Office | Electronics ery, Health & Beauty | Toys, hoes & Jewelry | Sports & Industrial With kind permission by Nick Iozzo. oad.humansize.com what is selected here OAD – Object-oriented Approach to Design :: Proprietary and Confidential :: Last modified on 4.26.2009 at 8:40 PM :: Amazon on OAD example v1.0.vsd HOME100 :: Page 3 of 7
  • 44. +),-.quot;/2! !quot;#$%&&'B) +),-.quot;/*01quot; A8:/6217.>890213.415.62 ,-./0./0100213.415.62170-8198:0;-.<-0 !quot;#$%&'(&)* <6251.2/017705-80=8:/6217.>890<6258250 ?6:05-80<@::8250@/8:'0 10 – Initial State User can not be identified via cookie (or they said they are not that user as stored in the cookie) Get more with Amazon [v] Gifts & Wish Lists [v] Gift Cards [v] Your Account | Help !quot;#$%&&'(& !quot;#$%&&'() !quot;#$%&&'(* 1 2 20 – Initial State Cookie on machine IDs user User not logged in Your Amazon.com [v] Today’s Deals [v] Gifts & Wish Lists [v] Gift Cards [v] Your Account | Help !quot;#$%&&'(+ !quot;#$%&&'(( !quot;#$%&&'() !quot;#$%&&'(* 1 2 30 – Initial State User logged in Your Amazon.com (5) [v] Today’s Deals (2) [v] Gifts & Wish Lists (none) [v] Gift Cards [v] Your Account | Help !quot;#$%&&'(+ !quot;#$%&&'(( !quot;#$%&&'() !quot;#$%&&'(* 2 1 Specifications for HOME100.32 Your Account Link With kind permission by Nick Iozzo. oad.humansize.com 1 OAD – Object-oriented Approach to Design
  • 45. With kind permission by Nathan Curtis. Nathan Curtis: Modular Web Design (New Riders, t.b.a.) unify.eightshapes.com Unify
  • 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?
  • 49. Gibt es Beispiele? • Vorlagen • Deliverables aus alten Projekten • Mit Kollegen die Vorgehensweise beraten • Literatur
  • 51.
  • 52.
  • 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
  • 57. Das Wichtigste ... Auszug aus einem Briefing • Zielgruppe:Vertriebsmitarbeiter Nutzfahrzeuge • Kommunikationsschwerpunkte: Stärkung der internen Kommunikation, Web 2.0 • Schaffung eines Community-Portals mit Incentive-Charakter • Verbesserung der Kommunikation, Identifikation mit dem Unternehmen, Vertrieb der Nutzfahrzeuge
  • 58. Das Wichtigste ... Auszug aus einem Briefing • Zielgruppe:Vertriebsmitarbeiter Nutzfahrzeuge • Kommunikationsschwerpunkte: Stärkung der internen Kommunikation, Web 2.0 • Schaffung eines Community-Portals mit Incentive-Charakter • Verbesserung der Kommunikation, Identifikation mit dem Unternehmen, Vertrieb der Nutzfahrzeuge Nicht mit der Lösung anfangen, sondern erst das Problem verstehen!
  • 60.
  • 61.
  • 62.
  • 63.
  • 67. Credits Review • Anna Buß Deliverables Content Audit Stefan Freimark Mental Model Indi Young – used with kind permission Process Flow (Usage Lifecycle) Joshua Porter – used with kind permission User Journey & Swimlane Stefan Freimark Stencils: • boxesandarrows.com/view/comics-not-just-for • graffletopia.com/stencils/128 Zentraldokument Stefan Freimark Screen List Stefan Freimark Projektdefinition Stefan Freimark OAD Nick Iozzo – used with kind permission Unify (IA Summit 2009 Poster) Nathan Curtis – used with kind permission
  • 68. Bildnachweis Fotos • Titelbild: David Iliff de.wikipedia.org/w/index.php?title=Datei:Colosseum_in_Rome,_Italy_-_April_2007.jpg • BMW Welt: Stefan Freimark © • Graffiti: Stefan Freimark • Zielgruppe Kunde: istockphoto.com, ID 7763242 © • Zielgruppe Grafik: istockphoto.com, ID 4087682 © • Zielgruppe Technik: istockphoto.com, ID 5305920 © • Deliverables: Stefan Freimark Buchcover • Communicating Design: Peachpit © • Designing for the Digital Age: Wiley © • Mental Models: Rosenfeld Media © • Making things happen: O‘Reilly © Screenshots • Wireframes Magazine: Jakub Linowski ©