Wer regelmäßig ganze Websites oder einzelne Anwendungen für Websites konzipiert, kennt das Problem: Wie vermittle ich meine Ideen und Anforderungen an nachfolgende „Gewerke“ wie Designer oder Programmierer, damit diese sie verstehen und umsetzen können? Wie kann ich schnell Prototypen von Nutzeroberflächen („User Front-ends“) erstellen, um zu prüfen, ob meine Idee einer Anwendung funktioniert?
Nun, es gibt hier sicher nicht den Königsweg für jede Anforderung, aber nach 20 Jahren World Wide Web mittlerweile doch eine Reihe von Möglichkeiten, sog. „Wireframes“ (zu deutsch etwa „Drahtgestelle“), also funktionelle Konzeptstudien von Websites oder Anwendungen zu visualisieren.
Papier und Stift?
Ein einfacher und sehr schneller Weg zur Visualisierung ist die gute alte Papierskizze („Paper-Pencil-Version“). Damit lassen sich selbst innerhalb von Meetings mit Anforderern, Designern oder Programmierern schnell Ideen visualisieren und eine gemeinsame Verständnisgrundlage schaffen.
Verwendet man dazu so wie ich einen sog. Smartpen, einen digitalen Kugelschreiber wie z. B. den Echo oder Wifi von Livescribe, digitalisiert dieser die entstehenden Skizzen während des Meetings und vereinfacht so die anschließende Protokollierung erheblich. Hier ein paar Beispiele:
Konventionell?
Wer seine Wireframes direkt am PC bauen möchte, kann hier auf eine Vielzahl konventioneller Tools zur Visualisierung zurückgreifen, die auf den meisten Standardrechnern ohnehin vorhanden sind. Dies können z. B. Microsoft Powerpoint oder Visio sein.
Nach meiner Erfahrung eignet sich Powerpoint vor allem dann, wenn man die Veränderung einer bestehenden Nutzeroberfläche auf Basis eines Screenshots ebendieser darstellen möchte. Hier lassen sich einfache Veränderungen an Text, Bild und Eingabeelementen schnell darstellen und beschreiben (siehe Abbildungen unten). Nachteil von Tools wie Powerpoint ist, dass sie im Standardpaket kaum Bibliotheken mit spezifischen Elementen zur Gestaltung von komplexeren Weboberflächen besitzen und man sich diese erst mühsam selbst „zusammenbauen“ muss.
Spezifisch!
Und hier kommt „Balsamiq“ ins Spiel, das wir seit ein paar Monaten bei Hermes für die Front- end-Konzeption verwenden.
Balsamiq ist ein spezifisches Wireframing-Tool, also für nichts anderes da als zur schnellen Erarbeitung und Darstellung von Prototypen für Nutzeroberflächen im Web ( engl. „Rapid Prototyping“).
In Balsamiq ist schon alles vorhanden, was man für die Gestaltung einer modernen Weboberfläche benötigt: Elemente für Navigationen, für Text-, Bild- und Videobereiche, für Webformulare und sogar für mobile Anwendungen auf dem Smartphone. Per Drag & Drop lassen sich diese Elemente auf den Arbeitsbereich ziehen und schnell zu einem Wireframe arrangieren. Farben lassen sich definieren, Texte eingeben sowie Elementgrössen und -ausdehnung bestimmen. Die Funktionsweise oder das Zusammenspiel von Elementen kann durch Anmerkungen oder Kommentare beschrieben werden.
Am Ende ergibt sich ein pixelgenaues Abbild der zukünftigen Anwendung, die sich nun auf Handhabbarkeit und Usability prüfen sowie, dank der Exportfunktion zu XML/PDF, mit Designern und Entwicklern besprechen lässt. Balsamiq lässt sich günstig erwerben oder in einer Web-Demo-Version sogar kostenlos nutzen.
Hier ein paar Beispiele für Wireframes, die mit Balsamiq gebaut wurden. Das vierte Bild zeigt einen aktuellen Entwurf für einen neuen Paketklassen-Ermittler auf myHermes.de:
Wir bei Hermes sind jedenfalls begeistert von dem Tool, da es eine Menge Zeit spart, schnell realitätsnahe Ergebnisse liefert und dabei auch noch Spaß macht.
Welche Erfahrungen haben Sie mit Werkzeugen zur Front-end-Konzeption? Kennen oder nutzen Sie andere Tools? Ich freue mich auf Ihren Kommentar!
