Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Dieter Petereit 2. Januar 2018

Probier es selbst: Mockplus macht Prototyping zum Kinderspiel

Die Prototyping-Software Mockplus aus Asien erfreut sich auch in Europa immer grö­ße­rer Beliebtheit. Mockups erstellst du damit fast schon intui­tiv. Wir haben uns das Tool für dich ange­schaut.

Ohne Mockups ist komplexes Design zu fehleranfällig

Sobald ein Design mehr als ein paar Seiten umfas­sen soll, ergibt es Sinn, sich vor­her Gedanken über die Struktur zu machen und die­se Gedanken in einen rohen Prototypen flie­ßen zu las­sen. Dessen wesent­li­che Aufgabe ist es, sich selbst, dem Rest des Designteams, wenn es eines gibt, und dem even­tu­el­len Kunden Klarheit über die Informationsarchitektur zu ver­schaf­fen.

Dabei geht es mit­hin nicht dar­um, pro­duk­ti­ons­rei­fe Assets zu erstel­len, wie du es etwa mit Sketch könn­test, son­dern ledig­lich ein benutz­ba­res Klickskelett zu erzeu­gen, das außer­halb jeder opti­schen Erwägung zeigt, wel­che Information auf wel­chen Wegen wie erreicht wer­den soll.

Mockplus mit geöff­ne­tem Demo-Projekt in der Mac-Version. (Screenshot: Dr. Web)

Ich bin ein über­zeug­ter Verfechter die­ses Prototyping-Ansatzes und hal­te ihn für zwin­gend erfor­der­lich. Für eben­so zwin­gend erfor­der­lich, wie die Tätigkeit an sich, hal­te ich es, dass die für das Prototyping ein­zu­set­zen­de Lösung, die­sem Ansatz kon­se­quent folgt, also kei­ne unnö­ti­ge Komplexität ins Spiel bringt.

Das Erstellen eines Mockups muss vor allem schnell und einfach sein

Für gelern­te Designer soll­te das Anfertigen eines taug­li­chen Prototypen, je nach Komplexität des Projektes und bei Vorliegen aller Informationen, nicht län­ger als eine Stunde dau­ern dür­fen. Dabei gehe ich davon aus, dass die Einarbeitungszeit in das jewei­li­ge Tool in die­ser Zeitspanne ent­hal­ten sein soll­te.

Wenn du es unter die­ser Voraussetzung betrach­test, dann fal­len vie­le poten­zi­el­le Mockup-Lösungen direkt aus dem Raster. Mockups haben wir frü­her mit Stift und Papier erstellt und tun das auch heu­te viel­fach noch, z.B. wenn wir direkt beim Kunden skiz­zie­ren wol­len, was durch­aus sinn­voll ist. Vorausgesetzt, der kun­den­sei­tig Projektveratwortliche sitzt mit am Tisch.

Im Büro möch­te ich die Skizze dann nicht in ein kom­ple­xes Software-Produkt umbie­gen müs­sen, son­dern erwar­te eine schlan­ke Lösung, die mir umstands­los das manu­el­le Digitalisieren mei­ner Skizze erlaubt.

Die gute alte Zeit?

Vor etwas mehr als zehn Jahren erstell­te ich mei­ne Prototypen noch mit Powerpoint, was ganz klar kei­ne gute Lösung war. Ich konn­te jedoch mei­ne Skizzen schlicht als sepa­ra­te Slides scan­nen und ein­fü­gen und mit ein paar Hotspots die Interaktion simu­lie­ren. Da Powerpoint selbst­aus­füh­ren­de Präsentationen spei­chern konn­te, war ich in der Lage, dem Kunden den Prototypen per Mail zu schi­cken und er war in der Lage, ihn sich anzu­se­hen, ohne dafür Powerpoint instal­liert haben zu müs­sen. Das hat für die Freigaben stets gereicht.

Heutzutage haben wir ele­gan­te­re Lösungen.

Mockplus, Prototyping-Bolide aus Asien

Heute möch­te ich dei­nen Blick auf ein Produkt len­ken, dass sich in Asien bereits gro­ßer Beliebtheit erfreut und sich auf­grund sei­nes über­zeu­gen­den Feature-Sets nun anschickt, auch in Europa und ande­ren west­li­chen Märkten Fuß zu fas­sen. Ich rede von Mockplus.

Mockplus begann urspüng­lich als Web-App mit einem sehr redu­zier­ten, man könn­te fast sagen, frag­men­ta­ri­schen Funktionsumfang. Diese Zeiten hat das Produkt aller­dings weit hin­ter sich gelas­sen.

Anstelle einer Web-App gibt es Mockplus inzwi­schen als Desktop-App für Windows und macOS, sowie als nati­ve Mobil-App für Android und iOS. Die mobi­len Versionen eig­nen sich vor allem für die Präsentation mobi­ler Prototypen auf dem jewei­li­gen Zielgerät. Das ist bes­ser als jede Smartphone-Simulation auf dem Desktop-Screen.

Mockplus unter­stützt auch das Erstellen mobi­ler Prototypen. (Screenshot: Mockplus)

Mockplus kannst du in einer kos­ten­lo­sen Variante umstands­frei beim Anbieter her­un­ter­la­den. Nach der Installation und einer unkom­pli­zier­ten Registrierung steht dir der Umfang der Free-Version auf Dauer zur Verfügung. Die reicht für Lone Freelancer viel­leicht sogar voll­stän­dig aus.

In der aktu­el­len Version 3.x bau­ten die Macher von Mockplus vor allem die Team-Features deut­lich aus. So ist es jetzt mög­lich, Projekte direkt als Teamprojekte zu defi­nie­ren, mit der Folge, dass meh­re­re Personen gleich­zei­ti­gen Zugriff auf die Prototypen haben. So ist es dann auch mög­lich, Designänderungen und ande­re Fragestellungen gemein­sam am Mockup zu dis­ku­tie­ren, so dass pro­jekt­be­zo­ge­ne Kommunikation frik­ti­ons­los am Projekt statt­fin­den kann.

Mockplus unter­stützt die Teamarbeit, funk­tio­niert aber auch für Soloisten.

Dabei ist die Arbeit am Prototypen aber nicht etwa so unko­or­di­niert, dass jeder Teilnehmer gemein­sam mit jedem ande­ren Teilnehmer an der glei­chen Seite des Mockup schrau­ben könn­te. Vielmehr wer­den aktu­ell in Bearbeitung befind­li­che Seiten für ande­re gesperrt. Schließlich ist nicht Chaos unser Ziel.

Trotz die­ser funk­tio­na­len Erweiterung hat Mockplus die Einfachheit der Benutzung nicht aus dem Fokus ver­lo­ren. So bie­tet die Software rund 200 inter­ak­ti­ve Komponenten, die du per Drag and Drop ein­fach in dei­ne Prototypen ein­bau­en kannst. Hinzu kom­men 3.000 Icons, mit denen du die gän­gi­gen Benutzerinterfaces pro­blem­los abge­bil­det bekommst, ohne dass du jedes Mal neue Symbolik erschaf­fen müss­test.

3.000 Icons kön­nen sim­pel in die Mockups inte­griert wer­den.

Was mir per­sön­lich beson­ders gut gefällt, ist, dass alle Interface-Elemente auch in einem Stil vor­lie­gen, der wie hand­ge­zeich­net aus­sieht. Das hat zwar kei­nen kon­kre­ten Nutzwert, hält aber den digi­ta­len Prototypen optisch nah am skiz­zier­ten Mockup. So bleibt für jeden erkennt­lich, dass wir es hier mit einem Übergangszustand zu tun haben. Wer kennt nicht den Kunden, der sich direkt am ers­ten Designelement fest­beißt und dis­ku­tie­ren will, ob die­ser oder jener Button nicht klei­ner, grö­ßer, run­der oder roter sein soll­te?

UI Flow: Abhängigkeiten als Montagetisch-Ansicht.

Durch die vie­len vor­ge­fer­tig­ten Elemente und inter­ak­ti­ven Komponenten bege­ben sich Prototypen mit Mockplus aber den­noch in eine Art Zwischenstatus, zwi­schen der rei­nen Skizze und dem end­gül­ti­gen Produkt. Es wird dadurch leich­ter, sich vor­zu­stel­len, wor­auf das Mockup letzt­lich hin­aus­läuft, ohne dabei bereits indi­vi­du­el­les Design, im Sinne von Kundenoptik, zu benö­ti­gen. Dabei ist es, jeden­falls für mich, sehr von Vorteil, dass es die Piktogramme gibt, denn ich bin nicht sehr gut im Zeichen sehr klei­ner Elemente mit der Hand. Nun ist es raus…

Wie sei­ne Wettbewerber ist Mockplus ein WYSIWYG-Tool. Du erstellst dei­ne Prototypen im Wesentlichen per Drag-and-Drop, kannst aber kei­ne Codeblöcke ein­pflan­zen. Developer mögen das ver­mis­sen, für mich gehö­ren pro­gramm­lo­gi­sche Abläufe ohne­hin nicht in ein Mockup. Deshalb for­mu­lie­re ich es posi­tiv so, dass du für die Verwendung von Mockplus kei­ne Code-Kenntnisse brauchst. Insgesamt ist die Lernkurve der Software ange­nehm flach. Das Erlernen ist nahe­zu kom­plett intui­tiv mög­lich. Ich habe bis­lang noch kein Tutorial benö­tigt. Wobei ich an die­ser Stelle anmer­ken muss, dass es derer durch­aus vie­le gibt. Wenn du also tief in die Materie ein­stei­gen willst, legt dir Mockplus kei­ne Steine in den Weg, son­dern unter­stützt dich nach Kräften, sowohl in text­li­cher, wie auch in audio­vi­su­el­ler Form.

Unterschiede der Versionen Free und Pro

In der kos­ten­lo­sen Version fin­dest du natür­lich etli­che Features nicht vor. Das beginnt mit dem rie­si­gen Icon-Fundus von 3.000 Piktogrammen, der nur den Nutzern der Kaufversion zur Verfügung steht. Vor allem aber ste­hen fast sämt­li­che Export-Funktionen nur für die Pro-Nutzer bereit. So kön­nen Pro-Nutzer Projekte direkt in die Cloud syn­chen, als HTML oder als Bilddateien expor­tie­ren oder die Mockups ordent­lich for­ma­tiert aus­dru­cken, sowie sie auf mobi­len Geräten anzei­gen las­sen. Ebenso ist es mög­lich, Prototypen für Windows als .exe und für macOS als .app aus­zu­ge­ben. Weiterhin ist der gesam­te Bereich der Team-Kollaboration aus­schließ­lich für die Pro-Nutzer vor­ge­se­hen.

Mockplus ver­ein­facht das Anlegen wie­der­keh­ren­der Inhalte deut­lich.

Das sind schon deut­li­che Einschränkungen, aber nicht etwa so vie­le, dass man die Free-Version als ver­kapp­te Demo bezeich­nen könn­te. Alle übri­gen Features sind näm­lich durch­aus für Free-Nutzer vor­han­den. Dazu zäh­len vor allem sämt­li­che inter­ak­ti­ven Elemente und die sehr nütz­li­chen Features der neu­es­ten Version des Tools.

Letztgenannte machen Mockplus zu einer vali­den Alternative zu Adobe XD, das eben­falls über der­lei Funktionen ver­fügt, aber zwin­gend ein Abo der Creative Cloud vor­aus­setzt. Moderne Apps zeich­nen sich viel­fach durch die Darstellung von Informationen in einer struk­tu­rier­ten Listenform aus. Hier bie­tet Mockplus einen soge­nann­ten Repeater mit des­sen Hilfe du einen Listeneintrag ein­mal gestal­test und dann nach unten kopierst.

Mit Auto Data Fill fügst du in die so ent­stan­de­nen Listenregionen bei Bedarf Musterdaten auto­ma­ti­siert ein. Unverzichtbar ist zudem die Ansicht UI Flow, die dir auf einer Art Montagetisch zeigt, von wel­cher Seite und Funktion es Ein- und Aussprungspunkte zu wel­cher ande­ren Seite und Funktion gibt. Sehr hilf­reich kön­nen auch die aus der Anwendung anwähl­ba­ren vor­ge­fer­tig­ten Templates sein. Die neue Version von Mockplus erlaubt außer­dem den Import aus Sketch. So kannst du dei­ne Entwürfe schnell zum Leben erwe­cken und den­noch mit dei­ner mut­maß­li­chen Lieblingssoftware wei­ter wer­keln.

Auto Data Fill füllt Listen mit leben­di­gen Daten.

Preislich gibt es zwei Modelle. Neben der kos­ten­lo­sen Variante kannst du nur noch die Pro-Version wäh­len. Diese kos­tet pro Jahr und Teammitglied 199 USD oder ein­ma­lig 399 USD pro Teammitglied. In Deutschland (und ande­ren EU-Ländern) kommt zu die­sen Preisen noch die Umsatzsteuer hin­zu, es sei denn du hast eine Umsatzsteuer-ID-Nummer (EU VAT Code).

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

Wie lau­tet nun die Empfehlung? Mockplus ist kein Schnäppchen, son­dern posi­tio­niert sich auf einer Ebene mit ande­ren Wettbewerbern, wobei der Fairness hal­ber schon gesagt wer­den muss, dass es auch noch deut­lich teu­re­re Angebote gibt. Der Preis ist aber kein kla­rer USP.

Jedenfalls emp­feh­le ich dir, die kos­ten­lo­se Version run­ter­zu­la­den und aus­zu­pro­bie­ren. Gerade beim Prototyping ist es wich­tig, dass du dich in der Umgebung schnell zurecht und vor allem wohl­fühlst. Stellt dich die eng­li­sche Sprache vor Probleme, wird Mockplus eher nichts für dich sein, da die Oberfläche zwangs­läu­fig recht text­in­ten­siv ist. Bist du des Englischen mäch­tig, ist Mockplus auf jeden Fall ein Tool, dass es lohnt, genau­er anzu­se­hen.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Ein Kommentar

  1. Vielen Dank für den Beitrag, Dieter. Das moti­viert mich eine Alternative zu Adobe XD zumin­dest mal aus­zu­pro­bie­ren.

    Ziel erreicht, kann man sagen! ;)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.