For nylig begyndte jeg at læse lidt mere på designprincipper, jeg stødte på et interessant princip kaldet 80/20 regel , også omtalt som Pareto-princippet , Juran's Principle , den Vital Few og Trivial Many Rule , og princippet om faktor Sparsity .

Dette princip, som jeg refererer til i dette stykke simpelthen som 80/20-reglen, når det tages i betragtning i forbindelse med websider og webappdesign, kan have en dyb indvirkning på brugeroplevelsen og i sidste ende på effektiviteten af ​​indholdet eller funktionalitet af dit websted eller webapp.

I dette indlæg giver jeg først en grundlæggende definition, så jeg vil overveje nogle specifikke eksempler på hvordan 80/20-reglen viser sig gavnlig, og så opsummerer jeg nogle lektioner, der kan hentes fra at have kendskab til denne regel.

Hvad er reglen?

80/20-reglen blev oprindeligt observeret af den italienske økonom Vilfredo Pareto, og det egentlige princip blev navngivet Pareto-princippet af Joseph M. Juran.

Nedenfor er definitioner fra to forskellige kilder. Først fra bogen Universelle principper for design :

80/20-reglen hævder, at ca. 80 procent af effekterne fra et hvilket som helst stort system skyldes 20 procent af variablerne i det pågældende system.


Og næste, fra Wikipedia :

Pareto-princippet ... hedder, at omkring 80% af virkningerne kommer for mange begivenheder fra 20% af årsagerne


Så straks vil du bemærke, at dette ikke altid er et princip, som vi som designere har direkte kontrol over, men snarere er det et princip, som vi observerer som forekommer næsten naturligt.

Med viden om eksistensen af ​​dette princip eller mønster af forekomst er vi derefter udstyret med værdifulde oplysninger til at træffe beslutninger, som vil bidrage til at forbedre anvendeligheden og effektiviteten af ​​vores designs.

Husk aldrig den hypotetiske art af reglen ...

Ja, der er kritikere, og dem, der føler 80/20-reglen, er intet andet end en hypotese eller alt for generel teori, der ikke altid gælder.

Men at sætte det til side, er selve begrebet til gavn for dem, der arbejder med brugergrænseflader og funktionalitet, der kræver undersøgelse og optimering - selvom reglen er mere som 70/30 eller 90/10.

Hvordan kan vi anvende det på brugeroplevelsen?

På ethvert websted, webapp eller software-miljø fortæller 80/20-reglen os, at 20% af funktionaliteten og funktionerne i et hvilket som helst miljø vil være ansvarlige for 80% af resultaterne eller handlinger taget i dette miljø.

I nogle tilfælde er det nemt at finde ud af, hvad der udgør de 20%, der har så stor indflydelse. Webanalysestatistik, formularer og sessionsk cookies kan alle bruges til at spore brugeradfærd. Analyse af disse elementer vil hjælpe os med at bestemme hvilke områder af brugergrænsefladen der er mest interaktive.

På den anden side kan mindre opgaver, der ikke spores ved hjælp af disse metoder, være sværere at analysere. I dette tilfælde kan brugbarhedsundersøgelser udføres, hvor brugerne observeres, da de interagerer med dit websites brugerinterface.

Nogle eksempler, der anerkender 80/20-reglen

Uanset om det er forsætligt eller ej, er der masser af beviser for, at UI og UX-designere overvejer værdien af ​​dette princip.

Tag for eksempel et simpelt brugergrænseelement som en rulleliste med lande, der præsenteres i en registreringsformular. De fleste site-udviklere eller indholdsskabere erkender, at 80% af tiden vil visse lande blive valgt.

Så selvom det tilsyneladende er en dårlig praksis for en så lang liste at bryde alfabetiseringen af ​​listen, tillader 80/20-reglen denne konvention at blive brudt ved at placere de mest udvalgte lande øverst, som vist på skærmen fra Fenn Wright Mansons Checkout side:

Fenn Wright Manson mest sandsynlige land muligheder


I andre tilfælde, som når du tilføjer en ny adresse til din adressebog på Amazon.com , standardvalget er det mest valgte land - i dette tilfælde USA:

Amazonas standard land option


Her er et andet eksempel, denne gang fra en britisk baseret virksomhed kaldet North Rock Gallery , som har den britiske indstilling valgt som standard:

Norht Rock Gallery's standard land option

Disse enkle eksempler ovenfor viser vigtigheden af ​​at optimere for de funktioner og muligheder, der bruges eller vælges oftest.

Hvor ser brugerens udseende ud?

Det F-Pattern læsning og scanning vaner af web-brugere er blevet ret etableret nu. F-Pattern er selvfølgelig ikke altid en indikator på hvert marked, men det er et godt godt udgangspunkt for at overveje, hvor dine brugere vil se, når de interagerer med dine designs.

Tag et kig på de varmekort, der er vist nedenfor, fra den kendte Alertbox-artikel, der er linket ovenfor:

Varmekort viser F-mønsteret

Forudsat at dette er en god indikator for, hvor brugerens øje er fokuseret, understøtter dette begrebet 80/20-reglen. De mest intense områder på kortet kunne repræsentere 20% af siden, hvor brugerens øjne interagerer med 80% af tiden.

Fra den viden, som designere, kan vi træffe beslutninger, som vil bidrage til at forbedre og optimere de områder, som brugeren normalt vil blive tiltrukket af.

Selvfølgelig vil designet ofte være afgørende for, hvor brugeren ser ud, så dette forslag bør bare være en grundlæggende vejledning og ikke nødvendigvis en dogmatisk måde at afgøre, hvad der falder under 20%.

Mobile Design Trends og 80/20 Rule

For nylig med eksplosionen af ​​mobile enheder verden over, nogle designere og udviklere, især Luke Wroblewski , har været opmuntrende mobile første webdesign . Det vil sige, når du designer og udvikler et websted, skal mobilversionen først udføres, i stedet for omvendt, for at opnå visse fordele.

På en traditionel hjemmeside eller webapp vil visse områder af dit websted naturligvis falde under de 20%, der oftest bruges og interageres med. Når et mobilt websted er designet, fokuseres der på 20% (eller deromkring).

Så selvom den mobile version af et websted måske har sine egne 20% mest brugte muligheder i forhold til det fulde indhold, der er tilgængeligt på en traditionel hjemmeside, har den mobile version normalt kun de vigtigste funktioner.

Her er et simpelt eksempel nedenfor ved hjælp af PETCO.com internet side:

Petco fuld hjemmeside

Vist ovenstående er den fulde version af webstedet i al sin rodet herlighed. Mens der er nogle call-to-action-områder, og det er bestemt ikke det værste design i verden, er det generelt ikke meget fokuseret, og der er for mange muligheder.

Sammenlign det med den mobile version nedenfor:

Petco mobile

I modsætning hertil er den mobile grænseflade vist ovenfor enkel og hjælper brugeren med at komme til de vigtigste områder først uden at overvælde dem. Uanset hvilke muligheder og indholdsområder der er mest udnyttet i den fulde version, er de eneste muligheder tilgængelige i mobilversionen.

Således er fokuserede mobile webapplikationer gode eksempler på designere, der kanaliserer deres energier på de vigtigste aspekter af deres projekter, idet de fokuserer på funktionaliteten og indholdet (de 20%), der bruges mest (80%).

Lærdomme opsummeret

At have forståelse for, hvordan 80/20-reglen fungerer, er designere udstyret til at handle på en række måder, opsummeret nedenfor:

  • Analysér analyser og brugbarhedsdata omhyggeligt for at bestemme dit websteds 20% mest anvendte funktioner
  • Prioriter; det vil sige fokus på de vigtigste aspekter af dit websted eller webapp, og forbedre dem
  • Brug ikke for meget tid på at optimere ting, der falder i 80%, som ikke ofte bruges
  • Forenkle dine designs og layouter baseret på data, der bestemmer, hvad der falder ind under de 20% mest brugte funktioner
  • Fjern ikke-kritisk funktionalitet eller indhold, der ikke bruges ofte
  • Invester ikke for meget tid og penge på at optimere mindre brugt funktionalitet, da afkastet af din investering sandsynligvis vil være dårlig
  • Find måder at forbedre funktionaliteten og udformningen af ​​mindre brugte mere kritiske elementer, der kunne have større indflydelse på konverteringer, hvis disse elementer i designet blev brugt oftere


Mens 80/20-reglen er et diskutabelt princip med nogle iboende fejl, er det ikke uden værdi. Så overvej denne regel under processen med dine redesigner, justeringer eller endda til nye projekter.

Dette skal hjælpe dine brugere med at fokusere på den vigtigste funktionalitet og indhold, og vil i sidste ende hjælpe med at forbedre konverteringsfrekvenserne.


Dette indlæg blev udelukkende skrevet til Webdesigner Depot af Louis Lazaris, freelance skribent og webudvikler. Louis løber Imponerende Webs hvor han stiller artikler og vejledninger om webdesign. Du kan Følg Louis på Twitter eller komme i kontakt med ham gennem hans hjemmeside.

Har du overvejet 80/20-reglen i dine designbeslutninger? Hvilken effekt har det haft på din hjemmeside eller webapps succes? Del dine kommentarer nedenfor.