Was du als angehender UX Designer beachten solltest, bevor du deine Idee zeigst: Die Phasen der Erstellung eines Prototypen hängen von deiner Erfahrung, deinen Tools, von der Innovation der App und von den Menschen und deren Fachkenntnis ab, denen du deinen Prototyp zeigen wirst. Vor allem, um den letzten Punkt soll es gehen, da du als UX Designer immer wieder dem (ungefragten und gefragten) Feedback anderer Leute ausgeliefert bist. Und eines Tages nicht mehr „ausgeliefert“ sein sollst.
Wenn du dir der Bedeutung eines Prototyps bereits klar bist, dann lies weiter. Wenn du noch besser verstehen willst, warum ein Prototyp das ganze Projekt zum Erfolg oder zum Scheitern bringen kann, dann lies diesen Artikel 7 Gründe, warum Rapid Prototyping Projekte bis zu 50% effizienter macht zuerst.
Arten und Aufgaben von Prototypen für UX Designer
Wenn du einen Prototyp entwickeln willst, solltest du zuerst überlegen, zu welchem Zweck du ihn brauchst und wem du ihn zeigen wirst. Ein Prototyp für den technischen Leiter, das Dev-Team, die Marketing-Abteilung oder Test-Kunden hat unterschiedliche Ausprägungen und Schwerpunkte.
Fangen wir mal von vorn an. Und zwar mit den Prototypen-Arten. Den Prototypen-Typen…
Skizzen und Storyboards
Skizzen zeigen handgezeichnete Screens, das Storyboard zeigt mehrere handgezeichnete Screens, die miteinander verbunden sind. Skizzen helfen dir dabei, erst einmal den Ablauf im Groben und Ganzen zu besprechen und erste Ungereimtheiten aufzuspüren. Ein Gefühl der Nutzung geben sie noch nicht, da sie sehr grob sein können und der Ablauf nicht erfahrbar, also auf Papier nicht erklickbar, ist.
Wem zeigen? KollegInnen, Programmierern, Menschen, die selbst in diesem Bereich arbeiten. Auf dieser sehr groben Darstellung deiner Idee geht es eher um das ausmaß der App, um die Flows, darum ein Gefühl zu bekommen, was alles noch ausgearbeitet werden will. In meiner Erfahrung sind diese Art Skizzen nicht für Menschen geeignet, die nicht selbst Screens machen. Sie können sich schlicht nichts darunter vorstellen. Und wenn sie sich nichts darunter vorstellen können, wird das Feedback nicht befriedigend für dich sein. Also: Zeig es bloß keinen Laien!
Paper Prototypes – UX Designer’s oldest
Paper Prototypes gehen mehr auf die echten Größen und Proportionen der Screens ein. Ob Templates mit Smartphone-Rahmen, Stencils (Schablonen) oder eine ausgeschnittene Smartphone-Attrappe: Paper-Prototyping ist der erste Schritt, um echte Ausmaße der App zu fassen. Der Rahmen wird dich automatisch dazu bringen, detailgetreuer zu arbeiten. Dabei helfen Schablonen für Apps oder Web-Applikationen beim Einhalten der Größe. Diese kann man sich einfach suchen über beispielsweise „printable screen templates“ herunterladen.
Für wen geeignet? Die Papier-Prototypen sind gut geeignet für dich selbst! Du bekommst da schon mal eine erste Idee, wie fein gewisse Ansichten ausgearbeitet werden müssen. Für Programmierer auch nett… dazu müssen aber deine Zeichnungen schon irgendwie aussagekräftig sein.
Ehrlich gesagt: Paper-Prototypen und die oben genannten Skizzen sind vornehmlich für dich, damit du deine Gedanken ordnen kannst. Klar, wenn ihr im Team arbeitet, dann sind Skizzen der schnellste Weg, um eine Idee gemeinsam voran zu bringen. Wenn die Idee steht, dann sollte es in der Ausarbeitung feiner werden.
Je flacher ein Prototyp, desto einfacher das Tool dazu und desto mehr Vorstellungsvermögen wird bei den Testern gebraucht.
Tapbare Skizzen
Papierschablonen können fotografiert und mit einem Tool wie beispielsweise Pop von Marvel untereinander verlinkt werden. Hier hättest du eine Mischung aus Ablauf und bereits konkreten Interaktionselementen.
Diese Vorgehensweise ermöglicht dir ein erstes Anfühlen der App auf dem Smartphone und sogar in einer App. Für ganz schnelle Zeichenkünstler braucht es also nur ein Smartphone, die App und die Papierskizzen und schon bist du in klickbaren Bereichen unterwegs.
Wem zeigen? Dadurch, dass du hier schon die Bedienung abbildest, wird die App natürlich verständlicher. Und vielleicht könnte auch eine ganz unbedarfte Person dir hier schon Feedback zur Nutzung geben. Da du hier aber noch kein digitales, ansprechendes Layout hast, rate ich zu Vorsicht. Die meisten Menschen fangen dann nämlich an, das Aussehen zu kritisieren und damit ist dir an dieser Stelle natürlich auch nicht geholfen.
Wir kommen der Sache aber gleich näher…
Klickbare Wire Flows sind der Kern von UX Design
Nun kommen wir zum Switch – jetzt scribblest du nicht mehr von Hand, sondern direkt in einem Tool. Davon gibt es reichlich. Ich selbst setze auch die Konzeption und Wireframes häufig in dem Grafikprogramm um, in dem ich dann das Projekt aufsetzen werde.
Side-Note: Sicher, du kannst deine Konzeptionsscreens auch in einem Tool wie miro anlegen. Und du kannst auch Screens aus Sketch oder Figma in miro einbinden. Schau dir das mal an: https://miro.com/marketplace/sketch/
Die meisten Grafikprogramme wie Sketch, Figma, InVision (wird dieses Jahr eingestellt, also 2024, beschäftige dich lieber gleich mit dem InVision Prototype), UX Pin, Proto.io oder JustInMind und welche es da noch gibt, haben eine App oder eine Vorschau im Browser, auf der du dir deinen Prototyp auf dem Smartphone oder auf Desktop oder beidem ansehen kannst. Dann kommen wir der Echtheit deines Prototyps deutlich näher.
Nun hängt es nur noch davon ab, wie sehr du dich im Raum zwischen Konzept und Design verstrickst und wie echt die Interaktionen in deinem Prototyp sein werden. Bei Apps, die beispielsweise viele Formulardaten erfassen, kann es sinnvoll sein, aus den einfachen klickbaren Wireframes überzugehen in ein Tool, dass auch Dropdowns, Formularfelder und vielleicht sogar Abhängigkeiten simulieren kann.
Solch ein Tool war früher Framer, das heute ähnlich wie Webflow zu einem Webbaukasten geworden ist. Natürlich, damit kann man auch prototypen bauen. Ist aber vielleicht etwas aufwendig…
