Hier schon mal eine kleine Vorschau der neuen Startseite. Über ein kurzes Feedback würde ich mich sehr freuen.

Das Showreel zeigt Arbeiten aus dem Bereich Filmproduktion, Motion-Design und Webdesign, die im Laufe der Zeit während meines Studiums und in meiner Freizeit entstanden sind.

Wie unterschiedlich diese Benutzererfahrung alleine im Ausfüllen unterschiedlich konzipierter Web-Formulare sein kann, hat Luke Wroblewski von A List Apart in Zusammenarbeit mit einem Unternehmen für Usability-Testing herausgefunden.

Der Schlüsselbegriff, der beim Ausfüllen von Formularen auf Websites zu weniger Fehlern und mehr Zufriedenheit führt, lautet “inline validation”. Das bedeutet, dass die Angaben des Nutzers bereits während der Eingabe auf ihre Gültigkeit hin überprüft werden.

6 Formulare, 22 Testpersonen

Ein Formular gab der Testperson erst eine Rückmeldung über ihre Angaben nachdem der Senden-Button gedrückt wurde. Es wurde also keine Inline Validation verwendet. Weitere fünf Formulare verwendeten Inline Validation in verschiedenen Variationen. Beispielsweise wurde untersucht, welche Eingabefelder überhaupt mit einer Validierungsfunktion versehen werden sollten und ob die Überprüfung sozusagen in Echtzeit während der Eingabe (”while”- und “before and while”-Methode) oder erst nach dem Wechsel zu einem anderen Eingabefeld (”after”-Methode) stattfinden sollte.

Schneller, besser, zufriedener

Verglichen mit der Version, die keine Inline Validation benutzt, führt die Version mit direkter Datenüberprüfung zu einem deutlichen Zuwachs in der Erfolgsrate. Außerdem werden signifikant weniger Fehler bei der Dateneingabe gemacht. Die Zeitspanne vom Start bis zum erfolgreichen Abschicken des Formulars ist fast um die Hälfte verkürzt. Die Zufriedenheit der User steigt.

Inline Validation, aber richtig

All diese Vorteile stellen sich jedoch nur ein, wenn die Inline Validation richtig angewendet wird. So wurde herausgefunden, dass eine Datenüberprüfung nur bei den Eingabefeldern angewendet werden sollte, bei denen die zu gebende Antwort nicht offensichtlich ist. Andernfalls kann dies zu Verwirrung und Ablenkung des Users führen.

Weitere Aspekte wie beispielsweise der Ort, an dem das Feedback im Formular platziert werden soll, wurden ebenfalls untersucht. Deshalb empfehle ich jedem Webdesigner und -entwickler den sehr lesenswerten Artikel (englisch) auf A List Apart.

Flash Catalyst: so heißt die neue Software von Adobe, die schon seit einiger Zeit unter dem Codename “Thermo” in den Adobe Labs zu finden war und dort jetzt als Beta-Version zum Download bereitsteht.

Was ist Flash Catalyst?

Die Software ist ein Design-Tool, das es dem Designer erlaubt, schnell und intuitiv Interaktionsmöglichkeiten in ein Design einzuarbeiten. Der Designer muss dabei nicht eine einzige Zeile Code schreiben, sondern kann den aus Photoshop oder Illustrator importierten Dokumenten durch wenige Mausklicks die gewünschte Funktionalität verpassen.

Wie funtkioniert das Ganze?

Nach der Konzeption erstellt der Designer wie gewohnt seine Arbeiten in Photoshop oder Illustrator. Sobald dies erledigt ist, wird Flash Catalyst gestartet. Dort besteht die Möglichkeit, direkt eine .psd- oder .ai-Datei zu importieren. Das erstellte Design erscheint daraufhin pixelgenau auf der Zeichenfläche von Flash Catalyst. Dabei wird auch die Ebenestruktur aus Photoshop oder Illustrator exakt beibehalten.

Jetzt können verschiedene Elemente mit Interaktivität versehen werden. Zum Beispiel kann die Grafik eines Textfeldes mit wenigen Klicks in ein tatsächliches Textfeld umgewandelt werden oder Buttons können klickbar gemacht werden. In Flash Catalyst stehen einige grundlegende Werkzeuge zur Verfügung, die es erlauben, grafische Elemente direkt in Catalyst zu erstellen. So kann beispielsweise das Rechteckwerkzeug dazu benutzt werden, schnell einen Button oder einen Textbereich zu zeichnen und diesen dann mit Interaktivität zu versehen. Außerdem stehen vorgefertigte, bereits mit Funktionalität versehene Interaktionselemente zur Verfügung, die der Designer nach seinen Wünschen anpassen kann. Die meistverwendete Funktion wird aber wahrscheinlich die sein, dass Objekte, die aus dem ursprünglichen Photoshop-Design stammen, in interaktive Elemente umgewandelt werden.

Der interaktive Prototyp, der so aus dem ursprünglichen Design entstanden ist, kann jederzeit getestet werden. Das Catalyst-Projekt muss dafür einmal gestartet werden und es wird eine .swf-Datei erzeugt, die den Designer die Interaktionen testen lässt.

Catalyst erzeugt während der Arbeit im Hintergrund den entsprecheneden Flex-MXML-Code. Sobald das Interaktionsdesign abgeschlossen ist, kann der Designer das Projekt an den Entwickler weitergeben. Dieser öffnet das Catalyst-Projekt im Flash Builder (früher Flex Builder) und kann dort den bereits generierten Code um die eigentliche Programmlogik erweitern. Das Design wird dadurch nicht mehr verändert, sondern bleibt während des gesamten Prozesses genau so, wie der Designer es zu Beginn erstellt hat.

Was sind die Vorteile?

1. Verbesserter Workflow

Der Designer kann dem Entwickler anhand des Interaktionsdesigns genau zeigen, wie er sich dies oder jenes vorgestellt hat. So muss der Entwickler weniger Rücksprache mit dem Designer halten.

2. Zeitersparnis

Durch den verbesserten Workflow kann einiges an Zeit in der Überarbeitungsphase eingespart werden. Diese Zeit kann entweder dazu benutzt werden, das Projekt schneller zu beenden oder es könnte mehr Zeit in die Designphase investiert werden.

3. Rapid Prototype

Durch die Möglichkeit, schnell Interaktivität ohne Programmierung zu Designs hinzuzufügen, kann dem Kunden schon früh ein Prototyp zur Verfügung gestellt werden, den er aufgrund des Flash-Exports selbst online ausprobieren kann. Dieser Vorteil kann auch genutzt werden, wenn die eigentliche Webanwendung später nicht flashbasiert laufen wird.

Fazit

Flash Catalyst ist eine weitere interessante Entwicklung aus dem Hause Adobe und wird die Kommunikation zwischen Designern und Entwicklern von Flash-Webanwendungen sicherlich erheblich verbessern. Durch die Prototyp-Möglichkeit kann außerdem die Kommunikation mit dem Kunden verbessert werden.

Was denkt ihr? Wird Catalyst demnächst weit verbreitet sein? Wird es schon in Agenturen benutzt? Schreibt eure Meinung doch in den Kommentaren!

Für das Layout wurde das 960-CSS-Framework benutzt. Außerdem wurde ein Formular unter Verwendung der phpMailer-Klasse realisiert. Verschiedene jQuery-Elemente und grundlegende PHP-Funktionalität runden die technischen Aspekte des Internetauftritts ab.

Diese Produktion entstand gemeinsam mit sieben meiner Kommilitonen an der Hochschule Furtwangen. Aufgabe war es, nur durch Einzelbilder eine Geschichte zu erzählen. Ich war bei dem Projekt für das Fotografieren sowie für die Postproduktion (Schnitt, Bildbearbeitung, Motion Graphics) inklusive Abspann verantwortlich. Die verwendeten Programme waren Photoshop, Wings Platinum und After Effects.

Ziel dieser Arbeit war es, die Mitglieder der Forweiler Entertainment Group mit Hilfe eines kurzen Intros vorzustellen. Die Idee war, die Mitglieder vor verschiedenen Plätzen in Altforweiler zu zeigen und dabei die einzelnen Vornamen zu integrieren. Nach der Konzeptentwicklung wurden alle Personen vor einem Greenscreen gefilmt und in der Postproduktion mit diversen Motion Graphics in After Effects kombiniert.