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?

 

Nuernberg Streetart

Seit 2006 wohne ich in Nürnberg. Ganz in der Nähe gibt es einen Discount-Markt. Dahin gehe ich immer mal wieder zum Einkaufen. Oft auch zu Fuss, es ist ja nicht weit.

Bei einem der ersten Spaziergänge war es plötzlich da. Ein Zeichen, ein Symbol.
Beim ersten Hinsehen denkt man an ein Logo, man wird etwas stutzig, dann erkennt man: es ist Urban Art der anderen Art…

Seit dem entdecke ich in der ganzen Stadt immer mehr davon.

Weiterlesen „Nuernberg Streetart“

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/

Gridr Buildrr
gridr buildrr

….mit anderen nur einzelne Layer Styles… http://layerstyles.org/builder.html

layerstyles CSS Layer Styles -Online Tool
layerstyle.org

…manche fassen viele CSS Funktionen zusammen… http://slides.html5rocks.com/#css3-title

Weiterlesen „Interface Design mit Gänsehaut Garantie“

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?“

Visuelle Kommunikation erklären

Jemand hat mir eine Blog URL geschickt und gefragt was ich davon halte. In dem Blog wurde über visuelle Codes berichtet und das Thema Gestaltgesetze kurz angerissen. Ich hab geantwortet das ich freilich was von Visueller Kommunikation halte – schliesslich gehört das Thema zu den Basics meines Berufes. Ein Versuch der Annäherung an das Thema – „Visual Communication for Beginners“ sozusagen – hab ich bei Prezi erstellt. Leider lässt sich das #flash Filmchen partout nicht auf wordpress.com einbetten. Hier gehts zum Prezi: Visuelle Kommunikation für Anfänger

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