• Facebook
  • Google+
  • Twitter
  • XING
30.08.2015

Paper Prototyping, um Zeit und Geld zu sparen: die Mozilla-Fallstudie

Low-Fidelity Nutzertests mehrerer Iterationen zeigten schnell, welche Elemente der Support-Website von Mozilla für Firefox-Nutzer am besten funktionieren.

Mozilla Redesign Papier-Prototyp

 

by Susan Farrell (deutsche Übersetzung) - 30.08.2015

 

Wir befürworten oftmals einen parallelen und iterativen Designvorgang, um die mögliche Design-Vielfalt besser zu sondieren, weil wir dadurch eine viel bessere User Experience sicherstellen können. Eine günstige Möglichkeit, diese Art des Design-Prozesses zu implementieren, ist das so genannte Rapid Paper-Prototyping. Paper Prototyping ist nicht nur geeignet, um Designs schnell weiterzuentwickeln und es somit den Designern zu ermöglichen, ihre besten Produkte mit minimalen Investitionen zu finden – es ist auch effizient, unterhaltsam und einfach zu erlernen.

In diesem Artikel zeigen wir Ihnen, wie Mozilla Paper Prototyping gemeinsam mit Nutzerforschung und Data-Mining angewendet hat, um das UX-fokussierte Redesign eines wichtigen Teils der Website schnell voranzutreiben. (Ein früherer Artikel zeigte bereits auf, wie dieses Redesign zu einer hohen Investmentrendite führte.)

Falls Ihnen jemand sagt, dass Design-Iterationen Ihren Terminplan durcheinanderbringen oder dass Nutzertests zu aufwändig sind, zeigen Sie der Person diesen Artikel, da für einige der Prototypen in 2 Wochen 7 Versionen erstellt wurden. Die Nutzertests, welche bereits stattfanden bevor der HTML-Editor hervorgeholt wurde, waren günstig und zeigten, welche alternativen Designs am besten funktionierten.

Die Iterationen

Eines der wichtigsten Ziele des Redesigns von Mozilla war es, die Auffindbarkeit von Informationen zu verbessern, damit Nutzer benötigte Informationen schnell finden können. Ein zentrales Element des Erfolgs war es, die Anzahl der Fragen in den Support-Foren zu reduzieren.

Landing Pages mit Produkthilfe-Inhalten waren die wichtigsten Einstiegspunkte der Support-Website, da sie über das Hilfe-Menüs aufgerufen werden konnten. Die am häufigsten aufgerufene Seite der Support-Website führte so zu zahlreichen nützlichen Informationen. Das Design hatte allerdings zur Folge, dass zu viele Nutzer im Forum landeten und dort ihre Fragen stellten. Auf der Startseite wurde zwar auf über 30 Artikel verlinkt, falls Nutzer allerdings nach Informationen über ein nicht erwähntes Problem suchten, war eine manuelle Suche die einzige Möglichkeit, um Hilfe zu erhalten. Um das verbessern zu können, sollten Nutzer nun einen Pfad wählen können, der mit ihrem Problem zusammenhängt, und jene Artikel finden, die ihnen weiterhelfen.

Landing Page der Mozilla Support Site vor dem Redesign

Die Hilfe Landing Page von Firefox vor dem Redesign

Obwohl es keine eindeutige Antwort auf die Frage der flachen vs. tiefen Hierarchien gibt, zeigt unsere jahrelange Erfahrung im Bereich der Nutzerforschung, dass Menschen von zu vielen Auswahlmöglichkeiten leicht überfordert werden. Wenn Nutzer sofort auf das richtige Element klicken, schließen Sie ihre Aufgabe mit 3-mal größerer Wahrscheinlichkeit erfolgreich ab.

Mit diesem Hintergrundwissen konzentrierten wir uns bei der ersten Iteration des Designs auf die Beschränkung der Auswahlmöglichkeiten. Das neue Design ermöglichte es, entweder mit der Aufgabe oder mit einem Produkt bzw. Service zu beginnen, und enthielt 5 häufig gesuchte Links in einem Kästchen in der unteren linken Ecke der Seite. Diese individuellen Aufgabenkategorien (Grundlagen, Installation, Schutz, Personalisierung und Reparatur) ermöglichten es, die benötigten Dinge zu finden, oder schnell festzustellen, dass die Informationen nicht vorhanden sind.

Redesign Mockup Mozilla Support Website

Die erste Version des Paper Prototyps für die Mozilla Support Startseite: Nutzer konnten mit Aufgaben (1), Produkten oder Services (2) beginnen bzw. ein Beliebtes Thema wählen (3).

Die Designer erstellten die Prototypen mit Hilfe von OmniGraffle, danach wurden sie auf Tabloid-Blätter gedruckt und zugeschnitten. Da kein Code geändert werden musste, ermöglichte uns diese Prototyping-Methode, während der Tests schnell Designänderungen vorzunehmen. Firefox-Nutzer halfen dabei, das Design schnell in Richtung einer besseren Usability weiterzuentwickeln, da sie uns erlaubten, sie bei der Suche nach Antworten auf wichtige Fragen zu beobachten. Wenn sie steckenblieben oder verwirrt waren, veränderten wir das Design.

In dieser frühen Designphase konzentrierten wir uns nicht auf grafische Aspekte oder Layout-Probleme, sondern versuchten nur, herauszufinden, welche Auswahlmöglichkeiten auf jeder Seite angezeigt werden sollten, und die Verständlichkeit von Bezeichnungen zu beurteilen. Manche dieser Elemente wurden letztendlich in anderen Interaktionswidgets, wie Menüs oder Akkordions, präsentiert.

In einer späteren Iteration des Designs, die nachfolgend zu sehen ist, wurden die Aufgabengruppierungen der Hilfematerialien unter die Produkte verschoben – in die darunterliegende Schicht der Nutzeroberfläche. Ein Grund dafür war, dass nicht alle Aufgaben für alle Produkte und Services zur Verfügung standen, weshalb es diese Anordnung ermöglichte, gekonnt mit der notwendigen Unterscheidung umzugehen. Um Nutzer nicht zu überfordern oder zu verwirren, entschieden wir uns auch für die Progressive Disclosure,  die verschiedenen Mozilla-Produkte wurden jetzt in einem geschlossenen Akkordion-Menü verborgen.

Redesign Mockup Mozilla Support Website

Ein späteres Iterationsdesign der Support-Startseite: Nutzer können eine Aufgabe (2) wählen oder die Software-Zeile (1) öffnen, um zuerst ein Produkt oder Service auszuwählen. Wenn jemand auf die Frage in der Mitte klickte, zeigten wir der Person ein anderes Blatt Papier, das gleich aussah, dessen mittlerer Bereich allerdings geöffnet war (vergleichbar mit dem vorhergehenden Screenshot).

Den Nutzern gefielen die großen Icons (2) dieser Iteration, allerdings wurden sie vom Text mancher Auswahlmöglichkeiten verwirrt (3): „Mitmachen: Wie Sie anderen helfen können“ (zu allgemein) und „Feedback: Senden Sie uns Ihre Vorschläge über Firefox-Input“ (zu spezifisch). Wir testeten mehrere andere Phrasen, bis wir die Formulierungen fanden, die am besten funktionierten.

Anmerkung zum Texten für das Internet: Im Rahmen unserer Forschung wollten wir herausfinden, wie viele (bzw. wie wenige) Informationen angezeigt werden müssen, damit Nutzer die wichtigsten Dinge schnell und einfach finden können – immerhin lautet eines der wichtigsten Prinzipien des Lesens auf Bildschirm „weniger ist mehr“. Auf einem Bildschirm zu lesen, ist wesentlich schwieriger, als das Lesen auf Papier – und die Leseschwäche ist und bleibt eine Herausforderung. Da Menschen Texte im Normalfall zuerst überfliegen, anstatt sie sofort zu lesen, werden weniger Wörter beim Lesen im Internet als informativer wahrgenommen und prägnantere Seiten werden als besser nutzbar eingestuft. Da die Besucher der Mozilla-Website alle Sprachen der Welt sprechen, wollten wir auch die Übersetzung der Begriffe und die Konzeptlokalisierung so einfach wie möglich gestalten.

Nach der Paper Prototyping Testsitzung erstellten die Designer die nächste Version in HTML. Dieses Design verwendete starke Gruppierungen und Hintergrundfarben, um zwischen Aktivitäten und Informationstypen zu unterscheiden. Es war immer noch etwas zu komplex, um sich problemlos anzupassen, weshalb es während der Implementierung vereinfacht wurde, als Produkte, Services und Aufgaben hinzugefügt wurden.

Redesign Mockup (HTML) Mozilla Support Website

Ein frühes HTML-Design der Mozilla Support Startseite: Obwohl es sich eindeutig um eine High-Fidelity Darstellung handelt, sollte beachtet werden, dass die früheren Low-Fidelity Versionen (oben abgebildet) für Usability-Tests zahlreicher Designfragen ausreichen.

Das endgültige Design beginnt mit der Produktauswahl und zeigt danach – nach dem ersten Klick - die aufgabenbasierte Navigation an, was den Prinzipen der progressiven Offenlegung der Information entspricht. Ausserdem wurden mehrere Teilnahmemöglichkeiten unter einem Button mit dem Text Als Freiwilliger zur Mozilla-Hilfe beitragen zusammengefasst. Dieser Einstiegspunkt ermöglicht es Nutzern, ihr generelles Interesse an einer Open-Source Mitarbeit zu bekunden. Wie genau das möglich ist, erfahren Sie in untergeordneten Schichten, wo weitere Auswahlmöglichkeiten und Erklärungen angezeigt werden können. 

Finales Design nach dem Redesign der Mozilla Support Website.

Die Mozilla Support Startseite, die nach dem Redesign-Projekt veröffentlicht wurde. 

Die Mitarbeiter von Mozilla überwachen die Interaktion mit der Website ständig, weshalb sich das Design und die Inhalte der Support-Website basierend auf diesen Datenanalysen weiterentwickeln werden.

Gewonnene Erkenntnisse

  • Häufige Änderungen sind besser, während Prototypen getestet werden. Häufige Iterationen geben jeder Designänderung mehr Zeit vor mehr Nutzern, was eine stärkere Weiterentwicklung ermöglicht. Firmeneigene Teams sollten jede Woche einige neue Designs testen.
  • Testen Sie alternative Designs frühzeitig, damit die besten Designkomponenten auf weniger Seiten verwendet werden, während die Tests fortschreiten.
  • Seien Sie konsistent, was Fidelity, Grösse und Farbraum betrifft. Die Präsentation einiger High-Fidelity Screenshots von Elementen der Nutzeroberfläche funktionierte nicht gut, da die Farben auf vorwiegend schwarz-weißen Seiten zu viel Aufmerksamkeit auf sich lenkten.

Wir möchten uns bei Mozilla dafür bedanken, dass wir diese Erfahrung mit der UX-Community teilen dürfen.

Das UX-Team

  • Susan Farrell, Senior User Experience Spezialistin, Nielsen Norman Group. Susan führte die Forschung durch, übernahm die Datenermittlung, analysierte Daten und gab Empfehlungen für Designänderungen ab 
  • Crystal Beasley, Produktdesignerin, Mozilla. Crystal leitete das Projekt, koordinierte es mit den Mitarbeitern von Mozilla und spielte den Computer während der Paper Prototyping Forschungssitzungen.
  • Bram Pitoyo, Web User Experience Designer, Mozilla. Bram designte Aufgabenfluss und Prototypen und überwachte die Veränderungen des Interaktionsdesigns der Website. Er testete auch die alte Informationsarchitektur, damit wir die Resultate mit jenen der Tests der vorgeschlagenen neuen Informationsarchitektur vergleichen konnten.

© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.

Kommentare auf diesen Beitrag

    Keine Kommentare

Kommentar hinzufügen

Die mit * gekenzeichneten Felder sind zwingend auszufüllen