• UI I UX

Zasada Pareto w projektowaniu stron internetowych - zaprojektuj skuteczniejszą stronę internetową dzięki zasadzie 80/20

  • Lene Wandrey
  • 8 min read
Zasada Pareto w projektowaniu stron internetowych - zaprojektuj skuteczniejszą stronę internetową dzięki zasadzie 80/20

Problem bycia perfekcjonistą w projektowaniu stron internetowych

Perfekcjonizm może być wyzwaniem dla wielu projektantów graficznych i internetowych. Dążenie do doskonałości jest godne podziwu, ale może prowadzić do frustracji z niekończących się zmian i poprawek, aż każdy element strony internetowej jest idealny. Dla wielu projektantów jest to łatwe, aby uzyskać pochłonięty w procesie projektowania i stracić poczucie czasu podczas wybierania krojów pisma, palety kolorów i mulling nad setkami pixel-perfect decyzji projektowych. Jasne, ważne jest, aby dostarczyć świetną pracę, ale jako projektant łatwo stracić orientację, co to oznacza? Strona internetowa nie powinna być o celach projektanta, powinna być o spełnianiu pożądanego wyniku klienta, a jednocześnie równoważeniu ograniczeń czasu, zasobów i energii. Przy braku ograniczeń strona może łatwo skończyć jako przeinżynierowana, powolna, ze zbyt dużą ilością elementów i funkcji, które dezorientują użytkowników. Trudno też zmieścić wszystkie funkcje w ograniczonym czasie, więc projektantowi może po prostu zabraknąć czasu, a niedostarczenie dobrej strony w terminie jest bardzo stresujące dla wszystkich zaangażowanych.

Co to jest zasada Pareto?

Zasada 80/20", zwana czasem zasadą Pareto, mówi, że 80% efektów pochodzi z 20% przyczyn. Zasada Pareto została po raz pierwszy wprowadzona przez włoskiego ekonomistę Vilfredo Pareto w 1895 roku, kiedy zauważył, że 80% bogactwa Włoch było w posiadaniu tylko 20% ich populacji. Zauważył również, że 20% strąków grochu w jego ogrodzie wyprodukowało 80% grochu! Zasada Pareto sugeruje, że kilka kluczowych elementów jest odpowiedzialnych za wytworzenie większości danego wyniku. Od tego czasu została ona zastosowana w wielu innych dziedzinach, w tym w biznesie, ekonomii, psychologii, a nawet może być praktyczna w życiu codziennym.

Czy kiedykolwiek zauważyłeś, że większość twoich dochodów pochodzi od garstki tych samych stałych klientów? Albo że zawsze nosisz te same ubrania, podczas gdy większość twojej garderoby nie jest używana? Chociaż stosunek ten nie zawsze jest dokładnie 80/20 i zawsze są wyjątki, jest to świetne narzędzie, które pomaga ludziom zidentyfikować, które działania mają największy wpływ na ich sukces i odpowiednio je uszeregować.

Zasada Pareto w projektowaniu stron internetowych i marketingu cyfrowym

Zasada Pareto stosowana w projektowaniu stron internetowych, zakłada, że większość wyników będzie pochodzić z niewielkiej liczby kluczowych cech. W marketingu, niektóre kampanie będą działać znacznie lepiej niż inne. Aby osiągnąć najlepszy wynik, sensowne jest skupienie się najpierw na tej niewielkiej liczbie kluczowych cech i zapewnienie, że poświęci się im najwięcej uwagi, podczas gdy mniej ważne części mogą być wykonane szybciej. Jednym ze sposobów wykorzystania zasady Pareto jest skupienie się na doświadczeniu użytkownika i użyteczności - zwracając uwagę na to, w jaki sposób użytkownicy wchodzą w interakcję z treściami online i upewniając się, że mogą znaleźć to, czego potrzebują, prawdopodobnie uzyskasz większe korzyści niż gdybyś skupił się tylko na estetyce. Uczy nas, że perfekcja nie zawsze jest konieczna i że można osiągnąć jeszcze większą skuteczność strony internetowej poprzez optymalizację ważnych 20% funkcji.

Jako przykład, właśnie spojrzeliśmy na dane dotyczące ruchu w małym sklepie ecommerce, który sprzedaje ręcznie robione produkty i zauważyliśmy kilka trendów Pareto. Na przykład, prawie wszyscy ich goście uzyskują dostęp do witryny za pośrednictwem urządzeń mobilnych. Większość sprzedaży produktów pochodzi z niewielkiej liczby kategorii. Facebook był ich największym źródłem ruchu w mediach społecznościowych. Podczas badania mapy ciepła strony produktu, niektóre obszary otrzymują więcej zaangażowania. Typowy wzór F może być nieco obserwowany, z klastrami interakcji w górnym rzędzie i w dół po lewej stronie strony.

Devices popularity

Dashboard with website analytics data

Co można zrobić z tymi informacjami, aby poprawić sprzedaż dla tego klienta?

W tym przykładzie, najszybszą wygraną byłoby poprawienie doświadczenia mobilnego tej strony, która została pierwotnie zbudowana dla komputerów stacjonarnych. Mapy cieplne wszystkich stron mogą zostać zbadane, aby dowiedzieć się więcej o preferencjach użytkowników. Na przykład, najczęściej klikane pytania z sekcji FAQ mogłyby zostać przeniesione na stronę główną zamiast ukryte. Produkty przynoszące duże zyski mogłyby zostać umieszczone w tych obszarach strony, w których prawdopodobnie pojawi się najwięcej kliknięć.

Zawsze zaczynaj od "dlaczego

Always start with the Why (Źródło obrazu: Envato Elements)

Z mojego doświadczenia w branży wynika, że wielu projektantów chętnie przyjmuje brief i rozpoczyna pracę nad projektem, nawet jeśli brakuje w nim kluczowych informacji związanych z celem projektu. Być może osoba opracowująca brief myślała, że te informacje są dorozumiane, lub klient nie zwerbalizował ich w sposób zwięzły. Poświęć chwilę, aby cofnąć się przed rozpoczęciem pracy. Bez jasnego zrozumienia, dlaczego robisz to, co robisz, twój projekt strony internetowej będzie pozbawiony kierunku. Twoja strona może wyglądać dobrze dla Ciebie, a nawet dla klienta, ale pomimo wielu godzin pracy, wynik będzie rozczarowujący, jeśli nie osiągnie oczekiwanych przez klienta rezultatów.

Poznaj Ranktracker

Platforma "wszystko w jednym" dla skutecznego SEO

Za każdym udanym biznesem stoi silna kampania SEO. Ale z niezliczonych narzędzi optymalizacji i technik tam do wyboru, może być trudno wiedzieć, gdzie zacząć. Cóż, nie obawiaj się więcej, ponieważ mam właśnie coś, co może pomóc. Przedstawiamy Ranktracker - platformę all-in-one dla skutecznego SEO.

W końcu otworzyliśmy rejestrację do Ranktrackera całkowicie za darmo!

Załóż darmowe konto

Lub Zaloguj się używając swoich danych uwierzytelniających

Zadaj sobie pytanie: Dlaczego ta witryna istnieje? Kim będą użytkownicy końcowi strony i jak będą wchodzić w interakcje na stronie? W jaki sposób strona będzie tworzyć wartość i sukces dla Twojego klienta? Jak klient będzie mierzył ten sukces? W jaki sposób strona będzie przyciągać odwiedzających i pozyskiwać leady? Kiedy potrafisz odpowiedzieć na te pytania i rozumiesz "dlaczego", łatwiej będzie Ci ustalić priorytety "co" i "jak" elementów projektu. Kiedy możesz zwizualizować pożądany wynik, pomoże Ci to skoncentrować swoją energię na najważniejszych obszarach, aby go osiągnąć.

Przyjęcie podejścia minimalnego produktu wykonalnego w projektowaniu stron internetowych

Przy tak wielu decyzjach do podjęcia podczas projektowania strony internetowej, może być trudno wiedzieć od czego zacząć. Podejście minimum viable product (MVP) polega na budowaniu od razu tylko podstawowych elementów strony, a następnie ciągłym ich udoskonalaniu poprzez opinie klientów w czasie. Zazwyczaj robi się to, aby zaoszczędzić koszty i czas, lub gdy pomysł biznesowy opiera się na wielu założeniach. Zamiast próbować wszystkiego na raz, programiści mogą nadawać priorytety funkcjom w oparciu o potrzeby klientów i tworzyć prototypy tak szybko, jak to możliwe. Nawet jeśli nie jesteś pod presją czasu lub budżetu, ogarnięcie strony jako MVP jest fantastycznym sposobem na zastosowanie zasady Pareto i zwalczenie tendencji perfekcjonistycznych. Mentalnie pomaga świadomość, że zawsze możesz dodać więcej funkcji później, ale na razie powinieneś skupić się na najważniejszych elementach.

Projektowanie dla mobile-first może pomóc Ci uprościć Twoją stronę internetową

Projektując stronę internetową, chcesz zapewnić użytkownikom efektywne i intuicyjne doświadczenie. Najlepszym sposobem na osiągnięcie tego celu jest projektowanie z podejściem "mobile-first". Koncepcja ta polega na tworzeniu stron internetowych, które są zoptymalizowane pod kątem urządzeń mobilnych w pierwszej kolejności, a nie stron desktopowych, które są dostosowane do mobile. Dlaczego jest to konieczne? W 2022 roku, według techjury.net, telefony komórkowe generują 60,66% ruchu na stronach internetowych, podczas gdy desktopy i tablety łącznie odpowiadają za 39,34%. Może się to różnić w różnych branżach i na różnych stronach internetowych, ale warto zwrócić uwagę na ten trend. Skupiając swój projekt na mobilnej wersji strony, możesz zwiększyć szanse na sukces na swoją korzyść.

Kiedy zaczniesz projektować dla urządzeń mobilnych, szybko zauważysz, że jest mniej miejsca na słowa i bałagan. Jest to dość trudne do zaadaptowania, jeśli przez długi czas projektowałeś dla komputerów stacjonarnych. Jednak takie podejście dobrze wpisuje się w zasadę Pareto, ponieważ pomaga wybrać treści o największym wpływie. Ma to dwie korzyści: Twoja strona będzie zoptymalizowana pod kątem platformy mobilnej preferowanej przez użytkowników, a gdy dostosujesz ją do komputerów stacjonarnych, będzie wizualnie wyglądać nowocześnie i czysto. W dalszym ciągu będziesz musiał dostosować swoją stronę do komputerów stacjonarnych, ale podczas pracy z podejściem mobile-first staje się to znacznie łatwiejsze, ponieważ masz już uproszczony projekt.

Zrób badania i przeanalizuj strony konkurencji

Jeśli chodzi o projektowanie stron internetowych, często myślimy o badaniach jako patrząc na inne inspirujące strony internetowe lub szablony z pięknymi elementami projektowymi. Ale badania dla web designu wykraczają poza samo podziwianie estetyki innych stron internetowych. Konieczne jest zrozumienie, jak ludzie korzystają z sieci, jak użytkownicy wchodzą w interakcje z różnymi projektami i jak treść jest zorganizowana, aby stworzyć skuteczną stronę internetową. Prosząc o wszelkie dane analityczne, które klient może dostarczyć lub używając narzędzia monitorującego, takiego jak Ranktracker, możemy lepiej zidentyfikować obszary, które można poprawić, aby uzyskać lepiej działającą stronę internetową.

Badania powinny obejmować zbadanie istniejących standardów branżowych, docelowych odbiorców i preferencji użytkowników poprzez analizę konkurencji. Konkurencję można znaleźć pytając klienta, lub robiąc własne wyszukiwania i widząc, które strony internetowe plasują się na szczycie. Kiedy już zidentyfikujesz kilku konkurentów, potrzebujesz wiarygodnego źródła danych na ich temat. Jedną z moich ulubionych funkcji Ranktrackera jest możliwość dodania własnych zidentyfikowanych konkurentów, a on wyświetli wyniki konkurencji w kolumnie obok wyników Twojej własnej domeny. Jeśli konkurent wyprzedza Cię dla Twoich własnych słów kluczowych, warto przeanalizować jego stronę, aby się od niego uczyć. Aby dodać konkurenta, wystarczy wkleić jego adres URL.

Add competitors in Rank Tracker

Rank Tracker board

Kliknij, aby przeczytać świetny, dogłębny artykuł o tym, jak przeprowadzić analizę konkurencji.

Poznaj Ranktracker

Platforma "wszystko w jednym" dla skutecznego SEO

Za każdym udanym biznesem stoi silna kampania SEO. Ale z niezliczonych narzędzi optymalizacji i technik tam do wyboru, może być trudno wiedzieć, gdzie zacząć. Cóż, nie obawiaj się więcej, ponieważ mam właśnie coś, co może pomóc. Przedstawiamy Ranktracker - platformę all-in-one dla skutecznego SEO.

W końcu otworzyliśmy rejestrację do Ranktrackera całkowicie za darmo!

Załóż darmowe konto

Lub Zaloguj się używając swoich danych uwierzytelniających

Podczas gdy robisz wszystkie swoje badania, zrób "listę marzeń" wszystkich możliwych funkcji i elementów, które możesz zawrzeć (nie martw się, zawęzisz je, ale pomocne jest posiadanie wszystkich pomysłów razem).

Planowanie: Identyfikacja kluczowych cech projektu

Planning: Identifying Key Design Features (Źródło obrazu: Envato Elements)

Projekt strony internetowej powinien wynikać z jej przeznaczenia. Przyjrzyj się wszystkim elementom/funkcjom z listy marzeń i wybierz te, które Twoim zdaniem pomogą Twojemu klientowi osiągnąć jego cel. Weź czystą kartkę papieru i zacznij rysować zgrubne schematy dla swojej strony. Na swoich makietach połącz każdy element, który planujesz zamieścić z rezultatem: jeśli nie możesz znaleźć dla niego jasnego celu, wyrzuć tę sekcję. Nie myśl o estetyce projektu, skup się na tym, co jest najlepsze dla doświadczenia użytkownika i użyteczności.

Wbrew powszechnemu przekonaniu, Twoje pierwsze makiety nie muszą być zaprojektowane za pomocą wymyślnego oprogramowania. Analogowe podejście ołówka i papieru będzie działać dobrze, a czasami nawet lepiej, ponieważ nie jesteś rozpraszany przez samo oprogramowanie. Papier jest bardziej wyrozumiały i mniej trwały; jest szybszy w użyciu, co może pomóc podczas procesu twórczego. Jeśli musisz zaprezentować klientowi makiety, możesz to zrobić bardziej profesjonalnie, gdy już przepracujesz wstępne rysunki.

Zrób najpierw makietę, nie projektuj w platformie internetowej, aby zaoszczędzić czas

Jest takie stare powiedzenie, że nie można latać samolotem, kiedy się go buduje. Jest to prawda w przypadku projektowania stron internetowych: próbując zbudować stronę internetową, podczas gdy wciąż zastanawiasz się nad decyzjami dotyczącymi treści, funkcji i projektu, to przepis na frustrację. Aby wszystko przebiegało sprawnie, potrzebujesz planu. Tworzenie makiety każdej strony wydaje się czasochłonne i sprzeczne z intuicją, ale służy wielu celom i pozwoli zaoszczędzić czas na dłuższą metę. Makiety umożliwiają Twojemu klientowi wizualizację strony internetowej, zanim jeszcze rozpocznie się jej tworzenie. Mogą doświadczyć różnych opcji kolorów i czcionek, i łatwo przewidzieć, co trzeba zmienić. Omawianie makiety stwarza wiele okazji do dyskusji i pytań. To zwiększa szanse, że twój klient będzie zadowolony, gdy zobaczy stronę na żywo po raz pierwszy. Co najważniejsze, praca z makietą pozwala na znacznie szybsze budowanie strony po przejściu do etapu rozwoju, ponieważ prawie wszystkie decyzje twórcze zostały już podjęte.

Pracuj z treściami, które będą dobrze oceniane w wyszukiwarkach.

Zdarza się, że klient będzie nalegał, abyś rozpoczął projektowanie od "placeholder text", ponieważ uważa, że Twoją rolą jest jedynie zaprojektowanie elementów estetycznych. Jeśli to możliwe, unikaj wykonywania jakichkolwiek prac projektowych z generycznym tekstem placeholder. Podczas gdy Twoje projekty mogą wyglądać pięknie, Twoja strona będzie pozbawiona celu, jeśli zaniedbasz kluczowy składnik, jakim jest dobrze napisana treść.

Poznaj Ranktracker

Platforma "wszystko w jednym" dla skutecznego SEO

Za każdym udanym biznesem stoi silna kampania SEO. Ale z niezliczonych narzędzi optymalizacji i technik tam do wyboru, może być trudno wiedzieć, gdzie zacząć. Cóż, nie obawiaj się więcej, ponieważ mam właśnie coś, co może pomóc. Przedstawiamy Ranktracker - platformę all-in-one dla skutecznego SEO.

W końcu otworzyliśmy rejestrację do Ranktrackera całkowicie za darmo!

Załóż darmowe konto

Lub Zaloguj się używając swoich danych uwierzytelniających

Strona internetowa jest wartościowa tylko wtedy, gdy jest odwiedzana, a Search Engine Optimization (SEO) to sposób, w jaki wyszukiwarki znajdują Twoją stronę organicznie. Wybór słów kluczowych na stronie jest kluczowy dla SEO, a elementy projektu powinny wspierać te słowa. Jeśli wiesz, co słowa kluczowe są z góry, to daje dodatkowy wgląd. Jeśli pracujesz z copywriterem nad swoją treścią, upewnij się, że jest on zaznajomiony z SEO. Nawet jeśli nie jesteś ekspertem od SEO, zapoznaj się z tym tematem, abyś mógł być bardziej świadomy podczas procesu projektowania stron internetowych.

Niektóre narzędzia do wyszukiwania słów kluczowych są skomplikowane (zwłaszcza jeśli jesteś początkujący w SEO), ale Ranktracker Keyword Finder jest bardzo prosty i intuicyjny: po prostu dodajesz słowa kluczowe do listy i wyświetla wyniki oznaczone kolorem według trudności słowa kluczowego. Dla dobrego SEO chcesz wybrać słowa kluczowe z niską konkurencją, ale odpowiednim wolumenem wyszukiwania, więc bardzo pomocne jest to, że wolumeny wyszukiwania są wyświetlane właśnie tam.

Keyword Finder

Tak więc, zanim zaczniesz, spróbuj uzyskać co najmniej szkic sformułowania. Jeśli jesteś samodzielnym projektantem, to prawdopodobnie trzeba będzie również pomóc klientowi dowiedzieć się, gdzie sformułowanie pasuje najlepiej na stronie internetowej. Rzeczywistość procesu projektowania jest to, że to sformułowanie może zmienić kilka razy, ale o coś, aby rozpocząć z jest tak wiele lepiej niż nic w ogóle.

Uproszczenie wyborów dotyczących czcionek, kolorów, hierarchii i elementów wizualnych

Jeśli jesteś mniej doświadczonym projektantem lub po prostu chciałbyś zaoszczędzić trochę czasu, pomocna jest praca z szablonami i używanie ich jako fundamentu. Dla systemu CMS takiego jak WordPress, istnieją tysiące świetnych szablonów w rozsądnych cenach. Mają one już czcionki, kolory, hierarchię i elementy wizualne zaprojektowane w spójnym stylu. Jeśli obawiasz się o oryginalność, bądź pewien, że Twój rezultat będzie wyglądał inaczej niż szablon, ponieważ dostosowujesz go do swoich wireframe'ów. Posiadanie pewnych zasobów projektowych i ogólnego stylu na początek może naprawdę pomóc Ci znaleźć kierunek i zmniejszyć zmęczenie decyzyjne. Nie włączaj zbyt wielu kolorów: możesz bezpiecznie ograniczyć kolory swojej strony do 2 kolorów lub maksymalnie 3. Sprawdź The 20 Best Color Combinations to Try on Your Website dla niektórych wspaniałych pomysłów i trendów przy wyborze kolorów strony.

Wnioski: Maksymalizacja wpływu

Wiedza o tym, gdzie należy się skupić, może pomóc projektantowi zarządzać swoimi perfekcjonistycznymi tendencjami, jednocześnie osiągając sukces. Zasada Pareto jest zasadą w projektowaniu stron internetowych, która mówi, że 80% doświadczenia użytkownika może być osiągnięte przy 20% wysiłku. Oznacza to, że projektanci stron internetowych muszą skupić swoje wysiłki na optymalizacji treści, elementów projektu na stronie, użyteczności i innych czynników, aby stworzyć skuteczną stronę internetową, która będzie dobrze oceniana w wyszukiwarkach.

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

Zacznij używać Ranktrackera... Za darmo!

Dowiedz się, co powstrzymuje Twoją witrynę przed zajęciem miejsca w rankingu.

Załóż darmowe konto

Lub Zaloguj się używając swoich danych uwierzytelniających

Different views of Ranktracker app