Der 1. Teil über das Prototyping digitaler Software befasst sich mit 5 Tipps zur grundsätzlichen Herangehensweise. Dieser Teil konzentriert sich nun auf die Tipps 6–10 zur konkreten Umsetzung.

6. Wählen Sie das passende Werkzeug

Zu Beginn reichen Papier, Stift und quadratische Haftnotizen, um ein Storyboard zu erstellen. Rechteckige Haftnotizen eignen sich, um die Ausführung einer Smartphone-App oder mobilen Website zu visualisieren. Denn sie ähneln eher dem Format eines Smartphones. Änderungen sind mit diesen Haftnotizen schnell gemacht. Auch Animationen oder Übergänge simulieren Sie ganz flexibel. Schieben Sie den „nächsten Screenshot“, also das Papier mit der passenden Zeichnung, per Hand vor die Augen der Testperson. Genau so, wie Sie es im Endprodukt animieren würden.

Für die Entwicklung von Prototypen gibt es unterschiedliche Tools und Methoden. Kontext und Funktion verdeutlichen Sie am besten mit Wireframes, Klick-Dummys und Animationen.

Wireframes und Klick-Dummys

Wireframes zeigen den Aufbau, die Verteilung der Elemente. Dafür genügen Stift und Papier. Wer es digital mag, greift zu Tools wie:

  • Evolus Pencil
  • Sketch
  • Illustrator
  • Balsamique
  • Axure
  • OmniGraffle
  • UXP

Klick-Dummys, also miteinander verlinkte Wireframes oder Layouts, bauen Sie schnell und einfach z. B. mit der Web-Anwendung Invision. Ihr Dummy kann per Liveshare geteilt und kommentiert werden.

Animationen

Für Animationen gibt es viele Tools. Es kommt immer darauf an, welchen Aspekt der Animation Sie in welchem Rahmen kommunizieren möchten. Zu den Tools zählen:

  • Keynote
  • Animations-Funktionen von Photoshop
  • Animations-Software wie After Effects oder Adobe Animate
  • neuere Anwendungen wie Flinto oder Principle

Mit Flinto und Principle habe ich bereits sehr gute Erfahrungen im Bereich kleinerer gekapselter Animationen gemacht.

Design

Für die visuelle Genauigkeit hervorragend geeignet sind:

Moodboards legen die grundsätzliche Anmutung fest. Als Tools eignen sich Invision oder die Suchmaschine Niice.

Style Tiles und Element-Kollagen zeigen, wie einzelne Gestaltungs-Elemente konkret aussehen. Dafür greife ich seit einiger Zeit begeistert zu dem Programm Sketch. Viele nutzen aber noch den Klassiker Photoshop.

Die inhaltliche Genauigkeit bedarf eines inhaltlichen Konzepts. Dieses erarbeiten Sie mit den Methoden des Content Modelings und der objektorientierten User Experience (OOUX).

Mit Kenntnissen in HTML/CSS können Sie den Prototyp natürlich auch direkt programmatisch umsetzen.

7. Vermeiden Sie Blindtext

Ob Prototyp aus Papier, Wireframe oder Layout – verwenden Sie bei der Ausarbeitung Ihres Prototypen möglichst „echten“ Content. Denn in der Realität besteht z. B. eine Headline meist nicht aus genau 5 Wörtern. Ein perfekt ausgearbeitetes Layout zerfällt oft, wenn man die endgültigen Texte einbindet. Bei Projektbeginn ist es meist schwierig bis unmöglich, an den finalen Content zu gelangen. Tipp: Arbeiten Sie schon am Anfang der Projektphase mit sogenanntem Protocontent. Das sind Texte und Inhalte, die dem geplanten Content möglichst nahe kommen. Als Quelle dienen z. B. ein alter Webauftritt oder ähnliche Inhalte von Wettbewerbern.

8. Fragen Sie die User

Prototypen sind zum Lernen da. Im Zeitalter der User Experience haben Produkte nur dann eine Chance, wenn sie direkt am User getestet werden. Die Punkte, bei denen Handlungsbedarf besteht, werden so schnell herausgearbeitet. Heute hat ein Produkt nicht mehr wie früher Gelegenheit, sich über längere Zeit zu beweisen. Wegen der Masse an Wettbewerbern muss es sofort erfolgreich sein.

Gehen Sie mit Ihren Prototypen hinaus in die „echte Welt“. User gibt es überall. Im Kollegenkreis. In Cafés. Im Park. Auf Messen. Oder in der Fußgängerzone. Lassen Sie die Menschen Ihren Prototypen testen. Sie geben Ihnen wertvolle Insights.

Natürlich gibt es mittlerweile auch Online-Dienste, die User-Tests anbieten: usertesting oder rapidusertest.

9. Involvieren Sie Ihre Kunden

Ihr Produkt soll Ihren Kunden gefallen. Beziehen Sie diese möglichst früh in den Entwicklungsprozess ein. Aha-Erlebnisse sind vorprogrammiert. Ihr Kunde lernt womöglich Teile seiner eigenen Produktpalette kennen, die er vorher nicht kannte. Manche Entscheidungs- oder Erklärprozesse kürzen Sie radikal ab, indem Sie Funktionen oder interaktive Elemente prototypisch demonstrieren.

Noch ein Vorteil: Ihre Kunden identifizieren sich durch die frühzeitige Teilhabe viel intensiver mit dem entstehenden Produkt. Es wird auch ihr „Baby“.

10. Klasse durch Masse

Selten ist die 1. Lösung auch die beste. Deshalb erstellen Sie Prototypen. Nehmen Sie jede Reaktion Ihrer Kunden und User ernst. Lassen Sie daraus neue Lösungen entstehen. Testen Sie verschiedene Ansätze gegeneinander, um ein erfolgreiches Produkt zu entwickeln. Gerade zu Beginn sollten Sie möglichst viele Varianten erforschen. Der teamübergreifende Ansatz trägt dazu bei, dass viele Menschen viele Ideen entwickeln.

Fazit

Das Prototyping für digitale Projekte erlebt zurzeit einen Höhenflug. Das Design sollte dabei konsistent, ästhetisch und durchdacht bleiben. Auch oder gerade während des Hin und Hers in der Entwicklungsphase. Empathie heißt das Zauberwort: Designer müssen Kollegen, Kunden und User verstehen und dennoch die Zügel zusammenhalten. Damit das Prototyping nicht so endet wie bei dem Auto „The Homer“.

Quellen:

t3n Magazin Nr. 43, 03/2016–05/2016

The $1 Prototype, Greg Nudelman

usabilityblog.de "Wann Wireframes, wann Hi-fi-Prototypen?", Jens Jacobsen vom 8.10.2015

usabilityblog.de "20 UX-Design-Tools: Wireframes und Prototypen mit UXPin und Co.", Jan Pohlmann vom 23.12.2014

smashingmagazine.com "Prototyping iOS And Android Apps With Sketch (With A Freebie!)", Joshua Mauldin vom 30.1.2015

smashingmagazine.com "Mobile Prototyping With Proto.io", Will Hacker 19.2.2015

smashingmagazine.com "Designing Navigation On Mobile: Prototyping With Keynote", Patrick Marsceill vom 11.3.2015

Christian Klose

Christian ist Creative Director für Screendesign bei New Communication. Und trägt einen Nachnamen, der eine Menge über sein Talent aussagt. So gilt er in den Bereichen Website-Konzeption und User Experience als wahrer „Virtu-Klose“ und seine Entwürfe als „Klose to perfection“. Dafür, dass der gebürtige Bayer trotz des ganzen Lobs nur geografische Höhenflüge erlebt, sorgen seine drei Kinder. Die ziehen Papa an seinem langen Zopf nämlich immer wieder auf den Boden der Tatsachen zurück.

Heiß auf Insider-Infos?

Immer up to date: Unser Newsletter versorgt dich einmal monatlich mit brandneuen Trends und Innovationen aus der Kommunikationswelt.

Newsletter bestellen