Viele Wege führen nach Rom (nur Folien)

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

Graﬁk • 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

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 • grafﬂetopia.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 Graﬁker • 3 Tage Zeit • 119 Layouts zu überarbeiten

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. Projektdeﬁnition

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 Projektdeﬁnition 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 Projektdeﬁnition

(.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 • 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 Brieﬁng • Zielgruppe:Vertriebsmitarbeiter Nutzfahrzeuge • Kommunikationsschwerpunkte: Stärkung der internen Kommunikation, Web 2.0 • Schaffung eines Community-Portals mit Incentive-Charakter • Verbesserung der Kommunikation, Identiﬁkation mit dem Unternehmen, Vertrieb der Nutzfahrzeuge

Das Wichtigste ... Auszug aus einem Brieﬁng • Zielgruppe:Vertriebsmitarbeiter Nutzfahrzeuge • Kommunikationsschwerpunkte: Stärkung der internen Kommunikation, Web 2.0 • Schaffung eines Community-Portals mit Incentive-Charakter • Verbesserung der Kommunikation, Identiﬁkation 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 • grafﬂetopia.com/stencils/128 Zentraldokument Stefan Freimark Screen List Stefan Freimark Projektdeﬁnition 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 © • Grafﬁti: Stefan Freimark • Zielgruppe Kunde: istockphoto.com, ID 7763242 © • Zielgruppe Graﬁk: 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 ©

Viele Wege führen nach Rom (nur Folien)

by Stefan Freimark on May 17, 2009

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 12

Statistics

Viele Wege führen nach Rom (nur Folien) Presentation Transcript