Zaprojektuj lepszą stronę główną za pomocą StoryBrand Framework

Opublikowany: 2022-03-11

Strony domowe są jak witryny sklepowe. Powinny dać konsumentowi wyobrażenie o tym, czym zajmuje się firma, kto nią kieruje, a także przynajmniej wskazówkę o produktach i usługach, które oferuje, niezależnie od tego, czy są to rzeczywiste przedmioty na sprzedaż, informacje czy rozrywka.

Podobnie jak witryna sklepowa, projekty stron głównych mogą albo zachęcać ludzi do głębszego spojrzenia, albo mogą nie przyciągnąć uwagi odwiedzających (lub, co gorsza, aktywnie ich odciągnąć). Jasne przekazanie historii marki jest jedną z metod, z których mogą skorzystać projektanci UX, aby utrzymać ludzi na stronie i wystarczająco zaangażować, aby eksplorować poza stroną główną (struktura StoryBrand zapewnia do tego dobry plan).

Jaki jest cel strony głównej?

Celem strony docelowej jest konwersja odwiedzających, podczas gdy celem strony głównej jest zaangażowanie odwiedzających w markę i oferowanie rozwiązań ich problemów. Jeśli zostanie to zrobione skutecznie, odwiedzający stronę główną może zmienić się w klienta — potencjalnie stałego klienta.

Strony główne szybko się poprawiły w ciągu ostatnich kilku dekad dzięki analitykom oraz zespołom marketingowym i projektowym, które poprawiły wydajność na podstawie tych danych.

W 1993 roku, kiedy istniało tylko 600 stron internetowych, jedyną metodą pomiaru ruchu na stronie był dziennik serwera, który zliczał liczbę odwiedzających. Następnie pojawiły się liczniki trafień, a następnie bardziej wszechstronne pakiety analityczne, które dawały wgląd w takie rzeczy, jak unikalni użytkownicy, wyświetlenia strony i współczynniki odrzuceń.

Korzystając z tych danych analitycznych, projektanci UX są w stanie zoptymalizować umieszczanie wezwania do działania, poprawić szybkość witryny, testy A/B, wykorzystywać filmy do angażowania odwiedzających, używać wysokiej jakości obrazów, aby przyciągnąć uwagę ludzi, oraz dołączać narzędzia do przesyłania wiadomości w celu poprawy wydajności stronę główną. Czy jednak zagwarantuje to lojalność i zaufanie konsumentów?

Slack stosuje najlepsze praktyki projektowania strony głównej, aby stworzyć projekt zorientowany na użytkownika
Strona główna Slacka skupia się na korzyściach dla odwiedzających.

Trzy typowe pułapki podczas projektowania stron głównych

Firmy — a także projektanci rozszerzeń — napotykają trzy główne pułapki podczas tworzenia strony głównej:

  1. Nie skupiają się na ważnych rzeczach. Mówią ludziom wszystko o cechach ich usługi lub produktu. Ludzi to nie obchodzi. Chcą wiedzieć, że biznes rozwiąże ich problem i poprawi ich życie.
  2. Firmy nie przekazują jasno swojego przesłania. Jak mówi Tony Haile z Chartbeat, witryna ma mniej niż 15 sekund na przyciągnięcie uwagi odwiedzającego.
  3. Mają zły produkt, który nie rozwiązuje niczyich problemów. W takim przypadku projektant niewiele może zrobić dla firmy.

Co to jest platforma StoryBrand?

Wbrew temu, w co wierzą niektóre firmy, logo nie oznacza marki. Daleko stąd; marka jest obietnicą, za którą kryje się powód ich istnienia.

Ludzie wybierają jedną markę, a nie drugą, zarówno z powodów racjonalnych, jak i emocjonalnych. Silny przekaz marki może wytworzyć lojalność wobec samej marki, a nie tylko do poszczególnych produktów, które tworzy. Aby osiągnąć ten cel, niezbędne jest jasne i spójne przesłanie. Tym, co wyróżnia markę na tle konkurencji, jest historia marki.

Opowiadanie historii jest szeroko wykorzystywane przez przedsiębiorców do uwodzenia inwestorów na boiskach i portalach społecznościowych. Firmy takie jak Apple rozumieją i integrują moc jasnego, prostego opowiadania historii we wszystkim, co robią. Wiedzą, że to nie o nich; chodzi o ich klientów.

Apple zrozumiało stawianie klienta na pierwszym miejscu przed frameworkiem StoryBrand
Apple od dawna rozumie, jak ważne jest stawianie klienta na pierwszym miejscu, począwszy od swoich najwcześniejszych komputerów dla konsumentów.

Framework StoryBrand to formuła opowiadania historii stworzona przez Donalda Millera, aby pomóc firmom w prosty i jasny sposób komunikować ich najpotężniejsze wiadomości. W swojej książce Building a Story Brand , Miller stwierdza: „Twój klient powinien być bohaterem historii, a nie Twoją marką. To sekret, który rozumie każdy fenomenalnie odnoszący sukcesy biznes.”

Jak korzystać ze StoryBrand u klienta

Niezależnie od tego, czy jest to mała firma, czy marka warta wiele milionów dolarów, klient musi zrozumieć, że zdezorientowanie klientów będzie kosztować ich pieniądze. Wyjaśnienie ich przesłania za pomocą formuły StoryBrand, jak to określa Miller, „zorganizuje ich myślenie, zmniejszy wysiłki marketingowe, usunie zamieszanie, przestraszy konkurencję i w końcu sprawi, że ich biznes znów się rozwinie”.

Miller porównuje budowanie StoryBrand do pisania opowiadania do scenariusza. Rozkłada ją na siedem punktów fabuły.

Podstawowa struktura frameworku StoryBrand
Zdjęcie z filmu „Budowanie marki opowieści” autorstwa Donalda Millera.

Postać , która czegoś chce (osoba korzystająca ze strony) napotyka problem (swoją potrzebę), następnie spotyka się z przewodnikiem (biznes), który daje jej plan (wskazuje kolejne kroki) i wzywa do działania (przycisk wezwania do działania), co skutkuje historią sukcesu (kupują produkt) i pomaga im uniknąć porażki (przypomnienie, co by się stało, gdyby nie kupili).

Tę strukturę można rozpoznać w prawie każdym udanym filmie. Może również dotyczyć firmy i jej klientów. Następnym krokiem jest napisanie przez klienta historii marki zgodnie z tą strukturą:

  1. Postać : to klient jest zawsze bohaterem historii, a nie marka. Zadaniem projektantów UX jest ustalenie, czego klienci oczekują od marki, zwykle poprzez badania UX i testy użytkowników. Muszą skupić się na pragnieniach, które napędzają ludzi, takich jak oszczędzanie zasobów finansowych, oszczędzanie czasu, budowanie sieci społecznościowych lub zdobywanie statusu.
  2. Ma problem : Złoczyńca w wątku StoryBrand to problem postaci. Przydatne jest uosobienie tego problemu i zrozumienie, że produkty firmy są jak broń, której klient może użyć, aby go pokonać. Firmy zwykle koncentrują się na rozwiązywaniu problemów zewnętrznych, ale klienci kupują rozwiązania problemów wewnętrznych . Ludzie mają trzy poziomy konfliktu:
    - Zewnętrzne (większość firm próbuje rozwiązywać problemy zewnętrzne)
    - Wewnętrzne (takie jak frustracja, zastraszanie, niepewność)
    - Filozoficzne (dlaczego ta historia ma znaczenie?)
  3. I spotyka się z przewodnikiem : Przewodnik to firma lub marka. Klienci potrzebują kogoś, kto zajmie się problemem. Ich postrzeganie marki będzie miało kluczowe znaczenie dla ich zaufania. Należy przekazać dwie rzeczy:
    - Empatia (pokaż zrozumienie bólu, jaki może odczuwać klient)
    - Autorytet (da klientowi pewność, że marka jest w stanie mu pomóc)
  4. Kto daje im plan : firma pokazuje klientowi, co musi zrobić dalej. Klienci nadal nie są pewni, czy kupić, dopóki nie zostanie przedstawiony prosty plan działania. Projektanci UX mogą dokładnie określić kolejne kroki dla klientów. Mogą również złagodzić wszelkie obawy klienta, odnosząc się do obaw związanych z produktem lub usługą.
  5. I wzywa ich do działania : skuteczne wezwania do działania ułatwiają zakupy lub rejestrację.
  6. To pomaga im uniknąć niepowodzeń : Jaka jest stawka dla klienta? Co stracą, jeśli nie kupią od tej marki?
  7. I kończy się sukcesem : powiedz klientom, jak to konkretne działanie może zmienić ich życie. Pokaż im, jak będzie wyglądało ich życie po zakupie produktu i jak to postanowienie sprawi, że się poczują. Trzy solidne sposoby, w jakie narratorzy kończą historię, to umożliwienie postaci:
    - Wygraj władzę lub pozycję
    - Znajdź kogoś lub coś, co sprawi, że będą w całości
    - Doświadcz jakiejś formy samorealizacji, która również czyni je całościowymi

Arkusz roboczy StoryBrandPodstawowa struktura struktury StoryBrand
Obraz z StoryBrand Brandscript.

Jak korzystać ze StoryBrand Framework na stronie głównej

Strona główna nigdy nie powinna dotyczyć firmy. Powinna dotyczyć potencjalnego klienta.

Podobnie jak na pierwszej randce, wrażenia są ważne, a celem jest wzbudzenie zainteresowania. Projektanci UX muszą strategicznie podejść do tego, jakie treści są zawarte i jak są rozmieszczone. Przestrzeganie ram, jak wyjaśniono w poprzedniej sekcji, pomoże projektantom zapewnić umieszczenie właściwych komunikatów we właściwych miejscach.

Chociaż może to zabrzmieć w uproszczeniu, podczas projektowania strony głównej należy pamiętać o zaledwie pięciu ważnych elementach.

Nagłówek

Nagłówki, czasami używane w połączeniu z wciągającym obrazem, są umieszczane u góry strony głównej. W prawie każdym przypadku nagłówki powinny być zorientowane na klienta i pokazywać odwiedzającemu, że marka ma coś, co przynosi mu korzyści. Nagłówki powinny:

  • Komunikuj korzyści klientowi
  • Zidentyfikuj problem odwiedzającego i zapewnij go, że marka może go za niego rozwiązać
  • W jasny i zwięzły sposób opisz czym zajmuje się firma

Stwórz zaufanie, pokazując autorytet

Niezbędne jest pozycjonowanie firmy jako przewodnika i rozwiązania problemu klienta. Projektantom UX, którzy opanowali sztukę budowania zaufania, łatwiej będzie przekonać ludzi, że właśnie ta marka jest właściwym rozwiązaniem ich problemów. Mogą to zrobić poprzez:

  • W tym referencje od ważnych klientów, którzy polecają markę
  • Wyświetlanie logotypów firm, z którymi marka współpracowała
  • Pokazywanie konkretnych danych dotyczących liczby użytkowników, transakcji itp.
  • Zawiera nagrody i wyróżnienia, opublikowane prace, wystąpienia w mediach i podobne osiągnięcia
  • Pokazywanie zdjęć zespołu lub siedziby firmy

Najlepsze praktyki projektowania strony głównej: skoncentruj się na kliencie
Strona główna ZeBrand skupia się bezpośrednio na kliencie.

Wezwanie do działania

Stworzenie emocjonalnej więzi z odwiedzającymi stronę główną jest pierwszym krokiem do przekształcenia ich w klientów. Po nawiązaniu tego emocjonalnego związku, do wezwania do działania należy przypieczętowanie umowy.

Istnieją dwa rodzaje wezwań do działania:

  1. Bezpośrednie wezwania do działania są skierowane do osób, które wiedzą, że są gotowe do zakupu lub rejestracji, i zawierają sformułowania takie jak „Kup”, „Zarejestruj się” lub „Rozpocznij”. Kliknięcie tych wezwania do działania przeniesie kupującego bezpośrednio do formularza w celu sfinalizowania transakcji.
  2. Przejściowe wezwania do działania są przeznaczone dla użytkowników, którzy nie są jeszcze gotowi do zakupu. Mogą potrzebować więcej czasu i informacji, zanim się zaangażują. Są to przyciski typu „Więcej informacji”, „Wypróbuj za darmo” lub „Skontaktuj się”.

Niektóre wezwania do działania mogą łączyć te dwa elementy lub umieszczać je obok siebie (często postrzegane jako para przycisków „Kup teraz” i „Dowiedz się więcej”).

Wskazówki dotyczące projektowania strony głównej: kombinacja przycisków wezwania do działania
Canary Labs ma wyraźne wezwanie do działania, aby dokonać zakupu, a także mniej widoczny przycisk, aby uzyskać więcej informacji

Angażujące obrazy

Niezależnie od tego, jak poważna jest treść strony głównej, framework StoryBrand wymaga szczęśliwego zakończenia. Wybierając obrazy, pamiętaj, że niektóre z nich powinny dawać wrażenie „długo i szczęśliwie”.

Obrazy odwołują się do emocji odwiedzających, szczególnie obrazy szczęśliwych ludzi. Pokazywanie zdjęć szczęśliwych ludzi pomaga ludziom wyobrazić sobie, jak mogłoby wyglądać ich szczęśliwe zakończenie, gdyby dokonali zakupu.

Zasady projektowania strony głównej: obrazy ludzi przemawiają do emocji odwiedzających
Obrazy ludzi przemawiają do emocji odwiedzających.

Krótki tekst

Im mniej tekstu, tym lepiej. Wielu konsumentów nie czyta długich bloków tekstu, dlatego najlepiej przekazać komunikat marki w jak najmniejszej liczbie słów.

Projektanci UX powinni pomagać klientom w dzieleniu się swoją historią w najprostszy sposób.

Dobry projekt strony głównej zawiera mniej tekstu
Squarespace używa minimalnej ilości tekstu na swojej stronie głównej.

Udane strony główne Odpowiedz na kluczowe pytania

Udana strona główna będzie w stanie wzbudzić zainteresowanie odwiedzających w mniej niż pięć sekund. Stamtąd będzie miał około 15 sekund, aby odpowiedzieć na trzy pytania, które ludzie zadają sobie (często podświadomie) odwiedzając stronę główną:

  • Co oni robią?
  • Jak mogą mi pomóc?
  • Co muszę zrobić, aby kupić lub zaangażować się?

Projektanci UX mogą wykorzystać framework StoryBrand do stworzenia strony głównej, która natychmiast przyciągnie zainteresowanie i skutecznie odpowie na te pytania. Oferuje jasną drogę do sukcesu zarówno projektantowi, jak i marce.


Pozwól nam wiedzieć co myślisz! Zostaw swoje przemyślenia, komentarze i opinie poniżej.

• • •

Dalsza lektura na blogu Toptal Design:

  • Czy wszystkie trendy są tego warte? 5 najczęstszych błędów UX, które popełniają projektanci stron internetowych
  • Jak zaprojektować skuteczną stronę docelową
  • Stworzony do konwersji — sprawdzone metody projektowania strony docelowej
  • Kompletny przewodnik po projektowaniu witryn eCommerce
  • Kompleksowy przewodnik po architekturze informacji