Web-Usability kann man testen
Ob dein Design auch eine gute Usability bietet, kann man durch Usability-Tests herausfinden. Getestet wird sowohl mit Prototypen, also vor der Veröffentlichung, als auch auf der Live-Seite. Dabei ist es wichtig, mit Personen aus der Zielgruppe zu testen. Die Methoden reichen von einer Aufgabenanalyse über die Blickverlaufsmessung (Eye-Tracking) bis zu Multivariaten Tests. Bei kleinen Unternehmen oder Selbstständigen reicht für diese Usability-Tests das Budget nicht aus. Dann nimmst du eben Personen aus deinem Bekanntenkreis, die die nötige Vorkenntnis haben.
Verwendest du das CMS WordPress, kannst du gute Branchen Website-Templates verwenden. Diese sind schon auf das typische Nutzerverhalten angepasst. Trotzdem solltest du bei Verwendung eines WordPress-Themes die Usability nachprüfen und ggf. anpassen lassen.
Information ist nicht alles
Eine Website kann viel mehr bieten als nur nüchterne Information. Sie ist deine Repräsentanz im Internet. So ähnlich wie ein Firmengebäude einer Firma, nur eben in der virtuellen Landschaft. Deswegen prägt der erste Eindruck ein vorläufiges (Vor) Urteil beim User, noch bevor er richtig in deine Website einsteigt. Mit dieser Konditionierung betrachtet er dein Angebot.
Angenommen, der Kunde steigt über die Homepage ein. Nur zur Info: Das ist zwar meistens der Fall. Aber genauso gut kann er über einen Link im Browser kommen und direkt auf einer Inhaltsseite landen, weil sie gut ranked. Gehen wir aber zur Startseite. Sieht er diese zum ersten Mal, beurteilt er den nachfolgenden Inhalt durch die Brille deines Designs. Er wird konditioniert. Dein Design macht entweder einen edlen, hochwertigen Eindruck, oder verbreitet ein spritziges lockeres Image. Es kann aber auch sehr konservativ und sicherheitsbetont sein. Es hängt also davon ab, was du mit deinem Design erreichen willst. Sind deine Produkte hochpreisig, ist ein freches lustiges Design vielleicht ungünstig, weil die Preiserwartung dann eine andere ist. Oder ist dein Design sehr kreativ und bunt, passt das eventuell nicht zu einem IT-Sicherheits-Consulting, aber zu einem Raumausstatter/Maler schon.
Was nutzt eine gute Usability, wenn deine Website die Zielgruppe nicht anspricht. Ich schreibe das deswegen, damit du weißt, dass die Usability nur ein Teil einer guten Website ist. Diese Gesamterfahrung nennt man UX, User Experience.
Gestaltung und Funktion, die zwei Säulen einer benutzerfreundlichen Website
Eine benutzerfreundliche Website besteht aus einer gestalterischen und einer funktionalen Ebene. Hier befasse ich mich zunächst mit der benutzerfreundlichen Gestaltung. Grafik, Typografie und Layout inklusive der Bilder sind die Elemente zur Gestaltung einer Website. Das sind die Regeln und das Wissen, das sich aus ca. 100 Jahren Grafikdesign und visueller Kommunikation empirisch entwickelt hat. Der Buchdesigner William Addison verwendete 1922 zum ersten Mal den Begriff "Grafikdesign". Du bist natürlich kein Designer, sonst wüsstest du das vielleicht. Aber es ist gut, dass du ein paar Regeln kennst. Denn nicht alles ist Geschmackssache. Diese Regeln gelten für Desktop- und Laptop-Bildschirmgrößen.
Hier sind 8 Regeln des "guten Geschmacks", die dir helfen, deine Website benutzerfreundlich zu gestalten:
Schrift und Typografie
Schrift muss gut lesbar sein,
damit die Information schnell aufgenommen werden kann. Der Lesbarkeit hat sich alles unterzuordnen. Oder willst du etwa nicht, dass dein Text gelesen wird?
Optimal wäre eine Zeilenlänge des Textblocks von maximal 80 Zeichen.
Ein Textblock auf einer Webseite sollte also zweispaltig laufen. Oder sich eine Hälfte mit einem Bild teilen. Die Höhe eines zweispaltigen Textblocks inklusive Headline sollte nicht höher als das Browserfenster sein, sonst verliert man den Zusammenhang der zwei Textspalten.
Auf den richtigen Zeilenabstand achten.
Zu gering und auch zu weit erschwert das Lesen deutlich. Schau einfach in ein Buch. Die haben Erfahrung seit Johannes Gutenberg den Buchdruck erfunden hat.
Die Schriftart ist ein Kompromiss zwischen Charakter und Lesbarkeit.
Auf der sicheren Seite ist man mit klassischen Schriftarten, die fürs Web optimiert sind. Auch viele Standard-Schriften des Microsoft Betriebssystems sind sichere Webschriftarten. Viele der kostenlosen Google Fonts eignen sich auch gut, obwohl nicht alle websicher sind. Hier im Zweifel lieber auf Nummer sicher gehen als sich kreativ austoben. Ich sagte ja schon, der Lesbarkeit ist alles unterzuordnen. Eine websichere Schriftart ist die, die jedes Betriebssystem und jeder Browser anzeigen kann. Exotische Schriftarten solltest du Designprofis überlassen. Denn diese müssen extra auf dem Server installiert und beim Aufrufen der Seite geladen werden.
Zwei Schriftarten, mehr ist nicht nötig
Selbst eine Schriftart kann absolut ausreichend sein, ohne langweilig zu wirken. Du kannst eine Schriftart für alle Headline-Schriftgrößen benutzen und eine andere für den Mengentext. Wobei die Headline-Schriftart mehr Charakter haben kann. Die Schriftart für den Mengentext sollte dagegen immer kompromisslos gut lesbar sein.
Kontrast erhöht die Lesbarkeit
Aber zu extrem, z. B. schwarz/weiß ermüdet bei einem hellen Bildschirm die Augen schneller. Mengentext kann am besten mit dunklen Buchstaben vor hellem Hintergrund und ohne Farbe gelesen werden. Hast du viel Text, ist diese Kombination immer am besten. Damit der Kontrast etwas weicher ist, kannst du den weißen Hintergrund kaum wahrnehmbar grau einfärben und die Schrift in sehr dunklem Grau darstellen. Wenig Text und große farbige Headlines wirken auf kontrastreichem farbigem Hintergrund sehr dekorativ. Hier wird der Text als grafisches Element genutzt.
Nicht zu viele Schriftgrößen auf einer Webseite anzeigen.
Das macht die Seite viel zu unruhig und man verliert die Lust am Lesen. In der Html-/CSS-Datei legt der Programmierer die Schriftgrößen fest. Standardmäßig reicht das von H1 bis H6. Mehr als vier Schriftgrößen sind auf einer Seite nicht nötig. Eine H1-Headline für die Hauptüberschrift der Seite. Zwei Headline-Größen für die Zwischenüberschriften und eine Schriftgröße für den Blocktext sollten ausreichen.
Texte in Sinnabschnitte teilen
Erleichtert das Lesen und hilft beim Überfliegen der Texte, um evtl. nur bestimmte Abschnitte zu lesen. Nutze Überschriften, Zwischenüberschriften und Textabschnitte mit Zeilenumbruch, um einen Text lesefreundlich zu strukturieren.
Farbe, Grafik und Bilder
Farbe definiert den Charakter
Welche Farben du auf deiner Website einsetzt, wird von deinen Firmenfarben bestimmt. Diese werden unter anderem im Corporate Design Manual festgelegt. Hast du kein Corporate Design entwickeln lassen, hast du vielleicht ein Logo. Dann kannst du aus deinem Logo deine Firmenfarbe und mindestens eine Akzentfarbe ableiten. Diese zwei Farben können auf der Website für grafische Elemente, Flächen, Linien oder Headlines benutzt werden. Damit Farben als Firmenfarben erkannt werden und typisch für dein Erscheinungsbild werden, sollten sie an typischen Stellen immer wieder auftauchen. Auf keinen Fall sollte der Farbwert variiert werden. Es liegt an dir oder deinem Webdesigner, hierfür eine Systematik zu entwickeln.
Grafische Elemente sorgen für Wiedererkennung
Sie sind mit der Firmenfarbe fest verbunden. Im aktuellen Webdesign-Trend werden sie sparsam eingesetzt, ohne Schatten und Verlauf. Sie werden hauptsächlich bei funktionalen Elementen benutzt, um sie von der Information (Content) abzuheben. Z. B. im Navigationsmenü, in Buttons oder als Hintergrundfläche für eine Headline. Abgesetzt von den Corporate Graphics sind die kreativen und dekorativen Grafiken. Diese sind etwas weniger formal und müssen sich nicht unbedingt am Corporate Design orientieren.
Bilder kommunizieren am schnellsten
Deswegen können Sie den Text, an dem sie stehen, sehr schnell zusammenfassen. Mit dem richtigen Bild weiß der Leser sofort, was das Thema des Textes ist. Bilder können auch lange Informationstexte grafisch zusammenfassen und damit das Gelesene auf den Punkt bringen. Weiterhin können vor allem Image-Fotos für eine bestimmte Atmosphäre sorgen, die mit Worten nur sehr umständlich zu beschreiben wäre. Nutze Fotos bewusst und unterstütze damit die Aussage des Textes.
Leider werden Fotos häufig nur als ausdruckslose bunte Fläche zur Auflockerung missbraucht. Gerade Fotos aus Bilddatenbanken, die nicht das Thema unterstützen, sind kontraproduktiv. Sie werden von Kunden als belanglos und austauschbar entlarvt und der Text wird genau deswegen nicht gelesen. Das ist nicht benutzerfreundlich. Fotos beanspruchen meistens die größte Fläche einer Webseite. Dafür solltest du nur mit Bedacht ausgesuchte Bilder verwenden.
Abstand und Leere
Das hätte ich fast vergessen. Leere, Platz und großzügige Abstände sind ein ganz wichtiges Gestaltungskriterium. Je weniger Elemente du auf der gleichen Fläche verwendest, desto mehr Gewicht bekommen sie. Mut zur Lücke. Das wirkt edel und souverän. Und es ist benutzerfreundlich, weil du deinen Besucher führst und Information gewichtest, die erst im richtigen Moment seiner Informationsreise sichtbar werden. Z. B. durch Scrollen, durch animierte Elemente mit Textinhalt oder durch Tab- und Akkordeon-Elemente, die erst durch eine Aktion Text freigeben.
Die funktionalen Aspekte
Grafiken mit Funktion - die Usability
Eine Website ist ein Zwitter aus einer zweidimensionalen Grafik und einer Bedienoberfläche für eine Maschine. Das ist typisch für ein Software-Produkt. Der Webdesigner nennen das UI Design (User Interface Design). Es geht also um die Interaktion des Anwenders mit dem zweidimensionalen Design, mit dem Ziel, eine Aktion auszulösen. Usability ist das internationale Wort für Benutzerfreundlichkeit. Häufig liest man in dem Zusammenhang auch den Begriff UX, User Experience. Damit ist die ganzheitliche Nutzererfahrung einer Website gemeint. Das beinhaltet auch das Design und die emotionale Ansprache.
Information oder Funktion, das ist hier die Frage
Damit der Benutzer ohne Vorwissen mit der Benutzeroberfläche interagieren kann, muss für ihn klar sein, welche Grafik nur Information ist, und welche Grafik funktional ist. Es wäre nicht praktikabel, bei jeder Website eine Gebrauchsanweisung für die Bedienung mitzugeben. Deswegen macht es Sinn, in ein User Interface die Erfahrung von Nutzern mit Bedienungsinstrumenten der analogen Welt einfließen zu lassen. Der Anwender weiß aus Erfahrung, wenn er einen Knopf (Button) sieht, dass er ihn drücken kann. Oder er weiß, dass er mit einem Schiebeschalter durch eine horizontale Bewegung etwas ein- oder ausschalten kann.
Eine Webseite ist also benutzerfreundlich, hat eine gute Usability, wenn der Anwender die grafischen Elemente, die eine Funktion beinhalten, erkennt und er eine Aktion auslösen kann. Funktionen auf Webseiten haben den Sinn, auf der gleichen Bildschirmfläche unterschiedliche Informationen darzustellen. Andere Funktionen ermöglichen die Kommunikation mit dem Seitenbetreiber.
Eine dreidimensional gestaltete zweidimensionale Buttongrafik ist nichts anderes als eine Verlinkung zu einem anderen Inhalt. Wäre der Link aber nur eine Information, also ein Wort, wüsste der Anwender nicht, dass er beim Klicken auf das Wort eine Funktion auslösen kann. Deswegen sind Buttongrafiken wichtige CTA-Elemente (Call-to-Action), die die Benutzung vereinfachen und die zu einer Aktion anregen.
Shortcodes, die Kurzform für oft benutzte, praktische Funktionen
Ein weiteres interaktives Element sind Tabs, horizontale oder vertikal angelegte Registerkarten. Klickt man auf die Lasche, kommt ein anderer Text in den Vordergrund. Das ist eine sehr gute Möglichkeit, um große Textmengen übersichtlich zu strukturieren. Ganz ohne Seitenwechsel. Sehr benutzerfreundlich. Nach dem gleichen Prinzip funktionieren Akkordeons. Das sind meist horizontale Balken, die sich mit einem Klick auf den Balken wie ein Akkordeon nach unten öffnen und Texte, Bilder oder Videos freigeben. Das hast du sicher schon öfters bei FAQ-Webseiten (Frequent Asked Questions) gesehen.
Diese oft benutzten Funktionen werden im CMS WordPress auch Shortcode genannt. Damit kannst du die genannten Funktionen ohne Programmierkenntnisse an jeder Stelle deiner Website einsetzen. Sehr benutzerfreundlich.
Barrierefrei und Responsive
Das sind schon komische Bezeichnungen. Sorry, aber das ist Webdesign-Sprache. Ist aber ganz einfach. Barrierefrei meint, dass sich auch unerfahrene Nutzer gut auf deiner Seite zurechtfinden sollen und Menschen mit Seh-Behinderung. Diese lassen sich dann Texte und deine Bildbeschreibung durch einen Screenreader vorlesen. Oder sie können den Text unkompliziert vergrößern. Auch die Kontraste kann man bei barrierefreien Websites anpassen.
Responsive ist mittlerweile Standard bei Webseiten. Sie sind so programmiert, dass sich die Benutzeroberfläche an jede Browsergröße anpasst. Damit kann man auch auf dem Smartphone lange Texte bequem lesen. Aber nicht nur die Darstellung muss sich automatisch anpassen, auch die Bedienung ändert sich je nach Gerät. Bedient man einen Computer immer mit der Maus und dem Touchpad, so interagiert man auf dem Smartphone mit Berührungsgesten.
