UUID Usability und User Interface Design

Transkript

1 UUID Usability und User Interface Design Fallstudie Book Me Version 1.0, Klassifizierung: öffentlich Copyright, Synopsis: Dieses Dokument beinhaltet die Nutzerprofile und Persona-Beschreibungen. Es detailliert die Ergebnisse der Aufgaben- und Kontextanalyse und führt sämtliche Usability-Ziele sowie die festgelegten Usability-Qualitätskritieren auf. Es enthält die Kern-Nutzungsszenarien, den Papierprototypen sowie eine textuelle Beschreibung der Design-Konzepte. Autor(en): Verteiler: Florian Fankhauser Silvia Zimmermann Sarah Hauser

2 Inhaltsverzeichnis 1 Ausgangslage und Projektbeschreibung Projektbeschreibung Potenzielle Nutzergruppe Technische Plattform Nutzerprofile und Personas Name und Bild Spinnendiagramm Persönliche Merkmale Ziele, Ängste, Frustrationen Produktvorlieben Task- und Kontextanalyse Kontextanalyse Technische Umgebung Organisatorische Umgebung Taskanalyse Schritt 1 + 2: Priorisierte Aufgabenliste Analyse Usability-Ziele und Qualitätskriterien Usability-Ziele Usability-Qualitätskriterien Nutzerszenarien Objekt erstellen Objekt bearbeiten Objekt ansehen Objekt reservieren Reservationsanfrage bearbeiten Design Style Guide Informationsarchitektur Navigationskonzept Farbkonzept Schriftkonzept Bildkonzepte Design Pattern Prototypen Papier-Prototyp, Horizontal Objekt erstellen, bearbeiten Objekt anzeigen, reservieren Version 1.0, Seite 1

3 7.2 HiFi-Prototyp Seite 2 öffentlich Version 1.0, <date> M-xxx-xxx-V100-D

4 1 Ausgangslage und Projektbeschreibung 1.1 Projektbeschreibung Das verleihen von verschiedensten Sachen in Bekanntenkreisen ist ein sehr gängiger Vorgang in der heutigen Gesellschaft. Vor allem bei grösseren, begehrteren Objekten wie Fahrzeugen, Ferienwohnungen o.ä. ist der administrative Aufwand ein gewichtiger unerfreulicher Nebeneffekt. Aus diesem Grund soll eine Applikation erstellt werden welche es ermöglicht ein Mietobjekt zu registrieren und anschliessend bekannten einen Link zuzustellen über welchen diese Reservationsanfragen für das entsprechende Objekt tätigen können. Diese Anfragen können vom Anbieter anschliessend per Klick bestätigt werden und werden danach in der Applikation eingetragen und der Artikel für diesen Zeitraum als reserviert markiert. 1.2 Potenzielle Nutzergruppe In der Pilotphase primär der Bekanntenkreis des Projektautors, da die Ferienwohnung der Eltern als Versuchsobjekt dienen soll. Falls eine allgemeine Veröffentlichung in Betracht gezogen werden sollte, würde sich die Nutzergruppe auf eine sehr breite Auswahl an Personen aus allen Bevölkerungsgruppen ausweiten. 1.3 Technische Plattform Die Applikation wird in einer ersten Phase in Form einer Webapplikation umgesetzt. Für die Implementierung des User-Interfaces wird auf gängige Web-Technologien (HTML5, CSS3, Javascript, JQuery) gesetzt. Das Backend wird als PHP Applikation unter Verwendung eines noch zu evaluierenden Frameworks zur Unterstützung von MVC, Datenbankabstraktion und Request-Handling umgesetzt. Dadurch, dass die Applikation eine Webseite ist, ist sie Betriebssystemunabhängig. Von einer Optimierung für mobile Geräte wird vorerst abgesehen. Version 1.0, Seite 3

5 2 Nutzerprofile und Personas 2.1 Name und Bild Reto 2.2 Spinnendiagramm 2.3 Persönliche Merkmale Alter: Zivilstand: Ausbildung: Beruf: Hobbies: 32 Jahre ledig mit Familienwunsch, feste Beziehung technische Ausbildung, Weiterbildung, Studium, MBA Projekt Controller Velo, Ski, Snowboard, Tauchen, Sportverein, Feuerwehr 2.4 Ziele, Ängste, Frustrationen Reto ist immer online. Eine übersichtliche Darstellung von Inhalten, insb. Kontakte und Kalender, sind ihm wichtig. Bei technischen Schwierigkeiten lässt sich Reto nicht aus der Ruhe bringen, sondern sieht dies eher als Herausforderung an. Reto will bezüglich aktuellen News immer auf dem neusten Stand sein. Reto ist sich teilweise unsicher, ob er seine hochgesteckten beruflichen Ziele erreichen kann. Im Vordergrund steht aber ein stabil hohes Einkommen, das ihm ermöglicht, Spass und Freude zu generieren. Seite 4 öffentlich Version 1.0, <date> M-xxx-xxx-V100-D

6 2.5 Produktvorlieben Version 1.0, Seite 5

7 3 Task- und Kontextanalyse 3.1 Kontextanalyse Technische Umgebung HP-Notebook (Linux, Windows8), diverse Browser Organisatorische Umgebung Die Software wird Reto an der Firma, zu Hause und im Zug nutzen. Er findet sich in Strukturen intuitiv zurecht und kann Technologie fühlen. Reto ist mit modularem technischem Spielzeug aufgewachsen. Er ist stets einsatzbereit, sowohl für den Support als auch fürs Troubleshooting. Reto handelt impulsiv, er will Anwendungen entdecken. 3.2 Taskanalyse Schritt 1 + 2: Priorisierte Aufgabenliste Analyse Die folgende Tabelle listet sämtliche funktionalen Anforderungen, inkl. der Aktion (CRUD; CRUD= Create, Read, Update, Delete): # Funktionale Anforderung Nutzer Prio Aktion 1 Mietobjekt erstellen Anbieter High Create 2 Beschreibung zu Mietobjekt erfassen Anbieter Mid Update 3 Mietobjekt löschen Anbieter Low Delete 4 Link zu Mietobjekt versenden Anbieter High 5 Mietobjekt anzeigen Mieter High Read 6 Reservationsanfrage stellen Mieter Mid Create 7 Reservationsanfrage bestätigen Anbieter Mid Update Seite 6 öffentlich Version 1.0, <date> M-xxx-xxx-V100-D

8 4 Usability-Ziele und Qualitätskriterien 4.1 Usability-Ziele Für die Case Study wurden unter Berücksichtigung der Persona folgende Usability-Ziele festgelegt: Bitte legen Sie die Usability-Ziele für alle definierten Anforderungen fest: Ref. FA Funktion OK Akzeptabel STOP 1 Mietobjekt erstellen < 2 Min. 10 Klicks 2 Beschreibung zu Mietobjekt erfassen < 20 Min. 40 Klicks 3 Mietobjekt löschen < 1 Min. 5 Klicks 4 Link zu Mietobjekt versenden < 2 Min. 5 Klicks 5 Mietobjekt anzeigen < 1 Min. 1 Klick 6 Reservationsanfrage stellen < 3 Min. 15 Klicks 7 Reservationsanfrage bearbeiten < 1 Min. 3 Klicks < 5 Min. 20 Klicks < 40 Min. 60 Klicks < 2 Min. 10 Klicks < 4 Min. 10 Klicks < 2 Min. 3 Klicks < 5 Min. 20 Klicks < 3 Min. 10 Klicks > 5 Min. 30 Klicks > 40 Min. 100 Klicks > 2 Min. 15 Klicks > 5 Min. 20 Klicks > 2 Min. > 10 Min. 30 Klicks > 3 Min. 4.2 Usability-Qualitätskriterien Für die Case Study wurden unter Berücksichtigung der Persona folgende Usability-Qualitätskriterien festgelegt: # Usability- Qualitätskriterien Beschreibung 1 Kompaktheit <Beschreibung> 2 Konsistenz <Beschreibung> Version 1.0, Seite 7

9 5 Nutzerszenarien 5.1 Objekt erstellen Title Beschreibung Nutzer/Actor Key Journey / Workflow Mietobjekt erstellen Ein Benutzer möchte ein zu vermietendes Objekt erstellen Persona: Reto Browser Nutzer öffnet Startseite des Reservationssystem Klickt auf Erstellen Fügt Bezeichnung ein (Fügt Beschreibung hinzu) Bestätigt Erstellung und erhält 2 Links. 5.2 Objekt bearbeiten Title Beschreibung Nutzer/Actor Key Journey / Workflow 5.3 Objekt ansehen Title Beschreibung Nutzer/Actor Key Journey / Workflow Mietobjekt bearbeiten Ein Benutzer möchte ein bereits erstelltes Objekt bearbeiten Persona: Reto Browser Nutzer befindet sich bereits auf Objektseite oder gelangt über Administrationslink dorthin Nutzer bearbeitet Informationen zu Objekt (Name, Beschreibung, Bilder löschen/hinzufügen, Dateien entfernen/hinzufügen) Nutzer bestätigt Änderungen Mietobjekt ansehen Ein Benutzer möchte ein zu vermietendes Objekt ansehen Persona: Reto Browser Nutzer erhält von Bekanntem Link zu Objekt und öffnet diesen im Browser Nutzer gelangt auf Objekt-Ansicht Blendet die gewünschten Informationen ein und aus (Belegungsplan, Beschreibung, Bilder, Dateien) Seite 8 öffentlich Version 1.0, <date> M-xxx-xxx-V100-D

10 5.4 Objekt reservieren Title Beschreibung Nutzer/Actor Key Journey / Workflow Mietobjekt reservieren Der Nutzer möchte sich ein Mietobjekt reservieren. Persona: Reto Browser Nutzer ist auf Objekt-Ansicht Hat gefallen an Objekt gefunden Gibt nötig Daten ein (Name, Mail, Reservationszeitraum, Mitteilung) Sendet Formular ab Wartet auf Bestätigung durch Anbieter 5.5 Reservationsanfrage bearbeiten Title Beschreibung Nutzer/Actor Key Journey / Workflow Reservationsanfrage bearbeiten Ein Anbieter will eine Reservationsanfrage bearbeiten. Persona: Reto Browser Anbieter kommt über Anfragelink auf Bearbeitungsseite Wählt bestätigen oder ablehnen Version 1.0, Seite 9

11 6 Design 6.1 Style Guide Das Design der Applikation soll die Funktionalität nicht in den Hintergrund stellen. Es soll schlicht, ansprechend und übersichtlich sein. Überflüssiger Schnickschnack soll weggelassen werden. 6.2 Informationsarchitektur Die Informationsarchitektur soll so schlank wie möglich gehalten werden. Es sollen folgende 4 Seiten existieren: Hauptseite (Willkommen) Objekt erstellen/bearbeiten Objekt anzeigen Anfrage bearbeiten Basierend auf dem Task des Nutzers soll es (mit Ausnahme der Hauptseite) nur eine Seite geben, die für ihn relevant ist und auf diese soll er direkt geführt werden. 6.3 Navigationskonzept Eine Navigation soll so weit wie möglich unnötig sein. Das heisst, der Nutzer soll seinen gesamten Task auf derselben Seite erledigen können. 6.4 Farbkonzept Das Farbkonzept richtet sich nach dem Style Guide. Die Seite soll farblich möglichst unauffällig und neutral sein. Grundfarbe: o Blau (#AAC, #DDF, #080820, #EEF) Akzente (je nach Aussage): o o 6.5 Schriftkonzept Rot (Fehler) (#FBA) Grün (Bestätigung) (#AFA) Dem Style Guide entsprechend soll eine möglichst schlichte Schrift gewählt werden. Schriftart: Tahoma Schriftgrösse: 12pt Akzente: 6.6 Bildkonzepte Fett, grössere Schrift Um die Verständlichkeit der Applikation möglichst hoch zu halten sollen ausser gängigen Icons für Dateitypen oder Nutzeraktionen (Löschen, Bearbeiten,...) keine Bilder verwendet werden, die nicht direkt vom Nutzer zur Beschreibung seines Objekts hochgeladen wurden. Seite 10 öffentlich Version 1.0, <date> M-xxx-xxx-V100-D

12 6.7 Design Pattern Um wie im Navigationskonzept bereits erwähnt möglichst viele Funktionen und Inhalte auf einer Seite unterzubringen wird mit Collapsible Panels gearbeitet. Für die Auflistung der Bilder werden zwei verschiedene Ansätze gewählt: o Zur Anzeige der Bilder im Administrationsbereich wird ein Grid of Equals erstellt um den direkten Zugriff auf alle Bilder zu ermöglichen. Eine Grossansicht der Fotos wird hier nicht benötigt. o Für die Anzeige der Bilder in der Objekt-Ansicht wird auf eine Abwandlung des Carousel -Patterns zurückgegriffen. Hier wird eine Slideshow der Bilder mit einer zugehörigen Thumbnail-Übersicht eingesetzt. Version 1.0, Seite 11

13 7 Prototypen 7.1 Papier-Prototyp, Horizontal Objekt erstellen, bearbeiten Seite 12 öffentlich Version 1.0, <date> M-xxx-xxx-V100-D

14 7.1.2 Objekt anzeigen, reservieren 7.2 HiFi-Prototyp Der HiFi-Prototyp wurde als PHP-Applikation realisiert und ist unter erreichbar. Version 1.0, Seite 13