Usability und User Experience

Transkript

1 Usability und User Experience UNDER CONSTRUCTION Usability und User Experience Websites nutzerfreundlich und ansprechend gestalten Um im Wettbewerb erfolgreich zu sein, reicht ein Internetauftritt allein nicht mehr aus. Webanwendungen müssen einfach nutzbar und emotional ansprechend sein, um sich abzuheben. Sind sie das nicht, werden Nutzer und Kunden bisweilen sogar misstrauisch. Im Zweifelsfall wird die Qualität der Website mit Ihrem Produkt- und Serviceangebot gleichgesetzt, und es kann ein negativer Gesamteindruck entstehen. Man spricht dabei von der Usability der Gebrauchstauglichkeit der Website und der User Experience dem Benutzererlebnis. Bei der Usability geht es darum, ob man Produkte einfach und ohne Hürden benutzen kann. Bei der User Experience wird gefragt: Werden die Erwartungen an das Produkt bei der Benutzung erfüllt? War die Nutzung angenehm und die Gestaltung ansprechend? 1 1

2 Besonders bei kommerziellen Websites belegen zahlreiche Beispiele die positiven Effekte von Optimierungen der User Experience und Usability auf Umsatz, Neukundengenerierung sowie Kundenzufriedenheit und -bindung. Wird auf die Wünsche und Bedürfnisse der Anwender eingegangen, finden sie sich schneller auf der Webseite zurecht; Informationen werden besser gefunden und Produkte eher gekauft. Wie erreicht man gute Usability und User Experience? Für eine gute Usability gibt es weltweit anerkannte ISO-Normen und viele Faustregeln. Bei allen Normen und Regeln geht es letztlich darum, die Perspektive der Benutzer zu berücksichtigen. User Experience = Benutzererlebnis Wahrnehmungen und Reaktionen einer Person, die sich bei der Benutzung oder der erwarteten Verwendung eines Produktes, eines Systems oder einer Dienstleistung ergeben. (DIN EN ISO ) Dazu gehören emotionale Reaktionen, Vorstellungen, Vorlieben, Wahrnehmungen, Erwartungen und das Verhalten. User Experience wird beeinflusst von der Gestaltung, Funktionalität und den Leistungsmerkmalen eines Produktes. Ebenso können auch Vorkenntnisse und Eigenschaften des jeweiligen Nutzers eine Rolle spielen, sowie die Markenwahrnehmung oder der Kontext der Nutzung. Lohnt sich der Aufwand bei einer Website, mit der man auf ein Restaurant aufmerksam machen möchte oder über die ein örtlicher Handwerker sein Angebot präsentieren möchte? Ist es sinnvoll, Nutzungsanforderungen Usability = Gebrauchstauglichkeit Vor der Nutzung Erwartung zur Nutzung des Produkts Während der Nutzung Effektive, effiziente und zufriedenstellende Erledigung der Aufgabe(n) Nach der Nutzung Erlebte Nutzung: Emotionale Bindung oder Distanzbildung Ganz allgemein versteht man unter Usability, wie gut ein Produkt für eine bestimmte Zielgruppe für die Erreichung bestimmter Ziele geeignet ist: Usability (ISO ) Die Usability eines Produktes ist das Ausmaß, in dem es von einem bestimmten Benutzer verwendet werden kann, um bestimmte Ziele in einem bestimmten Kontext effektiv, effizient und zufriedenstellend zu erreichen. (DIN EN ISO ) Effektivität bezieht sich darauf, ob Ziele überhaupt erreicht werden können (z.b. Durchführung einer Bestellung in einem Onlineshop). Effizienz bezieht sich auf den zur Zielerreichung erforderlichen Aufwand (z.b. Zeitaufwand bei einer Online-Bestellung). Zufriedenheit betrifft die Qualität der Nutzung: Wird die Website als angenehm und vertrauenswürdig wahrgenommen? User Experience (ISO ) Darstellung in Anlehnung an: Darstellung in Anlehnung an zu spezifizieren, wenn es nur darum geht, kleine Webanwendungen wie einen Online-Terminfinder für einen Friseur zu entwickeln? Die Antwort ist: Ja! Man muss nur pragmatisch vorgehen. So geht s: 2 3

3 Einbeziehung der Benutzer Sie können nur eine gute Usability und User Experience erreichen, wenn Sie die Benutzer bei der Entwicklung oder Überarbeitung Ihrer Website einbeziehen. Daher müssen Sie zunächst ermitteln, welche Ihre tatsächlichen und angestrebten Nutzergruppen sind. Hier ein paar Beispiele für Benutzergruppen eines Onlineshops für Gartenmöbel: > > Privatkunden, die Möbel für ihre Terrasse oder ihren Balkon kaufen möchten > > Privatkunden, die Ersatzteile / Accessoires für ihre Gartenmöbel kaufen möchten > > Privatkunden, die klappbare/platzsparende Möbel für ihre Reise mit dem Wohnwagen kaufen möchten > > gewerbliche Kunden aus der Gastronomie, die Möbel für die Terrasse ihres Betriebes kaufen möchten Sortieren Sie die ermittelten Nutzergruppen nach Wichtigkeit, z.b. nach Bedeutung für den Umsatz, und beschreiben Sie sie. Nun sind Sie auf dem Weg, sich ein gutes Bild von den Benutzern zu verschaffen. Aber welche Anforderungen haben sie an die Website? Ermittlung von Nutzungskontext und Anforderungen Eine Website kann nur erfolgreich sein, wenn klar ist, welche Aufgaben mit ihr gelöst werden sollen, und wenn Sie die Anforderungen, die an die Website gestellt werden, konsequent aus Sicht der Nutzer betrachten. Sonst kommt es zu fehlenden oder überflüssigen Funktionen, wodurch Nutzer vergrault werden. Und bedenken Sie auch, was die Entwicklung von Funktionen kostet! Wenn diese Funktionen gar nicht benötigt werden, hätten Sie sich den Aufwand sparen können. Ermitteln Sie daher, welche Aufgaben die Benutzer Ihrer Website unter welchen Bedingungen lösen müssen, um ihr Ziel zu erreichen: > > Benutzer: Mieterin einer Wohnung mit Balkon > > Arbeitsmittel: Tablet-PC > > Umgebung: im Wohnzimmer am Esstisch > > Aufgabe und Ziel: Bestellung von Gartenmöbeln, die zur Größe des Balkons passen. Welche Informationen benötigt die Mieterin, um passende Möbel für ihren (kleinen) Balkon bestellen zu können? Testpersonen finden Wie findet man Testpersonen, um die Nutzergruppen zu repräsentieren? Das ist meistens gar nicht schwierig. Bei unserem Gartenmöbel- Beispiel könnten Sie in Ihrem Umfeld nach Personen suchen, die online einkaufen und sich vorstellen können, auch (Garten-)Möbel in einem Onlineshop zu bestellen. Drei bis vier Interviews sind bereits ausreichend, um mit den beteiligten Benutzern ein gemeinsames Verständnis zu entwickeln, was für Anforderungen von ihnen an die Website gestellt werden was muss die Website abbilden, was muss sie können? Sammeln und ordnen Sie die Ergebnisse, und Sie erhalten eine Übersicht über die Nutzungsanforderungen an Ihre Website. Aus unserem Beispiel lässt sich z.b. folgende Nutzungsanforderung ableiten: Der Benutzer muss erkennen können, welche Größe die Gartenmöbel haben. Jetzt können Sie die Nutzungsanforderungen an Ihre Website aus Sicht der Benutzer vollständig beschreiben. Das ist die Grundlage für die Entwicklung einer Gestaltungslösung, aber auch um später zu prüfen, ob und wie die Webseite die Anforderungen berücksichtigt. 4 5

4 Die Navigationsstruktur Aufgrund der Nutzungsanforderungen, die Sie gefunden haben, können Sie Gestaltungslösungen auf der Website entwickeln. Um ein gutes Gerüst für die Gestaltung zu schaffen, benötigen Sie eine strukturierte Übersicht über Inhalte und Funktionen, die für Benutzer erreichbar sein müssen. Hierzu gehören z.b. Produktkategorien, Serviceinformationen, Suchfunktion, Warenkorb, Impressum und Kontakt. Daraus wird auch die Navigationsstruktur abgeleitet, die auf der Website vor allem in Ihrem Menü abgebildet wird. Schauen wir auf die Produktkategorien aus unserem Gartenmöbel-Beispiel: Mit einer einfachen Tabelle können Sie prüfen, ob alle Produkte über die Navigationsstruktur übersichtlich angeordnet, einfach zu erreichen und logisch kategorisiert sind. Um einen Überblick über den Seitenaufbau und die Abfolge mehrerer Seiten während der Nutzung zu erhalten, sind z.b. Wireframes geeignet. (siehe rechtes Bild) Dabei handelt es sich um ein Gerüst, das auf einfache Weise in einer schematischen Anordnung zeigt, welche Elemente eine Webseite enthält. Prüfen Sie: Sind alle Anforderungen erfüllt? Dann geht es weiter mit dem Design. Tipp: Achten Sie bei der Entwicklung Ihrer Navigationsstruktur auf trennscharfe Kategorisierungen und sachliche Bezeichnungen. Vermeiden Sie die Verwendung von verschiedenen Bezeichnungen für den gleichen Inhalt. Eine günstige und einfache Möglichkeit, selbst Wireframes zu entwickeln, bietet die Software Balsamiq ( Design entwickeln Das Design baut auf den Wireframes auf. Sie stellen die Leitlinie für die Gestaltung und Aufteilung der Seiten dar. Zunächst sollten Logo, Farben, Schriften, Grafiken und Bilder aus Ihrem Unternehmensauftritt verwendet werden. Denn eine einfache Wiedererkennung schafft Vertrauen. Beachten Sie aber, dass nicht alle Designelemente von Geschäftspapieren oder Broschüren auf einer Website umsetzbar sind. So können z.b. die Farben Silber und Gold auf einem Bildschirm nicht dargestellt werden. 6 7

5 Designgestaltung: Das sollten Sie beachten! Achten Sie auf guten Kontrast zwischen der Schrift und dem möglichst einfarbigen Hintergrund. Verwenden Sie eine Schrift, die mit jedem Browser dargestellt werden kann aber nur eine. Mehrere Schriften erzeugen Unruhe. Verwenden Sie eine gut lesbare Schriftgröße, denn das Lesen auf Bildschirmen ist schwieriger als auf Papier. Schriftgrößen zeigen Bedeutung und Relevanz des Inhalts: Überschriften sollten aussagekräftig und größer sein als der zugehörige Text. Achten Sie auf das Textdesign: Aufzählungen, kurze Sätze, ausrei chender Zeilenabstand und Absätze erleichtern das Lesen. Verwenden Sie Farben, die man auf einem Bildschirm gut erkennen kann. Beispiel: farbige Hinterlegungen in einem hellen Blauton oder Verläufe sind auf vielen Bildschirmen gar nicht sichtbar. Fotos und Grafiken sollten nicht zu viele, kleinteilige Informationen erhalten. Ruhige und übersichtliche Abbildungen sind besser ge eignet, eine Aussage zu unterstreichen. Achten Sie bei der Bildauswahl auf inhaltlich genau passende Bilder, denn sie werden auch zur inhaltlichen Orientierung genutzt und dürfen nicht in die Irre führen. Versehen Sie Slideshows, Animationen und Videos mit Steuerungselementen. Benutzer möchten selbst entscheiden, welche Informationen sie ansehen. Viele Webseiten werden mit mobilen Endgeräten aufgerufen. (Zu) viele Bilder, Grafiken und Videos können die Ladezeiten erheblich verlängern und die Benutzer verärgern. Achten Sie darauf, dass das Design sich an verschiedene Bildschirmgrößen anpassen kann. Buttons und Links müssen einfach erkennbar sein. Zeigen Sie den Benutzern durch die Gestaltung, was angeklickt/angetippt werden kann. Beschriftungen von Buttons und Links sollten sachlich beschreiben, wohin sie führen. Fragen Sie in Formularen nur nach Informationen, die Sie wirklich benötigen. Zu viele und unnötige Eingabefelder führen zu Abbrüchen. Nicht vergessen: Auch Fehlermeldungen müssen gestaltet werden! Usability testen Es gibt viele Methoden, die Usability einer existierenden Website zu testen sei es bei Usability-Tests im Labor, in Gruppendiskussionen oder mithilfe von Online-Befragungen. In Usability-Tests werden Benutzer aus den vorher identifizierten Benutzergruppen typische Aufgaben gestellt, die mit der Webseite oder App gelöst werden sollen. Die Testbenutzer werden gebeten, ihre Empfindungen und Gedanken bei der Bearbeitung der Aufgabe mitzuteilen, und bei der Lösung der Aufgabe beobachtet. Zusätzlich können Fragen gestellt werden. So erfahren Sie, welche Schwachstellen und Verbesserungsmöglichkeiten es gibt. Hierfür muss die Website noch nicht ganz fertig gestellt sein, sollte aber bereits einen guten Eindruck von der Gestaltung und dem Nutzungsprozess vermitteln. Zurück zu unserem Gartenmöbel-Beispiel: Die Aufgabe könnte lauten: Es ist Frühling, und Sie möchten Möbel für Ihren 4-qm-Balkon bestellen. Sie haben sich überlegt, dass zwei Stühle und ein Klapptisch gut passen könnten, und möchte sie im Onlineshop für Gartenmöbel bestellen. 8 9

6 Das benötigen Sie für die Durchführung: Usability-Tests werden häufig in Test-Laboren durchgeführt, die über Aufzeichnungstechnik verfügen. Aber ein selbst durchgeführter Vor- Ort -Test mit einfachen Mitteln kann bereits zu guten Ergebnissen führen. Faustregel: Bereits bei 4 bis 5 Testnutzern können je nach Komplexität der Website 80 % der Usability-Probleme identifiziert werden. Für einen einheitlichen Ablauf des Tests benötigen Sie einen Testleitfaden. Er enthält die Beschreibung der Aufgaben und Fragen, die man den Benutzern stellen möchte. Hier ein paar Beispiele für Fragen: > > Sind die Navigationselemente und Funktionen einfach bedienbar und verständlich? > > Werden gesuchte Informationen schnell gefunden? Nach dem Usability-Test Fassen Sie die Interview-Protokolle zusammen und erstellen Sie eine Liste der erkannten Probleme und Schwachstellen. Ihre Ideen zur Beseitigung der Probleme können wahrscheinlich teilweise direkt umgesetzt oder wieder in einem Wireframe erfasst und gestaltet werden. Nach dem Usability-Test ist vor dem Usability-Test! Um zu prüfen, wie die umgesetzten Verbesserungsideen bei den Benutzern ankommen, können Sie sie erneut befragen. Sie werden sehen, es lohnt sich! Download aller BIEG-Leitfäden unter > > Wirken die Seiten übersichtlich? > > Welchen ersten Eindruck hinterlässt die Startseite? Wird auf einem Blick deutlich, welche Inhalte und Services zur Verfügung stehen? > > Sind Inhalte gut lesbar und verständlich? Nun benötigen Sie nur noch die Endgeräte, auf denen die Website getestet werden soll, einen Raum mit Internetverbindung, um die Website oder App zu öffnen, und zwei durchführende Personen. Eine Person geht mit dem Testnutzer die Aufgaben und Fragen durch. Eine weitere Person protokolliert das Interview. Wenn möglich, zeichnen Sie die Interviews mit einer Videokamera auf. Das erleichtert die spätere Auswertung, und Sie können dem Programmierer oder Webdesigner einfach zeigen, welche Probleme Sie erkannt haben. Über die Autorin Petra Jacob ist UXQB Certified Professional for Usability and User Experience. Seit 1999 ist sie im Bereich E-Commerce aktiv gründete sie u-concept und führt im ux-labor Usabilitytests für ihre Kunden durch. Sie berät Unternehmen bei der Optimierung ihrer Websites und Apps. Stand: Juni 2015 Petra Jacob u-concept & ux-labor 10 11

7 Usability und User Experience Usability und User Experience: Darunter versteht man die Nutzerfreundlichkeit einer Website und das Nutzererlebnis des Besuchers. Wer seine Usability und User Experience optimiert, gestaltet den Internetauftritt oder die App für den Nutzer verständlicher, bedienbarer und angenehmer. Wie Sie Ihre Website auch außerhalb des Usability-Labors verbessern können, erklärt Ihnen dieser Leitfaden. Impressum Herausgeber BIEG Hessen c/o IHK Frankfurt am Main Börsenplatz Frankfurt am Main Telefon 069 / Telefax 069 / info@bieg-hessen.de Das BIEG Hessen ist eine GbR und wird vertreten durch die Gesellschafter IHK Frankfurt am Main, IHK Hanau-Gelnhausen-Schlüchtern, IHK Fulda und IHK Offenbach am Main. Träger des BIEG Hessen Industrie- und Handelskammern: Frankfurt am Main Fulda Hanau-Gelnhausen-Schlüchtern Offenbach am Main Verantwortlich für den Inhalt Detlev Osterloh, Geschäftsführer, BIEG Hessen, IHK Frankfurt am Main Druck Daab Druck & Werbe GmbH, Reinheim Layout und Titelbild Birgit Dürr HERAUSGEBER BIEG Hessen c/o IHK Frankfurt am Main Börsenplatz Frankfurt am Main Telefon Telefax info@bieg-hessen.de