Optimiere das Layout deiner Website mit diesen 8 Tipps

Die eigene Website zu optimieren, um Interessenten auf das eigene Angebot aufmerksam zu machen, ist auch für Sport- und Wellnesseinrichtungen entscheidend. Wir haben für dich 8 knackige Tipps zusammengetragen, die dir dabei helfen, deine Website erstmals aufzusetzen, zu optimieren und eine hohe Conversion Rate zu erzielen.

Du willst nicht alles lesen? Springe direkt zu unserer Zusammenfassung!

Zahl1 Icon
CTA Buttons richtig platzieren

Call-to-Action (CTA) Buttons sind entscheidend, um Website Besucher zu Handlungen zu verleiten, wie zum Beispiel das Buchens einer Dienstleistung. Platziere deine Call-to-Action Buttons an strategisch passenden Stellen, möglicherweise am Ende von Produktbeschreibungen oder in der Nähe von Kontaktformularen, um die Conversion Rate (Verhältnis von Websitebesuchern zu beispielsweise konvertierten Interessenten über ein Kontaktformular) zu maximieren.

Auf deiner Startseite kann es zudem sinnvoll sein, denselben Call-to-Action Button einmal ganz oben und ganz unten auf der Seite zu platzieren, um eine möglichst hohe Klickrate darauf zu erreichen.

Eine weitere innovative Möglichkeit, ist die Platzierung eines Call-to-Action Buttons mit Ankerlinks (bei Anklicken eines Anker-Links wirst du automatisch zu einem relevanten Abschnitt der jeweiligen Seite oder Website weitergeleitet) ganz oben auf deiner Startseite, um den Nutzer direkt an die richtige Stelle zu navigieren. Ein Gestaltungsbeispiel dafür findest du hier: Für Mitarbeitende – egym-wellpass.com

Mock up CTA und Ankerlinks
Zahl 2 Icon
 Farbschemas sinnvoll abstimmen

Die Farbgestaltung deiner Website beeinflusst maßgeblich die Wahrnehmung deiner Marke und die Benutzererfahrung. Wähle ein Farbschema, das zu deinem Unternehmen und deiner Corporate Identity (CI) passt und sorge dafür, dass die Farben gut miteinander harmonieren. 

Achte insbesondere darauf, dass die Farben deiner Call-to-Action Buttons sich vom Rest der Seite abheben, um sie besonders zu betonen.

Während es durchaus sinnvoll sein kann, die Farbe von Buttons oder Hintergründen in den Farben deiner Corporate Identity anzulegen, machen Fließtexte in anderen Farben als schwarz und grau (oder weiß bei dunklen Hintergrund) in der Regel nur zum highlighten bestimmter Wörter oder Überschriften Sinn. Als Faustregel sollten nicht mehr als 4-5 Farben für die Schrift- und Hintergrundfarbe gewählt werden (zum Beispiel weiß, schwarz/grau + zwei CI Farben).

Farbklecks
Zahl 3 Icon
Maximaler Inhalt pro Seite

Halte deine Seiten übersichtlich und fokussiere dich auf die wichtigsten Informationen. Zu viel Inhalt und vor allem Text auf einer Seite kann überfordernd wirken und Besucher abschrecken. Als Faustregel gilt es hier zwischen 500 und 1.000 Wörtern zu bleiben. Im Hinblick auf die allgemeine Länge einer einzelnen Unterseite, sollten nicht mehr als 3-5 Scroll Bewegungen (“Mausrad Umdrehungen”) notwendig sein um von ganz oben nach ganz unten zu scrollen.

Strukturiere zudem deine Inhalte mit Überschriften, Absätzen und Bullet Points, um sie visuell überschaubarer zu machen und den Lesefluss zu verbessern.

Weiterhin vergessen viele Website-Betreiber, genügend “Weißraum” auf den einzelnen Seiten freizulassen. Vermeide es, Text direkt neben Bildern zu platzieren und lass stattdessen einen Mindestabstand von freier Fläche zwischen allen angrenzenden Elementen wie Buttons, Bildern, Icons, Slidern oder Texten frei.

Zufriedener Mitarbeiter am Bürotisch
Zahl 4 Icon
Menüleiste gestalten

Die Menüleiste ist die Navigationszentrale deiner Website. Stelle sicher, dass sie intuitiv gestaltet ist und es den Besuchern leicht macht, sich auf deiner Seite zurechtzufinden (für mehr Infos siehe Punkt 8. Benutzerfreundlichkeit). 

Begrenze die Anzahl der Menüpunkte (maximal 5-7), um Überlastung zu vermeiden, und platziere wichtige Seiten gut sichtbar, in einem dauerhaft fixierten Menübalken mittig oben auf deiner Seite (zumindest auf der Desktop Version deines Browsers). 

Auf mobilen Geräten wird die Mneüleiste meist als ein Symbol rechts oben auf der Website mit 3 Balken dargestellt. Beim Anklicken dieses Symbols wird daraufhin die Menüleiste ausgeklappt.

Mock up Menüleiste
Zahl 5 Icon
Die richtigen Bilder nutzen

Bilder spielen eine wichtige Rolle dabei, die Aufmerksamkeit der Besucher zu gewinnen und sie zu überzeugen, auf deiner Website zu verweilen.

Achte darauf, dass die Bilder hochwertige Aufnahmen sind und den Inhalt deiner Seite sinnvoll ergänzen. Dazu platzierst du deine Bilder zum Beispiel in einer Zick-Zack oder Raster Anordnung in Kombination mit aussagekräftigen Textelementen.

Um längere Ladezeiten zu vermeiden, solltest du deine Bilder jedoch komprimieren (<1MB Dateigröße). Hierzu kannst du folgendes Online-Tool verwenden: Bilder komprimieren

Mock up Bilder anordnen
Zahl 6 Icon
Wiedererkennungswert schaffen

Durch die Auswahl ähnlicher Element-Anordnungen (Platzierung von Text-, Bilder- und Infokasten) und Element-Gestaltungen (Farbe und Layout) auf deinen einzelnen Seiten kannst du es Nutzern erleichtern, sich generell auf deiner Homepage zu orientieren. Ein Beispiel dafür wäre die Verwendung von einheitlich gestalteter Icons.

Eine Möglichkeit dafür ist, all deine Unterseiten nach einem festen Schemata aufzubauen und eine wiederholende Struktur je Seite aufzusetzen.

Ausgangspunkt ganz oben auf deiner Seite sollte ein Headerbild sein, gefolgt von maximal drei Hauptabschnitten je Seite, sowie einem abschließenden Element wie zum Beispiel Kacheln mit weiterführenden Links und deiner Website Fußzeile. Achte darauf deine einzelnen Bausteine visuell, zum Beispiel durch Divider Elemente, voneinander abzugrenzen.

Mock up Texte anordnen
Zahl 7 Icon
Einbindung von Videos: What not to do

Generell eignen sich Videos gut als Header ganz oben auf deiner Startseite, um besonders gut Atmosphäre und Stimmung zu transportieren.

Vermeide es allerdings, Videos mit Ton in deine Seite einzubinden, die automatisch starten. Dies wird von Nutzern als besonders störend empfunden. Eine gute Alternative bieten Videomontagen ohne Ton mit visuell integrierten Textbausteinen.

Solltest du dennoch auf deiner Seite beispielsweise eine Studiotour oder ein Vorstellungsvideo mit Ton einbinden, achte darauf, dass dieses Untertitel enthält (für Nutzer die Videos grundsätzlich stummgestellt haben) und dass diese nicht automatisch abgespielt werden, sobald man die Seite aufruft oder über den entsprechenden Bereich scrollt.

Mock up Videos einbinden
Zahl 8 Icon
Benutzerfreundlichkeit optimieren

Ein erster und wichtiger Schritt zu einer verbesserten Benutzerfreundlichkeit ist die Verbesserung der Darstellung deiner Seite auf allen Endgeräten. Hierzu können wir das Browser-Add-on “Window Resizer” empfehlen, über das du dir mit 2-3 Klicks das Layout deiner Seite auf verschiedenen Bildschirmgrößen anzeigen lassen kannst. So kannst du überprüfen, ob Texte oder Bilder auf anderen Endgeräten wie Smartphones oder Tablets möglicherweise merkwürdig angeordnet oder abgeschnitten werden.

Wenn du mehr dazu erfahren möchtest, wie du die Nutzerfreundlichkeit deiner Website verbessern kannst, empfehlen wir dir, unseren zweiten Artikel “Website UX mit Interviews optimieren” zu lesen.

Zusammenfassung der wichtigsten To-Dos:
Anna freut sich auf das Training mit wellpass
  • CTA Buttons: Pro Seite mehrere (mindestens 2) Call-to-Action Buttons einbinden
  • Farben: Maximal 5 Schrift- und Hintergrundfarben verwenden (schwarz/grau, weiß + 2-3 Corporate Identity Farben)
  • Länge:  Ca. 500 – 1.000 Wörtern Maximum pro Unterseite und nicht länger als 3-5 Scroll-Bewegungen sein
  • Menüleiste: Maximal 5-7 Menüpunkte und Zusammenfassung von Unterpunkten
  • Bilder: Achte auf angemessen komprimierte Bilddateien und eine ansprechenden Anordnung von Text und Bildern
  • Wiedererkennungswert: Eine vertraute Struktur durch wiederholende Anordnungen von Text-, Bilder- und Infokasten und ähnliche Farb- & Layout Kombinationen (z.Bsp. Icons) schaffen
  • Geeignete Videos: Setze vor allem Videos ein, die auch ohne Ton aussagekräftig sind
  • UX Interviews: Überprüfe bei Bedarf die Nutzerfreundlichkeit deiner Website im Rahmen von Nutzerinterviews

Schon gewusst?

EGYM Wellpass Partner profitieren nicht nur von mehr Besuchern und Umsatz, sondern auch von weiteren umfassenden Ressourcen und Know-How, das innerhalb des Netzwerkes zur Verfügung gestellt wird.