Nachdem ich vor kurzem begonnen habe, ein wenig mehr über Designprinzipien zu lesen, stieß ich auf ein interessantes Prinzip namens 80/20 Regel , das auch als das Pareto-Prinzip , das Juran-Prinzip , die Vital-Wenige und Trivial-Viele-Regel und das Prinzip der Faktor-Sparsität bezeichnet wird .

Dieses Prinzip, auf das ich in diesem Beitrag einfach als 80/20-Regel Bezug nehmen werde, wenn es im Zusammenhang mit Website- und Web-App-Design betrachtet wird, kann tiefgreifende Auswirkungen auf die Benutzererfahrung und letztlich auf die Effektivität des Inhalts haben Funktionalität Ihrer Website oder Web-App.

In diesem Beitrag werde ich zuerst eine grundlegende Definition geben, dann werde ich einige spezifische Beispiele betrachten, wie sich die 80/20-Regel als nützlich erweist, und dann werde ich einige Lektionen zusammenfassen, die aus dem Wissen um diese Regel gewonnen werden können.

Was ist die Regel?

Die 80/20-Regel wurde ursprünglich vom italienischen Ökonom Vilfredo Pareto beobachtet, und das eigentliche Prinzip wurde von Joseph M. Juran als Pareto-Prinzip bezeichnet .

Im Folgenden finden Sie Definitionen aus zwei verschiedenen Quellen. Zuerst aus dem Buch Universelle Prinzipien des Designs :

Die 80/20-Regel behauptet, dass ungefähr 80 Prozent der von einem großen System erzeugten Effekte durch 20 Prozent der Variablen in diesem System verursacht werden.


Und als nächstes, aus Wikipedia :

Das Pareto-Prinzip ... besagt, dass bei vielen Ereignissen etwa 80% der Wirkungen von 20% der Ursachen herrühren


Sie werden also sofort bemerken, dass dies nicht immer ein Prinzip ist, das wir als Designer direkt kontrollieren, sondern dass es sich um ein Prinzip handelt, das wir als selbstverständlich betrachten.

Mit dem Wissen über die Existenz dieses Prinzips oder des Verhaltensmusters werden wir dann mit wertvollen Informationen ausgestattet, um Entscheidungen zu treffen, die helfen, die Verwendbarkeit und Effektivität unserer Designs zu verbessern.

Achte nie auf die hypothetische Natur der Regel ...

Ja, es gibt Kritiker und diejenigen, die die 80/20-Regel fühlen, sind nichts anderes als eine Hypothese oder eine zu allgemeine Theorie, die nicht immer zutrifft.

Aber abgesehen davon ist das Konzept für Anwender, die an Benutzerschnittstellen und Funktionen arbeiten, von Vorteil, die einer Prüfung und Optimierung bedürfen - selbst wenn die Regel eher 70/30 oder 90/10 ist.

Wie können wir es auf die User Experience anwenden?

In jeder Website, Web-App oder Softwareumgebung sagt uns die 80/20-Regel, dass 20% der Funktionalität und Funktionen in einer Umgebung für 80% der Ergebnisse oder Aktionen in dieser Umgebung verantwortlich sind.

In einigen Fällen ist es einfach, herauszufinden, was die 20% ausmacht, die einen so großen Einfluss haben. Web Analytics-Statistiken, Formulareinreichungen und Sitzungscookies können alle dazu verwendet werden, das Nutzerverhalten zu verfolgen. Die Analyse dieser Elemente hilft uns zu bestimmen, mit welchen Bereichen der Benutzeroberfläche am meisten interagiert wird.

Auf der anderen Seite können kleinere Aufgaben, die nicht mit diesen Methoden verfolgt werden, schwerer zu analysieren sein. In diesem Fall können Usability-Studien durchgeführt werden, bei denen Nutzer beobachtet werden, wenn sie mit der Benutzeroberfläche Ihrer Website interagieren.

Einige Beispiele, die die 80/20-Regel erkennen

Ob beabsichtigt oder nicht, es gibt zahlreiche Belege dafür, dass UI- und UX-Designer den Wert dieses Prinzips berücksichtigen.

Nehmen Sie zum Beispiel ein einfaches UI-Element wie eine Dropdown-Liste von Ländern, die in einem Registrierungsformular angezeigt werden. Die meisten Website-Entwickler oder Ersteller von Inhalten erkennen, dass in 80% der Fälle bestimmte Länder ausgewählt werden.

Obwohl es für eine so lange Liste scheinbar eine schlechte Übung wäre, die Alphabetisierung der Liste zu unterbrechen, erlaubt die 80/20-Regel, diese Konvention zu brechen, indem die am meisten ausgewählten Länder an die Spitze gesetzt werden, wie in der folgenden Abbildung gezeigt von Fenn Wright Manson Kassenseite:

Fenn Wright Mansons wahrscheinlichste Länderoptionen


In anderen Fällen, wie beim Hinzufügen einer neuen Adresse zu Ihrem Adressbuch am Amazon.de , die Standardauswahl ist das am meisten ausgewählte Land - in diesem Fall die Vereinigten Staaten:

Amazon Standard-Länderoption


Hier ist ein weiteres Beispiel, dieses Mal von einem britischen Unternehmen namens North Rock Galerie , für die standardmäßig die Option UK ausgewählt ist:

Die Standard-Länderoption der Norht Rock Gallery

Diese einfachen Beispiele zeigen, wie wichtig es ist, die Funktionen und Optionen zu optimieren, die am häufigsten verwendet oder ausgewählt werden.

Wo suchen Benutzer?

Das F-Muster Lese- und Scangewohnheiten von Internetnutzern sind inzwischen ziemlich etabliert. Natürlich ist das F-Muster nicht immer ein Indikator in jedem Markt, aber es ist ein guter Ausgangspunkt, um zu überlegen, wo Ihre Nutzer aussehen werden, wenn sie mit Ihren Designs interagieren.

Werfen Sie einen Blick auf die unten gezeigten Heatmaps des bekannten Alertbox-Artikels:

Heatmaps, die das F-Muster zeigen

Angenommen, dies ist ein guter Indikator dafür, wo das Auge eines Benutzers fokussiert ist, unterstützt dies das Konzept der 80/20-Regel. Die intensivsten Bereiche auf der Karte können die 20% der Seite darstellen, mit der die Augen des Benutzers in 80% der Zeit interagieren.

Aus diesem Wissen heraus können wir als Designer Entscheidungen treffen, die dazu beitragen, die Bereiche zu verbessern und zu optimieren, zu denen der Benutzer gewöhnlich hingezogen wird.

Natürlich ist das Design oft der ausschlaggebende Faktor dafür, wo der Benutzer hinschaut, daher sollte dieser Vorschlag nur ein grundlegender Leitfaden sein und nicht unbedingt ein dogmatischer Weg sein, zu entscheiden, was unter die 20% fällt.

Mobile Designtrends und die 80/20-Regel

Kürzlich mit der Explosion von mobilen Geräten weltweit, vor allem einige Designer und Entwickler Luke Wroblewski , waren ermutigend Mobile-erste Webdesign . Das heißt, wenn Sie eine Website entwerfen und entwickeln, sollte die mobile Version zuerst durchgeführt werden und nicht umgekehrt, um bestimmte Vorteile zu erzielen.

In einer traditionellen Website oder Web-App werden bestimmte Bereiche Ihrer Website natürlich unter die 20% fallen, die am häufigsten verwendet werden und mit denen interagiert wird. Wenn eine mobile Website entworfen wird, wird der Fokus auf diese 20% (oder etwa so) gelegt.

Während die mobile Version einer Website 20% der meistgenutzten Optionen hat, hat die mobile Version normalerweise nur die wichtigsten Funktionen, bezogen auf den gesamten Inhalt einer herkömmlichen Website.

Hier ist ein einfaches Beispiel unten mit dem PETCO.com Webseite:

Petco vollständige Website

Oben ist die Vollversion der Seite in ihrer ganzen überladenen Pracht dargestellt. Zwar gibt es einige Call-to-Action-Bereiche, und es ist sicherlich nicht das schlechteste Design der Welt, insgesamt ist es nicht sehr konzentriert und es gibt zu viele Optionen.

Vergleichen Sie das mit der mobilen Version unten:

Petco Handy

Im Gegensatz dazu ist die oben gezeigte mobile Schnittstelle einfach und hilft dem Benutzer, zuerst zu den wichtigsten Bereichen zu gelangen, ohne sie zu überfordern. Welche Optionen und Inhaltsbereiche in der Vollversion am häufigsten verwendet werden, sind die einzigen verfügbaren Optionen in der mobilen Version.

Daher sind gut fokussierte mobile Web-Apps großartige Beispiele für Designer, die ihre Energien auf die wichtigsten Aspekte ihrer Projekte konzentrieren und dabei auf die Funktionalität und den Inhalt (die 20%) konzentrieren, die die meiste Zeit verwendet werden (die 80%).

Lektionen zusammengefasst

Nachdem die Entwickler verstanden haben, wie die 80/20-Regel funktioniert, sind die Konstrukteure in der Lage, auf verschiedene Arten und Weisen Maßnahmen zu ergreifen:

  • Analysieren Sie nach Möglichkeit Analyse- und Usability-Daten, um die 20% der am häufigsten verwendeten Funktionen Ihrer Website zu ermitteln
  • Priorisieren; Das heißt, konzentrieren Sie sich auf die wichtigsten Aspekte Ihrer Website oder Web-App und verbessern Sie diese
  • Vergeuden Sie nicht zu viel Zeit damit, Dinge zu optimieren, die in die 80% fallen, die nicht oft verwendet werden
  • Vereinfachen Sie Ihre Designs und Layouts anhand von Daten, die bestimmen, was unter den 20% der am häufigsten verwendeten Funktionen fällt
  • Entfernen Sie nicht kritische Funktionen oder Inhalte, die nicht häufig verwendet werden
  • Investieren Sie nicht zu viel Zeit und Geld, um weniger genutzte Funktionen zu optimieren, da die Rendite Ihrer Investition wahrscheinlich gering ist
  • Suchen Sie nach Möglichkeiten, die Funktionalität und das Design weniger häufig verwendeter kritischer Elemente zu verbessern, die einen größeren Einfluss auf Conversions haben könnten, wenn diese Elemente des Designs häufiger verwendet würden


Während die 80/20-Regel ein strittiges Prinzip mit einigen inhärenten Fehlern ist, ist sie nicht ohne Wert. Berücksichtigen Sie diese Regel während des Redesigns, Neuausrichtens oder sogar für neue Projekte.

Auf diese Weise können sich Ihre Nutzer auf die wichtigsten Funktionen und Inhalte konzentrieren und letztendlich die Conversion-Rate verbessern.


Dieser Beitrag wurde exklusiv für Webdesigner Depot von Louis Lazaris, einem freiberuflichen Autor und Webentwickler, geschrieben. Louis rennt Beeindruckende Webs wo er Artikel und Tutorials zum Thema Webdesign veröffentlicht. Sie können folge Louis auf Twitter oder über seine Website mit ihm in Kontakt treten.

Haben Sie die 80/20-Regel in Ihren Designentscheidungen berücksichtigt? Welchen Einfluss hat dies auf den Erfolg Ihrer Website oder Web-App? Teile deine Kommentare unten.