Advertisement
  1. Business
  2. Web Design

10 Kurztipps: Wie können Sie das Design Ihrer Website-Homepage verbessern?

by
Read Time:14 minsLanguages:

German (Deutsch) translation by Valentina (you can also view the original English article)

Für den Kleinunternehmer ist Ihre Website-Homepage wie Ihr Schaufenster: Sie lockt Menschen in Ihr Geschäft, gibt ihnen eine Vorstellung davon, was Sie anbieten, und ist ihr Ausgangspunkt, um den Rest Ihres Geschäfts zu erkunden. Dies bedeutet auch, dass das Aussehen Ihrer Website-Homepage sowohl Ihr Branding als auch Ihren Umsatz stark beeinflusst.

Im Gegensatz zu einem Schaufenster sollte die Verbesserung Ihrer Website-Homepage jedoch nicht viel kosten, insbesondere wenn Sie ein kleines Unternehmen führen. Es gibt viele Änderungen an der Website-Homepage, die Sie vornehmen können, ohne viel Geld auszugeben oder mehrere Wochen auf eine Neugestaltung zu warten.

Website homepage designWebsite homepage designWebsite homepage design
Das Design der Website-Homepage ist wichtig für Ihren Geschäftserfolg (Bildquelle).

In diesem Tutorial zeigen wir Ihnen, wie Sie eine Website-Homepage erstellen, die Kunden anzieht. Sie werden Ideen für das Design der Website-Homepage untersuchen und einige der besten Beispiele für die Homepage der Website ansehen.

Lassen Sie uns in diese Tipps zum Design der Website-Homepage eintauchen.

1. Verwenden Sie Leichte Bilddateien

Schöne, qualitativ hochwertige Bilder sind ein Muss, wenn Sie möchten, dass Ihre Produkte so gut wie möglich aussehen. Aber es gibt einen wichtigen Kompromiss: Je größer das Bild oder je höher die Auflösung, desto länger dauert es normalerweise, bis diese Bilder für Ihre Besucher geladen sind. Je länger die Ladezeiten sind, desto wahrscheinlicher ist es, dass Ihre Besucher abreisen.

Laut einer Untersuchung von Google werden 53 Prozent der Website-Besuche abgebrochen, wenn das Laden einer mobilen Website länger als drei Sekunden dauert. Tatsächlich sagt ihr Modell voraus, dass die Wahrscheinlichkeit, dass Ihre Besucher die Seite verlassen, umso höher ist, je länger das Laden Ihrer Seite dauert. Dieselbe Untersuchung ergab, dass es einen großen Unterschied machen würde, wenn Websitebesitzer ihre Bilder einfach komprimieren würden.

Page load time statisticsPage load time statisticsPage load time statistics
Je länger das Laden einer Webseite dauert, desto wahrscheinlicher ist es, dass Besucher abprallen.

Finden Sie die Balance zwischen der Bereitstellung schöner Bilder und einer schnellen Ladestelle. Verwenden Sie das PageSpeed Insights-Werkzeug von Google, um festzustellen, ob Ihre Bilder weiter komprimiert werden müssen. In diesem Fall können Sie sie mit einem Werkzeug wie TinyPNG weiter komprimieren oder in diesen Handbüchern mehr über die Bildoptimierung erfahren:

2. Haben Sie einen einzigen, prominenten Aufruf zum Handeln

Wenn ein Besucher zum ersten Mal auf Ihrer Homepage ankommt, sollte keine Unklarheit darüber bestehen, wie sein nächster Schritt aussehen soll. Hier kommt Ihr Call to Action (CTA) ins Spiel. Ein CTA wird normalerweise in Form einer großen Schaltfläche angezeigt. Wenn Sie darauf klicken, werden Ihre Homepage-Besucher in einen Lead oder einen Verkauf umgewandelt.

Stellen Sie sicher, dass sich Ihr Aufruf zum Handeln über der Falte befindet - dem oberen Teil Ihrer Homepage, der ohne Scrollen sichtbar ist. In einer Fallstudie erhöhte ein Online-Shop, der Trampoline verkauft, seine Conversion-Rate um 11 Prozent, indem er lediglich einen CTA über dem Falz hinzufügte.

Sie sollten Ihren Aufruf zum Handeln jedoch nicht nur auf diesen Bereich beschränken. Sie können es im Rest Ihrer Homepage-Kopie wiederholen. Zum Beispiel hebt Rumpl, ein Online-Shop, der Spezialdecken verkauft, sein Produkt über dem Falz mit einem Aufruf zum Handeln hervor.

call to action placementcall to action placementcall to action placement
Platzieren Sie Ihre CTAs über der Falte, aber wiederholen Sie sie auch auf der gesamten Homepage.

Wenn Sie jedoch weiter nach unten scrollen, wird eine weitere CTA-Schaltfläche angezeigt, mit der Sie dieses Produkt in Ihren Warenkorb legen können. Während Rumpl andere Artikel auf seiner Homepage anzeigt, hat keiner außer dem vorgestellten Produkt einen prominenten CTA. Besucher konzentrieren sich fast ausschließlich auf den Kauf des vorgestellten Produkts.

Vermeiden Sie andere störende Elemente auf Ihrer Website-Homepage. Das Hauptaugenmerk sollte auf dem Aufruf zum Handeln liegen. Wenn Sie Navigationselemente, Schaltflächen für soziale Medien und andere Elemente auf der Homepage der Website platzieren müssen, stellen Sie sicher, dass sie die Augen Ihrer Besucher nicht von den wichtigsten CTA-Schaltflächen ablenken.

Wenn Sie auf Ihrer Website-Startseite keinen starken Aufruf zum Handeln haben, sehen Sie sich einige dieser aufmerksamkeitsstarken Schaltflächenvorlagen von Graphic River an.

3. Klären Sie Ihr Wertversprechen

Sie müssen sich nicht nur darüber im Klaren sein, welche Maßnahmen Ihre Besucher ergreifen müssen, sondern auch, warum sie diese Maßnahmen ergreifen müssen. Verbraucher aller Altersgruppen legen Wert auf Klarheit in der Online-Marketing-Kommunikation, mehr als auf großartiges Design oder perfekte Grammatik und Rechtschreibung. Wenn es also um die Kopie Ihrer Website-Homepage geht, fragen Sie sich Folgendes:

  • Wissen Besucher, was sie als Gegenleistung für das Klicken auf Ihren CTA erhalten?
  • Enthalten Ihre Überschriften, Unterüberschriften und Textkopien einen Hauptschmerzpunkt und die von Ihnen bereitgestellte Lösung?
  • Können Besucher Ihre Nachricht problemlos an andere wiederholen?
study on clarity in company communicationsstudy on clarity in company communicationsstudy on clarity in company communications
Verbraucher legen großen Wert auf Klarheit der Nachrichten gegenüber Design, Länge und grammatikalischer Korrektheit.

Wenn Sie Ihr Wertversprechen auf der Kopie Ihrer Website-Homepage verdeutlichen möchten, probieren Sie die Techniken in den folgenden Beispielen aus:

1. Wiederholen Sie das Wertversprechen

Wiederholen Sie auf Ihrer Homepage die Vorteile, die Ihre Besucher erhalten, wenn Sie auf Ihren CTA klicken. Sie können verschiedene Wörter und Grafiken verwenden, um diese Vorteile zu wiederholen. Im folgenden Beispiel wird Gossamer Gear, ein Online-Shop, der leichte Reiseausrüstung verkauft, in der Überschrift ausdrücklich auf sein Wertversprechen für "ultraleichte Ausrüstung" hingewiesen. Es ist auch in ihrem Firmenlogo ("Nehmen Sie weniger. Tun Sie mehr.") angezeigt und das Bannerfoto zeigt zwei Wanderer, die Rucksäcke tragen, die kleiner als gewöhnlich sind.

Clear website homepage value proposition exampleClear website homepage value proposition exampleClear website homepage value proposition example
Wiederholen Sie Ihr Wertversprechen an mehreren Stellen auf Ihrer Website-Homepage, einschließlich visueller Elemente.

2. Geben Sie an, warum der Vorschlag wichtig ist

Sie können angeben, dass Ihr Unternehmen qualitativ hochwertige Produkte herstellt, einen guten Kundenservice bietet oder sozial verantwortlich ist. Sie können es für Ihr Publikum noch klarer machen, indem Sie genau angeben, warum. Der Bekleidungshändler United By Blue betont auf seiner Homepage seine soziale Verantwortung sowohl in seinem Slogan ("Verantwortliche langlebige Güter") als auch in seinem Inhalt (Links zu seinen Blog-Posts zur Reinigung öffentlicher Räume und seinen verantwortungsbewusst gebauten Geschäften). Die Kopie der Homepage der Website geht jedoch noch einen Schritt weiter, indem die Bemühungen des Unternehmens anhand der Zahlen angegeben werden.

Example of specificity in homepage copyExample of specificity in homepage copyExample of specificity in homepage copy
Geben Sie genau an, wie Sie Ihr Wertversprechen erfüllen.

Überlegen Sie, wie Sie Ihr Wertversprechen genauer ausdrücken können. Wenn Ihr einzigartiges Wertversprechen darin besteht, dass Sie Kunden dabei helfen, Geld zu sparen, notieren Sie, wie viel sie sparen könnten. Wenn Ihr Unternehmen stolz darauf ist, langlebige Produkte herzustellen, geben Sie an, wie viele Jahre die Produkte in der Regel halten, oder unterziehen Sie die Produkte verschiedenen Tests und zeigen Sie Ihrem Publikum die Ergebnisse.

4. Machen Sie das Kopieren Ihrer Website-Homepage einfach

Unabhängig davon, ob Ihre Website-Homepage eine lange oder eine kurze Kopie enthält, ist es wichtig, dass der Text leicht zu scannen ist. Dies liegt daran, dass Benutzer dazu neigen, Text online zu scannen und zu überfliegen. Eine Studie der Nielsen Norman Group zeigt, dass nur 16 Prozent der Menschen Online-Text Wort für Wort lesen. In einer neueren Studie stellten sie außerdem fest, dass Menschen dazu neigen, schweren Text in einem F-förmigen Muster zu scannen, was dazu führt, dass sie wichtige Informationen übersehen.

F-shaped pattern for reading text onlineF-shaped pattern for reading text onlineF-shaped pattern for reading text online
Große Textblöcke auf einer Homepage können dazu führen, dass Benutzer sie in einem F-förmigen Muster scannen.

Wenn Sie nicht möchten, dass Ihre Besucher Ihre überzeugenden Worte oder die wichtigsten Funktionen Ihres Produkts verpassen, stellen Sie sicher, dass der Text auf Ihrer Website-Homepage leicht zu scannen ist. Hier sind einige Tipps, denen Sie folgen können:

  • Teilen Sie Ihren Homepage-Inhalt mit Unterüberschriften auf.
  • Verwenden Sie Listen, um Details zu skizzieren, anstatt sie in Absätzen zu beschreiben.
  • Fügen Sie Ihren Bildern Bildunterschriften hinzu.
  • Verwenden Sie kurze Sätze.
  • Wenn Sie die Informationen schneller visuell darstellen können, tun Sie dies, anstatt sich ausschließlich auf das Kopieren zu verlassen.
  • Vermeiden Sie kleine Schriftgrößen.

Ein gutes Beispiel für dieses Prinzip ist Barebones Living, das Outdoor-Ausrüstung verkauft. Anstatt ihre Produktkategorien aufzulisten und sie mit langen Beschreibungen zu erläutern, heißt es in der Kopie lediglich: "Wie verbringen Sie Zeit im Freien?" Bilder und Kategorienamen mit einem Wort machen das schwere Heben. Auch ohne die Wörter zu lesen, können Sie sagen, auf welches Feld Sie klicken sollen. Schauen wir uns das Beispiel auf der Homepage der Website an:

Scannable product categoriesScannable product categoriesScannable product categories
Ergänzen Sie die einfache Sprache mit einer starken Grafik für eine einfach zu scannende Website-Homepage.

Die Homepage der Website verwendet auch Unterüberschriften. Im Screenshot unten die Überschrift "Warum Barebones?" Es folgen kleinere Unterüberschriften wie "Farmers in Africa", "Providing Shelter in Nepal" und "Providing Food in Utah". Unterüberschriften wie diese bedeuten, dass Besucher eine konkrete Vorstellung von den Projekten des Unternehmens haben, auch wenn sie den kurzen Text nicht lesen.

Use of subheads in scannable textUse of subheads in scannable textUse of subheads in scannable text
Verwenden Sie Unterüberschriften, damit Besucher den Kern Ihres Inhalts erhalten, auch wenn sie die Absätze überspringen.

5. Haben Sie Leute in Ihren Fotos

Selbst wenn Sie das fotogenste Produkt auf dem Markt haben, ist es am besten, Menschen in Ihren Produktfotos zu haben - insbesondere auf Ihrer Website-Homepage. Tests mit Visual Website Optimizer zeigen, dass die Verwendung menschlicher Fotos anstelle von Abbildungen oder Symbolen die Conversion-Raten steigern kann.

Verwenden Sie vor allem echte Fotos Ihrer Kunden oder Ihrer Mitarbeiter. Laut Untersuchungen der Nielsen Norman Group ignorieren Website-Besucher Stock-Fotos von Personen.

Ein gutes Beispiel dafür ist der Online-Saatgutladen Renee's Garden. Auf ihrer Homepage finden Sie mehrere Fotos von Menschen auf ihrer Farm, Fotos von Menschen, denen sie Samen gespendet haben, und ein Foto des Besitzers. Abgesehen von diesen Fotos, die die Augen auf sich ziehen, bauen sie auch Vertrauen auf, da Sie die Menschen hinter dem Geschäft sehen können. Diese sofortige Vertrauensbildung ist für Klein- und Kleinstunternehmen unerlässlich, die keinen so guten Ruf haben wie etabliertere Marken.

Example of real people in photosExample of real people in photosExample of real people in photos
Die Verwendung von Fotos von echten Kunden und Mitarbeitern kann dazu beitragen, Vertrauen aufzubauen und die Conversions zu steigern.

6. Risiko reduzieren

Da kleine Online-Unternehmen nicht so bekannt sind wie größere Marken, besteht für Verbraucher möglicherweise das Risiko, dass sie bei ihnen kaufen, verglichen mit dem Kauf in den Online-Shops von Amazon oder Walmart. Aus diesem Grund müssen Sie potenzielle Risiken für Ihren Kunden ausschließen.

W&P Design, ein Design-Shop aus Brooklyn, macht in seiner Kopie über der Falte deutlich, dass sie "Free Returns" anbieten. Kein Ärger. "Wenn ein Kunde zögert, das Produkt zu kaufen, weil er das Produkt möglicherweise nicht mag, weiß er im Voraus, dass er es ohne Probleme des Unternehmens und ohne zusätzliche Gebühren zurückgeben kann. Hier ein Beispiel auf der Homepage der Website:

Return policy on website homepage to reduce riskReturn policy on website homepage to reduce riskReturn policy on website homepage to reduce risk
Das Anzeigen eines Rückgaberechtes auf Ihrer Website-Homepage reduziert das Kundenrisiko.

Hand in Hand mit der Reduzierung des Risikos Ihrer Kunden zeigt sich, dass Sie Ihre Versprechen einhalten. Hier kommen soziale Beweise wie Bewertungen, Fallstudien und Testimonials ins Spiel. Zeigen Sie diese auf Ihrer Website-Homepage an, wenn Sie möchten, dass Kunden Ihrem Unternehmen vertrauen.

Wynd, der intelligente Luftreiniger verkauft, erreicht dies, indem auf der Startseite über der Falte ein Tab "Bewertungen" angezeigt wird. Wenn Sie auf die Registerkarte klicken, werden Produktbewertungen angezeigt. Diese Bewertungen werden auch in einem separaten Abschnitt auf der Homepage der Website erneut angezeigt.

Customer reviews on website homepageCustomer reviews on website homepageCustomer reviews on website homepage
Durch Hinzufügen von Bewertungen auf Ihrer Website-Homepage können Sie das Risiko für Ihre potenziellen Kunden minimieren.

Ausführliche Hinweise zum Sammeln und Verwenden von Feedback auf Ihrer Website finden Sie in den folgenden Handbüchern:

7. Zeigen Sie Ihr Navigationsmenü an

Während es ordentlich und modern erscheint, die Navigation Ihrer Website-Startseite mit einem Dropdown-Menü oder einem Hamburger-Symbol auszublenden, ist es für Benutzer weniger wahrscheinlich, im Rest Ihrer Website zu navigieren. Untersuchungen der Nielsen Norman Group haben ergeben, dass die Auffindbarkeit der Seiten einer Site halbiert wird, wenn Navigationsleisten ausgeblendet werden. Es dauert länger, bis Besucher die anderen Schlüsselseiten auf Ihrer Website finden.

Time to navigation chartTime to navigation chartTime to navigation chart
Besucher benötigen länger, um eine Website mit versteckter Navigation zu durchsuchen.

Wenn Ihre Website zu viele Seiten enthält und Sie nicht alle Seiten ohne Überfüllung in Ihr Homepage-Menü aufnehmen können, können Sie sich für die "Kombinationsnavigation" entscheiden. In diesem Format gibt es statische Menü-Links zu wichtigen Seiten Ihrer Site, der Rest wird jedoch über ein Dropdown-Menü angezeigt. Dies war der Ansatz von Johnny's Selected Seeds, einem Online-Saatguthändler. Da sie Dutzende von Samen in ihrem Online-Shop haben, listet die Hauptnavigation nur die Hauptkategorien auf. Die anderen Unterkategorien werden in einem Dropdown-Menü angezeigt.

Example of combo navigation menuExample of combo navigation menuExample of combo navigation menu
Wenn Ihr Online-Shop zu viele Artikel enthält, listen Sie nur die Hauptkategorien in Ihrem Menü auf. Wichtig ist, dass es ein sichtbares Menü gibt.

8. Versuchen Sie es mit Live Chat

Eine Sache, mit der Sie experimentieren möchten, ist die Verwendung von Live-Chat auf Ihrer Website. Live-Chat ist eine Funktion, mit der Website-Besucher in Echtzeit mit Ihnen oder Ihren Mitarbeitern chatten können. Sie können den Live-Chat verwenden, um ihre vorläufigen Fragen zu beantworten, ihnen beim Navigieren auf Ihrer Website zu helfen oder direkt einen Verkauf zu tätigen. Für Kunden ist dies einfacher als ein Anruf oder eine E-Mail an Ihr Unternehmen, da sie beim Surfen auf der Website mit Ihnen chatten können.

JSI Signs, ein Online-Shop für Schilderzubehör, verwendet Live-Chat, um das Volumen der Anrufe zu reduzieren, die sie in ihrem Geschäft erhalten. Dies hilft auch der Eigentümerin beim Multitasking, da sie Fragen von potenziellen Kunden beantworten kann, wenn sie andere Aufgaben erledigt. Schauen wir uns den Chat in diesem Homepage-Beispiel an:

Example of live chat on a small business websiteExample of live chat on a small business websiteExample of live chat on a small business website
Der Live-Chat auf Ihrer Website-Homepage kann Ihnen dabei helfen, Ihren Website-Besuchern Produkte zu erklären und Ihre Conversions zu steigern.

Das Hinzufügen von Live-Chat zu Ihrer Website-Homepage bietet jedoch noch weitere wichtige Vorteile. Laut einer Studie von Apex Chat kann der Live-Chat die Conversions um bis zu 40 Prozent steigern. Es bietet auch die höchste Kundenzufriedenheit: 73 Prozent der Verbraucher sind mit dem Service zufrieden, den sie durch Live-Chat erhalten. E-Mail belegt mit einer Zufriedenheitsrate von 61 Prozent den zweiten Platz.

live chat satisfaction levelslive chat satisfaction levelslive chat satisfaction levels
Kunden sind mit Live-Chat-Support zufrieden, mehr als mit E-Mail, Telefon oder sozialen Medien.

Wenn Sie daran interessiert sind, den Live-Chat auszuprobieren, finden Sie hier einige Live-Chat-Dienste, die Sie verwenden können:

9. Einbetten eines Videos

Das Hinzufügen eines Videos zu Ihrer Homepage kann die Conversions erhöhen. Dies gilt laut einer Studie von Treepodia für mehrere Produktkategorien. Aus diesem Grund kann es hilfreich sein, wenn Sie Ihrer Website-Homepage sogar einen Videoclip hinzufügen. Halten Sie es kurz, da das Engagement tendenziell abnimmt, wenn das Video zu lang ist. Laut Statistiken von Wistia ist es am besten, das Video kürzer als zwei Minuten zu halten.

Study increase in video conversion ratesStudy increase in video conversion ratesStudy increase in video conversion rates
Bei den oben genannten Produkttypen stiegen die E-Commerce-Conversion-Raten durch Hinzufügen von Videos.

Der Inhalt des Videos kann eine Erklärung, ein Kundenreferenz, eine Produktdemo oder sogar eine kurze Tour durch Ihr Geschäft sein. Es kann Live-Action oder animiert sein, was auch immer Ihren Anforderungen und Ihrem Budget entspricht. Im folgenden Beispiel hat Four Sigmatic, ein Unternehmen für Pilzkaffee, auf seiner Homepage ein Video, in dem der Gründer die Verwendung seines Produkts demonstriert. Video ist besonders wichtig für ungewöhnliche Produkte wie Pilzkaffee, mit denen die meisten Menschen möglicherweise nicht vertraut sind.

Embedded video on website homepage exampleEmbedded video on website homepage exampleEmbedded video on website homepage example
Das Hinzufügen eines Produktdemovideos kann beim Verkauf eines ungewöhnlichen Produkts hilfreich sein.

10. Vereinfachen

Wenn Sie aufgrund der obigen Liste der Meinung sind, dass die Verbesserung Ihrer Website-Startseite das Hinzufügen weiterer Elemente bedeutet, ist dies nicht unbedingt der Fall. Jedes neue Element, das Sie hinzufügen, kann von Ihrer Hauptnachricht ablenken und zum Handeln aufrufen. Außerdem kann es bei Ihren Besuchern einen schlechten Eindruck hinterlassen.

Untersuchungen von Google zeigen, dass eine hohe visuelle Komplexität - das Vorhandensein vieler Elemente - die Attraktivität Ihrer Website für Besucher beeinflussen kann. Websites mit geringer visueller Komplexität erwiesen sich als am attraktivsten, selbst wenn Personen nur 17 Millisekunden lang diesen Websites ausgesetzt waren. Mit anderen Worten, der erste Eindruck Ihrer Website-Homepage zählt, und dieser Eindruck sollte so einfach wie möglich sein. Beachten Sie dies, wenn Sie die oben genannten Empfehlungen befolgen. Ersetzen Sie unnötige oder ineffektive Elemente, anstatt neue Dinge hinzuzufügen, um sie zu kompensieren.

Eine Website-Homepage, die die Geschäftsentwicklung fördert

Sie haben gerade etwas über Designideen für die Website-Homepage gelernt. Wir haben einige Beispiele für Website-Homepages untersucht. Sie sollten nun einige Ideen haben, wie Sie die Homepage Ihrer Website effektiver gestalten können.

Denken Sie daran, dass Ihre Website-Homepage niemals nur ein dekorativer Bestandteil Ihrer Marketingstrategie sein sollte. Stattdessen sollte es eine aktive Rolle bei der Umsatzsteigerung und der Wiederholung Ihrer Markenbotschaft an potenzielle Kunden spielen.

Wenn Ihre Website-Homepage dieses Versprechen nicht zu erfüllen scheint, arbeiten Sie an einigen der oben empfohlenen Änderungen. Sie können mit denjenigen beginnen, die für Sie am einfachsten zu implementieren sind. Durch diese einfachen Änderungen wird Ihre Website-Homepage möglicherweise sogar zu einem Ihrer wichtigsten Kundenakquisitionskanäle.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.