Prototypen-Arten

Prototypen-Arten

Wenn Sie einen Prototypen entwickeln wollen, sollten Sie zunächst überlegen, zu welchem Zweck Sie ihn brauchen und wem Sie ihn zeigen wollen. Ein Prototyp für den technischen Leiter, das Dev-Team, die Marketing-Abteilung oder Test-Kunden hat unterschiedliche Ausprägungen. Hinterfragen Sie davor, wie viel digitales Vorstellungsvermögen die jeweilige Gruppe hat. Beispiel: Für das Dev-Team reicht möglicherweise vornehmlich die Abbildung der Screenabfolge, weil das Team daran interessiert ist zu verstehen, was im Hintergrund passiert. Für Test-Kunden hingegen könnte lediglich interessant sein, welcher Inhalt ihnen im Frontend angezeigt wird. Je flacher ein Prototyp, desto einfacher das Tool dazu, desto mehr Vorstellungsvermögen wird bei den Testern gebraucht.

  • Skizzen und Storyboards: Skizzen zeigen handgezeichnete Screens, das Storyboard zeigt mehrere handgezeichnete Screens, die miteinander verbunden sind. Skizzen helfen 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 ist.
  • Paper Prototypes: 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 Sie automatisch dazu bringen, detailgetreuer zu arbeiten. Dabei helfen Schablonen für Apps oder Web- Applikationen zum Einhalten der Größe. Diese kann man sich einfach suchen über beispielsweise „printable screen templates“.
  • Tapbare Skizzen: Papierschablonen können fotografiert und mit einem Tool wie Pop von Marvel untereinander verlinkt werden. Hier hätten Sie eine Mischung aus Ablauf und bereits konkreten Interaktionselementen. Diese Vorgehensweise ermöglicht Ihnen ein erstes Anfühlen der App auf dem Smartphone, und sogar in einer App. Die Pop-App gibt es für Android, iPhone und Apple Watch. Für ganz Schnelle Zeichenkünstler brauchen Sie nur ein Smartphone, die App und die Papierskizzen, die Sie mit klickbaren Bereichen unterlegen. Wenn Sie doch schon etwas „Echteres“ brauchen, bedienen Sie sich aus dem Marvel Standard-Set. Ein Projekt ist meist kostenlos.
  • (Klickbare) Wireframes: Wireframes sind digitalisierte Skizzen. Nicht fotografiert, sondern aus Elementen gebaut, die zwar noch nicht der Gestaltung der App nahekommen (müssen), aber das Layout bestimmen – also die Verteilung der Elemente auf dem Screen. Ein Button bekommt die Anmutung eines Buttons, auch wenn er nicht ästhetisch gestaltet ist. Formulare, Listen, Bilder, Texte bekommen bereits ihre echten Ausmaße und Positionen zugewiesen – so wird deren Wirkung wahrnehmbar. Heutzutage bieten die guten und meisten Wireframing-Tools Verlinkungen der Ansichten untereinander an, damit ein echter Navigationsfluss entsteht. Wer hier ein Projekt kostenfrei und zügig anlegen will, ist mit den webbasierten Tools Marvel, UX-Pin, InVision und Prott sehr gut bedient. Marvel und Prott sind vor allem stark für mobile Apps und bieten ihre eigenen Apps an, in denen Sie Ihren Prototyp gleich testen und zeigen können. UX-Pin hatte mit dem Wireframing für Desktop begonnen und ist jetzt flexibel für alle möglichen Fälle einsetzbar. Wer es lean will, nutzt Marvel oder Prott. Wer Oberflächen schon im Detail simulieren möchte, arbeitet sich in UX-Pin ein. Dieses ist mächtig, bietet viele Vorlagen, die Möglichkeit zur Kollaboration sowie – ganz modern – Spezifikationen für die Übergabe an Developer. Kein Photoshop, kein Grafikprogramm. Das ist rapid.
  • Interaktive Wireframes: Diese Art Wireframes bieten dem Nutzer bereits echte Interaktionen – nicht nur Verlinkungen. Wenn er tapt, springt etwas auf, etwas blendet sich ein, etwas wird animiert. Diese Wireframes sind dafür geeignet, Usability zu testen und bereits Richtung UX zu gehen. Auch Animationen sind hierbei möglich und vorbereitet. Tools: UX Pin und seit Jahren in der Szene für komplexere Fälle: Balsamique oder Axure RP. Nicht ganz so fancy und einfach im Einstieg wie die neuen Tools, aber solide und bekannt.
  • (Klickbare) Mockups: Als Mockup bezeichnet man eine Attrappe im Sinne einer Fassade. Der Screens sieht echt aus, ist aber nicht mit Funktionalitäten hinterlegt. Hier geht es vornehmlich um die Ästhetik des Produkts. Mockups sind gut geeignet für Marketing-Tests. Welcher Screens spricht wen mehr an. Kunden können sich dann besser vorstellen, wie eine App aussieht und was sie macht.
  • Interaktive Mockups: Sind die Sahnehaube des Prototypings und dementsprechend benötigen sie mehr zeitliches Invest zur Umsetzung. Die Krönung des interaktiven Mockups ist ein mit Code nachgebautes fertig-gestyltes Frontend, das mit echten Daten gefüttert werden kann und auf Eingaben des Nutzers reagiert. Ja, hierzu braucht man unter Umständen Programmierkenntnisse. Tools wie Framer, Flinto,

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