• UI & UX

Pareto-Prinzip im Webdesign - mit der 80/20-Regel eine effektivere Website gestalten

  • Lene Wandrey
  • 10 min read
Pareto-Prinzip im Webdesign - mit der 80/20-Regel eine effektivere Website gestalten

Das Problem des Perfektionismus im Webdesign

Perfektionismus kann für viele Grafik- und Webdesigner eine Herausforderung sein. Das Streben nach Exzellenz ist bewundernswert, kann aber auch zu Frustration führen, wenn man ständig Änderungen und Optimierungen vornimmt, bis jedes Element der Website perfekt ist. Für viele Designer ist es leicht, sich in den Designprozess zu vertiefen und bei der Auswahl von Schriftarten, Farbpaletten und dem Grübeln über Hunderte von pixelgenauen Designentscheidungen die Zeit aus den Augen zu verlieren. Natürlich ist es wichtig, gute Arbeit abzuliefern, aber als Designer verliert man leicht den Blick dafür, was das bedeutet. Bei einer Website sollte es nicht um die Ziele des Designers gehen, sondern darum, das gewünschte Ergebnis des Kunden zu erreichen und gleichzeitig die Grenzen von Zeit, Ressourcen und Energie auszugleichen. Wenn es keine Einschränkungen gibt, kann eine Website leicht übertechnisiert, langsam und mit zu vielen Elementen und Funktionen ausgestattet sein, die die Benutzer verwirren. Es ist auch schwierig, alle Funktionen in der begrenzten Zeit unterzubringen, so dass dem Designer einfach die Zeit davonläuft, und wenn er es nicht schafft, eine gute Website innerhalb der Frist abzuliefern, ist das für alle Beteiligten sehr stressig.

Was ist das Pareto-Prinzip?

Die "80/20-Regel", auch Pareto-Prinzip genannt, besagt, dass 80 % der Wirkungen auf 20 % der Ursachen zurückzuführen sind. Das Pareto-Prinzip wurde erstmals von dem italienischen Wirtschaftswissenschaftler Vilfredo Pareto im Jahr 1895 eingeführt, als er feststellte, dass 80 % des italienischen Reichtums im Besitz von nur 20 % der Bevölkerung waren. Er stellte auch fest, dass 20 % der Erbsenschoten in seinem Garten 80 % der Erbsen ergaben! Das Pareto-Prinzip besagt, dass einige wenige Schlüsselelemente für den größten Teil eines bestimmten Ergebnisses verantwortlich sind. Seitdem wurde es auf viele andere Bereiche angewandt, u. a. auf die Geschäftswelt, die Wirtschaft und die Psychologie, und es kann sogar für das tägliche Leben praktisch sein.

Dies lässt sich auch gut auf kleinere Beispiele übertragen: Ist Ihnen schon einmal aufgefallen, dass der Großteil Ihres Einkommens von einer Handvoll immer gleicher Kunden stammt? Oder dass Sie scheinbar immer die gleichen Kleidungsstücke tragen, während der größte Teil Ihrer Garderobe nicht benutzt wird? Auch wenn das Verhältnis nicht immer genau 80:20 ist und es immer Ausnahmen gibt, so ist es doch ein großartiges Instrument, um herauszufinden, welche Maßnahmen den größten Einfluss auf den Erfolg haben, und diese entsprechend zu priorisieren.

Das Pareto-Prinzip in Webdesign und digitalem Marketing

Bei der Anwendung des Pareto-Prinzips auf das Webdesign wird davon ausgegangen, dass die meisten Ergebnisse durch eine kleine Anzahl von Schlüsselfunktionen erzielt werden. Im Marketing werden einige Kampagnen viel besser abschneiden als andere. Um das beste Ergebnis zu erzielen, ist es sinnvoll, sich zuerst auf diese wenigen Schlüsselfunktionen zu konzentrieren und sicherzustellen, dass sie die meiste Aufmerksamkeit erhalten, während die weniger wichtigen Teile schneller erledigt werden können. Eine Möglichkeit, das Pareto-Prinzip zu nutzen, besteht darin, sich auf die Benutzererfahrung und die Benutzerfreundlichkeit zu konzentrieren - wenn Sie darauf achten, wie die Benutzer mit Ihren Online-Inhalten interagieren und sicherstellen, dass sie das finden, was sie brauchen, werden Sie wahrscheinlich größere Erfolge erzielen, als wenn Sie sich nur auf die Ästhetik konzentrieren würden. Es lehrt uns, dass Perfektion nicht immer notwendig ist und dass es möglich ist, eine noch effektivere Website zu erreichen, indem man die wichtigen 20 % der Funktionen optimiert.

Wir haben uns zum Beispiel gerade die Verkehrsdaten eines kleinen E-Commerce-Shops angesehen, der handgefertigte Produkte verkauft, und mehrere Pareto-Trends festgestellt. Zum Beispiel greifen fast alle Besucher über Mobiltelefone auf die Website zu. Die meisten Produktverkäufe entfallen auf eine kleine Anzahl von Kategorien. Facebook war die wichtigste Quelle für den Social-Media-Verkehr. Bei der Betrachtung einer Heatmap der Produktseite zeigt sich, dass einige Bereiche ein höheres Engagement aufweisen. Das typische F-Muster ist in gewisser Weise zu erkennen, mit Häufungen von Interaktionen in der oberen Reihe und auf der linken Seite der Seite.

Devices popularity

Dashboard with website analytics data

Was kann mit diesen Informationen getan werden, um den Verkauf für diesen Kunden zu verbessern?

In diesem Beispiel wäre der schnellste Gewinn die Verbesserung der mobilen Erfahrung dieser Website, die ursprünglich für den Desktop entwickelt wurde. Heatmaps aller Seiten könnten untersucht werden, um mehr über die Präferenzen der Nutzer zu erfahren. So könnten beispielsweise die am häufigsten angeklickten Fragen aus dem FAQ-Bereich auf die Startseite verschoben werden, anstatt sie zu verstecken. Gewinnbringende Produkte könnten in den Seitenbereichen präsentiert werden, in denen die meisten Klicks zu erwarten sind.

Beginnen Sie immer mit dem "Warum".

Always start with the Why (Bildquelle: Envato Elements)

Aus meiner Erfahrung in der Branche habe ich festgestellt, dass viele Designer das Briefing gerne annehmen und mit der Arbeit an den Entwürfen beginnen, auch wenn ihnen wichtige Informationen zum Zweck des Projekts fehlen. Vielleicht dachte die Person, die das Briefing verfasst hat, dass diese Informationen bereits vorausgesetzt wurden, oder der Kunde hat sie nicht klar und deutlich formuliert. Nehmen Sie sich einen Moment Zeit, um einen Schritt zurückzutreten, bevor Sie mit der Arbeit beginnen. Ohne ein klares Verständnis dafür, warum Sie tun, was Sie tun, wird Ihr Webdesign keine Richtung haben. Ihre Website mag für Sie und sogar für den Kunden gut aussehen, aber trotz der vielen Stunden, die Sie daran gearbeitet haben, wird das Ergebnis enttäuschend sein, wenn es nicht die vom Kunden erwarteten Ergebnisse erzielt.

Treffen Sie Ranktracker

Die All-in-One-Plattform für effektives SEO

Hinter jedem erfolgreichen Unternehmen steht eine starke SEO-Kampagne. Aber bei den zahllosen Optimierungstools und -techniken, die zur Auswahl stehen, kann es schwierig sein, zu wissen, wo man anfangen soll. Nun, keine Angst mehr, denn ich habe genau das Richtige, um zu helfen. Ich präsentiere die Ranktracker All-in-One-Plattform für effektives SEO

Wir haben endlich die Registrierung zu Ranktracker absolut kostenlos geöffnet!

Ein kostenloses Konto erstellen

Oder melden Sie sich mit Ihren Anmeldedaten an

Fragen Sie sich selbst: Warum gibt es diese Website? Wer werden die Endnutzer der Website sein und wie werden sie auf der Website interagieren? Wie wird die Website Wert und Erfolg für Ihren Kunden schaffen? Wie wird der Kunde diesen Erfolg messen? Wie wird die Website Besucher anziehen und Leads einfangen? Wenn Sie diese Fragen beantworten können und das "Warum" verstehen, fällt es Ihnen leichter, die Prioritäten für das "Was" und "Wie" der Designelemente zu setzen. Wenn Sie sich das gewünschte Ergebnis vorstellen können, können Sie Ihre Energie auf die wichtigsten Bereiche konzentrieren, um dieses Ziel zu erreichen.

Anwendung des Konzepts des "Minimum Viable Product" bei der Webgestaltung

Bei so vielen Entscheidungen, die bei der Gestaltung einer Website zu treffen sind, kann es schwierig sein, zu wissen, wo man anfangen soll. Beim Minimum-Viable-Product-Ansatz (MVP) werden nur die Kernelemente einer Website sofort entwickelt und dann im Laufe der Zeit durch Kundenfeedback kontinuierlich verfeinert. Dies geschieht in der Regel, um Kosten und Zeit zu sparen, oder wenn eine Geschäftsidee auf vielen Annahmen beruht. Anstatt alles auf einmal zu versuchen, können die Entwickler die Funktionen anhand der Kundenbedürfnisse priorisieren und so schnell wie möglich Prototypen erstellen. Auch wenn Sie nicht unter Zeit- oder Budgetdruck stehen, ist die Website als MVP eine fantastische Möglichkeit, das Pareto-Prinzip anzuwenden und perfektionistische Tendenzen zu bekämpfen. Es ist hilfreich, sich bewusst zu machen, dass man später immer noch weitere Funktionen hinzufügen kann, dass man sich aber im Moment auf die wichtigsten Elemente konzentrieren sollte.

Die Gestaltung für mobile-first kann Ihnen helfen, Ihre Website zu vereinfachen

Wenn Sie eine Website entwerfen, möchten Sie den Nutzern eine effektive und intuitive Erfahrung bieten. Der beste Weg, dies zu erreichen, ist ein "Mobile-First"-Designansatz. Bei diesem Konzept geht es darum, Websites zu erstellen, die zuerst für mobile Geräte optimiert werden, und nicht um Desktop-Websites, die für mobile Geräte angepasst werden. Warum ist dies notwendig? Laut techjury.net werden im Jahr 2022 60,66 % des Website-Verkehrs auf Mobiltelefone entfallen, während Desktops und Tablets zusammen 39,34 % ausmachen. Dies kann in verschiedenen Branchen und auf verschiedenen Websites variieren, aber der Trend ist erwähnenswert. Indem Sie Ihr Design auf die mobile Version der Website ausrichten, können Sie die Erfolgsaussichten zu Ihren Gunsten steigern.

Sobald Sie mit der Gestaltung für mobile Geräte beginnen, werden Sie schnell feststellen, dass weniger Platz für Texte und Unordnung vorhanden ist. Es ist ziemlich schwer, sich daran zu gewöhnen, wenn man lange Zeit für Desktops gestaltet hat. Aber dieser Ansatz passt gut zum Pareto-Prinzip, da er Ihnen hilft, die Inhalte mit der größten Wirkung auszuwählen. Dies hat zwei Vorteile: Ihre Website wird für die von den Nutzern bevorzugte mobile Plattform optimiert, und wenn Sie sie für den Desktop anpassen, wird sie visuell modern und sauber aussehen. Sie werden Ihre Website später immer noch an den Desktop anpassen müssen, aber wenn Sie mit dem Mobile-First-Ansatz arbeiten, wird dies viel einfacher, da Sie bereits ein vereinfachtes Design haben.

Recherchieren und analysieren Sie die Websites von Mitbewerbern

Wenn es um Webdesign geht, denken wir bei der Recherche oft an andere inspirierende Websites oder Vorlagen mit schönen Designelementen. Aber Forschung für Webdesign geht über das bloße Bewundern der Ästhetik anderer Websites hinaus. Um eine effektive Website zu erstellen, muss man verstehen, wie Menschen das Internet nutzen, wie Benutzer mit verschiedenen Designs interagieren und wie Inhalte organisiert sind. Indem wir den Kunden um Analysedaten bitten oder ein Monitoring-Tool wie Ranktracker verwenden, können wir besser erkennen, in welchen Bereichen Verbesserungsmöglichkeiten bestehen, um eine leistungsfähigere Website zu erstellen.

Bei der Recherche sollten Sie die bestehenden Branchenstandards, die Zielgruppen und die Präferenzen der Nutzer durch eine Analyse der Wettbewerber untersuchen. Sie können Konkurrenten ausfindig machen, indem Sie den Kunden fragen oder eigene Recherchen anstellen und sehen, welche Websites an der Spitze stehen. Sobald Sie einige Konkurrenten ermittelt haben, brauchen Sie eine zuverlässige Quelle für Daten über sie. Eine meiner Lieblingsfunktionen von Ranktracker ist die Möglichkeit, Ihre eigenen identifizierten Konkurrenten hinzuzufügen, und die Leistung der Konkurrenten wird in einer Spalte neben den Ergebnissen Ihrer eigenen Domain angezeigt. Wenn ein Konkurrent für Ihre eigenen Suchbegriffe besser rangiert als Sie, lohnt es sich, seine Website zu analysieren, um von ihm zu lernen. Um einen Mitbewerber hinzuzufügen, fügen Sie einfach seine URL ein.

Add competitors in Rank Tracker

Rank Tracker board

Hier finden Sie einen sehr ausführlichen Artikel über die Durchführung einer Wettbewerbsanalyse.

Treffen Sie Ranktracker

Die All-in-One-Plattform für effektives SEO

Hinter jedem erfolgreichen Unternehmen steht eine starke SEO-Kampagne. Aber bei den zahllosen Optimierungstools und -techniken, die zur Auswahl stehen, kann es schwierig sein, zu wissen, wo man anfangen soll. Nun, keine Angst mehr, denn ich habe genau das Richtige, um zu helfen. Ich präsentiere die Ranktracker All-in-One-Plattform für effektives SEO

Wir haben endlich die Registrierung zu Ranktracker absolut kostenlos geöffnet!

Ein kostenloses Konto erstellen

Oder melden Sie sich mit Ihren Anmeldedaten an

Erstellen Sie während Ihrer Recherchen eine "Traumliste" mit allen möglichen Merkmalen und Elementen, die Sie einbauen könnten (keine Sorge, Sie werden diese einschränken, aber es ist hilfreich, alle Ideen zusammen zu haben).

Planung: Identifizierung der wichtigsten Designmerkmale

Planning: Identifying Key Design Features (Bildquelle: Envato Elements)

Das Design einer Website sollte sich an ihrem Zweck orientieren. Schauen Sie sich alle Elemente/Funktionen aus Ihrer Traumliste an und wählen Sie diejenigen aus, von denen Sie glauben, dass sie Ihrem Kunden helfen werden, sein Ziel zu erreichen. Nehmen Sie ein leeres Blatt Papier und beginnen Sie mit dem Zeichnen einiger grober Wireframes für Ihre Website. Verknüpfen Sie in Ihren Wireframes jedes Element, das Sie einbauen wollen, mit einem Ergebnis: Wenn Sie keinen klaren Zweck dafür finden, streichen Sie diesen Abschnitt. Denken Sie nicht über die Ästhetik des Designs nach, sondern konzentrieren Sie sich darauf, was für die Benutzererfahrung und die Benutzerfreundlichkeit am besten ist.

Entgegen der landläufigen Meinung müssen Ihre ersten Wireframes nicht mit einer ausgefallenen Designsoftware entworfen werden. Die analoge Herangehensweise mit Bleistift und Papier funktioniert sehr gut und ist manchmal sogar besser, da Sie nicht durch die Software selbst abgelenkt werden. Papier ist nachsichtiger und weniger dauerhaft; es ist schneller zu benutzen, was während des kreativen Prozesses hilfreich sein kann. Wenn Sie Ihrem Kunden Wireframes präsentieren müssen, können Sie dies professioneller tun, sobald Sie die groben Zeichnungen ausgearbeitet haben.

Machen Sie zuerst ein Mock-up, entwerfen Sie nicht auf der Webplattform, um Zeit zu sparen.

Es gibt ein altes Sprichwort, das besagt, dass man kein Flugzeug fliegen kann, während man es baut. Das gilt auch für das Webdesign: Wenn Sie versuchen, eine Website zu erstellen, während Sie noch Entscheidungen über Inhalt, Funktionen und Design treffen müssen, ist das ein Rezept für Frustration. Um die Dinge effizient zu gestalten, brauchen Sie einen Plan. Ein Mock-up jeder Seite zu erstellen, scheint zeitaufwändig und kontraintuitiv zu sein, aber es dient vielen Zwecken und spart auf lange Sicht Zeit. Mock-ups ermöglichen es Ihrem Kunden, die Website zu visualisieren, bevor die Webentwicklung überhaupt beginnt. Er kann die verschiedenen Farb- und Schriftoptionen ausprobieren und leicht erahnen, was geändert werden muss. Die Besprechung eines Mock-Ups schafft viele Möglichkeiten für Diskussionen und Fragen. Das erhöht die Wahrscheinlichkeit, dass Ihr Kunde zufrieden ist, wenn er die Live-Site zum ersten Mal sieht. Vor allem aber ermöglicht die Arbeit mit einem Mock-up eine wesentlich schnellere Erstellung der Website in der Entwicklungsphase, da fast alle kreativen Entscheidungen bereits getroffen wurden.

Arbeiten Sie mit Inhalten, die in den Suchmaschinen gut platziert werden können.

Manchmal besteht ein Kunde darauf, dass Sie mit einem "Platzhaltertext" beginnen, weil er glaubt, dass Ihre Aufgabe nur darin besteht, die ästhetischen Elemente zu gestalten. Wenn möglich, sollten Sie es vermeiden, mit generischem Platzhaltertext zu arbeiten. Ihre Entwürfe mögen zwar schön aussehen, aber Ihre Website wäre sinnlos, wenn Sie einen wichtigen Bestandteil wie gut geschriebene Inhalte vernachlässigen würden.

Treffen Sie Ranktracker

Die All-in-One-Plattform für effektives SEO

Hinter jedem erfolgreichen Unternehmen steht eine starke SEO-Kampagne. Aber bei den zahllosen Optimierungstools und -techniken, die zur Auswahl stehen, kann es schwierig sein, zu wissen, wo man anfangen soll. Nun, keine Angst mehr, denn ich habe genau das Richtige, um zu helfen. Ich präsentiere die Ranktracker All-in-One-Plattform für effektives SEO

Wir haben endlich die Registrierung zu Ranktracker absolut kostenlos geöffnet!

Ein kostenloses Konto erstellen

Oder melden Sie sich mit Ihren Anmeldedaten an

Eine Website ist nur dann wertvoll, wenn sie von Besuchern besucht wird, und die Suchmaschinenoptimierung (SEO) sorgt dafür, dass Suchmaschinen Ihre Website organisch finden. Die Wortwahl auf einer Seite ist entscheidend für die Suchmaschinenoptimierung, und die Designelemente sollten die Wortwahl unterstützen. Wenn Sie die Schlüsselwörter im Voraus kennen, erhalten Sie einen zusätzlichen Einblick. Wenn Sie für Ihre Inhalte mit einem Texter zusammenarbeiten, stellen Sie sicher, dass dieser mit SEO vertraut ist. Auch wenn Sie kein SEO-Experte sind, sollten Sie sich mit diesem Thema vertraut machen, damit Sie es bei der Gestaltung Ihrer Website besser berücksichtigen können.

Einige Tools für die Suche nach Schlüsselwörtern sind kompliziert (vor allem, wenn Sie neu in der Suchmaschinenoptimierung sind), aber der Ranktracker Keyword Finder ist sehr einfach und intuitiv: Sie fügen die Schlüsselwörter einfach zu einer Liste hinzu, und die Ergebnisse werden farblich nach Schwierigkeitsgrad des Schlüsselworts kodiert angezeigt. Für eine gute Suchmaschinenoptimierung sollten Sie Schlüsselwörter mit geringem Wettbewerb, aber ausreichendem Suchvolumen wählen, daher ist es sehr hilfreich, dass das Suchvolumen direkt angezeigt wird.

Keyword Finder

Versuchen Sie also, bevor Sie beginnen, zumindest einen Entwurf des Wortlauts zu erhalten. Wenn Sie ein eigenständiger Designer sind, müssen Sie dem Kunden wahrscheinlich auch dabei helfen, herauszufinden, wo der Text am besten auf die Website passt. Es liegt in der Natur des Designprozesses, dass sich der Wortlaut ein paar Mal ändern kann, aber etwas zu haben, mit dem man anfangen kann, ist viel besser als gar nichts.

Vereinfachen Sie die Auswahl von Schriftarten, Farben, Hierarchien und visuellen Elementen.

Wenn Sie ein weniger erfahrener Designer sind oder einfach etwas Zeit sparen möchten, ist es hilfreich, mit Vorlagen zu arbeiten und diese als Grundlage zu verwenden. Für ein CMS wie WordPress gibt es Tausende von großartigen Vorlagen zu vernünftigen Preisen. Diese verfügen bereits über Schriftarten, Farben, Hierarchien und visuelle Elemente, die in einem einheitlichen Stil gestaltet sind. Wenn Sie sich Sorgen um die Originalität machen, können Sie sicher sein, dass Ihr Ergebnis anders aussehen wird als die Vorlage, da Sie sie an Ihre Wireframes anpassen. Ein paar Designvorgaben und ein allgemeiner Stil können Ihnen helfen, eine Richtung zu finden und die Entscheidungsmüdigkeit zu verringern. Verwenden Sie nicht zu viele Farben: Sie können die Farben Ihrer Website getrost auf 2 oder maximal 3 Farben beschränken. Unter Die 20 besten Farbkombinationen für Ihre Website finden Sie einige großartige Ideen und Trends für die Auswahl von Website-Farben.

Schlussfolgerung: Maximierung der Wirkung

Zu wissen, worauf man sich konzentrieren sollte, kann einem Designer helfen, seine perfektionistischen Tendenzen in den Griff zu bekommen und trotzdem erfolgreich zu sein. Das Pareto-Prinzip ist eine Faustregel im Webdesign, die besagt, dass 80 % des Nutzererlebnisses mit 20 % des Aufwands erreicht werden können. Das bedeutet, dass Webdesigner ihre Bemühungen auf die Optimierung von Inhalten, On-Page-Design-Elementen, Benutzerfreundlichkeit und anderen Faktoren konzentrieren müssen, um eine effektive Website zu erstellen, die in Suchmaschinen gut platziert wird.

Lene Wandrey

Lene Wandrey

Founder, hot-designs.com

Lene Wandrey is a tech-loving artist, graphic designer and entrepreneur living in South Africa. She's the founder of hot-designs.com. She is passionate about design and productivity.

Link: hot-designs.com

Starten Sie mit Ranktracker... kostenlos!

Finden Sie heraus, was Ihre Website vom Ranking abhält.

Ein kostenloses Konto erstellen

Oder melden Sie sich mit Ihren Anmeldedaten an

Different views of Ranktracker app