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.

Schreibe einen Kommentar

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