Scenario Based Design - Ein Neukonzeption

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


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


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


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


Informationsarchitektur der Startseite

Seite: 15


Anwendung zur Courtbuchung (1. Courtwahl & Login)

Seite: 16


Anwendung zur Courtbuchung (2. Bestätigung & weitere Schritte)

Seite: 17


Anwendung zur Courtbuchung (3. Trainingsplan)

Seite: 18


Benachrichtigungs-Tool (Adress- & Nachrichteneingabe)

Seite: 19


Benachrichtigungs-Tool (Datenbankauswahl)

Seite: 20


Benachrichtigungs-Tool (Datenimport)

Seite: 21


Shop-Anwendung (Übersichtsseite)

Seite: 22


Shop-Anwendung (Detailansicht)

Documents

Scenario Based Design - Ein Neukonzeption