Kategorien
Webdesign

Vier Wege zum perfekten Prototyp

Im Dickicht verschiedener Versionen einer Webseite, unklarer Vorgaben und Browserkompatibilitäten verliert man schnell den Überblick. Je mehr Personen an der Erstellung einer Webseite beteiligt sind, desto schlimmer wird der Alptraum. Aber wer verschiedene Arten von Prototypen und Entwürfen fest in den Gestaltungsprozess einbindet, erspart sich und anderen Leid.

Nur selten begegnen mir Webdesigner, die den Sinn und Zweck guter Prototypen und Entwürfe anzweifeln. Aber, wer nicht gerade in einer großen Webdesignagentur mit starker Aufgabenteilung sitzt, der nutzt sie oft kaum. Die Erstellung kostet viel Geld. Viele sinnvolle Einsätze, etwa Usability-Tests, erfordern dazu Zeit und Nerven. Und,wer nicht halbwegs methodisch arbeitet, kann von all dem ohnehin nicht profitieren.

Jeder braucht sie
Ganz ohne Vorgaben werden auch Sie nicht arbeiten. Vielleicht machen Sie erst eine grobe Skizze auf Papier. Beliebt sind auch Entwürfe in Photoshop – die können schnell zum Grundstein für ein fertiges Design werden. Wichtig ist nur, dass der Weg möglichst direkt zum Ziel führt. Aber, wer etwas mehr Methodik in seine Entwürfe bringt, der kann oft auf direkteren Wegen zu höher gesteckten Zielen kommen.

Vier wichtige Arten von Entwürfen will ich Ihnen vorstellen. Dabei verzichte ich auf wissenschaftliche Trennschärfe in der Begriffswahl. Interessant für uns sind ganz praktische Fragen: Wie funktionieren sie? Wem nutzen sie?

Papierskizzen
Intuitiver wird Design nicht. Vor einem weißen Blatt Papier ist alles möglich. Dort verbirgt sich natürlich das erste Risiko. So manche Unmöglichkeit kann gezeichnet prima aussehen. Als Webdesigner sollten Sie technische Fragen zumindest im Kopf behalten. Wie groß werden Dateien? Skaliert das Design schön in verschiedenen Auflösungen? Vieles funktioniert gar nicht. Gehen Sie nicht ins Detail. Vor allem die groben Layoutstrukturen einer Webseite kann man auf Papier erforschen. Mit anderen Fachleuten kann man effektiv Entscheidungen treffen und abwägen, indem beide mit Bleistift am selben Blatt sitzen.

In Mode kommen ausgefeiltere Papiermodelle. Mit Ausdrucken, oder vorgefertigten Elementen wie Karteikarten lassen sich Papierentwürfe auf eine ganz neue Ebene bringen. Der Vorteil dabei liegt wohl vor allem in der niedrigen Schwellenangst; auch technische Laien können aktiv mitmachen. Eine Textbox nach links schieben, Das Logo größer machen – das ist für viele Menschen auf dem Papier viel weniger einschüchternd. Vorsichtig moderiert und gut vorbereitet kann man das sogar mit Auftraggebern probieren. Oft genug haben die ja Probleme, zu erklären, was sie eigentlich wollen. Aber auch im Team, das nicht nur aus Webdesignern besteht, kann mit Papiermaterialien eine lebendige Diskussion entfacht werden. Vor kurzem ist zu genau dem Thema ein hervorragender Artikel im Webzine A List Apart erschienen. Leider komplett in englisch, aber schon die Fotos der Entwürfe können Inspiration bieten.

Grafikdummys
Eine Webseite auf dem Bildschirm zu präsentieren, hat viele Vorteile. Auch, wenn sie bisher nur als Bilddatei existiert, kann man hier Farbschema, Typographie und Layout viel genauer kontrollieren. Besonders für Designer, die Webseiten im Grafikprogramm gestalten und dann erst den Code nachlegen, ist diese Entwurfsform ganz normal – sie liegt auf dem Weg. Oft wird sie aber überbewertet. Diesen Entwurf vorzuzeigen, birgt die Gefahr großer Missverständnisse. Alles sieht fertig und sauber aus. Aber außer dem guten Aussehen wird hier oft nicht viel festgestellt: Menüstruktur, Nutzbarkeit der Seite, all die dynamischen Techniken, die immer beliebter werden (Stichwort: Ajax) finden hier keinen Platz.

Reine Grafiken haben ihren Platz im Gestaltungsprozess, wenn sich alle über die Grenzen des Entwurfs im Klaren sind. Besonders Kunden sind das oft nicht. Geblendet vom schicken Erscheinungsbild können sie grundlegende Probleme oft nicht nachvollziehen oder gar analysieren. Sie können keinen Testkauf tätigen, nicht die Textgröße ändern, oder einfach durch die Webseite stöbern.

Wireframes
Der Begriff heißt soviel wie ‚Drahtmodell‘ und verweist auf Zeiten, als man 3D-Bilder am Computer erst nur als kryptisches Liniengebilde darstellen konnte. Die fertige Version mit Oberflächen, Texturen und Lichteffekten musste dann nachberechnet werden. Wireframes im Webdesign sind sozusagen ein Negativbild des rein grafischen Entwurfs; eine Seite, die auf möglichst viele Designelemente verzichtet; nur das Grundlayout wird verwendet. Dieser auf die Funktionalität konzentrierte Entwurf dient ausschließlich Testzwecken. Kommen Nutzer mit der Navigationsstruktur zurecht? Finden sie wichtige Elemente? Funktioniert das Warenkorbsystem? Verstecken sich Bugs im aufwendigen Script? Vor allem im Bereich des Usability-Tests haben Wireframes ihren Platz. Aber auch kleine Projekte, die für Tests mit Außenstehenden kein Budget haben, können von der Arbeit mit Wireframes profitieren. Die Trostlosigkeit einer ‚ungestalteten‘ Seite erlaubt den freien Blick auf ihre Nutzbarkeit.

Außerdem passen Wireframes gut in den Gestaltungsprozess, wenn der an Standards ausgerichtet ist. Während das Design im Stylesheet steckt, kann man hier ‚den Inhalt testen‘. Natürlich wird man dafür am Ende doch eine CSS-Datei benötigen, etwa um Elemente zu platzieren. Aber die ist schnell erstellt.

Oft werden Wireframes für ihre Trennung des Untrennbaren kritisiert. Kann man wirklich die Übersichtlichkeit einer Seite beurteilen, ohne etwa Typographie und wichtige Buttons zu betrachten? Nur bedingt. Sicher haben Wireframes ihren Platz in einem gut strukturierten Gestaltungsprozess, aber gerade als fachkundiger Webdesigner hat man doch in Minuten die Seite zu einem Design aufgehübscht, das der Praxis deutlich näher kommt. In dem Artikel Real Wireframes Get Real Results im Webzine Boxes and Arrows plädiert der renommierte Usability-Experte Stephen Turbek dafür, Wireframes um Logos, farbige Links und andere wichtige Elemente für die Orientierung zu erweitern, wenn ein Usability-Test ansteht. So kommen die Resultate der Realität näher. Allerdings kann es nun schwieriger sein, die Quellen aufgetretener Probleme sicher auszumachen.

Live-Entwürfe
Noch eine Ecke weiter gedacht sind Live-Entwürfe – fast fertige Webseiten, die wichtige Funktionen komplett abbilden. Wenn alles fertig scheint, alle Inhalte und das Design stehen, dann ist es unerlässlich, noch einen kritischen Blick auf das Resultat zu werfen. Wer bereits vorher gründlich getestet hat, wird hier hoffentlich keine bösen Überraschungen erleben. Aber Details gibt es immer zu verbessern. Manche grundlegende Probleme zeigen erst hier ihr hässliches Gesicht. Auch, wenn man sich schon im Ziel wähnt, sollte man genau hinschauen.

Klug ist es, einen Live-Entwurf so früh wie möglich genau zu untersuchen. Also, sobald alle Elemente im Prinzip stehen, die Seite in einer echten Umgebung (online, durch Unbeteiligte) zu testen. Erst in dieser Originalform kann man sicher sein, alles Wichtige zu erkennen. Geht die Seite online, ohne dass noch einmal getestet wurde, lauert Murphys Gesetz in jedem DIV-Tag. Und je mehr der vorgestellten Entwurfsformen sie vorher eingesetzt haben, desto kleiner dürften Katastrophen in dieser Phase ausfallen.

Über den Kamm geschert
Diese Übersicht ist natürlich nur ein Anfang. Besonders in den USA sind Entwürfe, Usability-Tests und die Suche nach dem besten Weg zur Traumseite weit fortgeschritten. Gar nicht berührt wurden einige wichtige Schritte für die Planung einer Webseite – ob Flussdiagramme oder Styleguides. Trotzdem haben Sie hoffentlich ein paar Ideen gesammelt, die Ihnen Nachtschichten beim nächsten Projekt ersparen helfen.

Erstveröffentlichung 09.02.2007