Zasady tworzenia stron internetowych

Nie odkrywaj koła na nowo. Ogólne zasady projektowania stron internetowych to nie przeszkoda, ale okazja. Okazja na większą ilość wyświetleń, lepszą pozycję w wyszukiwarce, głębsze angażowanie użytkowników i lepszą konwersję.

Wysoka prototypowość jest uznawana za bardziej atrakcyjną wizualnie niż “dziwność”. Lubimy to, co znamy.

Strona internetowa jest jak dom. Warto go zaprojektować tak, aby odzwierciedlał osobowość właściciela, ale musi też spełniać podstawowe funkcje.

Dom ma efektywnie chronić przed opadami i chłodem, mieć okna na świat, przytulny wystrój, a to wszystko musi być osadzone na solidnym fundamencie.

Strona ma realizować cel, jaki przed nią stawiasz. Może być nim sprzedaż, pozyskiwanie subskrybentów, kursantów lub cokolwiek innego, na czym Ci zależy.

Jeśli chcesz, aby użytkownicy poczuli się przytulnie w Twoim wirtualnym domu i żeby spodobał im się wystrój, powinieneś stosować się do podstawowych zasad projektowania stron internetowych.

Wbrew potocz­ne­mu prze­ko­na­niu, Web Standards nie blo­ku­ją kre­atyw­nych i tech­nicz­nych moż­li­wo­ści osób two­rzą­cych witry­ny.

W rze­czy­wi­sto­ści, wła­ści­wie każ­dy pro­jekt moż­na wyko­nać na dwa spo­so­by: ten loso­wy i ten zgod­ny z kano­nem. Ta dru­ga dro­ga ma dwie zalety: uni­wer­sal­no­ść i łatwo­ść roz­wi­ja­nia.

Rezul­ta­ty prze­strze­ga­nia stan­dar­do­wych prak­tyk są poli­czal­ne.

Standardy tworzenia stron internetowych redu­ku­ją ryzy­ko awa­rii stro­ny i błę­dów wyświe­tla­nia się na róż­nym opro­gra­mo­wa­niu, pozwa­la­ją spraw­niej zarzą­dzać stro­ną i uła­twia­ją poro­zu­mie­nie mię­dzy spe­cja­li­sta­mi.

Twoim celem jest zachęcanie, a nie dezorientowanie użytkownika, prawda

Dlatego warto stosować się do złotych standardów tworzenia stron, które są uniwersalne i sprawdzają się w przypadku wszystkich witryn - landing page, wizytówek, e-commerce, a nawet rozbudowanych serwisów.

W projektowaniu stron jest przestrzeń na kreatywność i pragmatyzm. Jest tu miejsce na innowacje i niekonwencjonalne pomysły, ale pamiętaj o tym, czego oczekujesz od użytkownika i mu to ułatwiaj.

Kompasem, pomagającym obrać i utrzymać odpowiedni kurs, jest cel.

Jeśli prowadzisz sklep internetowy z bielizną chcesz, aby wyróżniał się na tle (bardzo licznej) konkurencji. Masz jakościowe zdjęcia, świetną szatę graficzną, szczegółowe opisy produktów.

Tylko to wszystko może nie wystarczyć, jeśli nie umieścisz w odpowiednich miejscach standardowych dla e-commerce elementów strony: przycisku “Dodaj do koszyka”, bezpiecznych metod płatności, koszyka etc.

Podstawowe zasady projektowania stron internetowych dają projektantom zestaw typowych elementów, dzięki którym są w stanie stworzyć czytelną stronę, przyjazną użytkownikowi.

Na przykład cały proces płatności jest obecnie doskonale przemyślany i nie ma tu konieczności tworzenia “fajerwerków”.

Wybranie celu pozwala zawęzić wybór elementów kluczowych dla danego projektu.

Znajomość przyzwyczajeń, zachowań i oczekiwań użytkownika to klucz do stworzenia dobrej strony.

Podstawowe zasady projektowania stron internetowych obejmują UX, czyli User Experience.

Inne oczekiwania względem strony ma klient poszukujący firmy budowlanej, który chce zobaczyć uprawnienia ekipy, zdjęcia zrealizowanych projektów i certyfikaty, a inne klient kupujący spacerówkę dla dziecka.

Ten ostatni chce zobaczyć filmik ze składania wózka i szczegółowy opis funkcji, które wózek posiada. Najlepiej z dużą ilością zdjęć!

Jeśli kierujesz się do nastolatek, na pewno będziesz mówił innym językiem niż do emerytowanych mężczyzn, prawda? Jednak w każdym przypadku wygrywa prostota!

Projektując stronę weź pod uwagę też dostępność dla osób niepełnosprawnych. Stosowanie tych zasad nie powin­no wyni­kać tyl­ko ze wzglę­dów praw­nych czy etycz­nych.

Dzia­ła­jąc w ten sposób zwiększasz poten­cjal­ną gru­pę swoich odbiorców i uła­twiasz posłu­gi­wa­nie się stro­ną wszyst­kim pozo­sta­łym, nie tyl­ko nie­peł­no­spraw­nym, użyt­kow­ni­kom.

Stare gry platformowe opierały się na jednym schemacie - “ciągle w prawo”. Gracz nie musiał się zastanawiać, gdzie iść i co robić.

Ta zasada jest wątpliwą wartością dla współczesnych gier wideo. Ale schemat prostej nawigacji warto adaptować do stron internetowych.

Jak projektanci mogą to osiągnąć? Kluczem jest logiczne i intuicyjne rozmieszczenie treści.

Wyobraź sobie stronę internetową, która na jednej odsłonie jednocześnie chce sprzedać produkt, zaprosić na webinar, nawiązać kontakt z klientem i jeszcze sprzedać konsultacje z ekspertem.

Słowem, nie ma nawet odrobiny wolnej przestrzeni do “zawieszenia” oka.

Koszmar, prawda?

Projektanci stron internetowych muszą znać zasady projektowania dotyczące proporcji, kształtów i bliskości, które bazują na tym, jak użytkownicy postrzegają i rozumieją treści wizualne.

Ważną zasadą jest teoria Gestalt, która wyjaśnia sześć zasad poznawczych dotyczących tego, jak postrzegamy elementy wizualne, w szczególności grupy elementów.

W projektowaniu stron internetowych oznacza to, że samo łączenie na ślepo przycisków i strzałek nie zadziała.

Zamiast tego prawidłowe rozmieszczenie tych elementów może pomóc użytkownikom w całościowym postrzeganiu projektu.

Zasada bliskości: elementy, które umieszczamy blisko siebie, są widziane przez odbiorcę jako jedna grupa. Umieszczanie przestrzeni między poszczególnymi grupami elementów ułatwia ich rozróżnianie.

Zasada podobieństwa: jednakowy kształt, kolor czy faktura sugerują, że dane elementy są tym samym. Działają tak samo, przekazują zbliżone informacje.

Zasada ta jest często stosowana w przypadku przycisków i innych elementów aktywnych, które różnią się od zwykłego tekstu.

Zasada symetrii: stosowana do uzyskania efektu elegancji. Umysł łączy symetryczne elementy nawet, kiedy nie są fizycznie połączone. Symetria ułatwia skanowanie zawartości strony i rozpoznawanie schematów.

Zasada figura-tło: umysł automatycznie stara się określić, co jest kluczowe dla danego widoku. Ta zasada sprawdza się np. na landing page - w centrum umieszczamy zawsze formularz z CTA i główną grafiką.

Najlepszym przykładem dla tej zasady jest słynna figura dwuznaczna psychologa Edgara Rubina, przedstawiająca dwie twarze i/lub wazon. W jednej chwili widzimy tylko jeden z tych obrazów. Jeśli widzisz wazon, w tym momencie nie widzisz twarzy i odwrotnie.

Zasada ciągłości: nasze oczy przyzwyczajone są do szukania ciągłości tam, gdzie fizycznie ona niekoniecznie występuje. Umieszczanie elementów w linii nakierowuje uwagę użytkownika na kolejne, ważne z naszej perspektywy, fragmenty strony.

Zasada domknięcia: na poniższym obrazku widzisz trzy “nadgryzione” kółka czy trójkąt? Zapewne i jedno i drugie, ale przecież “prawdziwego” trójkąta tam nie ma. Widzimy go dlatego, że nasz mózg nie lubi niedokończonych procesów i samodzielnie je “domyka”.

Dzięki temu nie wszystko musi być narysowane szczegółowo i dosłownie zaprezentowane, aby było zrozumiałe.

Nasze mózgi kochają schematy. Dzięki nim rozpoznajemy, z czym mamy do czynienia i jaką szufladkę poznawczą trzeba otworzyć.

Standardy stron internetowych sprzyjają naszym mózgom.

Wspominaliśmy już, że projektowanie strony internetowej to sztuka wyboru. Musisz zadecydować, który cel jest dla Ciebie najważniejszy i które elementy sprzyjają osiągnięciu tego celu.

Nie jest to łatwy wybór, ponieważ istotnych wiadomości o Twoim produkcie czy firmie jest pewnie całe mnóstwo.

To zmęczenie prowadzi do frustracji i zdenerwowania, w konsekwencji nawet porzucenia wyboru w ogóle!

Dlatego dobre restauracje ograniczają menu do kilku pozycji. Dlatego w cenniku operatora sieci komórkowej masz trzy opcje, a nie dziesięć.

Pamiętaj o tym, prezentując swoją ofertę. Nie chcesz przytłoczyć odbiorcy - chcesz, aby dokonał wyboru. Ograniczając opcje, zwiększasz szanse, że tak się stanie.

Wybrany krój pisma może wzmocnić markę, stworzyć tożsamość wizualną lub po prostu uzupełnić inne elementy na stronie.

Istnieją nieskończone opcje unikalnych czcionek, od wykonanych przez artystów po darmowe i przyjazne dla użytkownika czcionki Google Fonts.

Nie stać Cię na to, aby Twoja strona nie była przyjazna smartfonom. Nieważne, czy coś sprzedajesz, czy oferujesz usługi - prawdopodobieństwo, że odbiorcy będą trafiać na Twoją stronę za pomocą telefonu jest olbrzymie.

Standardy stron internetowych obejmują również to, w jaki sposób poszczególne elementy powinny prezentować się na urządzeniach mobilnych.

Dlatego menu zmienia się w “hamburgera”, przyciski powinny być odpowiednio duże tak, aby dało się w nie wygodnie kliknąć, a numery telefonu mają zawsze przenosić wprost do możliwości wykonania połączenia.

Istnieje kilka sposobów odpowiadania na potrzeby mobilnych użytkowników. Jednym z najpopularniejszych jest responsywne projektowanie, które dobrze prezentuje się na każdym rodzaju urządzenia.

Każdego dnia każdy z nas musi podejmować setki decyzji. Nie dokładaj pracy mentalnej swojemu potencjalnemu klientowi.

Jak możesz zmniejszyć wysiłek poznawczy?

Projektuj instynktowny system nawigacji, stosując standardowe rozmieszczenie elementów na stronie i wdrażając wszystkie powyższe strategie projektowania stron internetowych.

Poszczególne sekcje na stronie najlepiej jest dzielić nagłówkami. Najważniejszy z nich powinien znajdować się na górze i być możliwie jasny i opisowy.

Lepiej stawiać na czytelność niż poetykę. W pierwszej chwili użytkownik musi móc określić, czy jest w dobrym miejscu. Możesz (i warto to robić!) pokazać główną korzyść jaką oferujesz od wejścia, ale bez potrzeby domyślania się, czego właściwie dotyczy Twoja oferta.

Znajdź miejsce na CTA w różnych etapach podróży przez daną podstronę.

To, że ktoś odwiedza Twoją stronę, nie oznacza, że jest od razu gotowy do podjęcia akcji. Daj mu chwilę i przestrzeń - ale regularnie przypominaj się z CTA, aby nigdy nie poczuł się zagubiony i zawsze miał możliwość podjęcia akcji.

Pamiętaj też, że Twoja strona powinna być wyczerpująca. Jeśli Twoi klienci zazwyczaj zadają mnóstwo pytań na temat produktu czy usługi - na stronie odpowiadaj na wszystkie

Strona sprzedażowa jest formą rozmowy z klientem. Nie powinieneś jej przerywać w trakcie! A dopóki Twój odbiorca scrolluje, to znaczy, że jest zainteresowany.

Twarze przyciągają spojrzenia, a dodatkowo również mogą zwiększać sprzedaż. Warunkiem koniecznym jest jednak to, aby były pokazane w naturalnym kontekście.

Jeśli masz taką możliwość, pokazuj referencje od swoich klientów wraz z ich zdjęciami. To dodaje im potężnej wiarygodności!

Unikaj zdjęć stockowych. Mało jest fotografii mniej naturalnych niż typowe “stocki”. Zdecydowanie lepiej jest zrobić sesję zdjęciową osób faktycznie wykonujących pracę w Twojej firmie niż stawiać na fotografie sztucznie uśmiechniętych “ekspertów”.

Twoi klienci docenią osobisty i ludzki kontakt.

Czujesz się zagubiony w gąszczu porad? Pomożemy! Przeprowadzimy bezpłatny audyt Twojej strony i działań marketingowych.

Bazowanie na złotych zasadach tworzenia stron internetowych daje olbrzymią przewagę marketingową, ale zawsze warto sprawdzić, czy nie może być jeszcze lepiej.

Istnieją trzy główne rodzaje testów. Pierwszym z nich są testy eksploracyjne, które przeprowadza się na początku projektu, gdy istnieje już działający produkt podstawowy.

Jego celem jest zrozumienie zachowania użytkownika i sprawdzenie głównych cech projektu jeszcze zanim zainwestujesz czas w ich rozwijanie.

Drugim typem jest testowanie oceniające, zwykle przeprowadzane w połowie projektu. Ocenia użyteczność i kieruje zespół na obszary wymagające poprawy.

Trzeci typ to testy porównawcze. Ich zadaniem jest sprawdzenie, jak nasz produktów wypada na tle konkurencji. Pomaga to znaleźć ewentualne błędy u innych, sprawdzić, w jaki sposób mogą wpływać na działania użytkowników i - to najważniejsze - uniknąć ich u siebie.

Co warto testować? Absolutnie wszystko!

Wielkość i kształt przycisków, kolor fontów, grafiki, CTA (wezwania do akcji), układ produktów. Porównuj i sprawdzaj, które rozwiązanie bardziej przypada Twoim odbiorcom do gustu.

Tworzenie stron internetowych zgodnie ze sztuką jest umiejętnością, która wymaga poznania (również “w boju”) wielu zasad. Stosowanie się do nich zwiększa szansę na osiągnięcie celu - niezależnie od tego, czy jego miarą będzie konwersja, zapisy na newsletter czy sprzedaż.

W Owocnych specjalizujemy się w dowożeniu stron internetowych, które są zorientowane na użytkownika i realizowanie celów. Wszystkie zasady tworzenia stron internetowych, o których przeczytałeś, wykorzystujemy w praktyce. Stwórzmy taką stronę dla Twojej firmy!