Umsetzung und Evaluation einer anpassungsfähigen Website

Agile Neugestaltung von www.usability-toolkit.de


Bachelorarbeit, 2013
108 Seiten, Note: 1,3

Leseprobe

Inhaltsverzeichnis

Abbildungsverzeichnis

1. Einleitung
1.1, Motivation und Problemstellung
1.2, Ausgangspunkt und Zielsetzung
1.3, Forsehungshypothese
1.4, Aufbau der Arbeit

2. Responsive Webdesign
2.1, Definition und Grundlagen
2.1.1, Prozentbasierte/Flexible Gridlayouts (fluid grids)
2.1.2, Flexible/Skalierbare Bilder
2.1.3, Media Queries
2.2, Abgrenzung zu Adaptive Webdesign
2.2.1, Responsive vs. Adaptive Layout

3. Anforderungserhebung
3.1, Der Stakeholder Ansatz
3.1.1, Einordnung in das Projektmanagement
3.2, Stakeholder Analyse
3.2.1, Stakeholder Identifikation
3.3, Ausrichtung und Ziele
3.3.1, Stakeholder Workshop
3.3.2, Ergebnisse und Anforderungen

4. Konzeption
4.1, Inhaltsanalyse
4.2, Entwicklung einer Informationsarehitektur

5. Entwicklung
5.1, Konzepte der Webentwicklung
5.1.1, Progressive Enhancement
5.1.2, Mobile First
5.2, Der Responsive Design Workflow
5.3, Prototyping
5.3.1, Frameworks
5.4, Umsetzung des Konzepts

6. Usability Evaluation
6.1, Usability
6.1.1, Usability im Cross Channel-Use
6.1.2, Usability-Probleme
6.2, Evaluation
6.2.1, Formative vs, Summative Evaluation
6.2.2, Labor- oder Feldtest
6.3, Usability-Test
6.3.1, Testaufbau
6.4, Ergebnisse
6.4.1, Handlungsempfehlungen

7. Fazit und Ausblick

Literaturverzeichnis

A. Materialanhang
A.l. Informationsarehitektur für www.usability-toolkit.de
A.2. Grobkonzept für das Redesign von www,usability-toolkit,de
A.3. Prototyp www.usability-toolkit.de
A,4, Testkonzept
A.5. Auswertung der Vorbefragung
A.6. Auswertung des After Szenario Questionnare
A.7. Auswertung der Xaehbefragungi
A.8. Auswertung des Usability-Tests
A.9. Stakeholder Workshop
A, 10,Business Model Canvas Poster

Abbildungsverzeichnis

3.1, Stakeholderliste

4.1, Content Map von www.usability-toolkit.de
4.2, Content Map - Unternehmensziele und Inhalte
4.3, Content Map - Userziele und Inhalte
4.4, Informationsarehitektur - Hauptkategorien

5.1, Sehemantisehe Darstellung des Progressive Enhancement
5.2, Inhalt, Darstellung und Verhalten in dieser Reihenfolge
5.3, Der Workflow im Responsive Design
5.4, Inhalte auf der Startseite
5.5, Methoden Header
5.6, Inhalte im Akkordeonmenü
5.7, Weitere Inhalte einer Kategorie

6.1, After Szenario Questionnare

6.2, Durchschnittliche Aufgabenbewertung je Testperson

6.3, Die Skala des Xet Promoter Score

„Well established hierarchies are not easily uprooted;
Closely held beliefs are not easily released;
So ritual enthralls generation after generation,"
Tao Те Ching; 38 Ritual

1. Einleitung

In diesem Kapitel wird ein Überblick über die Motivation, dieses Thema zu bearbeiten, vorgestellt und erläutert welche Problemstellung (Abschnitt 1.1.) sich daraus ergibt. In Abschnitt 1.2. werden der Ausgangspunkt dargelegt und die Ziele der Arbeit definiert. In Punkt 1.3. wird darauf aufbauend eine Fragestellung konkretisiert und anschließend wird in Abschnitt l.f. ein Überblick über die Vorgehensweise in dieser Arbeit gegeben.

1.1. Motivation und Problemstellung

Das Internet ist ein Ort, der der Schnelligkeit sowie konstanter Veränderungen und Innovationen unterliegt. Seit Beginn der Kommerzialisierung im Jahre 1995 haben Web­designer und -entwiekler stets versucht ihre Ideen vom Papier in die Browser zu bringen. Viele Webdesigner, deren Auftraggeber und auch die Benutzer begegnen dem Web oft immer noch mit einer durch Papier geprägten Erwartungshaltung,

Diese Erwartungshaltung steht jedoch dem stetigen Wandel im Weg und läuft entgegen der aktuellen Trends und Entwicklungen im „mobilen Zeitalter", Mit der Erschwinglichkeit von mobilen Internet-Flatrates und der Entwicklung von Smartphones und Tablet-PCs existieren heute, neben dem Desktop-PC, Laptops und Xetbooks sowie eine Vielzahl von Geräten, die auf Websites zugreifen und diese anzeigen können. All diese Geräte bieten unterschiedliche Eigenschaften und Interaktionsmöglieh- keiten und so werden Webinhalte heutzutage in unzähligen, verschiedenen Lebenssitua­tionen konsumiert. Die Annahme, dass man Webinhalte nur am Heimeomputer und in einer ruhigen Minute nutzt, hat sieh schon lange als falsch erwiesen:

„Mobile Geräte werden, da man ständig in Verbindung steht, für soziale In­teraktion und Kommunikation (84%), Informationssuehe (52%), Unterhal­tung (90%) und sogar für Einkäufe genutzt und das zu jeder Zeit und an jedem Ort, Egal ob zu Hause (97%), auf der Arbeit (72%) oder im Geschäft (63%), Smartphones werden überall verwend (Xovakazi 2013, 5)

Der Ersteller einer Website weiß heute also weniger denn je, in weleher Situation, über welehes Gerät und auf weleher Bildschirmgröße seine Website besucht und dargestellt wird, Webdesigner und -entwiekler stehen daher der Herausforderung gegenüber Produk­te zu erschaffen, die trotz der verschiedenen Ausgangsbedingungen, dem Nutzer dennoch eine konstante Qualität, das heißt Benutzbarkeit und Xutzungserlebnis, bereitstellen, John Allsopp schrieb bereits im April 2000 in seinem Artikel „A Dao of Web Design":

„It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all," (Allsopp 2000)

Diese Aussage stützt die These des „One Web", welche den Gedanken verbreiten möch­te, dass allen Nutzern die gleichen Inhalte zugänglich gemacht werden sollten, ungeachtet in welchem Kontext und mit welchen Geräten sie Webinhalte konsumieren, (w3e 2008) Aktuell setzt sieh daher das Konzept des Responsive Webdesign durch, welehes in Kom­bination von flexiblen Bildern, prozentbasierten Gridlayouts und Media Queries eine Anpassung der Websites auf die einzelnen Geräte ermöglicht. Diese Techniken ermögli­chen anpassungsfähiges Webdesign und werden im Laufe der Arbeit genauer erläutert. Sie sollen Aufschluss darüber geben, welche Vorteile und Möglichkeiten sieh dadurch in der Webentwieklung bieten.

1.2. Ausgangspunkt und Zielsetzung

In meiner Projektarbeit „Konzeption einer mobilen Version für www.usability-toolkit.de" habe ich mich bereits ausgiebig mit der Konzeption von anpassungsfähigen Websites an­hand des Beispiels www.usability-toolkit.de befasst. Neben der Klärung der Vor- und Nachteile einer anpassungsfähigen Website im Gegensatz zu einer separaten mobilen Website wurde detailliert auf die Erarbeitung einer Informationsarehitektur sowie de­ren Evaluierung eingegangen. Außerdem wurden Standards für die Navigations- und Inhaltsgestaltung erörtert und verglichen, welche in den Kontext von anpassungsfähigen Design gesetzt wurden. Diese Ergebnisse stellen die Basis der folgenden Arbeit dar und wurden mittels Xutzertests evaluiert. Die sieh daraus ergebenden Resultate führten zu dem Schluss, dass eine frühe Entwicklung und Konzeption mittels eines HTML-/CSS- Prototvpen weitaus vorteilhafter bei der Erarbeitung von validen Ergebnissen gewesen wäre.

Diese Arbeit widmet sieh daher neben der Anforderungserhebung und der Konzep­tion für ein Responsive Webdesign, also einem Responsive Design Workflow, welcher schon in der frühen Konzeptionsphase greift und daher auf Státie-Moekup Designpro­zesse verzichtet. In der Arbeit sollen, anhand der praktischen Fallstudie der Website www,usability-toolkit,de, die folgenden Ziele erreicht werden:

- detaillierte Dokumentation einer Anforderungserhebung zur Gewinnung des Ver­ständnisses der zukünftigen Ausrichtung der Website und der damit verbundenen Ziele der Agentur usability.de
- detaillierte Dokumentation des Entwicklungsprozesses einer geräteunabhängigen Website nach aktuellen Standards und Best Practices sowie die Evaluation durch einen ersten qualitativen Usability-Test
- Vergleich des durchlaufenen Responsive Design Workflow mit den vorherrschenden Static Moekup Designprozessen

1.3. Forschungshypothese

Die gewonnenen Erkenntnisse sollen zum einen Aufschluss über die Anwendbarkeit und Zukunftssicherheit der Methode in der Praxis geben, zum anderen als Referenz für nach­folgende Projekte dieser Art dienen und auf Grund des derzeitigen, großen Interesses an dieser Thematik soll die Arbeit im Kontext der aktuellen Entwicklungen einen Teil zur Findung einer einheitlichen Lösung beitragen.

Die Forschungshypothese der Arbeit lautet wie folgt:

HO: Eine nach dem Prinzip des Responsive Design entwickelte Website kann auf lange Konzeptionsphasen, nach dem Statie-Moekup-Prinzip verzichten, und profitiert vom Prinzip des Rapid Prototyping.

Daraus leiten sieh folgende Xebenhypothesen ab:

Hl: Rapid Prototyping als Verfahren sollte nur in Verbindung mit entspre- ehenden Frameworks eingesetzt werden, da eine Umsetzung sonst zu viel Zeit und Ressourcen in Ansprueh nimmt,
H2: Usability Evaluationen sollten mögliehst früh in den Entwicklungsprozess eingebunden werden, um zu gewährleisten, dass das Produkt einem nutzer­zentrierten Ansatz naeh entwickelt wird.

1.4. Aufbau der Arbeit

In Kapitel 2 (Responsive Webdesign) wird zunächst ein Überblick und die Abgrenzung über den Forschungskontext gegeben, Kapitel 3 (Anforderungserhebung) beschäftigt sieh mit den unterschiedlichen Methoden zur Erhebung der Ausrichtung und Ziele einer Web­site in Zusammenarbeit mit den Stakeholdern, Eine Beschreibung der Aufbereitung die­ser Ergebnisse in der Konzeptionsphase ist in Kapitel 4 (Konzeption) der Arbeit zu finden. In Kapitel 5 (Entwicklung) wird zunächst auf die technischen Grundlagen einge­gangen und die praktische Entwicklung des Prototypen erläutert, Letztendlieh werden die Ergebnisse in Kapitel 6 (Evaluation) anhand von Usability-Tests überprüft und die Resultate in Kapitel 7 (Fazit) abschließend zusammengefasst.

2. Responsive Webdesign

Dieses Kapitel gibt einen Überblick über die für diese Arbeit relevanten Themenbereiche. Es werden die wichtigsten Begriffe geklärt, um ein einheitliches theoretisches Verständnis für den weiteren Verlauf der Arbeit zu gewährleisten.

In Abschnitt 2.1. wird zunächst der Begriff des Responsive Webdesign definiert und seine Grundlagen erläutert. Im Nächsten Abschnitt 3.2. wird eine Abgrenzung zum Ansatz des Adaptive Webdesign vorgenommen, sowie eine Abwägung der Vor- und Nachteile beider Ansätze.

2.1. Definition und Grundlagen

Der Autor Ethan Marcotte hatte bereits im März 2009 einen Artikel über die Vorteile des fluid grids1 geschrieben. Obwohl die zugrunde liegenden Techniken bereits bekannt und im Einsatz waren, bekam der Ansatz erst im Mai des Jahres 2010 durch die Veröf­fentlichung eines Fachartikels und durch die Ergänzung von Media Queries die Aufmerk­samkeit, die er verdiente und prägte somit den Begriff des „Responsive Webdesign"[1] [2], Marcotte zitiert darin aus John Allsopp’s Artikel „A Dao of Web Design":

„The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page.

We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility" (Allsopp 2000)

Marcotte schließt an und erklärt, dass das Web nie für eine bestimmte Darstellungs­methode entworfen wurde. Viele Entwickler vergessen, dass die Grundbausteine wie das Boxmodell standardmäßig flexibel sind und führen viele Techniken aus dem Printmedien- bereieh direkt über in den Webbereieh, woraus sieh ergibt, dass Websites in vordefinierte

Layouts verpackt werden, welche sieh an den Grenzen des Mediums Leinwand orientie­ren, (Marcotte 2011, 3)

Das große Spektrum der heutigen Geräteklassen und der damit verbundenen Displaygrö­ßen verlangt nun jedoch nach mehr als einer optimierten Seite, auf die Nutzer zugreifen können. Da es neben den Ressourcen, auch wegen der immer größer werdenden Vielfalt, kaum möglich ist für jedes Gerät eine Website zu entwickeln, kommt hier die erwähnte Flexibilität, welche dem Web von Natur aus inhärent ist, ins Spiel, Marcotte nennt in seinem Buch “Responsive Webdesign" drei Techniken, auf denen das Prinzip des Respon­sive Webdesign gründet und mit denen man geräteunabhängige Websites bauen können soll,

2.1.1. Prozentbasierte/Flexible Gridlayouts (fluid grids)

Die flexiblen Gestaltungsraster sind die wichtigste Eigenschaft einer reaktionsfähigen Website und bilden somit die Grundvoraussetzung, Sie basieren auf Prozenten für die Dimensionen aller Bestandteile und setzen nicht, wie oft stark verbreitet, auf feste Brei­ten in Pixeln zur Gestaltung einer Website, Diese flüssigen Angaben sind wichtig, damit das Layout und somit die Inhalte auf die unterschiedlichen Displaygrößen reagieren kön­nen, (Maurice 2012, 216)

2.1.2. Flexible/Skalierbare Bilder

Während Text aufgrund seiner inhärenten, natürlichen Eigenschaft kaum ein Problem bei der Skalierung darstellt, haben Bilder meist spezifisch festgelegte Breiten- und Hö­henangaben, Damit es nicht zu unerwünschten Effekten kommt, kann man die Bild- eigensehaften mittels CSS beeinflussen, sodass die Bilder nicht die Dimensionen ihres umgebenen Bereiches sprengen und sieh an die anderen Inhalte und die Bildsehirmgröße anpassen, (Maurice 2012, 222)

2.1.3. Media Queries

Die letzte wichtige Zutat für eine reaktionsfähige Website sind die Media Queries, Diese sind in der CSS3-Sepzifikation als Media Features[3] (screen, print, projection etc.) defi­niert, Mit ihrer Hilfe können unterschiedliche Eigenschaften des Ausgabegeräts abgefragt und je nach dessen Beschaffenheit andere CSS-Anweisungen angewendet werden. Dieses

Feature sorgt dafür, dass die Website sieh an das Gerät, also seine Displaygröße und Eigenschaften, anpasst, (Maurice 2012, 227)

2.2. Abgrenzung zu Adaptive Webdesign

Die Grundidee des Responsive Webdesign ist es, für einen HTML-Quelltext, mit Hilfe von Media Queries, unterschiedliche Stylesheets (CSS) auszuliefern,

Ethan Marcotte benutzte, wie bereits in Kapitel 2,1, beschrieben, ein prozentbasiertes Gridlayout, flexible Medien sowie Media Queries zur Umsetzung eines responsive. Lay­outs, Ein Layout im Stile des Adaptive Webdesign verzichtet auf das schwieriger umzu­setzende prozentbasierte Grid und liefert stattdessen per Media Query unterschiedliche feste Layoutbreiten aus. Dies führt unweigerlich zu der Frage, ob ein adaptives Layout als responsive Webdesign gehandelt werden kann. Dabei entstand eine Kontroverse, Auf der einen Seite hat sieh ein Lager gebildet, das die Meinung vertritt, dass jeder Ansatz ohne ein Fluid Grid nicht responsive sei. Auf der anderen Seite gibt es Vertreter, die der Meinung sind, dass responsive und adaptive Layouts, beides verschiedene Formen des Responsive Web Design seien. Ein Vertreter dieser Meinung ist Jeffrey Zeldman[4], der im Juli 2011 in seinem Blog schrieb, dass man den Begriff des responsive Design nicht an bestimmte Techniken koppeln sollte:

„Our understanding of “responsive design" should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user’s display and the limitations or capabilities of the device," (Zeldman 2011)

Responsive Design ist laut Zeldman demnach alles, was Websites Flexibilität verleiht und auf unterschiedlichen Geräten zufriedenstellend und ansprechend ausgegeben wird. Somit sind responsive Layouts und adaptive Layouts beides gleichberechtigte Formen des Responsive Design,

2.2.1. Responsive vs. Adaptive Layout

Wenn man von der in Kapitel 2,2, erläuterten Annahme ausgeht, stellt sieh also die Frage, was die einzelnen Vor- und Xachteile sind und wann welches Konzept seine An­wendung finden sollte,

Beim adaptive Layout steht das Ausgabegerät im Vordergrund und man erarbeitet ver­schiedene Ansichten für die einzelnen Displaygrößen, Der Kern ist i.d.R. ein starres Gridlayout in Kombination mit Media Queries,

Die Vorteile eines adaptive Layout sind zahlreich. Zum einen kann man gut mit dem klas­sischen Static-Mockup Design-Workflow arbeiten, da durch die festen Abmessungen das Erstellen von Wireframes und Skizzen keine größere Herausforderung darstellt. Hieraus ergibt sieh auch ein größerer gestalterischer Freiraum, da das starre Raster eine einfache­re Gestaltung der Inhalte zulässt. Ein weiterer Vorteil, der sieh aus diesem Punkt ergibt ist, dass auch die Inhalte nur für klar definierte Abmessungen optimiert werden müssen und nicht vollkommen flexibel sein müssen. Des Weiteren ist die technische Umsetzung unkompliziert und dadurch zeitsparend,

Nachteil bei diesem Ansatz ist, dass die Website nur für bestimmte Viewports0 opti­miert wird. Dadurch wird eine häufige Fehldarstellung auf abweichenden Geräteklassen erzeugt, was außerdem den Nachteil hat, dass man für zukünftig erscheinende Geräte nicht gewappnet ist. Außerdem ist die Zielgruppenanalyse zur Bestimmung der (zu dem Zeitpunkt) relevanten Größen extrem aufwändig, (Hellwig 2012) Um eine Seite für jede erdenkliche Displaygröße zu optimieren, ist ein responsive Layout die bessere Lösung, Hier arbeitet man vor allem mit einem flexiblen Gestaltungsraster, welches eine stu­fenlose Anpassung der Website auf dem Ausgabegerät ermöglicht. Im Gegensatz zum adaptive Layout wird hier nicht auf bestimmte Viewports optimiert, sondern so entwi­ckelt, dass der zur Verfügung stehende Platz optimal mit den Inhalten versorgt wird. Durch die Flexibilität des Rasters wird kein wertvoller Platz verschenkt.

Diese Flexibilität hat außerdem den Vorteil, dass jede Displaygröße optimal berück­sichtigt werden kann und auch zukünftige mobile Endgeräte bei der Entwicklung der Website, automatisch mit abgedeekt werden. Außerdem stehen die zu transportierenden Informationen und somit die konkreten Inhalte der Seite im Vordergrund, was dem Nut­zer entgegen kommt,

Nachteil eines responsive Layout ist der komplexe Gestaltungsaufwand, Die technische Umsetzung und die Anpassung der Seiteninhalte fallen weitaus komplexer aus, wodurch die Umsetzung eines solchen Layout sehr zeitintensiv ist. Da das Arbeiten mit Wirefra­mes und Skizzen sehr arbeitsintensiv wird und schnell an seine Grenzen stößt, erfordert es außerdem eine Veränderung des gewohnten Workflows, (Hellwig 2012) Hierzu folgt eine genauere Ausführung in Kapitel 5 dieser Arbeit,5Sichtbereich einer Softwareariwendurig, der tatsächlich nutzbar ist (Kunz 2013)

3. Anforderungserhebung

Dieses Kapitel beschreibt die Schritte und Methoden, welche bei der Erhebung der An­forderungen und Definition der Ziele für die Website www.usability-toolkit.de, gemacht wurden.

Im ersten Abschnitt 3.1. wird zunächst der Begriff des Stakeholders definiert und seine Rolle in das Projektmanagement eingeordnet. In Punkt 3.2. wird der Prozess des Sta­keholder Managements dargestellt und anhand des Fallbeispiels usability.de beschrieben. Im Punkt 3.3. werden die Interessen und Anforderungen der Stakeholder an das Projekt erarbeitet und anschließend die Ergebnisse präsentiert.

3.1. Der Stakeholder Ansatz

Um zu verstehen, wie eine Stakeholder Analyse funktioniert und durchgeführt werden kann, muss zunächst der Begriff des Stakeholders geklärt werden. Der Begriff .stake. stammt aus dem Englischen und kann mit Einsatz, Anteil oder Anspruch übersetzt werden, holder mit Eigentümer oder Besitzer. Der Stakeholder gehört daher zu einer Anspruchsgruppe.

„Anspruchgruppen sind alle internen und externen Personengruppen, die von den unternehmerischen Tätigkeiten gegenwärtig oder in Zukunft direkt oder indirekt betroffen sind," (Hadeler & Winter 2000, 140)

Post, Preston und Sachs definieren Stakeholder wie folgt:

„The stakeholders in a corporation are the individuals and constituencies that contribute, either voluntarily or involuntarily, to its wealth-creating capacity and activities, and therefore its potential beneficiaries and/or is bearers (Post et al. 2002, 19)

Stakeholder sind hiernach also Personen oder Gruppen, welche auf irgendeine Weise ein Interesse oder eine Beteiligung am geplanten Produkt haben. In der Regel sind es vor allem interne Mitarbeiter wie Produktmanager, Softwarearehitekten und Designer, Sta­keholder können jedoch auch externe Investoren oder Organisationen sein. Außerdem ist als externe Anspruchsgruppe in der Web- und Softwareentwicklung natürlich auch noch der Nutzer zu nennen. Da diese Anspruchsgruppen verantwortlich für das Projekt sind, ist es wichtig die Bedürfnisse und Ansprüche der einzelnen abzuholen und falls mög­lich zu berücksichtigen oder sogar einzelne Stakeholder in den weiteren Projektverlauf einzubeziehen, (Moser 2012, 50)

3.1.1. Einordnung in das Projektmanagement

Da, wie in Kapitel 3,1, festgestellt, nicht ganz klar definiert werden kann, wer in Projek­ten als Stakeholder in Frage kommt, muss für jedes Projekt individuell geprüft werden, welche Personen ein Interesse haben, wie sie davon beeinflusst werden und in welcher Art diese Personen wiederum das Projekt beeinflussen. Daher ist eine Stakeholder Analyse ein wichtiger Schritt bei der Vorbereitung von Projekten, Der erste Schritt in diesem Zusammenhang ist die erforderliche Projektumfeldanalyse, Von der Projektumfeldanalyse wird erwartet Informationen über Qualität und Quanti­tät von Wirkung des Umfelds auf das Projekt zu bekommen. Sie dient als Frühwarnsys­tem, um rechtzeitig negative Einflussfaktoren aus dem Projektumfeld zu erkennen und Maßnahmen zu finden. So muss auf diese Faktoren nicht erst während des Projekts rea­giert werden und das Projektteam ist nicht gezwungen sieh später auftretenden, äußeren Zwängen zu unterwerfen, (Hillebrand 2000, 26f.)

Hillebrand erklärt in seinem Artikel weiter, dass eine Umfeldanalyse in Zusammenhang mit einer Stakeholder Analyse eine zentrale Möglichkeit darstellt, etwaige Konflikte früh­zeitig auszuräumen, da Stakeholder und Projekt ihre eigenen Interessen verfolgen. Sollten diese nicht Deckungsgleich sein, kann es früher oder später zu tiefgreifenden Interdepen­denzen zwischen den beiden Systemen kommen und diese können wiederum Projektziele und Interessen gefährden.

Es wird daher geraten, die Projektziele mit dem Umfeld zu arrangieren, auf den Stake­holder als Kunden einzugehen und somit langfristig „Kundenzufriedenheit" seitens der Stakeholder zu erreichen, (Hillebrand 2000, 27f.)

Dieses Arrangement kann man nach Weilacher auch als Stakeholder Management be­zeichnen, Das Stakeholder Management richtet seinen Fokus auf die kommunikative und soziale Komponente eines Projekts und versucht die verschiedenartigen Interessen der Anspruchsgruppen und des Projekts zusammenzuführen, Hauptziel ist es daher die ver- sehiedenen Stakeholder zu identifizieren, ihre Bedürfnisse zu erfassen und diese dann in die Projektplanung mit einfließen zu lassen. So soll erreicht werden, dass Projekt- und Stakeholderziele möglichst kongruent sind und frühzeitig konstruktive Lösungen für Unstimmigkeiten gefunden werden, (Weilaeher 2005, 1)

3.2. Stakeholder Analyse

Nachdem in Kapitel 3,1,1, das Stakeholder Management in das Projektmanagement eingeordnet wurde, lässt sieh erkennen, dass die Stakeholder Analyse eine wichtige Rolle im Stakeholder Management spielt. Die Stakeholder Analyse gliedert sieh in drei Schritte auf: Identifikation, Einordnung und Beurteilung, Diese Schritte werden im Folgenden, am Beispiel der Agentur usability.de, näher ausgeführt,

3.2.1. Stakeholder Identifikation

Der erste Schritt des Stakeholder Management stellt also die Stakeholder Identi­fikation dar. Stakeholder können sowohl eine, als auch mehrere Personen oder auch Interessengruppen sein, je nach Projektgröße variierend. Bei der Identifikation werden daher systematisch alle möglichen Interessenträger betrachtet und deren Erwartungen, Einfluss und Interesse untersucht, Moser beschreibt folgende Fragen als zentral bei der Klärung dieser Punkte:

1 Wie stark ist sein Interesse am Erfolg des Projektes (klein, mittel, groß)?
2 Wie groß ist sein Einfluss auf den Projekt verlauf (klein, mittel, groß)?
3 Welches ist seine Rolle und sein Informationsbedürfnis?
4 Wie kann er motiviert und eingebunden werden, um das Projektrisiko zu minimieren?

(Moser 2012, 50)

Die Ergebnisse helfen dabei die Stakeholder daraufhin einzuordnen und zu entscheiden, wer eingebunden werden muss. Außerdem helfen sie einzusehätzen, welchen Einfluss die einzelnen Stakeholder auf das Projekt haben und was die damit verbundenen Risiken, die durch diese Personen entstehen können, sind. Anhand dieser Fragestellungen wurde eine Stakeholderliste erstellt, die die Analyseergebnisse in der folgenden Abbildung (3,1.) zusammenfasst:

Abbildung in dieser Leseprobe nicht enthalten

3.3. Ausrichtung und Ziele

In den folgenden Absehnitten wird das Vorgehen beim Erarbeiten der Unternehmens­ziele, in Zusammenhang mit der Website www.usability-toolkit.de, und den damit ver­bundenen Anforderungen dargelegt.

3.3.1. Stakeholder Workshop

Xaeh der Identifikation der Stakeholder dureh die Analyse und Einordnung geht es im näehsten Sehritt darum, ihre Interessen und ihre Anforderungen an das Projekt sowie die Rahmenbedingungen zu klären. Da in diesem Projekt drei Stakeholder beteiligt wa­ren, die alle der selben Agentur angehören und daher in etwa die gleiehen Ziele und Vorstellungen vertraten, entsehied ieh mieh, die Ausriehtung und die Ziele von usability- toolkit.de, in Form eines Workshops, anhand des Business Model Canvas (BMC) zu erarbeiten.

Dieses Werkzeug sollte dabei helfen die Strategisehe Ausriehtung des Toolkits und dessen Bedeutung für usability.de zu klären und festzulegen. Außerdem sehien es als eine gute Möglichkeit den Stakeholdern selbst dabei zu helfen ihre Bedürfnisse und Anforderun­gen an das Projekt zu konkretisieren und sieh klar zu werden, was die genauen Ziele sind.

Ein Business Model oder auch Gesehäftsmodell dient dazu, die Sehliisselfaktoren für den Erfolg eines Unternehmens festzuhalten.

„A business model deseribes the rationale of how an organization creates, delivers, and captures value," (Osterwalder et ah 2011, 14)

Eine gute Darstellung eines Geschäftsmodells ist der Ausgangspunkt jeder Analyse, da sie hilft, das bestehende Gerüst zu verstehen und anhand dessen Optimierungspoten­ziale zu identifizieren oder neue Geschäftsideen zu entwickeln.

Die Methode zur Visualisierung von Geschäftsmodellen mit Hilfe des Business Model Canvas haben Alexander Osterwalder und Yves Pegnoir gemeinsam entwickelt. Es soll Manager und Unternehmer dabei unterstützen Geschäftsmodelle zu beschreiben, desi­gnen, erfinden und zu erschließen.

In dem Modell wurden neun elementare Bausteine entwickelt, welche auf die vier Haupt­elemente eines Unternehmens (Kunden, Wertangebote, Infrastruktur und Kostenstruk­tur) verteilt werden und somit den Kern einer jeden Strategie ausmachen. (Osterwalder et ab 2011, 15)

Die neun Bausteine verteilen sieh wie folgt:

1, Kundensegmente

Das Kundensegment ist eine Gruppe von Personen oder Organisationen, die das Unternehmen erreichen und bedienen will. Der Kunde ist der Ausgangspunkt eines jeden Modells, Man beschreibt und analysiert zunächst Spezifika (z.B, Massen­markt, Xieschenmarkt): Wer ist unser Kunde und was will er erreichen? Welchen Leidensdruck hat er? Was sind seine Vorteile/Benefits?

2, Kundenbeziehungen

Welche Art von Beziehung erwartet jedes unserer Kundensegmente? Welche haben wir eingerichtet? Wie kostenintensiv sind sie?

3, Vertriebs- und Kommunikationskanäle

Über welche Kanäle wollen die Kunden erreicht werden Wie werden sie bisher erreicht und welche Kanäle sind am effektivsten und kos­teneffizientesten?

4, Wertangebot

Was sind die Produkt-/Dienstleistungspakete, die man dem jeweiligen Segment anbieten kann?

5, Schlüsselressourcen

Schlüsselressourcen können physischer, finanzieller, intellektueller als auch mensch­licher Xatur sein und sind abhängig vom Produkt, Beispiele für Schlüsselressourcen sind z.B, Rohstoffe, Prozesse, Know-How der Entwickler und Berater, Unterneh­mensbranding usw,

6, Schlüsselaktivitäten

Welche Aktivitäten zur Erfüllung des Wertversprechens werden erfordert?

7, Schlüsselpartnerschaften

Welche Netzwerke an Partnern und Lieferanten stehen zur Verfügung, die einem eventuelle Marktvorsprünge verschaffen können?

Durch bessere Produkte, Kostenverteilung und Gewinnung von Schlüsselressourcen reduziert man Geschäftsrisiken,

8, Kostenstruktur

Bei der Kostenstruktur stellt sich die Grundsatzfrage, ob das Projekt kosten- oder wertorientiert ist.

Das Verhalten der Kostenstruktur sollte verstanden werden. Wie Verhalten sich Mengeneffekte der variablen und fixen Kosten? Darunter fallen Software, rohst­offintensive Produkte, Fertigungsprozesse und Dienstleistungen,

9, Einnahmequellen

Zahlungsbereitsehaft: Wofür ist der Kunde bereit was/wie viel zu zahlen? Zahlungsmodelle: Kauf, Xutzungtsgebiihren, Miete, Leasing, Lizenzen, Freemium- Ansätze etc, (Oserwalder et ab 2011, 16-41)

Das soeben vorgestellte Model lässt sich, mit kleinen Abänderungen, ebenfalls gut auf einzelne Produkte oder auch Features innerhalb eines Unternehmens anwenden und so entschied ich es für den Workshop zur Erarbeitung der Ziele und Anforderungen für die Website www.usability-toolkit.de zu verwenden.

Hierfür wurde ein Meetingraum vorbereitet, in dem das Business Model Canvas als großes Poster bereitgestellt wurde und den Teilnehmern Stifte, Post-its und weiteres Material zur Verfügung gestellt wurden, Xaeh einer kurzen Einführung sollten die Teil­nehmer die einzelnen Aspekte brainstormen und diskutieren. Die Methode wurde gut aufgenommen und führte innerhalb kurzer Zeit zu verwertbaren Ergebnissen, auf denen aufbauend man konkrete Ziele formulieren und das weitere Vorgehen erarbeiten konnte,

3.3.2. Ergebnisse und Anforderungen

In seinem Buch „The Elements of User Experience" beschreibt Josse James Garrett fünf Ebenen, welche das Xutzungserlebnis auf einer Seite begründen. Die Ebene auf der alles andere aufbaut ist die Strategie Ebene. Damit eine Website erfolgreich ist, sagt er, braucht es zwei Kernziele die geklärt werden müssen:

1 Was wollen wir mit der Seite erreichen? Die Antworten auf diese Frage kommen von innerhalb des Unternehmens oder der Stakeholder und werden site, objectives genannt,
2 Was wollen unsere User mit der Seite erreichen? Dies ist die Zielsetzung, die dem Benutzer von der Seite aufgedrängt wird, und wird als user needs bezeichnet, (Garrett 2003, 40)

User Needs und site, objectives kann man formal in einem Strategie Dokument sam­meln, Dieses beinhaltet eine Analyse der user needs, Zielsetzung und wie diese in das größere Bild der Firmenziele passen, (Garrett 2003, 40 ff.)

Auf Basis des durehgeführten Workshops mit den Stakeholdern, ließen sieh eine stra­tegische Ausrichtung des Toolkits und dessen Bedeutung für die Agentur usability.de, also die site, objectives klären und werden im folgenden Abschnitt als Ergebnisse zusam­mengefasst, Außerdem wurde versucht daraus ebenfalls die user needs abzuleiten. Eine genauere Darstellung dieser wird außerdem noch in Kapitel 4,1, vorgenommen,

Ziel der Überarbeitung der Website www.usability-toolkit.de ist ein kompletter Relaunch der Website, da die Website bisher als Studienprojekt, in Zusammenarbeit mit der Uni­versität Hildesheim geführt wurde und nun von der Agentur usability.de komplett über­nommen wird. Dies bedeutet, dass die Schlüsselressource in diesem Fall, die Agentur selbst darstellt. Die Seite soll auch auf mobilen Geräten optimiert dargestellt werden, außerdem sollen Layout, Design sowie Inhaltsgestaltung überarbeitet und aktualisiert werden. Die Agentur usability.de soll als Initiator erkennbar sein und daher wird sieh bei der Überarbeitung an den bereits existierenden Seiten1 der Agentur orientiert. Dass die Organisation als Initiator erkannt wird, soll einem der Hauptziele dienen, welches das[5]

Aufbauen von Kundenbeziehungen betrifft. Mit dem Toolkit sollen zum einen Kunden angesproehen werden, die den Einstieg in Usability suelien und so potenzielle zukünftige Kunden binden. Es besteht also keine direkte Kundenbeziehung, jedoeh werden Ein- driieke über die Organisation aueh die Interaktion mit deren Produkten oder, in diesem Fall, deren Website gesammelt, daher sind nicht nur Logo, Farben und Typographie wichtig, sondern aueh Emotionen, die beim Verwenden der Seite aufkommen, (Garrett 2003, 41 ff.) Diese Emotionen sollen durch ein Wertangebot vermittelt werden. Die Web­site soll zum anderen als Entscheidungshilfe für Kunden dienen, die sieh erstmal über mögliche Optionen informieren wollen und als Einstieg und Überblick in Usability für die, die bisher noch keine Berührung mit dem Thema hatten, Neben neutralen und ehrlichen Informationen soll es außerdem eine Anleitung zur praktischen Anwendung zu einzelnen Usability Methoden geben, was vor allem neben potenziellen Kunden aueh Studenten angrenzender Disziplinen ansprechen soll. Des weiteren sollen einzelne Methoden mit Verweis auf usability.de als möglichen Partner bei der Durchführung gesehen werden, was als Kommunikationskanal gilt. All diese Punkte sollen bei Besuchern der Seite Ver­trauen erwecken, was langfristig die Kundenbeziehungen stärkt. Eine Schlüsselaktivität ist also die Gewinnung von Xeukunden und außerdem die Möglichkeit, „Xichť-Kunden nicht zu verlieren, sondern an die Agentur zu binden.

Die Universität Hildesheim und EFRE[6] sollen weiterhin als Partner in der Entstehungs­geschichte genannt werden. Außerdem wird die Universität und deren Studenten als Schlüsselpartner gesehen, da man zukünftig weiterhin in Zusammenarbeit Inhalte und Projekte rund um das Toolkit erarbeiten möchte. Die Kategorie Tools sollte vorerst auf Grund der Aktualität der vorhandenen Tools, nicht eingebunden werden. Die Ak­tualisierung und Ausarbeitung dieser Tools soll jedoeh als mögliches Praktikums- oder Universitätsprojekt angeboten werden.

Eine technische Veränderung betrifft das zu Grunde liegende Content-Management- System[7]. Das bisherige System „Typo 3" soll durch das kleinere und einfacher zu war­tende System „Wordpress" ersetzt werden, da diese im Fall der Website www,usability- toolkit,de alle Anforderungen ab deckt und aueh in den anderen Projekten der Agentur bereits zum Einsatz gekommen ist.

4. Konzeption

Das Kapitel fasst die Auseinandersetzung und Auswertung der Ergebnisse aus der An­forderungserhebung zusammen.

Zunächst wird in Punkt f.l. der Seite www.usability-toolkit.de analysiert und anhand von Content Maps aufgearbeitet, welche, als Vorbereitung und Grundlage für die in Abschnitt f.2. entwickelte. Informationsarchitektur dienen. Anschließend wird in Unterkapitel f.3. ein erstes und .sehr grobes Konzept, welches mit Axure erarbeitet wurde., vorgestellt.

4.1. Inhaltsanalyse

Wenn eine Website, in diesem Fall das Toolkit, entsprechend der Anforderungen der Sta­keholder neu gestaltet werden soll, ist der erste Schritt eine Analyse und Sammlung der Inhalte, der bereits bestehenden Seite durchzuführen. Eine erste Analyse der Website www.usability-toolkit.de wurde bereits in der Projektarbeit „Konzeption einer mobilen Version für www.usability-toolkit.de" gemacht.

In dieser Arbeit wurden zunächst die Seiteninhalte in unterschiedliche Seitentypen klas­sifiziert. Kalbaeh beschreibt drei Haupttypen von Seiteninhalten in Websites:

„1 Xavigationsseiten

Die Bestimmung von Xavigationsseiten liegt darin, die Website-Besucher zum ge­suchten Inhalt zu leiten. Beispiele hierfür sind Startseiten (Homepages), Landing- Pages und Galerieseiten.

2 Inhaltsseiten

Die Inhaltsseiten sind die Substanz ihrer Website und letztlich der Grund, warum ihre Website besucht wird. Beispiele sind Artikelseiten und Produktseiten.

3 Funktionelle Seiten

Funktionelle Seiten ermöglichen Benutzern die Ausführung bestimmter Handlun­gen wie die Durchführung einer Suche oder das Abrufen von E-Mails. Beispiele sind unter anderem Formularseiten und Applikationsseiten.

4. Konzeption

|,,,| Die hier genannten Kategorien von Seitentypen verweisen insofern eher auf den Hanptzweek einer Seite beziehungsweise auf ihre primäre Bestimmung innerhalb der Gesamt-Website," (Kalbaeh 2008, 107)

Anhand dieser Besehreibnng konnten folgende Seitentypen fiir das Toolkit ansgemaeht werden:

1, Homepage

Die Startseite bietet einen Überbliek über die Seite und ermöglieht dem Benutzer tiefer in die angebotenen Inhalte einznsteigen,

2, Themen- oder Kategorieseite

Diese Seiten lassen sieh aneli als Landing-Pages bezeiehnen. Sie sind sehr wichtig, denn sie dienen neben einer Orientierungsfunktion auch als Übersichtsseite für Besucher, die nicht über die Homepage auf die Seite gelangt sind, sondern über Suchmaschinen direkt auf einer der Kategorienseiten gelandet sind,

3, Galerieseite

Galerieseiten fungieren als Überbliek über bestimmte Gruppen von Inhalten und enthalten wichtige Informationen zu weiteren Inhalten und Möglichkeiten auf der Seite,

4, Inhaltsseiten

Wie der Käme schon sagt, sind Inhaltsseiten die Seiten, an denen die Besucher eigentlich interessiert sind, Inhaltsseiten können Artikel sein, Anleitungen, Nach­richten, alles was den Kern einer Website ausmacht. (Xovakazi 2013, 11 ff.)

Im nächsten Schritt wurden die identifizierten Seiten einer genauen Analyse unter­zogen und als Content Map[8] visualisiert. Eine Content Map ist eine visuelle Technik, welche hilft, den Inhalt einer Seite zu fassen und zu verstehen, und so eine Seite organi­sieren zu können, d.h. eine Inhaltsarchitektur zu erarbeiten. Außerdem hilft eine Content Map die Seitenziele herauszuarbeiten und zu verstehen.

Auf der Content Map sind vier Hauptbereiche auszumachen, in welche sieh die Inhal­te der Seite aufteilen lassen. Der erste Bereich sind die Static Pages welche vor allem Meta-Inhalte, wie Informationen über die Seite und Kontaktmöglichkeiten, anbieten. Der zweite Bereich ist Anwendung, wo sieh Tools und konkrete Anwendungsbeispiele zu

4. Konzeption

Methoden einordnen lassen. Der dritte Bereich sind die Gestaltungsempfehlungen, welche den Nutzern Beispiele zur Gestaltung von Elementen einer Website bieten und der letzte und größte Bereich ist Usability. Hier finden sieh Beschreibungen zu Usability Methoden und Artikel zu internationaler Usability, Des Weiteren werden Usability allgemein und die damit verbundenen Prozesse sowie ein konkreter Anwendungsfall dort beschrieben.

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 4.1.: Content Map von www.usability-toolkit.de

Nach der Erfassung aller Inhalte wird eine weitere Map erstellt, welche die gegebenen Inhalte den Zielen des Unternehmens zuordnet. In Abbildung 4,2, ist zu sehen, dass die Unternehmensziele oft unterschiedliche Ausprägungen haben können und aus einem Ziel auch ein Gewinn für ein anderes erzielt werden kann. Eines der definierten Hauptzie­le bei der Anforderungserhebung (Kapitel 3) war, dass die Agentur durch die Website neue Kunden gewinnen möchte, bzw, „Xichť-Kunden nicht verlieren und eventuell sogar langfristig binden möchte. Diesen Punkt stärken die beiden Ziele, „Anwendung/Entschei­dungshilfe" und „Informationen zu Usability", was bedeutet, dass das Hauptziel auf mehr als einem Wege erreicht werden kann.

Man erstellt außerdem eine weitere Map, welche die Inhalte der Seite den Zielen der Nutzer, die diese besuchen, zuordnet (siehe Abbildung 4,3,), Diese Schritte dienen als

Usability Methoden

Hilfe zur Anwendung bieten \ Gestaltungsempfehlungen

Abbildung in dieser Leseprobe nicht enthalten

Abbildung 4,2,; Content Map - Unternehmensziele und Inhalte

Vorbereitung für die zu entwickelnde Informationsarchitektur. Sie helfen Potenziale zu erkennen, Beziehungen zwischen einzelnen Inhalten zu verorten oder aufzudecken und außerdem auch Bezeichnungen für die Inhalte der Seite zu finden.

Abbildung 4.3.: Content Map - Userziele und Inhalte

Abbildung in dieser Leseprobe nicht enthalten

[...]


[1] Mlistapart.coni/article/fluidgrids [Last accessed 01. November 2013]

[2] Wörtlich übersetzt heißt responsive so viel wie reagierend oder reaktionsfähig und dementsprechend wäre reaktionsfähiges Webdesign eine adäquate deutsche Übersetzung.

[3] www.w3.org/TR/css3-mcdiaqucrics/ [Last accessed 02. November 2013]

[4] Designer, Autor und Herausgeber, http://www.zeldman.com/about/ [Last accessed 10. November 20131

[5] Tittp://www.ux-harmover.de/ und http://www.usabilityday.do/

[6] Europäischer Fond für regionale Entwicklung

[7] Ein Content-Management-System (kurz: CMS, deutsch ,Jnhaltsvorwaltungssystom“) ist eine Software zur gemeinschaftlichen Erstellung, Bearbeitung und Organisation von Inhalten (Content) zumeist in Webseiten, aber auch in anderen Medienformen. Christian (2013)

[8] A content map is a visual representation of tlie existing information environment (Morville & Rosen­feld 2006, 244)

Ende der Leseprobe aus 108 Seiten

Details

Titel
Umsetzung und Evaluation einer anpassungsfähigen Website
Untertitel
Agile Neugestaltung von www.usability-toolkit.de
Hochschule
Universität Hildesheim (Stiftung)  (Sprach- und Informationswissenschaften)
Note
1,3
Autor
Jahr
2013
Seiten
108
Katalognummer
V299585
ISBN (eBook)
9783656959694
Dateigröße
7373 KB
Sprache
Deutsch
Schlagworte
umsetzung, evaluation, website, agile, neugestaltung
Arbeit zitieren
Master of Arts Fjolle Novakazi (Autor), 2013, Umsetzung und Evaluation einer anpassungsfähigen Website, München, GRIN Verlag, https://www.grin.com/document/299585

Kommentare

  • Noch keine Kommentare.
Im eBook lesen
Titel: Umsetzung und Evaluation einer anpassungsfähigen Website


Ihre Arbeit hochladen

Ihre Hausarbeit / Abschlussarbeit:

- Publikation als eBook und Buch
- Hohes Honorar auf die Verkäufe
- Für Sie komplett kostenlos – mit ISBN
- Es dauert nur 5 Minuten
- Jede Arbeit findet Leser

Kostenlos Autor werden