Auch Wunderkinder können nicht alles.
Hier die Aktivierungs-Mail für die Wunderlist wie sie auf dem iPhone angezeigt wird.
Kategorie: Auf den Schirm – Interface Design
Über Interface Design, Interaction Design und Gestaltung von Oberflächen
Wo bitte gehts nach Deutschland
Kennt ihr schon runtastic.com?
Das ist eine Plattform auf der man seine sportlichen Aktivitäten verwalten kann. Mit verschiedenen Eingabegeräten (Iphone, GPS und all so was) kann man seinen Standort, Laufstrecken etc. übermitteln. Selbstverständlich wird alles gleich nach Facebook gepostet.
Das Anmelden ist wie immer ein Spass. Hier ein Screenshot des Länder DropDown. Wer findet denFehler?
Interface Design mit Gänsehaut Garantie
Beim Stöbern im Netz bin ich schon auf so manchen tollen CSS Generator gestossen. Mit dem einen kann man Grids erstellen… http://gridr.atomeye.com/
….mit anderen nur einzelne Layer Styles… http://layerstyles.org/builder.html
…manche fassen viele CSS Funktionen zusammen… http://slides.html5rocks.com/#css3-title
Design mit Absichten
Nun ja, selten rutscht uns Designern mal eine Gestaltung so ganz zufällig aus dem Ärmel. (Soll aber auch schon vorgekommen sein.) Grundsätzlich gestalten wir User Interfaces natürlich immer mit Focus auf das Nutzerverhalten. Schon während wir die Mock-Ups erstellen überlegen wir uns genau wo der Nutzer hinschaut, wie er mit der Oberfläche interagiert. Dabei nutzen wir nicht immer alle Möglichkeiten den Betrachter zu lenken und entsprechend unserer Intention zu beeinflussen.
Eine etwas andere Hilfestellung unser Design zu hinterfragen gibt uns Dan Lockton, Designer aus London und einer der Sprecher auf der DfC cologne mit seinem „Design with Intent toolkit 1.0“. Eine Art Leitfaden für Designer aller Disziplinen. In 8 verschiedene Rubriken unterteilte Kartensets sollen uns Gestalter dazu animieren unser Design anhand der Fragen und Anweisungen auf 117 Kärtchen zu hinterfragen. Zu beziehen über Dan Locktons Website in gedruckter Form oder zum kostenlosen Herunterladen.
Ein Beispiel aus der Rubrik interaction:
„Kannst du rechtzeitig Hinweise geben wan der Nutzer sein Verhalten ändern soll?“
Like buttons
Mit einem der hässlichsten Like Buttons* die ich bisher entdeckt habe, eröffne ich jetzt mal die Sammlung
Registrierung einfach und schnell
Neulich auf der Pantone Website: Pantone hat es einfach erkannt, neue Nutzer sollen schnell und einfach in den vollen Genuss des tollen Services der Website kommen.
Ein Steuerformular sieht ähnlich aus:
Leider weiss ich immer noch nicht was myPantone so zu bieten hat. Eigentlich schade.
Inline Validation
Die Anzeige von Fehler in Webformularen ist gerade bei Registrier-Formularen besonders kritisch. Früher war die Validierung immer erst nach Absenden der Seite und somit einem kompletten Reload möglich. Seit Ajax und jquery wurde uns mit der Inline Validation eine neue Tür im UX Himmel aufgestossen.
Die Eingabe des Nutzer kann sofort verifiziert werden und wir können unseren leidgeplagten Besuchern umgehend Rückmeldung für seine Eingabe geben.
Einige Beispiele:
Klassische Umsetzung in der Registrierung von Fontshop.com.
Hübsch gemacht ist das folgende Beispiel. Optimistisch stimmende grüne Häckchen in lichtgrünen Felder direkt hinterm Input. Die Fehlermeldung wird analog in rot hinterlegten Feldern angezeigt. Wer genug Platz hat wie hier in einem Modal Layer ist damit bestens bedient.
Mein Lieblings-Beispiel habe ich bei der Registrierung von Skitch* entdeckt. Hier wird intensiv mit Farben als Indiz für „richtig“ und „falsch“ gearbeitet. Kein Häckchen hinter oder im input Feld, der Text im Input wird grün oder rot eingefärbt und die Hintergrundfarbe kriegt auch noch einen Hauch davon ab. Sehr witzig finde ich auch die Inline Labels die sich beim onfocus Event nicht einfach ausblenden sondern die Schriftgröße ändern nach rechts rutschen.
*Ein Desktoptool für Screenshots.
Weiterlesen:
Luke W bei a list apart über Inline Validation
User Experience and Psychology of Colour
*Danke an Christian für den Link
Ergonomie&Design 
