Gestaltung und Ergonomie von User Interfaces PDF

ÜBERGEORDNETE LERNZIELE Der Kurs Gestaltung und Ergonomie von User Interfaces vermittelt Ihnen zunächst einen Überblick über die wichtigsten Grundlagen und Begriffe dieses Fachgebiets. So werden Sie in die verschiedenen Typen von User Interfaces eingeführt sowie mit den Themen Ergono- mie und Gebrauchstauglichkeit vertraut gemacht. Nach der Diskussion von nutzerzentrier- ten Gestaltungsprozessen lernen Sie die Besonderheiten von Informationsarchitekturen und Gestaltungselementen von User Interfaces am Beispiel von Websites sowie das Thema Barrierefreiheit kennen. Aufbauend auf diesem Grundstock werden Sie mit den Prinzipien und Herausforderungen von mobilen Websites sowie der Gestaltung und Umsetzung von Responsive User Interfaces vertraut gemacht. 9 LEKTION 1 USER INTERFACES: EINFÜHRUNG, BEGRIFFE, GRUNDLAGEN LERNZIELE Nach der Bearbeitung dieser Lektion werden Sie wissen, … – welche unterschiedlichen Typen von User Interfaces es gibt. – welche Interaktionsmöglichkeiten mit User Interfaces bestehen. – welche Herausforderungen in der Gestaltung von User Interfaces zu beachten sind. – welche Aspekte hinsichtlich einer guten Gebrauchstauglichkeit zu bedenken sind. – welche Normen, Prinzipien und Regeln die User-Interface-Gestaltung unterstützen. 1. USER INTERFACES: EINFÜHRUNG, BEGRIFFE, GRUNDLAGEN Einführung User Interfaces (dt. Benutzerschnittstellen) begegnen uns im Alltag in vielfältigen Formen. Angefangen mit dem morgendlichen Wecker über die Bedienung des Aufzugs, der Wasch- maschine bis hin zu unseren Laptops oder Smartphones – wir interagieren täglich mit einer Vielzahl unterschiedlicher User Interfaces. Zudem unterscheiden sich die User Inter- faces in ihrer Handhabung, also darin, wie einfach, angenehm und ansprechend sie zu bedienen sind. So bevorzugen einige Nutzer beispielsweise physische Tasten, um ihren Wecker auszustellen. Andere entscheiden sich für ein Gerät mit Touchscreen oder mit Sprachbedienung. Diese Lektion definiert zunächst wichtige Begriffe im Kontext der Gestaltung von User Interfaces. Sie führt zudem in die vielfältigen Typen von User Interfa- ces ein und beschreibt typische Herausforderungen bei der Gestaltung von Benutzungs- schnittstellen. Folgende Fragen werden dabei beantwortet: Welche Arten von User Interfaces gibt es? Was steckt hinter den Begriffen Ergonomie und Gebrauchstauglichkeit? Welche Herausforderungen bestehen bei der Gestaltung von User Interfaces? 1.1 Begriffsklärung: User Interface, Ergonomie, Gebrauchstauglichkeit User Interfaces sollten möglichst ergonomisch gestaltet und von hoher Gebrauchstaug- lichkeit (engl. Usability) sein. Doch was genau steckt hinter diesen Begriffen? In diesem Abschnitt werden grundlegende Begriffe definiert und erläutert. User Interface User Interface Was genau verbirgt sich hinter dem Begriff User Interface (dt. Benutzerschnittstelle)? Dies Reale, physische und kann mithilfe eines einfachen Alltagsgegenstands, der Zahnbürste, erläutert werden (Büh- auch digitale Produkte besitzen eine Schnitt- ler/Schlaich/Sinner 2017, S. 16). Bei genauerer Betrachtung der Zahnbürste besitzt diese stelle (engl. Interface) einen speziell geformten Griff, der mitunter aus verschiedenen Materialien besteht. Diese zum Nutzer. Materialien können teilweise geriffelt oder mit Noppen besetzt sein. Auch die Borsten sind speziell angeordnet und können unterschiedliche Längen aufweisen. Es stellt sich die Frage, warum so viel Aufwand in eine einfache Zahnbürste gesteckt wird? Die Hersteller wollen das täglich genutzte Produkt optimal an die Ergonomie des Menschen, genauer gesagt an die Ergonomie der menschlichen Hand (Griff der Zahnbürste) sowie des menschlichen Gebisses (Kopf mit Borsten) anpassen. In anderen Worten: Die Schnittstel- len (engl. Interfaces) zwischen dem Menschen und dem Produkt sollen auf die Fähigkeiten und Fertigkeiten des Menschen optimal angepasst werden. 12 Auch zwischen Mensch und Computersystemen gibt es verschiedene Schnittstellen: So kann ein Smartphone beispielsweise über einen Touchscreen oder über Sprache gesteuert werden. Klassische PCs können meist über Tastatur und Maus bedient werden. Der Begriff „User Interface“ wird im deutschen Sprachgebrauch umgangssprachlich auch mit „Benutzeroberfläche“ bezeichnet. Ergonomie Als Nächstes stellt sich die Frage, was unter dem Begriff der „Ergonomie“ zu verstehen ist. Ergonomie Der aus dem altgriechischenden stammende Begriff lässt sich laut Duden (2019) aus Benutzerschnittstellen sollten bestmöglich auf „érgon“ (dt. Arbeit) und „nomía“ (dt. Sachkunde) herleiten. Unter der Ergonomie wird die die menschlichen Fähig- Wissenschaft von den Leistungsmöglichkeiten und -grenzen des Menschen verstanden. keiten und Einschränkun- Bei der ergonomischen Gestaltung geht es um die optimale Anpassung zwischen dem gen der Nutzer angepasst sein. Menschen und seinen Arbeitsbedingungen. Jedoch wird der Begriff „Arbeit“ im Bereich der ergonomischen Gestaltung von User Interfaces weitergedacht und umfasst ebenso den Bereich der Unterhaltungselektronik. Das Interface Design beschäftigt sich mit der Gestaltung der Benutzerschnittstellen. Pri- mär geht es dabei nicht um reine Ästhetik, d. h., wie „schön“ die Benutzeroberfläche aus- sieht, sondern um die Benutzerfreundlichkeit (Bühler/Schlaich/Sinner 2017, S. 16). Usability Der Begriff Usability wird im deutschen Sprachgebrauch auch mit vielen Synonymen wie Usability „Gebrauchstauglichkeit“, „Benutzerfreundlichkeit“ oder „Benutzbarkeit“ belegt. Usability Diese ist abhängig vom Nutzungskontext, den wird oft zu eng gefasst und ausschließlich als Gütekriterium für User Interfaces verstanden Fähigkeiten und Erfahrun- (Richter/Flückiger 2016, S. 10). Grundsätzlich muss Usability immer im Kontext ihrer Nut- gen der Nutzer sowie zung analysiert werden. So kann ein Hammer beispielsweise eine hohe Usability beim Ein- deren Aufgaben und Zie- len im Umgang mit einem schlagen von Nägeln in die Wand aufweisen, jedoch wird der gleiche Hammer (mit dem Produkt oder einer gleichen User Interface) beim Versuch, mit Schrauben umzugehen, eine sehr niedrige Usa- Dienstleistung. bility haben. Dieses Beispiel zeigt, dass Usability keine feste Eigenschaft eines Produktes ist (Richter/Flückiger 2016, S. 11). Vielmehr ist die Usability abhängig von der zu bewältigenden Aufgabe des Nutzers, den Fähigkeiten und Kenntnissen des Nutzers, dem Nutzungsumfeld sowie dem einzusetzen- den Werkzeug und dessen User Interface. Unter einem Werkzeug kann auch ein digitales Produkt, wie beispielsweise eine Software oder eine Website, verstanden werden. Usabi- lity beschreibt, wie gut ein Nutzer ein Werkzeug (z. B. Software, Website etc.) im spezifi- schen Nutzungskontext zur Bewältigung einer Aufgabe einsetzen kann. Diese vier prinzi- piellen Komponenten (Nutzer, Aufgabe, Werkzeug, Kontext) kennzeichnen ein Mensch- Maschine-System. Im industriellen Anwendungsbereich wird anstelle des Begriffs „User Interface“ auch oft vom Human Machine Interface (HMI abgekürzt, dt. Mensch-Maschine- Schnittstelle) gesprochen. 13 Abbildung 1: Komponenten eines Mensch-Maschine-Systems, welche die Usability beeinflussen Quelle: erstellt im Auftrag der IU, 2019 in Anlehnung an Richter/Flückiger 2016, S. 11. Eine verbreitete Definition der Usability ist in der ISO-Norm 9241-210 (ISO 2011, S. 7) ent- halten. Hier ist die Gebrauchstauglichkeit definiert als „Ausmaß, in dem ein System, ein Produkt oder eine Dienstleistung durch bestimmte Benutzer in einem bestimmten Nut- zungskontext genutzt werden kann, um festgelegte Ziele effektiv, effizient und zufrie- denstellend zu erreichen [Hervorh. durch d. Verf.]“. Während „effektiv“ eine möglichst genaue und vollständige Zielerreichung anstrebt, beschreibt „effizient“ den zur Zielerreichung eingesetzten Aufwand. Die Zufriedenheit ist eine subjektive Bewertung in Abhängigkeit der Akzeptanz und der Beeinträchtigungsfrei- heit des Nutzers (Vilimek 2007, S. 6f.). Abschließend soll obige Definition mithilfe des folgenden Beispiels näher erläutert wer- den: 14 Auf die Gestaltung von User Interfaces angewandt kann unter „Produkt“ beispielsweise eine Website mit einem Webshop für Lebensmittel verstanden werden und unter „bestimmte Benutzer“ eine berufstätige Mutter von zwei Kindern mit spezifischen Eigen- schaften hinsichtlich Alter, Demografie, Beruf sowie Erfahrungen im Umgang Internetein- käufen. „Nutzungskontext“ beinhaltet beispielsweise, ob sie von unterwegs über ihr Smartphone, von zu Hause über den Laptop oder von ihrem Arbeitsrechner in der Mittags- pause die Einkäufe tätigt. „Effektiv“ bedeutet in diesem Beispiel, dass die Mutter alle von ihr gewünschten Produkte zum gewünschten Zeitpunkt erhält. Unter „effizient“ wird hier verstanden, dass der Zeitaufwand der Kundin zum Bestellen der Ware möglichst gering ist. Digitale Produkte wie Webseiten oder Softwareprodukte weisen eine hohe Usability auf, wenn die entsprechenden Nutzer mithilfe des User Interface ihre Ziele und Aufgaben im speziellen Nutzungskontext effektiv, effizient und zufriedenstellend erreichen können. 1.2 Typen von User Interfaces Mithilfe eines User Interface können Nutzer mit digitalen Produkten und Dienstleistungen interagieren. Ein User Interface übermittelt dem Nutzer Informationen. Dieser Teil des User Interface kann als Anzeigesystem beschrieben werden. Gleichzeitig kann der Nutzer über das User Interface meist Eingaben tätigen. Dieser Teil des User Interface wird als Bediensystem definiert. Prinzipiell kann der Mensch über seine zur Verfügung stehenden Sinne Informationen auf- nehmen und mithilfe seiner motorischen und kognitiven Fähigkeiten sowie der Sprache grundsätzlich Bedienungen vornehmen. Diese verschiedenen Möglichkeiten werden als Interaktionsmodalitäten bezeichnet und beschreiben grundsätzliche Möglichkeiten, mit denen der Nutzer mit dem User Interface in Austausch treten kann. War früher die Art und Weise, auf die Nutzer mit den ersten Computersystemen interagie- ren konnten, noch sehr eingeschränkt, so gibt es heute verschiedene Typen von User Inter- faces. Eine Auswahl verbreiteter User-Interface-Typen wird nachfolgend vorgestellt und erläutert. Command Line User Interfaces Die ersten Computersysteme wurden technologieorientiert entwickelt (Saffer 2010, S. 10). Es war nicht so, dass sich die Maschine an die Fähigkeiten und Fertigkeiten des Menschen anpasst, sondern andersherum, was auch mit den damals eingeschränkten technischen Möglichkeiten zusammenhing. Die Benutzer mussten sich anpassen, um Maschinen nut- zen zu können. So musste Maschinensprache gelernt werden, um mit dem Computer interagieren zu können. Dennoch konnten die Interaktionen mit den ersten Computern für die bestimmten Zwecke von trainierten Anwendern sehr effizient durchgeführt werden. Die Interaktion wurde anfangs mittels Lochkarten durchgeführt, die als eine der ersten Schnittstellen mit Computersystemen angesehen werden können. 15 Ein User Interface, das nach wie vor auf Befehlen basiert, sind Command Line User Interfa- ces (CLIs, dt. Kommandozeilen). Abbildung 2: Beispiel eines Command Line User Interface Quelle: erstellt im Auftrag der IU, 2019/Microsoft Windows. Über die Kommandozeile kann mittels Tastatureingaben von Befehlen und Phrasen mit dem Computer interagiert werden. So kann beispielsweise die Einstellung der Zeit und des Datums, das Auffinden von Dateien oder auch das Herunterfahren des Rechners über die Kommandozeile erledigt werden. Diese Art von User Interface verlangt von den Nut- zern, die nötigen Befehle zu kennen, da sie mithilfe des Interface nicht erschlossen werden können. Dieser Typ des User Interface wird daher von erfahrenen Nutzern für häufige Auf- gaben durchgeführt, um im Vergleich zu anderen User Interfaces Zeit zu sparen. Sind die Befehle bekannt, kann folglich für erfahrene Nutzer und häufige Aufgaben eine hohe Usa- bility gegeben sein, da im Vergleich zu anderen User-Interface-Methoden die Aufgaben effizienter, d. h. mit weniger Aufwand in kürzerer Zeit erledigt werden können. 16 Graphical User Interfaces (GUI) Der von Xerox PARC (Paolo Alto Research Center) entwickelte Rechner Xerox Alto war in den 1970er-Jahren der erste PC mit einem Graphical User Interface (dt. grafische Benutzer- schnittstelle) (Saffer 2010, S. 13). Er konnte über eine Maus sowie eine Tastatur gesteuert und mittels Fenstern und Icons bedient werden. Dieses Grundkonzept ist nach wie vor in modernen Rechnern zu finden. Abbildung 3: Aktuelles Graphical User Interface mit einem WIMP- (Windows, Icons, Menus, Pointers-)Interaktionskonzept Quelle: Getty Images o. J.a. Dieses Interaktionskonzept wird auch als WIMP bezeichnet. Die Abkürzung WIMP steht für Windows (dt. Fenster), Icons, Menüstruktur (engl. Menu) und Pointer (dt. Zeigegerät, z. B. Maus). Einen Prototyp der ersten Maus als Zeigegerät präsentierte Doug Engelbart bereits 1968 auf einer Konferenz in San Francisco (Saffer 2010, S. 12f.). Er gilt als „Vater der Maus“, die noch heute zur Bedienung von GUIs eingesetzt wird. Als alternatives Zeigegerät werden Touchpads beispielsweise für Laptops eingesetzt. Die Anwendung ist sehr ähnlich zur Maus, jedoch werden die Bewegungen des Curser auf der GUI mittels Fingerbewegungen auf einer berührungsempfindlichen Fläche beschrieben. Maus und Touchpad sind beides indirekte Eingabegeräte, die kontinuierlich mit einer rela- tiven Positionierung arbeiten. 17 Um den Umgang mit Graphical User Interfaces von PCs für den Nutzer zu vereinfachen, bedient man sich seit über vierzig Jahren der Desktop-Metapher. Metaphern werden in der Interaktionsgestaltung eingesetzt, um Nutzern eine Hilfestellung dabei zu geben, abstr- akte digitale Konzepte zu verstehen. So wurde bereits im Rechner Xerox Alto eine Analogie zum klassischen Schreibtisch (engl. Desktop) gezogen, um die Bedienung für die Nutzer schneller erlernbar zu gestalten. Auf dem Schreibtisch befinden sich Ordner, die als Orga- nisationsstruktur von Dateien dienen. Ebenso befindet sich im klassischen Büro in der Nähe des Schreibtisches ein Abfalleimer, um nicht mehr benötigte Dokumente zu entsor- gen. Diese Desktop-Metapher mit Papierkorb, Ordnern und Dokumenten wird noch in moderneren PCs verwendet. Vorteile von GUIs sind im Vergleich zu CLIs eine einfache und schnellere Erlernbarkeit für die Nutzer. Es müssen auch keine Befehle auswendig gekannt werden, sondern mittels leicht verständlichen Icons (z. B. in Form eines Papierkorbs) können sich Nutzer, die das User Interface weniger häufig bedienen, dessen Bedeutung und Interaktionsmöglichkei- ten erschließen. Nachteile sind ein meist größerer Platzbedarf im Vergleich zu CLIs. Hin- sichtlich einer hohen Usability ist die nutzerfreundliche Gestaltung der GUIs entschei- dend. Diese betrifft die Informationsarchitektur, die Navigationselemente, die farbliche Kodierung sowie die ästhetische Gestaltung zur Hervorhebung der Funktionalitäten. Touch User Interfaces (TUI) Touch User Interfaces sind eine Weiterentwicklung der GUIs. Ein wichtiger Meilenstein in der Entwicklung von Touch User Interfaces war der Markteintritt des ersten iPhones von Apple im Jahr 2007. Der Vorteil von Touch User Interfaces ist ihre direkte und unmittelbare Interaktionsmöglichkeit. Auf ihnen verschmelzen Anzeige- und Bediensystem. Anstelle der Menüstrukturen werden die Informationen meist in Apps organisiert, die mittels Icons visualisiert sind und über ein direktes Fingertippen (engl. Tap) auf den Touchscreen geöff- net werden können. 18 Abbildung 4: Smartphone mit Touch User Interface Quelle: erstellt im Auftrag der IU, 2019 in Anlehnung an Getty Images o. J.b & d. Zur Interaktion mit Touch User Interfaces haben sich verschiedene Touch-Gesten als Stan- dards etabliert. So kann beispielsweise über ein horizontales Wischen (engl. Flick) auf dem Home Screen zu weiteren Apps gelangt werden. Ebenso hat sich in Applikationen die Pinch-Geste (das Zusammenziehen bzw. Spreizen) von zwei Fingern auf dem Touchscreen als Zoom-In- bzw. Zoom-Out-Funktionalität etabliert. Abbildung 5: Interaktionsgesten auf Touch User Interfaces: Wischen Quelle: erstellt im Auftrag der IU, 2019. 19 Bei der Gestaltung von Touch User Interfaces sind die entsprechenden online verfügbaren Human Interface Guidelines zu berücksichtigen, um die Bedienung für den Nutzer einfa- cher und übertragbarer zu gestalten (vgl. z. B. Apple 2019). So ist beispielsweise das Kli- cken auf Hyperlinks für Nutzer mittels direkter Toucheingabe schwieriger als das Scrollen auf Websites. Auch sind ergonomische Aspekte zu beachten, sodass beispielsweise die Größe der Interaktionselemente auf die Fingergröße der Nutzergruppe angepasst ist. Im Vergleich zur indirekten Bedienung über Maus oder Touchpad sind Touchscreens direkte, diskrete Eingabegeräte mit einer absoluten Positionierung. Der Vorteil von Touch User Interfaces ist ihre direkte und unmittelbare Bedienung. Gerade für unerfahrene Nutzer ist die Bedienung einfach und intuitiv erlernbar. Ein Nachteil von Touch User Interfaces ist, dass bei direkter Touch-Eingabe der Bildschirm für die Nutzer ergonomisch angenehm und einfach zu erreichen sein muss. Hier sind nutzungskontext- spezifische Gegebenheiten zu berücksichtigen: So ist es beispielsweise nicht möglich, einen vier Meter entfernten Fernseher über einen Touchscreen zu bedienen. Voice User Interfaces (VUI) Die Anzahl der auf dem Markt verfügbaren Geräte, die über Sprache steuerbar sind, nimmt stark zu. Neben neuen Smart-Home-Produkten von Google oder Apple bieten auch Smart- phones oder Laptops eine steigende Anzahl von Funktionalitäten, die mittels Sprache gesteuert werden können. Der Vorteil der Voice User Interfaces (dt. sprachbasierte Benut- zerschnittstelle) liegt darin, dass die Interaktion weder eine Blickzuwendung noch eine motorische Eingabetätigkeit benötigt. So kann beispielsweise während der Autofahrt der Fahrer die Navigationseinstellung über Sprache vornehmen, ohne den Blick von der Straße oder die Hand vom Lenkrad zu nehmen, was das Unfallrisiko mindert und die Sicherheit im Straßenverkehr erhöht. Während die ersten Voice User Interfaces nur auf spezielle Kommandos hörten, nimmt die Bandbreite der Interaktionsmöglichkeiten mit technologischem Fortschritt stetig zu. Voice User Interfaces können auch von unerfahre- nen Nutzern einfach und zielgerichtet bedient werden, wie beispielsweise durch Senioren oder Kinder. Ein Nachteil von Voice User Interfaces ist der Bedarf an einer hohen Rechen- leistung. Ebenso ist diese Art von Interface nicht in allen Nutzungskontexten verwendbar, beispielsweise in Umgebungen mit einer sehr hohen Geräuschkulisse oder wenn die Inter- aktion von umstehenden Menschen nicht mitgehört werden soll. Die Sprache ist grundsätzlich ein fundamentaler Bestandteil menschlicher Kommunika- tion. Gleichzeitig ist die Bedeutung der gesprochenen Botschaft meist kontextspezifisch. Herausforderungen in der Gestaltung von VUIs liegen, neben dem Design des akustischen Ausdrucks, in der Wortwahl sowie in der Stimmgestaltung. Diese transportiert, teilweise auch unterbewusst, Emotionen sowie Charakter und Persönlichkeit. Zudem liegt im Ver- gleich zu GUIs eine große Herausforderung bei VUIs in der Beantwortung der Fragestellung des Nutzers hinsichtlich (Mortensen 2019): Welche Interaktionsmöglichkeiten habe ich? Wo bin ich? 20 Zur Beantwortung dieser Fragen kann bei GUIs auf visuelle Hilfestellungen zurückgegriffen werden. Diese werden unter dem Fachbegriff „visuelle Affordances“ geführt, da diese einen Aufforderungscharakter besitzen. So steht beispielsweise auf traditionellen Websi- tes blau eingefärbter, unterstrichener Text für anklickbare Links, die den Nutzer zu weite- ren Webseiten führen. Nach Norman (2013, S. 18) repräsentieren Affordances Möglichkei- ten, wie ein Nutzer mit etwas interagieren kann. Für die Gestaltung von VUIs ist die genaue Kenntnis der Nutzererwartungen hinsichtlich der Sprachkommunikation nötig, um entsprechende Affordances zu erzeugen und Dialoge zu gestalten, die den Nutzern bei der Beantwortung obiger Fragen helfen und Orientierung geben. Während bei GUIs auf visuelle Hilfestellungen zurückgegriffen werden kann, ist dies bei VUIs nur mittels Dialogführung möglich. 1.3 Herausforderungen bei der Gestaltung von User Interfaces Mithilfe von UIs können Nutzer mit digitalen Produkten und Dienstleistungen interagieren. Sie erhalten Informationen über das Anzeigesystem des UIs und können Eingaben über das entsprechende Bediensystem tätigen. Um die Herausforderungen in der Gestaltung von UIs genauer zu betrachten, wird auf das Modell von Don Norman (2013, S. 38ff.) zurückgegriffen. Er beschreibt darin zielgerichtete Aktionen als „Seven Stages of Action“. Abbildung 6: Interaktionsschritte zur Ausführung zielgerichteter Handlungen Quelle: erstellt im Auftrag der IU, 2019. 21 Der Benutzer entscheidet auf Basis seiner jeweiligen Zielvorstellung über die beabsich- tigte Handlung. Weiterhin plant er die Folge von Aktionen und führt diese über das UI aus. So kann er auch auf das dahinterliegende System zugreifen und die Reaktionen des Sys- tems über das UI beobachten. Anschließend interpretiert er diese und bewertet das Ergeb- nis. Das Modell ist als Kreislauf formuliert. Der Kreis schließt sich, indem der Nutzer die Ergebnisse mit seinem ursprünglichen Ziel vergleicht. Daraufhin können weitere Hand- lungsschritte geplant oder auch die Zieldefinition modifiziert werden. Die Herausforderungen in der Gestaltung der Interaktion werden von Norman mit „Gulf of Execution“ sowie „Gulf of Evaluation“ bezeichnet. So können Probleme aufseiten des Benutzers in der Übersetzung der Ziele in entsprechende Handlungsschritte auftreten, die der Nutzer mithilfe des UIs ausführen kann. Dies wird von Norman als „Gulf of Execution“ bezeichnet. Zudem können Nutzer Probleme in der Wahrnehmung und Interpretation des System-Feedbacks haben, welches über das UI kommuniziert wird. Dies wird als „Gulf of Evaluation“ bezeichnet“. Die Rolle des Designers ist es, diese Herausforderungen mit einem nutzerzentrierten, funk- tionalen und ästhetischen Design des UIs zu überbrücken. 1.4 Normen und Richtlinien Für die Gestaltung von User Interfaces existieren zahlreiche Normen, Prinzipien und Richt- linien. So gibt es allgemeingültige sowie für den jeweiligen Nutzungskontext spezifische Normen. Zudem kann zwischen einer sehr abstrakten, allgemeingültigen Formulierung sowie einer sehr praktischen, konkreten Formulierung unterschieden werden. Eine Anwendung dieser Klassifikation für die Gestaltung von User Interfaces im Automobilbe- reich zeigt untenstehende Grafik. 22 Abbildung 7: Klassifikation von Normen und Richtlinien für User Interfaces im Automobilkontext Quelle: erstellt im Auftrag der IU, 2019. Für die Gestaltung von Websites und -anwendungen ist eine der wichtigsten Normen die DIN EN ISO 9241. Sie trägt den deutschen Titel „Ergonomie der Mensch-System-Interak- tion“. Die Normreihe ISO 9241 besteht aus 34 Teilen, darunter beispielsweise die Anforde- rungen an visuelle Anzeigen (Teil 3), Benutzerführung (Teil 13), Informationsdarstellung (Teil 12), dem Prozess zur Gestaltung gebrauchstauglicher interaktiver Systeme (Teil 210) oder etwa der Sprachdialogsysteme (Teil 154). Herauszugreifen ist dabei der Teil 110 „Grundsätze der Dialoggestaltung“ sowie der Teil 151 „Leitlinien zur Gestaltung von Benutzungsschnittstellen für das World Wide Web“. Letzterer widmet sich dem Problem, dass Web User Interfaces vor besonderen Herausforderungen hinsichtlich der Usability stehen. Nach DIN EN ISO 9241 Teil 210 ist die Usability definiert als „Ausmaß, in dem ein System, ein Produkt oder eine Dienstleistung durch bestimmte Benutzer in einem bestimmten Nutzungskontext genutzt werden kann, um festgelegte Ziele effektiv, effizient und zufrie- denstellend zu erreichen“ (ISO 2011, S. 7). Im Kontext von Web User Interfaces liegt die Herauforderung in der großen Heterogenität der Nutzer hinsichtlich ihres Wissens, ihrer Fertigkeiten oder ihrer Sprache. So kann sich beispielsweise ein Web Interface für Fachleute sehr gut eignen, während es für durch- schnittliche Benutzer weniger optimal ist. Zudem variieren die Ziele der Website-Besucher 23 stark. Für dieses Aufgabenfeld kann sich beispielsweise eine Website, die für den elektron- ischen Handel mit Produkten optimiert ist, hervorragend eignen. Dadurch können Nutzer mit einem konkreten Suchziel schnell das gewünschte Produkt finden. Für eher explora- tive Nutzer, die vor allem auf Informationssuche sind, mag dagegen die Website weniger gut geeignet sein. Zudem haben auch die unterschiedlichen Web-Browser mitunter einen starken Einfluss auf die Darstellung der Website. So bietet die Norm DIN EN ISO 9241 Teil 151 verschiedene Richtlinien und Empfehlungen hinsichtlich spezifischer Herausforderun- gen von Web User Interfaces. Jedoch sind diese eher allgemein und abstrakt gehalten. Sie dienen daher eher als Anhaltspunkte und nicht als konkrete Checkliste. Der Teil 110 beschreibt dagegen allgemeine Prinzipien und Leitlinien zur Dialoggestaltung. Diese betreffen die folgenden Aspekte, die nach Jacobsen (2017, S. 249) erläutert werden: Aufgabenangemessenheit: Die Anwendung soll das leisten, was der Nutzer zur Erfül- lung seiner Aufgabe erwartet. Weiterhin soll der Nutzer unterstützt werden, schnell und unkompliziert das Ziel zu erreichen. Selbstbeschreibungsfähigkeit: Das User Interface sollte dem Nutzer deutlich machen, wie er sein Ziel erreichen kann. Eindeutige Begrifflichkeiten sowie eine klare Navigation sind hierfür Voraussetzungen. Steuerbarkeit: Die Anwendung soll durch den Nutzer gesteuert werden und nicht umgekehrt. Beispielsweise sollten Animationen unterbrechbar sein, in Formularen sollte auch zurücknavigiert werden können oder die Lautstärke von Sound sollte ein- stellbar sein. Erwartungskonformität: Die Anwendung sollte den Nutzer nicht negativ überraschen, sondern nach der Vorstellung des mentalen Modells des Nutzers handeln. Hierfür ist die Berücksichtigung verbreiteter Konventionen sowie konsistentes Design hilfreich. Fehlertoleranz: Das System sollte mit falschen Nutzereingaben umgehen können und diese bestenfalls durch seine Gestaltung vorab vermeiden. Bei Fehleingaben sollte der Nutzer eine eindeutige, hilfreiche Rückmeldung bekommen. Individualisierbarkeit: Die Anwendung sollte es dem Nutzer ermöglichen, Einstellun- gen nach persönlichen Vorlieben zu tätigen. So sollte beispielsweise die Schriftgröße veränderbar sein, um für Nutzer mit eingeschränktem Sehvermögen eine ebenso gute Lesbarkeit zu gewährleisten. Lernförderlichkeit: Anwedungen sollten so gestaltet sein, dass sie Nutzer dabei unter- stützen, den Umgang mit ihnen schrittweise zu erlernen. Abschließend ist anzumerken, dass im Bereich der Interaktionsdesigner eine fortwäh- rende Diskussion darüber herrscht, wie eng sich an User-Interface-Standards gehalten werden muss bzw. wann diese gezielt und absichtlich gebrochen werden sollten. Während Usability-Gurus wie Jakob Nielsen auf die Einhaltung dieser Standards pochen, argumen- tieren andere hinsichtlich gestalterischer Freiheiten und einem Abheben von der Masse. Nach Saffer (2010, S. 134) sollten User-Interface-Standards immer angewandt werden, es sei denn, es gibt eine tatsächlich deutlich überlegene Alternativlösung. 24 Heuristiken und Prinzipien Weiterhin gibt es zahlreiche Usability-Heuristiken und Prinzipien für die User-Interface- Gestaltung. Bereits 1994 postulierte Jakob Nielsen zehn Usability-Heuristiken für das User Interface Design. Diese allgemeinen Prinzipien sollen während des Designprozesses beachtet werden und in Form einer checklistenbasierten (heuristischen) Untersuchung zur Evaluation des User Interface eingesetzt werden können. Die Prinzipien (Nielsen 1994) werden übersetzt und erläutert: Sichtbarkeit des Systemstatus: Der Nutzer sollte fortwährend rechtzeitig und ange- messen über den Systemstatus informiert werden. Übereinstimmung zwischen System und realer Welt: Die Anwendung sollte die Spra- che des Nutzers sprechen und ihm vertraute Wörter, Begriffe und Konzepte verwenden. Nutzerkontrolle und Freiheit: Sollte der Nutzer unbeabsichtigte Aktionen durchfüh- ren, sollten Auswege wie ein „Rückgängig“ für den Nutzer stets möglich und sichtbar sein. Konsistenz und Standards: Nutzer sollten nicht lange überlegen müssen, ob unter- schiedliche Begrifflichkeiten oder Aktionen die gleiche Bedeutung haben. Verbreitete Konventionen sollten eingehalten werden. Fehlervermeidung: Ein sorgfältiges Design sollte dazu führen, dass naheliegende Feh- ler des Nutzers erst gar nicht auftreten können. Das System sollte fehleranfällige Situati- onen vermeiden und vor unbeabsichtigten Aktionen des Nutzers, wie beispielsweise einem Löschvorgang, warnen. Wiedererkennung statt Auswendiglernen: Die nötige Gedächtnisleistung ist durch sichtbare Objekte und visuelle Hinweise auf Aktionen und Optionen möglichst gering zu halten. Flexibilität und Effizienz: Das User Interface soll möglichst für eine breite Zielgruppe gestaltet sein. Häufige Nutzer sollen für einen effizienten Umgang beispielsweise auf Abkürzungen, z. B. über Tastaturbefehle, zurückgreifen können. Ästhetisches und minimalistisches Design: Es gilt das Prinzip der Einfachheit und des Fokusses. So sollten beispielsweise Dialogfenster keine überflüssigen Informationen enthalten, da diese die Sichtbarkeit von relevanten Informationen mindern. Hilfestellung beim Erkennen, Bewerten und Beheben von Fehlern: Das Systemfeed- back wird in klarer, für den Nutzer verständlicher Sprache ausgegeben, möglichst mit einer exakten Problembeschreibung und Lösungsvorschlägen. Hilfe und Dokumentation: Sollte ein Nutzer trotz einer intuitiven User-Interface-Gestal- tung Hilfe benötigen, sollte diese für ihn einfach und schnell zugänglich sein, beispiels- weise mittels Tool Tips oder optionalen Beschreibungen in Formularfeldern. Obwohl diese Prinzipien bereits vor rund 25 Jahren formuliert wurden, haben sie noch heute ihre Gültigkeit. Zu erkennen sind auch Parallelitäten beispielsweise zur Norm 9241-110 Leitlinien der Dialoggestaltung. Im Gegensatz zu den abstrakten und langfristig formulierten Prinzipien und Normen exis- tieren konkrete User Interface Guidelines. Diese sind meist betriebssystemspezifische Gestaltungsrichtlinien, die verglichen mit oben genannten eine kürzere Gültigkeitsdauer haben. Die aktuellen UI Guidelines, wie beispielsweise für die UI-Gestaltung mobiler Webanwendungen von Apple, sind online frei abrufbar. 25 ZUSAMMENFASSUNG User Interfaces bilden die Schnittstelle zwischen Computersystemen und ihren menschlichen Nutzern. Um mit digitalen Produkten und Dienstleistungen interagieren zu können, erhalten Nutzer über das User Interface Informationen und können darüber Eingaben tätigen. Die Usability bezieht sich nicht nur auf das User Interface, sondern auf das gesamte Produkt inklusive des User Interface. Weiterhin ist die Usa- bility abhängig vom Nutzungskontext, den Nutzereigenschaften und der durch den Nutzer beabsichtigen Aufgabenerfüllung. Grundsätzlich gibt es verschiedene Typen von User Interfaces, die sich jeweils für unterschiedliche Nutzergruppen, Zielsetzungen und Nut- zungskontexte eignen. Für die unterschiedlichen Typen von User Interfa- ces gibt es spezifische Herausforderungen in der Gestaltung. Während Command Line Interfaces (CLI) für erfahrene Nutzer spezieller Nutzergruppen bei sich häufig wiederholenden Aktivitäten eine hohe Usability bieten, sind sie für Novizen schwer zu erlernen und fehleranfäl- lig in der Benutzung. Graphical User Interfaces (GUI) verzeichnen eine weite Verbreitung. Sie bieten visuelle Affordances und basieren häufig auf der Desktop-Meta- pher, um die Usability für weniger regelmäßige und neue Nutzer zu erhö- hen. Touch User Interfaces sind eine Abwandlung von GUIs, die über Touch-Gesten eine direkte, diskrete und absolute Eingabemöglichkeit bieten. Die Herausforderung in der Gestaltung von User Interfaces liegt in der Überbrückung des „Gulf of Execution“ sowie des „Gulf of Evaluation“ durch eine nutzerzentriete, funktionale und ästhetische Interaktionsge- staltung. Weiterhin exisitieren für die Gestaltung von User Interfaces zahlreiche Normen, Prinzipien und Richtlinien zur Erhöung der Usability. Diese las- sen sich hinsichtlich allgemeiner und nutzungskontextspezifischer Aus- richtung sowie einer abstrakten und konkreten Formulierung clustern. 26 LEKTION 2 NUTZERZENTRIERTER GESTALTUNGSPROZESS LERNZIELE Nach der Bearbeitung dieser Lektion werden Sie wissen, … – welche Vorteile durch einen nutzerzentrierten Prozess entstehen. – welche Prozessschritte ein nutzerzentrierter Gestaltungsprozess enthält. – welche Herausforderungen in den einzelnen Schritten zu beachten sind. – wie sich nutzerzentrierter Gestaltungsprozess und Double-Diamond-Design-Modell ergänzen. 2. NUTZERZENTRIERTER GESTALTUNGSPROZESS Einführung Im Jahr 2012 wurde von dem US-amerikanischen Unternehmen Google (heute Alphabet Inc.) eine Datenbrille (engl. Smart Glasses) vorgestellt. Dieser auf einem Brillengestell getragene Miniaturcomputer sollte unter dem Markennamen Google Glass für die Kunden- gruppe von Privatanwendern im Bereich der Unterhaltungselektronik (engl. Consumer Electronics) auf den Markt gebracht werden. Das User Interface von Google Glass besteht aus einem optischen Display im peripheren Sichtfeld des Nutzers. Diese Datenbrille sollte vorrangig mittels Spracheingabe sowie über ein am Brillengestell angebrachtes Touchpad bedient werden. 28 Abbildung 8: Beispiel einer Datenbrille: Google Glass Quelle: Flickr 2013 (unten links); Lizenz; erstellt im Auftrag der IU, 2019 in Anlehnung an Wikipedia 2017 (oben); Getty Images o. J.c (unten rechts). Neben verschiedenen Sensoren, die beispielsweise die Kopfbewegung und Beschleuni- gung des Nutzers erfassen, befindet sich auf dem Brillengestell eine nach vorne gerichtete Kamera. Weiterhin können Daten unmittelbar an das Internet gesendet sowie aus diesem bezogen werden. Während die Datenbrille aus technologischer Sicht einen Meilenstein in der Klasse der Wearables (dt. tragbare Datenverarbeitung) darstellen soll, werden vor Wearables Marktstart hinsichtlich Datenschutz und Privatsphäre viele Fragen geäußert. So können Unter Wearable Compu- tern oder kurz Wearables mittels der auf dem Brillengestell angebrachten Kamera unauffällig Menschen in der werden Computersys- Umgebung des Nutzers aufgezeichnet werden. Weiterhin sind die durch die Datenbrille teme verstanden, die adressierten Nutzerbedürfnisse im Bereich der Unterhaltungselektronik unklar. Welchen während der Anwendung am Körper des Nutzers Mehrwert schafft die Datenbrille für den Nutzer? Wie reagieren Passanten im Umfeld des getragen werden (z. B. Nutzers der Datenbrille, wenn dieser ihnen in öffentlichen Räumen mit der Datenbrille Smartwatch, Datenbrille). begegnet? All diese Fragen zeigen, dass dieses innovative Produkt vorrangig technologie- getrieben entwickelt wurde. Die für 2013 angekündigte Markteinführung der Google- 29 Glass-Datenbrille (Mack 2013) als Consumer Electronics Product wurde nach einer nur in den USA erhältlichen Beta-Version vorerst gestoppt. Derzeit wird an einer Enterprise Edi- tion gearbeitet, um das Produkt für den industriellen Einsatz beispielsweise im Bereich der Logistik oder Produktion zu optimieren. Dieses exemplarisch herausgegriffene Beispiel zeigt die Wichtigkeit eines nutzerzentrier- ten Gestaltungsprozesses: Um Produkte erfolgreich auf dem Markt zu platzieren, ist eine genaue Kenntnis der Anforderungen und Bedürfnisse der Nutzer im jeweiligen Nutzungs- kontext von großer Bedeutung. Der nutzerzentrierte Gestaltungsprozess beschreibt hier- für ein iteratives Vorgehen, um innovative Produkte und Dienstleistungen nutzerzentriert zu entwickeln, kontinuierlich während des Gestaltungsprozesses zu evaluieren und zu optimieren. 2.1 Nutzerzentrierter Gestaltungsprozess Der nutzerzentrierte Gestaltungsprozess (engl. User Centered Design, abgekürzt UCD) ist durch ein iteratives und kooperatives Vorgehen gekennzeichnet. Iteration bezeichnet hier- bei das Wiederholen von einzelnen Schritten, bis das gewünschte Ergebnis erreicht wurde. Die internationale Norm DIN EN ISO 9241:210 beschreibt dabei vier zentrale Aktivitäten, die nach der Planung des menschzentrierten Gestaltungsprozesses iterativ anzuwenden sind, bis die entwickelten Gestaltungslösungen den Nutzerbedürfnissen entsprechen. Abbildung 9: Der nutzerzentrierte Gestaltungsprozess Quelle: erstellt im Auftrag der IU, 2019 in Anlehnung an DIN-Normenausschuss Ergonomie (NAErg) 2011. 30 Verstehen und Beschreiben des Nutzungskontextes Unter dem Nutzungskontext wird das Umfeld verstanden, in dem das zukünftige Produkt genutzt werden soll. Hierunter fallen Benutzermerkmale, Arbeitsaufgaben sowie die orga- nisatorische, technische und physische Umgebung. Spezifizieren der Nutzungsanforderungen Die Nutzungsanforderungen stellen den Kern der nutzerzentrierten Gestaltung dar. Hier sollte beschrieben sein, welche durch den Nutzungskontext auferlegten Einschränkungen zu berücksichtigen sind. So ist beispielsweise bei einer mobilen Anwendung für Lkw-Fah- rer zur Unterstützung der Abfahrtskontrolle ihres Lkw zu berücksichtigen, dass diese bei allen Witterungsbedingungen im Freien mit Handschuhen durchgeführt werden muss. Weiterhin soll festgehalten werden, was die Benutzer mit dem System erreichen wollen. Im obigen Beispiel wollen Lkw-Fahrer unterstützt werden, um die Abfahrtskontrolle fehler- frei durchführen sowie einfach und schnell dokumentieren zu können. Neben den Anforderungen der Benutzer müssen auch Anforderungen weiterer Stakehol- der des Systems spezifiziert werden. Für das obige System sind dies beispielsweise die Anforderungen von Spediteuren, dass das System möglichst kostengünstig sein sollte sowie die Daten nahtlos in bestehende IT-Systeme integriert werden sollten. Weiterhin sollten bei den Anforderungen Erkenntnisse zur Ergonomie, zu spezifischen Nor- men und Richtlinien sowie zur Gebrauchstauglichkeit berücksichtigt werden. Entwerfen der Gestaltungslösungen Die nutzerzentrierte Gestaltung zielt darauf ab, ein möglichst gutes Benutzererlebnis (engl. User Experience) zu erzeugen. Dabei haben die Gestaltungslösungen einen ent- scheidenden Einfluss auf die vom Nutzer wahrgenommene User Experience. Das Entwerfen von Gestaltlösungen umfasst dabei das Gestalten der Benutzeraufgaben, die Gestaltung des User Interface sowie der Interaktion zwischen System und Nutzer. Diese Konzepte werden dabei beispielsweise mittels Szenarien und Prototypen konkretisiert, um vor der Fertigstellung testen und optimieren zu können. Testen und Bewerten der Gestaltung Die Aktivität des Testens und Bewertens der entwickelten Gestaltungslösung kann prinzi- piell durch Nutzer und Experten erfolgen. Durch Evaluationen aus Benutzerperspektive können einerseits neue Informationen über die Erfordernisse der Nutzer gesammelt wer- den. Zudem können aus der Benutzerperspektive Rückmeldungen über Stärken und Schwächen der Gestaltunglösung gegeben werden, um diese im nächsten Schritt zu opti- mieren. Zudem kann beurteilt werden, ob die eingangs festgelegten Nutzungsanforderun- gen erreicht wurden. Weiterhin können Daten gesammelt werden, um mehrere Gestal- tungsalternativen miteinander zu vergleichen. 31 Inspektionsbasierte Evaluationen werden dagegen ohne Benutzer, sondern durch Exper- ten durchgeführt. Sie sollten nur ergänzend zu Nutzertests durchgeführt werden, um bei- spielsweise schnell und kostengünstig Hauptprobleme vor einem Nutzertest zu identifizie- ren und zu beheben. Zur Erfüllung der zentralen Aktivitäten im nutzerzentrierten Gestaltungsprozess sind fach- übergreifende Kenntnisse eines interdisziplinären Teams nötig. Beispielsweise können Kompetenzbereiche aus Ergonomie, Gebrauchstauglichkeit, User Research, User Interface Design, Interaction Design, Informationsarchitektur sowie Fachwissen der Anwendungs- domäne nötig sein. 2.2 Kooperatives, iteratives Vorgehen Vor einiger Zeit wurden User Interfaces als „Nebenaspekt“ des Softwaresystems vorrangig von Informatikern und Ingenieuren entworfen, die mit der Entwicklung und Implementie- rung des zugrunde liegenden Systems betraut wurden. Nach Butz/Krüger (2012, S. 103) führte dies mitunter zu weniger benutzerfreundlichen Systemen. So hatte beispielsweise SAP, ein Weltmarktführer für betriebliche Anwendungssoftware, das erste Usability-Labor erst rund 20 Jahre nach der Gründung des Unternehmens eröffnet. Die Usability wurde früher erst am fertigen Softwareprodukt getestet, wenn das User Interface bereits vollstän- dig implementiert war. So waren nachträgliche, konzeptionelle Änderungen am bereits implementierten User Interface äußerst kostenspielig, weshalb die Qualität des User Inter- face oft nachrangig behandelt wurde (ebd.). Modernere Entwicklungsansätze, wie der nutzerzentrierte Gestaltungsprozess nach ISO 9241:210 integrieren die Usability und User Experience als wichtiges Element in den Design- und Entwicklungsprozess. Dies ist vor allem für die Entwicklung von Produkten mit einer breiten Zielgruppe äußerst relevant. Um das kooperative und iterative Vorgehen besser zu verstehen, wird zunächst eine simplifizierte Definition von Design nach Dix et al. betrachtet. Design bedeutet folglich: Ziele unter Berücksichtigung von Einschränkungen zu erreichen (engl. „achieving goals within constraints“, Dix et al. 2003, S. 193). Diese stark vereinfachte Definition von Design hilft an dieser Stelle, sich auf zwei zentrale Aspekte zu fokussieren. Was verstehen wir hierbei unter Zielen? Diese beschreiben, … … welcher Zweck mit dem Design erreicht werden soll. … an wen sich das Produkt oder die Dienstleistung richtet. … welche Bedürfnisse der Nutzer erfüllt werden sollen. … in welchem Kontext das Produkt eingesetzt werden soll. 32 Gleichzeit ist Design auch immer Einschränkungen unterworfen. Je nach Nutzungskon- text gibt es mitunter organisatorische, technische oder soziale Beschränkungen für Designlösungen, weiterhin müssen spezifische Normen und Gestaltungsrichtlinien im Design berücksichtigt werden. All dies kann mögliche Alternativen für das Design ein- schränken. Der Designer muss daher immer Kompromisse eingehen und entscheiden, welche Beschränkungen priorisiert werden, welche abgeschwächt werden können und welche sogar entfallen können, um eine akzeptable Designlösung zu erzielen. Es ist daher entscheidend, im Designprozess die genauen Bedürfnisse und Ziele der Benutzer zu ken- nen. Der nutzerzentriete Designprozess ist iterativ angelegt, weshalb mit jeder Iteration neues Wissen über die Nutzer generiert werden kann und so mitunter ursprüngliche Annahmen des Designers angepasst werden können. Um die Priorisierung der Einschränkung zur Generierung einer akzeptablen Designlösung durchführen zu können, ist eine genaue Kenntnis über die Ziele, Bedürfnisse und Anforde- rungen der Nutzer notwendig. Hierfür ist es nötig, die späteren Nutzer des zu entwickeln- den Systems umfassend in einen kooperativen Designprozess zu integrieren, und zwar bei jeder zentralen Aktivität. Was die Anforderungen und Zielgruppen der späteren Nutzer sind, wird nachfolgend beschrieben. 2.3 Anforderungen und Zielgruppen Die dem nutzerzentrierten Designprozess zugrunde liegende Kernidee besagt, dass die Benutzer zukünftiger Produkte und Dienstleistungen ihre Bedürfnisse, Ziele und Präferen- zen am besten kennen (Saffer 2010, S. 33). Dieses Wissen ist jedoch nicht immer explizit vom Nutzer adressierbar, sondern teilweise auch implizit und unbewusst. Es kann mitun- ter nicht direkt durch die Nutzer formuliert werden. Hinsichtlich dieser Herausforderung hatte Henry Ford, der 1903 den Automobilhersteller Ford Motor Company gründete, gesagt: „Wenn ich die Menschen gefragt hätte, was sie wollen, hätten sie gesagt: ‚schnell- ere Pferde.‘“ Folglich ist es die Aufgabe des Designers, das zugrunde liegende Bedürfnis der Nutzer zu identifizieren. Im oben genannten Beispiel wäre dies eine schnellere Mobilität. Um die richtigen Bedürfnisse zu finden, muss zunächst geklärt werden, wer die Benutzer genau sind, die das zukünftige Produkt und somit dessen User Interface benutzen werden. Um die Definition von Nutzergruppen zu erläutern, dient als Produktbeispiel eine intelli- gente Zahnbürste, die Kinder beim richtigen und regelmäßigen Zähneputzen unterstützen soll. Dieses Beispiel ist nach Butz/Krüger (2012, S. 109f.) beschrieben. Ganz klar gehören somit die Kinder zur Benutzergruppe der intelligenten Zahnbürste. Neben ihnen werden in der Regel die Eltern des Kindes das Produkt kaufen und beispielsweise auch die Auswer- tungen der intelligenten Zahnbürste erhalten. Folglich sind die Kinder zwar die primären Nutzer, aber nicht die alleinigen Benutzer des Produktes. Die Eltern sind sekundäre Nut- zer: Sie sind von der Einführung des Produktes betroffen, kaufen das Produkt, aber sie werden es nicht direkt und unmittelbar zum Zähneputzen nutzen. In diesem Produktbei- spiel können noch weitere, sogenannte indirekte Nutzer identifiziert werden. Zahnärzte 33 können als indirekte Nutzer des Produktes beispielsweise die Auswertungen der intelli- genten Zahnbürste über das Zähneputzverhalten des Kindes für ihre Diagnose und Behandlungen nutzen. Die Gruppe aller Nutzer kann folglich größer und unübersichtlicher werden, als ursprüng- lich angenommen. Daher ist es wichtig, zu Beginn des nutzerzentrierten Designprozesses die unterschiedlichen Nutzergruppen umfänglich zu identifizieren und im nächsten Schritt eindeutig zu priorisieren. Im Mittelpunkt stehen ganz klar die primären Nutzer des Produk- tes. Analog zu einem Zwiebelschalen-Modell können die primären Nutzer im inneren Kreis, die sekundären und indirekten Nutzer in den Ringen zwei und drei angeordnet wer- den. Nachdem alle Nutzergruppen identifiziert sind, kann entschieden werden, wann die jeweilige Nutzergruppe in den Designprozess integriert wird. Es werden üblicherweise zunächst die primären, dann die sekundären und anschließend die indirekten Nutzer berücksichtigt (Butz/Krüger 2012, S. 110). 2.4 Prototyping und Evaluationen Prototyping ist ein zentrale Tätigkeit in der Aktivität „Erarbeiten von Gestaltungslösungen zur Erfüllung der Nutzungsanforderungen“ innerhalb des nutzerzentrierten Designprozes- ses. Die Zielsetzung des Prototypings ist abhängig vom Reifegrad des Designs. So kann Prototyping dazu dienen, UIs und Produktideen zu explorieren sowie im Team und mit Stakeholdern zu kommunizieren. Weiterhin können Anforderungen evaluiert, UI-Konzepte erarbeitet sowie UIs optimiert werden (Richter/Flückiger 2016, S. 84). Durch frühes Proto- typing lässt sich vermeiden, dass die Nutzeranforderungen falsch verstanden werden. So können die Prototyping-Ergebnisse schnell und unkompliziert mit verschiedenen Stake- holdern im nächsten Schritt evaluiert werden, um zu prüfen, ob die Designideen in die von den Nutzern intendierte Richtung gehen. Abweichungen können so sehr früh erkannt und Änderungen vergleichsweise kostengünstig durchgeführt werden. Dimensionen eines Prototypen In Abhängigkeit der Konzeptreife eignen sich unterschiedliche Typen von Prototypen, die in der Aktivität „Erarbeiten von Gestaltungslösung“ entwickelt und für die darauffolgende Aktivität der Evaluation eingesetzt werden können. Ein Prototyp ist nach Preece/Rogers/ Sharp (2002, S. 180) eine eingeschränkte Version des zukünftigen Produktes, dessen Ziel es ist, Antworten auf spezifische Fragen hinsichtlich der Angemessenheit und Umsetzbar- keit des Designs zu finden. Nach Richter/Flückiger (2016, S. 73) können Prototypen anhand der nachfolgenden Dimensionen differenziert werden: Funktionsumfang: Welche Funktionen des späteren Produktes sollen im Prototyp dar- gestellt werden? Ausschnitte oder ein Überblick über den gesamten Umfang? Funktionstiefe: Wie detailliert sollen die im späteren Produkt vorgesehenen funktiona- len Elemente durch den Prototyp abgebildet werden? Darstellungstreue: Wie ähnlich soll der Prototyp dem späteren Produkt hinsichtlich Look-and-Feel des User Interface sein? Interaktivität: Wie interaktiv soll der Prototyp sein? 34 Datengehalt: Sollen reale Daten zum Einsatz kommen oder genügen Platzhalter für dargestellte Informationen und Bezeichnungen? Technische Reife: Können einfache Zeichenwerkzeuge verwendet oder sollen Aspekte der vorgesehenen UI-Technologie eingesetzt werden? Je nach Einsatzzweck des Prototyps eignen sich unterschiedliche Dimensionen. So ist bei- spielsweise zur Entwicklung von Produktideen auf eine geringe Darstellungstreue (engl. Fidelity) zu achten, während für die späteren Schritte der Konzeption des UIs eine mittlere und für die Optimierung des UIs eine hohe Darstellungstreue vorteilhaft ist. Tabelle 1: Unterschiedliche Dimensionen des User Interface sowie des geplanten Produktes, aufgeschlüsselt nach Einsatzzweck Zweck des Prototyps Dimensionen Produktidee entwickeln Funktionsumfang: Kernfunktion erlebbar machen geringe Funktionstiefe sehr geringe technische Reife und Darstellungstreue Anforderungen schärfen Funktionsumfang mit realistischen Daten darstellen User Interface konzipieren mittlere Darstellungstreue ausgewählte Funktionen im Detail teilweise interaktiv User Interface optimieren hohe Darstellungstreue interaktiv für ausgewählte Funktionen oft reale Daten notwendig oft hohe technische Reife notwendig für gutes Aussehen sorgen hohe Darstellungstreue User Interface spezifizieren Funktionsumfang und -tiefe mittel bis hoch mittlere Interaktivität Quelle: erstellt im Auftrag der IU, 2019 in Anlehnung an Richter/Flückiger 2016, S. 79. Möglichkeiten des Prototypings Aufgrund der unterschiedlichen Ausprägung der Dimensionen von Prototypen unterschei- det sich die Tätigkeit des Prototypings stark. So kann diese beispielsweise mittels Stift und Papier, mittels Prototyping Software oder sogar mittels Coding durchgeführt werden. Nachfolgend werden Begrifflichkeiten für die Resultate des Prototypings erläutert und definiert. Sketch (dt. Skizze) Durch Sketching werden auf Papier schnelle und günstige Skizzen erzeugt. Ein häufiger Begriff für Sketch ist auch Scribble. Sie dienen der Ideengenerierung und weisen eine geringe Darstellungstreue auf. Vorteil von Sketches ist, dass sie kostengünstig, schnell zu erzeugen und wegwerfbar sind. Nach Preece/Rogers/Sharp (2002, S. 111f.) sollen Sketches ein Minimum an Detail aufweisen, nicht präzise sein, sondern Offenheit vermitteln und zu 35 Explorationen einladen. Sie eignen sich in der divergierenden Phase des Double-Diamond- Design-Modells. Um Skizzen von User Interfaces nicht isoliert zu betrachten, werden sie auch häufig in Storyboards eingebettet, um weitere Aspekte der Nutzer sowie des Nut- zungskontexts zu vermitteln. Wireframe (dt. Drahtmodell) Wireframes gehören zur Gruppe der Low-Fidelity-Prototypen, da sie eine geringe Darstel- lungstreue aufweisen. Wireframes sollten bewusst das Look-and-Feel des späteren Pro- duktes nicht vermitteln, sondern auf Funktionalität und das konzeptionelle Design fokus- sieren. Sie können einen unterschiedlichen Grad an Interaktivität aufweisen. Zur Erzeugung von Wireframes können verschiedene Softwaretools eingesetzt werden, die bereits vorgefertigte UI-Elemente enthalten und auch bei der Erzeugung von Interaktivität unterstützen. Wireframes sind kostengünstig sowie schnell zu erzeugen und können neben der Stakeholder-Kommunikation, der UI-Konzeption und -Optimierung auch für Nutzerevaluationen eingesetzt werden. Mockup Ein Mockup ist eine Abwandlung von Wireframes, die jedoch meist statisch von sehr gerin- ger Interaktionstiefe gekennzeichnet sind. Mockups vermitteln meist einen gesamten Überblick über den Funktionsumfang des User Interface, weisen aber eine sehr geringe Funktionstiefe auf. Sie können beispielsweise für Nutzerevaluationen eingesetzt werden, die das hinterlegte Konzept der Informationsarchitektur abtesten wollen. High-Fidelity-Prototyp Diese Art von Prototypen wird erst gegen Ende des Designprozesses eingesetzt. Sie sind meist kostenintensiv in der Erzeugung. High-Fidelity-Prototypen ähneln dem späteren Look-and-Feel, weisen eine hohe Darstellungstreue und Interaktivität auf. Der abgebildete Funktionsumfang sowie die Funktionstiefe können variieren. Sie dienen der Optimierung des User-Interface-Konzeptes sowie für das Design der visuellen Ästhetik. High-Fidelity- Prototypen werden für Nutzerstudien zur finalen Evaluation eingesetzt. Evaluationen Die Evaluation ist zentraler Aspekt im nutzerzentrieten Designprozess. Alle bisher beschriebenen Aktivitäten sollten mit Evaluationen abgesichert werden. Hierfür stehen verschiedene Evaluationsmethoden zur Verfügung, um die entwickelten Designlösungen zu testen, zu bewerten und gegebenenfalls auf Basis des Feedbacks in einer weiteren Ite- ration zu optimieren. Mittels Evaluationen kann geprüft werden, inwieweit die entwickelten Designlösungen den festgelegten Nutzerbedürfnissen gerecht werden und die Anforderungen des Nut- zungskontexts berücksichtigen. Im Double-Diamond-Design-Modell dienen Evaluationen der Reduktion von Designalternativen in den konvergierenden Phasen. 36 Evaluationen sollten bereits sehr früh im Designprozess eingesetzt werden, da schnell erkannte Fehler kostengünstiger und schneller zu ändern sind als spät erkannte Fehler. Formative Evaluationen bezeichnen Tests, die während des Designprozesses zur Entschei- dungsfindung zwischen verschiedenen Designalternativen sowie zur Optimierung einzel- ner Designlösungen eingesetzt werden. Summative Evaluationen beschreiben dagegen die abschließende Bewertung des Produktes. Grundsätzlich können Evaluationen durch Nutzer oder durch Experten durchgeführt wer- den. Vorteil von Nutzerevaluationen ist, dass Nutzer explizites und implizites Wissen über ihre Bedürfnisse und den Nutzungskontext mitbringen. Evaluationen mit Nutzern sind auf- grund der Akquise von Probanden meist ein wenig aufwendiger und teurer, aber auch aus- sagekräftiger und daher prinzipiell Expertenevaluationen vorzuziehen. Im Rahmen von Evaluationen können quantitative Daten (z. B. Zeitbedarf für den Bestell- prozess, Anzahl der Bedienschritte für das Auffinden von Informationen auf einer Website) und qualitative Daten (z. B. „der Mehrwert des Produktes ist für mich noch nicht eindeutig erkennbar“) gesammelt werden. Diese können beispielsweise mittels Befragung, Beobachtung oder auch durch Unterstützung von Tools wie beispielsweise Blickerfas- sungsgeräten oder Datenloggern aufgezeichnet werden. So kann z. B. die Blickfolge und - verweildauer auf den einzelnen Webseiten erfasst oder auch der Zeitbedarf für einen Bestellvorgang aufgezeichnet werden. In Abhängigkeit der Konzeptreife können unterschiedliche Evaluationensmethoden einge- setzt werden. Um den Probanden ein passenderes Bild vom späteren Produkt zu kommu- nizieren, ist der Einsatz von Low-Fidelity- und High-Fidelity-Prototypen empfehlenswert. Bei knappem Budget kann auch eine Evaluation mit sehr wenigen Nutzern oder Experten durchgeführt werden, um wichtige Indikationen für die Konzeptentwicklung zu bekom- men. 2.5 Double-Diamond-Design-Modell Grundsätzlich beschreibt der in der ISO-Norm 9241-210 spezifizierte nutzerzentrierte Designprozess ein Vorgehen, welches auf zwei Aspekte fokussiert (Norman 2013, S. 219f.): einerseits auf das Identifizieren des richtigen Problems, welches es zu lösen gilt, anderer- seits auf das Erarbeiten von Designlösungen, welche den Bedürfnissen und Fähigkeiten der Nutzer entsprechen. Um diese zwei Phasen hervorzuheben, wurde vom British Design Council im Jahr 2005 ein Double-Diamond-Design-Modell eingeführt. Es unterteilt den Designprozess in den ersten Teil des Identifizierens des richtigen Problems, um sich im Anschluss der Findung der richtigen Designlösung zu widmen. Jede dieser zwei Phasen beinhaltet zunächst eine Divergenzphase: Hier wird der mögliche Problem- bzw. Lösungs- raum aufgemacht. Anschließend folgt eine Konvergenzphase, in der die möglichen Prob- lem- und Lösungsalternativen wieder reduziert werden. Folglich verändert sich die Zahl möglicher Alternativen über die Zeit in Form von zwei hintereinanderliegenden Diaman- ten, welche dem Vorgehensmodell den Namen gibt. 37 Abbildung 10: Double-Diamond-Design-Modell Quelle: erstellt im Auftrag der IU, 2019 in Anlehnung an British Design Council 2019; Norman 2013. Um beim vorherigen Zitat von Henry Ford zu bleiben: „Wenn ich die Menschen [zu Beginn des 20. Jahrhunderts] gefragt hätte, was sie wollen, hätten sie gesagt: ‚schnellere Pferde.‘“ Nach dem Double-Diamond-Modell geht es nun im ersten Schritt um das Finden des rich- tigen Problems, welches nicht dem vordergründigen Problem entspricht, dass die Pferde zu langsam sind. Vielmehr soll zunächst der Problemraum aufgespannt werden (Diver- genz). Hier könnte z. B. auch das Problem des mangelhaften Ausbaus des Eisenbahnnet- zes untersucht werden. In der Konvergenzphase geht es nun um das Identifizieren des richtigen Problems für die untersuchte Nutzergruppe. In dem vorliegenden Beispiel könnte das zugrunde liegende Problem z. B. eine nicht ausreichend schnelle, wetterge- schützte individuelle Mobilität sein. Wie hängt nun das Double-Diamond-Modell des Designs mit dem nutzerzentrieten Design- prozess zusammen? Gleichzeitig stellt sich die Frage für Designer, wie die zwei Phasen des Double-Diamond-Modells konkret durchgeführt werden können. Genau hier kommen die beiden in dieser Lektion erläuterten Ansätze zusammen. Iterationen des nutzerzentrierten Gestaltungsprozesses können für jede Phase des Double-Diamond-Modells durchgeführt werden (Norman 2013, S. 221f.). Das heißt, für jede Aktivität des nutzerzentrierten Gestal- tungsprozesses können für die jeweilige Fragestellung passende Methoden ausgewählt und durchgeführt werden. Das Double-Diamond-Design-Modell beschreibt das Vorgehen des Designers, bei dem sowohl in der Problemfindungsphase als auch in der Lösungs- phase zunächst ein Schwerpunkt auf das Finden verschiedener Alternativen gelegt wird, bevor diese beispielsweise mittels Nutzerevaluationen reduziert werden können. Folglich 38 ist der nutzerzentrierte Gestaltungsprozess ein übergeordnetes Vorgehensmodell, wäh- rend das Double-Diamond-Modell stärker auf das Design fokussiert, aber ebenso auf die Kernaktivitäten und Methoden des nutzerzentrierten Gestaltungsprozesses zurückgreift. ZUSAMMENFASSUNG Um innovative Produkte und Dienstleistungen erfolgreich auf dem Markt zu platzieren, ist eine genaue Kenntnis der Nutzer und ihrer Bedüfnisse im spezifischen Nutzungskontext nötig. Der nutzerzentrierte Designpro- zess nach der ISO-Norm 9241-210 stellt den Nutzer in den Mittelpunkt. Nach der Planung des nutzerzentrierten Gestaltungsprozesses werden vier zentrale Aktivitäten iterativ ausgeführt, bis die Designlösungen den Nutzungsanforderungen entsprechen. Diese vier Aktivitäten sind das Verstehen und Festlegen des Nutzungskontexts, das Festlegen der Nut- zungsanforderungen, das Erarbeiten von Designlösungen sowie das Eva- luieren der Designlösungen auf Basis der Nutzungsanforderungen. Für jede dieser Aktivitäten können verschiedene Methoden eingesetzt wer- den, je nach Zielsetzung, Rahmenbedingungen oder Reifegrad der Designlösung. Während der nutzerzentrierte Gestaltungsprozess ein weit verbreitetes, übergeordnetes Vorgehensmodell beschreibt, ist das vom British Design Council beschriebene Double-Diamond-Design-Modell stärker auf das Design fokussiert. Es unterteilt den Designprozess in das Identifizieren des Designproblems sowie das Finden von Designlösungen. Beide Pha- sen sind zunächst durch eine divergierende und anschließend durch eine konvergierende Anzahl von Designalternativen zu erreichen. Für die konkrete Umsetzung der Phasen kann wiederum auf die Methoden und Aktivitäten des nutzerzentrierten Gestaltungsprozesses zurückgegriffen werden, was den Zusammenhang der beiden Vorgehensmodelle illust- riert. 39 LEKTION 3 INFORMATIONSARCHITEKTUR LERNZIELE Nach der Bearbeitung dieser Lektion werden Sie wissen, … – was der Zweck von Informationsarchitekturen ist. – welche grundlegenden Typen von Websites unterschieden werden. – wie Makro-Informationsarchitekturen aufgebaut werden. – wie Mikro-Informationsarchitekturen gestaltet werden. 3. INFORMATIONSARCHITEKTUR Einführung Die weltweite Datenmenge steigt kontinuierlich in hohem Tempo an. So prognostiziert Cisco Systems (Statista 2019), dass sich das weltweit gespeicherte Datenvolumen in Rechenzentren innerhalb von drei Jahren von 2016 bis 2019 mehr als verdoppelt haben könnte. Innerhalb von fünf Jahren wird sogar eine Vervierfachung prognostiziert. Abbildung 11: Prognose zum weltweit gespeicherten Datenvolumen in Rechenzentren bis 2021 Quelle: Cisco Systems 2019. Durch die steigende Informationsmenge, die jedem Internetnutzer weltweit unmittelbar zur Verfügung steht, ist es wichtig, ihm die Informationen einfach auffindbar und gut strukturiert zu präsentieren. Dabei sollte die Informationsdarstellung für die Bedürfnisse der entsprechenden Nutzer unter Berücksichtigung des Nutzungskontexts angepasst sein. Das konzeptionelle Grundgerüst der Website besteht aus der Informationsarchitektur. Ist diese nicht für die Nutzer logisch und nachvollziehbar durchdacht, so finden sich diese nicht zurecht und werden mit einem Klick die Website wieder verlassen. Die Informations- 42 architektur ist folglich ein System, mit dessen Hilfe Informationen anhand unterschiedli- cher Kriterien auf mehreren Ebenen organisiert werden können (Erlhofer/Brenner 2018, S. 189). Ist die Informationsarchitektur einer Website nicht ausreichend gut konzipiert, so kann dies mit einem Haus verglichen werden, welches auf Sand gebaut ist: Es ist instabil und wird sich langfristig nicht halten können. Wie sich Makro- und Mikro-Informationsar- chitektur unterscheiden und welche Aspekte bei deren Gestaltung beachtet werden müs- sen, wird nachfolgend behandelt. Zuvor wird auf die unterschiedlichen Websitetypen ein- gegangen. 3.1 Typen von Websites Die Informationen aus dem Internet können von Nutzern über einen Browser abgerufen werden. Dieser erzeugt dann ein grafisches User Interface (Erlhofer/Brenner 2018, S. 25ff.). Die Begriffe „Website“, „Webpräsenz“, „Internetauftritt“ und „Webangebot“ werden syno- nym verwendet und bezeichnen die gesamte Repräsentanz, mit der sich ein Unternehmen im Internet vorstellt (Erlhofer/Brenner 2018, S. 29). Eine Website kann aus mehreren Web- seiten (engl. Web Pages) bestehen, die meist eine gemeinsame Domain sowie eine über- greifende Navigation besitzen. Die Haupt- bzw. Startseite innerhalb der Website wird auch als Homepage bezeichnet. Webapplikationen können in Websites eingebettet sein, wie beispielsweise eine Onlinebanking-Anwendung (Thesmann 2016, S. 4). Separate Webap- plikationen sind z. B. mobile Apps für Smartphones oder Tablets. Websites haben drei wichtige Aufgaben, die im Gleichgewicht gehalten werden sollen. So sollten die Informationen für die Nutzer schnell und leicht auffindbar präsentiert werden, zudem sollten Websites ein positives Image vermitteln und ein interessantes Erlebnis schaffen (Erlhofer/Brenner 2018, S. 23). 43 Abbildung 12: Drei wichtige Aufgaben von Websites Quelle: Erlhofer/Brenner 2018, S. 23. Grundsätzlich sind zwei verschiedene Kommunikationsprinzipien von Websites zu unter- scheiden. Präsentiert sich ein Unternehmen über eine Website seinen Nutzern, so geschieht dies als One-to-Many-Website. Der Informationsaustausch geschieht haupt- sächlich eindirektional, d. h. vom Unternehmen zum Nutzer. Dem gegenüber stehen soge- nannte Many-to-Many-Websites, die als Plattform einen bidirektionalen Informations- austausch zwischen den Nutzern bieten, wie beispielsweise Foren. Website-Typen unterscheiden sich hinsichtlich ihrer Zielsetzung. Marken-Websites stellen die Vermittlung des Images der Marke in den Vordergrund, während Produkt-Webseiten das Produkt in den Mittelpunkt der Kommunikationsstrategie rücken. Informationsportale bieten auf der Homepage meist einen kurzen Überblick in Form von Teasern, ähnlich der Titelseite von Zeitungen oder Zeitschriften. Webshops müssen den Nutzer einfach und zielgerichtet zum Produkt führen, Vertrauen aufbauen und einen einfachen Bestellprozess bieten. Kunden- portale werden durch die Nutzer meist über einen Login-Bereich betreten und bieten bei- spielsweise Möglichkeiten, mit dem Anbieter zu interagieren, Rechnungen einzusehen oder weitere Dienste zu- oder abzuschalten. Kommunikationsebenen von Websites Menschen kommunizieren mit jeder Äußerung viel mehr als nur reine Sachinhalte. Dies gilt ebenso für Websites. Friedemann Schulz von Thun (1981) hat auf Basis früherer Sen- der-Empfänger-Kommunikationsmodelle ein Vier-Seiten-Modell entwickelt, das sich auf jede Kommunikationssituation übertragen lässt. Es lässt sich gut für die Kommunikation zwischen Websites und ihren Besuchern anwenden. 44 Die vier Ebenen der Kommunikation zwischen einer Website als Sender und ihren Besu- chern als Empfänger bestehen aus der Inhaltsebene, der Selbstkundgabe, der Beziehungs- ebene sowie der Appellebene (Erlhofer/Brenner 2018, S. 77ff.). Abbildung 13: Vier Ebenen der Website-Kommunikation und die jeweiligen Erwartungen der Empfänger Quelle: Erlhofer/Brenner 2018, S. 79. Über die Inhaltsebene der Website präsentiert beispielsweise ein Unternehmen oder eine Marke seine bzw. ihre Dienstleistungen, Produkte oder Informationen zu einem gewissen Thema (Erlhofer/Brenner 2018, S. 79f.). Um die Inhaltsebene für den Nutzer informativ, relevant und strukturiert zu präsentieren, ist eine gute Informationsarchitektur entschei- dend. Sie ist das Kernelement des Website-Konzeptes. Auf der Ebene der Selbstkundgabe werden über die Anmutung und den „Ton“ der Website das Selbstbild sowie die Werte des Unternehmens oder der Organisation kommuniziert, das oder die die Website betreibt (Erlhofer/Brenner 2018, S. 81ff.). Hier sind beispielsweise die Farbwahl, die atmosphärische Wirkung der verwendeten Bilder sowie die eingesetzte Sprache entscheidend. Zudem besitzen Websites in der Regel ein Appellebene. Sie werden meist erstellt, um die ausgewählte Zielgruppe von einer Handlung zu überzeugen (Erlhofer/Brenner 2018, S. 85ff.). Neben der Präsentation von Sachinhalten soll eine Botschaft an die Besucher gesendet werden. Folglich ist in den präsentierten Inhalten und Texten eine Appellwirkung ansprechend verpackt. Zudem gibt es Elemente auf der Website, die eine direkte Appell- funktion haben. Dies können Interaktionselemente sein wie Buttons, die zum Download oder zum Kauf animieren sollen. Ebenso können dies Anmeldeoptionen für einen Newslet- ter sowie Kontaktformulare sein. Diese Interaktionselemente werden auch als Call-to- Action-Elemente bezeichnet. Diese Handlungsaufrufe sollten sich in eine gestalterische Argumentationskette einfügen und unaufdringlich, aber für die Website-Besucher gut erkennbar sein. Folglich ist ein Call-to-Action der Handlungsaufruf für die Besucher. Diese vom Website-Betreiber intendierte, abschließende Handlung des Besuchers wird auch als Conversion bezeichnet (Erlhofer/Brenner 2018, S. 85ff.). 45 Die Beziehungsebene zeigt sich vor allem in der Ansprache der Website-Besucher (Erlho- fer/Brenner 2018, S. 87f.). Werden die Besucher direkt angesprochen oder werden lediglich Informationen über das Unternehmen oder das Angebot vermittelt? Werden die Besucher mit „Sie“ oder „Du“ angesprochen? Auch das kommunizierte Selbstbild übermittelt Infor- mationen auf der Beziehungsebene. Ist die bildliche und sprachliche Gestaltung eher sachlich und distanziert oder lebendig, locker und nahbar? Auch die Gestaltung der Inter- aktionselemente wie beispielsweise die Größe des Kontaktformulars suggeriert Informati- onen über die Beziehungsebene. 3.2 Makro-Informationsarchitektur Die Informationsarchitektur (IA) ist die Basis für eine gelungene User-Interface-Gestaltung. Sie ist jedoch meist nicht direkt und unmittelbar für den Nutzer sichtbar. Grundsätzlich enthält die IA verschiedene Komponenten (Rosenfeld/Morville/Arango 2015, S. 90): Organisationssystem: Das Organisationssystem beschreibt, wie die Informationen der Webseite kategorisiert sind, welche Seitentypen ausgewählt wurden und wo verschie- dene Elemente auf den einzelnen Seiten platziert sind. Labeling-System: Das Labeling-System beschreibt, wie die Informationen repäsentiert werden. Welche Bezeichnungen für Buttons, Kategorien, Navigationselemente werden gewählt? Mit welcher Sprache werden die Nutzer angesprochen? Navigationssystem: Mithilfe des Navigationssystems können sich Nutzer sicher von Seite zu Seite innerhalb einer Webpräsenz bewegen. Zudem unterstützt es den Nutzer bei der Orientierung innerhalb der Webpräsenz. Suchsystem: Mithilfe des Suchsystems kann der Nutzer zielgerichtet zu bestimmten Inhalten geleitet werden. Die Makro-Informationsarchitektur ist für die thematische Unterteilung der Website ver- antwortlich. Dadurch entstehen verschiedene Website-Bereiche. So könnte eine Website zum Thema Versicherungen z. B. unterteilt werden in die Themenbereiche: Haus und Recht, Kraftfahrzeuge, Gesundheitsvorsorge sowie Risiko und Vorsorge. Die Makro-Informationsarchitektur sollte immer aus Sicht der Nutzerbedürfnisse aufge- baut sein. So bietet die Website der Stadtverwaltung beispielsweise die Online-Beantra- gung von Geburtsurkunden an. Manche Stadtverwaltungen gliedern ihre Websites nach der organisatorischen Struktur der Behörden. Hieraus folgt eine Gliederung beispielsweise in Kreisverwaltungsreferat, Kommunalreferat, Sozialreferat usw. Für den Nutzer ist ohne Transferleistung nicht auf den ersten Blick klar, wohin er innerhalb der Website navigieren muss, um sein Ziel, die Beantragung der Geburtsurkunde, zu erfüllen. Eine hinsichtlich der Nutzerbedürfnisse ausgerichtete Makro-Informationsarchitektur ist beispielsweise unter Serviceportal Baden-Württemberg (2019) zu finden. Dessen inhaltliche Struktur der Ver- waltungsdienstleistungen erfüllt dieses Kriterium gut. Die Verteilerseite unter dem Titel 46 „Hilfe in allen Lebenslagen“ gliedert die angebotenen Verwaltungsdienstleistungen nutz- erorientiert beispielsweise in „Arbeit und Bildung“, „Familie und Lebensbündnisse“, „Geburt und Tod“ usw. Die Makro-Informationsarchitektur sollte folglich die mentalen Modelle ihrer Nutzer berücksichtigen. Mentale Modelle sind eine „innere Vorstellung über funktionale Eigen- schaften und Zusammenhänge“ (Zühlke 2012, S. 24). Mentale Modelle sind aufgabenbezo- gen, unvollkommen und unbeständig. Sie können den Nutzern helfen, sich zu orientieren und die Wirkung geplanter Aktionen auf einem User Interface zu prognostizieren. Nutzer einer Website haben grundsätzlich drei zentrale Fragestellungen: Wo bin ich? Was gibt es hier? Wie komme ich weiter? Eine sinnvolle Informationsarchitektur unterstützt die Nutzer dabei, einfach und zielgerichtet die obigen Fragen zu beantworten. IA aus Nutzersicht aufbauen: Card-Sorting-Methode Eine häufig eingesetzte Methode zur Erfassung mentaler Modelle der Nutzer und als Basis für die Entwicklung von Makro-Informationsarchitekturen wird das Card Sorting verwen- det. Zudem kann das Card Sorting auch als Methode zur Überprüfung der bereits konzep- tionell entwickelten Makro-Informationsarchitektur eingesetzt werden. Die Methode wird idealerweise mit späteren Nutzern der Website durchgeführt und ist einfach und schnell durchführbar. Zunächst werden die geplanten Inhalte der Website auf einzelne Karteikarten geschrieben und unsortiert auf dem Tisch verteilt. Wichtig ist, dass ausschließlich die Inhalte, nicht aber geplante Kategorienüberschriften auf den Karteikarten notiert werden. Die Aufgabe des Testprobanden besteht darin, die einzelnen Karteikarten mit den Inhalten sinnvoll zu gliedern. Im Anschluss wird der Proband gebeten, für jede Gruppe einen passenden Kate- gorientitel zu finden und zu notieren. Um zusätzliche Hintergründe zu erfahren, kann der Versuchsleiter den Probanden bitten, seine Gedanken während der Sortierung auszuspre- chen, was der „Think Aloud“-Methode entspricht. Um nach der Fertigstellung der Aufgabe weitere Hintergründe und Details zu bekommen, kann der Versuchsleiter eine Abschluss- befragung durchführen. Durch das Card Sorting können die mentalen Modelle der Proban- den erfasst und Informationen über die Zusammenhänge einzelner Themen gesammelt werden. Die Methode kann vor der Gestaltung der Informationsarchitektur sowie zur Über- prüfung und Optimierung eingesetzt werden. 3.3 Mikro-Informationsarchitektur Im Gegensatz zur Makro-Informationsarchitektur, die die Struktur einer gesamten Webprä- senz thematisch gliedert, beschreibt die Mikro-Informationsarchitektur die Struktur auf einer einzelnen Webseite innerhalb der Webpräsenz. Dies betrifft die Gestaltung der ein- zelnen Seiten eines Webauftritts sowie die Auswahl des jeweiligen Seitentyps. 47 Klassifikation der Nutzer nach Suchverhalten Hinsichtlich des Suchverhaltens lassen sich drei beispielhafte Typen von Website-Nutzern unterscheiden (Erlhofer/Brenner 2018, S. 139ff.). Da der Nutzertyp „Sucher“ eine klare Vor- stellung seines Suchziels hat, sucht er auf Websites gezielt, fokussiert und ergebnisorien- tiert. Dagegen sucht der User-Typ „Browser“ eher explorativ. Er hat meist nur eine vage Vorstellung des Suchziels, er lässt sich gerne inspirieren und stöbert durch die angeboten Informationen eher erlebnisorientiert. Der dritte User-Typ kann als „Researcher“ bezeich- net werden. Er hat keine klare Vorstellung seines Suchziels aber genügend Zeit und Moti- vation für eine vollumfängliche Recherche. Er sucht umfassende, fundierte Informationen und sammelt die dargebotenen Inhalte. Diese Charakterisierung eines Nutzers ist jedoch nicht permanent, sie kann sich im Suchverlauf des Nutzers über die Zeit ändern. Auch können Mischformen auftreten. Die Mikro-Informationsarchitektur sollte so angelegt sein, dass für alle drei verschiedenen Suchtypen geeignete Elemente in das User Interface integriert werden. Bevor die verschie- denen Elemente innerhalb einer Seite ausgewählt und platziert werden, wird zunächst der Seitentyp der Webseite innerhalb einer Webpräsenz festgelegt. Seitentypen innerhalb einer Website Besucher finden sich in Supermärkten und Kaufhäusern zurecht, da es bestimmte Muster gibt, innerhalb derer sie ihre gesuchten Produkte finden können. So finden sich Kühlware in Kühltheken, Getränke im Getränkebereich sowie Zigaretten meist in der Nähe des Kas- senbereichs. Gleichermaßen sollten, um dem Nutzer die Orientierung im Webauftritt zu erleichtern, gezielt passende Seitentypen ausgewählt werden, deren Inhaltselemente wie- derum in für die Nutzergruppe vertrauten Bereichen angeordnet werden. Es lässt sich nach folgenden, weitverbreiteten Seitentypen differenzieren, die nachfolgend auf Basis von Erlhofer/Brenner (2018, S. 246ff.) kurz erläutert werden: Homepage, Landingpage, Verteilerseite, Produkt- oder Detailseite, Warenkorb- oder Checkout-Seite, Registrierungs- oder Login-Seite, „Über uns“ oder Teamseite sowie Impressum und Datenschutz. Homepage Die Homepage der Website gehört zu einer der wichtigsten Seiten des Internetauftritts. Sie sollte dem Besucher einen guten Gesamteindruck der Website vermitteln. Dies ist über ausdrucksstarke Bilder und Textelemente möglich. Gerade bei Webshops wird auch gerne mit bildreich gestalteten Teaser-Elementen gearbeitet, die direkt zu spannenden Inhalten oder Trends oder einer personalisierten Auswahl von Produkten führen. Auf manchen Homepages sind auch Formularelemente, wie z. B. Anmeldeformulare oder der Login zum Kundenbereich, zu finden. Die Homepage ist zwar nicht zwangsläufig die erste Seite des 48 Webauftritts, die der Nutzer sieht. Jedoch werden die meisten im Laufe ihres Besuchs auf die Homepage navigieren. Diese sollte also so gestaltet sein, dass dem Besucher innerhalb der ersten Sekunden ein guter, ansprechender Eindruck vermittelt wird. Dem Nutzer sollte schnell ein klarer und prägnanter Einblick in das Angebot der Website gegeben werden. Sonst wird dieser schnell die Website verlassen und beispielsweise zurück zur Suchergeb- nisliste seiner Suchmaschine springen. Landingpage Landingpages formulieren klar und deutlich ein Angebot und animieren den Besucher zu einer Handlung. Auf der Landingpage bekommen Besucher überzeugend ein Thema oder ein Produktangebot präsentiert. Die Einsatzmöglichkeiten von Landingpages sind sehr vielfältig. So können Landingpages zur Buchung von Dienstleistungen, zum Verkauf von Produkten oder als Zielseiten zur Lead-Generierung eingesetzt werden. Auch können sie als Zielseiten zur Marktforschung oder zum Testen neuer Produktideen oder Marketing- kampagnen eingesetzt werden. Um diese Wirkung zu erzielen, sollten Landingpages sich auf die relevantesten Aspekte konzentrieren und ablenkende Informationen oder unnö- tige Details vermeiden. Ihre Gestaltung und Struktur variieren stark. Sie dienen wie Home- pages aus Nutzersicht auch als Eingangstor zum Webauftritt, da sie als Zielseiten der Suchergebnisse von Suchmaschinen oder über Marketingkampagnen den Nutzer zur Landingpage führen. Je nach Zielsetzung können sie auch als Verteilerseite, Detail- oder Produktseite aufgebaut sein. Verteilerseite Verteilerseiten bieten eine Kategorienübersicht, die meist auch mit grafischer Gestaltung unterlegt ist. Sie werden vermehrt bei großen Websites eingesetzt, die ein breitgefächer- tes Portfolio anbieten. Die globale Navigation im Menü sollte stets schlank gehalten wer- den, damit dem Nutzer weitere Kategorien auf Verteilerseiten ansprechend präsentiert werden können. So helfen Verteilerseiten dem Nutzer, durch das Angebot der Website zu navigieren. Beispielsweise arbeitet Amazon auf verschiedenen Ebenen mit Verteilerseiten. Bei der Suche eines Smartphones kann über die Kategorien „Elektronik & Foto“ auf die nächst tiefere Verteilerseite zu „Handys & Zubehör“ navigiert werden. Diese zeigt einen Überblick verschiedener Bestseller-Smartphones, die der Nutzer anwählen kann. Per Klick auf ein Produkt wird er zur jeweiligen Detailseite weitergeleitet. Produkt- oder Detailseite Auf einer Produkt- oder Detailseite erwartet der Nutzer konkrete Informationen und Inhalte. Alle relevanten Details sollten für den Nutzer übersichtlich gestaltet und visuell ansprechend präsentiert werden. Auch ist es zielführend, auf verwandte Themenaspekte oder Produkte im ähnlichen Themenbereich zu verweisen. Dies kann durch verlinkte Ele- mente, Textlinks oder bildliche Teaser-Boxen geschehen. 49 Warenkorb oder Checkout-Seite Über den Warenkorb können Nutzer den Kauf abschließen und werden hierbei durch einen Checkout-Prozess begleitet. Aus Gründen der Usability sollten diese Schritte bis zum Abschluss des Kaufs für den Nutzer transparent sowie möglichst angenehm und einfach gestaltet werden. So sollten maximal drei Schritte nötig sein. Auch die Anzahl der vom potenziellen Käufer verlangten Informationen sollte möglichst gering gehalten werden. Bei langen Prozessen ist die Wahrscheinlichkeit dagegen recht hoch, dass der Nutzer den Kaufprozess abbricht. Auf der Warenkorb-Seite können zudem noch verwandte Produkte, wie beispielsweise eine passende Schutzfolie für das im Warenkorb ausgewählte Smart- phone, integriert werden, um den Nutzer zu weiteren Käufen zu animieren. Registrierung- oder Login-Seite Registrierungs- oder Login-Seiten sind klassische Formularseiten, die dem Nutzer Zugang zum Kundenbereich geben. Durch eine ansprechende Farbwahl, eine eindeutige Zuord- nung und Bezeichnung der einzugebenden Informationen kann die Usability erhöht wer- den. „Über uns“ oder Teamseite Auf dieser Seite bietet sich die Möglichkeit, dem Besucher das eigene Unternehmen mit Bild- und Textelementen zu präsentieren. Hierbei ist auf eine freundliche, sympathische Wortwahl und Bildgestaltung zu achten. Auch ist es zielführend, den Mehrwert des Unter- nehmens, des Teams bzw. des Informationsangebots für den Nutzer herauszustellen. Impressum und Datenschutz Angaben zu Impressum und Datenschutz sind gesetzlich verpflichtend. Bei diesen Seiten handelt es sich meist um reine Inhaltsseiten mit vorrangig juristischem Text. Diese Seite sollte idealerweise von jeder Webseite innerhalb der Webpräsenz über einen Link erreich- bar sein. Erwartungsgerechte Anordnung von Gestaltungselementen Nutzer haben eine klare Vorstellung, wo innerhalb der klassischen Webseite einzelne Ele- mente zu finden sein sollten. Thesmann (2016, S. 236ff.) hat hierzu verschiedene beste- hende Studien analysiert, welche die Erwartungshaltung von Website-Besuchern abfra- gen. Demnach wollen 76 % der Besucher die einzelnen Web-Elemente gerne ihren Erwartungen entsprechend auf der Seite platziert haben. Ein Vergleich zwischen der Erwartungshaltung der Website-Nutzer im Jahr 2004 und im Jahr 2014 zeigt kaum Verän- derungen. So wird die Gruppe interner Links mit der Navigationsleiste und Menüs zu bei- den abgefragten Zeitpunkten im linken, oberen Bereich erwartet. 50 Abbildung 14: Erwartungshaltung der Nutzer zur Platzierung der Gruppe interner Links (Navigationsleiste/Menü) Quelle: Thesmann 2016, S. 240. Ebenso ist die Erwartungshaltung der Website-Nutzer bezüglich der Platzierung des Warenkorb-Buttons von Webshops sehr homogen. Abbildung 15: Erwartungshaltung der Nutzer zur Platzierung des Warenkorbs Quelle: Thesmann 2016, S. 241. Ebenso lassen sich zwischen der Erwartungshaltung von seltenen Nutzern kaum Unter- schiede im Vergleich zu sehr häufigen Nutzern finden (Thesmann 2016, S. 239). Prioritätszonen und Blickverlauf auf Websites Analysen des Blickverlaufs von Besuchern auf Websites zeigen, dass der erste Blick zunächst auf den oberen linken Bereich einer Website fällt. Dieser wird einer genaueren Prüfung unterzogen, bevor der restliche Bereich kurz erkundet wird. Wird der obere, linke Bereich noch genauer gelesen, so wird der untere Bereich meist nur schnell abgescannt. 51 Zudem ist der Blickverlauf stark beeinflussbar von Blickfängern (engl. Eye-Catchern). Dominante Überschriften, große Bilder und speziell klare Abbildungen menschlicher Gesichter ziehen eine hohe Aufmerksamkeit des Betrachters auf sich. Auf Basis der Ergeb- nisse der Blickverlaufsstudien lassen sich drei Bereiche der Website mit unterschiedlicher Prioriät einteilen: Der obere linke Bereich hat meist eine hohe Priorität, umgeben von einem Bereich mit mittlerer Priorität. Die geringste Priorität aus Nutzersicht entfällt auf den unteren und ganz rechten Bereich der Webseite (Outing/Ruel 2004 nach Thesmann 2016, S. 241ff.). Abbildung 16: Blickreihenfolge und Prioritätszonen Quelle: Thesmann 2016, S. 242, in Anlehnung an Outing/Ruel 2004. Ausgehend von Blickverlaufsstudien hat der Usability-Experte Jakob Nielsen im Jahr 2006 den Begriff „F-Shaped Pattern“ (dt. F-Form-Muster) geprägt. Er konnte auf Basis von Studi- endaten zeigen, dass der Blickverlauf meist grob in Form des Buchstabens F verläuft (Niel- sen 2006). Nach einer vertikalen Betrachtung der Webseite folgt eine mehrstufige horizon- tale Betrachtung. Dies ist jedoch keine starre Regel, sondern sollte für die Platzierung der einzelnen Elemente als Anhaltspunkt dienen, um so die Gestaltung der Mikro-Informati- onsarchitektur zu unterstützen. Ein Beispiel für die Platzierung von Elementen eines Webshops für eine Desktop-Ansicht zeigt die nachfolgende Darstellung. 52 Abbildung 17: Beispiel einer erwartungsgerechten Anordnung von Webshop-Elementen für ein Desktop Layout Quelle: Thesmann 2016, S. 248, in Anlehnung an Niklas 2014, S. 41. ZUSAMMENFASSUNG Die weltweite Datenmenge steigt fortwährend an. Dies zeigt den Bedarf für eine gut zugängliche Informationsstruktur auf Webseiten. Es haben sich verschiedene Website-Typen etabliert, die dem Nutzer Sicherheit im Umgang und in der Interaktion geben. Grundsätzlich kommunizieren One-to-Many-Website-Typen auf verschiedenen Ebenen mit dem Nutzer. Alle diese vier Ebenen sollten bei der Website-Gestaltung betrachtet werden. Für ein gelungenes User Interface ist eine gute Informationsarchitektur (IA) die Basis. Neben dem Organisationssystem können weitere Kompo- nenten die IA-Gestaltung ergänzen. Bei der Gestaltung der Informations- architektur kann zwischen der Makro- und Mikroarchitektur unterschie- den werden. 53 Die Makro-Informationsarchitektur gliedert die Website thematisch in verschiedene Kategorien. Wichtig ist dabei, dass die Struktur die menta- len Modelle der Nutzer bestmöglich abbildet. Methoden wie das Card Sorting helfen beim Aufbau einer nutzergerechten Makro-Informations- architektur. Unter der Mikro-Informationsarchitektur wird die struktu- relle Gestaltung der einzelnen Seiten innerhalb einer Webpräsenz ver- standen. Neben der Auswahl eines geeigneten Seitentyps ist die erwartungsgerechte Platzierung der verschiedenen Webseiten-Ele- mente von großer Bedeutung, um eine hohe Usability zu erzielen. 54 LEKTION 4 GESTALTUNGSELEMENTE VON USER INTERFACES LERNZIELE Nach der Bearbeitung dieser Lektion werden Sie wissen, … – was bei der Gestaltung von Navigationselementen zu beachten ist. – welche grundlegenden Elemente für die Seitengestaltung es gibt. – welche Rolle Suchfunktionen spielen und wie diese gestaltet werden können. – wie Gestaltungselemente optimal die Informationsarchitektur unterstützen können. – was hinsichtlich einer barrierefreien Gestaltung von UIs zu beachten ist. 4. GESTALTUNGSELEMENTE VON USER INTERFACES Einführung Die Nutzer können mit einer steigenden Anzahl unterschiedlicher Geräte über das Internet Websites und Webapplikationen aufrufen. Auch das Informationsangebot sowie die Anzahl von Websites wächst stetig. Daher ist es wichtig, die eigene Website so zu gestalten, dass sie das Interesse des Nutzers weckt, Vertrauen vermittelt und die Nutzer überzeugt, tiefer in die Website einzutauchen. Denn Nutzer entscheiden in der Regel innerhalb von wenigen Sekunden, ob sie die Website wieder verlassen und etwa über Suchmaschinen eine neue Suchanfrage starten. Die Wettbewerber der eigenen Website sind meist schnell und einfach über wenige Klicks zu erreichen. Daher ist es nötig, die Gestaltungselemente des User Interface so zu designen, dass sie die Informationsarchitektur perfekt unterstützen, eine hohe Usability ermöglichen und gleich- zeitig einen hohen Grad an Ästhetik aufweisen. Neben der Seitengestaltung werden in die- ser Lektion die Navigationselemente sowie die Suchfunktion behandelt. 4.1 Navigationselemente Um Website-Besuchern die Informationsarchitektur zugänglich zu machen, ist es nötig, ein Wegweisersystem aufzubauen. Navigationselemente dienen als Wegweiser. Das Navi- gationssystem, welches für Besucher einer Website über Navigationselemente direkt ansteuerbar ist, hat zwei wesentliche Funktionen (Erlhofer/Brenner 2018, S. 269): Der Nutzer kann sich durch die Interaktion mit dem Navigationssystem durch die gesamte Website bewegen. Navigationselemente haben eine Linkfunktionalität. Dies bedeutet, dass sie durch Hyperlinks mit der jeweiligen Zielseite verknüpft sind. Folglich geleiten sie den Nutzer zur Zielseite oder zum gewünschten Webseiten-Bereich. Zudem bietet die Navigation den Nutzern Orientierung auf der Website. Ein gelungenes Navigationssystem bietet Nutzern die Möglichkeit, sich fortwährend zu orientieren und sich durch die Website zu bewegen, ohne sich dabei „zu verlaufen“. Grundsätzlich sollen in benutzerorientierten Navigationssystemen die Nutzer die Naviga- tion leicht und intuitiv bedienen können. Zudem sollen die Nutzer schnell über die Naviga- tionselemente die Informationen finden, die sie suchen. Darüber hinaus sollen Nutzer sich sicher entscheiden können, was ihr nächster Schritt sein soll (Erlhofer/Brenner 2018, S. 270). Navigationssysteme lassen sich einteilen in eine primäre bzw. globale Navigation, in eine sekundäre bzw. lokale Navigation sowie eine tertiäre bzw. Content-Navigation. 56 Üblicherweise kann die globale Navigation bei Desktop Layouts horizontal angeordnet sein. Die lokale Navigation kann sich vertikal am linken Seitenrand befinden, während die Content-Navigation, wie der Name es verrät, eingebettet ist in den Webseiten-Content. Abbildung 18: Navigationselemente innerhalb einer Webseite Quelle: Rosenfeld/Morville/Arango 2015, S. 191. Jede dieser drei Arten von Navigationssystemen (globale, lokale, Content-Navigation) hilft dem Nutzer, spezifische Fragen zu beantworten. So ist das Ziel des globalen Navigations- systems, dem Nutzer eine Antwort auf die Frage „Wo bin ich?“ zu geben. Das lokale Navi- gationssystem beantwortet die Frage „Was befindet sich in der Nähe?“, während das in den Content eingebettete Navigationssystem dem Nutzer Hinweise gibt, was in Verbin- dung zum auf dieser Seite gezeigten Inhalt steht. Zusätzlich kann es noch ergänzende Navigationssysteme wie Sitemaps geben. Jedes dieser Navigationssysteme kann dabei aus verschiedenen Navigationselementen bestehen, die nachfolgend vorgestellt werden (Rosenfeld/Morville/Arango 2015, S. 176ff.). 57 Abbildung 19: Globale, lokale und in den Content eingebettete Navigationssysteme Quelle: Rosenfeld/Morville/Arango 2015, S. 177. Globale Navigation (bzw. primäre Navigation) Über die globale Navigation hat der Nutzer Zugang zu den wichtigsten Themenbereichen, die über die Makro-Informationsarchitektur definiert wurden. Die Hauptnavigation sollte dem Nutzer auf jeder Seite innerhalb einer Website in der exakt gleichen Form sowie in der gleichen Funktionsgestaltung präsentiert werden, um die Orientierung zu erleichtern und Sicherheit in der Navigation zu vermitteln. Zudem ist das Logo der Unternehmens- seite als Element enthalten, um dem Nutzer stets Orientierung zu bieten, auf welcher Seite er sich befindet. Als Beispiel ist die Hauptnavigation der Website des IUBH Fernstudiums (Stand April 2019) dargestellt. Neben fünf Menüelementen, die zu den zentralen Themenbereichen führen, ist ein Navigationselement, welches zurück zur Homepage führt, enthalten. Weiterhin sind das Logo sowie zwei Buttons, die zu zentralen Aktivitäten führen, integriert. Zudem ist die Suchfunktion über den globalen Navigationsbereich zugänglich. 58 Abbildung 20: Beispiel einer globalen Navigation im Desktop Layout (oben) sowie mit Menüauswahl (unten) Quelle: IUBH Fernstudium 2019b. Für mobile Geräte mit kleinen Screens, auf denen die permanente Anzeige der globalen Navigation einen zu großen Teil der verfügbaren Anzeigenfläche einnehmen würde, wird meist auf eine Off-Canvas-Navigation zurückgegriffen. So ist die globale Navigation bei- spielsweise übe

Gestaltung und Ergonomie von User Interfaces PDF

Document Details

Tags

Related

Summary

Full Transcript