Wireframes, Mockups und Prototypen

Als Unternehmen das im Bereich individueller Softwarelösungen aktiv ist stehen die Berater bei L-mobile vor der Herausforderung die zu erstellende Anwendung für den Kunden im Rahmen eines Workshops zu skizzieren und das finale Design erlebbar zu machen.

Fehler oder Design-Probleme die in diesem Stadium des Projektes gefunden werden sind einfach und schnell zu erkennen und können bereits frühzeitig korrigiert werden.

Andere Arbeitsergebnisse dieses Termins umfassen in der Regel Prozess- oder Rollenbeschreibungen, Ablaufdiagramme, Schnittstellen- oder Datenbankbeschreibungen. Alle diese Ergebnisse sind für den weiteren Prozess wichtig, doch kein Arbeitsergebnis ist so überzeugend wie ein Wireframing oder Prototyp der Anwendung.

Diese Ergebnisse sind besonders aus den folgenden Gründen sehr wichtig:

  • Sie sind leicht zu verstehen
  • Sie geben die Vision und die Erwartung realistisch wieder
  • Sie haben einen konkreten Bezug zu den Inhalten
  • Sie sind am ehesten interaktiv
  • Sie erzeugen den größten Eindruck & beeinflussen das Projekt massgeblich
  • Sie sind Grundlage für Diskussion & gemeinsame Verbesserung
  • Sie geben den Fortschritt der konzeptionellen Arbeit direkt wieder

Die anderen Arbeitsergebnisse werden üblicherweise in einem Dokument zusammen getragen. Die Optmierung des Layouts und der Formattierung nimmt häufig einen großen Teil der Arbeit ein. Die Empfänger schauen das Dokument kurz an und fahren mit Ihrer täglichen Arbeit vor.

Hier findet keine wirkliche Veränderung oder kein Wandel statt. Projektdokumente sind in der Regel nicht die Dokumente mit denen man seine Bürowände schmücken möchte. Ihr Ziel ist das Auslösen von Veränderungen in einem Unternehmen. Wenn man ein Problem lösen und die Lösung effektiv und effizient kommunizieren möchte, sind Wireframes und Prototypen der beste Weg. Sie stimulieren die Vorstellungskraft, erzeugen Verständnis und geben Menschen eine Vorstellung von den erreichbaren Zielen. Kein anderes Arbeitsergebnis kann diesen Prozess so effektiv auslösen. Der Eindruck, den ein guter Prototyp hinterlassen kann ist nicht zu vernachlässigen, unabhängig davon welchen Stellenwert die anderen Dokumentationsteile erhalten.

Wireframes

wireframe

Wireframes sind wie Baupläne in der Architektur. Ihr Ziel ist es den grundlegenden Aufbau, die Struktur, die Navigation und die Organisation, und NICHT die visuellen Aspekte wie Icons, Farben und Typgrafie einer Anwendung zu beschreiben. Aus diesem Grund werden Wireframes häufig in schwarz / weiß ausgeführt. Der Fokus liegt häufig auf Inhalten, nicht auf der Form. Wireframes werden üblicherweise vor den so genannten Mockups oder Prototypen erstellt.

Mockups

mockup

Mockups kommunizieren die visuellen Aspekte einer Anwendung die ein Wireframe nicht transportieren kann. Hier geht es um Bildwahl, Typografie und Farbgebung. Nach der Fertigstellung bekommt man häufig einen Eindruck davon wie das fertige Design aussehen soll. An dieser Stelle kann ein Entwickler eingeschaltet werden der die Anwendung nach diesen Vorgaben gestaltet.

Prototypen

Ein interaktiver Prototyp ist die Königsdisziplin. Hier geht es darum eine interaktive Demoanwendung z.B. aus Html und jQuery zu erstellen die den finalen Funktionsumfang für den Anwender wirklich erlebbar macht. Der Vorteil ist das bereits sehr früh Schwächen in der Ausgestaltung im Bezug auf die Zielplattformen gefunden werden können. In der Regel empfiehlt es sich mit einem Satz an vorgefertigten Elementen zu arbeiten um die Bearbeitungszeit während des Konzeptes möglichst gering zu halten.

Der Vorteil ist das die Anwendung bereits fast vollständig die Ideen und Designs wiedergibt und diese von anderen Entwicklern sehr schnell bearbeitet bzw. übernommen werden können. Darüber hinaus ist Html wirklich plattformunabhängig.

Auf dem Markt existiert eine ganze Reihe von freien und kommerziellen Prototyp-Werkzeugen die in unterschiedlicher Qualität Demoanwendungen erzeugen. Ich persönlich bevorzuge den Einsatz von reinem Html, jQuery, CSS und Firebug um meine Kentnisse in diesen Bereichen zu trainieren und die Entwicklung schlank zu halten.

FORM + INHALT = DESIGN

Design ist die Synthese von Form und Inhalt. In einem interaktiven Prototyp erlebbar, fühlt sich die fertige Anwendung zum Greifen nah an. Mindestens eins der oben genannten Werkzeuge sollte in keinem professionellen Projektworkshop fehlen. Die Begeisterung die ein Kunde ausstrahlt der ein Design aus einem Wireframe entstehen sieht ist eine tolle Erfahrung für jeden der dies schon einmal erleben durfte. Ich möchte auf das Gefühlt nicht mehr verzichten.

Posted By: Oliver Joest @ May 25, 12:50 PM | Do you speak English?

L-mobile, All rights reserved. Impressum