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

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


Folie 3

© Jenny Joester

Projektinformationen

Projektinformation Vorgehen Prototypentwicklung Der Prototyp


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.



Folie 5

© Jenny Joester

Vorgehen



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



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.



Folie 8

© Jenny Joester

Ausschnitte aus der Prototypentwicklung



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



Folie 10

© Jenny Joester

Mögliche Integration der Komponente in die artop-Hauptwebseite (1)


(Abbildung 1: Integration der Komponente in die artop-Hauptwebseite )

Klick auf einen Teaser mit der Miniaturansicht…


Folie 11

© Jenny Joester

Mögliche Integration der Komponente in die artop-Hauptwebseite (2)


(Abbildung 2: Integration der Komponente in die artop-Hauptwebseite )

…öffnet die Komponente in der Hauptwebseite.


Folie 12

© Jenny Joester

Papierprototypen

Photoshop-Layout

Interaktiver Flash-Prototyp

Vom Papier- zum interaktiven Flash-Prototypen

(Abbildung 3: Papierprototyp)

(Abbildung 4: Flash-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:


Folie 13

© Jenny Joester

Ausschnitt des Interaktionsdesigns


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)


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:


(Verbale Erläuterung zu den Interaktionskonzepten auf der nächsten Folie…)

(Abbildung 7: Implementierung der Interaktionskonzepte)


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.


(Quelle: Pattern „Exploration“ des Fraunhofer Instituts für experimentelle Softwareentwicklung)


Folie 16

© Jenny Joester

Screenshots des Prototyps



Folie 17

© Jenny Joester

Der Prototyp



Folie 18

© Jenny Joester

Der Prototyp



Folie 19

© Jenny Joester

Der Prototyp



Folie 20

© Jenny Joester

Der Prototyp



Folie 21

© Jenny Joester

Der Prototyp



Folie 22

© Jenny Joester

Der Prototyp



Folie 23

© Jenny Joester

Der Prototyp



Folie 24

© Jenny Joester

Der Prototyp



Folie 25

© Jenny Joester

Der Prototyp



Folie 26

© Jenny Joester

Der Prototyp



Folie 27 / 19

© Jenny Joester

Folie 27

Vielen Dank für Ihr Interesse!

Documents

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