Inhalt der Kurzvorstellung Projektinformation Vorgehen Ausschnitte aus der Prototypentwicklung Screenshots des Prototyps CMS: Marktübersicht und Fallstudie zur Einführung im FCV 2

Projektinformationen Projektinformation Vorgehen Prototypentwicklung Der Prototyp Projektinformationen

Projektinformationen Projektinformation Vorgehen Prototypentwicklung Der Prototyp 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. Das Ziel der Arbeit war es zunächst, die besonderen Anforderungen an die Webseite eines Beratungs- und Ausbildungsunternehmen am Beispiel von „artop - Institut an der Humboldt-Universität zu Berlin“ zu ermitteln und zu erarbeiten welche Auswirkungen diese auf die Gestaltung der Webseite haben müssten, um eine hohe Qualität dieser in Bezug auf die Gebrauchstauglichkeit und das Nutzungserlebnis zu gewährleisten. Im weiteren Verlauf, sollte ein Ausschnitt der erhobenen Anforderungen in Form eines Prototyps realisiert werden. Die Lösung muss in Bezug auf die ausgewählten spezifischen Anforderungen Erfahrbarkeit gewährleisten und dem Institut als Diskussionsgrundlage für die Überarbeitung der eigenen Onlinepräsenz dienen können. Zu Beginn der Arbeit stand noch nicht fest, welcher Ausschnitt oder welcher Teil der Webseite konzeptionell betrachtet und gestaltet werden sollte. Das war eine Größe, die in Abhängigkeit von den Ergebnissen der Anforderungsanalyse stand.

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

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

Vorgehen (2) Verbale Erläuterung des Vorgehens: Projektinformation Vorgehen Prototypentwicklung Der Prototyp 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.

Ausschnitte aus der Prototypentwicklung Projektinformation Vorgehen Prototypentwicklung Der Prototyp Ausschnitte aus der Prototypentwicklung

Projektinformation Vorgehen Prototypentwicklung Der Prototyp Ausgangspunkt der Prototypentwicklung: Ausgewählte Nutzungsanforderungen Die folgenden Nutzungsanforderungen wurden als am relevantesten erscheinend ausgewählt und im Prototyp implementiert: 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. Die Exploration des Angebots soll unterstützt werden. Übergänge zwischen Inhalten eines Zugangs zu Inhalten eines anderen fördern Am relevantesten erscheinende potentielle Nutzungsanforderungen: „Verschiedene Zugänge in das Informationsangebot und die Exploration des Angebots“ 1. Benutzer soll über verschiedene Zugänge einen Einstieg ins Informationsangebot von artop bekommen. Ein spezifischer Einstig soll ü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 durch Übergänge unterstützt und gefördert werden, indem es möglich ist von Inhalten eines Zugangs zu Inhalten eines anderen zu wechseln.

Mögliche Integration der Komponente in die artop-Hauptwebseite (1) Projektinformation Vorgehen Prototypentwicklung Der Prototyp Mögliche Integration der Komponente in die artop-Hauptwebseite (1) Klick auf einen Teaser mit der Miniaturansicht… (Abbildung 1: Integration der Komponente in die artop-Hauptwebseite )

Mögliche Integration der Komponente in die artop-Hauptwebseite (2) Projektinformation Vorgehen Prototypentwicklung Der Prototyp Mögliche Integration der Komponente in die artop-Hauptwebseite (2) …öffnet die Komponente in der Hauptwebseite. (Abbildung 2: Integration der Komponente in die artop-Hauptwebseite )

Vom Papier- zum interaktiven Flash-Prototypen Projektinformation Vorgehen Prototypentwicklung Der Prototyp Vom Papier- zum interaktiven Flash-Prototypen Die Realisierung des Prototyps hat in drei Schritten stattgefunden: Papierprototypen Photoshop-Layout Interaktiver 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: - Zunächst wurden die Interaktionsmöglichkeiten des Benutzers und eine erste visuelle Darstellung der Benutzerschnittstelle in Form von Storyboards entworfen. - Im zweiten Schritt wurde die Oberfläche der Komponente in verschiedenen Interaktions-Zuständen in Photoshop entworfen /die Benutzeroberfläche in Photoshop detailliert entworfen Abschließend ein Klick-Dummy in Flash entwickelt, der eine hohe Erfahrbarkeit in Bezug auf die Schnittstellenoberfläche und einige der möglichen Interaktionen aufweist. (Abbildung 3: Papierprototyp) (Abbildung 4: Flash-Prototyp)

Ausschnitt des Interaktionsdesigns Projektinformation Vorgehen Prototypentwicklung Der Prototyp Ausschnitt des Interaktionsdesigns Die Abbildungen zeigen einen Ausschnitt der Storyboards zur Entwicklung der Interaktionsmöglichkeiten des Benutzers und der Komponentenoberfläche. Die Realisierung des Prototyps hat in drei Schritten stattgefunden: - Zunächst wurden die Interaktionsmöglichkeiten des Benutzers und eine erste visuelle Darstellung der Benutzerschnittstelle in Form von Storyboards entworfen. - Im zweiten Schritt wurde die Oberfläche der Komponente in verschiedenen Interaktions-Zuständen in Photoshop entworfen /die Benutzeroberfläche in Photoshop detailliert entworfen Abschließend ein Klick-Dummy in Flash entwickelt, der eine hohe Erfahrbarkeit in Bezug auf die Schnittstellenoberfläche und einige der möglichen Interaktionen aufweist. (Abbildung 5: Entwicklung des Interaktionsdesigns und der Komponentenoberfläche) (Abbildung 6: Entwicklung der Hauptnavigation)

Umsetzung der Nutzungsanforderung „Exploration“ (1) Projektinformation Vorgehen Prototypentwicklung Der Prototyp Umsetzung der Nutzungsanforderung „Exploration“ (1) durch die Implementierung von 5 Interaktionskonzepten, die den Benutzer dazu motivieren, sich stärker mit einer Webseite auseinander zu setzen und sie zu explorieren: Beweglichkeit der Schnittstelle Erkennungszeichen (Grafiken) Personalisierung der Schnittstelle Zurücksetzen der Schnittstelle Freie Wegewahl zur Information 3 5 Die Anforderung nach der Exploration wurde vor allem durch die Umsetzung der Interaktionskonzepte aus der Studie vom Fraunhofer Institut für experimentelle Softwareentwicklung erfüllt… Die Interaktionskonzepte sollen den Benutzer dazu motivieren, sich stärker mit einer Webseite auseinander zu setzen und sie zu explorieren. deren Implementierung ich im folgenden kurz vorstelle… Interaktionskonzept „Beweglichkeit“ Durch die dynamischen Gestaltung der Hauptnavigation /bewegliche Schnittstelle („Beweglichkeit“) wird der Benutzer animiert den Raum „spielerisch“ zu entdecken. Interaktionskonzept „Erkennungszeichen“ = Grafikelemente Die Navigationseinträge bestehen aus Icons, die jeweils eine Hauptkategorie, also einen möglichen Zugang repräsentieren. Diese visuellen Metaphern werden aus zwei Gründen verwendet. A) prägen sich Bilder besser ins Gedächtnis ein als Texte B) erzeugt diese Form der Inhaltspräsentation beim Benutzer eine Spannung in Bezug auf die Interpretation des Wahrgenommenen. Und Diese interpretative Spannung motiviert den Benutzer etwas zu entdecken Interaktionskonzept „Personalisierung“ Die Identifikation des Benutzers mit der Software, sollte durch das Konzept der Personalisierung (4. Konzept) unterstützt werden. Dies kann erreicht werden, indem der Anwender zur Laufzeit die Spuren seiner Interaktionen auf der Schnittstelle hinterlassen kann. 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 Benutzer hinterlässt durch die „Lesezeichen“ seine Spuren auf der Oberfläche der Komponente und im Zuge dessen wird die Schnittstelle personalisiert. 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. Durch die Möglichkeit die personalisierte Schnittstelle durch einen „Klick“ auf einen Button zurückzusetzen und zum Originallayout zurückzukehren wird das Interaktionskonzept des „zurücksetzen“ realisiert. Interaktionskonzept „Wegewahl“ Benutzer sollte eine „freien Wegewahl“ haben, also die Möglichkeit für den Anwender eigene Wege zur Information oder Aktion finden, -> das wurde durch die verschiedenen Möglichkeiten der Navigation implementiert. 5 1 2 1 4 (Abbildung 7: Implementierung der Interaktionskonzepte) (Verbale Erläuterung zu den Interaktionskonzepten auf der nächsten Folie…)

Umsetzung der Nutzungsanforderung „Exploration“ (2) Projektinformation Vorgehen Prototypentwicklung Der Prototyp 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. Die Anforderung nach der Exploration wurde vor allem durch die Umsetzung der Interaktionskonzepte aus der Studie vom Fraunhofer Institut für experimentelle Softwareentwicklung erfüllt… Die Interaktionskonzepte sollen den Benutzer dazu motivieren, sich stärker mit einer Webseite auseinander zu setzen und sie zu explorieren. deren Implementierung ich im folgenden kurz vorstelle… Interaktionskonzept „Beweglichkeit“ Durch die dynamischen Gestaltung der Hauptnavigation /bewegliche Schnittstelle („Beweglichkeit“) wird der Benutzer animiert den Raum „spielerisch“ zu entdecken. Interaktionskonzept „Erkennungszeichen“ = Grafikelemente Die Navigationseinträge bestehen aus Icons, die jeweils eine Hauptkategorie, also einen möglichen Zugang repräsentieren. Diese visuellen Metaphern werden aus zwei Gründen verwendet. A) prägen sich Bilder besser ins Gedächtnis ein als Texte B) erzeugt diese Form der Inhaltspräsentation beim Benutzer eine Spannung in Bezug auf die Interpretation des Wahrgenommenen. Und Diese interpretative Spannung motiviert den Benutzer etwas zu entdecken Interaktionskonzept „Personalisierung“ Die Identifikation des Benutzers mit der Software, sollte durch das Konzept der Personalisierung (4. Konzept) unterstützt werden. Dies kann erreicht werden, indem der Anwender zur Laufzeit die Spuren seiner Interaktionen auf der Schnittstelle hinterlassen kann. 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 Benutzer hinterlässt durch die „Lesezeichen“ seine Spuren auf der Oberfläche der Komponente und im Zuge dessen wird die Schnittstelle personalisiert. 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. Durch die Möglichkeit die personalisierte Schnittstelle durch einen „Klick“ auf einen Button zurückzusetzen und zum Originallayout zurückzukehren wird das Interaktionskonzept des „zurücksetzen“ realisiert. Interaktionskonzept „Wegewahl“ Benutzer sollte eine „freien Wegewahl“ haben, also die Möglichkeit für den Anwender eigene Wege zur Information oder Aktion finden, -> das wurde durch die verschiedenen Möglichkeiten der Navigation implementiert. (Quelle: Pattern „Exploration“ des Fraunhofer Instituts für experimentelle Softwareentwicklung)

Screenshots des Prototyps Projektinformation Vorgehen Prototypentwicklung Der Prototyp Screenshots des Prototyps

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

Projektinformation Vorgehen Prototypentwicklung Der Prototyp

Vielen Dank für Ihr Interesse!