Wireframing mit foreUI

Wireframing mit foreUI

Wireframing mit foreUI

Begriffserklärung

Wireframe wieder so ein Begriff, der sich durch die Welt von HMI- und UI-Konzepten zieht.

Doch was steckt dahinter?

Wireframe bedeutet, aus der reinen Übersetzung heraus, Drahtgerüst. Eine schöne Übersetzung, die die Bedeutung eines Wireframes kurz und knapp beschreibt. Ein Wireframe steht ziemlich am Anfang eines jeden HMI-Konzepts. Es stellt einen konzeptionellen Entwurf einer Anwendung (z.B. Webseite oder Software-Frontend) dar. Wer jetzt denkt, hier handelt es sich um einen Entwurf, bei dem das Design im Vordergrund oder mit ausgeführt wird, liegt falsch. Bei einem Wireframe geht es in erster Linie um Benutzerführung und Anordnung von Elementen. Dabei unterscheidet man statische oder dynamische Konzepte. Bei den statischen handelt es sich um reine Seitenvorlagen, welche keinerlei dynamischen Elemente enthalten. Dynamische Wireframes stellen funktionelle Prototypen dar. Das heißt, sie bestehen aus mehreren Seitenvorlagen, welche interaktiv untereinander verknüpft sind. Diese Konzepte besitzen also eine Navigationsstruktur. Zusammenfassend und bezugnehmend auf die zu Beginn erwähnte Übersetzung, ist ein Wireframe, einfach gesagt, ein konzeptionelles Grund-/Drahtgerüst eines neuen Frontend-Konzepts.

Welches Tool?

Nach der Theorie stellt sich nun die Frage nach dem richtigen Tool. Natürlich muss man hier unterscheiden, ob man einen statischen oder dynamischen Prototyp erstellen möchte. Den größten Mehrwert hat der dynamische. Ich denke, jeder kann sich vorstellen, welche Tools für einen statischen Wireframe verwendet werden können. Wenn nicht, hier ein paar Programme:

  • Paint
  • Gimp
  • Photoshop
  • MS Visio

Also grundsätzlich jedes Programm, das einem erlaubt ein Bild zu zeichnen.

Jetzt zu den dynamischen Konzepten. Um einen solchen Wireframe aufzubauen, braucht man eine Software, die es einem erlaubt Seiten zu entwerfen und diese dann dynamisch miteinander zu verlinken. Jeder von Ihnen kennt mindestens eine Software, die eine solche dynamische Verlinkung von Seiten zur Verfügung stellt. MS PowerPoint. Was bietet diese Software aber nicht? Richtig! Keinerlei vorgefertigte Elemente – wie Buttons, Slider, etc… – um eine Bedienoberfläche zu gestalten. Von daher könnten wir zwar PowerPoint verwenden, dies wäre jedoch mit extrem hohen zeitlichen Aufwand verbunden. Eine weitere Alternative bietet HTML5 in Verbindung mit CSS3. Jedoch braucht man hier schon mehr als nur Grundkenntnisse, um einen repräsentativen Prototypen zu erstellen. Wer also kein Webprofi ist, für den wird diese Alternative wahrscheinlich zu zeitaufwendig sein. Die letzte Möglichkeit auf die ich eingehen möchte, wäre das Erstellen von klickbaren PDFs. Hierfür werden aber wieder  kostenpflichtige Programme (z.B. Adobe InDesign) benötigt und diese Anwendungen sind auch meistens nicht ohne eine Einarbeitungszeit oder einen Workshop einsetzbar und bieten auch nur einen schmalen Umfang von helfenden Elementen, wie Buttons, Comboboxen oder Ähnliches.

foreUI

Wie schon im Titel erwähnt, verwenden wir für interaktive Wireframes (neben unserer eigenen parametrierbaren WebVisu PROCON-WEB) oft das Tool „foreUI“. Hierbei handelt es sich um eine lizenzpflichtige Software von EASynth Solution (www.foreui.com). Für sein Geld bekommt man hier aber auch eine Menge Funktionen mitgeliefert, die sehr nützlich sind. Unter anderem kann man Konzepte komplett als webfähigen Prototypen exportieren und es werden viele Elemente im Standard mitgeliefert, die sehr hilfreich und zeitsparend sind.

Genug mit dem Vorgeplänkel, jetzt geht es in die Praxis! Also wie erstelle ich einen Wireframe mit foreUI?

foreUI

Zunächst erstellt man sich einen neuen Plot, also ein neues Projekt. Hier eine kleine Erklärung des Montage-Screens (s. Screenshot). Auf der linken Seite befindet sich die Toolbox, aus dieser können zum einen Elemente und Bilder per Drag&Drop in das Bild gezogen werden. Aber Vorsicht! Ein Element hängt dann solange an der Maus, bis das Element über den Klick auf die rechte Maustaste entfernt wird. Ob ein Element an der Maus hängt, erkennt man daran, dass der Mauscursor als großes Plus-Symbol angezeigt wird. Zum anderen gibt es in der Toolbox die Möglichkeit seine Outline des Projektes anzusehen. Also welche Elemente werden in welcher Seite verwendet. Zusätzlich kann nach Elementen gesucht werden. Mittig befindet sich der Bild-Montage-Bereich in dem die Seiten des Wireframes entstehen. Auf der rechten Seite befindet sich das Tool Panel. Dies zeigt einem unter dem Punkt Tools die Möglichkeiten auf, anhand derer die im Bild angezeigten Elemente konfiguriert werden können.

Was jetzt noch fehlt, ist die untere Leiste. Diese ist wichtig, wenn der Wireframe aus mehr als einer Seite bestehen soll und falls dynamische Verhaltensweisen (Click-Events, etc.) projektiert werden möchten.

  • foreUI-behavior

  • Der links gezeigte Screenshot zeigt das „Page Management“ des Projekts. Hier können die Seiten benannt und neue Seiten zum Plot hinzugefügt werden. Um dynamische Verhaltensweisen einem Element zuzuordnen, muss der Punkt „Behaviors“ ausgewählt werden. Grundsätzlich wird man  durchgeleitet, wie ein Verhalten an ein Element oder an eine Seite angehängt wird. Es werden immer nur die Buttons aktiv, die auch sinnvoll sind. Im unteren Bild sieht man ein kleines Beispiel. Hier wird beim Laden der Seite „Page1“ eine Message mit dem Text „Hallo Welt!“ angezeigt.

Weitere Elemente der unteren Leiste sind die Auswahl von UI-Themes. Das heißt von Oberflächen, Designs angelehnt an diverse Betriebssysteme oder Neutrale. Der Zoomlevel in das Bild kann eingestellt und auch Konfigurationen des Projektes vorgenommen werden, wenn auf „Plot Settings“ geklickt wird. Was jetzt noch fehlt, ist das Starten des Projektes. Hierfür gibt es zwei Möglichkeiten: Es wird einem angeboten eine Simulation zu starten oder das ganze einfach als HTML5 zu exportieren und seinen Wireframe danach in einem Browser anzuschauen.

Erfahrungen und Grenzen

Meine eigenen Erfahrung mit dem Tool foreUI sind positiv. Ich konnte nahezu problemlos meine Anforderungen mit foreUI umsetzen. Warum nahezu? Das liegt daran, dass manche meiner Anforderungen sehr speziell waren und nicht auf den Standard zugegriffen haben. Jedoch war es mir mit dem Support, der übrigens in der Regel sehr schnell geantwortet hat, möglich, alle meine Ansprüche sinnvoll umzusetzen.

Alles in allem ist foreUI ein gutes und einfach zu bedienendes Tool, dass seinem Benutzer schnell die Möglichkeit bietet, unkompliziert einen Wireframe-Prototyp zu erstellen.

Aber es ist nicht alles Gold was glänzt!

Es gibt auch Grenzen bei „foreUI“. Ein die ich schmerzlich kennengelernt habe ist Folgende. Man baut sich seinen Wireframe zusammen und verwendet dabei Bilder oder Elemente. Bisher nichts dramatisches aber bei Bildern hat das Programm eine eigenartige Verhaltensweise. Es legt für jedes eingefügte Bild, welches bereits vorhanden ist, immer wieder ein Neues an. Das heißt man hat eine extreme Redundanz in seiner Bilderverwaltung. Die damit  verbundene Bilderflut lässt die Projektgröße extrem ansteigen. Bei meinem ersten Prototypen ging das Ganze soweit, dass mein HTML5-Prototyp teilweise fünf Minuten gebraucht hat, bis er erzeugt wurde und noch einmal dieselbe Zeit zum Öffnen im Browser. Das Schlimmste war jedoch, dass irgendwann mein Projekt so voll gemüllt war, dass ich nicht mal mehr Exportfunktionen ausführen konnte.

Jetzt könnte man sich fragen, warum dieses Produkt bei einem solchen Mangel bei uns eingesetzt wird. Das liegt daran, dass man nur wissen muss wie man dieses Verhalten unterbindet. Dafür gibt es einen unscheinbaren Knopf in der Funktionsleiste der Bilderverwaltung von „foreUI“.

  • foreUI-pict

  • Dieser kleine Button optimiert den Gebrauch von Bildern. Das heißt, er beseitigt alle redundanten Bilder, welche während der Projektierungsphase in das Projekt gekommen sind.

Was auch ein bisschen schade ist, ist dass foreUI zwar einen Export in PDF anbietet, aber leider keine dynamischen PDFs mit den evtl. gewollten Verlinkungen erzeugt. Hier werden lediglich die einzelnen Seiten als Bilder in ein PDF-File exportiert.

Ich hoffe, ich konnte Ihnen eine kleinen Exkurs in den Wireframing-Prozess geben und Sie kurz in ein Tool einführen, welches Ihnen diesen Prozess vereinfachen könnte.

Author's imageDavid BaierUsability Engineer