Startseiten-Design: 14 UX-Tipps für den Haupteingang eures Online-Auftritts

Die Expert*innen der renommierten Nielsen Norman Group schildern in einem englischsprachigen Beitrag, wie ihr die User Experience (UX) eurer Startseite optimiert. Die wertvollen Hinweise habe ich für euch zusammengefasst und ergänzt.

Bildquelle: Pixabay

Eine terminologische Anmerkung vorab: Der englische Begriff "homepage" bezeichnet einzig die Startseite eines Online-Auftritts. Der Begriff "website" dagegen bezeichnet im Englischen den kompletten Online-Auftritt. Eselsbrücke: Eine "page" ist im Englischen stets eine einzelne Seite. Eine "site" dagegen ist eine komplette Örtlichkeit oder Stätte. 

Im Deutschen wird oft der Begriff Homepage genutzt, obwohl der komplette Online-Auftritt gemeint ist (also eigentlich eine Website).

Um Missverständnisse zu vermeiden, spreche ich deshalb im Folgenden nicht von "Homepage", sondern ausschließlich von "Startseite".

Kommen wir zur UX-Optimierung von Startseiten: Sie gelten als "Front-Tür" eines Online-Auftritts. Zwar betreten User*innen einen Online-Auftritt häufig über die Google-Suche und kommen dabei direkt auf einer Unterseite heraus – jedoch besuchen viele von dort aus die Startseite, um sich zu orientieren. Die Startseiten-Gestaltung ist also immer relevant, unabhängig davon, wo der Website-Besuch startete.

Kommen wir zu den Startseiten-Tipps der UX-Experten*innen entlang von fünf Kategorien – Vorhang auf:

Startseiten-Optimierung #1: Leichte Zugänglichkeit

➤ a) Mit einem einzigen Klick auf die Startseite gelangen: Das sollte von jeder Unterseite aus möglich sein. Die Nielsen Norman Group empfiehlt, diese Verlinkung sowohl implizit (klickbares Logo) als auch explizit (Navigations-Link mit dem Namen "zur Startseite" oder "Home") bereitzustellen.

Die UX-Profis setzen dies auf ihrer Website so um (für eine größere Ansicht in das Bild klicken):

Neben dem klickbaren Logo, das auf die Startseite führt, bietet nngroup.com in der Haupt-Navigation zusätzlich einen expliziten Startseiten-Link ("Home").

➤ b) Die Startseite muss sich optisch von den Unterseiten abheben: Sie muss definitiv dem Look & Feel des Gesamt-Auftritts folgen – gleichzeitig aber eindeutig als "Haupteingang" erkennbar sein. Erreichbar ist dies durch einen Welcome Blurb, einen kurzen Begrüßungstext, der sagt, was ihr macht.

Der Online-Auftritt der Nielsen Norman Group setzt dies so um:

Ein Welcome Blurb (hier am Beispiel von nngroup.com) macht die Startseite als solche erkennbar.

Startseiten-Tipp #2: Schnelle Selbstbeschreibung eures Unternehmens

➤ a) Betrachtet eure Startseite als Elevator Pitch. Wikipedia, übernehmen Sie:

"Der Kerngedanke eines 'elevator pitches' ([...] Aufzugszusammenfassung) basiert auf dem Szenario, eine wichtige Person in einem Aufzug zu treffen und diese dann während der Dauer einer Aufzugsfahrt von einer Idee zu überzeugen. Ist die Idee überzeugend genug vorgestellt worden, wird das Gespräch weitergeführt oder man verabredet sich zu einem weiterführenden Meeting."

Heißt für eure Startseite: Erklärt schnell, überzeugend und aktivierend, wer ihr seid und was User*innen auf eurer Website tun können/sollen.

➤ b) Platziert euren Unternehmensnamen samt Logo prominent links oben. Es handelt sich um eine Konvention (Gewohnheit), die von User*innen erwartet wird: Wer wissen will, auf wessen Website er/sie ist, sucht im obersten Bereich der Seite nach Name und Logo.

Anmerkung eures Bloggers: Die Nielsen Norman Group empfiehlt die Platzierung von Name und Logo durchgängig links-oben, hält sich bei ihrem mobilen Online-Auftritt aber selbst nicht daran. Hier erscheint das Logo oben-mittig (wovon die Berater*innen eigentlich abraten). Dagegen beherzigen zum Beispiel Otto und Zalando die Empfehlung auch bei ihren mobilen Auftritten.

➤ c) Nutzt unterhalb des Logos eine Tagline: Das ist ein Einzeiler, der kurz und knackig klarmacht, was euer Unternehmen tut. Ganz wichtig: Eine Tagline ist kein Slogan. Eine Zeile wie "Just do it" ist ein Slogan und sagt nichts darüber aus, was das Unternehmen (Nike) macht. Eine Zeile wie "Schneller Gebrauchtes verkaufen" dagegen ist eine Tagline und beschreibt, worum es auf der Website (momox.de) geht.

Nur äußerst bekannte Unternehmen/Marken können auf eine Tagline verzichten. Alle anderen sollten sie stets nutzen.

Auf der Startseite der Norman Nielsen Group ist die Tagline so umgesetzt:

Eine Tagline am Beispiel von nngroup.com.

Auch wenn manche UX-Expert*innen ihn infrage stellen: Ich würde euch zusätzlich stets einen Welcome Blurb auf der Startseite empfehlen (siehe oben unter Punkt 1c). Dies ist ein kurzer Text, der zusätzlich zur Tagline im oberen Bereich der Startseite schildert, was ihr tut. 

➤ d) Alleinstellungsmerkmale, Social Proofs, Expertenurteile: Hebt euch auf der Startseite von eurer Konkurrenz ab. Zeigt anhand von objektiven Fakten, was ihr anders/besser macht.

Leitfrage sollte dabei sein: Warum sollte eure Zielgruppe eure Dienstleistung bzw. euer Produkt wählen – und nicht die der Konkurrenz?

➤ e) Nutzt nur zielführende Bilder auf der Startseite: Rein dekoratives Bildmaterial wird laut Nielsen Norman Group von User*innen ignoriert. Jedes Bild auf der Startseite sollte deshalb einem Zweck dienen und Mehrwert schaffen.

Startseiten-Optimierung #3: Vorschau der Inhalte des Online-Auftritts

➤ a) Betrachtet eure Startseite wie den Eingangsbereich eines Ladengeschäfts: Zeigt, was ihr zu bieten habt, um Besucher*innen tiefer in euer Angebot zu ziehen.

Die wichtigsten Content-Teaser solltet ihr dabei in dem Bereich der Startseite platzieren, der ohne Scrollen sichtbar ist. Man spricht hier von "above the fold", zu Deutsch "oberhalb des [Zeitungs-]Falzes". Bildlich gemeint ist der Bereich einer gefalteten Tageszeitung in einer Auslage, der auf den ersten Blick sichtbar ist.

➤ b) Vermeidet sogenannte "false floors" ("Doppelböden") auf eurer Startseite: Sie entstehen, wenn User*innen glauben, am Ende der Seite angelangt zu sein – obwohl es noch weiter nach unten geht. Diese Illusion tritt zum Beispiel auf, wenn es zu viel Weißraum auf der Startseite gibt.

Startseiten-Optimierung #4: Handlungsaufforderungen (Calls-to-Action)

➤ a) Eure Startseite muss klare Handlungsaufforderungen (Calls-to-Action) bieten, um tiefer in euren Online-Auftritt zu lotsen: Nutzt verständliche und selbstbeschreibende Link-Texte auf der Startseite. Vermeidet Link-Texte wie "mehr" oder "jetzt lesen". 

➤ b) Betont Highlight-Themen auf der Startseite visuell: Wichtiges groß, weniger wichtiges kleiner. Vermeidet es, alles gleich groß und prominent auf der Startseite zu kommunizieren – dann sticht nichts mehr hervor.

➤ c) Platziert die globale Navigation auffällig: Die globale Navigation (Haupt-Navigation) ist eine äußerst wichtige Orientierungshilfe für die Besucher*innen eurer Website. Achtet darauf, beim Wording der Navigationspunkte Konventionen (Gewohnheiten) einzuhalten: Nutzt Begriffe, die gängig sind (z. B. "Unser Leistungsportfolio", "Jobs"), verzichtet auf kryptische oder "hippe" Wort-Kreationen.

Startseiten-Optimierung #5: Einfaches Design

➤ a) Minimiert Bewegtbilder und Animationen auf der Startseite: Image-Filmchen und anderes visuelles Remmidemmi sind allgegenwärtig auf Startseiten von Unternehmens-Websites – sie sind aus UX-Sicht aber komplett kontraproduktiv. Sie lenken User*innen nachweislich ab und werden regelmäßig als Werbung missinterpretiert. Absolutes No-Go sind automatisch ablaufende Videos: Nutzer*innen wollen nicht ungefragt mit Geplärre begrüßt werden. 

➤ b) Vermeidet Pop-ups und Splash-Screens: Pop-ups sind kleine Fenster, die auf einer Seite aufgehen und den eigentlichen Inhalt überdecken. Sie nerven gewaltig. Splash-Screens sind völlig überflüssige Begrüßungsbildschirme, die vor dem eigentlichen Inhalt der Startseite eingeblendet werden.

Die Nielsen Norman Group betont: Pop-ups und Splash-Screens gehören aus User*innen-Sicht zu den verhasstesten Design-Elementen im Web. Sie stellen Barrieren dar, unterbrechen Nutzer*innen und halten sie vom eigentlichen Content der Seite fern. Viele denken dabei an aufdringliche Werbung.

Eine Ausnahme sind Pop-ups für die Cookie-Einverständniserklärung (Cookie-Consent-Banner): Sie nerven genauso kolossal, müssen aber von Rechts wegen erscheinen.

Startseiten-Optimierung: UX-Regeln sind zeitlos

Soweit 14 Tipps, wie ihr eure Startseite in Sachen UX optimieren könnt. Die Nielsen Norman Group unterstreicht, dass die genannten Tipps 2024 genauso gelten, wie sie es bereits vor 20 Jahren getan haben. 

Der Grund ist simpel: Usability und User Experience (UX) orientieren sich an den Grundprinzipien, wie Menschen Informationen verarbeiten. Und das ist ein "zeitloser Klassiker": Laut der Hirnforschung hat sich die Grundstruktur unseres Gehirns seit der Steinzeit nicht gravierend verändert.

Ich formuliere es gerne so: Niemand geht ins Web, um Online-Auftritte zu bestaunen wie ein Kunstwerk im Museum. User*innen surfen flüchtig. Sie wollen im Web schnelle Antworten, schnelle Ergebnisse, schnell etwas durchführen. 

Macht es ihnen einfach – unter anderem mit einem UX-optimierten Startseiten-Design. 

Quelle:

• nngroup.com: Homepage Design: 5 Fundamental Principles

Link-Tipp:

• Usability & UX: Die Checkliste für benutzerfreundliche Online-Auftritte