Już nie ma pierwszego ekranu, więc nie ściskaj treści stron WWW

OK, ściślej mówiąc to jest, ale w liczbie setek rozdzielczości na tysiącach urządzeń. Definicja jest więc na tyle nieostra i rozmyta, że praktycznie nie istnieje. To co widzisz na swoim ekranie nie ma nic wspólnego z tym co widzą inni. Tę prawdę koniecznie przekaż swojemu szefowi, najlepiej razem z linkiem do tego artykułu. Oszczędność dwóch Relanium gwarantowana.

Ale skąd to całe zamieszanie?

Dawno, dawno temu…

…a konkretnie zaraz po II wojnie światowej mądry Pan George Thiemeyer Hemmeter wynalazł gazetomat.

źródło: http://media.nbcwashington.com/

Konstrukcja metalowej skrzynki zakładała konieczność zgięcia gazety. To był początek naszego dzisiejszego dramatu. Pojawiło się (wtedy słuszne) przekonanie, że wszystko to, co gazeta ma najlepszego do zaoferowania musi pojawić się “above the fold” czyli po prostu ponad linią zgięcia. W sumie ma to sens – dzisiejsze wydanie kupię chętniej, jeśli zobaczę zajawkę ciekawego materiału. Kropkę nad “i” postawił David Ogilvy, wyrokując, iż tylko ⅕ czytelników zapoznaje się z inną treścią niż nagłówki.

Retail, który nie sprzedaje „na siłę”. Showroom Lenovo & Motorola jako przykład doświadczeniowego brand store’u

W Polsce, co prawda nie mieliśmy gazetomatów, ale namiastkę sytuacji z USA zaaranżowali nam kioskarze, układający gazety w sposób, który ukazywał tylko ograniczony fragment pierwszej strony.

Era papierowa uformowała więc jasną tezę – wszystko, co ważne, umieść wysoko.

Online wszystko zmienił

Żartuję. Zmienił się nośnik, ale uparcie kontynuowano pielęgnowanie starych schematów myślenia. Zaczął nikt inny jak sam Jakob Nielsen. W początkowym okresie dowodził, że ludzie nie przewijają stron WWW. Wierzę, że tak było. Po prostu zajęło kilka lat zanim ta nowa dla nas konwencja weszła do palety naturalnych zachowań. Jednak już w 1997 roku Nielsen zmienił zdanie i ze sporym zdziwieniem przyznał, że zachowanie użytkowników bardzo szybko przystosowało się do nowych możliwości. Ostatecznie został przy twierdzeniu, że nawet jeśli ktoś scrolluje, to 80 proc. jego uwagi koncentruje się na treściach pierwszego ekranu, a tylko 20 proc. na tym co poniżej.

Tylko czy wyniki tego badania są faktycznie wytyczną do projektowania, czy może efektem layoutów stosowanych w tym czasie?

Początki web designu to był raj dla leniwych projektantów. Stałe proporcje ekranu, praktycznie 2-3 rozdzielczości, dominacja jednej przeglądarki. Pakujesz wszystko włącznie ze stopką do 600-tnego piksela i masz z głowy. No scroll, no pain. Kolejne lata nie zmieniły wiele. Co najwyżej rozpustnie zagospodarowaliśmy kolejną setkę pikseli, co umożliwiły ekrany 1280 czy 1366 px szerokości.

Powstały miliony projektów na jedno kopyto, trudno było odróżnić szablon od autorskiej roboty. Bo ile możesz wywalczyć indywidualizmu w z góry określonym polu, gdzie logo ma być w górnym lewym, a wyszukiwarka w prawym rogu?

Taki był klimat. Klienci mieli (tak, chciałbym napisać to w czasie przeszłym) obsesję na temat linii zanurzenia. Konieczność scrollowania komentowali w podobny sposób co bohater jednego z moich ulubionych skeczy – ŚCIAŚNIAJ!

I nadszedł rok mobile

Nie pokuszę się o wyznaczenie konkretnej daty, ponieważ przynajmniej kilka lat kolejno obwoływano tym mianem, ale rzeczywiście dopiero wejście urządzeń mobilnych pokazało wadę dotychczasowego podejścia.

Po pierwsze – ludzie scrollują. Jest wiele badań, które znajdziesz w sieci, np. takie, siakie lub owakie, czy dla przykładu piękna w formie i treści strona Life Below 600px – warto obejrzeć. Zmianę spotęgowały dotykowe ekrany. Pasjami wytłuszczamy je paluchami, chcąc dotrzeć do interesujących nas treści. Przewijamy na smartfonach, tabletach, dużych dotykowych ekranach, gładzikach, a ostatnio nawet sprytnych zegarkach. To dla nas obecnie norma.

Po drugie – nie ma jednego, ani nawet pięciu czy dwudziestu “pierwszych ekranów”. Mamy różne rozdzielczości, proporcje, wielkości, gęstości, układ poziomy i pionowy, różny sposób scrollowania i ogólnie zachowań związanych z danym typem urządzenia.

Po trzecie – obecne trendy to perfidna zemsta designerów za zamykanie ich w pojedynczym szklanym ekranie. Mamy więc Responsive Web Design, Single lub One Page Website, A Lot of Scrolling, Paralax Effect, Landing Page Style. Wszystkie te cudaczne nazwy oznaczają jedno – standardowy rozmiar strony nie istnieje. Nie ma już żelaznej skrzynki i dopasowanego do połowy okładki okienka. Jest nieobliczalna i zmienna przestrzeń, w której musisz się odnaleźć ze swoim serwisem WWW.

I co teraz zrobisz? Bezpiecznie i zachowawczo powtórzysz starą mantrę “podsuńcie całość do góry”? Nie rób tego, proszę. Lepiej posłuchaj, jak można zrobić to lepiej.

Czytasz prawda? A ten tekst wcale nie jest wysoko. Co ja mówię, masz za sobą przynajmniej z 1000 px i nadal tu jesteś. To dowód numer 4, uzupełnienie ostatniej wyliczanki.

 

Bo liczy się tylko motywacja

Tym, co sprawia, że ludzie przewijają jest motywacja, tak po prostu. Budując stronę WWW musimy sprawić, aby odwiedzający znalazł na niej szybko coś, co przykuje jego uwagę, zachęci do wejścia głębiej, niżej. To absolutnie nie oznacza, że warto dążyć do zamknięcia scenariusza odwiedzin na pierwszym ekranie. Strona może być dowolnie długa pod warunkiem, że krok po kroku, piksel po pikselu angażujemy, podrzucamy nowe argumenty, korzyści, informacje wprost trafiające do określonego odbiorcy.

Ale jak to zrobić?

Ja osobiście dzielę możliwy arsenał na dwie części:

• Komunikacja. Opowiedz historię, która od początku uderza odbiorcę w czuły punkt. Złóż obietnicę, której ciekawość szczegółów realizacji nie pozwoli porzucić strony po 7 sekundach. Roztocz wizję korzyści, które ułatwią życie, pracę, zaoszczędzą pieniądze czy czas. Buduj napięcie, które zatrzyma czytelnika, aż do ostatniego wersu lub formularza zamówienia. Zaciekaw, zaintryguj, udowodnij, że znasz potrzeby odbiorcy i masz na nie dobrą receptę.
  Istotne przy tym jest równomierne rozłożenie argumentów na całej wysokości strony. Po mocnym uderzeniu nie zanudzaj ludzi przez kolejne 20 wierszy. Podtrzymuj zainteresowanie, zmieniając formę i treść. Nie przegaduj, ale i nie żałuj treści. Można powiedzieć sporo bez zbitego paragrafu tekstu. Pamiętaj o nagłówkach, listach, tabelach, ilustracjach, ikonach i wideo. Masz naprawdę sporo sposobów na zbudowanie historii, która skłoni użytkownika do poświęcenia paru minut na jej poznanie.
• Technikalia. Używam takiego sformułowania jak “Domniemany koniec strony”. To moment, w którym użytkownik błędnie myśli, że to koniec, nie ma nic poniżej, przestaje przewijać. Dzieje się tak w przypadku, gdy w dolnej części ekranu kończymy sekcję, nie pokazując, że właśnie zaczyna się kolejny element. Jeśli ktoś ma przewinąć niżej, musimy go przekonać, że są ku temu powody. Trzymaj się zasad:
  – sekcje nie powinny zajmować wysokości całego ekranu,
  – odstępy między sekcjami nie mogą być zbyt duże,
  – sekcje mogą zachodzić na siebie i eliminować przerwy,
  – dziel stronę na szpalty o nieregularnej wysokości i eliminuj puste wiersze na całą szerokość strony,
  – umieszczaj elementy interfejsu wyraźnie sugerujące, że poniżej jest dalsza treść,
  – stosuj elementy grafiki, które zajmują więcej niż jeden ekran i nie kończą się wraz z sekcją, do której należą. 

Trzymając się tego, Twoje CTA może być bezpieczne i efektywne nawet tuż nad samą stopką. Kissmetric podał na to swego czasu parę konkretnych badań. Przycisk na pierwszym ekranie nie zagwarantuje Ci konwersji. Lepiej zadbaj, by poprzedzała go odpowiednia ilość dobrej treści. Jeśli masz coś dobrego do sprzedania i opowiesz równie dobrą historię, transakcja zadzieje się równie często na dole jak i na górze strony WWW.

Zapomnij o reżimie “pierwszego ekranu”. To mit, fakty mówią co innego. Pamiętaj o tym, budując swoją kolejną witrynę internetową.

 

 

Michał Samojlik

Dyrektor Zarządzający agencji Autentika. Od 2003 roku związany z branżą internetową. Rozpoczynał jako grafik i projektant interfejsów webowych. Następnie założył agencję interaktywną Autentika, którą prowadzi po dziś dzień, wspierając marki klientów w działaniach marketingowych. Współtwórca portalu Goldenline, a także pomysłodawca serwisów NowyMarketing i MamStartup.