Scroll to top
© 2017 - 2018, Tools Media IT Soft E-Commerce Media House
Share

6 zasad projektowania stron internetowych

Przygotowujesz się do budowy profesjonalnej strony internetowej dla twojej firmy? Czy może jej modernizacji by była według obecnych trendów, przez co zgodna z wytycznymi Googla.

Najważniejsze w układzie strony internetowej to jej użyteczność. Często właściciele firm o tym zapominają, skupiając całą swoją uwagę na grafice, zdjęciach i animacji.

Potencjalny klient, 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. A tego nie chcemy.

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.

      layout strony internetowej
      Źródło: https://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/
    • 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.

      heat mapa strony intenetowej
      Zródło: https://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/#how-do-users-think
    • 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.

      Źródło: https://www.dropbox.com

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

Źródło: https://pixelbuddha.net/freebie/bearandloupe-font

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

Narzędzia:

http://www.colorhunt.co/ – zbiór inspirujących palet kolorystycznych
LOL Colors – świetne miejsce do znalezienia ładnych kolorów

5. Obrazy

Źródło: https://www.fwx.co.uk/

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://www.smashingmagazine.com/2008/01/10-principles-of-effective-web-design/
https://rocktheweb pl/ zasad-projektowania-stron-internetowych/

Related posts

Post a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *