Prototyping ist mehr als Papierflieger basteln – Teil 2
Welche Tools eignen sich wofür
Sie haben schon unseren Blog Beitrag gelesen, warum man Mockups, Prototyping und Wireframes in guten IT Projekten einsetzt? Wir bei USECON sind davon überzeugt, dass der Einsatz solcher Design-Methoden den Unterschied bei exzellenten IT Projekten macht.
Vor- und Nachteile
In unseren Projekten setzen wir diese Methoden als Teil des User Interface Design Prozesses ein. Oftmals werden wir von Kunden gefragt, welche Tools wir hierfür verwenden – Daher wollen wir Ihnen zwei dieser Tools vorstellen: Balsamiq Mockups und Axure RP.
Bei USECON werden diese Tools nicht nur von unseren User Interface Designern genutzt, sondern auch von unseren Consultants. Denn Basis Wireframes und Mockups kann jeder erstellen – für die ersten Schritte muss man kein User Interface Designer sein und Tools wie Balsamiq Mockups unterstützen hierbei sehr gut. (Über den Einsatz von Axure XP, bei USECON lesen Sie im dritten Teil dieser Blogreihe.)
Balsamiq Mockup
Vorteile:
- Schnell zu erlernen, einfach mit Drag und Drop zu bedienen
- Reduzierte, skizzenhafte Darstellung mit Fokus auf den Prozess
- Kostengünstig
Nachteile:
- Limitierte Funktionen
- Keine interaktiven Prototypen
- Limitierte Auswahl an UI Elementen
Axure RP
Vorteile:
- Erstellung (auch) komplexer Prototypen darstellen
- HTML ist teilbar
- Breite Auswahl an Elementen
Nachteile:
- Kostenintensiv
- Nicht so einfach für Erst-User
- Entfaltet sein Repertoire erst mit der Zeit
Design Tool oder Mockup Tool?
Balsamiq Mockups ist kein Design Tool, sondern ein Mockup Tool – was genau heißt das?
Wichtig ist es, einen der Grundsätze des User Interface Designs zu verstehen: die Optik steht während des Design Prozesses nicht an erster Stelle – denn schön kann eine Software, eine Website oder ein Web Shop schnell mal gemacht werden. Im Vordergrund stehen die Benutzbarkeit und der eigentliche Prozess. Sie wollen ja nicht, dass Ihre Kunden in Ihren Web Shop kommen, „Ja, der ist schön!“ sagen, aber wieder gehen. Nein, Sie wollen, dass der Kunde kauft und so zufrieden mit dem Prozess ist, dass er wieder kauft. Gerade bei komplexeren Abläufen ist es daher wichtig, dass ganz klar definiert wird, wann der Kunde was sieht, welche Informationen ihm beispielsweise als Premium Kunde angezeigt werden und welche Schritte er durchlaufen soll. Werden diese Dinge besprochen bevor die erste Zeile Code programmiert ist, können alle Projektmitglieder ihre Anmerkungen loswerden und Änderungen sind einfach zu machen. Anpassungen sind zu diesem Zeitpunkt noch kostengünstig. Wenn alle mit dem Wireframe oder Mockup zufrieden sind, können daraus ein grafisches Design und eine Applikation entstehen. Klingt einfach – ist es auch: natürlich ist es Aufwand solche Mockups zu machen, aber den Aufwand haben nur ein paar Menschen in Ihrem Unternehmen (oder Ihr bevorzugter User Experience Consultant) und daher kostet es letztlich deutlich weniger und die Chancen steigen, dass die Conversion auch tatsächlich stattfindet.
Merke
Measure twice, cut once: So lange den Prozess im Rohzustand durchgehen, bis der Prozess auch umsetzbar ist und dann erst „hübsch machen“ – das ist die Basis eines erfolgreichen User Interface Designs. Lesen Sie hier, warum Wireframes, Mockups und Prototyping den Unterschied bei erfolgreichen digitalen Projekten machen.
Was kann Balsamiq Mockups nun genau?
Sehen wir uns das Tool „Balsamiq Mockups“ genauer an: Das Unternehmen wurde 2008 in Sacramento, Kalifornien gegründet. Das Hauptziel der Anwendung ist es, den Menschen zu helfen, Software und Webseiten zu erstellen, die einfacher zu nutzen sind. Also IT-Projekte dahingehend zu unterstützen, dass das Endprodukt auch eine gute User Experience für die Nutzer liefert.
User Interface Designer sollen damit Wireframes und Mockups skizzieren, um die Prozesse für die Website, mobile oder Desktop Anwendung VOR der eigentlichen technischen und grafischen Umsetzung so kundengerecht wie möglich zu gestalten. Balsamiq Mockups fokussiert dabei auf die Phase der Ideenfindung. In diesem Abschnitt unterstützt das Tool am besten. Fokus auf Strukturen, Abläufe und Prozesse – nicht auf Farben und Icons.
Visualisierung
Balsamiq Mockups bietet in seiner Bibliothek Funktionen, die typischerweise auf Websites oder Applikationen gebraucht werden, als skizzenhafte Elemente an. Diese können mittels Drag und Drop zu einem Mockup oder Wireframe zusammengefügt und ergänzt werden. Mit wenigen Klicks kann man visualisieren, wie die Idee im Kopf dann für den User am Bildschirm aussehen könnte. Dieses Tool reproduziert dadurch das Skizzieren am Whiteboard auf dem Computer. Mittels einfacher Einstellungen kann man auch veranschaulichen, wie sich ein Design durch Klicken bestimmter Funktionen verändert – es handelt sich aber nicht um Klickdummies, sondern eher um die Visualisierung von Status-Anzeigen. Die zur Verfügung stehenden Elemente sind per Definition von Balsamiq Mockups bereits userfreundlich gestaltet. Diese handschriftähnliche Gestaltung von Skizzen ist einzigartig in der Welt der Mockups oder Wireframing Tools und ermöglicht wirklich einen Fokus auf den Prozess – losgelöst von geschmackunterworfenen Elementen wie Farbe, Icons oder Ähnlichem.
Balsamiq Mockups bietet Beschreibungen, Tutorials und Best Practices Studien an, um sich das Tool anzueignen. Es ermöglicht auch Laien erste Schritte in eine userfreundliche Gestaltung von Prozessen und ist tatsächlich so einfach zu bedienen, dass man innerhalb von ein paar Minuten sein erstes Mockup gestalten kann. Balsamiq betont gleichzeitig, dass Erfahrung im User Interface Design natürlich einen Unterschied macht und die reine Zusammenstellung der einzelnen Elemente noch kein exzellentes User Interface Design macht. Wireframes und Mockups sind nur ein Teil des gesamten Produkt Design Prozesses. Möglicherweise sollte man auch Personas, Fokusgruppen, Usability Tests, Experten Interviews, Sitemaps, Prototypen oder eine weitere Design Technik einsetzen, um ans Ziel (Conversion steigern) zu kommen.
Kontaktieren Sie uns!
Eine digitale Strategie und Customer Experience umzusetzen, die Ihre Kunden zu zufriedenen Kunden macht, ist unser gemeinsames Ziel – ein Teil davon ist das User Interface Design und ein Teil davon sind Mockups, Wireframes und Prototyping. Bevor Sie das nächste Mal einen Prozess mit Worten beschreiben, machen Sie doch vorher ein Mockup – es hilft nicht nur, es anderen Personen zu erklären, sondern man selbst bekommt ebenfalls ein klareres Bild, ob der Ablauf so umsetzbar ist und auch Sinn macht.
Neben Balsamiq Mockups setzen wir in unseren Projekten auch das Tool Axure RP ein – lesen Sie dazu den dritten Teil unserer Blogreihe.
Wollen Sie erfahren, wie Sie Balsamiq Mockups zielführend in Ihren Digitalisierungsprojekten einsetzen können? Michael Bechinie steht Ihnen gerne für Fragen zur Verfügung. Werfen Sie auch einen Blick in unser Trainingsangebot zum Thema Prototyping.
Ein Gastbeitrag von Birgit Harthum.
