App Mockup Arten, Teil 1

Karolina Schilling  Follow on Twitter
UX Designer & Consultant | ks@muppetti.de
26. Juni 2018

App Mockup Arten, Teil 1

Wozu dient das App Mockup? Wen soll es überzeugen…?

Wenn Sie ein App Mockup entwickeln wollen, sollten Sie zunächst überlegen, zu welchem Zweck Sie es brauchen und wem Sie es zeigen wollen.

Ein Mockup 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 App Mockup wird. Je flacher ein Mockup (und mock-up, also Attrape,  impliziert ja bereits eine Oberflächlichkeit), desto einfacher das Tool dazu, desto mehr Vorstellungsvermögen wird bei den Testern gebraucht.

App Mockups erstellen

Welche Arten von App Mockups gibt es und mit welchen Tools kann man diese erstellen? Gehen wir mal eine einfache Liste durch:

1. Skizzen und Storyboards

 

Die einfachste Variante, wenn man einen Stift gerade halten und schöne Linien hinbekommt sind einfach Skizzen. Skizzen zeigen handgezeichnete Screens, auf denen sich App Elemente tummeln. Diese sollten natürlich auch als solche erkennbar sein. Mehrere Screens werden zu einer Abfolge zusammengestellt und ergeben das Storyboard. Ähnlich wie in einem Comic, wo eine Geschichte erzählt wird. Doch hier wird die Abfolge der Navigation „erzählt“. Der Nutzer tapt auf einen Button – dieser ruft eine nächste Ansicht hervor. Das Storyboard zeigt also mehrere handgezeichnete Screens, die miteinander verbunden sind.

Vorteil: 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.

Nachteil: Skizzen sehen halt nicht „echt“ aus. Man braucht also bereits einiges an Vorstellungsvermögen und das haben nicht versierte Nutzer oder Kunden nicht immer. Je realistischer die Screens aussehen, desto näher sind wir am Produkt. Das führt also zur nächsten Stufe des App Mockup…ings.

2. 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 annähernd echte Ausmaße einer App zu fassen. Das dient dazu, um einfach eine Idee zu bekommen, wie viel auf den Screen passt und noch angenehm für die Wahrnehmung der Nutzer ist. Außerdem erlauben Paper Prototypes bereits eine Priorisierung im Layout. Welche Elemente finden wir oben? An welchen typischen (also dem Nutzer bekannten) Stellen? Und welche Elemente sind weniger wichtig? Und welche sind so unwichtig, dass wir sie im Laufe der Verfeinerung kicken können. Das ist das Ziel: Die App soll immer schlanker werden.

Eine herzerweiternde Quelle von diversen, übersichtlich aufbereiteten Papier-Vorlagen findet sich hier auf Sneakpeekit – genial!

Vorteil: 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“. Bevor man sich in einem Screen Programm verfängt (vor allem als Anfänger), ist das Paper Prototyping hervorragend, um grundlegende logische Zusammenhänge in der app zu testen. Am besten gleich an sich selbst.

Nachteil: Es ist schon besser, aber natürlich immer noch nicht „echt“. Man tapt auf Papier herum und soll so tun, als wäre es digital. Ist es einfach nicht.

3. 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.

Vorteil: Geht schnell und ist schonmal in einer App. Wenn also nicht auf dem Screen das App Feeling hochkommt, so doch um den Screen herum. Außerdem können diese Screens Schritt für Schritt durch echt aussehende ersetzt werden, ohne dass der App Prototyp dabei verloren geht. Er wird einfach wiederverwendet.

Nachteil: Wie oben. Wird aber immer besser…

4. (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, Prott und seit einem halben Jahr auch mit dem niederländischen Grafikprogramm Sketch App mit dem Prototyping Feature sehr gut versorgt. 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.

Vorteil: Wenn bereits eingeübt, kann man auf diese Art sehr schnell Ergebnisse und Feedback erzielen. Das App Mockup kann außerdem schrittweise verfeinert und verbessert werden. Der Kunde, Chef oder Teamlead kann kommentieren, Kommentare abgearbeitet und geschlossen werden.

Nachteil: Man braucht eine gewisse Einarbeitungszeit in das jeweilige App Mockup Tool. Je mehr man eines beherrscht, desto leichter fallen einem mit der Zeit die anderen, so dass man seinen Favoriten herausschälen kann.

5. 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.

Vorteil: Man sieht bereits eine app und hält sich nicht an Design-Diskussionen fest. Es geht um die Nutzung und darum, Elemente sinnvoll, nutzerfreundlich, nutzerzentriert auf dem Screen zu positionieren. Interaktive Wireframes sind sehr gut dafür geeignet, Usability Tests duchzuführen. Natürlich muss man vorher deutlich klar wissen, welchen Strang man testen möchte. Oder auch, ob man die Verständlichkeit der Sprache testet.

Nachteil: Manchmal begreifen Menschen nicht, dass es sich noch nicht um das finale Design handelt. Das sollte also ausgiebig erklärt werden. Besser auch, wenn man nur schwarz-weiß arbeitet und nicht mit Orange wie in meinem Beispiel.

6. (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.

7. 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.