flying sparks ein Weblog von Tobias Jordans zu den Themen software designstudium web2.0 webdesign informationsdesign oekologie werbung usability tj video interfacedesign marketing // alle Themen...

Alle Funken für das Thema optimierung:

Warum verstecken wir alle den Datepicker?

Ich fühle mich schon ein bisschen vorgeführt, wenn ich im 37signals-Produktblog eine so einfache und bisher unerreicht schnelle Lösung für das schnelle Eingeben von Datumwerten sehe:

Den Datepicker-Kalender einfach nicht verstecken sondern immer anzeigen… — genial einfach :-).

datumsauswahl in basecamp

Warum sieht man das eigentlich zum ersten Mal? Sicher auch, weil kaum ein Interface so reduziert konzipiert wird, wie bei 37signals. Dann kann man es sich auch mal leisten, für eines der wichtigen Formularelemente etwas mehr Platz zu nutzen.

Nebenbei: Meine eigenen Ideen mit JavaScript-Spielchen die textbasierte Eingabe zu beschleunigen, habe ich leider immernoch nirgends umgesetzt zu sehen. Das wäre im Übrigen auch der wichtige Verbesserungsschritt, den ich jetzt im Basecamp-Interface sehe: Den „Due: June 12, 2007"-Text durch ein Inputfeld zu ersetzen, in dass man auch per Hand Daten reinschreiben/-pasten kann.

Und wenn man dafür keinen Platz hat?

Auch dann kann man die Klick-Arbeit und -Zeit noch reduzieren. Yahoo hat nämlich ebenfalls mit einer Quasi-Konvention gebrochen und zeigt die Datumsauswahl nicht „OnClick auf Button" sondern „OnFocus in Textfeld" an. Wieder einen Klick und damit 10.000 $ pro Jahr gespart, wie Jacob Nielsen sagen würde ;-).

datepicker bei yahoo yui

Im Übrigen ist der Yahoo-Kalender auch sonst sehr gut optimiert und damit sogar dem OpenSource-Quasi-Standard vorzuziehen.

PS: Zum Schluss noch etwas Visuelles und Technisches für Interessierte.

[tags]javascript, gui, benutzereingabe, datum, interaktion, interfacedesign, optimierung, 37signals[/tags]

JavaScript-Datumsauswahl

Ich glaube, ich habe jetzt eine Antwort auf meine zwei Monate alte Frage „Wie sähe ein optimales Datums- oder Zeit-Eingabefeld aus?„:

JavaScript-Autocomplete…

Mein ursprünglicher Gedanke war ein einfaches Inputfeld das zu Beginn so aussieht [_00.05.2006_]. Klickt man rein, wird alle markiert. Fängt man an zu tippen, werden die Zeichen von vorn beginnen ersetzt (die Punkte bleiben aber immer stehen), so dass man immer im richtigen Format ist, jedoch Komfort und Geschwindigkeit eines einzelnen Feldes und des Monats- und Jahres-Vorschlages erlebt.

Unglücklicherweise scheint noch niemand auf diese Idee gekommen zu sein, was zu zwei Problemen führt: 1. Finden man kein Script im Netz, 2. könnte das Verfahren für den Benutzer zu ungewohnt sein…

AndyBudds Post über „Select Box Usability Madness" hat mich jetzt auf eine andere Fährte gebracht: Autocomplete. Für ein Problem wie Andys ist Autocomplete ideal: Ein einfaches Feld und sobald ich „England" eintippe kann das System mit „United Kingdom" reagieren (wenn England unerwünscht ist). Man kann durch das AutoComplete viel mehr Fehlerkorrekturen einbauen und sie vor allem vor dem User verstecken.

Das Gleiche geht auch für Datumsangabe: Zu Beginn steht Grau 00.05.2006 im Feld. Klickt man hinein wird der Text selektiert. Beginnt man zu Tippen, zeigt einem das JavaScript-Autocomplete, wie das Datum in der Form, die man zur Eingabe gewählt hat, aussehen würde. Im besten Fall muss ich so nur 1 Zeichen eingeben (Tag) und kann den Rest aus dem Autocomplete wählen. Für Tag und Monat wären es dann maximal 4 Zeichen (wenn Punkte automatisch gesetzt werden).

In der Yahoo-Interface-Library gibt es ähnliche (textbasierte) Picker zum Test und Download. Genauso bei Script.aculo.us (Beispiel).

Kombiniert man dieses schnelle tastaturbasierte Verfahren mit einer visuellen Datumsauswahl, kommt jeder Benutzertyp schnell zum Ziel.

Update 06-05-31: Ajax in JavaScript umbenannt. Siehe Kommentare.