http://www.eduvision.dehttps://twitter.com/eduvisiondehttps://www.youtube.com/user/eduvisiontubehttps://www.facebook.com/eduvisionde

Warum ist Usability so wichtig?

Um eine erfolgreiche Website zu gestalten, müssen Sie immer auf die Usability achten. Wie benutzerfreundlich ist Ihre Seite eigentlich? Was können Sie tun, um die Bedienung zu vereinfachen und Ihre Besucher effizienter zum gewünschten Ziel zu leiten? Dieses Whitepaper gibt Ihnen Einblick worauf Sie achten sollten.

Was bedeutet Usability genau?

Usability beschreibt die Benutzerfreundlichkeit einer Website. Wie schnell und einfach kann der Besucher zu den Funktionen, Informationen oder Produkten gelangen, die er sucht? Erfährt der Besucher die Website als übersichtlich erfahren? Usability besteht aus 3 Elementen:

Effektivität: Der Nutzer muss das Ziel erreichen. Effizienz: Der Aufwand, um ans Ziel zu kommen, sollte so gering wie möglich sein. Zufriedenheit: Der Nutzer sollte die Interaktion auf der Website als angenehm erfahren.

Abbildung 1: Usability mit 3 Komponenten

Inhalt

1 Seitenaufbau ................................................................................................................................... 2

2 Einbindung von Mediendateien ...................................................................................................... 4 3 Allgemeine Tipps ............................................................................................................................. 5

1 Seitenaufbau

Eine unübersichtliche Seite kann schnell zu Frustration leiten – das haben Sie sicherlich auch schon selbst erfahren. Usability fängt beim Design an. Obwohl es verlockend ist eine Website besonders auffällig zu gestalten, sollte die Nutzbarkeit zentral stehen. Auch das schönste Design verfehlt sein Ziel, wenn darunter die Benutzerfreundlichkeit und damit die Konversion leidet.

Das F-Muster Wie sollte eine Seite dann aufgebaut sein? Ein wichtiger Indikator ist das F-Muster. Untersuchungen haben ergeben, dass Besucher eine Website in der Form eines „F“ überfliegen (siehe Abbildung). Dabei werden meist nur die ersten paar Wörter einer Zeile oder eines Textblocks wahr genommen. Viele Internetnutzer sind es gewohnt Seiten sehr schnell mit den Augen zu „scannen“, um irrelevante Informationen auszublenden und die wichtigen Elemente zu finden.

Für die Usability hat das einen konkreten Einfluss: - Arbeiten Sie mit deutlichen Überschriften und Absätzen. Heben Sie wenn nötig bestimmte

Schlüsselwörter hervor, um dem Besucher die Navigation leicht zu machen - Bauen Sie die ersten Sätze von Absätzen so auf, dass die wichtigsten Schlüsselbegriffe am

Anfang stehen. Zum Beispiel: o Nicht: „Unser Produkt zeichnet sich weiterhin durch Merkmale wie hohe Qualität und

Belastbarkeit aus.o Stattdessen: „Hohe Qualität und Belastbarkeit zeichnen unser Produkt aus.“

- Nutzen Sie Form- oder Farbakzente, wenn Sie zum Beispiel einen Call-to-action platzieren, der direkt auffallen soll

Abbildung 2: Das F-Muster

Dimensionen Früher wurden Websites mithilfe von Tabellen entworfen. Das gehört jedoch der Vergangenheit an. Durch die HTML-Tags , und kann bereits eine grundlegende Einteilung vorgenommen werden. Der Content wird weiter geteilt durch das Definieren so genannten „Container“. Wir gehen hier aber nicht ins Detail. Wichtig ist, dass alles gut zusammen passt und übersichtlich eingeteilt ist. Sorgen Sie dafür, dass Menü, Content, und eventuell Sidebar nicht nur im Code deutlich getrennt wird, sondern sich auch optisch voneinander abheben.

Bilder und Grafiken Einige Tipps zur Einbindung von Bildern und Grafiken:

- Versehen Sie jede Abbildung im Code mit einem ALT-Tag. Dieser Text wird angezeigt, wenn die Abbildung nicht geladen werden kann, aber auch von Sprachsoftware genutzt, die die Website für Nutzer mit Sehproblemen vorliest

- Nutzen Sie einen Title-Tag. Wenn der Besucher mit der Maus über dem Bild ‚schwebt‘, wird dieser Titel angezeigt.

- Bilder verlangsamen den Seitenaufbau durch ihre Datenmenge. Optimieren Sie daher alle Grafiken für den Webgebrauch. Denken Sie dabei an die richtige Auflösung und Komprimierung

- Grafiken dienen dazu den Inhalt einer Seite auf einen Blick zu verdeutlichen. Achten Sie also immer darauf, dass Ihre Grafiken deutlich sind und nicht missverstanden werden können.

Textgestaltung Webtexte werden auf verschiedenen Displays gelesen. In allen Fällen ist dies aber etwas anstrengender für das menschliche Auge als das Lesen auf klassischem Papier. Um Webtexte gut lesbar zu präsentieren, verwenden Sie eine angemessene Schriftart. Wenn Sie nicht gerade für die New York Times schreiben, verwenden Sie serifenlose Schriftarten. Selbst die Frankfurter Allgemeine Zeitung verwendet Times New Roman mittlerweile nur noch für seine Überschriften und zeigt die Artikel selbst ohne Serifen an. Fonts wie Arial oder der Office-Standard Calibri sind speziell für gute Lesbarkeit auf einem Bildschirm gemacht.

Da Besucher gewohnt sind eine Website zunächst sehr schnell zu überfliegen, muss auch die Schriftgröße passend gewählt sein. Bei den Standard-Schriftarten können Sie mit einer Größe von 12 Punkten eigentlich nichts falsch machen. Nutzen Sie andere Größen für Überschriften oder um besondere Elemente hervorzuheben, jedoch nie mehr als unbedingt notwendig. Vermeiden Sie definitiv den HTML-Tag . Legen Sie die Textgestaltung stattdessen in der entsprechenden CSS-Datei fest.

Abbildung 3: Das Ziel von Usability

Eine gute Abmessung ist oft 1024 x 768 Pixel. Dies wird von vielen Benutzern als angenehm erfahren und ist ebenfalls relativ einfach skalierbar. Keine Seite sollte länger als zwei Monitorlängen sein, damit Nutzer nicht unnötig scrollen müssen.

2 Einbindung von Mediendateien

Nutzen Sie Multimedia, um die Botschaft Ihrer Seite zu unterstützen, nicht um diese selbst zu tragen. Der Kern Ihres Contents muss weiterhin auf den ersten Blick erkennbar sein und sollte sich nicht in Videos oder Audio-Aufnahmen verbergen. Es kann jedoch positiv sein, dem Besucher die Option auf etwas Unterhaltung zu bieten. Hier sind ein paar Tipps:

Animationen Sich bewegende Elemente haben einen enormen Einfluss auf den Besucher, jedoch selten einen guten. Bewegung zieht die Aufmerksamkeit auf sich, was die meisten Leute als sehr aufdringlich und unangenehm erfahren. Animierte Elemente lenken ab und erwecken einen unseriösen Eindruck. Vermeiden Sie also die Verwendung von animierten Elementen.

Werbung Die meisten Internetnutzer blenden Werbung größtenteils aus. Nutzer werden so oft mit Banner-Reklame konfrontiert, dass sie „Banner Blindness“ entwickeln. Das heißt als Reklame erkannte Inhalte werden oft aus Automatismus ignoriert.

Wenn Sie doch darauf angewiesen sind, Werbung zu platzieren, beachten Sie folgende Richtlinien: Machen Sie deutlich welche Inhalte Werbung sind, sodass Besucher nicht versehentlich

darauf klicken. Halten Sie ihren eigenen Content und Werbeelemente möglichst deutlich getrennt Wenn Sie einen Banner am oberen Rand der Seite platzieren, setzen Sie Ihr Navigationsmenü

und alle Inhalte einheitlich darunter. Sorgen Sie bei Ihrem eigenen Content für ein homogenes Erscheinungsbild. Laufen Sie kein

Risiko, dass Inhalte (ob Texte, Bilder, oder sogar ihr Logo) als Reklame missverstandenwerden können

Audio Lassen Sie niemals automatisch Musik abspielen, sobald Besucher Ihre Website öffnen Geben Sie Nutzern die Möglichkeit die Audio-Datei zu jedem Zeitpunkt zu starten und zu

stoppen bzw. zu pausieren. Geben Sie Informationen zu den benötigten Plugins an

Video Nutzen Sie den HTML-Tag , oder binden Sie Ihre Youtube-Videos ein. So können

Videos sehr einfach von so gut wie allen Benutzern abgespielt werden Lassen Sie die Website detektieren, über welche Hard- und Software der Besucher verfügt Alle Richtlinien für Audio-Dateien gelten auch für Videos

Flash Als Alternative zum Standard HTML, CSS und JavaScript können Sie mithilfe von Adobe Flash ebenfalls komplette Websites beziehungsweise Web-Applikationen erstellen. Diese werden auch „Rich Internet Applications“ (RIA) genannt.

- Flash Websites können nicht auf normale Weise durchsucht werden und einzelne Seiten können nicht gebookmarked werden

- Die Navigation muss in die Flash-Seite eingebaut werden – die Navigationsfunktionen des Browsers funktionieren nicht

- Die rechte Maustaste funktioniert nicht wie üblich - Flash Websites sind nicht skalierbar, also nicht responsive

3 Allgemeine Tipps

Die Benutzerfreundlichkeit Ihrer Website hat auch großen Einfluss auf die Konversionsrate. Nachdem Nutzer auf Ihre Website gelangt sind, sollten Sie diese durch ein einfaches Interface und eine klare Struktur effizient zu ihrem/Ihrem Ziel leiten.

Im Idealfall sollte der Kunde beim Besuch Ihrer Website: - die gesuchte Information/das gesuchte Produkt finden - eines Ihrer Ziele erfüllen – Anfrage, Anmeldung, Ankauf, etc. - Vertrauen in Ihr Unternehmen gewinnen - Motiviert werden, um zurückzukommen

Um dem Besucher schnell einen guten Eindruck Ihrer Website zu geben, sollten auf der Homepage folgende Informationen schnell ersichtlich sein:

- Wer sind Sie bzw. „wer“ ist Ihre Firma? - Welche Informationen und Dienste sind auf Ihrer Website zu finden? - Deutliches Menü bzw. Übersicht der Kategorien

Dabei muss nicht alles unbedingt in Text ausgedrückt werden. Durch Design, Farbgebung, Logo, etc. kann auch viel kommuniziert werden. Generell ist es ratsam, die Informationen so intuitiv wie möglich zu gestalten. Manchmal kann auch ein Text-Paragraph viel besser mit einem Bild oder einer Infographic wiedergegeben werden. Das Ziel hierbei ist es dem Besucher die nötigen Infos, die Ihnen wichtig sind, schnellstmöglich zu übermitteln.

Abbildung 4: Überladene oder unübersichtliche Website führen schnell zu Frustration

Flash bringt allerdings einige Usability-Probleme mit sich: - Viele mobile Geräte können Flash-Inhalte nicht anzeigen

Wenn Sie zum Beispiel Ihre Produkte vorstellen möchten, sollten dies sicherlich eine Kategorie in Ihrem Navigationsmenü sein. Sind es nur ein paar Produkte, können diese problemlos alle auf einer Seite präsentiert werden. Ist Ihr Produktportfolio jedoch breiter, sollten Sie noch Subkategorien bieten, zum Beispiel über ein Untermenü.

Um die Navigation auf Websites mit vielen einzelnen Seiten zu vereinfachen, können Sie auch „Breadcrumbs“ (Brotkrümmel) einbauen. Damit geben Sie dem Besucher eine Übersicht der Struktur und gibt an, wo genau er sich momentan auf der Website befindet. Hier ein Beispiel der Eduvision-Website:

Abbildung 5: Beispiel Breadcrumbs

Wichtig bei der Präsentation ist, dass Sie durch Trennzeichen die Hierarchie deutlich machen. In unserem Beispiel ist dies mit „/“ getan. Es ist hierdurch direkt ersichtlich, dass sich der Besucher auf der Seite „Kurs Usability“ befindet, welche unter eine bestimmte Kategorie fällt. So kann der Besucher sich auf einen Blick orientieren.

Die Navigation über klassiche Ausklapp- bzw. Dropdown-Menüs sollten Sie nur dann benutzen, wenn es wirklich notwendig ist. Eine bessere Alternative sind so genannte „Mega Dropdowns“, die optisch ansprechender und deutlicher gestaltet werden können. Auch zahlreiche Webshops mit einem breiten Produktangebot nutzen diese Funktion.

Navigation

Webnutzer erwarten sehr schnell und einfach zu den gewünschten Inhalten zu gelangen und bringen daher selten viel Geduld mit. Ihre Navigation muss daher zunächst vor Allem übersichtlich sein. Denken Sie bei der Konzeption gut darüber nach, in welche Kategorien Sie die Website einteilen. Dabei müssen zwei wichtige Punkte vereint werden:

- Der Besucher muss mit möglichst wenig Klicks ans Ziel gelangen - Jede Seite muss übersichtlich sein und sich auf ein Kernthema konzentrieren

Suchfunktion einbinden

Verschiedene Untersuchungen zeigen, dass viele Webnutzer als Erster nach einer Suchfenster schauen. Bei einfachen Websites ist dies nicht notwendig, sobald es jedoch etwas komplexer wird (wie z.B. auf der Eduvision-Website mit sehr vielen verschiedenen Kursen), ist eine Suchfunktion essentiell. Besucher können sich so einige Klicks sparen und sofort zum gewünschten Content gelangen.

Was Sie bei der Einbindung einer Suchfunktion beachten sollten:

- Platzieren Sie das Suchfenster schnell sichtbar im oberen Teil der Website, am besten mittig oder oben rechts

- Machen Sie das Suchfeld breit genug, mindestens 25 Zeichen - Zeigen Sie einen Knopf „Suchen“. Obwohl in der Regel auch über die Eingabe von Enter

gesucht werden kann, klicken Besucher oft darauf - Lassen Sie die Suchmaschine als Standard alle Seiten durchsuchen und nicht nur eine

bestimmte Kategorie - Binden Sie eine Korrektur bei Rechtschreibfehlern oder ähnlichen Suchbegriffen ein

Die Geschwindigkeit Ihrer Seite

Nebst allen Elementen der Nutzererfahrung ist auch die Geschwindigkeit Ihrer Website wichtig. Optimieren Sie Ihre Website daher immer für schnelle Ladezeiten, denn eine langsame Website wird von vielen Webnutzern schnell wieder verlassen.

Warum ist Usability so wichtig?Was bedeutet Usability genau?1 Seitenaufbau2 Einbindung von Mediendateien3 Allgemeine Tipps