Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Kurzvorstellung der Bachelorarbeit Folie 1 © Jenny Joester Bachelorarbeit User Experience und Web-Usability: Anforderungen an Webseiten von Beratungsunternehmen.

Ähnliche Präsentationen


Präsentation zum Thema: "Kurzvorstellung der Bachelorarbeit Folie 1 © Jenny Joester Bachelorarbeit User Experience und Web-Usability: Anforderungen an Webseiten von Beratungsunternehmen."—  Präsentation transkript:

1 Kurzvorstellung der Bachelorarbeit Folie 1 © Jenny Joester Bachelorarbeit User 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

2 Kurzvorstellung der Bachelorarbeit Folie 2 / 19 © Jenny Joester Folie 2 Inhalt der Kurzvorstellung 1.Projektinformation 2.Vorgehen 3.Ausschnitte aus der Prototypentwicklung 4.Screenshots des Prototyps CMS: Marktübersicht und Fallstudie zur Einführung im FCV 2

3 Kurzvorstellung der Bachelorarbeit Folie 3 © Jenny Joester Projektinformationen Projektinformation Vorgehen Prototypentwicklung Der Prototyp

4 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

5 Kurzvorstellung der Bachelorarbeit Folie 5 © Jenny Joester Vorgehen Projektinformation Vorgehen Prototypentwicklung Der Prototyp

6 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 Auswahl Entwurf Prototyp Vorgehen (1) Anforderungsanalyse Spezifikation Modellierung Implementierung (Verbale Erläuterung auf der nächsten Folie…) Projektinformation Vorgehen Prototypentwicklung Der Prototyp

7 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

8 Kurzvorstellung der Bachelorarbeit Folie 8 © Jenny Joester Ausschnitte aus der Prototypentwicklung Projektinformation Vorgehen Prototypentwicklung Der Prototyp

9 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

10 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…

11 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.

12 Kurzvorstellung der Bachelorarbeit Folie 12 © Jenny Joester PapierprototypenPhotoshop-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:

13 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)

14 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 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)

15 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)

16 Kurzvorstellung der Bachelorarbeit Folie 16 © Jenny Joester Screenshots des Prototyps Projektinformation Vorgehen Prototypentwicklung Der Prototyp

17 Kurzvorstellung der Bachelorarbeit Folie 17 © Jenny Joester Der Prototyp Projektinformation Vorgehen Prototypentwicklung Der Prototyp

18 Kurzvorstellung der Bachelorarbeit Folie 18 © Jenny Joester Der Prototyp Projektinformation Vorgehen Prototypentwicklung Der Prototyp

19 Kurzvorstellung der Bachelorarbeit Folie 19 © Jenny Joester Der Prototyp Projektinformation Vorgehen Prototypentwicklung Der Prototyp

20 Kurzvorstellung der Bachelorarbeit Folie 20 © Jenny Joester Der Prototyp Projektinformation Vorgehen Prototypentwicklung Der Prototyp

21 Kurzvorstellung der Bachelorarbeit Folie 21 © Jenny Joester Der Prototyp Projektinformation Vorgehen Prototypentwicklung Der Prototyp

22 Kurzvorstellung der Bachelorarbeit Folie 22 © Jenny Joester Der Prototyp Projektinformation Vorgehen Prototypentwicklung Der Prototyp

23 Kurzvorstellung der Bachelorarbeit Folie 23 © Jenny Joester Der Prototyp Projektinformation Vorgehen Prototypentwicklung Der Prototyp

24 Kurzvorstellung der Bachelorarbeit Folie 24 © Jenny Joester Der Prototyp Projektinformation Vorgehen Prototypentwicklung Der Prototyp

25 Kurzvorstellung der Bachelorarbeit Folie 25 © Jenny Joester Der Prototyp Projektinformation Vorgehen Prototypentwicklung Der Prototyp

26 Kurzvorstellung der Bachelorarbeit Folie 26 © Jenny Joester Der Prototyp Projektinformation Vorgehen Prototypentwicklung Der Prototyp

27 Kurzvorstellung der Bachelorarbeit Folie 27 / 19 © Jenny Joester Folie 27 Vielen Dank für Ihr Interesse!


Herunterladen ppt "Kurzvorstellung der Bachelorarbeit Folie 1 © Jenny Joester Bachelorarbeit User Experience und Web-Usability: Anforderungen an Webseiten von Beratungsunternehmen."

Ähnliche Präsentationen


Google-Anzeigen