Effizientes Webpage-Design – ein Plädoyer für Webdesign mit Prototypen

Diverse Tools zum Web-Prototyping

Die “einzig richtigen” Werkzeuge auf dem “wahren Weg” des Webdesigns gibt es nicht.

Aber Prototypen erhöhen Effizienz und Usability

Immer wieder gilt es für den Web-Projektmanager, diverse widerstreitende Kriterien unter wechselnden Bedingungen unter einen Hut zu bringen, z.B. ein „modernes“ Design zu verwirklichen, welches die Corporate Identity des Unternehmens berücksichtigt, die Click-Through-Rate optimiert, die Conversion Rate maximiert, eine hohe Usability erreicht, natürlich alles mit betriebswirtschaftlicher Effizienz, sprich: am besten umsonst.

Hehre Ziele, viele Stakeholder-Anforderungen und ein Tag mit nur 24 Stunden sowie ein begrenztes Budget. Was tun? Wen beauftragen? Welche Werkzeuge benutzen?

Der „Künstler“ unter den Designern beantwortet diese Frage mit einem Verweis auf seinen Skizzierstift. Damit ist er am schnellsten. Aber Handskizzen sind entweder knappe Drahtmodelle – oder aufwändig.

Balsamiq Wireframe

Mit Balsamiq erstellter Wireframe

Um z.B. die Kundenerwartungen und -Ideen schnell aufzunehmen, ist Wireframing-Software viel effizienter.

Der „normalsterbliche“ Designer produziert Mockups, d.h. Wireframes mit Typographie, Farbkonzept und pixelgenauem Whitespace – mit Indesign und Photoshop – weil er damit sein Website-Template bis in’s Detail ausarbeiten kann. Aber dort im Detail steckt bekanntlich „der Teufel“:
Der Designer macht perfektes Print-Design. Aber online sieht es immer anders aus. Außerdem gibt es nicht umsonst die Produktivitätsregel: „Details kommen später“. Zu frühe Detailarbeit bedeutet schlechte Produktivität, bedeutet unnötige Kosten. Und ob ein Design „funktioniert“, ob Usability und Accessibility stimmen, ob Anwender von A nach B finden, so ein Usability-Test läßt sich mit einer „Loseblatt-Sammlung“ nicht machen.
Außerdem lenken Typographie-Fragen, Farbkonzept, etc. nicht nur den Kunden vom Wesentlichen ab. Sie ziehen unnötig – und damit ineffizient – Detailarbeit im Entwicklungsprozeß nach vorn.

Der „Entwickler“ fragt: „Warum doppelte Arbeit machen und den ganzen Entwurf zuerst malen und später nochmal programmieren?“ Lieber gleich in Html/CSS klickbare Realität entwerfen und programmieren. Jede Idee / Änderung direkt in den Code – „work in progress“ nähert sich direkt iterativ dem Ziel.
Das ginge vielleicht, wenn der Entwickler als „Universalgenie“ in Personalunion Designer und Programmierer wäre. Eine neue Idee – womöglich nur zu Diskussionszwecken – direkt per Html/CSS dem Auftraggeber zu visualisieren, ist aber i.d.R. auch nicht „mal eben“ realisiert. O.K. – das Ergebnis ist klickbar und kein Papiertiger. Aber auch ein Entwickler verbeißt sich in’s Detail, wenn in seinem Website-Template der gefloatete DIV-Container von einem Layer mit absoluter Positionierung und z-index überlagert wird.
Und das noch im Konzept-Stadium? Geht auch nicht.

Aber wie nun die Ideen des Auftraggebers mit denen des Designers zusammenbringen?
Wie frühzeitig Usability-Tests ermöglichen? Und wie budgetkompatibel zu einer Website-Vorlage für den Programmierer kommen?

Web-Design per Prototyp

Aus Wireframe wurde Prototyp / Webdesign

Ich plädiere zunächst für ausgiebige, moderierte Kommunikation der Stakeholder-Ideen und -Ziele und Visualisierung per Wireframe-Software. Danach sind Prototypen definitiv das Hilfsmittel der Wahl, um komplexe Strukturen zu (er-)klären.

Prototyping als Webdesign-Schnittstelle zwischen Konzeption und Programmierung.

Dann aber – in einem frühen Entwicklungsstadium – bitte ein schneller Übergang zum Webdesign mittels klickbarer Prototypen („Click Dummy“).  Navigierbare Entwürfe schaffen die Voraussetzung für kompetente Entscheidungen darüber, ob Ideen “funktionieren”. Je früher im Entwicklungsprozeß die Schwachstellen eines Konzepts eliminiert werden, desto weniger Risiken (und Kosten) im Verlauf.

Im besten Fall ist die Wireframing-Software auch gleich die Prototyper-Software, welche den Output auch nutzerfreundlich online stellt und asynchrone Diskussionen via Web ermöglicht.

Prototyping-Software

JustinMind Prototyper

Solch ein Prototyping vereint Informationsarchitektur und Storyboard mit Accessibility- und Usability sowie letztlich auch Layout, Farbkonzept und Typographie. Das bedeutet frühzeitig „look and feel“ für Stakeholder und Test-Anwender und damit ein effizientes Zuspitzen auf die „funktionierenden“ Ideen. Ein Prototyp muß – je nach Komplexität der Aufgabe – beliebig detaillierbar sein.

Das Programm meiner Wahl dafür ist i.d.R. Justinmind Prototyper.

This entry was posted in Prototyping and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>