Interface-Design und Rapid Prototyping

Schnelleres und besseres Webdesign

Gerade auch für die Entwicklung von Benutzeroberflächen gilt der gute alte Sinnspruch „ein Bild sagt mehr als 1.000 Worte“. Visuelle Hilfsmittel unterstützen auch bei Benutzerschnittstellen effektiv das Festlegen von Webdesign und Webentwicklungsspezifikationen, die beschreiben wie ein System aussehen und funktionieren sollte. Kann man sich bei der Webentwicklung also an etwas Visuellem orientieren, dass die möglichen Funktionen eines Interface, einer Website oder Webapplikation optisch darstellt, fällt das gemeinsame Verständnis aller an der Entwicklung Beteiligten sehr viel einfacher.

Rapid Prototyping ist ein schneller und iterativer Ansatz, um in der Webentwicklung mit optischen Mock-Ups zukünftige Web-Projekte regelmäßig darzustellen. So können sowohl die späteren Nutzer und auch die Stakeholder gemeinsam mit den Webdesignern und den Webentwicklern die Arbeitsergebnis besprechen. Durch das Rapid Prototyping, also die schnelle Lieferung von Prototypen, wird häufig und bereits in frühen Entwicklungsstufen bereits Feedback eingeholt. Finale designs werden so Schritt für Schritt verbessert und die Notwendigkeit von nachträglichen Anpassungen und Änderungen wird minimiert.

Der Rapid Prototyping Prozess

Dieser iterative Prozess besteht aus drei grundsätzlichen Prozessschritten:

1. Modellieren

Die vorab, beispielsweise in einem Konzept-Workshop, erarbeitete Spezifikation eines Webprojekts wird in einem Mock-Up modelliert unter Berücksichtigung von Benutzerfreundlichkeit, mobilen Nutzungsaspekten und Best Practice Erfahrungen.

2. Prüfen

Der erste Mock-Up Prototyp wird dann mit dem zuvor bestimmten an der Webentwicklung Beteiligten besprochen. Gemeinsam mit Nutzern und weiteren Stakeholdern wird der Prototyp bewertet und geprüft, inwieweit er alle Wünsche, Bedürfnisse und Erwartungen erfüllt.

3. Optimieren

Mittels des erhaltenen Feedbacks können dann Bereiche und spezifische Punkte am Prototyp identifiziert werden, die im nächsten Prototyping Loop angepasst und verbessert werden oder die noch einer weiterführenden Klärung bedürfen.

Der erste Prototyp einer Website, eines User Interfaces oder einer Web-Applikation fällt in der Regel sehr einfach aus, um so zunächst die Basis-Bereiche gemeinsam festzulegen. Die Mock-Ups werden dann mit jeder weiteren Iteration des Rapid Prototypings umfassender. Von der Komplexität und Größe des Webprojekts hängt die notwendigen Anzahl der Läufe durch den Prototyping Prozess ab. Der finale Prototyp wird dann an die Webentwicklung weitergegeben.

Rapid Prototyping Scope

Damit das Prototyping auch wirklich „rapid“ sein kann, sind die Prototypen keine voll codierte und programmierte Entwürfe, sondern sind nur visuelle Orientierungshilfen, die Funktionalitäten und Benutzung simulieren. Der Umfang des Prototypings sollte vorab entsprechend definiert werden.

Was soll Teil des Prototypings sein?

Vor Beginn sollte festgelegt sein, welche Bereiche des betreffenden Web-Projekts Teil des Prototyps sind, z.B. Webdesign, Technologie, Workflows oder Funktionalitäten.

Tiefe des Prototypings

Hier hat sich die auch die 80/20 Regel etabliert. 20% der Bereiche oder Funktionalitäten, der 80% am häufigsten genutzten, sollten in einem Mock-Up dargestellt werden.

Konkretes Prototyping-Konzept

Nachdem die zu modellierenden Bereiche des Prototyps festgelegt sind, müssen diese zu einem schlüssigen Mock-Up Szenario zusammengefügt werden.

Prototyping planen

Ein finaler Prototyp wird meist auch nicht mit einem Entwurf erstellt. Man beginnt sehr breit und geht dann mit den folgenden Iterationen in die Tiefe und die Details.

Detailgenauigkeit der Rapid Prototypings

Klassischerweise gibt es im Webdesign drei Aspekte, für die es zu entscheiden gilt, in welcher Detailgenauigkeit gemessen an der finalen Lösungen gearbeitet wird. Zu diesen Aspekten zählen der visuelle, funktionale und der inhaltliche Aspekt. Es kommt natürlich immer auf die Rahmenbedingungen des Webprojekts an und ob dann ein unaufwändiges, einfaches Mock-Up bereits ausreicht oder ein grafisch sowie technisch komplexerer Prototyp sinnvoll und gewünscht ist. Die Detailgenauigkeit kann zudem auch im Zuge der durchlaufenen Iterationen immer weiter zunehmen.

Visuell: Skizze vs. Design

Die Optik des Webprojekts ist eines der offensichtlichsten Elemente und damit auch des Prototyps. Die Wahl des Detailgrads will hier wohl überlegt sein. Einfache, händische Skizzen können für die Beurteilung eines ersten Mock-Ups zu abstrakt sein und eine detailliertes Grafikdesign kann die Betrachter überfrachten. Ein Prototyp muss nicht perfekt sein, sondern die für die Entscheidergruppe und das Webprojekt angemessene Detailnähe zu einem final programmierten Produkt haben. In der Regel empfiehlt es sich grob und möglichst einfach zu beginnen und dann mit den Iterationen in der Präzession zuzunehmen. So kann man sich in jeder Iterationsschleife auf die wesentlichen Punkte des Prototypings konzentrieren.

Funktionalität: Statisch vs. interaktiv

Bei einer statischen Variante enthält das Mock-Up lediglich Beschreibungen, welche Funktionalitäten oder Effekte an gewissen Stellen der Website, Benutzeroberfläche oder Web-Applikation enthalten sind. In einem interaktiven Mock-Up kann dieses bereits durch einen Benutzer bedient werden, also Buttons angeklickt werden oder Navigationselemente leiten einen auf das dort geplante Ziel weiter. Ein gewisses Maß an Interaktivität erleichtert oft das Verständnis von Funktionalitäten und beugt Missverständnisse vor.

Inhalte: Platzhalter vs. finaler Content

Platzhalter wie Blindtexte a la „Lorem ipsum dolor sit amet“ füllen den für Inhalt vorgesehen Bereich ohne mit richtigem Text Anlass zu inhaltlichen Diskussionen zu geben. Gleiches gilt für Bilder, die als Platzhalter dienen. Finale Texte und andere Inhalte haben den Vorteil, dass echter Content bereits zeigt wie dies im gesamten Webdesign wirkt. Die Platzhalter werden auch meist im Verlauf des Prototypings nach und nach gegen die finalen Inhalte ausgetauscht. Denn besonders Textlängen und Bildgrößen können ein Design maßgeblich mitbestimmen.

Rahmenbedingungen für das Rapid Prototyping

Damit die Vorteile des Rapid Prototypings für das Webdesign und die Webentwicklung bestmöglich zum Tragen kommen können, sollten einige Rahmenbedingungen erfüllt sein. Die gute Zusammenarbeit zwischen Kunde, Usern, Business und weiteren Stakeholdern ist die Basis eines funktionierenden Prototyping Prozesses. Nicht nur ist man auf das wertvolle Feedback dieser Interessensgruppen angewiesen, sondern auch die Identifikation mit dem Endprodukt steigt. Während der Prototyp immer weiter verfeinert wird, sollten alle Beteiligten stets immer wieder daran denken, dass es sich lediglich um eine Prototyp handelt und nicht um das fertige Webprojekt. Feedback und Änderungswünsche sollten stets kritisch bewertet werden, denn nicht alle Anpassungen sind werthaltig oder können in die erste Version mit einfließen.

Bei Rapid Prototyping geht es nicht darum den 100%igen Mock-Up zu erstellen, dass bis ins letzte Detail ausgearbeitet ist. Vielmehr ist das Ziel einen finalen Prototyp zu definieren, der in einer ausreichenden Präzession vorliegt, so dass dieser als Arbeitsauftrag an die Webentwicklung übergeben werden kann. Änderungen nach der Freigabe des Webdesigns beschränken sich so nur auf kleinere Anpassungen, aber in der Regel entfallen grundlegende Neuerungen.

Sie interessieren sich für Webdesign nach dem Rapid Prototyping und agile Webentwicklung? Kontaktieren Sie mindtwo, Internetagentur in Bonn. Wir beraten Sie gerne.