11 Schritte wie du deine Website verbessern kannst

Platziere das Logo durchgängig an derselben Stelle: oben links im Headerbereich

Damit bietest du deinem Besucher die nötige Orientierung. Das Logo sollte im übrigen auch immer auf die Startseite verlinkt sein!

Hauptnavigation sollte immer horizontal in die Kopfzeile

Vertikale Navigationen sind nicht mehr wirklich zeitgemäß.

Abbildung 2: Die Apple Website vom Jahr 1997 hatte noch eine vertikale Navigation...

Abbildung 3: ...die aktuelle Apple Webseite hat jedoch eine horizontale. Daran solltest du dich auch orientieren!

Für umfangreiche Navigationen auf Desktop, nutze Mega-Dropdowns

Mega-Dropdown-Menüs sollten...:

• sich auf Interaktion (Mouseover) des Nutzer verzögert (0,5s) öffnen. Damit vermeidet man das Öffnen des Menüs bei versehentlichen Mausbewegungen. Das selbe gilt beim Verlassen des Feldes.
  
• sich von der restlichen Website klar unterscheiden lassen. Gestalte also das Mega-Dropdown-Menü nicht bildschirmfüllend oder variiere die Hintergrundfarbe.
• nicht zu viele Optionen anzeigen. Die Menüpunkte sollten für den Nutzer einfach zu scannen sein. Ordne dafür die Menüpunkte dafür vertikal und linksbündig an. 

Abbildung 4: Auf flaconi.de ist das Mega-Dropdown-Menü gut umgesetzt. Optimal wäre noch, wenn sich das herausklopfende Menü farblich unterscheiden würde.

Für umfangreiche Navigationen auf mobilen Versionen, nutze Akkordeonmenüs

Vermeide mehr als 3 Ebenen bei Akkordeonmenüs!

Abbildung 5: Beim Akkordeonmenü auf Globetrotter.de kann man sich ein Beispiel nehmen.

Verwende Metanavigationen für übergreifende Funktionalitäten, Platzierung oben rechts

Zu den gängigen Inhalten gehören beispielsweise Kontakt, Hilfe und Anmelden. Es gilt: je weniger Elemente, desto besser!

Fixierte Header für lange Seiten 

Falls der Website Besucher extrem lange scrollen muss, ziehe einen fixierten Header in Betracht. Dort ist der Header auch beim Scrollen immer im oberen Bereich zu sehen. 

Alternativ kannst du einen „Scroll-Back-To-Top“-Button nutzen.

Fußzeile: best practices

Je nach Art der Website sieht der Footer unterschiedlich aus. Meistens werden rechtliche Links wie AGB, Impressum, Datenschutz, etc. abgehandelt. Social Media Links werden auch häufig dort platziert.

Mit der Fußzeile hast du die Möglichkeit, den Nutzer mit wichtigen übergreifenden Informationen abzuholen und weiterzuführen. Womöglich verhinderst du das Verlassen des Nutzers.

Bei einer E-Commerce Website empfiehlt es sich zusätzlich, Links zu allen Zahlungsarten sowie zu weiterführenden Informationen bezüglich:

• Lieferung
  
• Versand
• Rückgabe und
• Ersatz

anzugeben.

So realisierst du einen nutzenstiftenden Header:

• Nutze den den Footerbereich sinnvoll. Gestalte den Footer je nach Zielsetzung und Art der Website.
  
• Binde eine Metanavigation mit seitenübergreifenden Links und thematisch interessanten Verlinkungen ein
• Integriere Verlinkungen zu Social Media Profilen als Icons

Schriftarten und Textformatierung: best practices

Abbildung 6: Ich empfehle euch beim Thema Web Fonts Helvetica, Futura, Rockwell, Avenir Bodoni, und Courier zu bleiben. Manche kosten zwar etwas, es lohnt sich aber!

Stelle einen Dunkelmodus für deine Homepage bereit

Die weit verbreiteten Betriebssysteme wie Windows, iOS, MacOS, Android etc. haben bereits alle den Dunkelmodus als Feature verankert. Apps und Programme wenden bereits automatisch den Dunkelmodus an, falls er eingestellt ist. Lediglich im Web ist der Dunkelmodus noch nicht so weit fortgeschritten. 

Wenn deine Website über einen Dunkelmodus verfügt, ermöglichst du deinen Kunden ein nahtloses Nutzererlebnis zwischen Betriebssystem und Web. Daher ist es eine wichtige Maßnahme, damit du deine Website verbessern kannst.

Ein Dunkelmodus ist schlichtweg auch eine Frage der guten Web Accessibility (Barrierefreiheit).

Wenn zwei Versionen deiner Seite einen zu hohen Aufwand darstellen empfehle ich, ein Dark Theme als Standarddesign einzustellen. 

Eine „Dark“-Version deines Designs zu erstellen ist nicht wirklich aufwendig. Ich empfehle dir die Anleitung des Material Designs von Google.

Ich habe hier bereits einen Artikel verfasst in denen ich die Vorteile und die konkrete Umsetzung eines Dunkelmodus in Chimpify vorstelle.

Strukturiere deine mobile Version simpler als deine Desktop Version

Abbildung 7: Am Beispiel Österreich sieht man die weit verbreitete Internetnutzung mit mobilen Geräten. Über 70% nutzen inzwischen das Smartphone statt dem Desktop Computer. Deshalb predigt auch jeder etwas von Pagespeed für mobile, da man sonst möglicherweise über 70% seiner Kunden verärgert. Quelle: Statista

Anhand Abbildung 7 erkennt man, wie wichtig die Optimierung von Websites für Smartphones ist. Auf über 70% der Websites werden heutzutage mit mobilen Betriebssystemen zugegriffen. Mobile Versionen von Websites müssen daher für den kleinen Bildschirm und die Eingabe Touch optimiert werden.

Auf dem Smartphone ist weniger Platz zur Verfügung wie auf dem Desktop. Man sagt auch: weniger Screen-Real-Estate.

Gleichzeitig unterscheidet sich die Eingabemöglichkeit. Auf Smartphones ist Touch die Eingabemöglichkeit der Wahl, auf Desktop Maus und Tastatur.

Smartphone und PC sind also komplett verschiedene Geräte. Wieso sollte man dann also die selbe Website verwenden? Einfach nur Responsive machen reicht meistens nicht. Die Strukturierung sollte verändert werden:

Specke deine Webseite für die Mobile Version ab

Erfahrungsgemäß ist nicht alles relevant. Beschränke dich auf bestimmte Use Cases, die deiner Meinung nach oft auftreten. Das erste was Besucher bei einem Restaurant suchen, sind die Preise und Öffnungszeiten. Es empfiehlt sich dann dementsprechend, den Rest hinten an zu stellen oder gar wegzulassen.

Kürze textbasierte Inhalte auf eine angenehme Länge

Auf Smartphones entstehen sehr schnell Textwände und extrem lange Seiten. Das kann sehr überwältigend wirken. Ich empfehle daher den Text an einigen Stellen zu kürzen.

Specke die Navigation auf das nötigste ab

Wenn die Informationsarchitektur weit gefächert ist kann auch das auf der mobilen Version überwältigend wirken. Ich empfehle auch hier nur die wichtigsten Links darzustellen.

Gestalte die Interaktionen kleinteiliger

Auf der mobilen Version ist es besser, langwierige Interaktionen in kleine Schritte aufzuteilen.  Wenn du z.B. ein langes Formular hast, teile es in mehrere Schritte auf.

Die Anzahl der „Klicks“ auf Touchgeräten ist nicht so entscheidend wie bei PCs. Die Touches erfolgen nämlich zügiger als mit der Maus. Gleichzeitig springt der Nutzer schneller vor und zurück.

Der Nutzer muss dann die Möglichkeit haben, einfach Schritte vor und zurück zu gehen. Es dürfen sich dort keine langen Ladezeiten anstehen. Eingetragene Ergebnisse wie bei Multistep-Formularen sollten auch nicht verschwinden.

Optimiere deine Seite für Sprachassistenten (Alexa, Google und co)

Der Hype um Sprachassistenten ist enorm. Viele Internet Gurus und „Experten“ prophezeien, dass die Sprachsuche schon bald die Suche über den Browser komplett verdrängen wird. Hier in Europa wird das nicht so schnell der Fall sein. Trotzdem schadet es nicht, Inhalte für Sprachassistenten zu optimieren. 

Abbildung 8: Während USA die Suchanfrage per Sprache sich rasant nach oben entwickeln, geht es hier zu lande noch gemächlicher zu. Das hat auch gute Gründe und wird sich vorerst eher nicht ändern. Aber: Trotzdem geht die Tendenz nach oben. Quelle: Statista

Du solltest einen natürlichen Sprachstil verwenden und Long Tail Keywords bevorzugen. Eine guter Pagespeed hilft auch das Ranking für die Sprachsuche zu verbessern. Eine Optimierung für die Featured Snippets ist auch gleichzeitig eine Optimierung für die Sprachsuche.

Verwende einen natürlichen Sprachstil im Fließtext

Dein Ergebnis wird eher genannt, wenn du einen natürlichen Sprachstil verwendest. Die Nutzer fragen ja schließlich auch in einem natürlichen Ton.

Optimiere für Long Tail Keywords

Das geht in die gleiche Richtung wie der natürliche Sprachstil. 

Nutzer fragen nach Phrasen, z.B. „Wie alt ist Silvester Stallone?“ und nicht „Silvester Stallone Alter“. Das letze würde man eher in Google tippen. Wenn du aber für die Sprachsuche optimieren möchtest, optimiere für die ganze Phrase!

Eine verringerte Ladezeit zeigt positiven Einfluss auf die Sprachsuche 

Ein guter Pagespeed wirkt sich in jedem Medium positiv aus. Da profitiert auch die Sprachsuche. 

Optimierung für Features Snippets wirkt sich positiv auf die Sprachsuche aus

Abbildung 9: Das ist ein Featured Snippet. Sie stellen aller meistens Schritt-für-Schritt Anleitungen, Definitionen oder Fakten dar. Solche Snippets werden beim Sprachassistenten von Google ausgelesen.

Man kann sagen: Je strukturierter und zusammengefasster Informationen sind, desto eher wird sie als Featured Snippet dargestellt. Listen und Tabellen sind dafür prädestiniert, sofern der Inhalt stimmt. Wenn sie unmittelbar mit dem jeweiligen Keyword in Verbindung stehen, stehen die Chancen gut!

Bei Schritt-für-Schritt Anleitungen werden häufig nummerierte Listen verwendet, um als Featured Snippet dargestellt zu werden.

Bullet-Point Listen können bei Aufzählungen verwendet werden. Tabellen werden auch gerne von Google dargestellt.

Solche Snippets werden beim Sprachassistenten von Google ausgelesen. Wenn du bei einem bestimmten Thema also ein Snippet hast, dann wird es von Google auch vorgelesen.

Hero Section: Benefits vor Attributen

Die Hero Section ist sehr prominent platziert, meistens ganz oben. Es ist das erste was Webseiten Besucher beim Betreten einer Landingpage oder Homepage wahrnehmen. Hier solltest du immer den Vorteil, den du deinen Kunden bietest, hervorheben. Attribute sind Eigenschaften von dir und weniger wichtig.

Potentielle Kunden wollen wissen, welchen Vorteil du in ihr Leben bringst. In welcher Art und Weise können sie von deinen Produkten profitieren. Kunden sehen sich immer als Mittelpunkt, spreche sie daher direkt an!

Attribute sind Eigenschaften. Deine Berufsbezeichnung ist z.B. ein Attribut von dir.

Beispiel: Kommunikationstrainer

Benefit: Ich bringe deine Präsentationen auf Top Niveau
Attribut: Kommunikationstrainer mit 12 jähriger Erfahrung

Abbildung 10: Hier ein ganz simples Design von mir, wo der Benefit ganz prominent platziert wird. Attribut folgt danach weniger dominant. Abschließend für die Konversion wird ein CTA („Training buchen“) platziert.

Stelle immer ein Kontaktformular zur Kommunikation bereit

Ein einfacher E-Mail Link ist nicht ausreichend. Es gibt Nutzer, die kein E-Mail Programm auf ihrem Gerät haben. Oder nicht vollständig eingerichtet haben. In diesem Fall muss derjenige die E-Mail Adresse kopieren, sein Postfach aufrufen, einloggen und eine Mail schreiben und die Adresse einfügen. Das sind unnötige Schritte, die du deinen (potentiellen) Kunden ersparen kannst indem du ein Kontaktformular bereitstellst!

Generell sollte die Hürde um mit dir in Kontakt zu treten so klein wie möglich sein. Sonst landet der Kunde schnell bei der Konkurrenz.

Am besten stellst du beides bereit. Dann kann der Nutzer sich aussuchen wie er dich kontaktieren soll. Für Besucher, die einen E-Mail Client installiert und eingerichtet haben, mag der E-Mail Link die bessere Wahl sein. Für alle anderen ist das Kontaktformular einfacher.

Die Wahrheit ist eben, dass es für viele Themen keine wirklich passenden Bilder gibt. Dann nimmt man aber lieber kein Bild als ein Unpassendes!

Wenn es Bilder zu den Themen geben sollte empfehle ich dir einen Fotografen.

Ich habe bereits einen Beitrag zur UX orientieren Bildauswahl geschrieben. Dort gehe ich nochmal genauer auf Stock Bilder ein.

Verwende moderne Bildformate: WebP

WebP wurde von Google 2010 ins Leben gerufen. Es hat einen enormen Vorteil gegenüber anderen Bildformaten: es komprimiert unglaublich effizient. Die Dateigröße ist also extrem klein. Das verbessert vor allem die Ladezeit deiner Webseite enorm. Zudem kann Transparenz dargestellt werden. Das funktionierte bisher nur mit dem ineffizienten PNG Format

Bisher war die Browser Unterstützung von WebP eher mittelmäßig. Chrome, Firefox und Opera haben das Bildformat unterstützt. Einzig allein Safari wusste mit dem Bildformat nichts anzufangen. Nun kann auch Safari unter dem neuen Betriebssystem MacOS BigSur WebP darstellen.

Abbildung 12: Alle Browser außer der Internet Explorer unterstützen WebP. Da die Unterstützung für den Internet Explorer sowieso eingestellt wurde und massive Sicherheitslücken besitzt, ist die Nutzung sowieso massiv im Abschwung. Quelle: caniuse.com

Abbildung 13: Marktanteile der Browser. Internet Explorer ist zum Glück inzwischen ganz unten angelangt. Also Bühne frei für WebP!

Verwende Vektorgrafiken (svg) wenn möglich