iOS Formulare mit jQuery

Es gibt ja inzwischen einige Frameworks, die darauf basieren das man ein komplexes Javascript-Konstrukt verwendet – ähnlich einer Desktop-Anwendung – und alle Aufgaben mittels JSON erledigt. Dies ist zum einen aufwendig und zum anderen nur für Backends akzeptabel. Ein Frontend sollte immer unobstrusives Javascript verwenden! Über Apple kann man allerdings sagen was man will, aber im Bereich User Experience hecheln alle anderen hinterher. Mit einigen netten Kniffen und Plugins kann man ein normales HTML-Formular durch jQuery Plugins an die Oberfläche von iOS anpassen, und durch Ersetzen der Elemente nette Ergebnisse erzielen!

Das Passwort Feld

Die Idee, das man bei Eingabe eines Passwortes den letzten Buchstaben lesen kann ist ebenso simpel wie genial. Obwohl sich alle darüber aufregen und man die meisten Passwörter beim Editieren des Profils mittels Firebug eh auslesen kann, stellt dies kein größeres Sicherheitsrisiko dar – zumindest kein größeres als bei allen anderen vorhandenen Funktionen. Das Plugin iPhone-like password fields erlaubt ein Passwort-Feld in einem normalen HTML-Formular.

Passwörter im iOS-Stil

Radiobuttons als Ein/Aus-Schalter

Natürlich existieren komplexe Einsatzmöglichkeiten für Radiobuttons, aber in der Regel bezieht sich der Einsatz auf „Ja/Nein“, bzw. „An/Aus“. Hierfür existiert in iOS ein einfacher Schalter, der es angelehnt an eine Sicherung erlaubt, eine beliebige Frage eben mit „An/Aus“ bzw. „Ja/Nein“ zu beantworten. Feine Sache vor allem visuell sehr gut zu erkennen, da die Funktionsweise eines Schalters wohl jedem bekannt sein dürfte. Das Plugin iToggle erlaubt genau diese Elemente in einem ganz normalen HTML-Formular.

Screenshot von iToggle

Eine komplette UI im iPhone Style

Obige Beispiele helfen schon nachhaltig, die UX zu verbessern, aber es geht auch komplett im iPhone Style mit der iPhone UI. Das jQuery Plugin erlaubt die komplette Erstellung einer Webseite im iPhone-Stil inkl. Menüs, Sliders, Scrollbalken und Formularen. Der tiefere Sinn sei dahingestellt, aber man stelle sich zum Beispiel ein CMS vor, das auf allen öffentlichen Seite eine UI zum direkten Editieren im iPhone-Stil ausklappen könnte. Eine feine Sache und eine Überlegung wert wie ich denke.

Screenshot der iPhone UI

Tutorials für die iOS Oberfläche

Zwei Tutorials für die Oberfläche des iOS machen die Sache rund: Das erste Tutorial erlaubt die Erstellung eines Springboards mittels XHTML, CSS und jQuery – auch als heraus klappbares Hauptmenü in einem Backend denkbar. Das zweite Tutorial beschäftigt sich mit einer 1:1 Umsetzung der iPhone Kontakte App in HTML/CSS/jQuery. Besonders nett an diesem Tutorial ist die Scrollfunktion über das ABC hinweg.

Wie man sieht ist ein intuitiv nutzbares User Interface auch mit relativ einfachen Mitteln möglich und das im iOS angelernte Verhalten einfach auf das Web übertragbar. Wer also demnächst vor der Implementation eines Backends steht, kann sich überlegen, ob er dieses mit ein paar Zeilen Javascript nicht zu wesentlich mehr Durchschlagskraft verhelfen möchte.

Ähnliche Beiträge


Ninja User Interface – Schicke Widgets für jQuery...
Alleine schon wegen dem Namen „jQuery Webjutsu“ ist die Ninja UI erwähnenswert. Es sollte sich inzwischen bis in die hintersten Ecken herumgesprochen ...


Vintage Effekte für Photos mittels jQuery
Ich steh ja auf diese Vintage-Effekte für Photos, und insbesondere auf die ganzen Instagram-Filter die es so gibt. Früher war es ja so, dass man diese...


Chosen – Select-Boxen in Benutzerfreundlich
Select-Boxen sind relativ benutzerfreundlich, so lange man nicht so viel Auswahl hat, und insbesondere nicht mehrere Werte der Box auswählen soll. Let...


Multiple File Uploads, HTML und Open Source
Formulare lassen sich inzwischen ganz gut designen, allerdings gibt es ein Formularelement, das alle Design-Versuche vehement abwehrt: der Dateiupload...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.