Startseite Design: Was gehört auf die Homepage der Website?

Große Bilder? Viel informativer Text? Catchy Phrases? Intro-Film? Reißerische Überschriften?

Wie die Gestaltung Ihrer Startseite aussieht, ist letztendlich ganz allein Ihre Entscheidung. Wie Einstein bereits sagte: Alles ist relativ! Sprich: Ob das Design einer Startseite nun als schlecht oder gut empfunden wird, liegt im Ermessen des Betrachters.

Einige stilistische Empfehlungen gibt es, denen es zu folgen lohnt. Sie haben sich bewährt, weil sie Menschen ansprechen und ihn vielleicht sogar weiterklicken oder sogar zum Kunden werden lassen.
Einige dieser Dos und Don’ts haben wir hier zusammengestellt!

Webdesign für die Startseite: Virtuelle Visitenkarte gestalten

Als Eingangstür und Aushängeschild ist die Startseite das wichtigste an Ihrer gesamten Website. Sie wird am häufigsten von allen Seiten aufgerufen und verlinkt - und sollte dementsprechend attraktiv für Besucher sein.

visitenkarte

Der Weg des Nutzers auf Ihre Website

User sind im Internet unterwegs, weil sie Informationen oder Angebote suchen, für die sie unter Umständen auch bereit sind, Geld zu zahlen. Sie als Anbieter von Informationen, Produkten und Dienstleistungen müssen diese Nutzer nur noch überzeugen. Das ist leider nicht so einfach, weil User im Normalfall sehr ungeduldig und wählerisch sind.

Die Startseite sollte deshalb verraten, worum es geht und was der Nutzer auf Ihrer Website finden kann, ob dies als Lösung zu seinem Problem passt und wenn ja, wie er sich weiter verhalten soll.

Welche Aufgaben muss das Startseite-Design erfüllen?

Eine Startseite sollte nicht nur hübsch aussehen, sondern sie muss auch so einige Funktionen erfüllen. Sie sollte:

checkbox

  • Sie und den Fokus Ihres Unternehmens präsentieren
  • grob und übersichtlich über Sie und Ihr Angebot informieren
  • den Nutzer darüber informieren, was er auf Ihrer Website tun und finden kann
  • Neugier wecken
  • überzeugen
  • Vorteile und Nutzen Ihres Angebots kommunizieren
  • Alleinstellungsmerkmale hervorheben

 

Startseite gestalten: Wie Sie es machen können ...

Welche Elemente gehören zum Startseiten-Design?

Neben dem obligatorischen erklärenden Text auf der Startseite und einem übersichtlichen Navigatinosmenü gibt es noch weitere Elemente, die das Webdesign ansprechend machen:

sprachauswahl

Falls Sie Ihre Produkte oder Leistungen in unterschiedlicher Sprache anbieten, dann ist es für Ihre Besucher sinnvoll, wenn Sie die Möglichkeiten der Sprachauswahl gleich auf der Startseite haben. Häufig findet sich diese Funktion im oberen Bereich der Website, die verschiedenen Sprachen sind mit Länderkürzeln oder Flaggen-Symbolen gekennzeichnet.

siegel

Auf Siegel, Zertifikate und Auszeichnungen können Sie stolz sein - präsentieren Sie diese auf der Startseite! Referenzen, Empfehlungen und Bewertungen von ehemaligen oder bestehenden Kunden können für Interessenten auch sehr überzeugend sein und symbolisieren Vertrauen sowie eine transparente Arbeitsweise.

 

button

Weil der User mit einem bestimmten Interesse auf Ihrer Website landet, lohnt es sich in jedem Fall, dieses für sich zu nutzen: Platzieren Sie Call-to-Action-Elemente strategisch günstig, um Interessenten aufzufordern, mit Ihnen zu interagieren. Das können unter anderem Buttons für eine Newsletter-Anmeldung oder eine kostenlose Beratung sein.

Links setzen: Worauf muss die Startseite verlinken?

In der Hauptnavigation sollten in jedem Fall die wichtigsten Oberpunkte über den Menüpunkt verlinkt und schnell erreichbar sein. Das können beispielsweise die einzelnen Leistungen und Services sein oder auch Produktkategorien, wie man es aus Online-Shops kennt.

Außerdem sollten verlinkt sein:

  • Das Impressum
    Laut BGH-Rechtsprechung sollte im besten Fall von jeder Seite der Website aus das Impressum mit zwei Klicks erreichbar sein.
  • Die AGB und Datenschutzrichtlinien
    Diese Informationen sollten praktischerweise für den Nutzer schnell erreichbar sein.
  • Wichtige Funktionen
    Dazu zählen beispielsweise die Suchfunktion der Website oder Login/
    Registrierung für registrierte Nutzer und solche, die es werden wollen.
  • Aktuelle Informationen
    Aktuelle Angebote, Pressemitteilungen oder ein Überblick über die letzten
    Blogbeiträge - Informationen und Teaser, welche den Besucher neugierig machen, sind immer gut und demonstrieren Kompetenz.
    Aber Achtung:  Die Aktualität solcher Bereiche ist absolut notwendig! Überholte “News” aus vorchristlichen Zeiten erwirken genau das Gegenteil. Wechselnde Inhalte lassen die Website gepflegt wirken, hinsichtlich der Relevanz für die Suchmaschinenoptimierung sind sie nur bedingt günstig.
  • Hilfreiche Informationen
    Haben Sie nützliche Antworten bereits in einem FAQ-Bereich zusammengestellt? Verlinken Sie diesen!
  • Weiterführende Links
    Der Besucher Ihrer Website ist an Ihrem Angebot interessiert - und nun? Geben Sie ihm Optionen, wie er sich weiter durch Ihre Website klicken kann. Solche, die sich noch weiter informieren wollen, freuen sich über die Bereitstellung von Links auf passende Unterseiten.

 

Betextung der Startseite

Wie bei der gesamten Betextung der Website gilt: Nutzen Sie einheitliche und gut lesbare Schrifttypen und - größen! Hier kommt es mehr darauf an, was für den Nutzer praktisch ist und nicht, was Ihnen am besten gefällt. Eine zweite oder dritte Meinung kann hier sehr hilfreiche sein!

Verwenden Sie wenn möglich keine Blockbuchstaben, vor allem nicht, wenn Sie sie an anderen Stellen nicht verwenden. So wirkt das Geschriebene ALS WÜRDE MAN ES HERAUSSCHREIEN!

Strukturieren Sie Ihre Inhalte! Das gilt ebenfalls nicht nur für die Texte der Startseite, sondern hilft generell dabei, Texte gut lesbar zu machen. Eine aussagekräftige Überschrift, sinnvolle Teilüberschriften, Listen und Aufzählungen und hervorgehobene Schlagworte machen Ihre Texte zu “Scannable Content”.

Der Informationsgehalt sollte das Startseiten-Design unterstützen: Beschränken Sie sich auf die wichtigsten Informationen und vermitteln Sie diese in kurzen Sätzen und so wenig Worten wie möglich. Das Prinzip der umgekehrten Pyramide kann hier gern angewandt werden:

 pyramide zur texterstellung

Das Startseiten-Design anschaulich gestalten

Ein Bild sagt mehr als tausend Worte! Für die Startseite Ihrer Website können Sie dies sehr gut nutzen, indem Sie Informationen und Stimmungen über Bilder oder auch Infografiken vermitteln. Bestimmte Emotionen lassen sich so beim Betrachter hervorrufen. Zu diesem Zweck eigenen sich eigene Fotos am besten, auf die Verwendung von Stock-Fotos o.ä. sollte möglichst verzichtet werden. Bilder, welche Sie selbst, Ihre Mitarbeiter und Kollegen, Räumlichkeiten,  eigene Produkte oder Leistungen darstellen, sind in jedem Fall authentischer.

Was gilt es außerdem zu beachten?

Folgende Punkte, die im bisherigen Verlauf noch nicht genannt wurden, sind ebenfalls extrem wichtig für eine funktionierende und ansprechende Startseite Ihrer Website:

    • Kurze Ladezeiten: Wie bereits gesagt, Internetuser sind sehr, sehr ungeduldig. Und in der Regel wartet keiner von ihnen mehr als 2 Sekunden, um eine (wahrscheinlich noch unbekannte) Website zu besuchen. Verringern Sie die Ladezeit deshalb so stark wie möglich!

      ladezeit optimieren
  • Above-the-fold und Under-the-fold
    Als “fold” wird der Knick oder die Kante bezeichnet, welche zwei Bereiche einer Seite voneinander trennt: Zum einen den Teil, der ohne Scrollen bereits sichtbar ist und zum anderen den Bereich, für dessen Einsicht der User scrollen muss. Dieser “fold” kann sich abhängig von der Bildschirmgröße des verwendeten Endgeräts an unterschiedlichen Stellen befinden, weshalb die wichtigsten Informationen möglichst weit oben platziert sein sollten.

  • Responsive Design
    Ein Website- und Startseiten-Design, welches “mobile friendly” ist, sollte heutzutage Standard sein. Ein Responsive Webdesign passt die Inhalte in Ihrem Layout der Bildschirmgröße des Endgerätes an, sodass sie immer optimal dargestellt werden. Vor allem den Nutzern von Tablets und Smartphones kommt das sehr entgegen!

 

Gängige Fehler beim Startseite-Design: Wie Sie es nicht machen sollten …

Es gibt so einige Punkte in der Startseiten-Gestaltung, die seit vielen Jahren falsch gemacht werden. Es gilt diese Dinge aber zu vermeiden, weil sie schlichtweg keine Funktion erfüllen.

startseiten design fehler

Dazu zählen zum Beispiel:

  • Vorschaltseiten: Ihre Website ist keine Zeitschrift, die ein Titelblatt braucht! Jeder Klick, den ein Besucher machen muss, besvor er Ihre Startseite sieht, ist einer zu viel.
  • Musik, Animationen und Intro-Filme: Auch wenn kleine Filmchen ganz nett aussehen können oder die Philosophie Ihres Unternehmens besonders gut beschreiben, gehören Sie nicht auf die Startseite!
  • Begrüßungen: Auch wenn die Startseite als Eingangstür zu Ihrem Unternehmen gilt - ein “Herzlich willkomen auf unserer Homepage” raubt wirklich wichtigen Informationen den Platz und ist einfach unnötig.
  • Counter: Kleine Zähler, die darüber informieren, wie viele Besucher heute/ diesen Monat/ dieses Jahr/ insgesamt bereits auf Ihrer Website waren, bringen dem Nutzer was? Nichts!
  • Pop-Ups: Es gibt wohl kaum etwas, was einem Besucher mehr Nerven raubt als Pop-Ups. Hier verlieren Sie als Websitebetreiber wertvolle Aufmerksamkeit und Sympathiepunkte.
  • Externe Links: Wenn Sie Ihre Interessenten nicht gleich wieder verlieren, sollten Sie darauf verzichten, gleich auf der Startseite Links zu anderen Websites zu positionieren. Interne Verlinkungen zu weiterführenden Themen sind hier eher angebracht.
  • Werbung: Sie hat eigentlich nichts verloren auf einer Startseite - andererseits ist hier die Anzeigenschaltung am lukrativsten. Deshalb: Wenn unbedingt Werbung auf der Startseite vorhanden sein soll, dann wird diese am besten in die Gesamtgestaltung integriert und ordnet sich anderen, wichtigen Elementen unter.
  • Zu viel Inhalt: In der Kürze liegt die Würze! Reduzieren Sie die Startseiten-Gestaltung wie auch die Inhalte auf das Nötigste. Bleiben Sie minimalistisch, wie es große und erfolgreiche Firmen (siehe Apple) vormachen.
  • Fachbegriffe: Die textliche Gestaltung ist selbstverständlich immer abhängig von Ihrer Zielgruppe. Ist diese zu einem Großteil nicht vertraut mit Fachbegriffen, dann nutzen Sie lieber einfachere Synonyme.
  • Übermäßige Selbstdarstellung: Auf der Startseite ist kein Platz für Ihren Lebenslauf, Ihre persönlichen Vorlieben oder Bilder von Ihrem Hund! In der Kategorie “Über uns” bzw. “Über mich” ist es dagegen sehr gut aufgehoben.
  • Konventionen und Vertrautes: Menschen lieben es, wenn die Dinge so sind, wie sie sie kennen. Deshalb ist es ratsam, gewohnte Elemente aus der Startseiten-Gestaltung und Branchen-Standards einzuhalten, auch wenn diese Ihnen persönlich nicht zusagen.
    Probieren Sie nicht, besonders originell zu sein und alles umzuwerfen - Ihre Besucher verwirrt das eher. Die Position von “OK”- oder “Abbrechen”-Buttons oder dem Einkaufswagen sind hierfür optimale Beispiele.

 

Fazit: Keine Eile beim Design der Startseite!

achtung beim startseiten webdeisng

Lassen Sie sich Zeit, an der perfekten Starseite zu feilen, denn das Design wirkt sofort! Fragen Sie Freunde oder auch Kunden nach deren Meinung und holen Sie sich Hilfe vom Fachmann einer Internetagentur, der Ihre Ideen und Vorstellungen optimal umsetzen kann. Eine professionell gestaltete und programmierte Website mit einer Balance zwischen Information und Emotion überzeugt!

Und denken Sie daran: Natürlich sollte die Startseite Ihnen gefallen, aber primär erstellen Sie diese für Interessenten und Kunden!

Parallax Scrolling Webdesign

Neben Webdesign Trends wie Flat Design, Minimalistisches Webdesign und Ghost Buttons erfreut sich auch das Parallax Scrolling Webdesign großer Beliebtheit. Bereits in den 80er Jahren kam die Technik in Videospielen, bei denen sich die Hintergrundebene langsamer bewegt, zum Einsatz. Bei Jump’n’Run Games mit langen horizontalen Levels (wie Super Mario) verlieh der Effekt dem Spiel mehr Tiefe, fast schon einen 3D-ähnlichen Touch. Seit Nike den Effekt für die NikeBetterWorld Kampagne 2011 verwendete, steigt die Zahl der Parallax Websites stetig; genau wie die Freude an den visuellen Entdeckungsreisen, die sich dem User auf immer kreativer umgesetzten Seiten eröffnen.

 

Parallax Scrolling Website forbetter.coffee mit der Reise einer Kaffeebohne

Die Freese Coffee Co. zeigt auf sehr anschauliche Weise mit Ihrer Website forbetter.coffee 5 Regeln für größeren Kaffeegenuss.

 

Was steckt hinter dem Parallax Scrolling?

Bewegungsparallaxe – der wahrnehmungspsychologische Effekt, mit dem Long Scrolling Websites funktionieren, lässt sich am besten mit dem Aus-dem-Fenster-Schauen während einer Auto-, Zug- oder Busfahrt erklären: Wenn ein Beobachter sich parallel zu zwei Objekten bewegt, erscheinen ihm die Objekte, als ob sie sich mit verschiedenen Geschwindigkeiten bewegen. Denn nahe Gegenstände (etwa Straßenschilder, Menschen, Häuser und Bäumen in naher Umgebung) scheinen um einiges schneller an einem vorbeizuziehen als weiter entferntere Objekte (wie ganze Wälder oder Weinberge in der Ferne).

 

Long Scrolling Website für Sicherheits-App

Auf der Scrolling Website für die Ben the Bodyguard App etwa folgt man Ben durch dunkle Straßen, aus denen laufend Kleinkriminelle springen, bis man
kurz vor der letzten Kreuzung in den Menüpunkten erfährt, dass es um eine App zum Schutz sensitiver Daten geht.

 

Genau diese optische Illusion greift in der virtuellen Welt auch beim Parallax Scrolling: Die Designer kreieren verschiedene aufeinander liegende Ebenen – zum Beispiel Hintergründe, Bilder, Inhalte – auf der Seite. Diese bewegen sich beim Scrollen in verschiedenen Geschwindigkeiten und hinterlassen beim Betrachter dadurch den Eindruck von mehr Tiefe, Dynamik und Bewegung. Der User selbst bestimmt dabei die Geschwindigkeit, mit der er durch die Page scrollt und wird somit selbst Teil der “Geschichte”. Mithilfe von Animationen und spielerischen Übergängen wird das Überraschungsmoment und die interaktive Erlebbarkeit auf besonders ideenreichen Seiten noch größer. Dadurch sollen die User den Webseiten-Besuch als positives Erlebnis empfinden.

 

Parallax Scrolling Webdesign Beispiel La Moulade

Die Agentur La Moulade verwendet auf Ihrer Website den Effekt nicht etwa auf einer senkrechten Achse, sondern lässt den
Seiten-Inhalt umso dynamischer beim Scrollen wie eine Windmühle gegen den Uhrzeigersinn drehen.  

 

Vorzüge von Long Scrolling und Parallax Webdesign

Einer der größten Vorzüge beim Parallax Webdesign ist der Faktor des Geschichten-Erzählens und damit einhergehend die positiven Emotionen, die sich beim Besucher einstellen: Dem roten Faden der Webseite folgend, werden das innere (Spiel-)Kind und Neugierde geweckt. In Vorfreude auf das, was beim Scrollen als nächstes passiert, verweilt der Besucher gespannt auf der Seite und lässt sich allzu gerne an die Hand nehmen. Eine Website wirkt dadurch umso liebevoller gestaltet.

 

Webdesign, das zum Spielen einlädt

 

Gerade in Zeiten, in denen One-Pager zur Mode geworden sind und die Bedeutung von Storytelling im Marketing GROß geschrieben wird, bietet Parallax Webdesign großartige Möglichkeiten, Botschaften mithilfe des Scrolling-Effektes auf beeindruckende Art und Weise als interaktive Geschichten ins Web zu übertragen. Weitere Vorzüge sind:

  • der Storytelling-Ansatz bindet den User in die Webseite ein
  • vereinfachte Navigation
  • das scheinbar unendliche Scrolling schafft einen Spannungsbogen und ein Überraschungselement bei der User Experience  
  • lässt sich gut für mobile Endgeräte umsetzen
  • überzeugt den Betrachter durch Tiefe und Animation
  • durch den Ansporn, sich durch die gesamte Seite zu srollen, hält sich der User länger auf der Website auf
  • steuert den Besucher direkt zum call-to-action
  • verstärkt die Glaubwürdigkeit und Authentizität der Webseite durch eine innovative Gestaltung und interaktive Elemente

 

Best Practice bei Scrolling Websites

Ebenso wie bei anderen Webdesign Stil-Richtungen gibt es bei Scrolling Websites Herausforderungen, die es bei der Gestaltung zu beachten gilt. So sollte man sich dessen bewusst sein, dass Parallax Webdesign - gerade auf One-Pagern - zu einem weniger suchmaschinenfreundlichen Webdesign zählt. Von Kritikern wird die Parallax Website gerne auch als “Usability-Hölle” mit langen Ladezeiten bezeichnet, die durch verwirrende Effekthascherei und langsame One-Pager-Navigation überhaupt gar keinen Inhalt transportiert, sondern einzig auf den “Wow!-Faktor” spekuliert.

Doch funktioniert der Effekt ja nicht nur auf One-Pagern. Dezent und clever eingesetzt kann Parallax Scrolling vielmehr Botschaften oder Inhalte so unterstreichen, dass sie nicht in den Hintergrund treten, sondern durch die positive Assoziation eher in Erinnerung bleiben. Auch unser Webdesign Berlin macht es sich zur Aufgaben, Webseiten zu gestalten, die übersichtlich, aufgeräumt und klar wirken sowie Informationen ansprechend zugänglich machen ohne abzulenken.

Um beim Parallax Scrolling Webdesign für größere Usability zu sorgen, sollte man daher folgende beiden Punkte beachten:

  • Subtiler aber klarer Anhaltspunkt: Damit der User weiß, dass er aufgefordert ist zu srollen, braucht er einen “Hinweis”, etwa durch die unverblühmten Aufforderung “scroll down”, oder aber etwas subtiler mit einem Pfeil, der nach unten zeigt.

 

parallax webdesign poppyspend

 

  • Feste Navigation: Um Verwirrung zu meiden und dem Besucher Orientierung zu geben, sollte mit “sticky” Navigationsmenüs gearbeitet werden, die jederzeit an derselben Stelle des Bildschirms bleiben.  

 

Cantilever 1
Cantilever 2
Cantilever 3
Cantilever 4

 

Webdesign Fehler vermeiden - Ein NOT How To Do

Loben ist schwerer als Tadeln - warum das so ist, sei hier dahingestellt. Machen Sie sich diese Erkenntnis zu Nutze, werfen Sie einen kritischen Blick auf die Inhalte des World Wide Web und lernen Sie aus den Webdesign Fehlern der Anderen. Wer weiß, was die Nutzer in den Wahnsinn treibt, kann die eigene Website systematisch verbessern und die Usability steigern.

Sie öffnen eine Website und der erste Eindruck zählt: Eine qualitativ hochwertige Webseite mit adäquatem Webdesign Berlin lässt ein Unternehmen seriös wirken und ist ideal, um die Kundenbasis weiter auszubauen.

Eine schlechte Website bewirkt dagegen das genaue Gegenteil - das Unternehmen erscheint wenig professionell und potentielle Kunden werden durch ein unpassendes Webdesign eher abgeschreckt.

Fehler bleiben draußen

NO GO Area: Die Königsklasse der Webdesign Fehler

Führen Sie sich Ihre eigenen Webdesign Fehler vor Augen - dieser Trick hilft dabei: Stellen Sie sich vor, Sie berufen in Ihrem Unternehmen ein Meeting ein. Die Aufgabe: Womit können wir die Besucher unserer Webseite so richtig aufregen? Ihr Team wird sprudeln vor Ideen!

Grundsätzlich lassen sich die Fehler in drei große Bereiche einteilen:

  • Technik
  • Usability
  • Content

 Kein Erfolg mit Webdesign Fehlern

 

Hier liegen die Nerven blank

Das sind sie, die größten Webdesign Fehler, die den Nutzern und auch der Suchmaschine gründlich gegen den Strich gehen.

Technik - schneller, größer, lauter

Die Entwicklung der technischen Möglichkeiten schreitet in großen Schritten voran, deshalb müssen Sie den Besuchern Ihrer Website jedoch nicht bei jeder Gelegenheit beweisen, was Sie technisch so alles drauf haben. Hier gilt: Weniger ist manchmal mehr!

Diese Punkte bringen einen beim Surfen besonders auf die Palme:

  • Lange Ladezeiten: Die Seite ist überladen mit riesigen Bildern und das Serverpaket sparsam und langsam - das Ergebnis: Man wartet und wartet
  • Lupe und Pinzette bitte: Wer braucht schon Responsive Webdesign, früher ging das schließlich auch ohne
  • Werbebanner mit Sound: Einmal mit der Maus drüber gehovert und das ganze Büro weiß was abgeht

Usability - Das Navigationsmenü als Labyrinth

Eine Website aufrufen und sich intuitiv auskennen - häufig leider zu schön, um wahr zu sein. Wenn dann auch noch alle Elemente reibungslos funktionieren würden - doch stattdessen werden einem diese Hürden in den Weg gelegt:

  • Verschachtelte Navigation: Wer den Stammbaum seines Ziels nicht kennt, hat Pech gehabt
  • Endlose Dropdown-Menüs: Man ist unten angekommen und hat es fast geschafft, will klicken und - schade, da hat es sich schon wieder eingeklappt
  • Mache das unmögliche möglich: Das Feld für die Postleitzahl - drei Zeichen sollten reichen
  • Ein Wald aus 404-Seiten: Endlich durchs Menü geboxt und - Error
  • Sisyphos-Formulare: Endlich auf Seite 10 angekommen, ein kleiner Fehler und nochmal von vorne bitte
  • Kontakt aufnehmen: Die Kontaktdaten stehen im Impressum, das sollte ja wohl reichen

Content - Feels like home

Ja das ist Ihre Seite, aber sie sollte deshalb nicht nur Ihren persönlichen Vorlieben entsprechen. Denn nur weil Sie sich zurecht finden und die Inhalte verstehen, tun es die Besucher der Website noch lange nicht! Das nervt dabei so richtig:

  • Anonymität der Betreiber: Keine oder nur eine sehr versteckte Vorstellung der “Person”, die hinter der Seite steckt
  • Komplexe Inhalte: Man braucht einen Doktor in Philosophie und Germanistik um den Content entschlüsseln und verstehen zu können
  • SEO-Ketten: Wenn ich ganz viele Keywords aufreihe, bin ich bei Google ganz oben und die Nutzer verstehen auf der Seite nur noch Bahnhof
  • Kaufen, kaufen, kaufen: Den User tausendmal blinkend und mit etlichen Pop-ups, Ads und Bannern daran erinnern, warum er auf der Seite ist

 Durch Fehler lernen

Der Lerneffekt dahinter

Zurück zu unserer kleinen Büro-Challenge. Nachdem das ganze Team seinem Ärger ordentlich Luft machen konnte und viel gelacht wurde, kommt nun der Aha-Effekt. Welchen Sinn hatte das Ganze eigentlich?

Nachdem Sie und Ihr Team sich vor Augen führen konnten, was die absoluten No Go’s des Webdesigns sind, wird gleichzeitig bewusst worauf es eigentlich ankommt. Machen Sie also einfach das genaue Gegenteil, dann machen Sie alles richtig!

Ausweg aus dem Fehler-Labyrinth

Der Ausweg aus dem Fehler-Labyrinth

Als Fazit sind hier die essentiellen Säulen des Webdesigns nochmal zusammengefasst:

  • Die Seite schnell laden, wofür sie technisch einwandfrei sein muss
  • Interne Links sollten sinnvoll gesetzt sein und ein relevantes Ziel haben
  • Weniger ist mehr - das Design sollte übersichtlich sein
  • Digitale Texte sollten gut strukturiert, verständlich und dadurch schnell zu erfassen sein - auch mobil
  • Achten Sie auf eine angenehme Lesbarkeit

 

Runtergebrochen auf die Substanz bedeutet das: Setzen Sie jeder Seite ein klares Ziel und machen Sie es dem Nutzer leicht dieses zu erreichen, indem Sie dort hinleiten.

5 Tipps für suchmaschinen- & benutzerfreundliches Design

Es ist möglich: Großartiges Webdesign UND herausragende Usability UND optimale Sichtbarkeit für Suchmaschinen können auf einer einzigen Webseite realisiert werden. Bei der Umsetzung einer solchen Zielvorstellung bedarf es keiner Hexerei, sondern lediglich einer behutsamen Sensiblisierung des Designteams darauf, dass es neben einem innovativen Designstück eben noch mehr gibt.

Tipp 1: SEO gehört ins Design-Team!

Bevor Sie anfangen, das Design für eine Website zu planen oder gar umzusetzen, müssen bereits viele Punkte geklärt sein, beispielsweise:

  • Welche Zielgruppe soll angesprochen werden?
  • Welche Funktionen soll die Webseite bieten?
  • Wie soll die Seite gegliedert sein und wie das Menü strukturiert?
  • Welche Arten von Content sind geplant?
  • Welche Inhalte und Begriffe werden gesucht? Welche Worte müssen im Menü vorkommen?
  • Welche meta-Angaben sind relevant und sollten bereits vorprogrammiert werden?

Bevor also irgendwer auch nur eine Bleistiftskizze der Webseite macht, ist es sinnvoll, einen oder mehrere SEO-Experten mit ins Design-Team zu setzen. Damit die Zusammenarbeit (möglichst) reibungslos klappt, ist wichtig, dass beiden Seiten eindeutig klar ist, dass Sie an einem Strang ziehen müssen, damit am Ende eine tolle, user- und seo-freundliche Webseite kreiert wird. Die Kommunikation muss stimmen und die Balance ausgewogen sein. Weder die Designer noch die SEO-Experten sollten das ultimative Vetorecht haben, sondern EIN TEAM sollte die beste Lösung durch konstruktive Erörterungen finden.

Tipp 2: "above the fold" und "below the fold" ausnutzen

"Viel zu viel Text!" hören wir oft von Webdesignern und auch Kunden (besonders Fotografen). Der klassische Designer präferiert in der Regel aufgeräumte, bildgewaltige Webseiten mit gerade so viel Text, wie unbedingt nötig - oder auch weniger. Bilder sagen schließlich mehr als Worte.

"Viel zu wenig Text-Content" beschweren sich dagegen oft die SEO’ler. Sie hätten doch so gerne so viele Informationen auf jeder Unterseite - für den User und für Suchmaschinen.

Und irgendwo dazwischen ist das, was die User möchten. Sie möchten sich ein Bild von etwas machen und auch etwas erfahren. Die einen wollen alles bis ins Detail genau wissen, die anderen sind mit tollen Bildern und ein paar Schlagwörtern zufrieden. Besonders beim Onlineshopping hat sich gezeigt, dass die User oft beides möchten: auf den ersten Blick das Produkt (mit tollen Bildern) und den Preis erkennen, und auf den zweiten Blick ausführliche Infos zum Produkt erhalten. Um zu den weiterführenden Infos zu kommen, machen Sie auch gerne mal eine Scrollbewegung oder einen Extra-Klick.

Die Lösung für das Problem "Klarheit & Bilder" vs. "Text & Infos" ist, die unsichtbare Linie auszunutzen, die den sofort sichtbaren Teil der Webseite von dem Teil trennt, der erst nach Scrollen sichtbar wird. Nutzen Sie den oberen Part - above the fold - für die visuellen Anreize, den unteren Part - below the fold - für alle weiteren Informationen. Ein ganz klassisches Beispiel hierfür: eine Produktseite von Amazon.

Natürlich gibt es keine klare Trennlinie, denn für unterschiedliche Webseitenbesucher verläuft diese in einer anderen Höhe, je nach Bildschirmgröße und Auflösung. Mit Google Analytics lassen sich übrigens die beliebtesten Bildschirmauflösungen Ihrer User erfassen. Nutzen Sie das Wissen!

Tipp 3: Bewährt - das "alte" Navigationmenü

Auch wenn es ein bisschen althergebracht scheint: Eine Navigation, die erst auf der aufgerufenen Menüseite weitere Navigationspunkte anzeigt, ist aus SEO-Sicht sehr sinnvoll.

Besonders große Dropdown-Menüs entpuppen sich oft als Fluch. In erster Linie verwässern sie den Linkjuice einer Seite, denn auf jeder Seite erzeugt es viele Links, wobei jeder ausgehende Link etwas Linkjuice von der aktuellen Seite auf die verlinkte Seite leitet. Durch viele Links geht viel Linkjuice und damit Page Authority (Autorität) verloren, wodurch wiederum weniger Linkjuice von jedem Link weitergeleitet werden kann. Dadurch verliert jede Seite an Potenzial, die Gesamtsichtbarkeit Ihrer Webseite zu steigern.

Zusätzlich wird es so schwieriger, den natürlichen Linkfluss auf Hauptkategorie- und Hub-Seiten zu konzentrieren. Jede Seite ist von jeder Seite aus erreichbar, ein Hauptmenüpunkt ebenso gut und häufig wie eine möglicherweise irrelevante Unterseite. Die Relevanz verschiedener Seiten auf Basis der Verlinkung in der Menüstruktur kann von Suchmaschinen nicht hergeleitet werden.

Auch aus Usability-Sicht kann ein Drowpdown-Menü schädlich sein. Besondern große, detaillierte Menüs mit vielen Unterpunkten und weiteren Elementen wie Formularen oder Attributauswahl können die User in den Wahnsinn und damit von der Seite treiben. Ebenso wie in langen, scrollbaren Menüs verliert der User die Übersicht und kann - beinahe wie Suchmaschine - nicht oder nur mit Mühe die relevanten Informationen finden. Dropdown-Menüs, die in sich weitere Dropdown-Spalten aufweisen, werden schnell zu wahren Geschicklichkeitsübungen:

dropdown-menü mit geschicklichkeitstraining

Viel eher sollten Sie eine Navigation nutzen, die erst nach einem Klick auf einen Menüpunkt eine Unterseite mit einem detaillierten Untermenü offenbart. Auf diese Weise erhält Ihr Besucher eine optimale Übersicht, da er nur die Unterkategorien angezeigt bekommt, die ihn bei seiner Suche interessieren. Im folgenden Beispiel sehen Sie ein gutes Besipiel für eine Navigation ohne Dropdowns. Erst beim Klick auf "Lidl-Shop" öffnet sich die Shop-Unterseite mit dem kleineren Untermenü:

einfache navigationsleiste

Beim weiteren Klick auf "Haushalt & Küche" erscheint eine detaillierte Navigation und eine noch detailliertere Übersichtseite. Auf diese Weise kann der User stöbern und muss keinen Geschicklichkeitswettbewerb gewinnen. Top!

Einfaches Seitenmenü als Untermenü

Durch diese Umsetzung entsteht auf ganz natürliche Weise eine ideale Struktur für Suchmaschinen mit Hub-Seiten für einzelne Themenbereiche.

Kompromisse sind machbar: Wenn Sie nicht auf ein modernes Dropdown-Menü auf Ihrer Seite verzichten möchten, empfiehlt es sich, dieses sehr einfach zu halten und nur die wichtigsten Seiten darin aufzuführen. Ein "altes" Untermenü mit detaillierten Unterkategorien kann zusätzlich auf jeder betreffenden Unterseite vorhanden sein.

Tipp 4: Nutzen Sie CSS zur Textgestaltung

Häufig benutzen Webdesigner Bilder, um gestylten Text darzustellen. Text in Bildform kann Google jedoch (noch) nicht lesen. Kleines Beispiel, die Startseite eines Damenmode-Geschäfts (und das ist wirklich die gesamte Startseite):

komplette startseite kein inhalt

Und diesen Inhalt sieht ein Crawler (bspw. Google) in etwa von der Seite:

"Aktuell Filialen Mitte Friedrichshagen Köpenick Friedrichshain Wildau Sortiment Über uns Service Kontakt UNSERE MARKEN Impressum | Datenschutz | Sitemap Abmelden | Bearbeiten"

Keine Spur von Frühlingstrends oder von einem Jobangebot in der Modebranche in Berlin...

Dabei ist dieses Vorgehen völlig unnötig. Es gibt in CSS3 viele Möglichkeiten, einen Text zu stylen, von Zeichen- und Zeilenabstand über Größe, Stärke, Farbe, Schatten usw. Man kann verschieben, drehen, zerren, skalieren, animieren, Layer festlegen und und und… Bei der Textgestaltung gibt es fast kein Limit.

Der einzige Grund für ein Bild anstelle eines Textes wäre eine so einzigartige Schrift, dass Sie nicht darauf vertrauen können, dass auf dem Gerät Ihres Besuchers ein annähernd ähnlich aussehender Schrifttyp vorhanden ist. Doch selbst für nicht-websichere Schriften gibt es mittlerweile tolle Lösungen zum Einbinden!

Tipp 5: Mit mehr Arbeit / Aufwand erhalten Sie bessere Ergebnisse

Die einen sagen, das Glück sei mit den Dummen, die anderen sagen, das Glück sei mit den Tüchtigen… Eines lässt sich aber definitiv feststellen: Mit einer gut geplanten und sauber umgesetzten Webseite mit einem herausragenden Design, perfekter Usability und einer guten SEO-Strukturierung erhöht man die Chancen auf Erfolg einer Webseite enorm. Natürlich bedeutet das für das ganze Team mehr Arbeit und mehr Zeitaufwand. Eine tolle Seite lässt sich nicht mal "eben so" aus dem Ärmel schütteln.

Wer einen hohen Turm bauen will, muss sich eben lange am Fundament aufhalten.

Ghost Buttons: Schickes Design-Element oder Usability-Falle?

Schon ein paar Jahre spuken sie im Web – Tendenz steigend – und mischen die Webdesign Trends auf: Die Rede ist von Ghost Buttons. Gerade im Minimalistischen Webdesign, Material Design und Flat Design greift man bevorzugt auf das Element zurück. Doch was genau verbirgt sich hinter dem Ghost Button und welche Vor- bzw. Nachteile bringt er mit sich?

 

Ghost Buttons sind gerade im Flat Design oder bei minimalistisch gestalteten Webseiten beliebt.

Transparent. Prominent. Formvollendet.

Als Ghost Button bezeichnet man einen Button ohne Füllung. In aller Regel besteht der transparente (oder semi-transparente) Button aus einem feinen Rahmen, kurzem und einfachen Text sowie einem Mouse-Over-Effekt, der den Button ausfüllt und die Schrift invertiert. Der Button transportiert einen call-to-action, das heißt im Kern, er fordert den Besucher dazu auf, eine bestimmte Handlung durchzuführen, er gibt ihm zugleich Orientierung und er schafft Vertrauen und Sicherheit. Das Gestaltungsmittel ist auch unter den Begriffen Empty Button, Naked Button oder Hollow Button geläufig.

 

Durchsichtige Hingucker

Ghost Buttons stechen durch Ihre Transparenz hervor. Auf ein Minimum reduziert treten sie einerseits in den Hintergrund, sodass die zentrale Botschaft im Fokus bleibt und große Bilder sich in ihrer vollen Wirkungskraft entfalten können. Zugleich nehmen sie den User dezent, unaufdringlich und ohne überladene Effekthascherei bei seinen folgenden Schritten an die Hand.

Aktuell erfreuen sich Ghost Buttons auch in unserem Webdesign Berlin großer Beliebtheit. Gerade auf schlicht designten Webseiten machen sie sich gut und fügen sich ideal in die Gesamtharmonie der Seite ein. In Kombination mit Hero Images oder Blurry Background Bildern kommen sie besonders gut zur Geltung.

Der Ghost Button im Überblick:

  • transparent / hat keine Hintergrundfarbe
  • von einem schmalen Rahmen umrandet
  • enthält einen einfachen kurzen Text
  • Text & Rahmen sind meist schwarz oder weiß gehalten
  • besitzt gegenüber traditionellen Buttons ein etwas größeres Format
  • prominente Platzierung
  • call-to-action Funktion
  • beliebte Anwendung im Flat-Design, Material-Design, UX-Design & Minimalismus-Design

 

Zwischen Blickfang und Diffusion

Wie jedes andere (Trend-)Design-Element bringt der Ghost Button seine Vorteile genauso mit sich wie seine Nachteile. Richtig eingesetzt wirkt er wie ein eleganter Eye-Catcher, der die Seite zusätzlich ordnet und ihr einen harmonischen letzten Schliff gibt. Unbedarft eingefügt hingegen, kann er den Besucher verwirren oder einfach nur untergehen.

Geistreicher Minimalismus

Was vermeintlich einfach aussieht, kann große Wirkung haben: Bedacht implementiert und harmonisch eingebettet schafft der Naked Button es, nicht von den Bildern abzulenken, sondern dem Besucher vielmehr visuelle Anhaltspunkte mit Ordnungscharakter zu geben. Das Gestaltungselement verleiht der Seite so eine aufgeräumte und edle Ästhetik. Die Handlungsaufforderungen, die der Button transportiert, sind dabei ganz klar ohne aufdringlich zu wirken.

Der Ghost Button fügt sich ideal in das Konzept Minimalistisches Webdesign ein: Im Fokus stehen hier Funktionalität sowie eine klare Nutzeroberfläche mit wenigen, dafür aber besonders akzentuierten Elementen. Minimalismus-Webseiten arbeiten mit flachen Texturen, eingeschränkten Farbpaletten und viel negativem Raum. Das sorgt für kurze Ladezeiten und bietet viele Vorteile im Hinblick auf responsive Design.

Zudem lassen sich die transparenten Buttons vergleichsweise einfach mit HTML oder CSS kreieren (hierfür kann man im Netz sogar Tutorial-Anleitungen finden). Trotz der Schlichtheit wirken sie nicht trivial, sondern vielmehr ausgefeilt. Da sie größtenteils aus leerem Raum bestehen, lassen sie sich simpel mit anderen Gestaltungsmitteln und jedem Style verbinden. Auch in Sachen Versatilität können Ghost Buttons punkten: Im Prinzip können sie in jedem Farbschema zum Einsatz kommen. Schließlich gehören Ghost Buttons aktuell zu den angesagtesten (UI) Trends, die jeder Page einen modernen Look verleihen.

Die Vorteile des Ghost Buttons bei richtiger Anwendung im Überblick:

  • schlichtes und modernes Design
  • anspruchsvoller & raffinierter Look
  • eindeutiger aber unaufdringlicher call-to-action
  • Web Design Element, das nicht ablenkt; Hintergrundbild bleibt sichtbar
  • einfaches Design und Implementierung
  • vielfältige Einsatzmöglichkeiten

 

Den Geist (über)sehen?

Crowded out: Die Einfachheit und Durchsichtigkeit der Buttons kann ihnen aber genauso zur Falle werden. So könnten Besucher einer Seite die transparenten Knöpfe (gerade auf kontrastreichem Hintergrund) erst gar nicht als solche identifizieren. Hierbei ist es wichtig, wo der Ghost Button auf der Seite platziert wird, sodass er nicht untergeht, sondern die Aufmerksamkeit des Benutzers auf sich zieht.

Essenziell ist außerdem die Entscheidung bezüglich der Farbgebung: Photographische Hintergründe und eine ungünstige Farbwahl für die Buttons resultieren schnell in Unübersichtlichkeit und Unlesbarkeit. Gerade bei Nicht-Technikaffinen sorgt die Suche nach einer Möglichkeit sich weiterzuklicken dann nur für Verwirrung.

Die Nachteile, wenn Ghost Buttons ungünstig platziert werden, im Überblick:

  • Hintergrundbild kann den Button u.U. übertönen
  • Button kann Hintergrundbild überwältigen
  • schlechte Lesbarkeit
  • Button kann verwirren
  • könnte in ein paar Jahren veraltet sein

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35