Pierwszy ekran strony: czy w pięć sekund wiadomo, co robisz i dla kogo

Pierwszy ekran to nie kwestia gustu, tylko test zrozumienia. Człowiek trafia na stronę z reklamy albo z wyszukiwarki, patrzy chwilę na to, co widać bez przewijania, i decyduje, czy czytać dalej. Jeśli nie wie wtedy, co sprzedajesz i czy to jest dla niego, reszta strony przestaje mieć znaczenie.

Poradniki na ten temat kończą się na wytycznych: krótki nagłówek, jeden przycisk, hierarchia wizualna, kontrast. Zasada mówi jednak, jak coś zaprojektować, a nie czy twoja wersja działa. Ten tekst jest wyłącznie o drugiej części i wyłącznie o obszarze widocznym bez przewijania.

Świadomie nie podajemy liczb w rodzaju „masz trzy sekundy” ani rzekomych progów uwagi. Takie wartości krążą po poradnikach bez źródła i nie przenoszą się między branżami — inaczej czyta stronę ktoś, kto szuka usługi od tygodnia, a inaczej ktoś prosto z reklamy.

Trzy pytania, na które pierwszy ekran musi odpowiedzieć

Cała robota pierwszego ekranu sprowadza się do trzech odpowiedzi. Nie do wrażenia i nie do estetyki — do trzech informacji, które ktoś obcy musi z niego wyjąć bez wysiłku.

1. Co to jest.Rzeczownikowa odpowiedź na pytanie, czym się zajmujesz: „księgowość dla jednoosobowych firm”, „montaż pomp ciepła”. Nie obietnica efektu, tylko nazwa rzeczy — obietnica bez nazwy zostawia człowieka w domysłach.
2. Dla kogo.Kto jest adresatem i kto nim nie jest: wielkość firmy, branża, region, etap sprawy. Dla właściwej osoby to sygnał „to jest o mnie” i dopiero on uruchamia czytanie dalej.
3. Co dalej.Jedna akcja, jednoznacznie nazwana, wyraźnie ważniejsza od pozostałych. Nie trzy równorzędne przyciski i nie „dowiedz się więcej”, tylko czynność zrozumiała przed kliknięciem.

Brzmi banalnie i dlatego rzadko jest sprawdzane. W praktyce większość pierwszych ekranów odpowiada na jedno pytanie z trzech — nie z niedbalstwa, tylko dlatego, że zespół zna kontekst i nie widzi luki.

• Nagłówek o wartościach, nie o produkcie„Tworzymy rozwiązania, które zmieniają sposób pracy” brzmi dostojnie i nie mówi, co dostaniesz. Odpowiedź trzeba wtedy wyłuskać z dalszej części strony.
• Zdjęcie zamiast zdaniaDuża fotografia zespołu zajmuje większość ekranu, a jedynym tekstem jest nazwa firmy. Obraz nie odpowiada na żadne z trzech pytań, bo pasuje do dowolnej branży.
• Adresat rozmyty do zera„Dla firm każdej wielkości” nikogo nie wyklucza i nikogo nie przekonuje. Konkretny odbiorca nie rozpoznaje w tym siebie.
• Kilka równorzędnych akcjiKontakt, cennik, demo i blog w jednej linii. Jeżeli wszystko jest ważne, człowiek nie wybiera nic.

Test pięciu sekund, który zrobisz sam

To najtańsza metoda weryfikacji, jaką znam, i jedna z niewielu do przeprowadzenia bez narzędzi i budżetu. Pokazujesz komuś pierwszy ekran na krótko, zasłaniasz go i pytasz, co zapamiętał. Trudność leży w dyscyplinie: nie podpowiadać, nie tłumaczyć, nie bronić.

1. Zrób zrzut ekranu, nie otwieraj strony.Dwa zrzuty — jeden z komputera, jeden z telefonu — obejmujące dokładnie tyle, ile widać bez przewijania. Otwarta strona kusi do przewinięcia i psuje test.
2. Znajdź pięć osób spoza firmy.Ktokolwiek, kto nie zna waszej oferty. Pięć osób wystarczy, żeby powtarzalne odpowiedzi stały się widoczne.
3. Powiedz jedno zdanie kontekstu.„Zaraz pokażę ci na chwilę fragment strony internetowej”. Nic więcej — nie mów, czyja to strona ani z jakiej branży. Każde słowo więcej to podpowiedź.
4. Pokaż na pięć sekund i zasłoń.Odlicz i zamknij obraz. Nie pozwalaj na drugie spojrzenie, nawet gdy ktoś prosi — prośba o powtórkę sama w sobie jest wynikiem.
5. Zadaj pytania w ustalonej kolejności.Zawsze te same i zawsze w tej samej kolejności, zapisywane dosłownie. Nie parafrazuj odpowiedzi w notatkach.

Pytania po zasłonięciu ekranu są ważniejsze niż sam pokaz. Trzy pierwsze sprawdzają trzy odpowiedzi, dwa kolejne wyłapują to, czego nie widać w danych.

• Czym zajmuje się ta firma — powiedz własnymi słowami, bez używania słów ze strony.
• Dla kogo to jest, kto jest tu klientem.
• Co można na tej stronie zrobić, gdybyś chciał iść dalej.
• Co zapamiętałeś jako pierwsze — jaki element albo jakie słowo.
• Czy coś było niejasne albo dziwne.

Wynik czyta się prosto. Jeśli trzy z pięciu osób nie potrafią powiedzieć, czym się zajmujesz, żadna zmiana koloru przycisku tego nie naprawi. Jeśli wszyscy nazywają branżę, ale nikt nie wie, dla kogo to jest, problem leży w adresacie. Zapisuj cytaty, nie oceny — „coś z fakturami dla małych firm” to informacja, „chyba było spoko” nie jest niczym.

Test pięciu sekund to praktyka badawcza, nie funkcja Meetlead — wystarczy zrzut ekranu, stoper i notatnik. Jeżeli chcesz rozszerzyć go o zadania wykonywane na żywo, sposób prowadzenia takich sesji opisujemy w tekście o testach użyteczności strony.

Ile naprawdę widać bez przewijania

Największe nieporozumienie brzmi: „pierwszy ekran kończy się w tym miejscu”. Nie kończy się w żadnym jednym miejscu. Linia zgięcia to nie liczba, tylko rozkład — inny na telefonie w pionie, inny na laptopie, inny na dużym monitorze. Ta sama sekcja u jednej osoby mieści się w całości, u drugiej jest ucięta w połowie zdania.

Do tego dochodzi to, co zjada miejsce, zanim treść zdąży się pojawić. Projekt oglądany w narzędziu graficznym nie ma paska adresu, banera zgód ani powiadomienia o promocji — a strona w realnym użyciu ma je wszystkie naraz.

• Pasek przeglądarki i systemuNa telefonie zabiera pas u góry i często drugi u dołu — kilkanaście procent wysokości ekranu, których nigdy nie widać w makiecie.
• Baner zgódBywa największym elementem pierwszego ekranu i na telefonie potrafi przykryć nagłówek razem z przyciskiem. Do momentu decyzji człowiek ogląda okno zgód, nie twoją ofertę.
• Przyklejony nagłówek i pasek promocyjnyStałe menu oraz belka o wysyłce czy rabacie odbierają kolejne pasy. Zwykle ustawiane raz i nigdy nieliczone jako część pierwszego ekranu.
• Elementy pływająceLauncher czatu, przycisk oddzwonienia, ikona powrotu na górę. Na telefonie potrafią zasłonić przycisk główny, jeśli oba są w tym samym rogu.

Dane odpowiadają na to pytanie wprost, pod jednym warunkiem: muszą być rozdzielone na urządzenia. Mapa przewijania pokazuje, do której wysokości dociera jaki odsetek odwiedzających, a mapa kliknięć — czy przycisk główny jest w ogóle klikany. Techniki czytania samych map opisujemy w poradniku o tym, jak czytać mapy ciepła, a różnice na małym ekranie — w tekście o konwersji na urządzeniach mobilnych.

Osobna sprawa to menu: na telefonie chowa się pod ikoną, więc nie może przenosić odpowiedzi na żadne z trzech pytań — diagnozę samej nawigacji prowadzimy w tekście o nawigacji na stronie. Tutaj wystarczy jedna zasada: jeśli trzeba otworzyć szufladę, żeby zrozumieć, czym się zajmujesz, pierwszy ekran nie zdał egzaminu.

Slogany, które nic nie znaczą

Sprawdzian pustego hasła jest prosty: jeśli twój nagłówek da się bez zmiany przenieść na stronę firmy z innej branży, to nie jest nagłówek, tylko wypełniacz. Druga wersja tego testu: czy konkurencja mogłaby napisać coś przeciwnego. Nikt nie napisze „rozwiązania niekompleksowe”, więc „kompleksowe rozwiązania” nie niosą informacji.

Właściwych słów zwykle nie trzeba wymyślać — one już krążą wokół firmy: zapytania z wyszukiwarki, treść rozmów na czacie, pierwsze zdania zgłoszeń. Jeżeli klienci sami piszą „czy robicie przeglądy powypadkowe”, masz gotowy fragment nagłówka w ich języku.

Gdy oferta jest zbyt złożona na jedno zdanie

Najczęstsza obrona przed konkretnym nagłówkiem brzmi: „robimy zbyt wiele rzeczy, żeby zmieścić to w jednym zdaniu”. Czasem to prawda — firma obsługuje trzy różne grupy klientów, sklep ma cztery kategorie bez wspólnego mianownika. Rozwiązaniem nie jest wtedy dłuższe zdanie, tylko inna konstrukcja pierwszego ekranu.

1. Nazwij kategorię, nie wszystkie usługi.Jedno zdanie o obszarze działania plus wyraźny podział niżej. „Obsługa techniczna budynków” mówi więcej niż wyliczanka sześciu specjalizacji wciśnięta w nagłówek.
2. Zrób rozgałęzienie na samej górze.Dwa lub trzy widoczne wejścia dla różnych grup: „dla firm”, „dla wspólnot”, „dla instytucji”. To nie menu, tylko pytanie o to, kim jest odwiedzający.
3. Zbuduj osobne strony docelowe.Jeśli grupy naprawdę się rozjeżdżają, ruch z reklam kieruj na osobne strony, na których pierwszy ekran mówi tylko do jednej z nich. Strona główna zostaje rozdzielaczem, nie sprzedawcą.
4. Sprawdź każde rozgałęzienie osobno.Test pięciu sekund robisz na każdej wersji z osobna. Ludzie mają odpowiedzieć na te same trzy pytania po każdej ścieżce.

Zanim rozbudujesz stronę główną na trzy filary, sprawdź jedno założenie. Jeżeli podróż klienta pokazuje, że większość ludzi wchodzi wprost na podstrony usługowe albo wpisy blogowe, to nie strona główna jest ich pierwszym ekranem — i test trzeba zrobić na tamtej podstronie.

Weryfikacja po zmianie

Pierwszy ekran kusi do przebudowy w całości: nowe zdjęcie, nagłówek, przycisk, układ. Po takiej zmianie nie da się już powiedzieć, co zadziałało. Lepiej zmieniać po jednej rzeczy i zapisywać, czego się spodziewasz.

1. Zapisz wynik testu przed zmianą.Pięć zestawów odpowiedzi, dosłownie. Bez tego punktu odniesienia po zmianie zostaje wrażenie, że jest lepiej.
2. Zmień jedną rzecz.Nagłówek albo przycisk, albo grafikę. Nie pakiet. Najczęściej najwięcej daje przepisanie nagłówka na konkretną nazwę usługi i odbiorcy.
3. Ustal, co ma się zmienić w danych.Zapisz przed wdrożeniem: większy odsetek osób przewijających poniżej pierwszego ekranu, więcej kliknięć w przycisk główny, mniej pytań o to, czym się zajmujecie.
4. Powtórz test na pięciu nowych osobach.Nowych — ktoś, kto widział poprzednią wersję, nie oceni nowej na czysto. To sprawdzenie działa od razu, bez czekania na ruch.
5. Odczekaj pełen cykl i porównaj dane.Minimum dwa tygodnie, przy niskim ruchu dłużej. Porównuj z okresem sprzed zmiany, osobno dla telefonu i komputera.
6. Obejrzyj kilka nagrań po zmianie.Liczby powiedzą, czy się poprawiło. Nagrania powiedzą, czy poprawiło się z powodu, który założyłeś.

• Pierwszy ekran jest hipotezą o tym, co człowiek zrozumie w kilka sekund — a hipotezy się sprawdza.
• Trzy pytania: co to jest, dla kogo i co dalej. Brak jednej odpowiedzi wystarczy, żeby reszta strony nie miała szansy.
• Obszar widoczny bez przewijania to rozkład, nie liczba — a na telefonie zjadają go paski i baner zgód.
• Hasło pasujące do dowolnej branży nie jest nagłówkiem, tylko wypełniaczem.
• Jedna zmiana z zapisanym oczekiwaniem daje wiedzę; przebudowa naraz daje tylko nowy wygląd.