Frontend-Prototyping für eine bessere Usability

Usability ist die Basis für Conversions. Gute Usability herzustellen, geht heute viel einfacher und ist nicht nur Design-Profis vorbelassen. „Design ist how it works“, sagte Steve Jobs. Wie es funktioniert, kann man relativ zügig mit einem Klick-Prototypen herausfinden. Dazu braucht man vornehmlich Menschenverstand und gute Tools – die sind endlich da. Steve Krug sagt, mit 5 Testern (inklusive Ihnen selbst als Pre-Tester) haben Sie die schlimmsten Probleme gefunden und sind auf der sicheren Seite. Wie, zeigen wir Ihnen in diesem Artikel.

Den Begriff „Rapid-Prototyping“ kennen Sie vielleicht aus der Industrie oder Software-Entwicklung. Je schneller die Zeit tickt, desto rapider müssen Prototypen erstellt werden – egal, in welchem Bereich. Seien es 3D gedruckte Formen oder Oberflächen, die bedient werden wollen. Gerade mobile Apps und Web-Applikationen sollen für Nutzer intuitiv, selbsterklärend und übersichtlich sein. Was speziell mobile Apps mit einfachen Oberflächen vormachen, weil sie sich auf eine Aufgabe konzentrieren, wird auch für Web-Applikationen, Webseiten und alle erdenklichen Oberflächen beliebter. Denn die Aufmerksamkeitsspanne des Menschen ist und bleibt begrenzt – die Interaktionen mit Geräten werden immer kürzer, Geräte kleiner, die Welt lauter und voller.

Es gibt keinen Grund mehr, zuerst einen technischen Prototypen zu bauen, um zu „sehen“, wie eine Software funktioniert.

Häufig wurde ein „Prototyp“ mit einem Machbarkeitstest verglichen. Die Technik sollte etwas implementieren, damit die Idee überhaupt eine Form bekommt, benutzbar (usable) wird. Doch Programmierung ist teuer und gar nicht der einzige Weg, um etwas Essenzielles herauszufinden. Das Frontend-Prototyping ist eine wunderbare, günstigere Alternative, um eine Idee zu testen und anzufühlen bevor die kostspielige Schleife der Programmierung beginnt. Es gibt noch andere Vorteile.

Frontend-Prototyping – Machen Sie anfühlbar, worüber alle anderen reden

Zu allererst ist ein Frontend-Prototype eine sichtbare Motivation für alle Beteiligten im Team. Für den Kunden, für Sie, für die Entwickler und für das Marketing. Alle Seiten können schon etwas anklicken, bekommen Gefühl und Bild für das Produkt. Genau darum geht’s. Der Prototyp ist die erste Version Ihres Produkts – sei sie auch noch so einfach und flach. Ab da haben Sie das Produkt anfassbar – nicht nur im Kopf – und müssen es „nur“ noch verbessern.

Der Prototyp kann Ihr Tool für Nutzertests sein. Sie testen mit dem klickbaren, schlicht gestalteten Prototyp den Navigationsfluss, Verständlichkeit und Kontext (Das ist ein Button, aha, darauf steht „Bestellen“, okay.) und ob der Use-Case der Applikation gut herausgearbeitet wurde. Sie testen das Konzept. Die Optik verfeinern Sie später, viel später. Tipp: Trotzdem sollte der Prototyp nicht ranzig, liederlich oder hingerotzt aussehen. Da haben die vorgestellten Tools unterschiedliche Herangehensweisen. Manche brauchen die Anbindung an ein Grafik-Programm (und somit Kenntnisse derselben), andere nicht.

Noch ein Vorteil: Mit einem Prototyp müssen Sie Ihren Programmierern oder dem Dev-Team nicht mehr so viel erklären. Ihr Team kann ihn anklicken und wird gut verstehen, was sich hinter der Applikation und jedem einzelnen Screen verbirgt. Der Prototyp ist wie das zum Leben erwachte Pflichtenheft. So wie der Nutzer sich in seinen Erwartungen an gute Software entwickelt hat, haben sich auch die Methoden zur Software-Entwicklung verändert. „Agil“ (Lat: flink, beweglich) ist hier das schon leicht abgegriffene Zauberwort. Gültig ist es trotzdem und was könnte Agilität besser verkörpern als ein Prototyp im Test und der Entwicklung.

Agil und lean – ein Prototyp erfüllt mehrere Aufgaben in mehreren Bereichen

Er macht eine Applikation realistisch und für das gesamte Team sowie den Kunden benutzbar. Somit dient er als konkrete Diskussionsgrundlage und verlässt das Feld der Annahmen, Idee-Bubbles und idealisierter Wunschvorstellungen.

Ein Prototyp gibt außerdem ein Ausmaß für das Projekt an. Häufig wird Komplexität unterschätzt und gern in Dokumenten von einem Absatz zum anderen verschoben. Ein ernst gemeinter Prototyp ist eine Ernüchterung und eine Chance zugleich. Der Übergang von der ungreifbaren, erhobenen, virtuellen Idee zur handfesten Form ist immer mit Entscheidungen, mit Begrenzung und Reduktion verbunden. Und gleichzeitig rufen Begrenzungen und Reduktion Kreativität hervor. Die Hauptfrage ist: „Wie können wir es dem Nutzer noch einfacher machen?“. Die Lösung gibt den Weg vor – nicht die im Team propagierte Machbarkeit, die möglicherweise auf gewohnten Lösungen basiert. Wie soll etwas Neues entwickelt werden, wenn wir es uns, statt dem Nutzer, einfach machen?

Ist ein Prototyp ansehnlich und liebevoll angelegt, so können mit ihm User-Tests durchgeführt werden können. Damit wird die Idee für andere Menschen – zum Beispiel die konkrete Zielgruppe – erfahrbar. Hier kann Risiko minimiert werden, indem ein Konzept geprüft wird während es in der Entwicklung steckt. Willkommen in der Welt von lean. Schlank denken, noch schlanker ausdrücken und dann noch mal entschlanken auf das Wesentliche. Der Schöpfer des Kleinen Prinzen, Saint-Exupéry meinte: „Perfektion ist, wenn man nichts mehr weglassen kann.“ In Alltagssprech auch „Weniger ist mehr“. Nirgends merkt man es so intensiv wie in der Entwicklung eines eigenen Prototyps.

Schließlich – oder ganz zu Beginn – kann ein Prototyp für die Argumentation gegenüber Chefs, Geldgebern, Marketing und Akquise genutzt werden. Mit Hilfe des Prototyps wachsen die Chancen diese unterschiedlichen Positionen unter einen Hut zu bekommen. Wenn es mehr braucht: machen Sie Nutzertests und konfrontieren Sie das Entwicklungsteam mit konkreten Ergebnissen.

Nutzerzentriert denken

Heutzutage bemüht man sich, nutzerzentriert zu denken und bei dem Szenario zu bleiben, das dem Nutzer im Alltag oder bei der Arbeit begegnen könnte. Taxi hier und jetzt. Klarer Bedarf, klare Oberflächen, leicht zu testen. Ein Paradigmenwechsel: Microsoft & Co. konnten früher monatelang entwickeln, etwas auf den Markt werfen und hatten garantiert Nutzer, weil es keine ebenbürtige Konkurrenz gab. Auch Adobe brachte so seine Feature-Titanen Photoshop, InDesign und alle Mitglieder der Palette unter die Leute – zu horrenden Preisen. Heute ist das bis auf einige immer noch sehr spezielle Tools anders: Jeder kann eine Software in die Welt bringen und dabei gewinnt nicht die Anzahl der vorhandenen Features, sondern die zum Szenario des Nutzers am besten passende Software. Jetzt wissen Sie, warum es im App-Store so von Apps wimmelt. Wir leben im Zeitalter der Alternativen, der Auswahl – moderne Nutzer wissen das und lassen sich nicht mehr abspeisen.

Designer machen nicht einfach „schön“. Stattdessen durchdenken sie die Nutzung aus Sicht des Nutzers von Anfang bis Ende konsequent durch. Und stellen unbequeme Fragen

Die gute Nachricht: Sie müssen weder malen können, noch tolle Farbkombinationen zusammenstellen. Das ist nicht „Design“. Design ist die Frage nach dem „Wie“. Und das in einer Kaskade. „Wie kann der Nutzer am einfachsten, am schnellsten, am bequemsten sein Ziel erreichen?“ Als Interaktionspartner dient ihm beispielsweise ein Screen. Screens haben unterschiedliche Größen und können dadurch unterschiedlich tief Inhalte, Informationen, anzeigen. Je kleiner der Screen, desto einfacher und kürzer sollte die Information sein. Größere Screens erlauben komplexere Darstellungen. Passt häufig zum Use-Case: Kaum jemand bewegt sich mit einem großen Monitor ums Handgelenk durch die Stadt oder schaut den ganzen Tag im Office auf die Apple Watch. Die Gerätetypen geben das Szenario vor, weil sie schon für das Szenario entwickelt wurden.

Microinteractions – in schnellen Zeiten schnelles Feedback und Erfolgserlebnis geben

So häufig wird das Vorhandene wieder neu benannt, damit es mit einem anderen Wort noch mal Aufsehen erregen und sich in das Bewusstsein einer immer breiteren Masse einnisten kann. Das machen zum Beispiel „Microinteractions“. Sie kennen sie! Die älteste digitale Microinteraction ist der blinkende Cursor in der Console oder in Word, der bei Eingabe oder nicht die ganze Zeit blinkt und sich zurückmeldet: „Ich warte auf Deine Eingabe.“ Und signalisiert dem Nutzer seine Bereitschaft. Ein neueres, sehr bekanntes Beispiel ist das Autocomplete-Suchfeld in der Google-Suchmaske, entwickelt von Kevin Gibbs.

Je schneller die Zeit, desto kürzer die Aufmerksamkeit, desto kürzer die Interaktion, desto eher das Feedback. Die Bereitschaft der Nutzer auf etwas zu warten hat in den letzten Jahren abgenommen.

Essenzen für das Frontend-Prototyping

Ein gelungenes Interface ist in erster Linie eine Frage der Anordnung und Klarheit. Eine angeordnete und leicht nachvollziehbare Oberfläche ist einfach angenehm. Überblicken zu können, heißt Kontrolle zu behalten. Der Nutzer wünscht sich, Kontrolle über die Website oder Applikation zu haben – Rätselraten raubt mentale Energie und als Schöpfer eines Frontends wissen Sie nie, wie viel Ausdauer jemand mitbringt. Deshalb sollte ein massentaugliches Frontend für diejenigen funktionieren, die am wenigsten Bereitschaft haben, Energie aufzubringen etwas herauszufinden. Wenn sie diese Menschen in Ihren Tests ernst nehmen und nicht als Störenfriede wahrnehmen, dann können Sie und Ihr digitales Produkt unglaublich davon profitieren. Eine Oberfläche steht zu Diensten und vermittelt dem Nutzer das durch absolute Unkompliziertheit.

Der Fokus der meisten Applikationen, am besten zu sehen bei mobilen Apps, liegt auf Interaktion, also auf Aktion, nicht auf Information. Ausgenommen sind davon natürlich eBook-Apps, Newsreader oder Ähnliche. Mit der Aktion des Nutzers wird ein klares Ziel verfolgt: Mails checken, Fahrzeit nachsehen, Rechnung stellen, etwas rechnen, anrufen etc. Die Information ist häufig ein begleitendes Element, das sich im Feedback oder einem Ergebnis zeigt – beispielsweise die Ergebnisseite einer Suchanfrage. Die Anfrage selbst, die Aktion, fand jedoch davor statt. Und nur eine vollendete Suchanfrage kann überhaupt Ergebnisse bringen. Fokussieren Sie sich also auf die Aktion des Nutzers.

Die Oberfläche bemüht sich immer, die Aufmerksamkeit des Nutzers zu binden – durch Microinteractions. Allerdings, wie das Wort micro impliziert, kurz. Die Aufmerksamkeit des Nutzers wird an eine kurze Interaktion gebunden, in der der Nutzer einen Schritt weiterkommt – zum Beispiel das Ausfüllen eines Feldes. Die Oberfläche ermöglicht ihm, dann fortzufahren, wenn eine Teilaufgabe vollendet ist oder der Nutzer wieder Aufmerksamkeit bereitstellt. Der Preis unser heutigen Mobilität ist die Fragmentierung unseres Alltags in immer kürzere Abschnitte.

Geben Sie dem Nutzer immer das Gefühl, dass er die Kontrolle hat – auch dafür sind Microinteractions hervorragend geeignet. Lang empfundenes Warten entzieht sich der Kontrolle des Nutzers genauso wie unerwartetes Verhalten seitens der Applikation. Sehr anstrengend ist es für Menschen, wenn sie auf ein Interaktionselement gedrückt haben aber nichts passiert. Häufig beginnt dann ein Sturm von wiederholten Eingaben oder Klicks, der nur verursacht, dass das System diesen Fall neben seinem ersten Bug auch noch managen muss. In diesem Fall ist die Qualität und Rückmeldung für die Kommunikation mit dem Nutzer essenziell. Ein Beispiel: Ihr Zug kommt zu spät oder fällt aus. Die Bahn gibt Ihnen am Gleis Bescheid „Der Zug ist verspätet“, haben Sie wahrscheinlich schon selbst bemerkt. Das wertvollere Feedback wäre: „Ein nächster Zug wird in 20 Minuten bereitgestellt.“ Vielleicht ärgern Sie sich, aber für das Problem gibt es bereits eine Lösung. Ihr Vorhaben findet verspätet statt, aber es findet statt – die Kontrolle ist wieder zurück bei Ihnen.

Das Aussehen der Interaktionselemente verrät etwas über ihre Aufgabe und ihr Verhalten. Und das je nach Medium. Ein Beispiel im Kontext mobiler Apps: Sehen Sie sich die Guidelines der Plattform-Anbieter Apple, Google, BlackBerry, Microsoft an, um plattformkonform zu bleiben und das Erlernte aus anderen Apps in Ihrer App wiederzuverwenden – einfaches Beispiel ist das Scrollen. Es wäre eigenartig, wenn man eine Liste in Ihrer App nicht mit dem Finger scrollen

könnte, sondern irgendwelche Buttons mit Pfeilen nach oben und unten an der Seite drücken müsste. Auf einem Touch-Screen fassen Menschen Elemente direkt an.

Das Design einer Applikation steht nicht im Vordergrund, sondern unterstützt die Interaktion. Form, Größe und Farbe erfüllen keinen Selbstzweck, sondern sind auf eine bessere Performanz des Nutzers ausgerichtet.

Wie anfangen? Beim Kernnutzen!

Schön, wie fangen Sie an? Wichtigste Frage: Was ist das Hauptfeature der Applikation? Ohne welches Feature würde Ihre Applikation keinen Sinn machen? Beispiele: Taschenrechner oder Zahleneingabe und Operationen, Taxi-App ohne die Abholposition, Wetter-App ohne Wetter-Prognose (das aktuelle Wetter sieht man ja), Banking-App ohne Buchungen und Kontostand und so fort. Beginnen Sie damit, diesen Kernnutzen, das Killer-Feature, einmal von Anfang bis Ende in einem Prozess abzubilden. Die zu erfüllende Aufgabe einmal durch. Das kann im Bereich Web genauso gut ein Kauf, ein Download sein.

Unser Tipp: Auf Papier. Papier ist dem Menschen das älteste abstrakte Medium und es kann Gedanken wunderbar aufnehmen, gleichzeitig reagiert es wie ein Spiegel und Filter. Die eigenen Ideen auf Papier zu sehen, ist der erste Schritt der Konkretisierung und Schöpfung. Skizzieren Sie, geben Sie der Oberfläche eine klare Form und probieren Sie zeitnah das Prototyping auf dem Gerät aus, für das Ihre Applikation gedacht ist – es öffnet Ihnen die Augen schneller als gedacht. Die gezeichneten Screens machen Sie einfach klickbar. Sie werden merken, wo die Reise hingeht und können sich nun steigern, indem Sie den Prototypen immer feiner, immer schicker machen. Alle Ressourcen dafür sind im Web vorhanden.

Moderne Frontend-Prototyping-Tools für Web und App Überblick

  • Pop von Marvel: https://marvelapp.com/
  • Proto.io: https://proto.io/
  • Prott: https://prottapp.com/ –
  • UX Pin: https://www.uxpin.com/
  • Axure RP: https://www.axure.com/
  • Balsamiqe: https://balsamiq.com/
  • Flinto: https://www.flinto.com/mac
  • Framer: https://framer.com

About The Author

Karolina
Liebt es zu schreiben und die digitale Welt zu beobachten. Mag Design-Driven Prototyping und Entwicklung. Karolina Schilling, studierte Dipl.-Ing. für Medientechnik (FH) ist Hybrid aus den Bereichen UX-Design und Technik. Ihr Fokus liegt beim Nutzer und wie dieser auf einer Oberfläche zufrieden sein Ziel erreicht – dazu zieht Ihr ganzes Entwicklungs-Team an einem Strang. In Workshops, Seminaren und Kundengesprächen gibt sie dieses Wissen weiter und führt Unternehmen zu erfolgreichen digitalen Produkten.

No Comments

Leave a Reply