Dunkelmodus:
Animationen:
 
11 Schritte wie du deine Website verbessern kannst

11 Schritte wie du deine Website verbessern kannst

Nicht jedes Unternehmen möchte eine Agentur oder einen Freelancer anheuern um ein Website Redesign durchzuführen. Hohe Kosten und in manchen Fällen fragwürdige Ergebnisse sind kein Garant, dass die Seite das gewünschte Ergebnis erreicht. 

Dann muss man eben selber Hand anlegen und die Website verbessern.
Folgende 11 Maßnahmen helfen dir, deine Webseite deutlich zu verbessern:

  1. Halte dich an Webstandards / Nutze vorgefertigte Templates
  2. Stelle einen Dunkelmodus bereit 
  3. Setze eine andere Struktur für Mobilgeräte auf
  4. Optimiere deine Seite für Sprachassistenten (Alexa, Google)
  5. Hero Section: Benefits vor Attributen
  6. Nutze Kontaktformulare
  7. Entferne Stock Bilder
  8. Nutze moderne Bildformate
  9. Nutze Vektorgrafiken wo es geht 
  10. Verwende angenehme Typographie
  11. Verwende einen Text Resizer 


Halte dich an Webstandards / Nutze vorgefertigte Templates

Es ist immer zu empfehlen, dass man sich an gängigen Webstandards orientiert. Das ist vielleicht nicht das Spannendste oder Innovativste, aber es funktioniert! Man muss eben nicht immer das Rad neu erfinden, um Erfolg zu haben.

Genauso kannst du vorgefertigte Templates als Vorlage für deine Webseite verwenden. Das ist natürlich nicht die beste Variante, reicht aber für die Basics. Webdesign Trends gehst du damit aus dem Weg.

Wenn du vor einem Redesign stehst lohnt es sich auf die Webdesign Trends 2020 zu achten, wenn deine Website am Puls der Zeit sein soll

Kopfzeile: best practices

Die Kopfzeile (auch Header genannt) beinhaltet alle zentralen Elemente zur Navigation:

  • Logo
  • Hauptnavigation
  • Metanavigation
  • Suchfunktion
Website verbessern Standardisierte Navigation

Abbildung 1: Zwei Beispiele für standardisierte Navigationen; mit und ohne Metanavigation / Suchleiste


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äß.

Screenshot 2020 11 29 at 13.19.22Abbildung 2: Die Apple Website vom Jahr 1997 hatte noch eine vertikale Navigation...


Screenshot 2020 11 29 at 13.20.15Abbildung 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. 
Mega Dropdown Menue auf FlaconiAbbildung 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!

Akkordeonmenue auf Globetrotter

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

Es empfiehlt sich hier grundsätzlich die Accessibility Guidelines zu beachten. Denn wenn deine Website barrierefrei gestaltet ist, dann wird dein Text auch zwangsläufig leserlich sein.

Der allgemeine Konsens bei der Textformatierung ist:

  • Fließtext: seifenlose Schrift
  • Überschriften: serifenlose oder serifen Schrift
  • Großbuchstaben als Hervorhebung vermeiden. AUF DAUER IST DAS ANSTRENGEND ZU LESEN. Don't do it! Nutze stattdessen Fettschrift oder Kursivschrift
  • Blocksatz niemals, zentriert selten
  • Zeilenbreite: 45-48 Zeichen

Allgemein empfehle ich euch nur eine Handvoll Schriftarten. Diese sind Klassiker, mit denen man nichts falsch macht:

Fonts

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

Screenshot 2020 12 01 at 08.03.11

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. 

statistic id1135367 umfrage zur nutzungshaeufigkeit von sprachsuche in deutschland 2019

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

Screenshot 2020 12 01 at 09.14.48

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

Benefit Attribut CTA Beispiel zur Website verbesserung
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.


Tipps wie man ein Formular richtig Design gibt es in meinem Artikel zur Accessibility.

Screenshot 2020 12 01 at 12.28.22

Abbildung 11: Man sollte sich ja nicht selber loben, aber so ist das gut gelöst. Besucher können selbständig entscheiden wie die Kontaktaufnahme stattfinden soll. Es wird übrigens auch beides genutzt.


Entferne die Stock Bilder auf deiner Website

Stock Bilder von diversen Plattformen wie Adobe Stock, Unsplash etc. wirken sehr praktisch. Professionelle und qualitativ hochwertige Bilder zu günstigen Preis. Der Eindruck täuscht jedoch: Stock Bilder sind sehr unpersönlich und selten relevant, geschweige denn informativ.

Das Problem an Stock Bildern ist, dass sie sofort identifizierbar sind. Jeder erkennt Stock Bilder wenn er sie sieht. Dementsprechend lassen Stock Bilder deine Webseite generisch 0815 aussehen.

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.

Screenshot 2020 12 01 at 12.53.24

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

statistic id13007 marktanteile fuehrender browser in deutschland bis september 2020

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

Illustrative Darstellungen sollten als Vektorgrafik dargestellt werden. Logos und Icons sind Beispiele dafür. Vektorgrafiken sind nämlich unendlich skalierbar bei einer gleichzeitig extrem kleinen Dateigröße. Das verkürzt die Ladezeit deiner Website.

Dateien mit der Endung .svg sind Vektorgrafiken. Sie sind vektorbasiert im Gegensatz zu Fotos, die pixelbasiert sind. Das Erscheinungsbild einer Vektorgrafik wird also durch mathematische Berechnungen (Vektoren) erzeugt. Dadurch kann man die Bilder beliebig vergrößern ohne jeglichen Qualitätsverlust. 

Gleichzeitig ist die Dateigröße sehr klein. Das macht Vektorgrafiken sozusagen zur Eierlegenden Wollmilchsau: Sie kann alles!


Fokussiere dich auf ein angenehmes Lesegefühl

Du vermittelst Informationen meistens über Fließtext. Umso wichtiger ist es, dem Leser ein angenehmes Lesegefühl zu ermöglichen. Vermeide Textwände und achte auf ein ausreichendes Kontrastverhältnis (4,5:1). Hier ein Überblick aus meinem Accessibility Artikel:

  • Vermeide Textwände
    • verwende viele Absätze
    • verwende Listen wo geht
    • verwende Tabellen wo geht
    • nutze viele aussagekräftige Zwischenüberschriften
  • Angenehmes Schriftbild
    • verwende sans-serif Schriften für den Fließtext
    • Absatz mindestens 2× so groß wie der Fließtext
    • Zeilenabstand ca. 1,5× so groß wie der Fließtext
    • Zeilenlänge: maximal 2 Alphabetlängen (60 Zeichen)
    • Fließtext Größe mindestens 16px
    • Fließtext immer linksbündig
  • Kontrast für Fließtext mindestens AA (4,5:1)
    • Ausnahme: Großer Text (3:1), Dekorativer Text, Logos
    • Hauptsächlich Hell-Dunkel-Kontrast
  • Die Textgröße sollte für den Leser einstellbar sein
  • Überschriften müssen herausstechen
    • Je niedriger das Überschrift Level, desto weniger markant


Verwende einen Text Resizer

Bei textlastigen Inhalten hilft es, wenn der Nutzer die Größe der Schrift selber einstellen kann. Jeder hat andere Präferenzen; die einen Sehen besser als andere. User können zwar die Textgröße im Browser anpassen. Usability-Tests haben aber gezeigt, dass fast kein User über diese Funktion bescheid weiß. Ich empfehle also immer ein zusätzliches Tool zum Anpassen der Schriftgröße bereitzustellen!

Auf deiner Homepage mag ein Text Resizer nicht unbedingt nötig sein. Bei Blogs oder anderen Teilen deiner Webseite, wo stark auf Text gesetzt wird, ist es jedoch sehr vorteilhaft. Das ist also eine Frage des guten Nutzererlebnisses!

Text Resizing fuer gute accessibility

Abbildung 14: Text Resizer in Action. Wenn du bei eines der großen CMS bist gibt es das Tool als Plug-in.

Mehr Artikel über UX, Usability und Webdesign!

Trage dich in meine persönliche E-Mail Liste ein:

Noch keine Kommentare vorhanden.

Was denkst du?

Kontakt Portfolio
design philosophie. Leistungen. About Me. Blog Home. Portfolio. Kontakt.