Philipp: Ich glaube, man macht es sich da gerne ein bisschen zu schwer. Also ich persönlich fang immer mit einem leeren Blatt Papier an. Oder wenn ich ganz fancy sein möchte auf dem iPad. Die nächste Stufe ist mit den Tools, die du wahrscheinlich ohnehin schon nutzt, digital zu prototypen und für die meisten Leute ist es so was wie PowerPoint oder Keynote oder Google Slides.
Sebastian: Ich sitze dort mit Philipp. Philipp ist der Design Mentor in der Product Masterclass und außerdem auch im richtigen Leben außerhalb der Product Masterclass als Designer tätig. Er war auch unter anderem bei Firmen wie Freelatics und Mozilla. Und ich freue mich total, dass Philipp uns heute drei Prototyping-Konzepte beziehungsweise drei Varianten, wie man als Nicht-Designer prototypen kann, mitgebracht hat.
Philipp: Genau. Also Prototyping ist eine tolle Sache und ich bin persönlich der Meinung, dass es mehr Leute tun sollten. Und das bedeutet natürlich auch vor allem Nicht-Designer, Produktmanager zum Beispiel, das man da wahnsinnig viel vom Prototyping haben kann. Und es gibt eigentlich keine Entschuldigung damit nicht anzufangen. Deshalb würde ich mal sagen, fangen wir auch mal an.
Sebastian: Perfekt. Also wenn ich jetzt als Produktmanager irgendwie anfangen möchte, gewisse Ideen zu visualisieren, weil ich es vielleicht mal Stakeholdern zeigen möchte. Einfach vielleicht auch ein Konzept, was ich so in meinem Kopf habe, zumindest mal in eine Form bringen, die vielleicht jetzt nicht pixelperfect ist, aber zumindest mal die Idee rüberbringen kann. Was kann ich da tun?
Philipp: Genau. Der erste Schritt ist eigentlich immer der gleiche und der fängt mit Stift und Papier an. Also Sketching, Paper Prototyping. Einfach mal die Idee, die man hat oder das Konzept, das man hat, aufzeichnen, damit es nicht nur im Kopf ist oder nicht nur in Textform existiert. Das ist ein ganz wichtiger erster Schritt, auch um für sich selbst mal zu sehen: Wie sieht denn das aus? Haben all die Elemente, die ich hier im Kopf habe, überhaupt Platz auf einem Handy-Bildschirm oder wird es viel zu viel oder viel zu wenig? Und das heißt ja das schlichte Aufzeichnen, dass man da überhaupt schon von Prototyping sprechen kann, aber das ist auf jeden Fall mal, ich sage mal Schritt 0 im Prototyping-Prozess. Und dann kann man natürlich weitergehen. Und da gibt es zum Beispiel Apps, ich glaube eine nennt sich Pop, mit der man Fotos von Sketches machen kann und die dann zu Prototypen zusammen linken kann in der App. Das heißt, man kann damit eigentlich sehr, sehr weit kommen, aber gleichzeitig muss man sich natürlich auch im Klaren sein, mit Papierprototypen, mit Sketches kann man gewisse Dinge testen. Man kann sehr gut damit kommunizieren, aber sie haben natürlich auch ihre Grenzen.
Sebastian: Das heißt sowieso auch du als Designer fängst erst mal Panel Paper tatsächlich an, auch nicht digital, sondern Paper. Nutzt du da wirklich einfach blankes Blatt oder hast du dann, wenn du sagst, da kann ich eine App mit machen, hast du da irgendwelche Vorlagen, dass ich zumindest grob mal einen Screen oder ähnliches habe? Oder wie gehst du da vor?
Philipp: Ja, also ich persönlich fange immer mit einem leeren Blatt Papier an oder wenn ich ganz fancy sein möchte auf einem iPad, aber auch nicht mit irgendwelchen Spezial-Tools, sondern einfach Notes App und Sketching drauf. Ich glaube, man macht sich es da gerne ein bisschen zu schwer im Sinne, dass man zu viel möchte, dass man so eine perfekte Situation haben will, wo man das Template hat und dann super schöne Sketches haben möchte. Aber am Ende, alles was ich mache, alle meine ersten Sketches sind unglaublich hässlich. Die sind auch für niemanden, außer für mich selbst bestimmt, aber sie helfen mir dabei zu denken. Und das ist, glaube ich, die große Sache vom Papierprototyping und vom Sketching. Es ist eine Denkhilfe, es ist eine Kommunikationshilfe und mehr muss dieses Medium jetzt auch erst mal gar nicht leisten. Das heißt, wenn du ein Rechteck zeichnen kannst, ein Dreieck, einen Kreis und eine Linie, dann kannst du Interfaces sketchen. Und ich würde mal sagen, die meisten Leute schaffen das.
Sebastian: Das heißt also, im Worstcase hast du halt dein Lineal und Zirkel und Ähnliches und dann geht das sicherlich schon.
Philipp: Genau. Aber ich würde sogar sagen, bevor du hier Lineal und Zirkel auspackt, mach lieber schräge Rechtecke und Kreise, die vielleicht eher als sternförmig sind oder was auch immer dann aus der Feder kommt, weil ja, es geht eben wirklich darum, möglichst direkt mit diesem Medium Papier zu kommunizieren. Also diese Verbindung quasi vom Hirn über die Hand aufs Papier zu kommen.
Sebastian: Das heißt also, so hat es ja gesagt, so es eher für dich selber, also quasi Schritt 0. Würdest du dann mit solchen Paperprototyps auch gegebenenfalls schon zu Stakeholdern gehen, weil du ja sagtest, es gibt auch Apps, da kann ich die Screens abfotografieren und kann die dann gegebenenfalls auch untereinander bringen oder ist es dann eher noch eine andere Prototypform, die du dann nutzen würdest, um mit Stakeholdern dann zu kommunizieren?
Philipp: Ja, da kommt es ein bisschen drauf an. Auf der einen Seite, das kann man auf jeden Fall machen, ist grundsätzlich eine gute Idee, weil das schöne daran, wenn man mit Stakeholdern spricht, ist, die haben meistens ein bisschen Kontext. Die müssen jetzt nicht von Null auf das Konzept von diesem Produkt erst mal verstehen. Das heißt, wenn da was sehr rough ist oder statt einem Text jetzt vielleicht einfach nur ein paar squeaky Lines da sind, die verstehen das trotzdem. Gleichzeitig ist da dann aber auch so ein bisschen die Grenze des Ganzen erreicht, weil wenn du jetzt als unbedarfter Nutzer oder möglicher Nutzer hier rein kommst und ich dir einen Sketch hinlege, in dem kein einziges Wort geschrieben ist, sondern nur ein paar Rechtecke stehen, dann wirst du damit nicht wahnsinnig weit kommen. Bei manchen Produkten vielleicht weiter als bei bei anderen. Aber da sind wir dann in dieser Übergangsphase zur nächsten Stufe von Prototypen.
Sebastian: Und was ist die nächste Stufe?
Philipp: Ja, genau, Nummer 2. Die nächste Stufe ist mit den Tools, die du wahrscheinlich ohnehin schon nutzt digital zu prototypen. Und für die meisten Leute ist es so was wie PowerPoint oder Keynote oder Google Slides. Also Präsentation-Tools sind unglaublich gut dazu geeignet, schnelle und doch recht ansehnliche Prototypen zu machen. Meiner Meinung nach hat das zwei große Vorteile gegenüber dem Papierprototype, obwohl es ein bisschen mehr Arbeit ist. Vorteil Nummer 1 natürlich, man kann es wesentlich leichter interaktiv machen. Das heißt, du kannst den Flow durch eine App einfach in verschiedenen Folien in einem Präsentationsprogramm abbilden.
Sebastian: Würdest du das dann in dem Präsentationsprogramm machen oder hättest du da eine spezielle App dafür?
Philipp: Es gibt auch spezielle Apps. Da sind wir schon bei Schritt 3, aber man kann auch wahnsinnig viel in dem Präsentationsprogrammen selbst machen. Also was ich sehr gern mache, ist eben wirklich zu sagen, okay, ich will einen bestimmten Flow testen, da gibt es dann auch keine Verzweigungen, dass man mal dahin kann, mal dorthin kann in der App. Und das sind dann einfach Screens, wo ich Copy Paste und Duplizieren die Folien hintereinander schalte. Und dann ist auch egal, ob jeder Klick irgendwo auf die Folie mich weiterbringt oder nur auf das bestimmte Element. Man kriegt, selbst wenn man es nur selbst benutzt, da ein relativ gutes Gefühl dafür, wie sich dieses Interface über die Zeit verhält, weil die Komponente fehlt so ein bisschen beim Sketching, weil man meistens alles nebeneinander hat. Das heißt, dieser zeitliche Aspekt, das ist das erste, was man mit Präsentationssoftware sehr, sehr gut machen kann. Und der zweite und ich denke, der ist fast sogar noch wichtiger, ist, dass man zum ersten Mal wirklich mit Text arbeiten kann. Ich bin ein großer Feind von Lorem Ipsum. Ich finde es schafft mehr Probleme als es löst. Gerade bei iText, weil du hast den Text da, um etwas zu sagen und wenn du dann einen Text dorthin packst, der nichts sagt, dann weißt du nicht, ist das jetzt eigentlich groß genug dieser Textbereich oder ist das verständlich und so weiter. Das heißt, man kann dann in Präsentationssoftwares sehr gut auch mal schauen, okay, ich denke mir hier, dass ich hier einen Button habe und da steht irgendwas drin und in meinem Kopf funktioniert das alles wunderbar und in einem Sketch, wo es vielleicht nur eine squeaky Line ist, auch, aber wenn dann dieser Button-Text drei Sätze sind, mal überspitzt gesagt, dann wird dir das in dem Moment auffallen und dann kann man auf die Art und Weise auch die Fidelity hochschrauben. Das bringt natürlich auch den nächsten Vorteil, nachdem du jetzt, selbst wenn es nur graue Boxen und Textblöcke sind, aber du hast jetzt etwas, was du theoretisch jemandem vorlegen kannst, wo es vielleicht ein bisschen länger dauert, bis die Person das versteht oder das auch gelesen hat und so weiter. Aber der Prototyp kann zum ersten Mal wirklich für sich sprechen. Und das ist der große Schritt, den man hier von Papier zu PowerPoint zum Beispiel gemacht hat, dass der Prototyp für sich selbst sprechen kann.
Sebastian: Das heißt also, ich kann ihn einfach jemandem hinlegen und im optimalsten Fall hilft es also wirklich. Kann man da schon von DOI sprechen dann tatsächlich?
Philipp: Ja, zu einem gewissen Grad oder zu einem prototypischen DOI. Genau.
Sebastian: Das heißt dann kann er das selber benutzen. Vielleicht kannst du ja auch mal kurz erklären für die, die es nicht wissen, was Lorem Ipsum ist. Es ist ja immer wieder ein gern genommener Text.
Philipp: Ja genau. Also Lorem Ipsum ist einfach ein Platzhaltertext. Lorem Ipsum ist so ein lateinischer Standardtext, der, glaube ich, nicht wirklich irgendwas bedeutet, wenn man ihn übersetzen würde, aber man sieht es relativ oft in Prototypen oder in Designvorlagen, da steht dann so was wie Lorem Ipsum dolor set amet irgendwas. Und da gibt es Generatoren, die dir ganze Seiten von lateinischem Text erzeugen können, was vielleicht ganz gut ist, wenn es um Visual Design geht, also wenn ich zum Beispiel einen Blog gestalte, dann will ich natürlich Text dort haben und der Text soll idealerweise auch nach Text ausschauen und nicht nur nach einer grauen Box. Da kann es vielleicht hilfreich sein, aber da fangen eigentlich schon die Probleme an, weil Lorem Ipsum ist auf lateinisch. Was ist, wenn meine Webseite auf russisch ist? Der Text wird anders aussehen oder auf deutsch selbst. Und ja, es ist glaube ich ein Tool, das mehr genutzt wird, als es genutzt werden sollte.
Sebastian: Okay, danke. Okay, also wir haben jetzt schon den ersten Prototyp, der für sich selber sprechen kann, also dem ich vielleicht auch schon mal einem Nutzer demo zeigen kann. Aber du hast ja gesagt, du hast 3 mitgebracht. Was wäre denn dann die Ausbaustufe?
Philipp: Die nächste Ausbaustufe wäre dann, dass man wirklich in spezialisierte Tools geht. Also zwei meiner Favoriten sind da Marvel und InVision. Das sind beides Tools, die sehr vieles tun, aber unter anderem kann man einfach eine Menge Bilder hochladen und dann auf diesen Bildern Hotspots ziehen, also Klick-Flächen oder Tab-Flächen und sagen, okay, wenn du hier drauf klickst, gehst du zu Bild X von da, wenn du da hingehst, gehst du auf Bild Y. Das heißt, damit kann man dann relativ einfach auch ein bisschen komplexere Prototypen bauen, die so ein bisschen Verzweigung haben, wo man jetzt in einem Test zum Beispiel auch mehr Exploration machen kann. Also, wo du doch noch mal eher sagen kannst, hier, mach mal, weil es vielleicht einen Weg zurück gibt und du kannst ja verschiedene Pfade durch die App nehmen. Und als solches kann man da auch noch mal ganz neue Erkenntnisse daraus ziehen. Man kann da auch sehr gut die Sachen, die man vielleicht vorher in PowerPoint oder Keynote gemacht hat, als Bilder exportieren und da reinladen. Das geht auch sehr gut und dem halt einfach nochmal ein bisschen mehr Interaktivität dadurch geben.
Sebastian: Das heißt also, eigentlich könnte ich auch das, was ich in Schritt 2 in meinem PowerPoint oder Keynote Slides gemacht habe, mir als Bilder exportieren und dann hochladen und dann Klick-Flächen mir im Endeffekt schaffen.
Philipp: Genau, ja, man kann dann Klick-Flächen hinzufügen. Du kannst so ein bisschen vielleicht mit Animation spielen, weil das ja auch jetzt nicht nur eine ästhetische, sondern auch eine semantische Komponente hat, also ob jetzt was von rechts oder von links reinkommt. Also ist das eher etwas, was nach vorne geht oder was zurück geht. Also man kann dem Ganzen einfach so ein bisschen mehr Vitalität geben und ein bisschen mehr, dass sie sich noch ein bisschen realer anfühlt.
Sebastian: Was mich natürlich jetzt interessieren würde, weil du sagst immer 0 Paperprototype, dann Schritt 2 beziehungsweise dann Schritt 1 ist, ich nehme mir einfach die Tools, die ich habe, also PowerPoint, Keynote, Google Slides, womit ich auch immer arbeite. Und Schritt 3, ich gehe dann wirklich in ein spezialisiertes Tool wie Marvel oder InVision, um dann wirklich unterschiedliche Klick-Strecken oder beziehungsweise unterschiedliche Wege in meinem Produkt abbilden zu können. Was mich natürlich jetzt interessiert ist, an welchem Punkt, du hast es schon teilweise mal angeschnitten, aber an welchen Stellen in so einem Product-Life-Cycle sind denn welche Prototypen angebracht oder ist vielleicht so Build-Measure-Learn wieder, dass man immer wieder reingeht.
Philipp: Ja, also am leichtesten lässt es sich natürlich beschreiben, wenn man von einem komplett neuen Produkt spricht. Aber ganz ehrlich, die meisten Leute sind nicht in der Situation, dass sie komplett neue Produkte von Null auf gestalten. Also was ich sagen würde ist, für einen Sketch ist eigentlich immer Zeit, weil Sketching ist eigentlich fast mehr Denken mit der Hand als es Prototyping ist in dem Sinn. Das heißt, es sollte einfach Teil der Arbeitsweise sein. Und dann hängt es wieder davon ab, was will ich denn erreichen? Was will ich denn herausfinden? Will ich, wenn ich zum Beispiel jetzt nur eine ganz kleine Änderung an einem Feature mache, wo sich nichts im Flow insgesamt verändert, dann reicht es mir vielleicht drei Folien in Keynotes zu machen, vorher, währenddessen und danach von dieser Änderung und die hintereinander zu schalten, um zu sehen, wie sich das anfühlt oder vielleicht jemandem vorzulegen, während, wenn es jetzt um komplexere Veränderungen geht, man vielleicht auf so was wie InVision zurückgreifen muss. Übrigens auch ein sehr guter Weg, um diese Tools wie Marvel und InVision zu nutzen, ist Screenshots von der bestehenden App zu machen, wenn man da was verändern möchte und dann da einfach Dinge drüber zu legen. Das kann man in Photoshop machen oder in Sketch oder auch PowerPoint oder so was. Dass man dann über das Ding, was man austauschen möchte, eine weiße Box macht und dort den Text reinschreibt, den man eigentlich jetzt in der neuen Version drinnen haben möchte. Und schon hast du einen Prototyp von der neuen Version, wo eigentlich das Rundherum ja schon für dich vorgefertigt ist.
Sebastian: Cool. Gibt es noch irgendwas, was wir vergessen haben in diesem ganzen komplexen Thema Prototyping oder es gibt da ja schon unterschiedliche Dinge, die man machen kann. Natürlich ist auch ganz klar, wenn ich jetzt wirklich Designer bin, kann ich natürlich noch mal in einen ganz anderen Tool-Kasten greifen, aber es geht ja jetzt auch darum, was kann ich als Nicht-Designer tun? Gibt es noch irgendwas, das wir jetzt gerade ausgespart haben in der Diskussion?
Philipp: Ja, also ich meine, die Designer-Toolbox ist heutzutage wesentlich zugänglicher als sie vor zehn Jahren war. Also so Tools wie Figma oder Sketch sind eigentlich ziemlich leicht nutzbar für Leute, die jetzt auch nicht unbedingt ein Design-Studium hinter sich haben. Also generell die Tools sind nicht das, was man in einem Design-Studium lernt. Aber ich denke, das Wichtigste beim Prototyping ist, etwas real zu machen, was noch nicht existiert. Das etwas realer zu machen als es momentan ist. Und deshalb finde ich es so wichtig, da möglichst viele Schritte rauszunehmen und das ganze so unkompliziert wie möglich zu machen, weil das ja die ganze Macht des Prototypings ist, dass man sehr schnell sehr weit kommt, auch wenn man es danach wegwerfen muss. Aber dass man dadurch sich Wissen aneignen kann, Dinge testen kann, über Dinge, die es noch nicht gibt. Und deshalb, je schneller man dort hinkommt, umso wichtiger, umso besser.
Sebastian: Das war doch eigentlich ein ganz gutes Abschlusswort. Vielen lieben Dank Philipp.
Philipp: Ja, danke dir.
Sebastian: Und wenn ihr mehr darüber erfahren wollt, wie du mit Designern zusammenarbeiten kannst, dann haben wir natürlich auch den Philipp in der Product Masterclass als Mentor dabei. Schaut einfach mal vorbei auf Product-masterclass.com. Und ja, in diesem Sinne bis zum nächsten Mal. Danke dir.
Philipp: Danke dir.
