Tag: Webdesign

Designrules im Webdesign, die häufig unterschätzt werden

Es gibt viele Dinge, welche zur Verbesserung der Benutzerfreundlichkeit einer Webseite beitragen. Doch auch wenn einige Designelemente gut aussehen, sie könnten einen Einfluss auf die Benutzerfreundlichkeit haben.

Zentrierte Logos schaden der Navigation auf Webseiten

Getting back to the homepage is about 6 times harder when the logo is placed in the center of a page compared to when it’s in the top left corners. (Quelle: nngroup.com)

Buttons sollten keinen Hand-Cursor haben

There is this belief that the hand cursor means “clickable”, but this is incorrect and potentially problematic. My hope is that by the end of the article, you’ll never want to use the hand cursor for buttons ever again. (Quelle: medium.com)

Ist das “mein” oder “dein” Interface?

Wann sollte man “mein” oder “dein” in Benutzeroberflächen nutzen? Kurz zusammengefasst:

  • mein (o.ä.) nutzen, wenn der Nutzer mit dem Produkt interagiert, beispielsweise klicken von Buttons oder auswählen von Checkboxen. Solche Wörter sollten aber nur verwendet werden, um etwas besonders hervor zu heben.
  • dein (o.ä.) verwenden, wenn das Produkt Fragen stellt, Anweisungen gibt oder dem Nutzer Dinge beschreibt. Eben so, wie es ein persönlicher Assistent tun würde.

(Quelle: medium.com)

Design Rules für Eingabefelder

Eingabefelder sind allgegenwertig. Jede Interaktion mit Benutzeroberflächen, egal ob über Desktops oder mobile Endgeräte, erfordert Eingabefelder. Kurz zusammengefasst, welche Punkte hier wichtig sind:

  • Position von Labels: die beste Position für Labels ist links oberhalb vom Eingabefeld. Damit wurden Formulare am schnellsten ausgefüllt. Labels links neben dem Input fuhrten hingegen zu einer Verlangsamung beim Ausfüllen, da hier die Augenbewegung deutlich zunimmt.
  • Platzhalter: Platzhalter sind hilfreich, jedoch nicht wenn diese beim Fokus auf das Eingabefeld verschwinden. Also lieber ein aussagekräftiges Label verwenden. Eine neue Methode, bei dem der Platzhalter beim Fokus auf das Eingabefeld zum Label wird, könnte diesen Nachteil ausmerzen.
  • Keyboard: einige Eingabefelder erfordern nur Zahlen als Eingabe. Auf mobilen Endgeräten kann die Nummerblock-Tastatur sehr hilfreich sein. Aktivieren lässt sich diese durch “tel” als type oder das Attribut “pattern=”[0-9]*”.

(Quelle: uxbooth.com – The New Rules of Form Design)

Cards

Cards sind eine beliebte Möglichkeit, mehrere Elemente auf einer Seite darzustellen. Eigentlich sehr einfach umzusetzen, doch es gibt einige Dinge, die man beachten sollte. Auf zurb.com sind 5 Fehler aufgelistet, die häufig beim Erstellen von Cards gemacht werden. dazu gehören:

  • Große Freiräume durch unterschiedliche Höhen der Cards
  • Zu viele Cards auf einmal
  • Zu viele Aktionen innerhalb einer Card
  • Zu viele Inhalte in einer Card
  • Graphiken in Cards, wenn diese nicht zwingend benötigt werden.

(Quelle: zurb.com – 5 Common Mistakes Designers Make When Using Cards In Design)