Usability (Benutzerfreundlichkeit)

Wem nutzt die beste Platzierung in der Suchmaschine, wenn der Benutzer die Webseite sofort wieder verlässt? Heutzutage entscheiden Besucher einer Webseite innerhalb weniger Sekunden, ob sie auf der Seite bleiben oder diese besser sofort wieder verlassen. Da können die Inhalte der Webseite noch so gut sein. Wenn der Besucher seine gewünschte Information nicht auf Anhieb findet, ist dieser sofort wieder verschwunden und klickt den nächsten Link auf Google. Ein schlechtes Webdesign ist dann meistens die Ursache, wo die Optimierungsmaßnahmen ansetzen müssen.

Beim Aufbau des Webdesigns muss man sich natürlich über seine Intensionen und die Zielgruppen hinreichend Gedanken machen und auch auf diese das Webdesign ausrichten. Einzelne notwendige Gedankenschritte für die Planung der Webseite haben wir in einem vorhergehenden Artikel beschrieben. Es gibt aber auch einige Grundregeln, die sich über die Jahre, seitdem es das Internet gibt, etabliert haben.

Grob kann man die Faktoren zur Usability in zwei Gruppen einordnen. Die eine Gruppe betrifft das Webdesign, wie Layout und Aufbau der Navigation. Die andere Gruppe betrifft technische Aspekte, wie Ladezeiten oder Browser-Kompatibilität.


Ladezeiten

Zu Modem-Zeiten war dies ein großes Thema. Damals mussten alle Bilder möglichst klein sein und die Webseiten möglichst nur aus Textinhalten bestehen. Heutzutage, wo fast jeder einen Breitbandanschluss hat, möchte man meinen spiele die Ladezeit der Webseite nur noch eine untergeordnete Rolle. Heute muss man aber auch hinreichend den mobilen Benutzer bedenken, dem ggf. nur Edge zur Verfügung steht.
Generell kann man festhalten, dass die Webseite immer so schnell wie möglich ausgeliefert werden sollte. Wie man die Ladezeit testen kann, haben wir im Artikel Google Page Speed beschrieben. Selbst kann man die Ladezeiten seiner Webseite oder seines Webprojektes ebenfalls durch verschiedene Methoden anpassen, wie der Webseiten-Komprimierung und dem Browser-Caching.


Server

Ein erster Ansatzpunkt für die Ladezeit ist der Server, welcher die Webseite "ausspuckt". Ist dieser zu langsam, weil dieser selbst eine lahme Internetanbindung hat oder weil dieser überlastet und nicht ausreichend dimensioniert ist, wird die Webseite zu langsam bereitgestellt. Hier kann man nur selten selbst Hand anlegen außer man betreibt den Webserver selbst. Da in den meisten Fällen aber ein Webpacket oder Homepage-Hoster seinen Dienst erweisen wird, kann man einen Wechsel in ein leistungsstärkeres Paket oder gar einen Wechsel zu einen anderen Anbieter in Erwägung ziehen.


Bilder

Ein weitere Ansatzpunkt sind die in der Webseite integrierten Bilder. Diese sollten zwar eine genügend hohe Auflösung haben, aber nicht die 12 Megapixel, wie die Digitalkamera sie ausgibt außer Sie bieten Originalfotos zum Download an. Skalieren Sie die Bilder im so klein wie notwendig. Wenn Sie die Bilder im HTML-Editor verkleinern müssen, sind diese vermutlich zu groß.
Wählen Sie auch abhängig vom Bildinhalt das Dateiformat entsprechend aus. Weitestgehend etabliert haben sich PNG, JPG und GIF, wobei GIF auf dem Rückzug ist und nur für kleine Animationen verwendet werden sollte. Den genauen Unterschied zwischen den verschiedenen Bildformaten haben wir in einem separaten Artikel beschreiben. Kurz kann man aber sagen, dass JPG/JPEG eher für größere Bilder mit vielen Farben ohne Transparenz verwendet werden sollte, z.B. bei Fotos. PNG verwendet man immer dann, wenn wenige Farben im Bild sind oder Transparenz erforderlich ist.


Videos

Der Einsatz von Videos oder anderen speicherintensiven Animationen sollte gut durchdacht sein. Man denke auch wieder an den Smartphone-Besitzer im Edge-Funkloch mit beschränkten Datentarif. Und verzögert sich die Auslieferung der Webseite, weil das Video erst vollständig geladen werden muss, ist der Besucher ganz schnell wieder weg. Deswegen sollte ein automatisches Starten des Videos auf jeden Fall abhängig davon gemacht werden, ob ein Desktop-Browser oder ein mobiler Browser die Daten anfordert um die Ladezeiten nicht überzustrapazieren.


Wahl der Technik

Das Thema Wahl der Technik ist natürlich ein übergreifendes Thema, welches sich teilweise mit den anderen Aspekten der Usability überschneidet. Auch sollte man bei der Wahl der Technik nicht nur die Usability der Besucher in Betracht ziehen sondern auch die eigene Bedienerfreundlichkeit, wenn es z.B. darum geht Inhalte online zu stellen. Mögliche Techniken gibt es viele. So kann man reine statische HTML-Seiten schreiben oder diese, wie bei DA-HelpCreator im einfachen Markdown schreiben. Man kann Datenbanken einsetzen und Content Management Systeme (CMS) wie WordPress oder Joomla. Alle Techniken sollte man sich genau anschauen und für den jeweiligen Einsatzfall wählen.

Statische Webseiten bieten den Vorteil der schnellen Ladezeiten und ich kann das Design individuell anpassen und ggf. auch unproblematisch den Hosting-Anbieter wechseln. Dagegen spricht ein ggf. etwas höherer Arbeitsaufwand, da man sich um einzelne Formatierungen kümmern muss. Im Zweifelsfall, wenn man nicht Bootstrap verwendet, muss man sich auch individuell darum kümmern, dass die Webseite auch bedienerfreundlich auf dem Smartphone aussieht.

Hinter CMS stecken meistens dynamisch erzeugte Webseiten mit z.B. PHP und einer Datenbankanbindung. Vorteil hier ist, dass man nur einmal das Design festlegt und dann Inhalte sehr leicht veröffentlichen kann. Jedoch wird man der Möglichkeiten zu individuellen Anpassungen beraubt. Auch ein Serverwechsel ist nicht so einfach, da die Datenbank mit umziehen muss und neu konfiguriert werden muss. Die Verwendung von Templates in CMS ist praktisch, da diese meist von Haus aus eine gute Usability mitbringen auch für den Webmaster, birgt aber die Gefahr, dass man sich mit anderen Seiten sehr gleicht und nicht heraushebt.


Navigation

Die Navigation ist von zentraler Bedeutung für die Usability einer Webseite. Hier sollte man wenig Experimente machen und sich ein etablierte Quasi-Standards halten. Jeder User, der neu auf eine Webseite gelangt, muss sich erst einmal zurechtfinden und will möglichst schnell zu seiner gesuchten Information gelangen. Gelingt ihm das nicht, wird er sofort wieder verschwinden.

Als erstes ist zu entscheiden, wo die Menüleiste für die Navigation zu platzieren ist. Hier hat sich die linke Seite oder ein horizontales Menü oben auf der Seite etabliert. Das Menü muss immer sichtbar sein und darf nicht durch überdimensionierte Bilder verdeckt werden oder durch Scrollen aus dem Sichtbereich verschwinden. Man sollte kurze, inhaltlich gute Schlagworte wählen. Untermenüs sind sehr praktisch; von einer zu starken Verästelung auf fünf oder mehr ebenen ist aber abzuraten.
Sehr empfehlenswert ist es den Link- bzw. Seitenpfad in Form einer sogenannten Breadcrumb Navigation einzufügen.

Beispiel Startseite > Optimierung und SEO > Usability

Das Menü sollte darüber hinaus noch auf der obersten Ebene ein paar Standardlinks aufweisen. Dazu zählen auf jeden Fall der Link zum Impressum sowie Link Kontakt mit Verweis auf ein Kontaktformular und ggf. ein Über uns-, Über mich- oder Unternehmen- Link, welcher die wichtigsten Informationen enthält, wie eine kleine Beschreibung, Ansprechpartner, Events, Pressemitteilungen u.ä. Da solche Standardlinks das Menü schnell füllen, werden diese gern auch in ein separates Menü in der Fußzeile von großen Seiten verlegt.

Weichen Sie auch nicht von den Standards für Links ab. Ein Link muss immer als solcher für den Benutzer erkennbar bleiben. Das heißt, dass dieser möglichst die Schriftfarbe Blau hat. Bei einem Überfahren mit der Maus (Mouse Over) sollte der Link unterstrichen werden. Bereits betätigte/besuchte Links müssen andersfarbig gekennzeichnet werden. Links, die von der eigenen Webseite wegführen, sollte man immer in einem neuen Fenster(Tab) öffnen. Bei internen Links bleibt man im selben Browserfenster.


Auflösung bzw. Breite des Layouts

Die Breite des Webseiten-Layouts spielt eine erhebliche Rolle bezüglich der Usability. Dadurch bekommt der Besucher sofort einen Gesamteindruck, der entweder gut oder störend sein kann. Fakt ist: Horizontales Scrollen sollte man soweit als möglich vermeiden. Prinzipiell kann man zwischen zwei Layoutbreiten für eine Homepage unterscheiden. Das eine ist die 100%-Breite (ganzes Browserfenster) und das andere ist die fixe/feste Breite.


Layout mit fester Breite

Hier definiert man im Rahmen des Webdesigns eine feste Breite in Pixel. Dadurch lassen sich auch die zukünftigen Inhalte sehr gut darauf anpassen. Wählt man die Breite zu klein, besteht jedoch die Gefahr, dass gerade auf großen Monitoren viel leerer Raum entsteht und der eigentliche Inhalt etwas verloren wirkt. Wählt man die Breite zu groß, läuft man Gefahr, dass auf kleineren Laptop-Monitoren horizontales Scrollen erforderlich wird. Hier muss ein gutes Mittelmaß gefunden werden. 800-1000 Pixel sind dabei derzeit ein guter Richtwert.


100%-Breites Layout

Ein solches Webseiten-Layout erstreckt sich immer über die gesamte Breite. Für Homepages mit hauptsächlich Textinhalt ist davon abzuraten, da bei sehr breiten Browserfenster sehr lange Textzeilen entstehen, was sich negativ auf den Lesefluss auswirkt. Geht es jedoch darum auf möglichst wenig sichtbarer Fläche viel darzustellen, ist diese Design gut geeignet. Beispiele hierfür sind z.B. Übersichten von Fotoalben oder Online-Shops, die möglichst viele Produkte anzeigen möchten, die sonst erst durch vertikales Scrollen sichtbar werden würden.


Rücksicht auf Menschen mit Einschränkung

Im Zusammenhang mit Usability ist auch immer wieder zu lesen, dass beim Webdesign auf Menschen mit Einschränkung Rücksicht genommen werden soll. Aber was heißt das konkret und was kann der einzelne Homepage-Betreiber dazu beitragen?
Bei den betroffenen handelt es sich meistens um Menschen mit einer Sehschwäche oder die blind sind. Das Interessante dabei ist, dass Robots von Suchmaschinen ähnlich agieren, wie blinde Menschen, da sie zum Beispiel Grafiken nicht direkt erkennen können. Wer also bei der Erstellung seine Webseiten die Regeln für Menschen mit Einschränkungen berücksichtigt, hat gleichzeitig eine gewisse Suchmaschinenoptimierung.
Die meisten Menschen mit Seheinschränkung lassen sich Webseiten über einen sogenannten Screenreader vorlesen. Daraus leiten sich folgende Forderungen ab:

  • gut strukturiertes HTML mit verschiedenen Überschriftenebenen verwenden (sollte man sowieso machen)
  • auf Skalierbarkeit achten. Keine fixen sondern relative Größenangaben für die Schriftgröße verwenden. So können Texte beliebig vergrößert werden.
  • Abkürzungen sollte man mit dem Abbreviation-Tag kennzeichnen
  • für einen Hörer nachvollziehbare Linktexte
  • Bilder für Layout-Zwecke ohne Alt-Tag ausführen
  • inhaltliche relvante Bilder immer mit Alternativtext (mit alt-Tag) angeben

Dieses Thema lässt sich noch weiter vertiefen unter der generellen Bezeichnung "Barrierefreies Internet". Dazu wurde extra eine Initiative Web Accessibility Initiative (WAI) unter dem W3C gegründet.


Responsive für mobile Geräte

Sehr viele Besucher Ihrer Webseite werden nicht mehr klassisch über den Laptop oder Desktop-PC zu Ihnen finden, sondern mit dem Pad oder Smartphone. Deswegen sollten Sie auch immer eine Ansicht für mobile Geräte/Browser anbieten. Hier bietet sich ein Responsive Design an, welches seine Webansicht abhängig vom Gerät anpasst. Die Anforderungen an die Usability sind natürlich dadurch geräteabhängig. Die Bedienerfreundlichkeit sollte auch vom Webmaster geräteabhängig getestet werden.

Bild Mobiles Geräd Pad


Töne, Sounds und Musik

Ich mache es kurz: es ist ein No-Go. Vermeiden Sie jegliche Musik, Sounds und Töne, die automatisch nach dem Laden der Webseite ertönen. Der User ist irritiert, wenn nicht sogar peinlich berührt in einem öffentlichen Internet-Café und kommt nie wieder. Achten Sie auch bei der Einbindung von Werbung über Drittanbieter darauf. Wollen oder müssen Sie trotzdem Sound einbinden, so sollte dieser vom User aktivierbar und deaktivierbar, z.B. über einen Button sein.


Animationen

Der Einsatz von Animationen ist nicht ganz so kritisch zu sehen, wie die Verwendung von Sounds. Dennoch sollte man Animationen nur in wohl bekömmlicher Dosis einsetzen. Geht es auf der Webseite hauptsächlich um den Textinhalt, wie in einem Blog oder auf einer Nachrichtenseite, so sollte man Animationen weitestgehend vermeiden, da diese ablenken und den Lesefluss stören. Ein Unding sind die alten in die Tage geratenen Gif-Animationen, die durch ständige Wiederholung oder ständiges Blinken einen in die Nervosität treiben. Hat man nicht gerade eine Fun-Seite, wo gut gemachte Gif-Animationen hip sind, sollte man Sie vermeiden. Etwas anders sieht es bei eine Shop oder einer Produktvorstellung aus, wenn z.B. der neueste Audi in 3D-Ansicht animiert präsentiert wird.


Schriftgrößen und Schriftarten

Man möchte fast meinen, es sei selbstverständlich, dass man eine passende gut leserliche Schriftart und -größe wählt. Stört sich der User daran ist er ganz schnell wieder verschwunden. Natürlich kann man für das Fotoalbum der Hochzeitsfeier verschnörkelte Schrift wählen; für einen langen wissenschaftlichen Text aber bitte nicht mehr.


Kontaktmöglichkeit

Mal abgesehen davon, dass es für die meisten Webseiten Pflicht ist im Impressum Kontaktdaten zu hinterlegen, gehört es zum guten Ton ein separate Kontaktseite anzubieten über welche der User mit dem Webseitenbetreiber in Kontakt treten kann. Auf einer solchen Seite sollte man vorzugsweise ein Kontaktformular veröffentlichen. Dieses kann man z.B. einfach mit dem DA-Formmaker erzeugen und einbinden.

Und je nach Inhalt oder Dienstleistung kann man auch eine Chatbox in Erwägung ziehen, wie die von Keeptalking. Damit können dann Besucher direkt, live über die Internetseite mit dem Webseitenbetreiber in Verbindung treten.

Für eine gute Usability muss der Link zur Chatbox oder zum Kontaktformular in der zentralen Navigation erfolgen.


Webseite testen lassen

Betriebsblindheit setzt ganz schnell ein und oft ist man von seinen kreativen Künsten auch sehr überzeugt. Deswegen seien Sie kritisch und nehmen Sie sich möglichst konstruktive Kritik von Außenstehenden an. Es muss nicht immer gleich ein professioneller Dienstleister sein, der Ihre Homepage auf Usability prüft. Das können große Firmen machen. Fragen Sie Freunde und Bekannte. Oder machen Sie ggf. eine kleine Umfrage bei Ihren Kunden.


Soft-Skills

Für ansprechende Inhalte und damit die Besucher Freude am Lesen haben und somit etwas länger auf der Homepage verweilen spielen die Soft-Skills eine wesentliche Rolle für eine gute Usability. Dazu zählen unter anderem:

  • übersichtlicher Schreibstil und gute Gliederung
  • klare Sprache und Ausdrucksweise
  • keine zu langen Kettensätze
  • wohl dosierter Einsatz von Fachtermini
  • zielführende Informationsbereitstellung