Das Internet besteht zum Großteil aus einzelnen Dokumenten, die wie lose Blätter mit einer Büroklammer durch Links zu einer Sammlung an Dokumenten zusammengeführt werden. Daher ergibt sich der Hauptanteil der Benutzerführung bereits aus der Verlinkung einzelner Seiten miteinander.
Links
Ganz so einfach ist es dann aber doch nicht. Wichtig ist vor allem, wie der Link selbst aufgebaut ist. Hier kommt die Usability ins Spiel:
Machen Sie Links unterscheidbar und überfliegbar
Beginnen Sie Links mit den wichtigsten, informativen Wörtern, da Benutzer Seiten oft nur überfliegen und so die ersten 1-2 Wörter eines Links erfassen, um diese zu vergleichen. Halten Sie die Links kurz und spezifisch wie möglich. Vermeiden Sie Füllwörter oder sich in jedem Link wiederholende Worte (z.B. den Firmennamen).
Vermeiden Sie generische Linktexte
Anstelle von "Hier klicken", sollten Sie bedeutsame Texte verwenden und dem Benutzer erklären, was er durch einen Klick sehen wird. Anstelle von "Klicken Sie hier für Finanz-Tipps" sagen Sie einfach "Finanz-Tipps".
Sehr beliebt ist der typische „mehr"-Link am Ende eines Abschnitts oder Kurztextes. Doch ein Benutzer, der die Seite nur überfliegt, muss nun bei jedem Link zunächst die Überschrift lesen, um überhaupt zu erfahren, was sich hinter dem Link verbirgt. Statt eines einfachen "mehr", sollten Sie dem Benutzer zeigen, wovon er mehr erhält, wie z.B. "Mehr über Altersvorsorge" oder "Mehr Presseartikel".
Zeigen Sie die Funktion von Links
Wenn ein Link nicht einfach nur auf eine Webseite führt, sondern z.B. ein PDF-Download ist, ein Video öffnet, eine E-Mail verschickt oder eine Anwendung startet, sollten Sie das dem Benutzer verdeutlichen. Eine einfache Möglichkeit ist, diese Links mit kleinen Icons zu versehen, um zu verdeutlichen, was bei einem Klick passieren wird. Zusammen mit einem beschreibenden Linktext kann so die Funktion des Links verdeutlicht werden.
Technischer Exkurs:
Um Ihre Links automatisch per CSS mit einem passenden Icon zu versehen, können Sie folgendermaßen vorgehen.
Sie benötigen zunächst einen Icon-Font, beispielsweise das sehr beliebte "Font Awesome".
Font Awesome kann kostenlos heruntergeladen werden: https://fontawesome.com/
Für diese Variante benötigen Sie die Webfonts von Font Awesome, welche Sie im Ordner web-fonts-with-css finden. Verschieben Sie den webfonts-Ordner und die Datei fontawesome-all.min.css aus dem Ordner css in Ihren Assets-Ordner oder einen öffentlichen Ordner Ihrer Wahl.
Referenzieren Sie die CSS-Datei im <head> jeder Seite, auf der Sie die Icons benutzen möchten:
<link href="/static/fontawesome/fontawesome-all.min.css" rel="stylesheet">
(Passen Sie den Pfad entsprechend des Speicherortes der Datei an.)
Anschließend können Sie die Icons in Ihrer HTML verwenden, z.B. <i class="fas fa-user"> für ein User Icon.
Um Ihre Links aber automatisch mit PDF-Icons zu versehen, benutzen Sie folgendes CSS:
a[href$='.pdf']:before {
margin-right: 0.5em;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f1c1";
}Auf Grundlage dieses Codes können Sie nun beliebige Links hinzufügen. Der CSS-Selektor a[href$='.pdf'] selektiert alle Links, die mit .pdf enden. Sie könnten hier auch weitere Dateiendungen hinzufügen, z.B.:
Für Excel:
a[href$=‘.xls‘]:before,
a[href$=‘.csv‘]:before,
a[href$=‘.xlsx‘]:before,
a[href$=‘.xlt‘]:before {
...
}Für E-Mail Links:
a[href^=“mailto:“]:before {
...
}(Dieses CSS trifft auf alle Links, die mit "mailto:" anfangen, zu)
Um jeweils das Icon auszutauschen, ändern Sie einfach die Zeile content: "\f1c1"; mit dem entsprechenden Code des jeweiligen Icons. Icons finden Sie hier: https://fontawesome.com/icons/
Auf der Detailseite jedes Icons finden Sie unter dem Namen drei Angaben. Am Beispiel file-pdf sind das:
PDF File · (Das Icon selbst) · f1c1
Der Code f1c1 ist das, was Sie suchen. Fügen Sie diesen Code mit einem Backslash davor in Ihr CSS ein: \f1c1
Weitere Informationen zur Verwendung der Icons als Webfont-Pseudo-Elemente finden Sie hier: Web Fonts with CSS (Englisch).
Navigation
Da die Navigation der Einstiegspunkt in die Unterseiten Ihrer Website ist, muss der Benutzer diese einfach und schnell verstehen können. Dazu muss er die möglichen Optionen unterscheiden können und verstehen, was sich hinter diesen versteckt.
Ähnliche Punkte nebeneinander anordnen
Wenn Sie ähnliche Navigations-Punkte näher zusammenrücken, wird es für den Benutzer einfacher, diese zu finden und zu vergleichen. Wenn Sie beispielsweise mehrere verschiedene Dienstleistungen anbieten, sollten Sie darauf achten, dass alle Punkte für z.B. "Immobilienfinanzierung" am gleichen Platz auf der Seite zu finden sind.
Vermeiden Sie unnötige Icons
Wenn der Text eines Navigations-Punktes bereits ausreichend verständlich ist, brauchen Sie kein Icon, um dieses weiter zu erklären. Das Icon lässt die Seite in diesem Fall nur überladen wirken. Ein Icon vor dem Menüpunkt "Produkte" wird diesen nicht einfacher verständlich machen. In manchen Fällen ergibt ein Icon Sinn, aber wenn Sie lange überlegen müssen, welches Icon für einen Menüpunkt passt, ist es eher wahrscheinlich, dass Sie besser gar keines verwenden sollten.
Verwenden sie +/- sieben Menüpunkte in der Hauptnavigation
Damit Ihre Hauptnavigation nicht zu überladen wirkt, sollten Sie die Anzahl der Punkte auf +/- sieben begrenzen. Dadurch ermöglichen Sie dem Benutzer, das gesamte Menü zu erfassen und alle Punkte im Gedächtnis zu vergleichen. Wenn Ihre Seite extrem viele Inhalte bietet, sollten Sie versuchen, ähnliche Links auf Übersichtsseiten zu bündeln, um den Benutzer so durch die verschiedenen Ebenen Ihrer Seite zu leiten.
Verlinken Sie nie auf die aktuelle Seite
Ein Menü sollte nie auf die aktuell aktive Seite verlinken. Auf der Startseite sollte der Link zur Startseite ausgegraut bzw. nicht klickbar sein. Aktive Links zur aktuellen Seite verschwenden die Zeit des Benutzers und verwirren diesen dahingehend, ob er wirklich auf der richtigen Seite ist.
Startseite
Ihre Startseite ist der Einstieg in Ihre Website und sollte dem Benutzer auf einen Blick erklären, worum es auf Ihrer Website geht bzw. was Sie anbieten.
Was bieten Sie?
Beantworten Sie diese Frage immer als erstes auf Ihrer Startseite. Sie sollten in einem kurzen Satz beschreiben können, was Sie bieten und was der Benutzer auf der Seite erwarten kann. Verwenden Sie folgende Schablone, um eine präzise Tagline zu finden:
"Ich bin [Berufsbezeichnung] und helfe [Zielgruppe] dabei/mit [größtes Problem Ihrer Zielgruppe]. Im Gegensatz zu meiner Konkurrenz, [Ihre Besonderheit].“
Diese Schablone stammt von Jonathan Stark und liefert Ihnen einen "laserscharfen Fokus" für Ihr Unternehmen.
Wichtigste Handlungen hervorheben
Heben Sie die wichtigsten bzw. häufigsten 1-4 Aufgaben Ihrer Website hervor. Bieten Sie dem Benutzer einen schnellen Einstieg in diese Bereiche Ihrer Website.
Binden Sie eine Suche ein
Viele Benutzer verwenden lieber die Suche einer Seite anstelle der Navigation. Bieten Sie diesen Benutzern die Möglichkeit, Ihre Seite zu durchsuchen und stellen Sie die Suche als "Box" dar – danach schauen Benutzer einer Webseite, wenn Sie die Suchfunktion der Webseite recherchieren.
Übertreiben Sie es nicht mit der Formatierung von wichtigen Inhalten
Man könnte davon ausgehen, dass wichtige Punkte auf einer Webseite mit Bildern, Boxen und auffälligen Farben hervorgehoben werden sollten. Dabei müssen Sie jedoch das Phänomen der "Banner-Blindheit" beachten, bei dem der Benutzer zu auffällige Teile der Webseite als Werbung ansieht und einfach ignoriert. Lassen Sie Ihre Inhalte nicht wie nervige Werbebanner aussehen, sonst werden diese nicht wahrgenommen.
Verwenden Sie bedeutungsvolle Bilder
Versuchen Sie, wenn möglich, sinnvolle Bilder zu verwenden und pflastern Sie Ihre Seite nicht mit "Stock Fotos" zu. Es ist fast immer besser, die realen Menschen hinter den Produkten / Dienstleistungen zu zeigen, anstatt Models zu verwenden. Professionelle und individuelle Fotos von einem Fotografen wirken wesentlich besser und nützlicher auf den Benutzer und lassen Sie aus der Masse an Beratern / Coaches hervorstechen.
Veröffentlicht unter: Design und Ästhetik
Über den Autor
Hey, ich bin Christopher Siegel! Ich helfe Coaches und Beratern wie dir, sich online als Experten zu präsentieren.
Seit über 12 Jahren programmiere ich Websites, habe als Freelancer für große Kunden wie Tesla gearbeitet und seit 2016 helfe ich Coaches online erfolgreich zu sein.