Poszczególne elementy budowy strony internetowej przypominają książkę ze spisem treści i indeksem. Spisem treści jest czytelne menu i kategorie, a indeks to dobrze skonfigurowane filtry lub pomocne tagi. W przypadku tych ostatnich trzeba jednak pamiętać, aby ich nie nadużywać i nie zastępować nimi kategorii.
Nawigacja strony internetowej
W budowie strony wyróżniamy menu górne, menu dolne i menu boczne. Najważniejsze jest menu górne, gdyż bez niego nie mogłaby prawidłowo funkcjonować żadna nowoczesna struktura strony.
Menu górne (main menu) – tzw. główne menu, to centrum nawigacyjne strony internetowej. Tutaj pojawiają się kluczowe hasła, które pozwalają użytkownikowi zorientować się co i gdzie się znajduje. Minusem jest przymus stosowania krótkich słów dla pozycji menu, lecz zawsze można skorzystać z rozwinięć, pod którymi pojawią się inne kategorie przypisane do danej pozycji. Dobrym rozwiązaniem może być również wykorzystanie w menu ikonek lub obrazków.
Menu dolne (footer menu) – tzw. stopka, to miejsce, w którym najczęściej pojawiają się informacje prawne, dane kontaktowe, odnośniki do formularzy czy mapy strony. To bardzo niedoceniana przestrzeń, a przecież z punktu widzenia użytkownika jest tak samo ważna jak menu główne. Miejsce to pozwala również na umieszczenie odnośników do treści, które nie zmieściły się w menu głównym.
Boczne menu (side menu) – może pojawić się na stronie internetowej, lecz nie musi. Dawniej menu boczne były kluczowe w budowie strony internetowej, którą wizualnie dzielono podobnie jak szpalty gazet – na 3 kolumny. Obecnie odchodzi się od pokazywania menu bocznego, a elementy, które miały w nim wylądować wyświetla się w górnej lub dolnej części strony. W sklepach internetowych jednak nadal jest to bardzo ważne miejsce do wyświetlania kategorii, filtrów, tagów i modułów szybkiego kontaktu.
Jeżeli menu boczne zaburza wizualny wygląd strony, zawsze można zastosować opcje chowania/wysuwania menu na żądanie (poprzez kliknięcie).
Jeżeli menu boczne zaburza wizualny wygląd strony, zawsze można zastosować opcje chowania/wysuwania menu na żądanie (poprzez kliknięcie).
Hierarchia elementów na stronie
Czytelna strona internetowa powinna opierać się na hierarchicznym ułożeniu elementów. Co to oznacza w praktyce?
Drzewo kategorii należy skonstruować tak, aby każdy kolejny element pojawiał się naturalnie. Najlepiej ograniczyć się maksymalnie do 4 poziomów zagłębienia kategorii, lecz jeszcze lepiej skorzystać tu z zasady „mniej znaczy więcej” i zachować rozsądny umiar. Jeżeli coś można rozwiązać przy pomocy dodatkowych atrybutów i filtrów, nie twórz kategorii.
Czytelny układ strony
Układ elementów wyświetlanych na stronie, ich kształt i kolorystyka, również są ważne. Przeładowana małymi obrazkami, drobnymi literkami i męczącymi dla oczu barwami strona internetowa nie zachęca do pozostania na niej. Warto wybrać spokojne kolory, zastosować czcionki bezszeryfowe i ustawić im taką wielkość, aby nie trzeba było czytać z nosem przyklejonym do wyświetlacza.
Justowanie tekstu na stronie internetowej
Częstym problemem na stronach jest nieodpowiednie formatowanie tekstu, który jest nieprzyjemny w odbiorze dla czytelnika, a także niekorzystny pod względem SEO. Unikaj justowania i wyrównywania bloków tekstu do prawej strony! Tego typu zabiegi można wykorzystać w krótkich blokach np. nagłówki na stronie głównej, cytaty, lecz nie powinny obejmować długich tekstów.
Elementy klikalne
Strona internetowa składa się z ogromnej ilości elementów, które są klikalne, dlatego powinny być wyraźnie oznaczone. Klika się nie tylko w menu i przyciski, trzeba pamiętać również o linkach w tekstach i ikonkach. Zmiana koloru elementu lub animacja w momencie najechania kursorem myszy, to nie tylko fajne dodatki, które ożywiają stronę, to przede wszystkim akcje, które pozwalają użytkownikowi zauważyć, że dany element jest np. linkiem lub prowadzi do formularza.
Pamiętaj, że jeśli użytkownicy po paru kliknięciach nie znajdują tego, czego szukali, pójdą gdzie indziej.
Nagłówki HTML i „whitespace”
Na czytelność składa się również odpowiednie rozłożenie nagłówków i „whitespace”, czyli białych miejsc na stronie – spacji, tabulacji, odstępów międzywierszowych itp.
Nagłówki powinny być ułożone kaskadowo, czyli od największych do najmniejszych. Największe nagłówki powinny oznaczać tematy główne, zaś mniejsze rozwijać myśl główną. Nagłówki HTML działają tak samo jak nagłówki w drukowanych gazetach, pozwalają na szybkie zorientowanie się o czym jest strona i odnalezienie interesujących użytkownika treści.
RWD, czyli strona responsywna
Rosnąca liczba ludzi korzystających z Internetu z poziomu smartfonów i tabletów, sprawia, że mobilna strona internetowa to „must have”. Postępujące w błyskawicznym tempie rozwój technologiczny tego typu urządzeń, zmusza do regularnego sprawdzania czy strona wyświetla się prawidłowo oraz do aktualizacji skryptu serwisu. Gotowe szablony często wymagają poprawek w tym zakresie, więc jeśli tworzysz nową stronę, sprawdź w konsoli czy na pewno wszystko działa tak jak powinno i czy elementy nie nachodzą na siebie.
Paginacja na stronie internetowej
W sklepie internetowym paginacja jest konieczna, aby strona była czytelna i wyświetlała się w rozsądnym czasie. Ograniczenie produktów pokazujących się na podstronie pozwala również zapobiec nużącemu „scrollowaniu”, więc jeśli w danej kategorii znajduje się kilkaset albo kilka tysięcy produktów, postaw na paginację.
Infografiki i ikonki na stronie
Długie bloki tekstu usypiają, dlatego konieczne są nagłówki, „whitespace”, wypunktowania itd. Warto dołączyć do nich grafikę.
Estetyczne ikonki na stronie pozwalają ożywić długie treści, a także podkreślić krótkie informacje. Doskonale nadają się do wizualizacji krótkich bloków tekstu na stronie głównej.
Zdjęcia i infografiki są idealne do przełamania długich akapitów tekstów na blogu, dodatkowo wizualizują opisy. Trzeba pamiętać o ich odpowiednim zoptymalizowaniu, gdyż duża ilość zdjęć o znacznej wadze, spowolni wczytywanie się strony, a tego należy unikać.
Podsumowanie
Czytelna strona internetowa powinna tak działać, aby prowadzić odbiorcę treści za rękę. Powinna to być dla użytkownika prosta wycieczka, w trakcie której nie męczy się i szybko odnajduje to, po co przyszedł. Kolejne elementy muszą wynikać z poprzednich, przyciski „call to action” odpowiadać na potrzebę odbiorcy, a teksty być tak sformatowane, aby nie męczyły oczu.
Ocena użytkowników: 0 / 5
