designing-web-interfaces-und-web-form-design

Ganz ehrlich? Ich habe ein Problem mit meiner Selbstdisziplin, wenn es darum geht lange, langatmige Bücher zu Ende zu lesen. Deswegen habe ich wohl die Hälfte aller meiner Bücher nie ganz gelesen.

„Designing Web Interfaces“ und „Web Form Design“ kann ich guten Gewissens empfehlen, weil sie für Leute wie mich gemacht sind. Sie bestehen zu mindestens 30 Prozent aus Bildern und Beispielen und die Texte sind kurz und prägnant gehalten. Ja, ich habe beide zu Ende gelesen.

Für wen sind die Bücher?

Thema beider Bücher ist die Gestaltung moderner Weboberflächen. Stichwörter: Usability und „Don’t Make Me Think!“. Das hat rein gar nichts mit Technik, sondern mit Produktdesign zu tun. Dazu zeigen die Autoren anhand realer Beispiele großer und kleiner Websites, wie man es (nicht) machen sollte und welche Möglichkeiten („Patterns“) existieren. Beide Bücher verfolgen zudem einen offenen Ansatz und haben alle Grafiken auf Flickr veröffentlicht.

„Web Form Design: Filling in the Blanks“ von Luke Wroblewski

web-form-design-filling-in-the-blanks„For everyone who has had to fill in a form“ – mit dieser Widmung beginnt das Buch. Wir alle leiden täglich unter dem Versagen amateurhafter (Web-)Formular-Designer und sollten uns verpflichtet fühlen, dasselbe nicht auch unseren Nutzern anzutun.

Formulare sind das wahrscheinlich kritischste Element eines jeden Online-Geschäftsmodells: Anmeldungsformulare, Bestellformulare, Newsletterformulare, Kontakformulare… – und oft können kleinste Optimierungen dieser Formulare die Completion- und Conversion-Rates in die Höhe schnellen lassen. Konzentrieren Sie sich auf das Wesentliche, und optimieren Sie die wirklich relevanten Seiten, bevor Sie an anderen Baustellen weiterarbeiten. Dieses Buch zeigt, wie es geht.

Nachfolgend einige Grafik-Auszüge aus dem Buch, die alle auch bei Flickr zu finden sind:

some-of-the-pros-and-cons-of-right-aligned-labels

primary-and-secondary-actions

Primary and Secondary Actions


eye-fixations-for-separated-primary-and-secondary-buttons

Eye Fixations for Separated Primary and Secondary Buttons

Der Verlag Rosenfeld Media ist auf die Publikation von Büchern zum Thema User Experience Design spezialisiert und hat auch dem Buch selbst ein wirklich schönes Layout und Design verpasst. Das Buch gibt es sowohl als kostengünstiges PDF (19 US-Dollar) als natürlich auch in gedruckter Form (36 US-Dollar) zu kaufen, wobei das PDF dann gleich mit dabei ist.

„Designing Web Interfaces“ von Bill Scott und Theresa Neil

designing-web-interfacesDieses Buch dient gleichermaßen als Inspirationsquelle und Nachschlagewerk. Es bietet den perfekten Überblick über alle gängigen Web-Design-Patterns (und Anti-Patterns) – von Hover-Effekten über Auswahlmethoden bis hin zu Drag&Drop-Techniken.

Die Autoren haben ihren Erfahrungsschatz in jahrelanger Arbeit als Interface-Design-Consultants für zahlreiche große und kleine Firmen aufgebaut. Bill Scott ist außerdem Mitschöpfer des Yahoo! Design Pattern Library.

Auszüge aus dem Buch (auch wieder bei Flickr zu finden):

american-express-provides-input-overlays-to-guide-the-user-through-the-signup-process

American Express provides Input Overlays to guide the user through the signup process


The Gap provides a nice “Quick Look” feature that is exposed as a Hover Invitation

The Gap provides a nice “Quick Look” feature that is exposed as a Hover Invitation


kayak-shows-the-matched-airport

Kayak shows the matched airport and allows the user to accept the selection by hitting the Tab key

„Designing Web Interfaces“ vom technikaffinen O’Reilly-Verlag gibt es zum Beispiel bei Amazon.de für 39,95 Euro. Für Kaufunentschlossene liefert die Website des Buches einige weitere Einblicke.