Czy powinieneś zachować zasady projektowania w części widocznej na ekranie?

Dziedzina projektowania i tworzenia stron internetowych przygotowuje dla Ciebie wiele dylematów: używać czystego stylu czy nie, uwzględniać najnowsze trendy na swojej stronie internetowej czy nie, kłaść nacisk na front wizualny lub funkcjonalność, czy projekt jest responsywny, czy nie, itp.

Nie możemy odpowiedzieć na wszystkie te pytania od razu; zamiast tego zaczniemy od jednego bardzo ważnego aspektu: fold.

Co oznacza fałda?

Zagięcie to termin używany przez właścicieli witryn i programistów do określania części zawartości witryny, która jest wyświetlana bez przewijania w dół. Jest to obszar widoczny zaraz po wejściu użytkownika na stronę.

Pochodzenie gazety

Skąd się wzięły początki? Wszystko jest proste: prasa ustanowiła ten termin na długo przed tym, zanim projektowanie stron internetowych stało się tak ważną i rozwiniętą dziedziną. Gazety drukowane zawierały najbardziej sensacyjne artykuły u góry strony, aby zachęcić czytelników do przejrzenia całej gazety.

Różnorodność rozdzielczości ekranu

Problemem ze spasowaniem jest dzisiaj rozdzielczość. IPad ma rozdzielczość 1024×768, iPhone 4 ma rozdzielczość 960×640, mój 22-calowy monitor ma rozdzielczość 1920×1080, a nadal najpopularniejszy jest dziś 1280×720. Nie jest to już jeden typ komputera, który każdy ma, ale obecnie istnieje mnóstwo projektów i rozmiarów monitorów komputerowych, więc trudno jest zbudować ogólny projekt na zakładkę. Zresztą jedni użytkownicy zobaczą więcej, inni mniej, gdzie w takim razie jest złoty środek? Przypuszczam, że jest to zaprzeczenie krotnie, ponieważ ogólny termin jest już martwy.

Urządzenia mobilne zmieniają sposób składania

O rozdzielczości ekranu pisaliśmy kilka linijek wyżej, ale warto też wspomnieć, że nie wiemy, jakie urządzenia pojawią się jutro, za miesiąc czy za kilka lat. Dziś ludzie korzystają z tabletów i smartfonów, ale kilkadziesiąt lat temu były one poza naszym poznaniem.

Epoka przewijania

Scrollowanie przede wszystkim – tak powstają obecnie strony internetowe. Normalną rzeczą było przeglądanie strony internetowej powyżej zakładki i niewiedza, jak dalej postępować, gdy przeglądarki internetowe były niezbadane. Dzisiaj użytkownicy żyją online, komunikują się, robią zakupy, reklamują się i robią interesy w Internecie i wiedzą o tym wszystko. Inną rzeczą jest to, że użytkownicy nie lubią czytać i przywiązują zbyt dużą wagę do jednej sekcji witryny, więc przewijają, przewijają i jeszcze raz przewijają. Twoim zadaniem jest sprawić, by zatrzymali się na tym lub innym elemencie, a jak rozumiesz, nie chodzi o fałdę. To tylko kilka sekund, kiedy użytkownicy patrzą na obszar bohatera witryny, więc nie musisz upychać wszystkiego w jednej strefie strony. Powinieneś umieścić odpowiednią proporcję treści na całej stronie, a dzięki temu podwoisz swoje szanse na zostanie zauważonym i przeczytanym.

Przykłady sposobów angażowania użytkowników do przewijania

Gdy zdecydujesz się włączyć funkcję przewijania witryny, musisz przemyśleć wszystkie możliwe opcje, aby działała i była wciągająca. Jak użytkownicy zrozumieją, że muszą przewijać? Dlaczego muszą przewijać? Co dostaną, jeśli scrollują?

Ścieżki do przewijania – To jest, gdy używasz niektórych elementów, aby pokazać drogę przez swoją stronę internetową. Mam tu na myśli zarówno elementarne strzały, jak i kreatywne rozwiązania, takie jak balon powietrzny, skradanie się, wszystko, co tylko sobie wyobrazisz.

Witryna Beach Boar z rakietą do tenisa stołowego

Studio iskry

Układ kolumn – ta funkcja może bardzo pomóc zaintrygować użytkowników, zwłaszcza że jedna z kolumn jest przełamana zgięciem. Następnie użytkownicy zaczynają przewijać, aby przeczytać do końca sekcji, więc nieświadomie przechodzą do stopki i otrzymują kolejną porcję informacji, którą przygotowałeś.

Nawigacja ma być nad Foldem

Nawigacja to podstawa każdej strony internetowej i nie jest zaskoczeniem, że powinna ona mieć najlepszą pozycję i najbardziej przyjazną dla użytkownika funkcjonalność. Bez wątpienia najlepsza pozycja jest nad zagięciem. Czemu? Ponieważ użytkownicy mogą nie chcieć przewijać całej strony głównej, ale mają konkretny cel i muszą zobaczyć konkretną stronę, np. o nas, kontakt, płatności, portfolio itp. Jeśli zmusisz ich do przewijania, aby przeglądali więcej stron, dadzą to wszystko i znajdą inną witrynę. Wielu programistów popełnia błąd, projektując ogromne obszary bohaterów z obrazami zajmującymi całą przestrzeń nad zakładką (a duży obszar bohaterów jest obecnie w modzie). Lepiej umieść pasek nawigacyjny nad tym obrazem u góry, zamiast umieszczać go pod sekcją i widoczny dopiero po odrobinie przewinięcia.

Projekt strony internetowej z górną nawigacją

Gdzie wezwania do działania są skuteczniejsze?

Odpowiedź na to pytanie zależy od wielu czynników: jakie usługi/produkty oferujesz, klient może podjąć decyzję od razu lub będzie musiał przeczytać więcej, zanim pojawi się jedno lub kilka wezwań do działania strona. Teraz opiszmy każdy punkt jeden po drugim.

Przycisk wezwania do działania (CTA) działa nad zakładką, gdy podajesz wyczerpujące informacje o swoim produkcie w nagłówku. Może to być prezentacja slajdów, wypunktowana lista zalet Twojego produktu, dowolna statyka itp. Tak więc użytkownik wyrobił sobie wrażenie o Twojej firmie i może podjąć decyzję. W takim przypadku przyciski powyżej zakładki będą działać na Twoją korzyść.

Witryna jednostronicowa z przyciskiem wezwania do działania nad zakładką

Jeśli masz długą historię do opowiedzenia swoim klientom i chcesz, aby znali wszystkie zalety i wady Twojego produktu, musisz umieścić CTA pod zakładką, a najlepiej w stopce. W ten sposób, gdy klienci będą pewni, że tego potrzebują, zobaczą pchnięcie tuż przed nimi. Chociaż powinieneś sprawić, by Twoja historia była atrakcyjna, interesująca, wciągająca i celowa, jeśli nie, nie będziesz miał odpowiedzi.

Kiedy możesz używać wielu wezwań do działania? Tylko wtedy, gdy ustawisz je w innym celu i umieścisz w różnych sekcjach treści. Ponadto lepiej jest tworzyć różne projekty dla wszystkich, aby odróżnić je od siebie. Jeśli masz wszędzie ten sam przycisk, zepsuje to Twoją obecność w Internecie i pogorszy wyniki końcowe.

Witryna z wieloma wezwaniami do działania

Jak umieścić CTA na środku? Jest kilka sztuczek, które powinieneś znać:

• umieść wezwanie do działania na pasku bocznym, najlepiej po lewej stronie, ponieważ zwykle czytamy od lewej do prawej i wszystko po lewej stronie rzuca się w oczy jako pierwsze:
• spraw, aby projekt wezwania do działania był zauważalny, pokoloruj go jaskrawo i używaj dużych czcionek;
• użyj białej przestrzeni wokół wezwania do działania, aby wyróżnić je spośród innych treści.

Największym błędem, jaki możesz popełnić, jest mieszanie wezwania do działania z innymi elementami treści. Więc nigdy nie umieszczaj go na zagraconym i niechlujnym układzie, to na pewno nie zadziała.

Informacje kontaktowe: Powyżej czy poniżej zakładki?

Nie wszyscy użytkownicy lubią przeglądać długie strony internetowe z dużą ilością treści, niektórzy z nich znajdują te strony tylko po to, aby uzyskać kontakty firmy w celu wykonania połączenia. Dlatego lepiej, żeby kontakty były nad zakładką, może to być pojedyncza linia z numerem telefonu lub zwarty blok z bardziej szczegółowymi informacjami. Oprócz tego nie zapomnij o osobnej stronie Kontakty, która jest obowiązkowa dla każdej witryny.

Powyżej zakładki jest nadal ważne: strona główna i strona docelowa

Zasada projektowania powyżej zakładki nie jest taka sama dla wszystkich stron internetowych. Chociaż jest to nieważne i niepotrzebne na stronach z treścią, jest bardzo istotne w przypadku projektowania strony głównej i stron docelowych. Tutaj masz szansę przyciągnąć widzów ładną sekcją bohatera z obrazami lub prezentacją slajdów. Niemniej jednak, trzymaj się wszystkich zasad projektowania działań i nawigacji, które omówiliśmy wcześniej.

Końcowe wskazówki: elementy do umieszczenia nad zakładką i pod nią

Mamy nadzieję, że nie pomyliłeś się z artykułem; w każdym razie podamy Ci pokrótce kluczowe punkty projektu części widocznej na ekranie i podsumujemy wszystko w prostych wskazówkach, których należy przestrzegać:

1. Umieść swoje imię nad zakładką. Logotyp ma ogromny wpływ na rozpoznawalność marki i właśnie po to powstaje strona internetowa – aby promować Twoją nazwę/firmę.
2. Użyj górnej nawigacji. Jest to najważniejszy element witryny wielostronicowej, więc zasady składania mają tutaj duże znaczenie.
3. Umieść najważniejsze wiadomości nad zakładką. Poinformuj klientów o Twoich wydarzeniach i nowych produktach od razu, nie pozwól im zgadywać.
4. Przyciski mediów społecznościowych działają dobrze zarówno powyżej, jak i poniżej zakładki. Jeśli strona Twojej witryny ma długie przewijanie, nie wybieraj – po prostu umieść przyciski udostępniania w mediach społecznościowych u góry iu dołu. Przyciski nagłówka są dobre dla odwiedzających, którzy już Cię znają i szukali Twojej witryny dokładnie po to, aby znaleźć te przyciski śledzenia. Przyciski stopki są świetne, ponieważ jeśli użytkownicy są zainteresowani Twoimi treściami, i tak przewiną w dół.
5. Znajdź odpowiednią pozycję wezwania do działania dla swojej witryny. Każda firma i usługodawca ma inny cel posiadania strony internetowej, więc wezwania do działania są również dla nich różne. W tym poście dobrze wyjaśniamy ten problem projektowy, mamy nadzieję, że przeczytałeś go dokładnie, wróć, jeśli nie.
6. Nie umieszczaj wszystkiego powyżej zakładki. W innym przypadku otrzymasz okropną stronę internetową z zagraconym układem, w dodatku z pustym i nudnym projektem pod zakładką.
7. Zaniedbuj zasady przewijania strony, jeśli z Twojej strony korzystają głównie użytkownicy mobilni. Ludzie są przyzwyczajeni do przewijania podczas przeglądania witryn za pomocą smartfonów lub tabletów.
8. Przewijanie jest w modzie, więc daj mu lepszą ekspozycję, a nie projekt z zakładką, co nie jest koniecznością we współczesnym cyfrowym świecie.