Prototyping ist mehr als Papierflieger basteln – Teil 1

verschiedene Bastelmaterialien

Digitale Strategie und Prototyping gehen Hand in Hand

Knappes Budget, ein enger Zeitrahmen, kaum Ressourcen in den Abteilungen. Und dennoch lautet die digitale Strategie Ihres Unternehmens, dass Kunden ab sofort Ihre Rechnungen auch online einsehen können und Ihre Produkte oder Dienstleistungen auch online bestellen können sollen? Und was jetzt?

Wie beginnen?

Die Umsetzung einer digitalen Strategie startet. Die Fachabteilung, die Entwickler, die Designer und die Marketing Abteilung kommen an einen Tisch. Die Ziele sind schon geklärt, aber das Projekt steckt noch in den Kinderschuhen: Es wird überlegt, wie der Kunde sich einloggen kann, was er wann sehen muss und was er dann bestellen kann. Aber mit diesen wenigen Informationen gleich einen Grafiker und einen Programmierer an das Projekt lassen? Das fühlt sich trotz der knappen Zeit nicht ganz richtig an.

Dieses Gefühl täuscht Sie nicht. Ist es nicht auch schon vorgekommen, dass kurz vor dem online Gehen einer neuen Funktion auf Ihrer Website irgendjemand gesagt hat: „Aber diese Information haben wir doch noch gar nicht!“. Auf einem Mockup – also einer Designstudie – wäre dies schon in einem der vorherigen Meetings aufgefallen. Und in einem Prototyp wäre auch schon früher klar gewesen, dass beispielsweise diese Preisinformationen an dieser Schnittstelle noch gar nicht berechnet werden können.

All diese Dinge zu klären, BEVOR der erste Code programmiert und das visuelle Design gemacht ist, spart Ihnen mühsame und auch kostenintensive Anpassungen. Dazu benötigt man aber nicht nur ein gutes Projektmanagement sondern vor allem Wireframes, Mockups und Prototyping.

Wireframes oder Mockup – Was ist was?

Was ist nun ein Wireframe? Warum braucht man Mockups und ist es nicht sehr teuer einen Prototyp zu machen?

Wireframes

Wireframes sind sogenannte Blue Prints (Blaupausen) eines Designs – also die Vorstufe mit vielen Platzhaltern. Ein Bild sagt mehr als reiner Text, aber das finale Design wäre noch viel zu früh – daher machen User Experience (UX) Experten einen Wireframe, quasi eine Skizze des zukünftigen Designs. Diese kann diskutiert und deutlich kostengünstiger angepasst werden. Erst wenn alle zugestimmt haben, geht es weiter.

Mockups

Mockups sind einem Wireframe in ihren Charaktereigenschaften sehr ähnlich – aber bei einem Mockup geht es eher um die Funktionalität als um die Optik. Es ist von Beginn an klar, dass es sich nicht um ein finales Design handelt. Ein Mockup kann von extrem skizzenhaft (auch auf Papier) bis hin zu einem Entwurf mit Farben, Formen, Icons und anderen Details reichen. Der Fokus liegt aber auf der Abfolge der Schritte und auf den Funktionalitäten (also das, was später ein Entwickler programmieren muss).

Wireframes vs. Mockup

Das heißt, auf einem Wireframe erkennen Sie, wo welche Box mit welchen Infos zu finden ist, wie das Design als Gesamtes wirkt, aber auch wo später zum Beispiel Werbung angezeigt wird oder wie sich das mobile Design im Gegensatz zum Desktop Design verhält.

In einem Mockup sieht man, wann der User welchen Button klicken kann, was dann passiert und wie sich dadurch die Anzeige verändert. Üblicherweise wird eine Mischung der beiden Methoden eingesetzt – eine strikte Trennung ist meist gar nicht notwendig und man spart auch hier Aufwand.

Kann man drauf klicken, ist es Prototyping

Wird dieses skizzenhafte Design auch klickbar und man sieht durch den Klick auch Änderungen im Design (z.B.: der Preis wird berechnet oder der Warenkorb gefüllt) spricht man schon von einem Prototyp. Dieser wiederum kann von einem reinen „Klickdummy“ (Fokus ist hier meist die Kundenperspektive – was wird der Kunde „erleben“, wenn er den Prozess durchklickt) bis hin zu einem technischen Prototyp reichen, wo zum Beispiel eine Schnittstelle angebunden ist.

Oftmals werden die Begriffe vertauscht oder gleichbedeutend eingesetzt – letztlich sind es aber nur Bezeichnungen – es geht uns viel mehr um den Einsatz an sich: Denn die Vorteile überwiegen und erfolgreiche IT Projekte unterscheiden sich ganz deutlich von denen, wo vorab nicht geklärt wurde, ob die Funktionalitäten möglich sind und alle Stakeholder das Design abgenommen haben und geprüft wurde, ob der Kunde die Funktionalitäten akzeptiert.

Wichtig ist der Plan, die digitale Strategie

Prototyping, Wireframing und Mockups sind also nicht nur „Zeichnungen“, sie sind vielmehr ein Plan. Ein guter Usability Engineer setzt Wireframes und Mockups ein, um mit der Fachabteilung, dem Kunden und der Technik abzuklären, wie der Prozess definiert wird: Was passiert wirklich, wenn der Kunde sich einloggt, welche Produkte kann er dann bestellen, ab wann wird der Preis berechnet und wo wird der Rabatt angezeigt.

Mockups und Wireframes reihen sich aneinander und je nachdem wie komplex der Prozess ist, macht es Sinn, hier auch einen Prototypen mit Funktionen oder nur einen Klickdummy zu erstellen. Aber sogar mit einem Papier-Mockup kann man mit relevanten Kunden (User Tests) schon vor der Programmierung ausprobieren, wie sich das neue Interface „anfühlt“.

Letztlich ist es eine Frage der Relevanz des Projekts und der Verfügbarkeit guter User Interface Experten wofür man sich entscheidet – Hauptsache man hat einen Plan.

Und was jetzt?

Unsere User Interface Experten, die das Projekt begleiten, setzten hierfür Tools ein, um die Brücke von den Ideen zum finalen Produkt (mit Code und Grafik Design) zu schlagen. Am Markt existieren einige Anbieter in diesem Bereich – bei USECON setzen wir vor allem diese 2 Tools ein: Balsamiq Mockups und Axure RP. Beide Tools haben Ihre Vor- und Nachteile.

In den nächsten Beiträgen gehen wir näher auf diese beiden Verfahren ein. Wenn Sie jedoch nicht so lange warten möchten, legen wir Ihnen unser Prototyping Training ans Herz. Erkundigen Sie sich bei Michael Bechinie, was wir in diesem Bereich für Sie tun können.

Lesen Sie außerdem von einem Hardware Prototyping Beispiel, das wir für einen Kunden gebaut haben. Denn Prototyping ist mehr, als nur Papierflieger basteln.

Ein Gastbeitrag von Birgit Harthum.

Diesen Beitrag teilen