10 Tipps zum Prototyping für digitale Projekte

Prototypen erleben ein digitales Revival. Doch was sind die Hintergründe dieser Renaissance? Was sollte man bei der Entwicklung digitaler Software unbedingt beachten? Und welche Tricks und Tools helfen bei der Umsetzung?

Ein Artikel von Christian Klose, Creative Director bei der der New Communication GmbH & Co. KG, Kiel

Prototyp. (Quelle: New Communication GmbH & Co. KG)

„Es gibt fast keine Software mehr auf dem Markt, die wirklich elegant durchgearbeitet ist. Im Prinzip sind alles Prototypen.“ Das sagte Apples Design-Ikone Hartmut Esslinger vor kurzem in einem Interview der t3n. Ich sage: „Willkommen im Jahr 2016!“

Screendesign im Wandel

Vorbei sind die Zeiten, in denen ein Screendesigner sein Layout poliert und stolz an die Entwicklungs-Abteilung übergibt. Produkte werden komplexer. Arbeitsprozesse passen sich an die neuen Anforderungen an. Kollaboratives Design, Agile UX (User Experience), Design Thinking sind die neuen Schlagworte. Sie beinhalten immer eine teamübergreifende Zusammenarbeit von Personen aus unterschiedlichen Disziplinen. An der Entstehung eines neuen digitalen Produktes beteiligt sind Programmierer, Designer, Projektmanager, Konzepter, Stakeholder und – die User. Doch es wäre zu aufwendig und zeitintensiv, gleich die 1. Idee detailliert auszuarbeiten und umzusetzen. Nur um dann enttäuscht festzustellen, dass niemand das Produkt bedienen kann.

Neue Nutzungs-Situationen

Prototypen sind Modelle oder Annäherungen an das finale Produkt, die schnell und preiswert herzustellen sind. Eigentlich nichts Neues, auch nicht im Screendesign. Auf Klick-Dummys, Prototypen aus Papier und ähnliches setzt man schon seit Jahren. Dramatisch geändert hat sich aber der Kontext, in dem digitale Produkte konsumiert werden. Früher klickte man sich in nahezu identischen räumlichen Situationen durch Websites und Anwendungen. Heute konsumiert man dank Smartphones und Tablets im Bus, im Café, im Meeting oder auf der Toilette.

Aber wie erstellen Sie am besten einen Prototypen für Ihr digitales Projekt?

1. Fragen Sie, was Ihr Prototyp leisten soll

Das finale Produkt muss mehr sein als ein Prototyp. Denn dieser spiegelt immer nur ganz bestimmte Aspekte wider. Durch ihn erhalten Sie gezielte Learnings für die weitere Entwicklung. Klären Sie am Anfang, wie genau Ihr Prototyp in folgenden Bereichen sein soll:

• Kontext
  Wollen Sie den Prototypen z. B. schon auf einem Handy bedienen? Oder sehen Sie sich nur Ausdrucke an der Wand an?
• Funktion
  Werden animierte Übergänge simuliert? Gibt es eine Reaktion, wenn Sie einen Button drücken?
• Inhalt
  Arbeiten Sie mit Blindtext oder realen Texten?

• Design
  Wie stark ähnelt die Optik Ihrem geplanten finalen Produkt?
  
  

2. Begreifen Sie sich als Designer

Design ist nicht nur Layout. Design bestimmt, wie sich etwas von Menschen Geschaffenes uns gegenüber verhält. Und wie wir damit interagieren. Design umfasst den gesamten Prozess

• Bestimmung des Inhalts
• Strukturierung
• Gestaltung des User-Flows
• Ausarbeitung des Contents
• visuelle Darstellung
• programmatische Umsetzung

Daher sind tatsächlich alle Beteiligten auch Designer. Die häufig vorherrschende Arroganz der alleinigen Verantwortung für den eigenen Teil-Bereich muss ersetzt werden. Und zwar durch eine empathische Führung in den jeweiligen Sparten, die das gesamte Gelingen im Blick hat.

3. Arbeiten Sie von Anfang an im Team

Da alle Team-Mitglieder Designer sind, arbeiten alle von Anfang an zusammen. Der Entwickler z. B. kann schon in der Frühphase wertvolle Einsichten liefern, die das Projekt beeinflussen. Holen Sie auch einen Texter schon zu Beginn mit ins Boot. Text-Strukturen können besprochen und die Tonalität kann festgelegt werden. Das bestimmt dann wieder die Gestaltung. Und: Zusammen macht es einfach mehr Spaß.

4. Beginnen Sie mit einem Storyboard

Heutzutage begegnet man digitalen Produkten an unterschiedlichen Orten und in vielfältigen Situationen. Für die Produkt-Entwicklung wird daher das Storyboard wichtig. Es beschreibt bzw. bebildert, welche Geschichten man mit der App bzw. Website erlebt. Und welchen Nutzen diese bieten. Das 1. Bild des Storyboards zeigt das Umfeld, die Situation des Users. Das letzte Bild stellt den Benefit dar. Die Geschichten müssen mit möglichst wenig Text funktionieren. Das User Interface der beschriebenen Anwendung sollte nur angedeutet werden. Hier ein Beispiel. Mit dem Storyboard haben Sie bereits einen 1. Prototypen. Testen Sie damit die Idee Ihres Produkts an Menschen und diskutieren Sie mit ihnen.

5. Verlieren Sie sich nicht in Details

Ein Storyboard ist noch sehr rudimentär und grob. Je weiter die Entwicklung Ihres finalen Systems voranschreitet, desto detaillierter wird Ihr Prototyp. Mit fortlaufender Entwicklung werden Sie vermutlich eine ganze Handvoll Prototypen unterschiedlicher Detailstufen kreiert haben.

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
• UXPin

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 Principle habe ich bereits sehr gute Erfahrungen im Bereich kleinerer gekapselter Animationen gemacht.

• Design

Für die visuelle Genauigkeit hervorragend geeignet sind:

• Moodboards
• Style Tiles
• Element-Kollagen

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

usabilityblog.de/ux-design-tools-wireframes-und-prototypen

smashingmagazine.com/prototyping-ios-android-apps-sketch-freebie/

smashingmagazine.com/mobile-prototyping-with-protoio

smashingmagazine.com/prototyping-navigation-on-mobile-with-keynote

Der Autor

Christian Klose 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 zwei Kinder. Die ziehen Papa an seinem langen Zopf nämlich immer wieder auf den Boden der Tatsachen zurück.

Kontakt

Christian Klose
New Communication GmbH & Co. KG
Jägersberg 23
24103 Kiel
Tel.: 0431.90 60 7-15
Fax: 0431.90 60 7-77
E-Mail: klose@new-communication.de
Web: www.new-communication.de