Probier es selbst: Mockplus macht Prototyping zum Kinderspiel

Die Prototyping-Software Mockplus aus Asien erfreut sich auch in Europa immer größerer Beliebtheit. Mockups erstellst du damit fast schon intuitiv. Wir haben uns das Tool für dich angeschaut.

Ohne Mockups ist komplexes Design zu fehleranfällig

Sobald ein Design mehr als ein paar Seiten umfassen soll, ergibt es Sinn, sich vorher Gedanken über die Struktur zu machen und diese Gedanken in einen rohen Prototypen fließen zu lassen. Dessen wesentliche Aufgabe ist es, sich selbst, dem Rest des Designteams, wenn es eines gibt, und dem eventuellen Kunden Klarheit über die Informationsarchitektur zu verschaffen.

Dabei geht es mithin nicht darum, produktionsreife Assets zu erstellen, wie du es etwa mit Sketch könntest, sondern lediglich ein benutzbares Klickskelett zu erzeugen, das außerhalb jeder optischen Erwägung zeigt, welche Information auf welchen Wegen wie erreicht werden soll.

Mockplus mit geöffnetem Demo-Projekt in der Mac-Version. (Screenshot: Dr. Web)

Ich bin ein überzeugter Verfechter dieses Prototyping-Ansatzes und halte ihn für zwingend erforderlich. Für ebenso zwingend erforderlich, wie die Tätigkeit an sich, halte ich es, dass die für das Prototyping einzusetzende Lösung, diesem Ansatz konsequent folgt, also keine unnötige Komplexität ins Spiel bringt.

Das Erstellen eines Mockups muss vor allem schnell und einfach sein

Für gelernte Designer sollte das Anfertigen eines tauglichen Prototypen, je nach Komplexität des Projektes und bei Vorliegen aller Informationen, nicht länger als eine Stunde dauern dürfen. Dabei gehe ich davon aus, dass die Einarbeitungszeit in das jeweilige Tool in dieser Zeitspanne enthalten sein sollte.

Wenn du es unter dieser Voraussetzung betrachtest, dann fallen viele potenzielle Mockup-Lösungen direkt aus dem Raster. Mockups haben wir früher mit Stift und Papier erstellt und tun das auch heute vielfach noch, z.B. wenn wir direkt beim Kunden skizzieren wollen, was durchaus sinnvoll ist. Vorausgesetzt, der kundenseitig Projektveratwortliche sitzt mit am Tisch.

Im Büro möchte ich die Skizze dann nicht in ein komplexes Software-Produkt umbiegen müssen, sondern erwarte eine schlanke Lösung, die mir umstandslos das manuelle Digitalisieren meiner Skizze erlaubt.

Die gute alte Zeit?

Vor etwas mehr als zehn Jahren erstellte ich meine Prototypen noch mit Powerpoint, was ganz klar keine gute Lösung war. Ich konnte jedoch meine Skizzen schlicht als separate Slides scannen und einfügen und mit ein paar Hotspots die Interaktion simulieren. Da Powerpoint selbstausführende Präsentationen speichern konnte, war ich in der Lage, dem Kunden den Prototypen per Mail zu schicken und er war in der Lage, ihn sich anzusehen, ohne dafür Powerpoint installiert haben zu müssen. Das hat für die Freigaben stets gereicht.

Heutzutage haben wir elegantere Lösungen.

Mockplus, Prototyping-Bolide aus Asien

Heute möchte ich deinen Blick auf ein Produkt lenken, dass sich in Asien bereits großer Beliebtheit erfreut und sich aufgrund seines überzeugenden Feature-Sets nun anschickt, auch in Europa und anderen westlichen Märkten Fuß zu fassen. Ich rede von Mockplus.

Mockplus begann urspünglich als Web-App mit einem sehr reduzierten, man könnte fast sagen, fragmentarischen Funktionsumfang. Diese Zeiten hat das Produkt allerdings weit hinter sich gelassen.

Anstelle einer Web-App gibt es Mockplus inzwischen als Desktop-App für Windows und macOS, sowie als native Mobil-App für Android und iOS. Die mobilen Versionen eignen sich vor allem für die Präsentation mobiler Prototypen auf dem jeweiligen Zielgerät. Das ist besser als jede Smartphone-Simulation auf dem Desktop-Screen.

Mockplus unterstützt auch das Erstellen mobiler Prototypen. (Screenshot: Mockplus)

Mockplus kannst du in einer kostenlosen Variante umstandsfrei beim Anbieter herunterladen. Nach der Installation und einer unkomplizierten Registrierung steht dir der Umfang der Free-Version auf Dauer zur Verfügung. Die reicht für Lone Freelancer vielleicht sogar vollständig aus.

In der aktuellen Version 3.x bauten die Macher von Mockplus vor allem die Team-Features deutlich aus. So ist es jetzt möglich, Projekte direkt als Teamprojekte zu definieren, mit der Folge, dass mehrere Personen gleichzeitigen Zugriff auf die Prototypen haben. So ist es dann auch möglich, Designänderungen und andere Fragestellungen gemeinsam am Mockup zu diskutieren, so dass projektbezogene Kommunikation friktionslos am Projekt stattfinden kann.

Mockplus unterstützt die Teamarbeit, funktioniert aber auch für Soloisten.

Dabei ist die Arbeit am Prototypen aber nicht etwa so unkoordiniert, dass jeder Teilnehmer gemeinsam mit jedem anderen Teilnehmer an der gleichen Seite des Mockup schrauben könnte. Vielmehr werden aktuell in Bearbeitung befindliche Seiten für andere gesperrt. Schließlich ist nicht Chaos unser Ziel.

Trotz dieser funktionalen Erweiterung hat Mockplus die Einfachheit der Benutzung nicht aus dem Fokus verloren. So bietet die Software rund 200 interaktive Komponenten, die du per Drag and Drop einfach in deine Prototypen einbauen kannst. Hinzu kommen 3.000 Icons, mit denen du die gängigen Benutzerinterfaces problemlos abgebildet bekommst, ohne dass du jedes Mal neue Symbolik erschaffen müsstest.

3.000 Icons können simpel in die Mockups integriert werden.

Was mir persönlich besonders gut gefällt, ist, dass alle Interface-Elemente auch in einem Stil vorliegen, der wie handgezeichnet aussieht. Das hat zwar keinen konkreten Nutzwert, hält aber den digitalen Prototypen optisch nah am skizzierten Mockup. So bleibt für jeden erkenntlich, dass wir es hier mit einem Übergangszustand zu tun haben. Wer kennt nicht den Kunden, der sich direkt am ersten Designelement festbeißt und diskutieren will, ob dieser oder jener Button nicht kleiner, größer, runder oder roter sein sollte?

UI Flow: Abhängigkeiten als Montagetisch-Ansicht.

Durch die vielen vorgefertigten Elemente und interaktiven Komponenten begeben sich Prototypen mit Mockplus aber dennoch in eine Art Zwischenstatus, zwischen der reinen Skizze und dem endgültigen Produkt. Es wird dadurch leichter, sich vorzustellen, worauf das Mockup letztlich hinausläuft, ohne dabei bereits individuelles Design, im Sinne von Kundenoptik, zu benötigen. Dabei ist es, jedenfalls für mich, sehr von Vorteil, dass es die Piktogramme gibt, denn ich bin nicht sehr gut im Zeichen sehr kleiner Elemente mit der Hand. Nun ist es raus…

Wie seine Wettbewerber ist Mockplus ein WYSIWYG-Tool. Du erstellst deine Prototypen im Wesentlichen per Drag-and-Drop, kannst aber keine Codeblöcke einpflanzen. Developer mögen das vermissen, für mich gehören programmlogische Abläufe ohnehin nicht in ein Mockup. Deshalb formuliere ich es positiv so, dass du für die Verwendung von Mockplus keine Code-Kenntnisse brauchst. Insgesamt ist die Lernkurve der Software angenehm flach. Das Erlernen ist nahezu komplett intuitiv möglich. Ich habe bislang noch kein Tutorial benötigt. Wobei ich an dieser Stelle anmerken muss, dass es derer durchaus viele gibt. Wenn du also tief in die Materie einsteigen willst, legt dir Mockplus keine Steine in den Weg, sondern unterstützt dich nach Kräften, sowohl in textlicher, wie auch in audiovisueller Form.

Unterschiede der Versionen Free und Pro

In der kostenlosen Version findest du natürlich etliche Features nicht vor. Das beginnt mit dem riesigen Icon-Fundus von 3.000 Piktogrammen, der nur den Nutzern der Kaufversion zur Verfügung steht. Vor allem aber stehen fast sämtliche Export-Funktionen nur für die Pro-Nutzer bereit. So können Pro-Nutzer Projekte direkt in die Cloud synchen, als HTML oder als Bilddateien exportieren oder die Mockups ordentlich formatiert ausdrucken, sowie sie auf mobilen Geräten anzeigen lassen. Ebenso ist es möglich, Prototypen für Windows als .exe und für macOS als .app auszugeben. Weiterhin ist der gesamte Bereich der Team-Kollaboration ausschließlich für die Pro-Nutzer vorgesehen.

Mockplus vereinfacht das Anlegen wiederkehrender Inhalte deutlich.

Das sind schon deutliche Einschränkungen, aber nicht etwa so viele, dass man die Free-Version als verkappte Demo bezeichnen könnte. Alle übrigen Features sind nämlich durchaus für Free-Nutzer vorhanden. Dazu zählen vor allem sämtliche interaktiven Elemente und die sehr nützlichen Features der neuesten Version des Tools.

Letztgenannte machen Mockplus zu einer validen Alternative zu Adobe XD, das ebenfalls über derlei Funktionen verfügt, aber zwingend ein Abo der Creative Cloud voraussetzt. Moderne Apps zeichnen sich vielfach durch die Darstellung von Informationen in einer strukturierten Listenform aus. Hier bietet Mockplus einen sogenannten Repeater mit dessen Hilfe du einen Listeneintrag einmal gestaltest und dann nach unten kopierst.

Mit Auto Data Fill fügst du in die so entstandenen Listenregionen bei Bedarf Musterdaten automatisiert ein. Unverzichtbar ist zudem die Ansicht UI Flow, die dir auf einer Art Montagetisch zeigt, von welcher Seite und Funktion es Ein- und Aussprungspunkte zu welcher anderen Seite und Funktion gibt. Sehr hilfreich können auch die aus der Anwendung anwählbaren vorgefertigten Templates sein. Die neue Version von Mockplus erlaubt außerdem den Import aus Sketch. So kannst du deine Entwürfe schnell zum Leben erwecken und dennoch mit deiner mutmaßlichen Lieblingssoftware weiter werkeln.

Auto Data Fill füllt Listen mit lebendigen Daten.

Preislich gibt es zwei Modelle. Neben der kostenlosen Variante kannst du nur noch die Pro-Version wählen. Diese kostet pro Jahr und Teammitglied 199 USD oder einmalig 399 USD pro Teammitglied. In Deutschland (und anderen EU-Ländern) kommt zu diesen Preisen noch die Umsatzsteuer hinzu, es sei denn du hast eine Umsatzsteuer-ID-Nummer (EU VAT Code).

Fazit: Technisch, aber auch preislich auf der Höhe der Zeit

Wie lautet nun die Empfehlung? Mockplus ist kein Schnäppchen, sondern positioniert sich auf einer Ebene mit anderen Wettbewerbern, wobei der Fairness halber schon gesagt werden muss, dass es auch noch deutlich teurere Angebote gibt. Der Preis ist aber kein klarer USP.

Jedenfalls empfehle ich dir, die kostenlose Version runterzuladen und auszuprobieren. Gerade beim Prototyping ist es wichtig, dass du dich in der Umgebung schnell zurecht und vor allem wohlfühlst. Stellt dich die englische Sprache vor Probleme, wird Mockplus eher nichts für dich sein, da die Oberfläche zwangsläufig recht textintensiv ist. Bist du des Englischen mächtig, ist Mockplus auf jeden Fall ein Tool, dass es lohnt, genauer anzusehen.