Przygotowujesz się do stworzenia nowej strony internetowej lub modernizacji już istniejącej ? Chciałbyś aby twoja nowa witryna była wykonana według dobrych praktyk i zgodnie z właściwymi zasadami projektowania stron internetowych ?
Jesteś w dobrym miejscu !
Dzięki temu artykułowi lepiej przygotujesz się do zlecenia stworzenia strony i łatwiej będziesz mógł zweryfikować otrzymany projekt.
Spójrz:
O sukcesie strony internetowej decyduje przede wszystkim jej użyteczność. Często właściciele firm o tym zapominają, skupiając całą swoją uwagę na grafice, zdjęciach i animacji.
Nie oszukujmy się.
Użytkownik, który odwiedza twoją stronę chcę otrzymać natychmiastową informację lub wykonać określone zadanie (kupić, zarejestrować się, pobrać plik, wypełnić formularz). Jeśli to zadanie będzie utrudnione lub niemożliwe do wykonania – zrezygnuje i przejdzie na stronę konkurencji .
Jeśli twoja strona jest mało intuicyjna i źle zaprojektowana, najpiękniejsza grafika nie pomoże tobie zyskać klienta.
Jak użytkownicy korzystają ze stron ?
Zasadniczo, nawyki użytkowników w sieci nie różnią się specjalnie od zwyczajów klientów w sklepie. Odwiedzający witrynę przeglądają każdą nową stronę, “skanują” tekst i klikają w pierwszy link, który niesie za sobą obietnicę otrzymania tego czego szukają.
Większość internautów szuka czegoś interesującego lub użytecznego i klika tak szybko, aż coś przykuje ich uwagę. Jeśli strona nie spełni ich oczekiwań lub nie znajdą na niej potrzebnej informacji, klikają przycisk “wstecz” i kontynuują poszukiwania.
Z tego powodu niezwykle istotne jest postawienie się w roli naszego klienta i zbudowanie strony zorientowanej przede wszystkim na niego.
Bardzo prosta zasada:
Jeśli twoja strona nie jest w stanie spełnić oczekiwań użytkowników, to projektant źle wykonał swoją pracę, a twoja firma traci pieniądze.
Co zatem wpływa na dobry projekt strony internetowej ? Poniżej zapoznamy Cię z 6 dobrymi zasadami projektowania, które sprawią, że twoja strona będzie estetyczna, angażująca, łatwa w użyciu i skuteczna.
1. Intuicyjna struktura
Nie zmuszaj użytkowników do myślenia. Zgodnie z pierwszym prawem użyteczności Kruga, strona internetowa powinna być intuicyjna i logicznie skonstruowana.
Podczas projektowania strony powinniśmy pozbyć się wszelkich znaków zapytania – decyzji, które musiałby podjąć użytkownik, biorąc pod uwagę zalety, wady lub alternatywy.
Jeśli nawigacja i architektura strony nie jest intuicyjna, liczba znaków zapytania rośnie. Powoduje to rozproszenie uwagi odwiedzającego i odciąga go od zrealizowania celu, do jakiego została stworzona strona.
Prosty projekt to skuteczny projekt. Skomplikowana struktura to nie jest to co odwiedzający chcieliby widzieć na twojej stronie internetowej.
Wskazówki i techniki, które warto rozważyć:
układ oparty na siatce (grid based layout)
Losowe umieszczenie treści na stronie może skończyć się przypadkowym, niechlujnym wyglądem. Rozwiązaniem jest użycie siatki (grid based layouts), która organizuje treści w sekcje, kolumny i pola, dzięki czemu projekt jest estetyczny i intuicyjny.
układ oparty na wzorcu ”F” (F-pattern design)
Badania eyetrackingowe udowodniły, że ludzkie oko skanuje ekrany komputerów według wzoru, przypominającego literę ,„F”. Użytkownicy skupiają swój wzrok głównie na górnej i lewej krawędzi ekranu. Jest to cenna informacja i podpowiedź aby umieszczać kluczowe informacje (elementy) właśnie w tych miejscach.
umiejętne stosowanie pustych przestrzeni
Białe (puste) miejsca na stronie nie powinny być powodem do niepokoju. Przestrzeń nie tylko pomaga uniknąć przytłoczenia treścią, ale również ułatwia użytkownikom przeglądanie oraz przyswajanie informacji na stronie.
2 Nawigacja (menu)
Nawigacja na twojej stronie pełni rolę mapy drogowej. To ona decyduje o tym, czy poruszanie się po witrynie jest łatwe i intuicyjne. Ponadto wskazuje użytkownikowi co jest na stronie istotne i gdzie znajdzie informacje, których potrzebuje.
Praktyczne zasady:
- dołącz do górnego menu jedynie niezbędne, najważniejsze strony. Użytkownik przy pierwszym kontakcie nie będzie zainteresowany polityką prywatności oraz informacjami na temat praw autorskich. Linki do tych podstron warto dodać do stopki na dole strony,
- stwórz grupy powiązanych ze sobą linków, umieszczając je wg ważności od lewej do prawej,
- zachowaj krótkie i opisowe tytuły stron,
- umieść pasek menu w łatwym do zlokalizowania miejscu.
Wejdź w buty swoich klientów i zapytaj siebie:
Ile kroków (kliknięć) muszę wykonać, aby zrealizować cel na stronie (rejestracja, zapis, wysłanie formularza, zakup) ?
3. Typografia
Upewnij się, że fonty użyte w projekcie będą czytelne i oddadzą charakter twojej firmy. Warto tutaj ograniczyć się do dwóch rodzajów (głównego i pomocniczego), po to aby zachować spójność i skrócić czas ładowania strony.
Ogólnie rzecz biorąc, fonty (czcionki) bezszeryfowe (sans-serif) takie jak Arial i Verdana wpłyną pozytywnie na czytelność tekstu. Podobnie stopień, powinien być odpowiednio duży (przynajmniej 16px) aby użytkownik nie miał problemu z przeczytaniem treści na stronie.
Wskazówki:
- zadbaj o czytelność. Wybierz font, który nie odwraca uwagi od tekstu
- dopasuj font do charakteru twojej strony. Pamiętaj, że krój pisma wzbudza określone emocje i odczucia. Font, wykorzystany na stronie restauracji niekoniecznie będzie pasował na stronie kancelarii prawnej.
- upewnij się, że fonty wykorzystane w projekcie pasują do siebie
- używaj nagłówków, śródtytułów, pogrubień oraz wypunktowanych list. Umiejętnie używaj interlinii, wyrównań tekstu (wyrównuj głównie do lewej) oraz przestrzenii między paragrafami. Wszystko to poprawi czytelność tekstu i zachęci użytkowników do czytania.
4. Kolory
Dobrze dobrana paleta kolorów, może w znaczący sposób poprawić wrażenie użytkowania strony internetowej. Uzupełniające się kolory tworzą równowagę i ogólną harmonię.
Użycie kontrastujących kolorów tekstu i tła ułatwi czytanie. Jaskrawe, tętniące życiem kolory powinny być stosowane oszczędnie, w miejscach, na których chcemy skupić wzrok użytkownika (przyciski, wezwania do działania itd.).
Czy wiesz, że ludzki mózg postrzega i przetwarza obrazy dużo szybciej niż zwykły tekst ?
Obraz jest wart więcej niż tysiąc słów. Dobór odpowiednich zdjęć, wzbudzi określone emocje, na których tobie zależy. Rozważ również infografiki oraz materiały wideo, które są niezwykle skuteczne w komunikacji i znacząco wpływają na czas spędzony na twojej stronie.
6. Strona responsywna
Użytkownicy będą korzystać z twojej strony poprzez wiele różnych urządzeń – od smartfonów po komputery stacjonarne.
Z tego powodu istotne jest, aby witryna wyświetlała się odpowiednio dobrze na każdym z tych urządzeń.
Upewnij się, że projekt jest responsywny, co oznacza, że będzie dostosowywał się do szerokości ekranu danego urządzenia.
Podsumowanie
Jak powiedział kiedyś Steve Jobs – „Design to zabawne słowo. Pewni ludzie myślą, że oznacza ono wygląd. Jeżeli jednak spojrzysz głębiej, to naprawdę chodzi o to, jak to działa”.
Z tego powodu dobry projekt strony internetowej oprócz aspektów wizualnych powinien zadbać przede wszystkim o wrażenia związane z jej późniejszym użytkowaniem.
Źródło:
https://rocktheweb.pl/6-zasad-projektowania-stron-internetowych/
