scenario based design - ein neukonzeption
DESCRIPTION
Kleine Dokumentation der Neukonzeption einer Website anhand der Methode des Scenario Based Design.TRANSCRIPT
UsabilityReDesign von www.indoorbeachsports.de anhand des Scenario Based Design
Inhalt: Dokumentation des ReDesign-Prozess einer Website anhand der Methode des Scenario Based DesignRahmen: Lehrveranstaltung UsabilityDozent: Dr. Peter Kein Semester: SS 08 Team: Bauer & KrokerHochschule: Hochschule der Medien, Stuttgart
Seite: 2
UsabilityReDesign von www.indoorbeachsports.de
1. Persona
2. Problemszenario
3. Aktivitätsszenario
4. Informationsarchitektur (Teil 1)
5. Interaktionsszenario
6. Informationsarchitektur (Teil 2)
Seite:
3
5
8
10
12
14
Seite: 3
1. PersonaReDesign von www.indoorbeachsports.de
Patrick Farber (23) – sportlich, aufgeschlossen, kontaktfreudig
„Sport mit meinen Freunden – was besseres könnte ich mir nicht
vorstellen“
Persönliche Informationen:
Beruf: Mediengestalter (genauer erläutern)
Wohnort: Ludwigsburg
Alter: 23
Familie: Einen Bruder und eine Schwester
Zivilstand: ledig aber in einer festen Beziehung
Hobbies: Clubbing, Fußball, Volleyball
Lieblings Serie: Simpsons, Dr. House, Lost
Musik: HipHop & House aber im Prinzip offen für
alles
Eigenschaften: sportlich, aufgeschlossen, kontaktfreudig
Interneterfahrung: Sehr gut (11 Jahre)
Internetnutzung: Chat, Mail, Patyseiten, Versandhandel
Lieblingsseiten: mediengestalter.de, sport1.de, amazon.de,
tillate.com
Stunden online: 28 Stunden pro Woche
Allgemeine Ziele: Möchte in seiner Freizeit so viel Action wie
möglich erleben. Wichtig ist ihm das Pflegen
seines großen Freundeskreises.
Seite: 4
1. PersonaReDesign von www.indoorbeachsports.de
Ziele auf der Website:
Patrik möchte spontan und zu jeder Zeit komfortabel und ohne Um-
wege online einen Court mieten können. Dabei möchte er, dass seine
Freunde sofort benachrichtigt werden wenn ihr reserviert hat. Zudem
ist es ihm immer sehr wichtig mit professionellem Equipment zu
spielen und möchte daher auf die einfachste Art und Weise einen
Beachvolleyball beim Fachmann (als solche nimmt er die Betreiber
der Halle war) kaufen können.
Fragen:
• Kann ich auf der Website einen Court mieten?
• Steht mir dazu ein Online-Tool zur Verfügung?
• Bekomme ich schnell einen Überblick über die Preise?
• Ist eine Anfahrtsbeschreibung vorhanden?
• Gibt es Angaben zu den Öffnungszeiten?
• Kann ich online oder vort Ort Equipment und im speziellen einen
Ball kaufen?
Seite: 5
2. ProblemszenarioReDesign von www.indoorbeachsports.de
Schon das dritte Wochenende Regen nacheinander und das Beachvol-
leyballturnier rückt immer näher. Patrick ist mehr und mehr genervt,
da er nicht weiß, wie sein Team mit solch einem Trainingsrückstand
überhaupt die Vorrunde überleben soll. Wie immer liegt die ganze
Organisation an ihm, da er ja schließlich der Initiator gewesen sei und
er doch gerade nur 50% arbeitet. Das meinen überwiegend die ande-
ren des Teams. Wenn sie schon nicht auf dem Platz am See trainieren
können, dann muss es doch irgendeine andere Alternative geben, um
das Team noch etwas auf sich einzuschwören. Da er so oder so gera-
de vor seinem Notebook sitzt, macht er sich auf die Suche nach einer
Halle oder ähnlichem.
Er tippt in Google „beachvolleyball“ und „ludwigsburg“ ein, um Treffer
nahe bei seinem Wohnort zu erzwingen. Schon beim dritten Treffer
wird er über den Beschreibungstext „… Halle für Beachvolleyball,
Badminton…“ aufmerksam und klickt auf den Link, um weiteres zu
erfahren.
Er gelangt auf eine Verzeichnisseite der Stadt Bietigheim-Bissingen
und findet dort den Eintrag „Indoor Beach Sports … multifunktio-
nale Halle für Beachvolleyball, Badminton, etc. über 2.000 m2 auf
beheiztem Sand“. Verärgert merkt er, dass es keinen Link zu einer
möglichen Webpräsenz der Halle gibt. Nocheinmals ruft er google auf
und gibt im Suchfeld „Indoor Beach Sports“ ein.
Über Google ist die
Site schnell auffind-
bar.
Seite: 6
2. ProblemszenarioReDesign von www.indoorbeachsports.de
Er klickt auf den ersten Treffer, um seine Vermutung zu bestätigen.
Ja, scheinbar ist er richtig und hat damit eine echte Alternative zum
kalten und nassen Sand am See gefunden. Zwar scheint ihm die Seite
nicht ganz koscher zu sein, aber vielleicht stellt er auch einfach immer
nur zu hohe Ansprüche als Mediengestalter.
Erfreut macht er sich auf die Suche nach einer Möglichkeit, ein Spiel-
feld zu reservieren. Am liebsten wäre es ihm heute noch, da Samsta-
gnachmittag alle Kollegen Zeit hätten und sie somit schnell starten
könnten.
Doch wo starten? Der erste Eindruck der Site hat nicht zu viel verspro-
chen. Ein einziges Chaos. Trotz scrollen, was auf seinem 24‘‘ Monitor
eigentlich nicht so häufig vor kommt, findet er weder ein Menü noch
Hinweise oder prägnante Links die auf eine Online-Reservierung
oder ähnliches deuten würden. Ihm gelingt es auch nicht den Text zu
überfliegen, da sein Auge dauernd von den verschiedenen Schriften,
Bildern und Farben auf der Seite abgelenkt wird. Er beschließt also
den Text von oben bis unten durchzulesen – auch wenn er dazu weder
Lust noch Zeit hat.
Um an Informati-
onen zu gelangen
muss der Benutzer
hart arbeiten.
Der erste Eindruck
der Site ist ernüch-
ternd.
Seite: 7
2. ProblemszenarioReDesign von www.indoorbeachsports.de
Ohne sich allzu viel dabei zu denken, klickt er auf den überlangen
Link, der ihm etwas von „Courtzeitenservice“ und ähnlichem erzählt.
Zwar bekommt er nun einen Kalender mit den jeweiligen Plätzen an-
gezeigt, jedoch kann er immer noch keinen Hinweis auf eine Online-
Buchung finden.
Jetzt erst fällt ihm auf, dass in einem Frame eine Art Navigation ange-
zeigt wird. Mit Hilfe dieses Menüs klickt er sich nochmals durch das
Angebot der Site, findet jedoch immer noch keine komfortable Art zu
buchen. Da ihm während dieser Suche aufgefallen ist, dass im Frame
der Navigation, relativ weit unten und weit außerhalb des Sichtfelds
des Nutzers respektive des Browsers eine Telefonnummer stand, wählt
er diese genervt, um endlich zu seinem Platz zu gelangen.
Da er parallel zur Suche nach einem geeignetem Spielfeld auch immer
wieder nach einer Möglichkeit gesucht hat, sich einen Beachvolleyball
beim Anbieter der Halle zu kaufen, jedoch keine gefunden hat, ordert
er auch diesen direkt via Telefongespräch.
Ist die Zeit knapp,
sollte man lieber
gleich zum Telefon-
buch greifen.
Entnervt und reich-
lich entäuscht muss
der Nutzer zum
Telefon greifen, um
zu Buchen.
Seite: 8
3. AktivitätsszenarioReDesign von www.indoorbeachsports.de
Schon das dritte Wochenende Regen nacheinander und das Beachvol-
leyballturnier rückt immer näher. Patrick ist mehr und mehr genervt,
da er nicht weiß, wie sein Team mit solch einem Trainingsrückstand
überhaupt die Vorrunde überleben soll.
Er beschließt kurzerhand das Training in eine Halle zu verlegen. Die
Suche nach einer passenden Halle in seiner Umgebung beginnt er
über seine Suchmaschine. Für die Suchbegriffe „beachvolleyball“ und
„ludwigsburg“ erhält er sofort eine Hand voll sinnvoller Einträge. Der
Titel des obersten Suchergebnisses zeigt ihm, dass es in seiner Nähe
eine Indoor Beachvolleyball Halle im nahe gelegenen Bietigheim gibt.
Ein kleine Landkarte visualisiert ihm zusätzlich wo sich die Halle in
Bietigheim befindet. Positiv überrascht ruft er die Seite des Betreibers
auf.
Auf den ersten Blick erscheint ihm die Seite sehr übersichtlich und
die Fotografien machen ihm sofort lust auf Sonne, Strand, und Beach-
volleyball. Seine schlechte Laune wegen dem Wetter und die Sorgen
Traningseinheiten zu verpassen sind sofort verflogen. Patrick hat
keine Zweifel hier einen guten Trainingsplatz gefunden zu haben und
beginnt sofort mit der Reservieren eines Courts.
Er ruft das Platzreservierungstool auf. Die Platzreservierung ist
schnell erledigt, das Tool bestätigt ihm auch sofort die Verfügbarkeit
des Courts. Da Patrick auch die anderen Trainingseinheiten bis zum
großen Tunier nicht vom Wetter abhängig machen will, reserviert
er auch gleich für die nächsten Samstage einen Platz. Den neuen
Trainingsplan schickt er sofort aus dem Reservierungstool an sein
gesamtes Team. Da er nicht von allen die E-Mail-Adressen zur Hand
hat, nutzt er die Funktion die Adressen aus seinem E-Mail-Client zu
importieren. Das Training heute ist bereits in drei Stunden. Patrick ist
Seite: 9
3. AktivitätsszenarioReDesign von www.indoorbeachsports.de
sich nicht sicher, ob alle die E-Mails rechtzeitig lesen, daher entschei-
det er sich sie per SMS zu informieren.
Patrick will seit längerem einen neuen Beachvolleyball für sein Team
kaufen. Vor ein paar Wochen hat er am See einen neues Modell von
seiner Lieblingsfirma „Mikasa“ gesehen. Leider weiß er weder die
Artikelbezeichnung, noch ob es ein Profimodell oder eine Modell
für Hobbyspieler ist. Im Online-Shop des Indoor Beachvolleyball-
Zentrums findet er sehr schnell den gesuchten Beachvolleyball. Im
Beschreibungstext kann er alle Informationen zum Ball nachlesen.
Aus Gewohnheit geht er wie beim Kauf bei seinem Lieblingsshop Ama-
zon vor und beginnt mit dem Bestellprozess. Glücklicherweise muss er
nicht erneut alle Eingaben zu seiner Person machen, da er zuvor diese
beim Platzreservieren schon hinterlassen hat. Sehr erfreut stellt er
fest, dass er den Ball auch zum Probespielen ausleihen kann. Der On-
lineshop bietet ihm zusätzlich die Möglichkeit den Ball zuzuschicken,
da Patrick aber heute Nachmittag noch einen Platz reserviert hat,
entscheidet er sich den Ball nur hinterlegen zu lassen, um diesen dann
nach dem Probespielen kaufen zu können. Patricks Laune ist auf dem
Höhepunkt, jetzt hat er noch ganze drei Stunden Zeit bis das Training
beginnt. Er ist erleichtert, dass er alles so schnell erledigen konnte –
die neu gewonnene Zeit verbringt er mit Stöbern im Onlineshop.
Seite: 10
4. Informationsarchitektur (Teil 1) ReDesign von www.indoorbeachsports.de
Grobstruktur der Startsteite
Seite: 11
4. Informationsarchitektur (Teil 1) ReDesign von www.indoorbeachsports.de
Grobstruktur der weiteren Webseiten
Seite: 12
5. InteraktionsszenarioReDesign von www.indoorbeachsports.de
Nach einem verregneten Sommer, der nicht unbedingt ein Übermaß
an Spielen im Freien zugelassen hatte und einem kaum besseren
Herbst, zieht nun ein strenger Winter ein. Patrick hätte schon wieder
allen Grund zur schlechten Laune, wäre da nicht seine liebgewonnene
Beachvolleyballhalle. Sie hat ihm und seinem Team die Saison erträg-
lich gemacht und dafür gesorgt, dass die Konkurrenz meist das Nach-
sehen hatte. Der warme und trockene Sand hat es ihm angetan. Und
nun, da er sich auch im Winter fit halten möchte, entschließt er kurzer
Hand wieder einmal einen Court zu buchen, seine Freunde zusammen
zu trommeln und als kleines Schmankerl einen neunen Ball zu kaufen.
Wie gewohnt ruft er über einen Shortcut auf seinem Desktop die Start-
seite der Beachvolleyballhalle auf. Neben den ästhetischen Key-Visuals
am oberen Bildrand fällt ihm sofort der rechtsplatzierte Servicebereich
auf. Hier könnte er nun ohne großen Aufwand beim Betreiber anru-
fen und den Court via Telefon buchen. Da er aber das Online-Tool
zur Courtbuchung, das direkt rechts neben dem sehr übersichtlichen
Hauptmenü platziert ist, schätzen gelernt hat, wählt er diese Mög-
lichkeit. Vorher wirft er noch einen kurzen Blick über die Spalte der
aktuellen Veranstaltungen und über die neusten Angebote des Shops,
die übersichtlich aber nicht störend auf der rechten Seite Startseite
platziert sind.
Nach der Auswahl eines Courts, dem Datum und der gewünschten
Uhrzeit über Drop-Down-Menüs, Textfelder und einem netten Ka-
lendertool, klickt er auf den Button „Buchen“. Sofort gibt das System
Rückmeldung. Zwar ist sein favorisierter Court belegt, aber das Tool
schlägt ihm einen nahezu identischen Platz vor, worüber er nur
schmunzelt und es so akzeptiert. Nun registriert er sich noch über ein
übersichtliches Standardformular, das Name, Adresse und Telefon-
nummer abfragt. Da er solch einen Prozess auch von Online-Shops
Seite: 13
5. InteraktionsszenarioReDesign von www.indoorbeachsports.de
oder ähnlichen Anwendungen kennt, ist es ihm ein Leichtes das For-
mular auszufüllen und dann mit dem Button „Court buchen“ zu be-
stätigen. Die Bestätigung des Systems kommt prompt und bietet ihm
nochmals die Übersicht seiner gewählten Parameter (Court, Datum
und Preis pro Person) sowie den Hinweis auf eine Bestätigungsmail.
Auch zeigt ihm das Tool, via Links, mögliche nächste Schritte an, die
er auswählen kann. So könnte er nun auf Grundlage seiner bisherigen
Buchungen eine regelmäßige und automatische Courtbuchung vor-
nehmen, um so nicht jede Woche neu reservieren zu müssen.
Patrick interessiert sich für die zweite Option, mit der er seinen
Trainingspartnern im Bezug auf die gebuchte Trainingseinheit auf
dem Laufenden halten kann. Er gelangt zu einem Screen mit einem
Eingabefeld für die E-Mail-Adresse und die Handynummer, um seine
Kollegen auch via SMS benachrichtigen zu können sowie einem Text-
feld mit einer vordefinierten Nachricht. Da er aber weder die E-Mail-
Adressen der Kollegen noch die Handynummer zur Hand hat, impor-
tiert er die Kontakte seines GMail-Accounts, um dann die gesuchten
Personen via Check-Boxen auszuwählen. Hierzu muss er nur seine
E-Mail-Adresse und sein Google-Passwort eingeben. Kurz Zeit darauf
erscheint die Liste aus der er nun wählen kann. Ein flüchtiger Blick
über die Standardnachricht im rechten Textfeld und ein zügiger Klick
auf „Versenden“ und schon vibriert bei seinen Trainingspartnern das
Handy mit den Koordinaten des nächsten Treffens.
Nun hat Patrick noch Zeit nach seinem neuen Objekt der Begierde
zu suchen. Er tippt im Suchfeld des Shops „Micasa“ ein. Das System
meldet ihm, dass sein Suchbegriff automatisch korrigiert wurde
(„Mikasa“) und zeigt ihm eine Liste von zutreffenden Bällen an. Schon
der zweite Ball in der Trefferliste scheint der passende zu sein. Patrick
klickt auf die Abbildung, um auf die Detailansicht zu gelangen. Hier,
wie auch schon in der Listenansicht, kann er unter anderem wählen,
ob er ihn bestellen, probespielen & reservieren oder ausleihen möchte.
Auf die Option des Probespielens wird er zudem nochmals explizit
hingewiesen, sodass er den Ball direkt mit einem Häkchen für seinen
nächsten Trainingstermin reservieren kann.
Seite: 14
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Informationsarchitektur der Startseite
Seite: 15
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Anwendung zur Courtbuchung (1. Courtwahl & Login)
Seite: 16
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Anwendung zur Courtbuchung (2. Bestätigung & weitere Schritte)
Seite: 17
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Anwendung zur Courtbuchung (3. Trainingsplan)
Seite: 18
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Benachrichtigungs-Tool (Adress- & Nachrichteneingabe)
Seite: 19
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Benachrichtigungs-Tool (Datenbankauswahl)
Seite: 20
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Benachrichtigungs-Tool (Datenimport)
Seite: 21
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Shop-Anwendung (Übersichtsseite)