Paretoprincipen i webbdesign - skapa en effektivare webbplats med 80/20-regeln

Problemet med att vara perfektionist inom webbdesign

Perfektionism kan vara en utmaning för många grafiska designers och webbdesigners. Att sträva efter excellens är beundransvärt, men det kan leda till frustration när man ändrar och justerar i all oändlighet tills varje del av webbplatsen är perfekt. För många formgivare är det lätt att bli uppslukad av designprocessen och förlora tidsuppfattningen medan man väljer typsnitt, färgpaletter och funderar över hundratals pixel-perfekta designbeslut. Visst är det viktigt att leverera ett bra arbete, men som designer är det lätt att tappa fokus på vad detta innebär? En webbplats bör inte handla om designerns mål, utan om att uppfylla kundens önskade resultat och samtidigt balansera begränsningarna i fråga om tid, resurser och energi. Utan begränsningar kan en webbplats lätt bli överkonstruerad, långsam, med för många element och funktioner som förvirrar användarna. Det är också svårt att få plats med alla funktioner på den begränsade tiden, så designern kan helt enkelt få slut på tid, och att misslyckas med att leverera en bra webbplats inom utsatt tid är mycket stressande för alla inblandade.

Vad är Paretoprincipen?

80/20-regeln, som ibland kallas Pareto-principen, säger att 80 procent av effekterna kommer från 20 procent av orsakerna. Pareto-principen introducerades för första gången av den italienske ekonomen Vilfredo Pareto 1895 när han konstaterade att 80 % av Italiens rikedomar ägdes av endast 20 % av befolkningen. Han noterade också att 20 % av ärtskotten i hans trädgård gav 80 % av ärterna! Paretoprincipen innebär att ett fåtal nyckelelement är ansvariga för att producera det mesta av ett visst resultat. Sedan dess har den tillämpats på många andra områden, bland annat affärer, ekonomi och psykologi, och den kan till och med vara praktisk i vardagen.

Detta gäller även i mindre skala; har du någonsin lagt märke till att den största delen av din inkomst kommer från en handfull av samma fasta kunder? Eller att du alltid tycks bära samma kläder medan det mesta av din garderob inte används? Även om förhållandet inte alltid är exakt 80/20 och det alltid finns undantag, är det ett utmärkt verktyg för att hjälpa människor att identifiera vilka åtgärder som har störst inverkan på deras framgång och prioritera dessa i enlighet med detta.

Paretoprincipen inom webbdesign och digital marknadsföring

Paretoprincipen tillämpas på webbdesign och innebär att de flesta resultat kommer att uppnås genom ett litet antal viktiga funktioner. Inom marknadsföringen kommer vissa kampanjer att fungera mycket bättre än andra. För att uppnå bästa möjliga resultat är det klokt att först fokusera på dessa få viktiga funktioner och se till att de får mest uppmärksamhet, medan de mindre viktiga delarna kan göras snabbare. Ett sätt att använda Pareto-principen är att fokusera på användarupplevelse och användbarhet - genom att uppmärksamma hur användarna interagerar med ditt online-innehåll och se till att de kan hitta det de behöver, kommer du sannolikt att skörda större vinster än om du bara fokuserar på enbart estetik. Den lär oss att perfektion inte alltid är nödvändig och att det är möjligt att uppnå en ännu effektivare webbplats genom att optimera de viktiga 20 procenten av funktionerna.

Som exempel har vi just tittat på trafikdata för en liten e-handelsbutik som säljer handgjorda produkter och noterat flera Paretotrender. Till exempel kommer nästan alla besökare till webbplatsen via mobilen. Den mesta produktförsäljningen sker från ett litet antal kategorier. Facebook var deras största källa till trafik via sociala medier. När man undersöker en värmekarta över produktsidan får vissa områden mer engagemang. Det typiska F-mönstret kan i viss mån observeras, med kluster av interaktioner i den översta raden och längs sidans vänstra sida.

Vad kan man göra med hjälp av denna information för att förbättra försäljningen för denna kund?

I det här exemplet skulle den snabbaste vinsten vara att förbättra mobilupplevelsen på webbplatsen, som ursprungligen byggdes för datorer. Heatmaps av alla sidor skulle kunna undersökas för att lära sig mer om användarnas preferenser. De mest klickade frågorna från FAQ-sektionen skulle till exempel kunna flyttas till startsidan i stället för att gömmas undan. Produkter med hög vinst kan presenteras på de områden på sidan där det är mest troligt att de klickar mest.

Börja alltid med "varför".

(Bildkälla: Envato Elements)

Från min erfarenhet i branschen har jag märkt att många formgivare gärna tar emot en uppdragsbeskrivning och börjar arbeta med designen, även om de saknar viktig information om projektets syfte. Kanske trodde den person som sammanställde briefingen att denna information var underförstådd, eller så verbaliserade kunden den inte kortfattat. Ta en stund för att ta ett steg tillbaka innan du börjar arbeta. Utan en tydlig förståelse för varför du gör det du gör kommer din webbdesign att sakna riktning. Din webbplats kanske ser bra ut för dig och till och med för kunden, men trots dina många timmar kommer resultatet att bli en besvikelse om det inte uppnår kundens förväntade resultat.

Fråga dig själv: Varför finns den här webbplatsen? Vilka är slutanvändarna av webbplatsen och hur kommer de att interagera med webbplatsen? Hur kommer webbplatsen att skapa värde och framgång för din kund? Hur kommer kunden att mäta denna framgång? Hur kommer webbplatsen att locka besökare och fånga upp leads? När du kan besvara dessa frågor och förstår "varför" blir det lättare att prioritera "vad" och "hur" som ingår i designelementen. När du kan visualisera det önskade resultatet hjälper det dig att koncentrera din energi på de viktigaste områdena för att uppnå detta.

Anta minimala livsdugliga produkter som metod för webbdesign.

Det finns så många beslut att fatta när man utformar en webbplats att det kan vara svårt att veta var man ska börja. MVP-metoden (Minimum Viable Product) innebär att man bara bygger de viktigaste delarna av en webbplats på en gång och sedan kontinuerligt förfinar dem med hjälp av kundernas feedback över tid. Det görs vanligtvis för att spara kostnader och tid, eller när en affärsidé bygger på många antaganden. I stället för att försöka göra allting på en gång kan utvecklarna prioritera funktioner utifrån kundernas behov och skapa prototyper så snart som möjligt. Även när du inte är under tids- eller budgetpress är det ett fantastiskt sätt att tillämpa Pareto-principen och bekämpa perfektionistiska tendenser att omfamna webbplatsen som en MVP. Mentalt hjälper det att veta att du alltid kan lägga till fler funktioner senare, men att du bör fokusera på de viktigaste delarna just nu.

Att utforma för mobil först kan hjälpa dig att förenkla din webbplats.

När du utformar en webbplats vill du ge användarna en effektiv och intuitiv upplevelse. Det bästa sättet att uppnå detta är att utforma en webbplats med en "mobile-first"-designstrategi. Detta koncept innebär att man skapar webbplatser som är optimerade för mobila enheter först, snarare än skrivbordswebbplatser som anpassas för mobilen. Varför är detta nödvändigt? Enligt techjury.net kommer mobiltelefoner år 2022 att generera 60,66 % av webbplatstrafiken, medan stationära datorer och surfplattor tillsammans står för 39,34 %. Detta kan variera inom olika branscher och på olika webbplatser, men trenden är värd att notera. Genom att fokusera din design på den mobila versionen av webbplatsen kan du stapla oddsen för framgång till din fördel.

När du börjar utforma för mobila enheter kommer du snabbt att märka att det finns mindre utrymme för formuleringar och skräp. Det är ganska svårt att anpassa sig om man har designat för stationära datorer under lång tid. Men det här tillvägagångssättet passar bra in i Pareto-principen, eftersom det hjälper dig att välja det innehåll som har störst effekt. Detta har två fördelar: din webbplats kommer att vara optimerad för den mobila plattform som användarna föredrar, och när du anpassar den för stationära datorer kommer den visuellt att se modern och ren ut. Du kommer fortfarande att behöva anpassa din webbplats till desktop senare, men när du arbetar utifrån mobil först-strategin blir det mycket enklare eftersom du redan har en förenklad design.

Gör undersökningar och analysera konkurrenters webbplatser

När det gäller webbdesign tänker vi ofta på forskning som att titta på andra inspirerande webbplatser eller mallar med vackra designelement. Men forskning om webbdesign går längre än att bara beundra andra webbplatsers estetik. Det är nödvändigt att förstå hur människor använder webben, hur användare interagerar med olika design och hur innehållet organiseras för att skapa en effektiv webbplats. Genom att be om alla analysdata som kunden kan tillhandahålla eller använda ett övervakningsverktyg som Ranktracker kan vi bättre identifiera områden med möjlighet till förbättring för en webbplats med bättre prestanda.

Forskningen bör omfatta en undersökning av befintliga branschstandarder, målgrupper och användarnas preferenser genom en konkurrentanalys. Du kan hitta konkurrenter genom att fråga kunden eller genom att göra egna sökningar och se vilka webbplatser som rankas högst. När du väl har identifierat några konkurrenter behöver du en tillförlitlig källa för uppgifter om dem. En av mina favoritfunktioner i Ranktracker är möjligheten att lägga till dina egna identifierade konkurrenter och den visar konkurrenternas prestanda i en kolumn bredvid dina egna domänresultat. Om en konkurrent ligger över dig för dina egna sökord är det värt att analysera deras webbplats för att lära sig av dem. För att lägga till en konkurrent klistrar du helt enkelt in deras webbadress.

Klicka här för att läsa en bra artikel om hur man gör en konkurrensanalys.

Medan du gör all din forskning gör du en "drömlista" över alla tänkbara funktioner och element som du skulle kunna inkludera (oroa dig inte, du kommer att begränsa dem, men det är bra att ha alla idéer tillsammans).

Planering: Identifiera viktiga designelement

(Bildkälla: Envato Elements)

Webbplatsens utformning bör baseras på det avsedda syftet. Titta på alla element/funktioner från din drömlista och välj de som du tror kommer att hjälpa din kund att nå sitt mål. Ta ett tomt papper och börja rita några grova wireframes för din webbplats. På dina wireframes kopplar du varje element som du planerar att inkludera till ett resultat: om du inte kan hitta ett tydligt syfte för det, skrota den delen. Tänk inte på designestetik, fokusera på vad som är bäst för användarupplevelsen och användbarheten.

I motsats till vad många tror behöver dina första wireframes inte utformas med ett tjusigt designprogram. Det analoga tillvägagångssättet med penna och papper fungerar utmärkt, och ibland till och med bättre eftersom du inte distraheras av själva programvaran. Papper är mer förlåtande och mindre permanent; det är snabbare att använda, vilket kan vara till hjälp under den kreativa processen. Om du behöver presentera wireframes för din kund kan detta göras mer professionellt när du har arbetat igenom de grova ritningarna.

Gör en mock-up först, gör inte designen i webbplattformen för att spara tid.

Det finns ett gammalt ordspråk som säger att man inte kan flyga ett flygplan medan man bygger det. Detta gäller även för webbdesign: att försöka bygga en webbplats medan du fortfarande håller på att fatta beslut om innehåll, funktioner och design är ett recept för frustration. För att hålla saker och ting effektiva behöver du en plan. Att skapa en mock-up av varje sida verkar tidskrävande och kontraintuitivt här, men det tjänar många syften och kommer att spara tid i det långa loppet. Mock-ups gör det möjligt för din kund att visualisera webbplatsen innan webbutvecklingen ens börjar. De kan uppleva de olika färg- och typsnittsalternativen och lätt förutse vad som behöver ändras. Att diskutera en mock-up skapar många möjligheter till diskussion och frågor. Det ökar chansen att din kund blir nöjd när de ser den levande webbplatsen för första gången. Viktigast av allt är att du genom att arbeta med en mock-up kan bygga webbplatsen mycket snabbare när du väl kommer till utvecklingsstadiet eftersom nästan alla kreativa beslut redan har fattats.

Arbeta med innehåll som kommer att rankas väl i sökmotorerna.

Ibland insisterar en kund på att du ska börja med "platshållartext" eftersom de tror att din roll endast är att utforma de estetiska elementen. Om möjligt bör du undvika att göra designarbete med generisk platshållartext. Även om din design kan se vacker ut, skulle din webbplats sakna syfte om du försummar en viktig ingrediens som välskrivet innehåll.

En webbplats är bara värdefull om den får besökare, och sökmotoroptimering (SEO) är hur sökmotorer hittar din webbplats på ett organiskt sätt. De ordval som används på en sida är avgörande för SEO, och designelementen bör stödja ordvalet. Om du vet vilka nyckelord som används i förväg ger det dig extra insikt. Om du samarbetar med en copywriter för ditt innehåll ska du se till att de är bekanta med SEO. Även om du inte är en SEO-expert bör du bekanta dig med ämnet så att du kan vara mer medveten om detta under din webbdesignprocess.

Vissa sökverktyg för nyckelord är komplicerade (särskilt om du är nybörjare inom SEO), men Ranktracker Keyword Finder är mycket enkelt och intuitivt: du lägger helt enkelt till nyckelorden i en lista och resultaten visas färgkodade efter svårighetsgrad. För bra SEO vill du välja nyckelord med låg konkurrens men med tillräcklig sökvolym, så det är mycket hjälpsamt att sökvolymerna visas direkt där.

Försök därför att få fram åtminstone ett utkast till formulering innan du börjar. Om du är en fristående designer är det troligt att du också måste hjälpa kunden att ta reda på var texten passar bäst på webbplatsen. En realitet i designprocessen är att formuleringen kan komma att ändras några gånger, men att ha något att börja med är så mycket bättre än ingenting alls.

Förenkla valen av typsnitt, färger, hierarkier och visuella element.

Om du är en mindre erfaren designer eller bara vill spara lite tid är det bra att arbeta med mallar och använda dem som grund. För ett CMS som WordPress finns det tusentals bra mallar till rimliga priser. Dessa har redan typsnitt, färger, hierarki och visuella element utformade i en sammanhängande stil. Om du är orolig för originaliteten kan du vara säker på att ditt resultat kommer att se annorlunda ut än mallen eftersom du anpassar den till dina wireframes. Att ha några designtillgångar och en allmän stil att börja med kan verkligen hjälpa dig att hitta en riktning och minska beslutströttheten. Ta inte med för många färger: Du kan säkert begränsa webbplatsens färger till två färger eller högst tre. Kolla in The 20 Best Color Combinations to Try on Your Website (De 20 bästa färgkombinationerna att prova på din webbplats ) för några bra idéer och trender när du väljer webbplatsfärger.

Slutsats: Maximering av effekten

Att veta var man ska fokusera kan hjälpa en designer att hantera sina perfektionistiska tendenser och ändå nå framgång. Pareto-principen är en tumregel inom webbdesign som säger att 80 % av användarupplevelsen kan uppnås med 20 % av ansträngningen. Detta innebär att webbdesigners måste fokusera sina ansträngningar på att optimera innehåll, designelement på sidan, användbarhet och andra faktorer för att skapa en effektiv webbplats som kommer att rankas väl i sökmotorerna.