Jak zaprojektować stopkę strony internetowej? Istotne elementy i przykłady

Stopka strony internetowej nie jest zwykle pierwszym elementem, o którym myślimy, wyobrażając sobie naszą stronę internetową. Może właśnie dlatego na niektórych witrynach zdaje się ona nie pełnić żadnej konkretniej funkcji. Zamiast pomagać w realizacji określonych celów, zamienia się w kosz na wszystkie informacje, których nie udało się umieścić nigdzie indziej. Dowiedz się, czym jest stopka strony internetowej i jakie są dobre praktyki w jej projektowaniu.

Czym jest stopka strony internetowej?

Jest to w zasadzie podstawowy element szkieletu każdej strony internetowej. Trudno wyobrazić sobie witrynę bez nagłówka i stopki. Jest ona obszarem na dole strony, a jej podstawową funkcją jest informowanie użytkownika na temat witryny i marki, do której należy. Stopka zazwyczaj zawiera podstawowe dane firmy, datę utworzenia strony internetowej i informacje o prawach autorskich do projektu. Nie jest to jednak jej jedyna funkcja.

Funkcje stopki witryny

Wszystko zależy od tego, co zdecydujesz się umieścić w tej sekcji swojej strony. W zasadzie nie ma zbyt wielu ograniczeń, chociaż, jako że jest to w pewnym sensie „koniec” strony, warto zadbać o to, aby stopka zawierała najważniejsze informacje i funkcjonalności, które odbiorca powinien zauważyć przed opuszczeniem strony.

Stopka może nie tylko informować, ale także:

• generować leady lub umożliwiać zapis do newslettera (jeżeli umieścimy w niej formularz),
• ułatwiać poruszanie się po stronie (dodatkowa nawigacja),
• przekierowywać do innych kanałów komunikacji (jeśli dodamy przyciski do mediów społecznościowych).

Design stopki witryny internetowej — jakie elementy wykorzystać?

Stopka to element, który na wiele sposobów zwiększa użyteczność (ang. usability) stron internetowych. Dlatego warto poświęcić odpowiednio dużo czasu i energii na jej zaprojektowanie. Jakie elementy może zawierać stopka i w jaki sposób pomagają one realizować różne cele?

1. Informacja o prawach autorskich

Notka na temat praw autorskich to jeden z elementów najczęściej pojawiających się w stopce. Pełni ona wyłącznie funkcję informacyjną i stanowi deklarację Twoich praw do projektu strony internetowej.

Nota dotycząca praw autorskich to dosyć istotny element, zwłaszcza jeżeli Twój projekt jest unikalny i jego stworzenie było kosztowne. Powinna pojawić się chociaż w jednym miejscu na stronie, ale bywa, że niektóre firmy o niej w ogóle zapominają. Ten element stopki powinien posiadać symbol sygnalizujący, że prawa autorskie są zastrzeżone (©) oraz dane, takie jak data publikacji strony lub aktualizacji (rok wystarczy) i nazwa lub nazwisko posiadacza praw autorskich. Dzięki temu, w przypadku skopiowania projektu Twojej witryny przez innego przedsiębiorcę, prawo będzie po Twojej stronie. Sama nota może skutecznie zniechęcić innych do kopiowania obrazu, animacji, treści lub innego rodzaju „pożyczania” Twojej twórczości.

2. Dane kontaktowe

Jednym z podstawowych celów tworzenia strony internetowej jest nawiązanie kontaktu z potencjalnym klientem. Na Twojej stronie znajdują się już zapewne formularze kontaktowe i informacje na temat możliwości skontaktowania się z marką, ale rozważ także zawarcie danych kontaktowych Twojej firmy (adres e-mail, numer telefonu, adres pocztowy) w stopce. Możesz też po prostu dodać w tym miejscu link, który doprowadzi użytkowników do strony kontaktowej lub do formularza. Umieszczenie tych informacji (lub linka) w stopce zwiększa prawdopodobieństwo, że potencjalny klient zdecyduje się na skontaktowanie się z Twoją marką, nawet jeżeli wcześniej nie zauważył Twoich danych kontaktowych czy CTA prowadzącego do formularza.

Ze względu na ograniczanie wielkości stopki strony internetowej firmy nie zawsze decydują się na dodanie mapki, ale warto zastanowić się nad jej umieszczeniem w tym miejscu. Aby usprawnić komunikację pomiędzy marką, a jej klientami, w stopce dodaje się także często ikony mediów społecznościowych, aby użytkownicy mogli wybrać preferowany przez siebie kanał komunikacji.

3. Nawigacja w stopce

Potencjalny klient Twojej firmy niejednokrotnie bardzo szybko dociera do stopki witryny, ale to nie znaczy, że na tym kończy jej przeglądanie. Jeżeli Twoje menu główne nie „podąża” za Internautą, musi on wrócić na górę strony, aby kontynuować przeglądanie. Możesz ułatwić mu przemieszczanie się pomiędzy podstronami, tworząc dodatkowe punkty nawigacyjne w postaci mapy nawigacyjnej w stopce.

Najprostszym podejściem jest stworzenie mapy strony pokrywającej się dokładnie z menu głównym. Możesz jednak dodać przyciski do innych części strony (np. do tych, do których kierują CTA znajdujące się pomiędzy treściami), które uważasz za wyjątkowo wartościowe dla Twoich użytkowników (strona kontaktowa, regulamin zwrotów i zakupu w sklepie internetowym itd.). Dodatkowo, jeżeli Twoja strona wykorzystuje funkcjonalność tworzenia konta i logowania, zastanów się nad umieszczeniem przycisku logowania właśnie w stopce. Jeżeli klient nie będzie w stanie go znaleźć w innym miejscu na stronie, z pewnością sprawdzi tutaj.

4. Logo

Logo w stopce pełni przede wszystkim funkcję nawigacyjną — odsyła użytkownika do strony głównej. Może jednak działać na zasadzie wzmocnienia brandingu. W tym miejscu możesz zaprezentować logo w inny sposób niż w nagłówku, aby przyciągnąć uwagę użytkownika i przekazać mu dodatkowe informacje na temat wartości istotnych dla Twojej firmy (możesz wybrać większy rozmiar logo, dołączyć dodatkową grafikę czy treść — np. hasło tłumaczące idee ważne dla marki).

5. Formularze i polityka prywatności

Nie bez powodu formularze kontaktowe rzadko znajdują się na samym początku strony. Najlepiej jest stopniowo prowadzić do nich użytkowników, po drodze przedstawiając im najważniejsze szczegóły i zalety oferty. W ten sposób dokładasz wszelkich starań, aby klient docierający do formularza rejestracyjnego rozumiał wartość Twoich treści i chciał dowiedzieć się więcej. To zwiększa prawdopodobieństwo zdobycia leadu.

Osoba, która dotarła do końca Twojej strony, najprawdopodobniej zdążyła już dowiedzieć się co nieco o Twojej marce i jest zainteresowana Twoimi treściami. Dlatego warto umieścić formularz lub przycisk CTA prowadzący do niego w stopce Twojej witryny. W tym miejscu bardzo często znajduje się także, składający się z jednego pola, formularz zapisu do newslettera.

Gromadząc dane użytkowników, nie możesz zapomnieć o opublikowaniu linka do informacji na temat polityki prywatności na Twojej stronie. Jest to konieczne ze względu na przepisy prawne. Element ten także jest najczęściej umieszczany w stopce. Podążając za tą praktyką, możesz upiec dwie pieczenie na jednym ogniu — zrealizujesz swój prawny obowiązek, a także zadowolisz użytkowników, którzy spodziewają się znaleźć tę informację właśnie w tym miejscu.

Inspirujące przykłady stopek stron internetowych

Stopka strony internetowej to przeważnie niewielka sekcja Jej stałym elementem jest zwykle informacja o prawach autorskich. Wykorzystanie innych elementów zależy od wizji twórcy witryny. Niektóre firmy projektują naprawdę imponujące stopki.

The Designest

Stopka portalu The Designest jest stylizowana na rubrykę gazety i robi wrażenie tym charakterystycznym designem. W górnej części znajdują się przyciski do innych, licznych kanałów komunikacji. Natomiast poniżej, po lewej stronie, umieszczono sekcję zapisu do newslettera, wyróżniającą się na tle innych elementów nie tylko wielkością, ale także rozmiarami i różnorodnością fontów.

W stopce strony The Designest znalazła się także mała wersja menu głównego oraz dodatkowe odnośniki, którymi mogliby być zainteresowani internauci, prowadzące do stron kontaktowych czy polityki prywatności. Stopka zawiera także informację na temat praw autorskich do projektu witryny.

Orbit Media

Stopka strony internetowej Orbit Media spełnia kilka funkcji. Przede wszystkim pozwala na zdobycie nowego subskrybenta mailingu, zachęcając: Dołącz do ponad 16,000 osób, które otrzymują nasze wskazówki związanie z marketingiem internetowym dwa razy w miesiącu. Warto zauważyć, że marka od razu eliminuje obawę użytkownika przed spamem, informując, jak często będzie otrzymywał wiadomości.

Niżej znajduje się link do polityki prywatności, a pod nim umieszczono ikony mediów społecznościowych, umożliwiając odbiorcy skorzystanie z innych kanałów komunikacji. Obok znajduje się informacja o powiązaniach Orbit Media z organizacją non-profit B Corp.

W stopce znajdziesz także szczegółowe dane kontaktowe (w tym adres) i przycisk przekierowujący do formularza kontaktowego.

Avo

W stopce strony Avo użytkownik może podać swój służbowy adres mailowy, aby umówić się na zobaczenie wersji demo narzędzia. Marka rozprawia się z ewentualnymi wątpliwościami potencjalnych klientów, od razu informując ich, że nie muszą podawać numeru karty kredytowej, aby przetestować rozwiązanie.

Marka motywuje i wzmacnia przekaz, informując o wysokiej efektywności aplikacji: Ship quality insights in an hour, not days or weeks. W stopce umieszczono także dodatkową nawigację z linkami do, m.in, strony o nas, ofert pracy, polityki prywatności i regulaminu strony. Jest też zachęta do nawiązania kontaktu - Porozmawiajmy (Let's chat!), adres mailowy i ikony mediów społecznościowych.

Smalley

Poza umieszczeniem w stopce ikon do różnych kanałów komunikacji i danych kontaktowych, firma Smalley podjęłą również próbę przekierowania klienta do stron ofertowych. Dlatego umieszczono w stopce strony wyszukiwarkę produktów. Dzięki niej klient może szybko sprawdzić, czy produkt, którym jest zainteresowany, jest dostępny na stronie. Marka upewnia się w ten sposób, że klient przed opuszczeniem strony ma szansę sprawdzić, czy jej oferta odpowiada jego potrzebom.

Shantell Martin

Menu główne w stopce? To nietypowe rozwiązanie, które stosuje Shantell Martin na swojej stronie, może sprawdzić się w przypadku prostych witryn z małą ilością treści na stronie głównej. Poza tym ta część strony jest niewielka i prosta. Zawiera informację o prawach autorskich, a także linki do kont na portalach społecznościowych.

Takie rozwiązanie świetnie sprawdzi się, jeżeli zależy nam na minimalistycznym, ale niecodziennym designie. Decydując się na nie, zwiększamy nawet prawdopodobieństwo, że internauta zapozna się z całą treścią zawartą na poszczególnych podstronach, jako że konieczne jest przewinięci całej strony, aby dotrzeć do menu.

Think32

Agencja Think32 ma niewielką i prostą stopkę. Odznacza się ona od reszty strony ciemniejszym tłem. Twórcy witryny umieścili w tym miejscu motto marki: Thoughtful marketing for growing dental practices (Przemyślany marketing dla rozwijających się praktyk dentystycznych), które krótko podsumowuje całą wyżej przedstawioną treść i usługi świadczone przez markę.

W stopce znajduje się prosty formularz z zapisem do newslettera i przycisk CTA - Subscribe (subskrybuj). Obok użytkownik znajdzie przyciski przenoszące do stron marki w mediach społecznościowych oraz numer kontaktowy do firmy. Poza tymi informacjami, poniżej umieszczono także linki do polityki prywatności oraz regulaminu. Jest to przykład minimalistycznej stopki, która zawiera wyłącznie najważniejsze informacje.

Stopka strony - podsumowanie

W naszym artykule omówiliśmy elementy najczęściej występujące w stopce. To nie znaczy jednak, że nie możesz w niej umieścić czegoś innego (np. krótkiego wideo, sekcji z miniaturami wpisów z bloga czy kalendarza eventów, w których bierze udział Twoja firma). Projektując stopkę, pomyśl o tym, co potencjalny klient spodziewa się tam znaleźć, a także o tym, jakie funkcje ma pełnić ten element Twojej witryny firmowej. Chętnie doradzimy Ci w kwestii stopki. Możemy też wesprzeć Twoją markę, budując dla Ciebie profesjonalną stronę firmową na Drupalu.