Wie ein Prototyp hilft, bessere und effiziente Software zu entwickeln

10. September 2015Nils Koenigshofen

Anwendungen bestehen größtenteils aus Interaktionen mit der Oberfläche: Buttons, Regler, Ein- und Ausgaben, visuelle Anzeigen, Tabellen und Dialoge, die Entscheidungen vom Nutzer erwarten. Doch in der Planung und Konzeption ist diese dreidimensionale Kommunikationsebene meist nur spärlich beschrieben. Trotzdem entsteht aus dieser wichtigen Komponente später ein zentrales Element zur Erfolgsmessung einer Anwendung: positive User Experience (UX).

Je früher die Interaktionskomponente in die Beschreibung, Planung und Entwicklung integriert wird, umso deutlicher kann die positive UX beeinflusst werden. Hier helfen Prototypen und Visualisierungsmethoden jeglicher Form.

Oft werden aus Kostengründen keine Prototypen erstellt, sondern agile Vorgehensweisen als Basis herangezogen, um die Software immer wieder anpassen zu können. Aber die klassische Architektur lehrt uns, dass eine reine Beschreibung für den Bau und die Entwicklung komplexer Gebilde nicht ausreicht – man braucht Modelle, Pläne, Skizzen und Anmutungen. Der Mensch ist stark auf seine visuelle Wahrnehmung angewiesen und trifft aufgrund der optischen Wahrnehmung die meisten seiner Entscheidungen. Das hilft bei der Entwicklung effizienter und durchdachter Software mit positiver UX.

Formfaktoren von UX-Design

Im Grunde gibt es drei Charakteristika einer Software, die man beim UX-Design betrachtet:

  • Funktionalität: Was kann die Anwendung?
  • Interaktivität: Wie funktioniert sie?
  • Visualität: Wie stellt sie sich dar?

Alle anderen Bedingungen wie Technologie, Ausgabekanal, Zielgruppe, Nutzungskontext und Styleguides etc. muss der UX-Designer kennen und beachten. Ansonsten geht er die drei Grundkapitel von oben nach unten in immer genauerer Betrachtung durch:

  • Definition des Hauptnutzens.
  • Welche Prozesse sind dafür nötig?
  • Wie funktionieren sie und nehmen aufeinander Einfluss?
  • Visualisierung dieser Vorgaben in einer ersten Skizze oder Mockup zusammen mit allen Beteiligten.

Visual Application Design, Design Thinking oder Interaction Room – macht euch ein Bild

Die Methoden, um einen ersten Konzeptaufschlag zu erhalten, sind vielfältig – wichtig ist nur, dass sie am Ende eine visuelle Grundlage für die Diskussion und Entwicklung bereitstellen. Skizzen, Bilder und Wireframes helfen jedem Beteiligten, schnell einen Überblick zu erhalten und Zusammenhänge zu verstehen.

Vorteilhaft ist, dass man eine Skizze schnell auf ein Whiteboard malen kann, um Prozesse –  wie im Interaction Room – zu visualisieren. Alle wissen, was gemeint ist und man befindet sich auf einer abstrakten Ebene, die nicht detailgetreu ist. Darum geht es ja auch nicht. Es geht um das gemeinsame entwickeln der UX anhand der Oberflächen und Interaktionen.

Hier ist der Prozess am agilsten: Es kann herumgemalt, verschoben, verplant und neu gemacht werden. Der Kostenfaktor dieser Änderungen ist dementsprechend gering. Es ist besser jetzt schon festzustellen, dass ein Formular nicht funktioniert oder ein Prozess unübersichtlich ist, als bei bereits entwickelter Software. Ein Bild sagt eben mehr als tausend Worte.

Wireframes, Sketches, Mockups und andere

Während bei Skizzen auf oberster, abstrakter Ebene erst einmal alle Elemente (ohne Inhalte und Texte) platziert werden, sind Wireframes schon präziser und bilden Navigationsstrukturen, Inhaltstypen und Bezeichnungen von Buttons und Headlines ab. Hier werden meist schon Standardelemente wie Breadcrumb-Navigationen, Symbolleisten, Menüs, Paginierungen und andere Funktionalitäten abgebildet.

In den Mockups (oder Designmockups) wird dann das konkrete Corporate Design über die Wireframes gezogen und mit konkreten Textbeispielen versehen. Erst dann kann man erkennen, ob die wichtigsten Elemente auch sofort visuell erfasst werden können und ob der geplante Platz für Texte oder Tabellen wirklich ausreicht.

Parallel zu den Designmockups kann schon ein Screenflow als Basis des Prototyps entwickelt werden. Dazu werden die einzelnen Masken in eine sinnvolle – der Nutzerführung angepasste – Reihenfolge als UI-Map gesetzt. Damit kann direkt geprüft und abgeleitet werden, ob der Nutzer die für ihn relevanten Prozesse effektiv erreichen, durchführen und abschließen kann. Auch dafür reichen Skizzen und Wireframes aus.

Click-Dummys oder Prototypen

Click-Dummys sind schnell erstellt und müssen nicht zwangsläufig programmiert werden. Hier reicht es, wenn die Designmockups hintereinander geschaltet werden und per Mausklick auf entsprechende Stellen „durchgespielt“ werden können. Man bekommt einen ersten Eindruck von der UX und dem Verhalten der Anwendung auf tatsächliche Nutzerinteraktionen – noch bevor eine Zeile Code programmiert wurde. Für unsere Wahrnehmung und unser Feedback reicht diese Darstellung aus, um die echte Anwendung zu simulieren.

Prototypen sind die effektivste Methode, die Software oder Anwendung vor der Fertigstellung in Richtung UX mit all ihren Facetten zu testen. Meist werden diese schon in HTML und CSS erstellt und können als HTML5-Prototyp auch auf verschiedenen Endgeräten getestet werden. Der spätere Nutzer kann also schon sehr früh die Nutzung der Anwendung testen. Dazu bieten sich natürlich auch Usability Tests an.

Quantitative Daten wie Kommentare lassen sich über Shadowing, halbstrukturierte Interviews, anschließende Fragebögen, Think-Aloud- oder Co-Discovery-Tests sammeln. Der Vorteil quantitativer Daten ist deren große Offenheit und Flexibilität in den Ergebnissen. Das hilft besonders, wenn mögliche Beurteilungskriterien bekannt sind. Bei Think-Aloud – eine Methode, bei der der Benutzer einen Prozess durchläuft und dabei verbal dokumentiert – erhält der UX-Designer zum Beispiel subjektive und teilweise sehr umfangreiche Einschätzungen zu Prototypen. Diese fließen anschließend direkt in das Update ein. Damit sind vor der Programmierung die wichtigsten Usability Bugs schon ausgemerzt.

Ein Vorteil der HTML-Prototypen ist ihre Wiederverwendbarkeit für das spätere Projekt. Die Oberflächen müssen quasi nur noch mit der Technik und dem Backend verdrahtet werden. Es ist somit also kein Mehraufwand, sondern eher effiziente Zielentwicklung.

Prototyping-Tools für alle Projektlagen

Es gibt eine Vielzahl von Tools, die teils sehr einfach oder auch sehr aufwändig und interaktiv sein können. Entwickler erstellen Wireframes gerne mit Balsamiq oder Axure. Designer setzen eher auf Omnigraffle, Fireworks oder Illustrator. Zudem gibt es diverse Wireframing-Kits für iOS, Android, Windows, Mac und Co. Die PowerPoint- oder Keynote-Vorlagen von Keynotopia eignen sich für alle, die keinen Zugang zu Designtools haben. Bei Web Tools beschleunigt der Einsatz von HTML und CSS das Layout und Styling erheblich.

User-Centered-Design-Prozess – immer wieder am Rad drehen

Da wir im gesamten Prozess bis zum Prototypen nur Artefakte mit wenig Erstellungsaufwand haben, sind diese auch immer mit ebenso wenig Aufwand wieder zu ändern/optimieren. Dies kommt dem User-Centered-Design-Prozess sehr entgegen, denn bei diesem agilen Ansatz wird immer die aktuelle GUI getestet und mit den Ergebnissen optimiert und weiterentwickelt. Dabei ist das Mengengerüst der Masken oder die Menge an Nutzern, die die Prototypen testen und besprechen, erst einmal unterschiedlich und auch nicht wichtig, da jedes Feedback in Wireframes und Prototypen schnell und unkompliziert einfließen kann.

Fazit

Prototypen helfen, schnell und effizient einen Überblick über die zu entwickelnde Anwendung zu bekommen. Der Aufwand hält sich meist in Grenzen, es kann früh im Projekt mit den ersten Skizzen begonnen werden und man erhält einen „nicht-technischen“ Blick auf das Gesamtprojekt. Fehler können schnell eruiert und schon vor der Programmierung erkannt und behoben werden. Hier steht immer der geringe Aufwand des Prototyping der langen Korrekturphase einer bereits programmierten Anwendung gegenüber.

Als Grundlage für die Projektkommunikation über alle Disziplinen und Teilprojektbereiche haben sich Prototypen (egal ob Skizzen oder klickbare HTML-Boliden) immer bewährt. Unsere visuelle Wahrnehmung hilft uns,  schnell Zusammenhänge zu verstehen – das sollte man nutzen.

Sind Sie auch der Ansicht, dass Prototypen eine gute Alternative zu agilen Vorgehensweisen sind? Welche Erfahrungen haben Sie gemacht?

Nils Koenigshofen Nils Koenigshofen ist als Web Creative Expert verantwortlich für digitale Strategien, kreative Konzeption und Usability-Themen. In diesem Bereich ist er für verschiedene Kunden bereits für die Portalkonzeption und Strategieberatung im Versicherungs- und Public-Bereich tätig gewesen.
Artikel bewerten:
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...

Kommentar hinzufügen:

Ihr Kommentar: