Supercharge your front-end with UX best practices / Gercek Karakus (10.5.2014)

Schreibe einen Kommentar
Softwareentwicklung
Beim Entwickeln fängt man ja nicht mit dem Programmieren an, sondern mit einer Klärung, was man eigentlich bauen soll für seine Nutzer. Was wollen die eigentlich? Gibt es da verschiedene Typen? Gercek Karakus geht auf der Codefront.io in Linz gleich ganz voll rein. Sympathischer Typ, ganz in seinem Element.

User Centered Design beschreibt den gesamten Prozess mit zwölf Schritten. Um Probleme zu identifizieren, sollte man bereits mit dem Prototypen zu den Kunden gehen und diese befragen. Karakus will sich aber auf Prototyping konzentrieren.

Formulare

Alles im Netz ist ein Formular: Facebooks Status, das Update beim Twitter. Deshalb sollte man bei allen Formularen, die man integriert, Tracking integrieren. Wo brechen die Leute ab? Vielleicht, bevor sie klicken? Dafür kann man Analytics einfach anbinden.

Man kann es dem Nutzer auch leichter machen:

  • Validieren von Telefonnummern: PayPal macht das ganz gut.
  • Validieren von Mailadressen: Man kann das bei der Eingabe bereits überprüfen.
  • Animationen sind wieder total in. Aber man kann es das auch gut machen. Etwa das Schütteln, wenn etwas falsch ist, beim Stripe-Formular, das dem Shake-Effekt bei der Eingabe eines falschen Logins an einem Mac ähnelt.

Karakus rät:

  • Für mobile Nutzer nutzt einfach die unterschiedlichen Input-Types.
  • Man kann die Felder auch autobefüllen lassen. Dafür sollte man normale Namen wie address nutzen.
  • Man kann auch die automatische Großschreibung ausschalten in Feldern.
  • Nach einer E-Mail, die ihr an mich verschickt hat, schickt ihr mich ins Sign-up-Formular. Warum? Es geht besser. Das gute Beispiel kommt vom Linkedin-Newsletter.

Weitere Tipps:

Icon-Fonts sparen HTTP-Requests, sind besser zu maintainen und sehen auch immer klar aus, egal auf welchem Device.
Im Web haben Spinner nix verloren. Man kann das schön mit Animationen überbrücken, wenn etwas länger dauert. Bestes Beispiel derzeit: Facebooks Laden der Einträge im Stream. Potluck bietet kontextuelle Animationen. Ich wähle etwas aus, dann wandert es rüber. Wenn ich es schließe, wandert es wieder zurück.

Die Zusammenfassung von Responsive Web Design spare ich mir. Nix Neues Oder zumindest Inspirierendes da. Klar sollte man auf echten Geräten testen. Ach was. Von klein nach groß gehen beim Definieren im CSS. Das kleinste CSS geht aufs kleinste und schwächste Gerät.

Ok, einer war gut: Beim Responsive Design kann man sich auch die Höhe des Geräts anschauen. Damit kann man auch die Höhe von Bildern beeinflussen.

Weiterlesen:

  • ia.net/blog/responsive-typography-the-basics
  • Fontastic statt Font Awesome
  • Mobify Beginners Guide to Perceived Performance

Schreibe einen Kommentar

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