Um sich ohne ein Maßband sich die Größe eines Bild besser vorzustellen, zeigt talentarena.de die Bildgröße im Verhältnis zu einer Person, sobald der Nutzer eine Größe ausgewählt hat.

Das Suchfeld im neuen XING-Interface passt sich an die Breite der jeweiligen Sprache an. Wie das technisch gelöst werden kann, beschreibt XING in ihrem Entwickler-Blog.

Kickstarter-Guidelines – Das Label der Nutzungsbedingungen-Checkbox wechselt von Rot auf Grün. Gleichzeitig wird der Button aktiv.

Screenshot Rot (PNG), Screenshot Grün (PNG)

Das Suchfeld auf der neuen Twitter-Media-Seite dürfte Edward Tufte freuen: Keine Linie zu viel. Die Zustände:

• Normal
• MouseOver
• Focus
• Focus mit Text
• MouseOver auf Suchbutton
• Focus auf Suchbutton (Tastatur)

Bis auf den letzten Zustand, der eher wie der vorletzte aussehen sollte, finde ich das sehr hübsch gelöst.

Bei einer @me.com-Adresse werden die Icons der MobileMe-Web-Anwendung angezeigt, bei jeder anderen Adresse ein Bild vom iPhone und iPad als Hinweis auf Apples Ortungsservice, welcher über MobileMe verwaltet werden kann.

PS: Ein weiteres, schönes Interaktionsdetail: Nach der Eingabe der @me-Adresse können die MobileMe-Webapp-Icons angeklickt werden um vorauszuwählen, welche App man öffnen möchte.

Click here to view the embedded video.

Video auf Vimeo

Ändert man seinen Timer von einer Stunde zu 0 Stunden, welchselt die Minuten-Anzeige automatisch auf 1 Minute (Video). Mit diesem einfach und schön dargestellten Standardwert, spart sich die iPhone-Timer-App den Timer-Button auszugrauen, eine Fehlermeldung anzuzeigen oder sonst wie, diesen Mindestwert zu erklären.

Ein Beispiel aus dem Alltag: Wenn ich google.de aufrufe, kann ich direkt mein Suchworte eintippen und Enter drücken und schon bin ich auf der Suchergebnisseite. Dafür muss ich nicht ein Mal meine Hand von der Tastatur zur Maus bewegen. Dieses ideale Nutzungsverhalten, das mir bei jeder Suche laut KLM allein 1.9 Sekunden reine Bewegungszeit spart, ermöglicht uns Google, in dem sie beim Seitenaufruf den Fokus auf das Sucheingabefeld setzen.

Beispiel StayScout: Dank unseres OpenInnovation-Forums setzen wir in StayScout seit einigen Wochen ebenfalls bewusst den Fokus in Eingabefelder: Auf der Startseite können Nutzer direkt mit dem Tippen ihrer Anmeldedaten beginnen. Auf dem Dashboard und den Gruppen-Übersichtsseiten sitzt der Fokus im Suchformular (dem wichtigsten Formular der Seite).

Negativ-Beispiel Bit.ly: Wie schon Björn in Tamims uxzentrisch-Artikel zu Bit.ly richtig kritisiert hat: Warum eine Seite wie Bitly den Fokus nicht direkt auf das Eingabefeld legt, ist mir ein Rätsel!

Technik: Für StayScout verwende ich ein einfaches Inline-JavaScript, das ich in den Formularen einfüge, um den Fokus zu setzen. Aber wer schon stärker auf HTML5 setzen möchte, sollte sich diesen tollen Artikel »A Form of Madness« anschauen, in dem das neue HTML5-Attribut »autofocus« verwendet wird – inklusive einem JavaScript-Fallback, der sehr ähnlich aussieht wie mein Einzeiler hier.

<script type="text/javascript">$(function() { $("input#email").focus(); } );</script>

Nachteil: Es gibt einen Nachteil bei dieser Technik: Setzt man den Fokus in ein Eingabefeld, ändert sich damit auch automatisch der Modus für Tastenkürzel im Browser.  Nutzer (wie ich), die gerne per Tastenkürzel den Back-Button nutzen (Alt + Pfeil nach Links), müssen jetzt erst aus dem Eingabefeld heraus klicken, damit der gewünschte Shortcut funktioniert.

Fazit: Gerade in Such- und Login-Szenarien und gerade bei Funktionen mit Applikationscharakter, werde ich zukünftig in meinen Konzepten gezielt den Fokus setzen (lassen). Diese Hilfe ist fast immer sinnvoll und wird noch viel zu selten genutzt – man darf es nur nicht übertreiben.

Jaja, die Feinheiten der Sprache…

Gefunden bei HTC: http://www.htc.com/www/SupportDownload.aspx?p_id=312&cat=3&dl_id=933

Vor diesem Hintergrund war ich angenehm überrascht vom neuen UserVoice Kommentar- und anmelden/registrieren Formular:

Das Formular im Ausgangszustand:

Die Kombination aus Label, Hilfetext und Eingabefeld habe ich so noch nicht gesehen und finde ich gelungen. Auch die »Remember me«-Funktion ist an der richtigen Stelle zu E-Mail und Namen zugeordnet.

Der Fehler-Zustand:

Auch hier ist das Design-Pattern der kombinierten Label-Textfeld-Hilfetext-Kombination gut verwendet und weitergedacht worden.

Anmeldung über externe Dienste:

Im Vergleich zu den sonst verwendeten riesigen OpenID-Button finde ich diese Lösung dezent und gut integriert. In diesem Zusammenhang lohnt sich übrigens sehr der Artikel "Preview: New UserVoice Sign-In System" aus dem UserVoice-Blog. Dort wird das neue Anmelde-Verfahren beschrieben, das versucht alle Zustände intelligent in einem Formular abzubilden. Schön gelöst!

Was haltet ihr von diesem Formular und dem neuen Anmelde-System von UserVoice (hier ein Link zum Rumklicken)?

Mein einziger Verbesserungsvorschlag ist, die Hilfetexte bei Fokus nicht zu verstecken.

Funktionieren tun diese Seiten in der Regel so:

1. Man hat bereits eine lange URL in der Zwischenablage.
2. Man steuert die Website an und sollte ein großes Einfabefeld für die URL finden
3. Man fügt die URL ein und klickt auf einen Button wie »Shorten«.
4. Die URL wird gekürzt

Das Hauptziel ist nun eigentlich, dass die kurze URL in meine Zwischenablage wandert. Ein Button zum Kopieren der kurzen URL wäre jetzt von Vorteil. Bei Bit.ly gibt es diesen Button auch, jedoch sieht man ihn nicht. Erst wenn man mit dem Cursor in das Eingabefeld geht, erscheint der Button.

Bitly macht hier den Fehler, seine Kernfunktionalität zu verstecken. Statt dessen sollten sie es dem Nutzer nach dem Kürzen so einfach wie möglich machen, seine gekürzte URL zu bekommen. Und diese Funktion auch prominent visuell darstellen.

Ein weiterer Fauxpas ist Bit.ly bei dem Button »Sign in to Share or Customize« passiert: Das Einzige was in diesem Button anklickbar ist, ist der blaue Text »Sign in«. Der Rest des Buttons ist nur Show.

Dabei ist es von vielen Plattformen bekannt, dass bei dieser Anordnung auch die Beschriftung der Checkbox oder des Radio-Buttons anklickbar ist.

Auch HTML gibt uns die Möglichkeit, das entsprechend umzusetzen. Alle modernen Browser interpretieren das <label>-Tag so, dass der Inhalt dieses Tags als Klickfläche dient. Dadurch reicht es meist schon, eine Checkbox bzw. einen Radiobutton einfach in ein Label-Tag zu »verpacken«.

Der Vorteil durch die vergrößerte Klickfläche vergrößert sich, je länger die Beschriftung wird. Das gilt insbesondere dann, wenn Beschriftungen mehrzeilig sind und sich dadurch nicht nur die Breite, sondern auch die Höhe des Klickziels vergrößert.

Wer es noch nicht kennt und gerne auf die wissenschaftliche Ebene wechseln möchte: Hier geht es um Fitt’s Law.

Auf mobilen Geräten mit Touchscreen ist die Größe des Klickziels besonders wichtig, denn dort zeigt der Nutzer nicht mit einem kleinen, spitzen Mauszeiger auf das Kontrollelement, sondern mit dem Finger. Und der ist in der Regel größer als die eigentliche Checkbox bzw. der Radio-Button (»fat finger problem«).

iPhone und Android sehen daher standardmäßig in vor, dass in Formularen genau ein Formularelement pro Zeile steht. Der Nutzer kann die gesamte Zeile antippen und damit ein Element auswählen bzw. aktivieren/deaktivieren. Die nachstehende Abbildung zeigt einen Screenshot von Android 2.1. Links ist der am Gerät angezeigte Zustand zu sehen. Rechts ist die gesamte klickbare Fläsche des Checkbox-Elements hervorgehoben.

Diese Anordnung ist beim iPhone und bei Android – anders als in den Weiten des Web – ziemlich konsequent umgesetzt worden, so dass Ausnahmen hier besonders unerwartet sind.

Eine solche Ausnahme ist die Einstellungen-Seite von Foursquare, die ausgerechnet direkt über den Einstellungen-Dialog aus der Android-Applikation verlinkt wird (foursquare.com/settings).

Wer hier eine Option aktivieren oder deaktivieren möchte, muss – je nach aktuellem Zoom im Browser – ziemlich geschickt sein oder viel Glück haben. Denn die Beschriftungen sind leider nicht als <label> anklickbar. Und um die Schwierigkeit noch etwas zu erhöhen hat man noch zusätzliche Hyperlinks direkt unter die Checkboxen gesetzt (Hype-Thema »Game-Design« in der Formulargestaltung?).

Also: <label> nicht vergessen!

Das klassische Label (a) steht vor dem Textfeld und hat hoffentlich auch einen Label-Tag, so dass man es anklicken kann.

Das nett gemeinte (b) zeigt den Labeltext innerhalb des Textfelds, löscht einem dan aber die eigene Eingabe, wenn man erneut in das Textfeld klickt.

Das macht das gute (c) besser, in dem es auch den Fall abdeckt, bei dem Nutzer mit und ohne eigener Eingabe mehrfach in die Textfelder klicken und vielleicht sogar farblich zwischen Hilfetext (Grau) und Eingabe (Rot) unterscheidet.

Bisher war ich damit auch glücklich und zufrieden. Bis 37signals jetzt noch einen drauf setzt und für die Anmeldemaske in ihrem Launchpad zwei sehr schöne Details umsetzt und damit (d) sehr gut ist:

• Der Hilfetext verschwindet erst bei der Zeicheneingabe. Nicht wie sonst üblich beim Klick in das Textfeld.
• Sie verwenden eine zweiten helleren Grauton dafür um zu signalisieren, dass jetzt getippt werden kann.

Natürlich machen sie auch all die anderen Details richtig, die ich oben erwähnt habe.

Hier kommt das ganze als kurzer Screencast. Und wer jetzt nochmal sehen möchte, wo genau die Unterschiede sind zum heute sonst üblichen Verhalten (c), dem empfehle ich den A List Apart Artikel zu diesem Thema mit  seiner Demo und dieses jQuery Plugin.

Bei der Petition von Stop Killing Dogs (via) kann man eine andere Lösung sehen, wie man Maschinen davon abhält, automatisiert ein Formular auszufüllen. Hier muss der Mensch den Hund erkennen und anklicken:

Eine grafisch sehr schöne Umsetzung einer Idee, die zweifellos eine viel bessere User Experience als das klassiche Text-Captcha hat.

Grundsätzlich ist diese Idee nicht neu: Microsoft Research hat schon 2007 und 2008 unter den Namen ASIRRA (Animal Species Image Recognition for Restricting Access) Untersuchungen und Experimente dazu veröffentlicht. Wer sich daher fragt, wie sicher diese alternative Lösung ist, findet in den ASIRRA-FAQ dazu einen ganzen Artikel…

Da fragt und wünscht man sicht natürlich, zukünftig mehr solcher individuellen Captcha-Lösungen zu sehen.

Kennt ihr weitere Beispiele?

Contact form conversions increased 120% when the number of fields was reduced from 11 to 4 (a 64% decrease). Furthermore, the fields removed had no impact on the quality of the conversions.

Aus eine CaseStudy von Imaginary Landscape die LukeW zitiert. Imaginary Landscape hat die Conversion ihres alten Kontakt-Formulars mit 11 Feldern mit ihrem neuen mit 4 Feldern verglichen.

Vergrößern

Fazit: Wer eine gute Formular-Conversion erreichen möchte, muss den Dialog im Formular so kurz wie möglich halten. Alle zusätzlichen Fragen können gestellt werden – aber erst nachdem das erste Formular abgeschickt ist. Dieses Vorgehen ist aufwändiger, führt aber zu guten Ergebnissen, wie man sieht.

»Our participants were faster, more successful, less error-prone, and more satisfied when they used the forms with inline validation. Eye-tracking also showed that they ›fixated‹ on the forms with inline validation less frequently and for less time, which shows that they found these forms easier to process visually than the forms without inline validation.«

Luke Wroblewski in seinem neuen A List Apart-Artikel »Inline Validation in Web Forms«

Er beschreibt darin anschaulich und ausführlich seine Usabilitylabor-gestützten Nutzerbeobachtungen im Umgang mit einem Webformular.

Lukes Buch »Web Form Design: Filling in the Blanks« aber vor allem die verschiedenen Artikel, die er dazu im Netz publiziert hat, sind eine sehr nützliche Referenz und Argumentationshilfe wenn Formulare konzipiert und gestaltet werden müssen.

Man könnte natürlich, wie Luis von Ahn im Google-Talk »Human Computation«, das Gute darin sehen: Menschen verbringen weltweit bestimmt tausende Stunden damit, Captchas auszufüllen – diese Zeit muss man für Gutes nutzen wie das digitalisieren von Büchern über sein reCaptcha-Projekt.

Für mich macht das das Ausfüllen von Captchas aber nur wenig besser. Aber es gibt noch etwas, das noch mehr nervt als Captchas einmal auszufüllen:
Captchas mehrmals ausfüllen müssen, weil aufgrund einer Meldung das Fomular nicht abgeschickt wurde.

Dabei ist die Lösung wieder sehr einfach und Twitter macht es uns vor:

Ryan Carson hat diesen Fall entdeckt und schön mit Screenshots in seinem Blog dokumentiert: »How to Increase Sign-ups with Easier Captchas«.

Man könnte jetzt noch Fragen, ob dieser Aufwand gerechtfertigt ist, wo doch schon die JavaScript-Validierung im Formular selbst alle Fehler abfängt. Dem würde ich auch zustimmen für ein so einfaches Formular – leider können aber nicht alle Fehler direkt abgefangen werden, weil beispielsweise nur Serverseitig überpfüft werden darf, ob die eingetragene E-Mail-Adresse schon von einem anderen Account verwendet wird.

Mich interessiert jetzt:

Habt ihr diesen Umgang mit Captchas schon anderswo beobachtet?

Oder kennt ihr weitere Formulare, deren UX auf ähnliche Weise verbessert wurde?

Andere Nettigkeiten dieser Art:

• Augenzwinkern bei FeedBurner
• Popularität hat ihre Nachteile
• Niemand mag 404-Seiten

Das Thema dieses Posts ist verwandt, aber nicht identisch mit dem letzten Anti-Pattern-Post Unsinnige Fragen stellen.

Wer eine DHL Paketsendung verfolgen möchte, z.B. nach einer Bestellung bei einem Versandhändler, bekommt vom Versender üblicherweise eine Nummer oder eine Zeichenkette, die zum Beispiel als »Paketverfolgunsnummer« bezeichnet wird. Mit dieser Nummer kann der Verlauf der Lieferung dann auf der Website von Post/DHL verfolgt werden.

Um dem Nutzer eine Entscheidungsmöglichkeit zu geben, bietet die Paketverfolgung von DHL dem Nutzer zwei Eingabefelder für die Eingabe der erhaltenen Nummer an.

Damit wird das Verfolgen einer Sendung ein kleines bisschen spannender. Wo mit nur einem Eingabefeld keinerlei Spannung und null User-Involvement entstanden wäre, wird aus dem langweiligen Abfrage-Akt nun ein interessantes Ratespiel mit einer Erfolgs-Chance von theoretischen 50%.

Denn es ist durchaus wahrscheinlich, dass der Nutzer im Unklaren darüber ist, ob seine erhaltene Nummer im Sinne des Formulars eine Sendungsnummer oder eine Referenznummer ist. Denn nicht mal der Versender der Ware muss das wissen. Er bezeichnet sie ja freiheraus als Paketverfolgungsnummer.

Meine Meinung: Entscheidungen, die Maschinen besser treffen können als Menschen, sollten nicht den Menschen auferlegt werden. Ein Eingabefeld muss reichen. Die Frage, um welche Art von Nummer es sich bei der Eingabe handelt, sollte das System klären.

Habt Ihr eine andere Meinung? Kennt Ihr weitere Beispiele?

»Literally including the phrase “optional” after a label is much clearer than any visual symbol you could use to mean the same thing. Someone may always wonder ›what does this asterisk mean?‹ and have to go hunting for a legend that explains things.«

Aus: LukeW, Web Form Design

LukeW zitiert in seinem Blog eine Studie, in der seine Aussage über die Beschriftung von Pflichtfeldern aus seinem Buch Web Form Design bestätigt wird.