Benutzerfreundlichkeit

Die Begriffe Benutzerfreundlichkeit, usability (englisch für Gebrauchstauglichkeit) und User Experience (englisch für etwa Nutzungserlebnis) beschreiben die Kunst, der Absicht eines Anwenders möglichst direkt entgegen zu kommen. Ein Benutzer ist bereits von Erfahrungen geprägt und erwartet deshalb, dass eine Seite nach bestimmten Konventionen aufgebaut ist.

SELFHTML hat zu diesem Thema nicht das eine Tutorial, sondern versucht konsequent best practice-Beispiele und -Technologien zu zeigen:

• 

  Guter HTML-Stil

  Webseiten mit den semantisch passenden Elementen laden schneller und sind für alle Nutzer zugänglich!

   
• 

  Navigation
  • Dropdown-Menüs
  • Flyout-Menü

  
  für alle Nutzer auch mit Tastatur steuerbar!

   
• 

  Formulare zugänglich gestalten
  • Beschriftungen
  • Eingaben vor dem Absenden überprüfen
  • Vorschau, bzw. Kontrollausgabe anzeigen
   
• 

  Guter CSS-Stil
   
• Dark Mode

  Lass' die Nutzer entscheiden:

  
   
• Farben und Kontraste
  • Farbenfehlsichtigkeit
  • Strategien zur Barrierefreiheit
  • Benutzerwünsche berücksichtigen

  
   
• Bilder im Internet
  • Ladezeit und Datei-Größe

  
   
• 

  Internationalisierung

  Sprachwahl bei Mehrsprachigkeit

   
• Usability-Tests

  Wie man seine Webseite auf Benutzerfreundlichkeit testet

   
• 

  Print-CSS (Druckausgabe)
   
• 

  Content is king!

  
  
  
  Form ohne Inhalt ist leer!

   
• Benutzeroberfläche
  • appearance
  • accent-color
  • theme-color
  • cursor
  • caret-color
  • user-select
   

Nicht zu vergessen ist jedoch, dass ein vollständiger und eindeutiger Inhalt für die Benutzbarkeit zentral ist. Oftmals werden bei wichtigen Informationen Details vergessen. Ein typisches Beispiel sei hier die fehlende Zeitzonen-Angabe bei Zeitangaben.

Personalisierte Benutzerfreundlichkeit

Sobald eine Website Interaktion ermöglicht, ist es erwünscht, dass grundlegende Einstellungen eines Benutzers gespeichert und beim nächsten Login wieder hergestellt werden. Typische Beispiele sind:

• Präferenzen bei besonderen Anzeigefiltern oder Optionen
  • Dark Mode
  • prefers-reduced-motion
• Lesezeichen innerhalb eines seriellen Kontextes