Überarbeitet 29.08.2020

Als ich vor vielen Jahren das Buch von Steve Krug „Don’t make me think“ zum ersten Mal gelesen habe, war ich begeistert. Und ich bin es auch heute noch.

Er erklärt das Thema User Experience so einleuchtend und unterhaltsam, dass das Lesen richtig Spass macht. Er macht dabei auch klar, wie wichtig eine logische Struktur und verständlich beschriftete Navigationspunkte sind. Das ist wesentlich für eine gute Website, denn jedes Mal, wenn der Leser stockt und sei das auch nur für Millisekunden verliert er einen Teil des Interesses an deinem Angebot. Und schnell ist er wieder weg und surft auf einer anderen Website. Oder er bleibt und kämpft sich durch, wird aber keinen positiven Eindruck mitnehmen, wenn er die Website verlässt.

Usability und User Experience sind keine Synonyme

Beide Begriffe werden oft als Synonym verwendet sind es aber nicht ganz.

Die Usability = Benutzerfreundlichkeit geht vor allem davon aus wie einfach ein Nutzer der Website sein Ziel erreicht. Zum Beispiel in einem Webshop etwas bestellen kann.

Die User Experience = Nutzererlebnis umfasst mehr, nämlich das komplette Erlebnis, dass ein Nutzer auf unserer Website hat. Ob er sich gut aufgehoben und wohlfühlt.

Das bedeutet ohne gute Usability, gibt es keine gute User Experience.

Liest du Gebrauchsanweisungen?

Ich mach das. Zumindest manchmal. Aber es ist nervig sich zuerst einmal durch endlose Texte zu wühlen. Ich muss dabei ständig Entscheidungen treffen und oft ist mir nicht ganz klar was gemeint ist. Ob ich mich richtig entschieden habe. Das ermüdet und nimmt mir oft die Freude an meinem neuen Produkt.

Das soll den Besuchern deiner Website nicht passieren. Damit sie sich sofort zurechtfinden muss sie schlüssig aufgebaut werden. Wenn sie erst in den FAQ, der Abteilung für „Oft gestellten Fragen“, nachsehen müssen, hast du sie bereits aus dem Konzept gebracht.

Natürlich kann es Sinn machen FAQ’s zu haben, besonders bei komplexen Websites. Das Ziel sollte aber immer sein, dass sich dein Besucher auch ohne orientieren kann.

Damit das klappt, muss die Website ein klares Konzept haben.

Die Navigation

Erinnerst du dich an deinen letzten Besuch in einem Baumarkt? An die Schilder die oben an der Decke befestigt sind und die dir zeigen in welchem Gang du was findest? Sie sind enorm hilfreich, wenn du rasch und ohne lang rum zu suchen etwas einkaufen willst. Denn die Schilder sind von überall zu sehen und helfen dir so durch den Laden zu navigieren.

Genau das soll die Navigation auf deiner Website für deine Besucher leisten.

Deshalb sollte auf (fast) jeder Seite die gleiche Navigation zu sehen sein. Das erleichtert die Orientierung sehr.

Die Homepage als Fixpunkt

Ebenfalls ist sehr wichtig, dass man mit einem Klick auf das Logo wieder zur Startseite zurückgelangt. Denn das ist der Fixpunkt, an den der Nutzer zurückkehren kann, wenn er sich verirrt hat. Gerade bei grösseren Websites ist das wichtig, da man dort schnell die Orientierung verliert. Auf einer Website fehlt die räumliche Komponente, die man in einem Laden noch einbeziehen kann, völlig. Es ist auch nicht einfach zu überblicken, ob man die ganze Website gesehen hat oder ob es noch völlig unentdeckte Seiten gibt. Das erschwert die Orientierung auf einer Website noch mehr. Abhilfe kann hier eine Sitemap, ein Inhaltsverzeichnis für die Website, schaffen.

Flache oder tiefe Navigationsstruktur

Ob eine flache Navigationsstruktur zum Zug kommt oder lieber wenige, auf den ersten Blick sichtbare Navigationspunkte und dafür viele Unterpunkte, hängt vom Projekt ab.

Gibt es eine verschachtelte Navigation, also eine mit vielen Unterpunkten, empfiehlt es sich Brotkrumen zu streuen. Das heisst zusätzlich eine Breadcrumb-Navigation einzusetzen.

Breadcrumb-Navigation

Ich bevorzuge eine flache Navigationsstruktur, allerdings sollte man sich dabei auf maximal 6-7 Punkte beschränken.

Die Beschriftung der Navigationspunkte

So verlockend es sein, mag sich mit fantasievollen Bezeichnungen von Navigationspunkten von den anderen Anbietern abzuheben, lass es. Es ist viel wichtiger, dass der Besucher deiner Website sofort versteht, was gemeint ist und wohin er klicken soll. Aus diesem Grund solltest du auch keine internen Abkürzungen verwenden. Egal was es ist, was den Nutzer zum Nachdenken bringt, es reisst ihn aus seiner Wohlfühlzone. Er muss eine Entscheidung treffen und oft auch noch ohne zu wissen für was er sich entscheidet. Und das ist stressig.

Gib den Nutzern deiner Website Führung durch eine klare Struktur und verständliche Bezeichnung der Navigationspunkte sowie der Buttons.

Seiten ohne Navigation

Es gibt tatsächlich Seiten die ohne Navigation erstellt werden. Das sind die Seiten auf denen man vom Nutzer eine Handlung erwartet und ihn davon nicht ablenken möchte. So kann er nicht auf einen anderen Link klicken, der ihn von dieser Seite wieder wegführt.

Diese Seiten nennt man Landingpages. 

Du siehst auf dem Bild, dass es keinen Kopfbereich, keine Navigation und keine Links in der Fusszeile gibt. Lediglich die Punkte Impressum und Datenschutz.

Planstark - Workbook
Fusszeile einer Landingpage

Entscheidungen zu treffen macht müde

Auch wenn die klare Struktur der Navigation sicher einer der wichtigsten Punkte einer guten Website ausmacht, gibt es noch mehr zu beachten. Denn du willst dem Nutzer deiner Website ein möglichst gutes Nutzererlebnis bieten.
Wichtig ist, dass er sich einfach durchklicken kann und unterwegs keine Entscheidungen treffen muss.

Zusammenlassen was zusammengehört

Inhalte, die zusammen gehören sollte man das auch ansehen. Sie sollten durch einen Rahmen oder einen gleichfarbigen Hintergrund als zusammengehörig erkannt werden.

Zu den nächsten Elementen sollte etwas Abstand sein. Dieser Freiraum hilft dem Besucher den Inhalt besser zu erfassen.

Website-Mentoring

Button – Eine spezielle Herausforderung

Buttons sind eine tolle Möglichkeit sofort anzuzeigen, dass etwas klickbar ist. Wir alle kennen Buttons aus unserem analogen Leben. Man drückt drauf und etwas passiert. Zum Beispiel, wenn man auf den Liftknopf drückt.

Wir sind also ein bestimmtes Aussehen gewohnt. Das sollten wir so weit es möglich ist und Sinn macht, auf unserer Website übernehmen.

Ein Button soll Aufmerksamkeit erregen und rufen „Drück mich“.

Damit er das macht, musst du folgendes berücksichtigen:

  • Der Button muss sich farblich von der Website abheben und so schon einmal die Aufmerksamkeit auf sich ziehen.
  • Er soll 3dimensional wirken. Das erreicht man mit einem Schatten und einem etwas dunkleren Rand.
  • Er braucht eine klare Beschriftung. Sie soll zeigen was passiert, wenn man ihn drückt. Denn anders als beim Lift ist es nicht selbsterklärend.
  • Die Schrift sollte etwas grösser sein als die Schrift auf der restlichen Website. Es können auch Grossbuchstaben verwendet werden, um ihn noch mehr hervorzuheben.

Keine Reizüberflutung

Erinnerst du dich noch an die Zeiten als es auf vielen Websites überall geblinkt und geleuchtet hat? Je mehr Farben und Schriften je toller?

Ich habe mich dafür nie begeistern können und auch nie solche Websites erstellt. Aber es gab sie und leider gibt es sie manchmal noch heute.

Damit erreichst du aber nichts. Die Aufmerksamkeit der Besucher wird auf nichts Spezielles gelenkt. Im Gegenteil: Die Sinne werden mit visuellen Reizen überflutet. Das ist ermüdend und auch frustrierend, denn es ist so sehr schwierig das zu finden, was du suchst.

Eine gut durchdachte Website setzt ganz gezielt Farben oder Designelemente ein um die Aufmerksamkeit des Nutzers zu erregen. Und sie damit auf die Dinge zu lenken, die auf deiner Website am wichtigsten sind.

Im Video gehe ich auf 3 Elemente ein, die beim Webdesign ganz besonders wichtig sind:

Wie findest du heraus wie Besucher deine Website erleben?

Schnapp dir ein paar Freunde oder Kollegen. Wenn sie deinem Wunschkunden entsprechen ist es perfekt. Such dir Menschen mit möglichst unterschiedlichen Computerkenntnissen.

Ich bin zum Beispiel immer wieder überrascht wie meine Mutter eine Website bedient. Wie anders sie diese sieht als ich.

Dann lass sie deine Website nutzen. Gib ihnen eine kleine Aufgabe und schau zu wie sie gelöst wird. Notier dir was du siehst und frag auch deine Probanden. Wo haben sie gestockt? Was fanden sie einfach?

Ich wünsche dir viel Spass und vor allem viele Aha’s bei dem Test.

Hinterlasse einen Kommentar

Bitte fülle alle Felder mit einem * aus. Deine Mailadresse wird nicht angezeigt werden. 

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Claudia Barfuss - Die Website-Mentorin WordPress Cookie Plugin von Real Cookie Banner