Last updated on 11. November 2014

Meine Rechercheergebnisse der letzten Monate zeigten mir, dass die Begrifflichkeiten „Wireframe“, „Mockup“ und „Prototyp“ gerne synonym verwendet werden und dadurch ein unklares Bild dieser entsteht. Daher möchte ich in diesem Artikel klären, was die einzelnen Repräsentationsarten ausmachen, welche Bedeutung sie haben und damit versuchen, die Unklarheiten aus dem Weg zu räumen.

Wireframes

Wireframes repräsentieren den groben Aufbau eines User Interfaces, ohne dabei Funktionalität oder zu viele Details bereitzustellen. Sie zeigen jedoch alle wichtigen Komponenten des Interfaces und an welcher Position sie sich befinden.

Wireframes eignen sich dafür, den groben Aufbau einer View zu beschreiben. Somit kann ein allgemeiner Überblick über die Aufteilung und Anordnung der Elemente, sowie hierarchische Strukturen gegeben werden. Sie werden zumeist in einem sehr frühen Entwicklungsstadium verwendet, um schnelle Entwürfe anzufertigen, eine geeignete Diskussionsgrundlage zu bieten und um das Design dokumentieren zu können.

Mockups

Mock-Up-Screens sind fiktive Screenshots, die zum Einsatz kommen, wenn noch kein funktionierender Systemprototyp vorhanden ist.

Die Erstellung eines Mockups erfolgt auf der Grundlage der Wireframes. Ihr Einsatz ist dann angebracht, wenn das Design spezialisiert werden soll und für erste Tests mit den Nutzern detaillierte Informationen bereitstellen muss. Dadurch kann überprüft werden, ob sich ein Nutzer orientieren kann, mit welchem der verschiedenen Designs er besser zurecht kommt und wo sich die Schwachstellen des Designs befinden.

Prototypen

Prototypen können in vertikale und horizontale Prototypen eingeteilt werden. Vertikale Prototypen bilden ausgewählte Funktionen ab, die komplett genutzt werden können. Horizontale Prototypen bilden die gesamte Bandbreite der Funktionalitäten ab, ohne sie bis ins Detail nutzbar zu machen. Sinnvoll ist eine Kombination der beiden Arten für entsprechende Testfälle, wodurch die Bandbreite an Funktionen abgedeckt wird und gleichzeitig einzelne Funktionen detaillierter betrachtet werden können.

Arten von Prototypen

• Storyboards bestehen aus Zeichnungen (Wireframes) oder Screenshots (Demonstratoren), die in einer Handlungskette die geplanten Masken zeigen

• Paper mock-up ist ein Modell aus Pappe oder Papier, welches das System mit Ein- und Ausgabegeräten darstellt.

• Wizard of Oz Bei dieser Art von Prototyp, wird das System von einer Person gesteuert, die nicht sichtbar ist. Dadurch werden die Systemreaktionen von dieser versteckten Person und nicht durch die Interpretation des Systems gesteuert.

• Videoprototyp Bei einem Videoprototyp handelt es sich um eine Videoaufnahme, bei der eine Person das System bedient.

• Computeranimation Die sichtbaren Systemreaktionen werden in einer festen Handlungskette automatisiert dargestellt.

• Scenario machine Es sind nur Funktionalitäten enthalten, die ein bestimmtes Szenario abhandeln.

• Working partial system Eine funktionierende Version des Systems, mit einem Teil des Funktionsumfangs.

Durch ihre Eigenschaft, Verhalten zu simulieren, eignen sich Prototypen, um schon zeitig herauszufinden, wo Schwachstellen bei der Benutzung des Interfaces liegen. Sie können sowohl auf Wireframes als auch auf Mockups basieren, enthalten jedoch detaillierte Informationen und bieten einen gewissen Satz an Funktionalitäten. Die Vielfalt an Prototypen bietet auch die Möglichkeit, schon zu einem zeitigen Entwicklungsstadium Nutzertests durchführen zu können.

Für Beispiele für Prototyen möchte ich auf meinen Artikel zur Evaluation der Prototyping-Tools verweisen, in dem man mehrere Beispiele findet.

Fazit

In der folgenden Grafik möchte ich das oben beschriebene noch einmal kurz zusammenfassen: