Zarejestruj się do bezpłatnej platformy e-learningowej.
Zarejestruj się bezpłatnieWskazówki, rozmowy, inspiracje
Subskrybuj kanał na YouTube i bądź na bieżąco!
Spis Treści
Analiza zachowań użytkowników pozwala rozplanować układ poszczególnych elementów na stronie internetowej. Marketing internetowy oferuje w tym zakresie wiele narzędzi. Jednym z najczęściej wykorzystywanych są mapy ciepła (heat maps), określające za pomocą kolorów te obszary, na których internauci najczęściej skupiają swoją uwagę. Heat mapy tworzone są w oparciu o:
Wiedząc, które miejsca na stronie są szczególnie „klikane”, jak daleko docierają użytkownicy scrollujący witrynę oraz jakim obszarom poświęcają najwięcej uwagi, możesz umieszczać w nich elementy strony odpowiedzialne za konwersję: przyciski call to action czy formularz kontaktowy.
Nowoczesny design stron internetowych opiera się na minimalizmie i krótkiej ścieżce dotarcia przez użytkownika do miejsca zrealizowania konwersji. Tworząc makiety swojego serwisu internetowego lub omawiając projekt z webdeveloperem, koniecznie zwróć uwagę na 7 poniższych elementów zapewniających przyjazny, estetyczny i efektywny wygląd strony internetowej.
Podstawą profesjonalnego serwisu jest jego logiczna konstrukcja. Projektując wygląd, staraj się minimalizować wszelkie wątpliwości i znaki zapytania, jakie mogłyby pojawiać się po stronie użytkownika. Spójność architektury przejawia się m.in. w:
Wszystko po to, by użytkownik poruszał się po witrynie w sposób płynny, intuicyjnie docierając do miejsca, w którym ma wykonać daną akcję. Chaos i brak spójności, wynikające z losowego doboru czcionek czy kolorów na różnych podstronach, dezorientują odwiedzających, zmuszając ich do ponownego „przyswajania” całej struktury serwisu.
W trakcie poruszania się po witrynie odwiedzający widzą „drogowskazy”, takie jak menu, linki do konkretnych podstron czy przyciski call to action. Jako osoba tworząca serwis, doskonale znasz lokalizację poszczególnych elementów. Jednak odbiorcy takiej wiedzy nie mają, dlatego nawigacja powinna być na tyle prosta i intuicyjna, by odwiedzający szybko potrafili znaleźć interesujące ich informacje.
Przydatne wskazówki:
Projektując nawigację strony, przemyśl również kwestię wyszukiwarki. Jeśli serwis jest bogaty w artykuły blogowe lub oferuje sprzedaż produktów, narzędzie wyszukiwania może okazać się niezbędne. W takim przypadku zapewnij łatwy dostęp, lokalizując je w widocznym miejscu – najlepiej w górnej części strony, obok głównego menu.
Dobór czcionek oraz sposób prezentacji treści na stronie to jedne z tych elementów, które wymagają najwięcej uwagi. Fonty powinny być przyjazne w odbiorze i nawiązywać do specyfiki Twojej firmy. Dobrze, jeśli przy ich wyborze będziesz kierować się aktualnymi trendami, co wzmocni wrażenie nowoczesności i aktualności serwisu.
Poniżej prezentujemy najpopularniejsze, uznawane za najbardziej czytelne fonty na strony www.
Ich cechą charakterystyczną są ukośne lub poprzeczne zakończenia kresek (szeryfy). W webdesignie znajdują zastosowanie głównie jako wyróżnik konkretnej treści (tytuł, lead, nagłówek, CTA). Klasyczne fonty wybierają firmy, które za ich pomocą chcą podkreślić swoje wieloletnie tradycje, renomę oraz ugruntowaną pozycję na rynku.
Zdecydowanie częściej wybierane jako fonty na stronę www. Nie mają szeryfów, przez co prezentują się nowocześniej i lepiej niż fonty tradycyjne komponują się z aktualnymi trendami w webdesignie. Proste czcionki uznawane są za łatwiejsze w odbiorze: nie męczą wzroku i przejrzyście wyglądają na ekranach urządzeń.
Imitują pismo odręczne lub ozdobne. Warto uważać z ich stosowaniem w serwisach internetowych, gdyż nadmiar ekspresji bywa trudny w odbiorze. Zaprezentowanie taką czcionką długiego artykułu może sprawić, że tekst stanie się nieczytelny. Taki font pasuje np. do strony firmy organizującej wesela, ale już niekoniecznie na stronę urzędu czy kancelarii adwokackiej.
Według MIT ludzki mózg reaguje na grafikę 60 000 razy szybciej niż na tekst (Źródło: news.mit.edu/2014/in-the-blink-of-an-eye-0116). Przewagę obrazów wskazują także badania BuzzSumo – artykuły opublikowane na stronie internetowej wzbogacone ilustracjami i fotografiami są dwukrotnie częściej udostępniane w social mediach. Projektując wygląd serwisu, koniecznie zaplanuj miejsce na różnego rodzaju elementy graficzne:
Odbiór obrazu często utrudniają elementy rozpraszające uwagę, takie jak cienie, gradienty i inne ozdobniki. Z tego powodu trendem dominującym we współczesnym tworzeniu stron jest flat design, czyli projektowanie płaskie. Jego charakterystyczne właściwości to: ograniczenie palety kolorów, eliminacja cieni oraz odbić, a także prostota typografii. Tego rodzaju grafiki znacznie efektywniej oddziałują na odbiorcę, pomagając w utrwaleniu i przyswojeniu treści.
W projektowaniu stron kontrast pomiędzy tekstem a tłem znacznie ułatwia czytanie, stąd ogromna popularność ciemnych czcionek umieszczanych na jasnym tle. Z kolei ostre, jaskrawe odcienie należy stosować oszczędnie, rezerwując je dla miejsc wymagających skupienia wzroku użytkownika: np. przycisków menu czy wezwań do działania. O tym, jak dobrać kolorystykę na stronę internetową, szczegółowo piszemy w osobnym artykule: www.artefakt.pl/blog/web-design/jak-wybrac-kolory-na-strone-internetowa.
Według raportu Gemius/PBI za wrzesień 2019 roku aż 24,2 mln polskich internautów łączy się z siecią przez tablet lub smartfon. Z tymi danymi łączy się trend mobile first zakładający, że w projektowaniu wyglądu strony należy kierować się przede wszystkim parametrami smartfonów i tabletów. Stworzenie serwisu mobile-friendly zakłada m.in.:
Zbudowanie przyjaznej i atrakcyjnej strony internetowej wymaga wielu testów oraz działań optymalizacyjnych. Kluczowe jest sprawdzenie tego, jak dany serwis wyświetla się na różnych ekranach oraz w poszczególnych systemach operacyjnych i przeglądarkach. Ważne staje się również przetestowanie czytelności poszczególnych fontów – możesz to zrobić, korzystając m.in. ze strony https://wordmark.it/. W przypadku wyboru określonych grafik lub czcionek należy pamiętać również o tym, aby sprawdzić, jak ich zastosowanie wpłynie na szybkość wczytywania serwisu.
Dostosowanie designu strony do preferencji odwiedzających to warunek jej biznesowej skuteczności. Trendy w projektowaniu zmieniają się z dużą dynamiką, dlatego ważne jest nieustannie doskonalenie poszczególnych elementów layoutu: wielkości bloków z treścią, kolorów przycisków, rozmiarów grafik czy nawigacji. Narzędziem, które możesz wykorzystać w celu zweryfikowania skuteczności wdrożonych zmian, są testy A/B. Polegają one na udostępnieniu poszczególnym użytkownikom dwóch wersji strony: podstawowej oraz zmodyfikowanej. Decyzje o wprowadzeniu modyfikacji najlepiej uzależnić od tego, która z nich robi lepsze wrażenie i generuje większą liczbę konwersji.
