13 Best Practices für das Website-Design für 2021

Heutzutage können Sie eine Website in wenigen Minuten zum Laufen bringen. Aber es gibt einen Unterschied zwischen einer Website, die live ist und optimiert wird.

Warum ist Design wichtig? Es dauert nur 0,05 Sekunden, bis sich die Leute eine Meinung über Ihre Website bilden. Ja, Sie haben das richtig gelesen – 50 Millisekunden, bis jemand von Ihrer Website weggeblasen oder abgestoßen wird. Der größte Teil dieser Meinung wird aus dem Design gebildet.

Website-Design wirkt sich auch auf Ihre Conversions, Glaubwürdigkeit und letztlich macht oder bricht den Erfolg Ihrer Website. Keine Website ist perfekt, aber Sie sollten sie so weit wie möglich optimieren.

Hier ist auch etwas zu beachten: Nach einer schlechten Erfahrung ist es unwahrscheinlich, dass 88% der Verbraucher zu einer Website zurückkehren. Darüber hinaus ergab eine aktuelle Studie, dass 77% der Agenturen sagen, dass ein schlechtes Website-Design die größte Schwäche ihrer Kunden ist.

Fazit: Wenn Ihr Webdesign nicht für die Benutzererfahrung (UX) optimiert ist, wirkt es sich nachteilig auf Ihren Erfolg aus. Deshalb habe ich diesen Leitfaden geschrieben.

Bei der Gestaltung einer Website spielen viele Faktoren eine Rolle. Dies sind die dreizehn wichtigsten Elemente, die 2021 priorisiert werden müssen. Wenn Sie diese Best Practices befolgen, wird sich die Leistung Ihrer Website drastisch verbessern.

Verwenden Sie diese Checkliste, um sicherzustellen, dass Sie ein erfolgreiches Design haben

1. Text minimieren
2. Anzeigen, nicht erzählen
3. Verwenden Sie kurze Sätze
4. Versuchen Sie es mit kürzeren Absätzen
5. Wählen Sie ein passendes Farbschema
6. Machen Sie Ihren CTA klar
7. Verstärken Sie Aktionen mit Vertrautheit
8. Vereinfachen Sie die Navigation
9. Optimieren Sie Ihr Design für Mobilgeräte
10. Priorisieren Sie SEO
11. Überwachen Sie die Ladegeschwindigkeit Ihrer Seite
12. Führen Sie kontinuierlich A / B-Tests durch

Text minimieren

Füllen Sie Ihre Seiten nicht mit massiven Blöcken Text.

Ich spreche nicht von Blogbeiträgen, die manchmal vertieft werden müssen (wie dieser!). Ich spreche von Ihren Webseiten (z. B. Homepage, Landing Page). Halten Sie den Text hier auf ein Minimum.

Sie möchten Ihren Website-Besuchern alles über Sie, Ihr Unternehmen, Ihre Marke und Ihre Produkte erzählen. Aber Sie müssen lernen, diese Geschichte in nur wenigen Sätzen oder — noch besser — in wenigen Worten zu erzählen.

Zeigen, nicht erzählen

Visuals helfen Ihnen nicht nur, den geschriebenen Inhalt aufzubrechen, sondern können auch eine tiefere Erklärung liefern. Zeigen Sie Ihren Besuchern, worum es Ihnen geht. Sie werden in kürzerer Zeit mehr verstehen.

Harrys Produktseite verkörpert diese beiden ersten beiden Designprinzipien:

Angenommen, Ihre Website verkauft Rasierer, Klingen, Rasierschaum und andere Rasierprodukte für Männer.

Sie betreiben ein Abonnement-Geschäftsmodell und liefern diese Produkte monatlich an Ihre Kunden aus. Das Design Ihrer Rasierer ist sehr schön — sie bestehen aus geschnitztem Hartholz und sind schön genug, um sie zu verschenken.

Anstatt auf all diese Details auf Ihrer Homepage einzugehen, können Sie einfach ein Foto dieser Produkte mit einem Text wie „An Ihre Tür geliefert.“ Sie vermitteln Ihre Botschaft in nur vier Worten.

Natürlich können Sie detaillierter eingehen, je tiefer der Besucher in Ihre Seiten eindringt, aber eine ausführliche Textbeschreibung ist nicht erforderlich.

Verwenden Sie kurze Sätze

Kurze Sätze sind leichter zu lesen.

Bombardieren Sie Besucher nicht mit großen Textblöcken. Sie wissen nicht, wo sie anfangen sollen zu lesen, und können Ihre Inhalte nicht verdauen.

Mischen Sie es. Wenn Sie einen langen Satz benötigen, folgen Sie ihm mit einem kurzen. Abwechslung hilft.

Versuchen Sie kürzere Absätze

Verwenden Sie Absatzumbrüche zu Ihrem Vorteil. Es ist in Ordnung, längere Absätze zu schreiben, aber ich mag es, meine Homepage-Absätze auf ein paar Sätze zu beschränken.

Es ist auch wichtig, es nicht zu übertreiben. Zu viel von einer guten Sache, ist eigentlich eine schlechte Sache.

Beginnen Sie jeden Absatz mit neuen Informationen, damit jemand, der scrollt, schnell erkennen kann, ob er diesen Absatz lesen muss.

Das Entfernen von unnötigem Text auf Ihren Seiten reduziert Unordnung UND legt mehr Wert auf Ihre Handlungsaufforderung.

Das CTA allein in einem eigenen Absatz hervorzuheben, ist wirkungsvoller, als es in einem Haufen Text zu vergraben.

Ein sehr nützliches Werkzeug in dieser Situation sind Kugeln. Anstatt Absätze und langformatiges Schreiben hinzuzufügen, sollten Sie Listen verwenden. Verwenden Sie in diesen Listen Aufzählungszeichen.

Studien zeigen, dass mehr Menschen Listen mit Aufzählungspunkten betrachten als andere Formate. Das liegt daran, dass sie die Scanbarkeit einer Seite verbessern und es Ihnen ermöglichen, die wichtigsten Punkte hervorzuheben, die Sie machen möchten.

Wählen Sie ein Farbschema, das zu Ihrer Markenstrategie passt

Die Farbauswahl, die Sie auf Ihrer Website treffen, ist wichtiger als Sie denken.

Besucher beurteilen Ihre Website in weniger als 90 Sekunden. Das meiste davon ist ein Ergebnis der Farben, die Sie wählen.

Der beste Weg, um das Farbschema Ihrer Website auszuwählen, ist das Branding. Beziehen Sie sich auf Ihr Logo. Passen die Farben auf Ihrer Website zu Ihrem Markenimage?

Hier ist ein Beispiel. Denken Sie an Starbucks.

Wenn Sie diesen Markennamen hören, haben Sie sicher ein Bild in Ihrem Kopf. Vielleicht ist es das Logo, ein Schild oder ein Ladenlokal.

Assoziieren Sie Farben mit diesem Namen? Schauen wir uns nun ihre Website an.

Es ist keine Überraschung, dass sie mit einem grünen Farbschema gingen.

Diese Designwahl passt zu ihrem Logo und Markenimage, was das verstärkt, was Verbraucher bereits mit der Marke verbinden. Indem man die Dinge konsistent hält, gibt es keine Verwirrung. Es wäre seltsam, wenn Sie diese Website besuchen und die Farben gelb und rot wären. Das hat nichts mit ihrer Marke zu tun.

Wir werden im weiteren Verlauf ausführlicher über Verstärkung sprechen.

Machen Sie Ihren CTA klar und offensichtlich

CTAs sollten nicht vergraben werden. Sie müssen groß, mutig und kraftvoll sein und sie müssen sich deutlich von der Aktion abheben, die Ihre Besucher als nächstes unternehmen sollten.

Die meisten Websites verfügen jedoch nicht über eine CTA-Schaltfläche, die in weniger als drei Sekunden erkannt werden kann. Es besteht eine gute Chance, dass Sie in die Gruppe fallen, die länger dauert. Das ist nicht die Kategorie, in der du sein willst.

Ohne eine effektive CTA-Schaltfläche können Sie keine Conversions erzielen.

Ich sehe fast nie einen CTA auf den Innenseiten eines Unternehmens (die Seiten, die erklären, was Ihre Marke tut und was Sie anbieten). Dies ist ein großer Konstruktionsfehler. Sie können nicht erwarten, dass Besucher zu Ihrer Homepage zurückkehren, um zu konvertieren.

Schauen Sie sich diesen CTA von Lackmus an.

Schauen Sie, wie einfach dieses Design ist. Es gibt nur minimalen Text auf dem Bildschirm, sodass die Nachricht klar ist.

Als Ergebnis sticht der CTA „sign up free“ hervor. Tatsächlich hat Lackmus es sogar an mehr als einer Stelle auf dem Bildschirm platziert.

Wo Sie Ihren CTA platzieren sollten, ist von Seite zu Seite unterschiedlich. Zum Beispiel sollten Blog-Posts den CTA oben haben, damit die Leser ihn schnell und auch unten sehen, nachdem sie den Beitrag gelesen haben.

Gehen Sie tiefer: Möchten Sie Ihre CTAs optimieren? Hier sind 11 Möglichkeiten, Ihre Handlungsaufforderungen zu verbessern.

Verstärken Sie Aktionen mit Vertrautheit

Wenn Ihre Nachricht dieselbe ist, sollte Ihr CTA auf jeder einzelnen Seite gleich sein.

Denken Sie darüber nach, wie die Leute auf Ihrer Website navigieren. Selbst wenn Sie einen bestimmten Flow einrichten, landet nicht jeder auf einer Seite und konvertiert in Sekunden. Sie können zuerst ein bisschen stöbern.

Angenommen, Sie haben eine E-Commerce-Website. Sie sollten die CTA-Schaltfläche nicht von Seite zu Seite ändern, was folgendermaßen aussehen würde:

• Startseite: Zur Kasse
• Kategorieseite: Heute kaufen
• Produktseite: Click to purchase

Wenn ein Besucher eine dieser Schaltflächen auf Ihrer Homepage, die andere auf einer Kategorieseite und die dritte auf einer Produktseite sieht, gibt es keine Verstärkung.

Halten Sie stattdessen die Nachrichten und den Stil konsistent. Hier ist ein gutes Beispiel von der Schmuck- und Accessoires-Marke MVMT.

Es spielt keine Rolle, ob Sie auf ihrer Brillen-, Uhren- oder Schmuckseite sind. Sie werden den gleichen „SHOP NOW“ CTA für ihre Produkte sehen.

Jede Seite bleibt auch im Einklang mit ihrer Website insgesamt minimalistisch, Schwarz-Weiß-Design.

Wenden Sie dieses Designprinzip auch auf Ihre Website an.

Es geht über die CTA-Taste hinaus. Die Idee ist, diese Art der Verstärkung mit so vielen Elementen wie möglich zu haben.

Konsistenz in Sprache, Messaging und Design stärkt Ihre Markenidentität und hinterlässt einen bleibenden Eindruck bei Ihren Besuchern.

Vereinfachen Sie die Navigation

Es sollte für einen Website-Besucher nicht schwierig sein, auf Ihrer Website zu finden, wonach er sucht.

Versetzen Sie sich in ihre Lage. Warum besuchen Sie die Website? Wie erreichen Sie diese Aufgabe? Vielleicht möchten Sie etwas kaufen, weitere Informationen erhalten oder sehen, was es zu bieten gibt. Was auch immer der Grund sein mag, wenn Besucher es nicht schnell herausfinden können, werden sie gehen.

Es gibt einfach zu viel Konkurrenz da draußen. Benutzer haben keinen Grund, sich mit unhandlicher Website-Navigation abzufinden. Alles, was sie tun müssen, ist Ihre Website zu verlassen und woanders zu finden, was sie brauchen.

Versuchen Sie nicht, das Rad mit einem komplexen Design neu zu erfinden. Halten Sie sich an das Standardformat.

Beispielsweise platzieren die meisten Websites das Navigationsmenü horizontal oben auf jeder Seite. Wenn sich Ihr Menü an einem anderen Ort befindet, kann dies Ihre Besucher verwirren.

Je weniger Optionen im Menü, desto besser. Andernfalls wird es für die Menschen zu schwierig sein, das zu finden, was sie brauchen. Dieses Konzept ist als Hick-Gesetz bekannt.

Je mehr Optionen Sie jemandem geben, desto länger dauert es, bis er eine Entscheidung trifft. Aus diesem Grund werden komplexe Designs und Navigationen Ihre Conversion-Raten beeinträchtigen.

Es gibt ein berühmtes Experiment dazu, das als Jam-Studie bezeichnet wird und das Paradox der Wahl diskutiert.

Das Experiment wurde in einem örtlichen Lebensmittelgeschäft durchgeführt. Den Verbrauchern wurden präsentiert 24 Marmeladen an einem Tag zu probieren, und sechs Marmeladen am folgenden Tag:

• Das größere Display am ersten Tag zog 60% der Käufer an, aber nur 3% dieser Personen kauften ein.
• Das kleinere Display mit sechs Marmeladen am zweiten Tag zog 40% der Käufer an, aber 30% von ihnen kauften ein.

Durch die Beschränkung der Auswahlmöglichkeiten waren die Conversions zehnmal höher. Das gleiche Konzept kann auf Ihre Website-Navigation angewendet werden.

Eliminieren Sie unnötige Menüoptionen. Anstatt beispielsweise eine „Home“ -Schaltfläche zu haben, verwenden Sie einfach das Website-Logo, um zum Startbildschirm zurückzukehren.

Schauen Sie sich die Homepage von Square an.

Das Design ist super sauber. Die Menüoptionen sind extrem begrenzt. Dies macht es den Besuchern leicht, eine Auswahl zu treffen, die ihren Bedürfnissen entspricht.

Sie werden feststellen, dass nur minimaler Text auf dem Bildschirm angezeigt wird und der CTA klar und offensichtlich ist.

Diese Art von Design macht es für Website-Besucher fast unmöglich, sich beim Navigieren zu verirren oder zu verwirren.

Für diejenigen unter Ihnen, die viele Optionen auf Ihrer Website haben, z. B. einen E-Commerce-Shop, können Sie eine Suchleiste hinzufügen, um den Navigationsprozess zu vereinfachen, ohne ein kompliziertes Menü zu verwenden. Viele Software-Unternehmen setzen ihre Funktionen in einer Registerkarte Features, anstatt eine individuelle Registerkarte für jede Funktion.

Optimieren Sie Ihr Design für mobile Geräte

Mobile ist, wie die Mehrheit der Welt auf das Internet zugreift. Das heißt, wenn Sie nicht für Mobilgeräte optimiert sind, wird Ihre Website keine gute Leistung erbringen.

Schauen Sie sich diese Daten von Hootsuite an:

Suchmaschinen erkennen dies und belohnen Websites, die mobilfreundlich sind. Hier sind ein paar weitere Statistiken, um den Punkt zu treffen.:

• Google weiß, dass 87% der Smartphone-Besitzer ihre Geräte verwenden, um mindestens einmal pro Tag eine Internetsuche durchzuführen.
• 58% aller Google-Suchen werden von einem mobilen Gerät aus durchgeführt
• Das Ergebnis: 70% der Ergebnisse der ersten Seite bei Google sind für mobile Geräte optimiert.

Mobile SEO ist das Wichtigste, was Sie tun können, um bei Google einen guten Rang einzunehmen. Ernst.

Wenn Ihre Website auf einem Smartphone nicht gut aussieht, möchten die Leute nicht dabei bleiben. Stellen Sie also sicher, dass Ihre Website-Designs mobilfreundlich sind.

Tiefer gehen: Möchten Sie erfahren, wie Sie Ihre Website für Mobilgeräte optimieren können? Schauen Sie sich unseren vollständigen Leitfaden für eine mobile freundliche Website an.

Priorisieren Sie SEO

Alles, was Sie auf Ihrer Website tun, muss wieder auf SEO ausgerichtet sein.

Und es reicht nicht aus, hier und da nur Keywords hinzuzufügen. Es ist ein Website-weites System zur Verbesserung von Inhalten und zur unermüdlichen Ausrichtung auf bestimmte Themen, um Ihre Website-Autorität in diesem Bereich aufzubauen.

Eine Zielseite für eine E-Commerce-Website sollte sich beispielsweise auf bestimmte On-Page-Elemente konzentrieren, z:

• Benutzerfreundlichkeit. Wie einfach ist es für Ihre Besucher zu bedienen und zu navigieren.
• Mobiltelefon. Wie Ihre Website auf einem mobilen Gerät aussieht und funktioniert.
• Keyword-Optimierung. Die Wörter und Phrasen, für die Sie rangieren möchten.
• Interne Links. Wie oft Sie auf andere Seiten Ihrer Website verlinken.
• Überschrift. Dies ist oft der größte Text auf einer Webseite. Als solches erledigt es den größten Teil des schweren Hebens auf Ihrer Zielseite.

Erstellen Sie eine XML-Sitemap. Dies erleichtert es Suchmaschinen-Crawlern, Inhalte auf Ihrer Website zu analysieren. Eine Sitemap zeigt den Bots die Position der Seiten auf Ihrer Website, wann die Seite zuletzt aktualisiert wurde, die Aktualisierungshäufigkeit und die Beziehung zu anderen Seiten auf Ihrer Website.

Eine korrekte Sitemap zeigt Google, dass Sie keinen doppelten Inhalt haben, was Ihre SEO-Rankings beschädigen kann.

Wenn Sie Ihre Website entwerfen, gibt es eine MENGE weniger offensichtlicher Elemente, die ebenfalls in das Ranking bei Google einfließen.

Wir haben bereits einige Aspekte besprochen, die Sie auf der Seite selbst verbessern können. Aber andere Elemente umfassen:

• Domäne. Ihre URL ist ziemlich konsequent zu Ihrem Google-Rang. Zu den Schlüsselfaktoren gehören Ihr Keyword in der Domain, wie alt die Domain ist und welche Domainendung Sie haben (z. B. hochwertig wie .com, .net, .gov, .b. org versus nontraditional extensions).
• Qualität der Website. Ihre Website muss für Besucher hilfreich sein. Zu den Schlüsselfaktoren gehören eine ‚Über uns‘ -Seite, eine ‚Kontakt‘ -Seite, wie häufig Sie Ihre Website aktualisieren, wie einfach es ist, auf Ihrer Website zu navigieren, die Betriebszeit (wie oft Ihre Website abstürzt) und SSL-Zertifikate.
• Backlinks. Dies bezieht sich auf die Häufigkeit, mit der Ihre Website von anderen Websites verlinkt wird. Es ist ein entscheidender Faktor für ein gutes Ranking bei Google. Zu den Schlüsselfaktoren gehören die Anzahl der verlinkenden Seiten, die Qualität und Autorität der Websites, die auf Sie verlinken, der Ankertext, mit dem sie auf Sie verlinken, und ob diese Links von .edu- oder .gov-Domains stammen oder nicht.

Überwachen Sie die Ladegeschwindigkeit Ihrer Seite

Ich weiß, was einige von Ihnen denken. Was hat die Ladegeschwindigkeit mit Webdesign zu tun? Alles.

Sicher, die Ladezeiten hängen mit Ihrem Website-Hosting-Plan, Ihrem Server, Ihrem Datenverkehr und solchen Dingen zusammen. Designentscheidungen können sich jedoch auch auf Ihre Ladezeiten auswirken.

Jedes Mal, wenn Sie Ihrer Website ein Element hinzufügen, insbesondere Bilder, Videos und andere komplexe Mediendateien, können Ihre Ladezeiten beeinträchtigt werden. Als solches kann es HTTP-Anfragen verlangsamen.

Langsame Ladezeiten führen zu hohen Abbruchraten. Du kannst das nicht ignorieren. Wenn das Laden Ihrer Seiten zu lange dauert, wird dies ein großes Problem sein.

Darüber hinaus verlassen 25% der Menschen Websites, deren Laden mehr als vier Sekunden dauert. Ja, vier Sekunden. Das ist alles, was Sie haben, oder Sie verlieren 25 von 100 Besuchern. Die meisten Besucher erwarten, dass eine Seite in zwei Sekunden oder weniger geladen wird.

Wie können Sie dies auf Ihr Webdesign anwenden?

• Reduzieren Sie die Dateigrößen Ihrer Bilder
• Nutzen Sie die Browser-Caching-Tools
• Reduzieren Sie HTTP-Anforderungen
• Verbessern Sie Ihre TTFB (Time to first Byte)
• Minimieren und kombinieren Sie Ihre Dateien

Es gibt viele Online-Tools, mit denen Sie sie erreichen diese Dinge. Schauen Sie sich beispielsweise das WordPress Rocket-Plugin als Ressource zum Minimieren und Kombinieren Ihrer Dateien an. Verwenden Sie das Page Speed Insights-Tool von Google, um Ihre Ladezeiten zu überwachen, wenn Sie Designänderungen an Ihrer Website vornehmen.

Führen Sie kontinuierlich A / B-Tests durch

Wenn es um Ihr Website-Design geht, können Sie es nicht einfach einstellen und vergessen.

Wie ich bereits sagte, ist keine Website perfekt. Es gibt immer Möglichkeiten, Ihr Design zu verbessern.

Deshalb müssen Sie A / B-Tests durchführen. Diese ermöglichen es Ihnen, Ihre Website regelmäßig zu verbessern und Elemente zu testen, um zu sehen, was am besten funktioniert und, was noch wichtiger ist, was überhaupt nicht funktioniert.

Fast jedes Element Ihres Website-Designs kann getestet werden. Zum Beispiel könnten Sie zwei verschiedene Zielseiten erstellen, die unterschiedliche CTAs haben, aber ansonsten gleich sind. Wenn eine Zielseite eine bessere Leistung erbringt als die andere, wissen Sie, dass ihr CTA wahrscheinlich die Arbeit erledigt.

Hier sind einige schnelle Vorschläge, die Ihnen den Einstieg in die richtige Richtung erleichtern:

• Testen Sie die Position Ihrer CTA-Schaltfläche
• Testen Sie die Farbe Ihrer CTA-Schaltfläche
• Testen Sie die CTA-Kopie
• Testen Sie die Bilder, die Sie auf Zielseiten verwenden
• Testen Sie die Textvariationen auf dem Bildschirm
• Testen Sie die Größe Ihrer Navigationsleiste

Es gibt so viele Möglichkeiten, ich könnte den ganzen Tag darüber reden. Für diejenigen unter Ihnen, die mit A / B-Tests nicht vertraut sind oder Hilfe benötigen, lesen Sie meinen Leitfaden zu allem, was Sie wissen müssen, bevor Sie mit A / B-Tests beginnen.

Fazit

Zu sagen, dass das Design einer Website wichtig ist, wäre eine Untertreibung. Ihre Webdesign-Entscheidungen beeinflussen letztendlich, ob Ihre Website erfolgreich ist oder nicht.

• Jedermanns Website kann verbessert werden. Verwenden Sie diese Liste als Leitfaden als Ressource, um diese Verbesserungen vorzunehmen.
• Lassen Sie sich nicht überwältigen. Ich sage nicht, dass Sie alle diese Designvorschläge über Nacht implementieren müssen, aber Sie müssen irgendwo anfangen.
• Ich habe diese Ideen nicht aus der Luft gegriffen. Alles auf dieser Liste wird durch Forschung und Statistiken in Bezug auf Designprinzipien unterstützt.

Denken Sie daran: Jede Website ist ein Work in progress. Wenn Sie die Arbeit investieren und Ihre Website immer weiter optimieren, werden Sie Ihren Vorsprung gegenüber Ihren Mitbewerbern verbessern.

Es spielt keine Rolle, ob Ihre Website brandneu ist oder ob es sie schon seit einem Jahrzehnt gibt. Dies sind die Best Practices für das Webdesign, die Sie 2021 befolgen müssen.