Wireframing und Rapid Prototyping im UI-Design
In der Entwicklung von User Interfaces oder Webapplikationen führt heute kein Weg mehr vorbei an Wireframing und dem damit verbundenen Rapid Prototyping. In diesem Artikel bieten wir ihnen einen kleinen Einblick in den Prozess der Entstehung von User Interfaces. Dabei beginnen wir bei den Basics.
Was sind Wireframes / Mock Up’s oder Rapid Prototyping?
Unter einem Wireframing versteht man eigentlich einen Drahtgerüst das eine ungefähre Form oder Größe vorgibt. Im Webdesign ist die Bedeutung in abgeleiteter Form zu verstehen. Beim Wireframing wird versucht funktionale Objekte skizziert darzustellen. Wichtig ist, dass dieser Prozess schnell, einfach und reproduzierbar ist. Die Bezeichnung Mock Up finden sich ebenfalls relativ häufig, meint aber in der Praxis oft das selbe. Ein Schritt weiter geht das Rapid Prototyping, das aus dem Produktdesign bekannt ist. Im Webdesign versteht man darunter, dass mit einer gegebenen Werkzeugpalette (Optische Elemente) in kurzer Zeit alternative Versionen des User Interface Entwurfs entstehen können.
Müssen Wireframes hässlich sein?
Es ist definitiv nicht das Ziel hässliche Skizzen zu generieren! Wichtig ist aber, dass ein Wireframe klar von einem Designentwurf unterschieden werden kann. Speziell wenn Wireframes mit Kunden besprochen werden muss klar sein, dass es sich nicht um einen Designentwurf handelt um nicht falsche Ankerwerte beim Kunden auszulösen.
Ein Wireframe ist kein Designentwurf und soll auch nicht so aussehen.
Für viele klassische Webdesign Unternehmen wird dieser Ansatz schwere Kopfschmerzen verursachen, stand doch in den meisten Fällen am Anfang die Skizze des Designers. Um diesen Konflikt der Herangehensweisen besser zu verstehen muss eine Ansicht verinnerlicht werden
User Interface Design ist kein Webdesign!
Wenn ein User Interface mit komplexen Funktionalitäten entsteht, ist ein anderer Prozess anzulegen als bei klassischen (relativ) einfachen Webseiten. Bei klassischen Webseiten gibt nur selten ein funktionale Komplexität die mit Wireframes geplant werden muss, wobei auch bei einfacheren Projekten der Trend eindeutig hin zur virtuellen Funktionsskizze geht. Versucht man diesen Prozess fertig zu denken, dann ergibt sich im Ablauf eine andere Reihenfolge als sie in den meisten Webdesign Unternehmen praktiziert wird.
Der Designer ist erst an der Reihe wenn die Usability geklärt ist
Diese Erkenntnis verändert das Aufgabenfeld des Designers erheblich. Im klassischen Zugang des Webdesigns, wurden Funktionen aus grafisch ästhetischer Sicht platziert. Im Zugang des UI Designs wird eine Usability erschaffen die dann mit grafischen Elementen (=dem Design) erfüllt wird. Damit wird aus dem Designer wieder ein klassischer Grafiker.
Zusätzlich zur veränderten Rolle des Designers wird eine neue Rolle im Prozess geschaffen, die des User Interface Designers oder Usability Beraters. Speziell bei komplexen Projekten mit User Interaktion ist diese Herangehensweise zielführend, stellt aber zugleich eine Herausforderung für Einpersonen Freelancer dar. Aufgrund der völlig unterschiedlichen Aufgaben im Prozess macht es in der Regel Sinn die Arbeitsschritte auf mehrere Experten Ihres Faches zu verteilen. Die psychologische Komponente der Usability und die handwerkliche Komponente des Grafikers widersprechen sich häufig.
Best Practice Tool im Wireframing OmniGraffle
Wenn man das optimale Werkzeug zum „wireframen“ sucht, gibt es einen grundlegende Entscheidung zu treffen. Wenn Online-Kollaboration wichtig ist, dann kommt man um Webdienste nicht herum. Einen guten Beitrag dazu ist hier (Mashable) zu finden.
Wenn eine Onlinezusammenarbeit nicht notwendig ist greift man zu OmniGraffle einer kommerziellen Desktop Lösung für Mac, die dem optimalen Wireframing Tool schon sehr nahe kommt. Dank der Erweiterung um Stencils können einzelne Elemente die häufig gebraucht werden entweder selbst angelegt werden oder aber aus fertigen Bibliotheken hinzugefügt werden. Wenn man OmniGraffle nicht kennt ist etwas schwer zu beschreiben, was eigentlich dessen Hauptfunktion ist. Von Mindmapping über Präsentationen bis zur Raumplanung ist es eine weite Palette die das Programm abdeckt. Für den Einsatz beim „Wireframen“ eignet sich OmniGraffle jedenfalls bestens.
Die wichtigsten OmniGraffle Stencil Sammlungen für’s Wireframing
Sicherlich entstehen mit der Zeit für jeden Anwender seine eigenen Stecils dennoch ist es gut auf ein bestehendes Set aufzubauen. Für spezielle Geräte die andere Anforderungen an die GUI haben, wie etwa das Iphone oder Android gibt es eigene Stencil Sammlungen. Für allgemeine Webapplikationen können wir folgende Sammlungen als Basis empfehlen:
- Konigi Sehr umfangreiche Sammlung
- Best Practice UX Forms Stencil v1.1 (via Graffletopia) v.A. für User Interfaces
- Simple Wire Frame Set (via Graffletopia) für schnelle Wireframes