Kurzvorstellung der Bachelorarbeit Folie 1 © Jenny Joester Bachelorarbeit User Experience und...
-
Upload
walthari-mutz -
Category
Documents
-
view
114 -
download
5
Transcript of Kurzvorstellung der Bachelorarbeit Folie 1 © Jenny Joester Bachelorarbeit User Experience und...
Kurzvorstellung der Bachelorarbeit
Folie 1
© Jenny Joester
BachelorarbeitUser Experience und Web-Usability:Anforderungen an Webseiten von Beratungsunternehmen am Beispiel der Onlinepräsenz von “artop-Institut an der Humboldt-Universität zu Berlin”Kurzvorstellung des Projekts von Jenny Joester
Kurzvorstellung der Bachelorarbeit© Jenny Joester
Folie 2
Inhalt der Kurzvorstellung
1. Projektinformation
2. Vorgehen
3. Ausschnitte aus der Prototypentwicklung
4. Screenshots des Prototyps
Kurzvorstellung der Bachelorarbeit
Folie 3
© Jenny Joester
Projektinformationen
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 4
© Jenny Joester
Projektinformationen
Im Rahmen der Bachelorarbeit wurden Anforderungen an Webseiten von Beratungsunternehmen am Beispiel der Onlinepräsenz von „artop-Institut an der Humboldt-Universität zu Berlin“ ermittelt. Es sollte erarbeitet werden, welche Auswirkungen die festgestellten Anforderungen auf die Gestaltung der Webseite haben müssen, um eine hohe Qualität dieser in Bezug auf die Gebrauchstauglichkeit (engl. Usability) und das Nutzungserlebnis (engl. User Experience) zu gewährleisten. Ein Ausschnitt der erhobenen Anforderungen wurde in Form eines Prototyps realisiert.
Das methodische Vorgehen bei der Entwicklung hat sich an benutzerzentrierten Gestaltungsprozessen orientiert, in deren Folge eine Webseiten-Komponente für das Institut entworfen worden ist. Es wurde eine interaktive Komponente entworfen, die dem Benutzer spezifische Zugänge zum Angebot der Webseite bietet und ihn gleichzeitig motiviert das Informationsangebot zu explorieren.
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 5
© Jenny Joester
Vorgehen
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 6
© Jenny Joester
Nutzungskontext der Webseite erheben (Interviews, Competitive Analysis)
Festlegung der potentiellen Nutzungsanforderungen
Auswahl Nutzungsanforderung + Entscheidung für
Komponente
Anforderungsdefinition
Modellierung von Entwürfen
AuswahlEntwurf
PrototypVorgehen (1)
Anforderungsanalyse
Spezifikation
Modellierung
Implementierung
(Verbale Erläuterung auf der nächsten Folie…)
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 7
© Jenny Joester
Vorgehen (2)
Verbale Erläuterung des Vorgehens:
• Das Ziel der Analyse war es, ein spezifisches Verständnis über den Nutzungskontext der Webseite aufzubauen. Im Zuge der Datenerhebung wurden 18 Interviews mit den Auftraggebern, Mitarbeitern und Kunden des Instituts sowie eine Wettbewerbsanalyse durchgeführt. Die Informationen wurden mit Hilfe von Mind Maps ausgewertet.
• Die erhobenen Informationen wurden anschließend in potentielle Nutzungsanforderungen „übersetzt“ und durch eine Beschreibung in Form von Personas und Szenarien spezifiziert.
• Aufgrund der zeitlichen Rahmenbedingungen dieser Arbeit, war es nicht möglich alle identifizierten Nutzungsanforderungen in Gestaltungslösungen zu transformieren. Die am relevantesten erscheinenden Nutzungsanforderungen wurden ausgewählt, die prototypisch realisiert werden sollten. Außerdem wurde festgelegt, dass eine eigenständige Komponente zu entwickeln ist, die in die Hauptwebseite von artop integriert werden kann.
• Bevor mit dem Gestaltungsentwurf der Komponente begonnen werden konnte, wurden im Rahmen der Anforderungsdefinition, die Anforderungen an das System festgelegt, die erreicht werden müssen, um die ausgewählten Nutzungsanforderungen zu erfüllen.
• Im Anschluss wurden verschieden Gestaltungslösungen für die umzusetzende Komponente entwickelt.
• Von diesen Entwürfen wiederum, wurde einer ausgewählt, der als Prototyp realisiert werden sollte.
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 8
© Jenny Joester
Ausschnitte aus der Prototypentwicklung
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 9
© Jenny Joester
Ausgangspunkt der Prototypentwicklung: Ausgewählte Nutzungsanforderungen
Die folgenden Nutzungsanforderungen wurden als am relevantesten erscheinend ausgewählt und im Prototyp implementiert:
1. Benutzer soll über verschiedene Zugänge einen Einstieg ins Informationsangebot von artop bekommen. – Ein spezifischer Einstig soll zunächst über „Person“, „Produkte & Leistungen“, „Themen“,
„Unternehmen“ möglich sein. – Die Zugänge müssen dabei alle gleichberechtigt sein – keiner darf dominieren.
2. Die Exploration des Angebots soll unterstützt werden.– Übergänge zwischen Inhalten eines Zugangs zu Inhalten eines anderen fördern
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 10
© Jenny Joester
Mögliche Integration der Komponente in die artop-Hauptwebseite (1)
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
(Abbildung 1: Integration der Komponente in die artop-Hauptwebseite )
Klick auf einen Teaser mit der Miniaturansicht…
Kurzvorstellung der Bachelorarbeit
Folie 11
© Jenny Joester
Mögliche Integration der Komponente in die artop-Hauptwebseite (2)
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
(Abbildung 2: Integration der Komponente in die artop-Hauptwebseite )
…öffnet die Komponente in der Hauptwebseite.
Kurzvorstellung der Bachelorarbeit
Folie 12
© Jenny Joester
Papierprototypen
Photoshop-Layout
Interaktiver Flash-Prototyp
Vom Papier- zum interaktiven Flash-Prototypen
(Abbildung 3: Papierprototyp)
(Abbildung 4: Flash-Prototyp)
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Zunächst wurden die Interaktions-möglichkeiten des Benutzers und eine erste visuelle Darstellung der Benutzerschnittstelle in Form von Storyboards entworfen.
Im zweiten Schritt wurde die Benutzeroberfläche in Photoshop detailliert entworfen
Abschließend wurde ein Klick-Dummy in Flash entwickelt, der eine hohe Erfahrbarkeit in Bezug auf die Schnittstellenoberfläche und einige der möglichen Interaktionen aufweist.
Die Realisierung des Prototyps hat in drei Schritten stattgefunden:
Kurzvorstellung der Bachelorarbeit
Folie 13
© Jenny Joester
Ausschnitt des Interaktionsdesigns
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Die Abbildungen zeigen einen Ausschnitt der Storyboards zur Entwicklung der Interaktionsmöglichkeiten des Benutzers und der Komponentenoberfläche.
(Abbildung 5: Entwicklung des Interaktionsdesigns und der Komponentenoberfläche)
(Abbildung 6: Entwicklung der Hauptnavigation)
Kurzvorstellung der Bachelorarbeit
Folie 14
© Jenny Joester
Umsetzung der Nutzungsanforderung „Exploration“ (1)
1. Beweglichkeit der Schnittstelle
2. Erkennungszeichen (Grafiken)
3. Personalisierung der Schnittstelle
4. Zurücksetzen der Schnittstelle
5. Freie Wegewahl zur Information
12
3
4
5 1
5
durch die Implementierung von 5 Interaktionskonzepten, die den Benutzer dazu motivieren, sich stärker mit einer Webseite auseinander zu setzen und sie zu explorieren:
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
(Verbale Erläuterung zu den Interaktionskonzepten auf der nächsten Folie…)
(Abbildung 7: Implementierung der Interaktionskonzepte)
Kurzvorstellung der Bachelorarbeit
Folie 15
© Jenny Joester
Umsetzung der Nutzungsanforderung „Exploration“ (2)
Erläuterung zu den 5 Interaktionskonzepten:
• Interaktionskonzept „Beweglichkeit“: Durch die dynamischen Gestaltung der Hauptnavigation wird der Benutzer animiert den Raum „spielerisch“ zu entdecken.
• Interaktionskonzept „Erkennungszeichen“: Die Navigationseinträge bestehen aus Icons, die jeweils eine Hauptkategorie / einen Zugang repräsentieren. Diese Form der Inhaltspräsentation erzeugt beim Benutzer eine Spannung in Bezug auf die Interpretation des Wahrgenommenen und motiviert ihn dadurch etwas zu entdecken
• Interaktionskonzept „Personalisierung“: Die Identifikation des Benutzers mit der Software, sollte durch das Konzept der Personalisierung unterstützt werden. Durch das Hinzufügen einer Miniatur des Icons aus der Hauptnavigation zu der personalisierten Navigation, sobald der Benutzer einen Zugang besucht hat, wird das Interaktionskonzept der Personalisierung umgesetzt. Der Anwender kann somit zur Laufzeit die Spuren seiner Interaktionen auf der Schnittstelle hinterlassen.
• Interaktionskonzept „zurückzusetzen“: Zur Exploration muss sich der Benutzer sicher fühlen. Durch die Sicherheit, dass er den Interaktionsprozess, so oft er will, erneut beginnen kann, wird der Benutzer zum spielerischen Umgang mit der Software ermutigt. Das ist im Prototyp durch die Möglichkeit implementiert, die personalisierte Schnittstelle durch den „Klick“ auf einen Button zurücksetzen zu können, um zum Originallayout zurückzukehren.
• Interaktionskonzept „Wegewahl“: Benutzer sollte eine „freien Wegewahl“ haben, also die Möglichkeit für den Anwender eigene Wege zur Information oder Aktion finden. Im Prototyp implementiert durch die verschiedenen Möglichkeiten der Navigation.
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
(Quelle: Pattern „Exploration“ des Fraunhofer Instituts für experimentelle Softwareentwicklung)
Kurzvorstellung der Bachelorarbeit
Folie 16
© Jenny Joester
Screenshots des Prototyps
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 17
© Jenny Joester
Der Prototyp
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 18
© Jenny Joester
Der Prototyp
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 19
© Jenny Joester
Der Prototyp
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 20
© Jenny Joester
Der Prototyp
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 21
© Jenny Joester
Der Prototyp
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 22
© Jenny Joester
Der Prototyp
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 23
© Jenny Joester
Der Prototyp
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 24
© Jenny Joester
Der Prototyp
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 25
© Jenny Joester
Der Prototyp
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 26
© Jenny Joester
Der Prototyp
Projektinformation Vorgehen Prototypentwicklung Der Prototyp
Kurzvorstellung der Bachelorarbeit
Folie 27 / 19
© Jenny Joester
Folie 27
Vielen Dank für Ihr Interesse!