Usability ReDesign von www.indoorbeachsports.de anhand des Scenario Based Design
Inhalt: Rahmen: Dozent: Semester: Team: Hochschule:
Dokumentation des ReDesign-Prozess einer Website anhand der Methode des Scenario Based Design Lehrveranstaltung Usability Dr. Peter Kein SS 08 Bauer & Kroker Hochschule der Medien, Stuttgart
Usability
ReDesign von www.indoorbeachsports.de
Seite: 3
1. Persona
5
2. Problemszenario
8
3. Aktivit채tsszenario
10
4. Informationsarchitektur (Teil 1)
12
5. Interaktionsszenario
14
6. Informationsarchitektur (Teil 2)
Seite: 2
1. Persona
ReDesign 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: Wohnort: Alter: Familie: Zivilstand:
Mediengestalter (genauer erläutern) Ludwigsburg 23 Einen Bruder und eine Schwester ledig aber in einer festen Beziehung
Hobbies: Lieblings Serie: Musik:
Clubbing, Fußball, Volleyball Simpsons, Dr. House, Lost HipHop & House aber im Prinzip offen für alles
Eigenschaften:
sportlich, aufgeschlossen, kontaktfreudig
Interneterfahrung: Internetnutzung: Lieblingsseiten: Stunden online:
Sehr gut (11 Jahre) Chat, Mail, Patyseiten, Versandhandel mediengestalter.de, sport1.de, amazon.de, tillate.com 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: 3
1. Persona
ReDesign von www.indoorbeachsports.de
Ziele auf der Website: Patrik möchte spontan und zu jeder Zeit komfortabel und ohne Umwege 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: 4
2. Problemszenario
ReDesign von www.indoorbeachsports.de
Schon das dritte Wochenende Regen nacheinander und das Beachvolleyballturnier 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 anderen 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 gerade vor seinem Notebook sitzt, macht er sich auf die Suche nach einer Halle oder ähnlichem. Über Google ist die Site schnell auffindbar.
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 … multifunktionale 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.
Seite: 5
2. Problemszenario
ReDesign von www.indoorbeachsports.de
Der erste Eindruck der Site ist ernüchternd.
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 Spielfeld zu reservieren. Am liebsten wäre es ihm heute noch, da Samstagnachmittag alle Kollegen Zeit hätten und sie somit schnell starten könnten. Doch wo starten? Der erste Eindruck der Site hat nicht zu viel versprochen. 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 Informationen zu gelangen muss der Benutzer hart arbeiten.
Seite: 6
2. Problemszenario
ReDesign 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 angezeigt, jedoch kann er immer noch keinen Hinweis auf eine OnlineBuchung finden. Jetzt erst fällt ihm auf, dass in einem Frame eine Art Navigation angezeigt 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. Entnervt und reichlich entäuscht muss der Nutzer zum Telefon greifen, um zu Buchen.
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 Telefonbuch greifen.
Seite: 7
3. Aktivitätsszenario
ReDesign von www.indoorbeachsports.de
Schon das dritte Wochenende Regen nacheinander und das Beachvolleyballturnier 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 Beachvolleyball. 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: 8
3. Aktivitätsszenario
ReDesign von www.indoorbeachsports.de
sich nicht sicher, ob alle die E-Mails rechtzeitig lesen, daher entscheidet 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 BeachvolleyballZentrums 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 Amazon 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 Onlineshop 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: 9
4. Informationsarchitektur (Teil 1) ReDesign von www.indoorbeachsports.de
Grobstruktur der Startsteite
Seite: 10
4. Informationsarchitektur (Teil 1) ReDesign von www.indoorbeachsports.de
Grobstruktur der weiteren Webseiten
Seite: 11
5. Interaktionsszenario
ReDesign 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äglich gemacht und dafür gesorgt, dass die Konkurrenz meist das Nachsehen 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 Startseite 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 anrufen 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öglichkeit. 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 Kalendertool, 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 Telefonnummer abfragt. Da er solch einen Prozess auch von Online-Shops
Seite: 12
5. Interaktionsszenario
ReDesign von www.indoorbeachsports.de
oder ähnlichen Anwendungen kennt, ist es ihm ein Leichtes das Formular auszufüllen und dann mit dem Button „Court buchen“ zu bestä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 vornehmen, 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 Textfeld mit einer vordefinierten Nachricht. Da er aber weder die E-MailAdressen der Kollegen noch die Handynummer zur Hand hat, importiert 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: 13
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Informationsarchitektur der Startseite
Seite: 14
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Anwendung zur Courtbuchung (1. Courtwahl & Login)
Seite: 15
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Anwendung zur Courtbuchung (2. Best채tigung & weitere Schritte)
Seite: 16
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Anwendung zur Courtbuchung (3. Trainingsplan)
Seite: 17
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Benachrichtigungs-Tool (Adress- & Nachrichteneingabe)
Seite: 18
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Benachrichtigungs-Tool (Datenbankauswahl)
Seite: 19
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Benachrichtigungs-Tool (Datenimport)
Seite: 20
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Shop-Anwendung (Ăœbersichtsseite)
Seite: 21
6. Informationsarchitektur (Teil 2) ReDesign von www.indoorbeachsports.de
Shop-Anwendung (Detailansicht)
Seite: 22