Welche Interfacedesignentscheidungen tragen zur Verbesserung der Software-Usability allgemein und projektbezogen auf "mki-web 3.0" bei?

Transkript

1 Welche Interfacedesignentscheidungen tragen zur Verbesserung der Software-Usability allgemein und projektbezogen auf "mki-web 3.0" bei? David Bader Bachelor Projekt Sommersemester 2014 Medien- und Kommunikationsinformatik Fakultät Informatik Hochschule Reutlingen Abstract: Usability ist ein wichtiges Thema in der Webseitenentwicklung. Sie entscheidet über Erfolg oder Misserfolg einer Webseite. In der folgenden Arbeit soll evaluiert werden, wie sich das Interfacedesign auf verschiedene Kriterien der Usability auswirken kann und zu einer Verbesserung der Usability beiträgt. Es werden die Grundlagen aufgearbeitet, Kriterien der Usability erörtert und Designentscheidungen genannt. Zudem wird ein Bezug der genannten Punkte zum mki-web 3.0 Projekt hergestellt.

2 1 Begriffsdefinition und Begriffszuordnung Im folgenden Kapitel werden alle wichtigen Begriffe erkläret und differenziert. 1.1 Interfacedesign Interfacedesign beschreibt die Gestaltung von Benutzeroberflächen und Visualisierung von Daten zur Informationsbereitstellung. Dabei geht es um Bedürfnisse und Erwartungen eines Benutzers, welche er an das designte System hat. Dabei legt, steuert und ermöglicht das Interfacedesign die Kommunikation zwischen dem Mensch und der Maschine. Die Kommunikation beschränkt sich aber nicht nur auf die Mensch- Maschine-Kommunikation, sondern auch auf die Interaktion zwischen Menschen, welche mit Hilfe von Maschinen kommunizieren. Grundsätzlich gilt dies für Hard- und Software. Im Falle von mki-web 3.0 ist dies die Benutzeroberfläche einer Webseite. Im idealen Fall dient das Interfacedesign nicht nur Kommunikation und Information, sondern löst eigenständig verschiedene Verhalten aus und reagiert individuell auf diese. Ein Beispiel hierfür ist die optimale Anpassung einer Webseite an die Bildschirmauflösung des Benutzers. Dadurch kann das Interfacedesign zur Erlebnisumgebung werden und von Menschen als ein auf sie optimiertes und orientiertes System wahrgenommen werden. Zudem wird durch das Interfacedesign das Image des Produkts bestimmt (vgl. [St07, S.466]). 1.2 Interaktionsdesign Im Gegenzug zum Interfacedesign, welches darstellt, was etwas ist und wie etwas funktioniert, konzentriert sich das Interaktionsdesign auf den interaktiven Weg durch ein System, die Gestaltung von Informationsstrukturen und der Kommunikation zwischen Mensch und Maschine (vgl. [He06, S.6]). Interaktionsdesign beschreibt einen Funktionsvorgang, den Weg der Durchführung einer Funktion bzw. die Art und Weise, wie der Anwender dazu angeregt wird, zu agieren bzw. zu interagieren. Interaktionsdesign ist aber auch eine Form der Kommunikation [St10, S.19]. Somit können neue Erfahrungen für einen Benutzer mit einem System ermöglicht werden. Interaktionsdesign ist aber nur ein Element der Gesamtgestaltung eines Systems. Dabei sollte die Form immer der Funktion folgen (form follows function). Dies bedeutet, dass die Funktionalität der Rahmen für die Form und Gestaltung sein sollte (vgl. [St10, S.19]).

3 1.3 Usability Usability kann mit Begriffen wie Benutzerfreundlichkeit, Bedienbarkeit und Benutzbarkeit ins Deutsche übersetzt werden. Usability bezieht sich dabei auf die Interaktion zwischen dem Menschen und der Maschine, im Falle von mki-web 3.0 auf eine Webseite. Der Nutzer interagiert mit der Webseite durch Lesen der Inhalte, Klicken von Links, Suchen oder durch Ausfüllen von Formularen. Bei der Usability steht der Benutzer im Mittelpunkt. Das grundlegende Ziel von Usabiliy ist es daher, eine Webseite für den Benutzer nutzbar zu machen und diesen zum Erflog zu führen (vgl. [DR12, S.521f], [BKP09, S.2f]). Usability ist von der Internationalen Standardisierungsorganisation in der DIN EN ISO 9241 wie folgt definiert: Usability ist das Ausmaß, in dem ein Produkt durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um bestimmte Ziele effektiv, effizient und zufriedenstellend zu erreichen [DR12, S.522]. Die Usability wird dementsprechend durch die Effektivität und Effizienz einer Aufgabenerledigung und der Zufriedenheit des Benutzers in einem bestimmten Nutzungskontext definiert. Die Effektivität ist die Prägnanz und Gesamtheit, mit der ein Benutzer ein bestimmtes Ziel erreichen kann. Die Effizienz steht dabei in Relation mit dem Aufwand zur Prägnanz und Gesamtheit, durch das der Benutzer ein Ziel erreicht (vgl. [DR12, S.531ff], [BKP09, S.3ff]). Konkret bedeutet dies, dass die Usability dann erfüllt ist, wenn der Benutzer in der Lage ist, mit möglichst wenig Aufwand das von ihm gewünschte Ziel zu erreichen. Die Zufriedenheit ist das subjektive Empfinden eines Benutzers über eine Webseite. Ist der Benutzer zufrieden, besucht er die Seite auch noch ein zweites Mal. Der Nutzungskontext ist das Umfeld in der das System genutzt wird, das Ziel des Systems und der situationsbedingte Besuch des Systems durch den Benutzer (vgl. [DR12, S.531ff], [BKP09, S.3ff]). Auch innerhalb des mki-web 3.0 Projekts ist es uns wichtig, eine gute Usability zu haben. 1.4 User Experience Der Begriff User Experience (UX) beschreibt neben der tatsächlichen Verwendung eines Systems auch die vorher bestehende Erwartungshaltung an diese und nach Abschluss der Nutzung die Verarbeitung der erlebten Nutzungssituation. Die User Experience umfasst dabei negative und positive Emotionen, Vorstellungen, Vorlieben, Verhaltensweisen, Leistungen, Sinneswahrnehmungen sowie physische und psychologische Reaktionen, welche sich vor, während und nach der Nutzung eines System ergeben (vgl. [SB11, S22]). User Experience ist ein Produkt des Markenbilds, der Darstellung, Funktionalität, Systemleistung, des interaktiven Verhaltens und der Unterstützungsmöglichkeiten des interaktiven Systems, des psychischen und physischen Zustands des Benutzers aufgrund seiner Erfahrungen, Einstellungen, Fähigkeiten und seiner Persönlichkeit sowie des Nutzungskontextes [Ga10, S.22].

4 Abbildung 1:Sicht auf Usability und User Experience Quelle: Zusammengefasst lässt sich sagen, dass die Usability ein wichtiger Faktor für die Systemqualität darstellt, jedoch nur einer von vielen Bestandteilen ist, welcher Einfluss auf die User Experience hat.

5 2 Kriterien von guter Usability in Webprojekten und kritische Betrachtung auf das mki-web 3.0 Projekt Im folgenden Kapitel werdem Kriterien gennant und beschrieben, die für eine gute Usability in Webseiten unverzichtbar sind. Zudem wird Bezug auf die mki-web 3.0 Webseite zu jeden Kriterium genommen und evaluiert, ob diese bereits implementiert sind, noch implementiert werden müssen oder nicht relevant für für das Projekt sind. Um eine Übersicht über die Kriterien zu erhalten, werden diese erst tabellarisch dargestellt. Nummer Kriterium 1 Konsistenz 2 Unterschiedliche Erfahrungen der Benutzer 3 Feedback zu Aktionen von Benutzern 4 Zusammengehörige Aktionen 5 Fehler vermeiden 6 Zurücksetzen von Aktionen 7 Anwenderbestimmte Eingaben 8 Geringe Belastung des Kurzzeitgedächtnisses 9 Klare Auswege 10 Ansprechende und minimale Gestaltung 11 Dokumentation und Hilfe 12 Barrierefreiheit Abbildung 2: Tabellarische Aufzählung der Usability Kriterien

6 2.1 Konsistenz Einer der wohl wichtigsten Regeln für eine gute Usability ist die Konsistenz. Das Aussehen und Anordnen von Elementen ist genau so wichtig für die Konsistenz wie auch die einheitliche Wortwahl für Menüs, Buttons und Texte. Zudem ist eine einheitliche Gestaltung von Layout, Schriftarten, Farben, Schriftgrößen sowie eine konsistente Abfolge von Handlungssequenzen in ähnlichen Situationen unbedingt für die Konsistenz in Webprojekten notwendig. Um die Konsistenz in Webprojekten weitgehend zu gewährleisten, ist ein Styleguide unabdingbar. Jeder Programmierer muss diesen Styleguide kennen und verstanden haben (vgl. [Bh02, S.100]). Nur so kann eine einheitliche Benutzerschnittstelle erstellt und gestaltet werden. Innerhalb des mki-web 3.0 wurde ein Styleguide 1 erstellt. Dort sind alle Farben, Schriftarten, Schriftgrößen und weitere wichtige Elemente für eine konsistente Weboberfläche definiert und festgehalten (vgl. [Ho14, S.2]. Zusätzlich durch den CSS Compiler LESS wurden Variablen für die verschiedenen Farben, Schriftarten und Schriftgrößen angelegt. Durch dieses Verfahren und die Verwendung der Variablen kann zusätzlich die Konsistenz im mki-web 3.0 garantiert werden. Innerhalb des Projektes und des Dashboards wird mit Drag and Drop gearbeitet. Das personalisierte Anpassen der linken Navigation sowie das Verschieben der Widgets im Dashboard selbst und das Hochladen eines Profilbilds funktionieren mit Drag and Drop. Hiermit wird eine konsistente Arbeitsweise geschaffen. Abbildung 3 zeigt das Verschieben, Hinzufügen und Löschen von Widgets via Drag and Drop. 1 Link zum Stylehuide:

7 Abbildung 3: Widgets bearbeiten im Dashboard; Quelle: Ein weiteres Beispiel sind die aktiven und inaktiven Apps sowie die Widgets in den Navigationen. Diese werden immer in den gleichen Farben angezeigt, abhängig davon, ob diese aktiv sind oder nicht. Abblidung 4 zeigt den Bearbeitungsmodus für die Navigation. Zudem ist die konsistene Farbgebung der aktiven Apps im Vergleich zu den aktiven Widgets in Abbildung 3 zu sehen.

8 Abbildung 4: Bearbeitungsmodus der Navigation; Quelle: Ein kritischer Punkt ist die Entwicklung weiterer Apps nachfolgender Iterationen. Es kann nicht gewährleistet werden, dass nachfolgende Iterationen sich an den Styleguide halten und die entsprechenden Variablen im LESS verwenden. Somit kann eine Inkonsistenz in den verschiedenen Apps auftreten und die Zusammengehörigkeit der verschiedenen Apps verloren gehen. Eine Maßnahme könnten Schulungen oder Pair Programming am Anfang jeder neu gestarteten Iteration sein. Somit kann jeder neuen Iteration der Styleguide nahe gebracht werden und eine Kontrolle durch den zweiten erfahrenen Programmierer über die Verwendung der richtigen Farben, Größen usw. gewährleistet werden.

9 2.2 Unterschiedliche Erfahrungen der Benutzer Jeder Benutzer einer Webseite oder einer Software hat verschiedene Vorkenntnisse und Erfahrungen mit dem Umgang von Webseiten. Zudem entwickelt sich ein Benutzer weiter und lernt die benutzte Webseite immer besser kennen. Daher sollte jedem Benutzerlevel eine entsprechende Benutzeroberfläche mit verschiedenen Interaktionsformen bereitgestellt werden. Benutzer mit wenigen Vorkenntnissen arbeiten meist mit Navigationen und Menüs und gelangen darüber zu den verschiedenen Funktionen. Nach einer gewissen Zeit lernen Anfänger das System und deren Logik kennen und können mit Abkürzungen (Shortcuts) arbeiten. Fortgeschrittene oder erfahrene Nutzer arbeiten mit Shortcuts und wollen die Interaktionen mit dem Benutzerinterface gering halten (vgl. [Da06, S. 151f]). Im Folgenden wird Bezug auf dieses Kriterium zum mki-web 3.0 Projekt genommen. Im mki-web 3.0 Projekt gibt es derzeit keine verschiedenen Interaktionsformen mit der Webseite. Alle Funktionen und Informationen sind ausschließlich über Navigation und Links zu erreichen. Durch die einfache Interaktionsmöglichkeit können alle Erfahrungsgruppen mit der Webseite arbeiten. Eine Erweiterung durch Shortcuts der Webseite für erfahrene Benutzer ist aber denkbar. Auf dem Dashboard könnten Widgets durch Arbeiten mit Shortcuts schnell hinzugefügt, gelöscht oder bearbeitet werden. Auch in der Kalender App ist das Verwenden von Shortcuts sinnvoll. Hier können beispielsweise Termine schnell erstellt, bearbeitet oder gelöscht werden. Vergleichsweise könnten diese Aktionen schneller ausgeführt werden und viele Mausklicks eingespart werden. Eine Umsetzung und Implementierung ist in der Iteration mw2 nicht mehr denkbar, aber eine durchaus in Erwägung zu ziehende Erweiterung des Systems durch nachfolgende Iterationen. 2.3 Feedback zu Aktionen von Benutzern Für eine gute Usability ist es unbedingt notwendig, dem Benutzer Feedback auf die ausgeführten Aktionen zu geben. Somit realisiert der Benutzer sofort, ob die Aktion vom System angenommen wurde und verarbeitet ist beziehungsweise wird. Besonderes wichtig ist das Feedback auf Aktionen, die lange Vorbereitungszeiten für ein Ergebnis brauchen und diese erst nach längerer Zeit geliefert werden. In den meisten Fällen wird visuelles Feedback gegeben. Ein Beispiel hierfür ist das Schattieren einer Fläche oder das Eindrücken eines Buttons. Arbeitet ein Benutzerinterface nach dem Prinzip der direkten Manipulation [Da06, S.152], ist das Ergebnis einer Aktion sofort zu sehen und das Feedback in den häufigsten Fällen schon Bestandteil der Aktion. Ein Beispiel hierfür ist das Verschieben von Bildern oder Texten. Diese werden nach dem Verschieben an der Zielposition angezeigt. Eine weitere wichtige Art des Feedbacks sind Fehlermeldungen. Dabei sollte darauf geachtet werden, dass nicht nur der Fehler, sondern auch eine Möglichkeit zur Fehlerbehebung dargestellt wird (vgl. [Da06, S.152],[Sh02, S100]).

10 Im Falle des mki-web 3.0 Projektes wird in vielen Fällen mit der direkten Manipulation gearbeitet. Widgets werden via Drag and Drop verschoben. Dies ist in Abbildung 3 zu sehen. Fasst ein Benutzer ein Widget an, verändert sich der Cursor und wird zu einem pfeilartigen Viereck. Dadurch bekommt der Benutzer sofortiges Feedback, dass dieses Element verschoben werden kann. Verschiebt der Benutzer ein Widget und platziert dieses neu, wird dies sofort an der neuen Stelle angezeigt. Alle anderen Widgets positionieren sich automatisch hinter dem verschobenen Widget. Kann ein Widget an einer bestimmten Stelle nicht platziert werden, bewegt sich das Widget automatisch auf die Ausgangsposition zurück. Will ein Benutzer über die Verwaltungsbar der Widgets ein neues Widget zum Dashboard hinzufügen und fährt mit der Maus über das ensprechende Widget, wird ein Icon angezeigt, welches die Aktion beschreibt, wenn er auf das Widget klickt. Im Beispiel Hinzufügen wird ein kleines Plus Icon neben dem Widget angezeigt. Abbildung 5 zeigt diesen Vorgang. Abbildung 5: Widget hinzufügen; Quelle: Screenshot Dashboard Aktuell bekommt der Benutzer noch kein Feedback zu gedrückten Buttons oder Links. Diese werden beim Klick weder farblich schattiert noch eingedrückt. Auch Fehlermeldungen sind bisher nicht überall implementiert. Schlägt zum Beispiel das Hinzufügen eines Widgets zum Dashboard fehl, wird dieses nicht auf dem Dashboard angezeigt. Eine Fehlermeldung erscheint aber nicht. Eine Implementierung dieser Funktionen ist unbedingt notwendig um den Benutzer eine gute Usability im System bereitzustellen.

11 2.4 Zusammengehörige Aktionen Gehören mehrere Aktionen zu einem gemeinsamen Verfahren, muss der Benutzer darüber informiert werden (vgl. [Sh02, S.100]). Alle erforderlichen Aktionen des Verfahrens sollten übersichtlich dargestellt werden. Dazu gehören alle Schritte, die ausgeführt werden müssen sowie der aktuelle Stand des Verfahrens. Nach Beendigung dieses Verfahrens muss dem Benutzer Feedback über das erfolgreiche Abschließen der Operation gegeben werden. Dies gibt dem Benutzer ein Gefühl von Befriedigung, dass ein Verfahren abgeschlossen ist und dieser sich der nächsten Folge von Aktionen widmen kann (vgl. [Da06, S.152]). Ein Beispiel hierfür ist ein Kaufvorgang in einem Webshop. Wenn der Benutzer einen Artikel auswählt, erhält er Feedback darüber, dass dieser Artikel nun seinem Warenkorb hinzugefügt wurde und er seinen Kaufvorgang fortführen kann. Aktuell gibt es im Dashboard und in der Kalender App keine größeren Vorgänge mit vielen Aktionen. Demnach ist das Bereitstellen der einzelnen Schritte nicht notwendig, da der Benutzer alle Vorgänge mit sehr wenigen Schritten abschließen kann. Dieses Kriterium sollte aber von späteren Iterationen unbedingt beachtet werden, wenn diese Apps entwickeln, die zusammenhängende Aktionen beinhalten. 2.5 Fehler vermeiden Gute Fehlermeldungen sind unabdingbar. Noch besser ist es, Fehler ganz zu vermeiden. Hier muss ein System so eingerichtet werden, dass Benutzer keine ernsthaften Fehler machen können. Zum Beispiel sollten Menüpunkte oder Formularfelder, die im derzeitigen Kontext nicht angewendet werden können, ausgegraut oder erst gar nicht angezeigt werden. Somit wird verhindert, dass der Anwender diese Punkte erst gar nicht benutzen kann. Zudem sollten Auswahlmenüs anstatt Eingabefelder benutzt werden. Hiermit werden dem Anwender mögliche Punkte bereitgestellt und es wird verhindert, dass der Benutzer falsche Eingaben macht. Zudem werden falsche Eingabeformate durch Auswählmenüs verhindert (vgl. [Da06, S.153]). Ein Beispiel hierfür ist die Eingabe des Datums. Konkret für dieses Beispiel können auch Kalender angezeigt werden, aus dem der Benutzer das gewünschte Datum auswählt. Zudem sollten alle Eingabefelder auf die erlaubten einzugebenden Zeichen beschränkt werden. Tritt trotz Fehlervermeidung ein Fehler auf, sollte das System dem Benutzer erlauben den Fehler mit möglichst wenig Aufwand zu beheben. Passiert ein Fehler bei der Eingabe in ein Formular mit 10 Feldern, sollte lediglich das Feld, in dem der Fehler aufgetreten ist, neu ausgefüllt werden (vgl.[sh02, S.100f]). Ein Beispiel hierfür ist die Eingabe eines nicht gültigen Passworts. Es sollte erneut nur das Passwot eingegeben werden.

12 Speziell bei der Entwicklung der Kalender App muss darauf geachtet werden, Fehler zu vermeiden. Durch die vielen Formularfelder, die dazu benötigt werden, einen neuen Termin anzulegen oder zu bearbeiten, können Fehler entstehen. Auf Grund dessen sollen unbedingt die oben genannten Regeln beachtet werden um Fehler zu vermeiden. Aktuell wird das Datum und Zeit eines Termins durch Anzeigen eines Kalenderblattes realisiert. Somit werden Fehler von Seiten des Benutzers verhindert und der Benutzer kann unkompliziert ein Datum auswählen. Zusätzlich müssen durch diese Methode auch keine Angaben über das Format des Datums gemacht werden. Abbildung 6 zeigt die Erstellung eines neues Termins in der Kalender App. Dazu ist zu sagen, dass der Screenshot nicht dem endgültigen Layout des Kalenders entspricht. Abbildung 6: Kalender, Termin hinzufügen; Quelle: Screeshot Kalender Eine Implementierung dieser Funktionen ist für eine gute Usability vonnöten. Ohne diese Hilfestellungen wäre der Anwender schnell verärgert.

13 2.6 Zurücksetzten von Aktionen Generell sollten Systeme die Möglichkeit bieten, bestimmte Aktionen oder mehrere Aktionen rückgängig zu machen. Diese Funktion nimmt dem Benutzern die Angst, etwas Falsches zu machen, da Fehler oder versehentliche Aktionen wieder rückgängig gemacht werden können. Dadurch testen Anwender nicht bekannte Aktionen (vgl. [Sh02, S.101]). Durch diese Eigenschaften steigt die Anerkennung an ein Programm stark an. In Webseiten kann das Rücksetzten eine sehr nützliche Funktion sein. Gibt es Aktionen, bei denen das Rücksetzten technisch nicht möglich ist, sollte der Anwender vor dem Ausführen der Aktion darauf hingewiesen werden (vgl. [Da06, S.153]). Diese Art von Funktion ist in allen kreativen Systemen wie Bildbearbeitung oder Textverarbeitung zu finden. Dort ist eine Rücksetzfunktion unbedingt notwendig. Auch das Projektteam des mki-web 3.0 hat auf diese Funktion im Dashboard nicht verzichtet. Personalisiert ein Benutzer seine Hauptnavigation, sprich fügt er neue Apps hinzu, löscht andere Apps und verändert die Reihenfolge, kann der Anwender durch einen Abbrechen Button den ursprünglichen Stand der Navigation wieder herstellen. Abbildung 7 zeigt den Bearbeitungsmodus der Navigation mit der Möglichkeit zum Abbruch. Abbildung 7: Navigationsbearbeitungsmodus; Quelle: Screenshot Dashboard

14 Änderungen im Widgetbereich werden sofort gespeichert und können nicht rückgängig gemacht werden. Diese Funktion sollte in den Anforderungskatalog mit aufgenommen werden und nachträglich noch entwickelt werden um auch hier eine gute Usability zu garantieren. Auch in der Kalender App ist eine Rückgängig Funktion für das Löschen, Erstellen und Ändern von Terminen geplant. Dies würde den Benutzern die Angst vor versehentlichen Aktionen nehmen und das Arbeiten im Kalender wäre wesentlich entspannter. 2.7 Anwenderbestimmte Eingaben Ein System sollte dem Anwender das Gefühl geben, dieses vollständig kontrollieren und steuern zu können. Eine Aktion, die begonnen wurde, sollte in jedem Stadium die Möglichkeit bieten, vom Benutzer abgebrochen zu werden. Dabei sollten alle Funktionen und Informationen schnell gefunden werden unter gebräuchlichen Hierarchien und unter verständlichen und bekannten Begriffen zu finden sein (vgl. [Da06, S.153]). Innerhalb des mki-web 3.0 wurde auch dieses Kriterium im Dashboard und in der Kalender App berücksichtigt. Wie in Punkt 2.6 beschrieben kann die veränderte Navigation zu jeder Zeit beendet und abgebrochen werden. Da das Bearbeiten der Widgets über die direkte Manipulation funktioniert, werden alle Änderungen sofort gespeichert. Hier kann zu jeder Zeit der Bearbeitungsmodus für die Widgets beendet werden. In der Kalender App ist es zu jeder Zeit möglich, Aktionen, wie einen neuen Termin zu erstellen oder einen Termin bearbeiten, zu beenden. Beispiele hierfür sind in den Abblidungen 3, 6 und 7 zu sehen. Alle gewünschten Informationen und Funktionen sind hinter verständlichen Links oder Navigationspunkten zu finden. 2.8 Geringe Belastung des Kurzzeitgedächtnisses Das Kurzzeitgedächtnis eines Anwenders hat nur eine beschränkte Größe. Generell gilt, dass Menschen sich an sieben plus minus zwei Einheiten von Informationen erinnern können [Sh02, S.101]. Dies bedeutet, dass sich der Mensch nur eine bestimmte Anzahl von Aktionen und Informationen im Kopf behalten kann. Daher sollte die Anzahl von Aktionen und Informationen, die dem Anwender in einem System bereitgestellt werden, auf ein Minimum beschränkt werden und die Anzeigen sollten simpel gehalten werden. Somit wird das Kurzzeitgedächtnis nicht überlastet. Auch verschiedene Darstellungen und Gruppierungen von Aktionen und Informationen helfen nur bedingt (vgl. [Da06, S.155,157]). Somit lässt sich sagen, dass das Risiko, ein wichtiges Element zu übersehen, mit jeder weiteren Information oder Aktion steigt, die in dem System dargestellt beziehungsweise angeboten wird.

15 Innerhalb des mki-web 3.0 Projektes wurde großen Wert darauf gelegt, den Benutzer nicht mit Informationen zu überlasten. Das Dashboard und der Kalender wurden stets simpel gehalten, aber mit allen wichtigen Funktionen ausgestattet. Speziell durch das Personalisieren des Dashboards und der Anwendung kann sich der Benutzer nur die Funktionen und Informationen anzeigen lassen, die er auch wirklich verwenden möchte. Der Benutzer kann über die Navigation Apps ausblenden, welche er nicht benötigt und auf dem Dashboard nur die Widgets anzeigen lassen, die ihm bei der täglichen Arbeit und Organisation unterstützen. In Abbildung 4 ist die Navigation dargestellt. Startet der Benutzer den Widget Bearbeiten Modus wird die Navigation ausgeblendet. Somit werden auch hier nur die Aktionen angezeigt, die der Anwender gerade verwenden will. Abbildung 3 stellt das beschriebene Szenario dar. 2.9 Klare Auswege Ein Benutzer sollte zu jedem Zeitpunkt die Möglichkeit haben, wenn er feststellt, dass die angestoßene Aktion ihm augenblicklich nicht weiterhilft, einen Vorgang abzubrechen und zum Ausgangspunkt zurückzugehen. Ein Beispiel hierfür ist eine versehentlich angestoßene Kopieraktion. Diese sollte in jedem Fall die Möglichkeit bieten, abgebrochen zu werden (vgl. [Da06, S.155]). Das Dashboard und die Kalender App bietet zu fast jedem Zeitpunkt die Möglichkeit einen Vorgang abzubrechen oder zu beenden. Abbildung 7 zeigt die Navigation mit der Möglichkeit zum Abbruch. Abbildung 6 zeigt die Möglichkeit zum Abbruch beim Erstellen eines Termins im Kalender. Die Ausnahme ist das Bearbeiten der Widgets, da dort jede Änderung sofort gespeichert wird. Wie in Punkt 2.6 beschrieben sollte hier überlegt werden, ob eine Rückgängig Funktion für das Bearbeiten der Widgets essential wichtig ist oder darauf verzichtet werden kann Ansprechende und minimale Gestaltung Bei der Gestaltung eines Benutzerinterfaces sollten nicht nur die funktionellen Aspekte, sondern auch künstlerische Aspekte miteinbezogen werden. Dies kann sehr zur Freude der Benutzer während des Arbeitens mit dem System beitragen. Zunächst sollte jedoch das Funktionale und Gestalterische auf ein Minimum reduziert werden. Werden dann Funktionen in Benutzertest vermisst, können diese in der nächsten Iteration hinzugefügt werden. Werden keine Funktionen vermisst, können diese weggelassen werden. Hier gibt es die Voraussetzung, dass in mehreren Entwicklungszyklen gearbeitet wird, welche das Usability-Engineering und Nutzertests miteinbeziehen. Die Miteinbeziehung eines gelernten Designers ist hierfür unbedingt notwendig (vgl. [Da06, S.157f]). Ein erfolgreiches Beispiel hierfür ist die minimal gestaltete Startseite von Google.

16 Auch innerhalb des mki-web 3.0 Projekts haben wir einen großen Wert auf die ästhetische Gestaltung des Benutzerinterfaces gelegt. Dies konnte durch die Mitarbeit eines ausgebildeten Kommunikationdesigners verwirklicht werden. Vor der Entwicklung wurde in mehreren Iterationen Layouts für das Benutzerinterface erstellt und immer wieder überarbeitet bis das endgültige Layout allen Anforderungen der mw2 Iteration entsprach. Die Abbildungen in den vorherigen Kapiteln zeigen das einheitliche Layout. Abbildung 8 zeigt den Login zur Webanwendung, für den ebenfalls ein Layout entwickelt wurde. Abbildung 8: Login; Quelle:

17 Es wurde ebenfalls darauf geachtet, dass die Benutzerschnittstelle auf ein Minimum reduziert wird. mw2 arbeitet in mehreren Entwicklungszyklen und Anforderungen können stets verändert oder neue Anforderungen geschrieben werden. In der aktuellen Iteration sind keine Nutzertests geplant. Somit kann auch ein Fehlen von Funktionen nicht festgestellt werden. Dies ist aber durchaus ein wichtiger Ansatz für die nächsten Iterationen, um eine gute Usability und eine funktionale und ästhetische Benutzerschnittstelle zu garantieren. Hier sollten Studenten der Hochschule Reutlingen, die wirklichen Anwender des Systems, in das Projekt miteinbezogen werden und das System auf Funktionen und Design in den einzelnen Entwicklungszyklen testen. Somit könnten Funktion und Design nach jeder abgeschlossenen Iteration mehr an den Anwender angepasst werden Dokumentation und Hilfe Ein Hilfebereich ist für die Benutzung eines Systems unverzichtbar. Die Hilfe sollte Probleme beschreiben und Lösungen bereit stellen, mit denen der Anwender sich gerade beschäftigt. Eine Dokumentation kann zur Schulung neuer Benutzer eine große Hilfe sein um alle Funktionen und Aktionen kennen zu lernen. Dabei ist es wichtig, dass die Dokumentation vollständig und übersichtlich gestaltet ist. Außerdem muss die Dokumentation und Hilfe zu jeder Zeit auf dem aktuellen Stand sein und zur Version des Systems passen (vgl. [Da06, S.158]). Eine Dokumentation zum Dashboard und der Kalender App wird parallel zur Entwicklung im Produkthandbuch gepflegt. Dort sind alle Funktionen, die das System bietet, erklärt. Ein Hilfebereich auf der Webseite ist derzeit nicht zu finden. Dies sollte vor Abschluss der mw2 Iteration aber noch eingerichtet werden. Auch spätere Iterationen müssen den Hilfebereich pflegen um eine Konsistenz zwischen System und Hilfebereich zu gewährleisten Barrierefreiheit Barrierefreiheit ist ein weiteres wichtiges Kriterium von guter Web-Usability. Das Ziel einer barrierefreien Webseite ist es, alle Inhalte und Funktionen allen Anwendern, unabhängig davon, ob diese körperlich oder geistig eingeschränkt sind, zugänglich zu machen. Auch technische Einschränkungen werden in barrierefreien Webseiten berücksichtigt (vgl. [Po09, S.497f]). Eine Ausarbeitung zum Thema Barrierefreiheit ist im Fachartikel Barrierefreiheit in Webanwendungen und dessen Umsetzung im mki- Web 3.0 von Judith Kleck zu finden. Derzeit können die Schriftgröße und der Kontrast angepasst werden. Abbildung 8 zeigt diese Funktionen in der linken Ecke. Das Dashboard wird in diesem Screenshot mit einer 20% vergrößterten Schrift dargestellt.

18 Abbildung 9: Dashboard mit vergrößerter Schrift; Quelle: Screenshot Dashboard 3 Userinterface Abbildung 2 zeigt das endgültige Layout vor Beginn der Entwicklungsphase der mki- Web 3.0 Webseite. Das Layout wurde während der Entwicklung noch weiter überarbeitet. Auf der linken Seite ist die Hauptnavigation zu sehen. Der rechte Bereich ist der Contentbereich. Über dem Contentbereich ist die Meta-Navigation positioniert. In diesem Kapitel werden die einzelnen Bereiche und Designentscheidungen beschrieben.

19 Abbildung 10: mki-web 3.0 Grundstrukutur; Quelle: Struktur Webseiten weisen meistens eine große Anzahl von einzelnen Seiten auf. Diese müssen strukturiert werden, damit der Benutzer navigieren und sich orientieren kann. Eine Möglichkeit, eine Webseite zu strukturieren, ist diese hierarchisch zu organisieren. Diese Strukturierung wird vom Benutzer sehr schnell verstanden (vgl. [Da06, S. 258]). Innerhalb des mki-web 3.0 Projektes haben wir uns aus diesen Gründen für eine hierarchische Struktur entschieden. Abbildung 11 zeigt die Struktur des mki-web 3.0 Projektes. Durch die flache Struktur findet der Benutzer sich jederzeit zurecht und hat klare Auswege aus der jeweiligen Seite.

20 Abbildung 11: Struktur der mki-web 3.0 Webseite; Quelle: eigene Darstellung 3.2 Navigation Die Navigation dient dem Benutzer dazu, sich auf einer Webseite zurecht zu finden und durch die einzelnen Bereiche der Webseite zu navigieren. Ohne eine Navigation weiß der Benutzer nicht, wo er sich gerade auf der Webseite befindet und was diese für vielfältige Möglichkeiten bietet. Durch eine Navigation kann sich der Anwender räumlich orientieren und weiß zu jeder Zeit, wo er sich auf der Webseite befindet. Außerdem fühlt der Benutzer sich durch eine Navigation räumlich nicht verloren. Eine durchdachte Navigation schafft auf den ersten Blick Vertrauen und lässt die Hierarchie- Ebenen der Webseite leicht erkennen. Somit bekommt der Anwender ein Gefühl für die Breite und Tiefe einer Webseite. Zudem sollten die Kernthemen der Webseite bereits in der Navigation verdeutlicht werden. Eine Navigation hat also grundsätzlich zwei Aufgaben: Zum einem soll sie dem Benutzer vermitteln, wo er sich gerade befindet und ihn dabei unterstützen, das Gesuchte schnell und problemlos zu finden. Eine Navigation ist ein wichtiger Bestandteil für die Interaktion des Benutzers mit der Webseite. Generell ist es wichtig, dass in der Navigation bekannte Bezeichnungen verwendet werden (vgl. [DR12, S. 550]). Es gibt verschiedene Arten von Navigationen. Die globale und Meta-Navigation. Zudem gibt es noch eine lokale und eine Breadcrumb-Navigation (vgl. [BKP09, S.101]). Da sich das Projektteam nur mit der globalen und Meta-Navigation beschäftigt, beschränkt sich der Fachartikel auf die beiden Navigationsarten. Die globale Navigation, welche auch als Hauptnavigation bekannt ist, sollte sich auf jeder Seite in gleicher Art und Position befinden. Sie zeigt dem Benutzer an, wo er sich gerade befindet. Außerdem bietet sie die Möglichkeit zur Orientierung. Die Hauptnavigation sollte die folgenden Elemente beinhalten: Webseitenkennung, wie beispielsweise ein Logo, die Möglichkeit um auf die Startseite zu gelangen, eine Suchfunktion, die verschieden Sektionen oder Rubriken der Webseite und Utilities. Unter Utilities versteht man Links wie Login, Logout oder einen Hilfebereich (vgl. [DR12, S.550f]).