Prototyping im Webdesign

14.05.2019 | Patrick Bahr | Design, Webdesign
blog-prototyping-kv

Bei unserer Arbeit als Webdesigner kommen wir täglich mit neuen Möglichkeiten, Anforderungen und Ideen in Berührung. Durch die immer vielfältiger werdenden Geräte (vom Desktop-PC bis zur Smartwatch) und die unzählig vielen Displaygrößen und Eingabemethoden (z. B. per Spracherkennung oder Gestensteuerung) wird das Designen von digitalen Produkten immer anspruchsvoller.

Konzeption und Design einer Webanwendung

Mit jedem neuen Gerät und jeder Innovation ändert sich auch das Verhalten der User, für die die Webangebote letztendlich gestaltet werden. Um eine bestmögliche User Experience zu ermöglichen, sind Daten über das Verhalten von echten Nutzern eine der wichtigsten Informationen, die im Gestaltungsprozess genutzt werden sollten. Ohne Infos zu Zugriffen, Absprungraten, Verweildauern etc. tappt der Gestalter im Dunkeln und kann nur erahnen, wie der Anwender das Angebot nutzen wird. Neben der Konzeption und Gestaltung einer Webanwendung ist es im Projektverlauf ebenso wichtig, nicht nur dem Kunden, sondern auch den Entwicklern einfach erklären zu können, wie ein Konzept konkret umgesetzt werden soll. Von starren Layouts lässt sich die gewünschte Usability in der Regel nur schwer ableiten.

Grundsätzlich stehen Designer immer vor der großen Herausforderung, die Wünsche aller Beteiligten, die Trends und die Nutzerinformationen in ihren Designs zu berücksichtigen. Das jedoch erfordert eigentlich das perfekte Briefing, welches alle Anforderungen schon zum Beginn beinhaltet. Aber das ist extrem teuer und eigentlich nahezu unmöglich zu bewerkstelligen, da sich zum Projektstart die wenigsten das Projekt in Gänze vorstellen und die Anforderungen zu diesem Zeitpunkt meistens noch gar nicht klar definiert werden können – und eigentlich auch nicht sollten.

Die Retter: Prototypen

Hierbei können uns Prototypen helfen. Egal ob schnell und einfach mit einem Stift auf Papier gekritzelt oder dem Endergebnis schon täuschend nahe in Photoshop erstellt – mit Prototypen kann herausgefunden werden, ob ein erdachtes Konzept funktionieren kann und zudem definiert werden, wie bestimmte Zustände, Animationen, oder Übergänge aussehen werden.

Bei komplexeren Projekten und Anwendungen ersetzt ein Prototyp sehr statische und aufwendige Pflichten- und Lastenhefte.

Je früher die Einbeziehung von Prototypen in den Projektablauf geschieht, desto mehr Iterationen treten auf und Fehler werden früher erkannt, was letztendlich Kosten und Nerven spart. Prototypen können mit Hilfe von Testpersonen auf ihre Tauglichkeit überprüft werden oder geben dem Gestalter und somit auch dem Kunden schon bei der Erstellung wichtige Erkenntnisse. In diesem Status kann man noch kurzfristig auf Änderungswünsche eingehen, vieles testen und ausprobieren.

Wir haben in der letzten Zeit unzählige Methoden und Tools getestet, von denen sich nur eine Handvoll als praktikabel herausgestellt hat. Viele Tools sind noch längst nicht im Tagesgeschäft nutzbar, da sie nicht stabil laufen oder nur wenige Dateitypen unterstützen.  Die besten Methoden und Tools werde ich im Folgenden kurz vorstellen.

Welche Art von Prototyping für welche Anforderung?

Zunächst einmal bietet kein Tool die Lösung für jedes Problem. Vielmehr muss aus der Fülle an Möglichkeiten das Richtige für eine bestimmte Aufgabe ausgewählt werden.   Vorweg – ein Prototyp ist nicht das finale Produkt und muss deshalb auch nicht perfekt aussehen. Ein sehr einfach gehaltener Prototyp kann in der passenden Situation zielführender sein als ein Prototyp, der dem Endprodukt schon zum Verwechseln ähnlich sieht. Wenn schon sehr detailliert zu gestalten begonnen wurde, tut es viel mehr weh, wenn das Konzept noch einmal über den Haufen geworfen wird. Und befindet sich ein Design erst einmal in der Entwicklung, sind grundlegende Änderungen meist nur mit einigem Aufwand umsetzbar.

Papierprototypen (Paper Prototyping)

Am schnellsten zu einem Ergebnis kommt man wohl mit einem Papierprototypen. Stift und Papier liegen meist noch vom Skizzieren der Idee bereit. Diese helfen, erste Ideen und grobe Konzepte zu sortieren und visualisieren. Ohne sich mit technischen Hilfsmitteln beschäftigen zu müssen, können unkompliziert verschiedene Zustände, Klickpfade oder Menüs grob angedacht werden. Hierbei können auch mehrere Personen ohne jegliche Vorkenntnisse zusammenarbeiten und das für alle am besten funktionierende Konzept zusammenfügen. Wenn alles auf dem Tisch liegt, kann meist auf einen Blick erkannt werden, ob das Gesamterlebnis funktioniert oder noch an der einen oder anderen Stelle geschliffen werden muss. 

Der größte Nachteil allerdings ist, dass man nichts wiederverwenden kann und jede Skizze wieder neu zeichnen muss. Auch Änderungen lassen sich nicht mehr gut in den bestehenden Papierprototypen integrieren.

Klickbare Prototypen 

Einen Schritt weiter geht man mit Marvel (www.marvelapp.com). Hier können die Skizzen direkt mit der Smartphonekamera fotografiert und mit klickbaren Flächen versehen werden – was auch am Desktop funktioniert. So bekommt man schon zu diesem frühen Zeitpunkt - und nicht erst während der eigentlichen Entwicklung - einen realistischeren Eindruck, wie der Klickpfad später aussehen wird. Seitenübergänge können zudem mit einfachen Animationen versehen werden.

Aber auch große und sehr komplexe Anwendungen, mit all ihren Anforderungen und Interaktionen, können prototypisch mit sogenannten Wireframes definiert werden. Diese Wireframes etablierten sich als eine einfache visuelle Methode, welche es erlaubt mit skizzenähnlichen Formen interaktive Anwendungen zu konzipieren. Diese wiederum können schnell programmiert und mit Realdaten befüllt werden. Daraus ergeben sich sogenannte MVPs (Minimum Viable Product), welche sehr früh unter realen Bedingungen getestet und bewertet werden können. Das endgültige Design wird erst dann umgesetzt, wenn sich der HTML-Prototyp als verständlich und intuitiv erweist.

blog-prototyping-video

Realistische Prototypen

Seit einiger Zeit sprießen auch unzählige Prototyping-Tools aus dem Boden, die es sich zum Ziel gemacht haben, alle Anforderungen in einem Tool abzudecken. Mit Webflow (www.webflow.com) zum Beispiel können digitale Produkte wie Apps oder Websites responsive gestaltet werden, Übergänge und Hover-Effekte definiert und teilweise sogar der Code ausgegeben werden.

Bei kleinen Projekten wie Landingpages kann dieses Tools wirklich nützlich sein, da man mit einer Anwendung von der Gestaltung bis zur Ausgabe des Codes alles abbilden kann. Bei größeren Aufgaben stößt man dann aber irgendwann an eine Grenze. So schmälern auch fehlende Funktionen wie Drag & Drop, oder sehr beschränkte Möglichkeiten auf Übergänge und Animationen Einfluss zu nehmen, die Freude beim Benutzen. Dennoch ist "Webflow" ein großer Schritt in die richtige Richtung.

Aufwendige Animationen und Apples Keynote

Ein junges, aber mächtiges Tool, welches bei Animationen und Übergängen meiner Meinung nach die Nase vorne hat, ist Principle (www.principleformac.com). Für OSX entwickelt passt es sich perfekt in die Apple-Umgebung ein und hat auch die Anmutung von systemeigenen Anwendungen wie Keynote. Animationen und Driver können präzise gestaltet werden, ebenfalls können sehr viele mobile Gesten wie Touch, Hold, oder Swipe verwendet werden. Mit der kostenlosen App für iOS ist es zudem einfach, den Prototypen auf dem iPhone zu testen. Leider gibt es noch keine Unterstützung für Videos oder Vektorgrafiken, aber es hat sich schon eine rege Community auf Facebook gebildet, auf der auch die Entwickler aktiv sind.  Zwar wurde es eigentlich nicht zum Prototyping konzipiert, aber trotzdem ist man mit Keynote, der Präsentationsanwendung von Apple, unglaublich schnell bei der Erstellung von Animationen und Übergängen eines bestehenden Designs. Klickbare Flächen sind unkompliziert erstellt und der Prototyp kann auch auf dem iPad und iPhone mit der Keynote App verwendet werden.

Fazit

Obwohl es mittlerweile unzählige Prototyping-Tools und Lösungen gibt, ist das Einfachste und Effektivste gerade zu Projektbeginn aus meiner Sicht immer noch das Prototyping mit Stift und Papier. Wenn dann später in der gewählten Designsoftware (Sketch, Adobe Photoshop, Affinity Designer) detaillierter gearbeitet wird, kann mit Keynote schnell ein klickbarer Prototyp mit Übergängen und Animationen erstellt werden. Bei komplexen Animationen stach Principle als besonders leistungsfähig heraus.

Bei größeren Softwareprojekten arbeiten wir zum Erstellen von interaktiven Prototypen in Sketch und führen diese dann nach Invision über. In Invision können mehrere Personen (neben Designern und Entwicklern theoretisch auch der Kunde) auf diese zugreifen, sich durchklicken und gegebenenfalls kommentieren.

mitarbeiter-patrick-bahr-portrait
Geschrieben von
Patrick Bahr
zur Übersicht
Diese Website verwendet Cookies

Wenn Sie der Cookie-Nutzung zustimmen, können wir unsere Inhalte nach Ihren Bedürfnissen gestalten.
Jegliche Auswertung erfolgt anonymisiert. Mehr Informationen über Cookies und die Option, der Cookie-Verwendung zu widersprechen enthält unsere Datenschutzerklärung.

Verstanden & Akzeptiert
Mehr Infos