• UI & UX

Principiul Pareto în web design - proiectați un site web mai eficient cu regula 80/20

  • Lene Wandrey
  • 1 min read
Principiul Pareto în web design - proiectați un site web mai eficient cu regula 80/20

Problema de a fi un perfecționist în web design

Perfecționismul poate fi o provocare pentru mulți designeri grafici și web. Efortul de a atinge excelența este admirabil, dar poate duce la o anumită frustrare cu schimbări și ajustări nesfârșite până când fiecare element al site-ului web este perfect. Pentru mulți designeri este ușor să se lase cuprinși de procesul de proiectare și să piardă noțiunea timpului în timp ce aleg caracterele tipografice, paletele de culori și se gândesc la sute de decizii de proiectare perfecte la nivel de pixel. Desigur, este important să livrezi o lucrare excelentă, dar, ca designer, este ușor să pierzi din vedere ce înseamnă acest lucru? Un site web nu ar trebui să fie despre obiectivele designerului, ci despre îndeplinirea rezultatului dorit de client și, în același timp, despre echilibrarea limitărilor de timp, resurse și energie. Fără constrângeri, un site web poate sfârși cu ușurință prin a fi supraproiectat, lent, cu prea multe elemente și caracteristici care îi derutează pe utilizatori. De asemenea, este dificil să se potrivească toate caracteristicile în timpul limitat, astfel încât designerul poate pur și simplu să nu mai aibă timp, iar faptul de a nu reuși să livreze un site web bun până la termenul limită este foarte stresant pentru toți cei implicați.

Ce este principiul Pareto?

Regula "80/20", numită uneori principiul Pareto, afirmă că 80% din efecte provin din 20% din cauze. Principiul Pareto a fost introdus pentru prima dată de un economist italian pe nume Vilfredo Pareto în 1895, când a observat că 80% din bogăția Italiei era deținută de doar 20% din populația sa. De asemenea, a observat că 20% din păstăile de mazăre din grădina sa produceau 80% din mazăre! Principiul Pareto sugerează că câteva elemente cheie sunt responsabile pentru producerea majorității unui anumit rezultat. De atunci, acesta a fost aplicat în multe alte domenii, inclusiv în afaceri, economie, psihologie și poate fi chiar practic în viața de zi cu zi.

Acest lucru se traduce bine și în exemple la scară mai mică; ai observat vreodată că majoritatea veniturilor tale provin de la o mână de clienți stabili? Sau că păreți să purtați mereu aceleași articole de îmbrăcăminte, în timp ce cea mai mare parte a garderobei dvs. nu este folosită? Deși raportul nu este întotdeauna exact 80/20 și există întotdeauna excepții, acesta este un instrument excelent pentru a-i ajuta pe oameni să identifice care sunt acțiunile care au cel mai mare impact asupra succesului lor și să le prioritizeze în consecință.

Principiul Pareto în web design și marketing digital

Principiul Pareto, aplicat la proiectarea web, presupune că majoritatea rezultatelor vor veni de la un număr mic de caracteristici cheie. În marketing, unele campanii vor avea rezultate mult mai bune decât altele. Pentru a obține cele mai bune rezultate, este logic să ne concentrăm mai întâi pe acest număr mic de caracteristici cheie și să ne asigurăm că acestea primesc cea mai mare atenție, în timp ce părțile mai puțin importante pot fi realizate mai repede. O modalitate de a utiliza principiul Pareto este să vă concentrați asupra experienței utilizatorului și a utilizabilității - acordând atenție modului în care utilizatorii interacționează cu conținutul dvs. online și asigurându-vă că pot găsi ceea ce au nevoie, este probabil să obțineți rezultate mai bune decât dacă v-ați concentra doar pe aspectul estetic. Aceasta ne învață că perfecțiunea nu este întotdeauna necesară și că este posibil să obținem un site web și mai eficient prin optimizarea celor 20% de caracteristici importante.

Ca exemplu, tocmai am analizat datele de trafic ale unui mic magazin de comerț electronic care vinde produse hand-made și am observat câteva tendințe Pareto. De exemplu, aproape toți vizitatorii lor accesează site-ul prin intermediul telefoanelor mobile. Majoritatea vânzărilor de produse provin dintr-un număr mic de categorii. Facebook a fost cea mai mare sursă de trafic din social media. Atunci când se examinează o hartă termică a paginii de produse, unele zone obțin mai multă implicare. Modelul tipic F poate fi oarecum observat, cu grupuri de interacțiuni în rândul de sus și în josul părții stângi a paginii.

Devices popularity

Dashboard with website analytics data

Ce se poate face cu aceste informații pentru a îmbunătăți vânzările pentru acest client?

În acest exemplu, cel mai rapid câștig ar fi îmbunătățirea experienței pe mobil a acestui site web, care a fost construit inițial pentru desktop. Ar putea fi examinate Heatmaps ale tuturor paginilor pentru a afla mai multe despre preferințele utilizatorilor. De exemplu, cele mai accesate întrebări din secțiunea Întrebări frecvente ar putea fi mutate pe pagina principală în loc să fie ascunse. Produsele cu profit ridicat ar putea fi prezentate în zonele de pagină în care este probabil să apară cele mai multe clicuri.

Întotdeauna începeți cu "De ce

Always start with the Why(Sursă imagine: Envato Elements)

Din experiența mea în industrie, am observat că mulți designeri sunt fericiți să accepte briefingul și să înceapă să lucreze la design, chiar dacă le lipsesc informații cheie legate de scopul proiectului. Poate că persoana care a compilat brief-ul a crezut că aceste informații erau implicite sau clientul nu le-a verbalizat în mod concis. Luați-vă un moment pentru a face un pas înapoi înainte de a începe să lucrați. Fără o înțelegere clară a motivului pentru care faceți ceea ce faceți, designul dvs. web va fi lipsit de direcție. Site-ul dvs. ar putea arăta bine pentru dvs. și chiar pentru client, dar, în ciuda numeroaselor dvs. ore, rezultatul va fi dezamăgitor dacă nu va atinge rezultatele anticipate de client.

Întrebați-vă: De ce există acest site? Cine vor fi utilizatorii finali ai site-ului web și cum vor interacționa cu acesta? Cum va crea site-ul web valoare și succes pentru clientul dumneavoastră? Cum va măsura clientul acest succes? Cum va atrage site-ul web vizitatori și cum va atrage clienți potențiali? Atunci când puteți răspunde la aceste întrebări și înțelegeți "De ce", vă va fi mai ușor să stabiliți prioritățile pentru "Ce" și "Cum" ale elementelor de design. Atunci când puteți vizualiza rezultatul dorit, vă va ajuta să vă concentrați energia asupra celor mai importante domenii pentru a obține acest lucru.

Adoptați abordarea produsului minim viabil în designul web

Cu atât de multe decizii de luat atunci când se proiectează un site web, poate fi dificil să știi de unde să începi. Abordarea produsului minim viabil (MVP) presupune construirea imediată doar a elementelor de bază ale unui site web și apoi perfecționarea continuă a acestora prin feedback-ul clienților de-a lungul timpului. Aceasta se face de obicei pentru a economisi costuri și timp sau atunci când o idee de afaceri se bazează pe multe ipoteze. În loc să încerce totul deodată, dezvoltatorii pot prioritiza caracteristicile pe baza nevoilor clienților și pot crea prototipuri cât mai curând posibil. Chiar și atunci când nu sunteți presați de timp sau de buget, îmbrățișarea site-ului web ca un MVP este o modalitate fantastică de a aplica principiul Pareto și de a combate tendințele perfecționiste. Din punct de vedere mental, te ajută să știi că ai putea oricând să adaugi mai multe caracteristici mai târziu, dar că ar trebui să te concentrezi pe cele mai importante elemente pentru moment.

Proiectarea pentru mobile-first vă poate ajuta să vă simplificați site-ul web

Atunci când proiectați un site web, doriți să le oferiți utilizatorilor o experiență eficientă și intuitivă. Cel mai bun mod de a realiza acest lucru este să proiectați cu o abordare de proiectare "mobile-first". Acest concept implică crearea de site-uri web care sunt optimizate mai întâi pentru dispozitivele mobile, mai degrabă decât site-uri web desktop care sunt adaptate pentru mobil. De ce este necesar acest lucru? În 2022, potrivit techjury.net, telefoanele mobile generează 60,66% din traficul pe site-urile web, în timp ce desktopurile și tabletele sunt responsabile împreună pentru 39,34%. Acest lucru ar putea varia în diferite industrii și pe diferite site-uri web, dar tendința merită să fie remarcată. Concentrându-vă designul pe versiunea mobilă a site-ului, puteți să puneți șansele de succes în favoarea dvs.

Odată ce începeți să proiectați pentru dispozitivele mobile, veți observa rapid că există mai puțin spațiu pentru formulări și dezordine. Este destul de greu să te adaptezi, dacă ai proiectat pentru desktopuri pentru o perioadă lungă de timp. Dar această abordare se potrivește bine cu principiul Pareto, deoarece vă ajută să alegeți conținutul cu cel mai mare impact. Acest lucru are două beneficii: site-ul dvs. va fi optimizat pentru platforma mobilă preferată de utilizatori, iar atunci când îl adaptați pentru desktop va avea un aspect vizual modern și curat. Va trebui să vă adaptați în continuare site-ul pentru desktop mai târziu, dar atunci când lucrați din abordarea mobile-first, acest lucru devine mult mai ușor, deoarece aveți deja un design simplificat.

Efectuați cercetări și analizați site-urile competitorilor

Atunci când vine vorba de designul web, ne gândim adesea la cercetare ca la o privire asupra altor site-uri web sau șabloane inspirate cu elemente de design frumoase. Dar cercetarea pentru designul web merge dincolo de simpla admirație a esteticii altor site-uri web. Este necesar să înțelegem modul în care oamenii folosesc web-ul, cum interacționează utilizatorii cu diferite modele și cum este organizat conținutul pentru a crea un site web eficient. Solicitând orice date analitice pe care clientul le poate furniza sau folosind un instrument de monitorizare precum Ranktracker, putem identifica mai bine zonele de oportunitate de îmbunătățire pentru un site web mai performant.

Cercetarea ar trebui să includă examinarea standardelor existente în industrie, a publicului țintă și a preferințelor utilizatorilor prin analiza concurenților. Puteți găsi concurenții întrebând clientul sau făcând propriile căutări și văzând ce site-uri web se află în top. Odată ce ați identificat unii concurenți, aveți nevoie de o sursă fiabilă de date despre aceștia. Una dintre caracteristicile mele preferate ale Ranktracker este posibilitatea de a adăuga proprii concurenți identificați, iar acesta va afișa performanța concurenților într-o coloană de lângă rezultatele propriului domeniu. Dacă un concurent vă depășește în clasament pentru propriile dvs. cuvinte cheie, merită să analizați site-ul lor pentru a învăța de la ei. Pentru a adăuga un concurent, trebuie doar să introduceți URL-ul acestuia.

Add competitors in Rank Tracker

Rank Tracker board

Faceți clic pentru un articol detaliat despre cum să efectuați o analiză a concurenței.

În timp ce faceți toate cercetările, faceți o "listă de vis" cu toate caracteristicile și elementele posibile pe care le-ați putea include (nu vă faceți griji, le veți restrânge, dar este util să aveți toate ideile la un loc).

Planificare: Identificarea caracteristicilor cheie de proiectare

Planning: Identifying Key Design Features(Sursa imaginii: Envato Elements)

Designul unui site web ar trebui să se bazeze pe scopul urmărit. Examinați toate elementele/caracteristicile din lista de vis și alegeți-le pe cele care credeți că îl vor ajuta pe clientul dvs. să își atingă scopul. Luați o hârtie albă și începeți să desenați câteva wireframe-uri aproximative pentru site-ul dvs. web. Pe wireframe-urile dvs., conectați fiecare element pe care intenționați să îl includeți la un rezultat: dacă nu puteți găsi un scop clar pentru acesta, renunțați la acea secțiune. Nu vă gândiți la estetica designului, ci concentrați-vă pe ceea ce este cel mai bine pentru experiența utilizatorului și utilizabilitate.

Contrar credinței populare, nu este necesar ca primele dvs. wireframe-uri să fie concepute cu un software de design sofisticat. Abordarea analogică a creionului și a hârtiei va funcționa foarte bine și, uneori, chiar mai bine, deoarece nu sunteți distras de software-ul în sine. Hârtia este mai iertătoare și mai puțin permanentă; este mai rapid de utilizat, ceea ce ar putea ajuta în timpul procesului creativ. În cazul în care trebuie să prezentați wireframe-uri clientului dumneavoastră, acest lucru poate fi făcut mai profesionist după ce ați lucrat la desenele brute.

Faceți mai întâi o machetă, nu proiectați în platforma web pentru a economisi timp.

O vorbă veche spune că nu poți pilota un avion în timp ce îl construiești. Acest lucru este valabil și pentru designul web: încercarea de a construi un site web în timp ce încă vă gândiți la deciziile privind conținutul, caracteristicile și designul este o rețetă pentru frustrare. Pentru ca lucrurile să rămână eficiente, aveți nevoie de un plan. Crearea unei machete a fiecărei pagini pare să consume mult timp și să fie contra-intuitivă în acest caz, dar servește mai multor scopuri și va economisi timp pe termen lung. Machetele îi permit clientului dumneavoastră să vizualizeze site-ul înainte ca dezvoltarea web să înceapă. Aceștia pot experimenta diferitele opțiuni de culori și fonturi și pot anticipa cu ușurință ceea ce trebuie schimbat. Discutarea unei machete creează o mulțime de oportunități pentru discuții și întrebări. Aceasta crește șansele ca clientul dvs. să fie mulțumit atunci când va vedea site-ul real pentru prima dată. Cel mai important, lucrul cu o machetă vă permite să construiți site-ul web mult mai rapid odată ce ajungeți la etapa de dezvoltare, deoarece aproape toate deciziile creative au fost deja luate.

Lucrați cu un conținut care se va clasa bine pe motoarele de căutare

Uneori, un client va insista să începeți proiectarea cu "text de tip placeholder", deoarece crede că rolul dumneavoastră este doar de a proiecta elementele estetice. Dacă este posibil, evitați să faceți orice lucrare de design cu text generic de tip "placeholder". În timp ce desenele dvs. ar putea arăta frumos, site-ul dvs. ar fi lipsit de scop dacă ați neglijat un ingredient cheie, cum ar fi conținutul bine scris.

Un site web este valoros doar dacă este vizitat, iar optimizarea pentru motoarele de căutare (SEO) este modul în care motoarele de căutare vă găsesc site-ul web în mod organic. Alegerile de formulare folosite pe o pagină sunt esențiale pentru SEO, iar elementele de design trebuie să susțină formularea. Dacă știți care sunt cuvintele cheie în avans, vă oferă o perspectivă suplimentară. Dacă lucrați cu un redactor pentru conținutul dvs., asigurați-vă că acesta este familiarizat cu SEO. Chiar dacă nu sunteți un expert în SEO, familiarizați-vă cu acest subiect pentru a fi mai conștient de acest lucru în timpul procesului de design web.

Unele instrumente de căutare a cuvintelor cheie sunt complicate (mai ales dacă sunteți nou în domeniul SEO), dar Ranktracker Keyword Finder este foarte simplu și intuitiv: pur și simplu adăugați cuvintele cheie într-o listă, iar rezultatele sunt afișate în funcție de dificultatea cuvintelor cheie, codificate prin culoare. Pentru un SEO bun, doriți să alegeți cuvinte cheie cu concurență scăzută, dar cu un volum de căutare adecvat, așa că este foarte util faptul că volumele de căutare sunt afișate chiar acolo.

Keyword Finder

Așadar, înainte de a începe, încercați să obțineți cel puțin o schiță a formulării. Dacă sunteți un designer de sine stătător, este probabil că va trebui, de asemenea, să ajutați clientul să își dea seama unde se potrivește cel mai bine formularea pe site. O realitate a procesului de proiectare este că această formulare s-ar putea schimba de câteva ori, dar a avea ceva de la care să începi este mult mai bine decât nimic.

Simplificați alegerile privind fonturile, culorile, ierarhia și elementele vizuale.

Dacă sunteți un designer mai puțin experimentat sau dacă doriți să economisiți timp, este util să lucrați cu șabloane și să le folosiți ca bază. Pentru un CMS precum WordPress, există mii de șabloane excelente la prețuri rezonabile. Acestea au deja fonturi, culori, ierarhie și elemente vizuale concepute într-un stil coerent. Dacă sunteți preocupat de originalitate, fiți sigur că rezultatul dvs. va arăta diferit față de șablon, deoarece îl adaptați la wireframe-urile dvs. Faptul de a avea câteva active de design și un stil general pentru început vă poate ajuta cu adevărat să vă găsiți direcția și să reduceți oboseala de a lua decizii. Nu includeți prea multe culori: puteți limita în siguranță culorile site-ului dvs. la 2 culori sau maxim 3. Consultați The 20 Best Color Combinations to Try on Your Website (Cele mai bune 20 de combinații de culori pe care să le încercați pe site-ul dvs. web) pentru câteva idei și tendințe excelente atunci când alegeți culorile site-ului web.

Concluzie: Maximizarea impactului

Știind unde să se concentreze, un designer poate ajuta un designer să își gestioneze tendințele perfecționiste și, în același timp, să atingă succesul. Principiul Pareto este o regulă empirică în domeniul designului web care afirmă că 80% din experiența utilizatorului poate fi obținută cu 20% din efort. Acest lucru înseamnă că designerii web trebuie să își concentreze eforturile pe optimizarea conținutului, a elementelor de design on-page, a utilizabilității și a altor factori pentru a crea un site web eficient care să se claseze bine în motoarele de căutare.

Lene Wandrey

Lene Wandrey

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

Încercați Ranktracker GRATUIT