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...

Tipp: RSS-Icon RSS-Liste der Artikel, der Link-Empfehlungen und Kommentare.

Zu meinem Lieblingsthema 'User Experience' schreibe ich bei uxzentrisch.de.
Was mich aktuell beschäftigt, könnt ihr bei Twitter @tordans und in meinen Links Delicious/tordans/ lesen.

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.

2 Kommentare

  1. PeterNo Gravatar (dipe.de) 31.05.06 9:47 Direktlink

    Ajax braucht man nur dann, wenn man auf die Datenbank oder andere Resourcen des Servers zugreifen muss. Das ist hier offenbar nicht der Fall. Datums-Arithmetik beherrscht JavaScript schon so. Die Lösung ließe sich also mit JavaScript, CSS und Fleiß realisieren.

  2. TJNo Gravatar (flyingsparks.wwwfiles.de) 31.05.06 15:06 Direktlink

    Hallo Peter, da hast du selbstverständlich recht. Habe mich vom Ajax-Buzz verleiten lassen und das direkt geändert. Danke.

    Dabei fällt mir auf: Ich kann mich nicht erinnern, derartige Autocomplete-Funktionen vor den Ajax-Autocomplete-Scripten gesehen zu haben… Interessant.

Eigenen Funken beitragen

Liebe SEO-Spammer: Jeder Kommentar der nur annähernd nach Link-Spam aussieht, wird gelöscht oder editiert. Bitte erspart mir die Arbeit! Danke. Tobias


Formatierung

  • <a href="http://DEINE-LINK-URL">DEIN-LINK-TEXT</a>
  • <strong>Fett</strong> und <em>Kursiv</em>
  • <blockquote>Ein Zitat-Absatz</blockquote>