O czym należy pamiętać, projektując wygląd strony internetowej? 7 wskazówek

W czasach gdy już blisko 29 milionów Polaków korzysta z internetu, strona www dla wielu przedsiębiorców stała się podstawowym narzędziem umożliwiającym prowadzenie biznesu. E-biznesmeni dążą więc do tego, aby ich serwisy robiły na odbiorcach pozytywne wrażenie i oferowały oczekiwane funkcjonalności. O jakich elementach nie należy zapominać, projektując atrakcyjną wizualnie witrynę internetową? Podrzucamy 7 praktycznych wskazówek, które warto wziąć pod uwagę, chcąc stworzyć atrakcyjny i skuteczny sprzedażowo design serwisu internetowego.

Jak użytkownicy korzystają ze stron www?

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:

• Analizę kliknięć myszką (clicktracking),
• Śledzenie przewijania strony (scrolltracking),
• Analizę elementów przyciągających uwagę użytkownika (attentiontracking).

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.

Współczesne trendy w webdesignie – poznaj kluczowe wskazówki dotyczące projektowania wyglądu stron

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.

1. Spójna struktura serwisu

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:

• jednolitym wyglądzie poszczególnych podstron,
• zastosowaniu jednakowej typografii (rodzaju i wielkości fontów w tekście głównym oraz nagłówkach),
• operowaniu tymi samymi kolorami w obszarze całego serwisu,
• umieszczaniu jednolitego stylu grafik.

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.

2. Intuicyjna nawigacja

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:

• zadbaj o odpowiednio widoczne menu, umieszczając w nim jedynie kilka głównych pozycji,
• wybieraj proste, sugestywne ikony oraz wyróżniające się przyciski,
• jeśli poszczególne akcje wymagają niestandardowych czynności, umieść czytelne instrukcje,
• zamiast skomplikowanych animacji i dodatków, postaw na proste i szybkie przejścia pomiędzy podstronami.

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.

3. Czytelna typografia

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.

Czcionki szeryfowe

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.

• Najczęściej wybierane fonty szeryfowe: Times New Roman, Bookman Old Style, Palatino, Courier, Georgia, MS Serif.
• Współczesne trendy w typografii szeryfowej: Slabo, Playfair Display, PT Serif, Merriweather.

Czcionki bezszeryfowe

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ń.

• Najczęściej wybierane fonty bezszeryfowe: Arial, Verdana, Helvetica, Open Sans, Trebuchet MS.
• Współczesne trendy w typografii bezszeryfowej: Work Sans, Teko, Source Sans Pro, Cairo, Titillium Web

Czcionki ozdobne i pisankowe

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.

• Najczęściej wybierane fonty odręczne/dekoracyjne: Lobster, Great Vibes, Sofia, MV Boli, Seoge Print.

4. Wizualizacja treści

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:

• ikony,
• wykresy i diagramy,
• infografiki,
• zdjęcia,
• filmy oraz animacje.

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.

5. Dobór odpowiednich kolorów

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: artefakt.pl/blog/web-design/jak-wybrac-kolory-na-strone-internetowa.

6. Koncentracja na użytkownikach mobilnych

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.:

• rezygnację z obszernych bloków tekstu,
• dopasowanie grafik do rozmiarów wyświetlaczy,
• unikanie wyskakujących okienek,
• eksponowanie maila lub numeru telefonu (urządzenie mobilne ułatwia natychmiastowy kontakt),
• stosowanie przycisków CTA w różnych miejscach – nie tylko na dole strony,
• umieszczenie łatwego w obsłudze menu, mieszczącego się na ekranie.

7. Testowanie i ulepszanie efektów

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.

Pamiętaj, że na stronie najważniejszy jest… użytkownik!

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.