Podczas projektowania nowej strony internetowej warto jest trzymać się pewnych wytycznych. Wszystko to z myślą o użytkownikach. Niemal każdy serwis tworzy się przecież pod ich kątem (a na pewno powinno się to robić).
Niestety wielokrotnie można spotkać się z sytuacją, w której personalne widzimisię zleceniodawcy lub projektanta przeważa nad zdrowym rozsądkiem. Osobiste preferencje nie powinny być najważniejsze w momencie, gdy tworzy się stronę internetową, której motorem napędowym mają być sami użytkownicy.
Oczywiście każdy ma prawo stwierdzić: „moje podwórko, moje zasady”. Jednak jeśli odwiedzającym podwórko nie będzie się podobało, wtedy po prostu nie będą na nie przychodzić.
Dlatego też w ciągu ostatnich lat wykrystalizowały się pewne fundamenty, które stanowią podstawowe zasady projektowania stron internetowych. Niektóre z nich związane są raczej z obecnymi trendami, z kolei inne są na tyle uniwersalne, iż jeszcze przez długie lata nie wyjdą z mody.
Zobacz więc, jakie obecnie panuje podejście do wielu powszechnych elementów stron internetowych. Dowiedz się, co warto robić, a czego lepiej jest się wystrzegać.
Jakie są obecne podstawowe zasady projektowania stron internetowych?
1. Konsekwencja stylu.
Spójność. Jest to słowo-klucz, jeżeli chodzi o projektowanie stron internetowych.
Wygląd serwisu powinien być zbieżny z wizerunkiem marki. To naturalne. Określona paleta barw, konkretne fonty – wszystko to musi być z góry ustalone. Trzeba jednak pamiętać o tym, aby z drugiej strony nie przesadzić z jednolitością. Wygląd powinien być spójny, to fakt. Nie może to jednak prowadzić do nudy, a łatwo jest to wywołać poprzez zbyt małe zróżnicowanie wyglądu poszczególnych elementów.
Do czego nawiązuję?
Do kontrastu.
Słowa „kontrast” i „spójność” bez kontekstu nie idą ze sobą w parze, jednak w przypadku stron internetowych stanowią doskonałą mieszankę.
Nie bez powodu elementy call to action wyróżnia się zwykle alternatywnym kolorem pochodzącym z ustalonej palety barw. To one mają skupiać na sobie uwagę użytkowników, więc należy im w tym pomagać.
Warto jest też trzymać się swoistej powtarzalności. Prowadzi ona do większego poczucia spójności i sprzyja poprawie czytelności całego serwisu. Jeżeli podczas projektowania strony nie będziesz pamiętać o powtarzaniu pewnych fragmentów witryny (konkretnych kolorów, schematów, jakichś powiązań), wtedy projekt utraci integralność. Użytkownicy nie będą mogli wszystkiego wizualnie spiąć ze sobą. Nie można też iść w tę drugą skrajność, gdyż to z kolei będzie powodowało przytłoczenie.
2. Łatwa nawigacja.
Obecnie podstawowe zasady projektowania stron internetowych skupiają się przede wszystkim wokół intuicyjnej nawigacji:
- doskonale widoczne menu wraz z jasno nazwanymi działami
- odróżniające się przyciski
- klarowne instrukcje, jeśli jakieś elementy wymagają podjęcia niestandardowej akcji (choć z reguły należy ich unikać)
- wspieranie się prostymi i sugestywnymi ikonami
- brak przekombinowania z przejściami, animacjami i różnymi dodatkami, które ładnie wyglądają tylko przez kilka pierwszych sekund, zaś później denerwują
Wszystkie ww. punkty są podstawą dzisiejszego web designu. Oczywiście niektóre serwisy są wyjątkowe i stosują bardzo nieszablonowe rozwiązania, toteż momentami wyłamują się z przyjętych konwencji. Jednak zasada jest prosta: tworzy się z myślą o użytkowniku. A dokładniej – z myślą o jego wygodzie.
3. Sugestywne grafiki.
Flat design rozgościł się na dobre, jeżeli chodzi o trendy dotyczące wyglądu stron internetowych.
Jego zaletą jest przede wszystkim to, że – jak sama nazwa wskazuje – jest to styl płaski. Brakuje tu rozbudowanych cieni i gradientów, mamy ograniczoną paletę kolorów. Cel jest prosty: szybko trafić do świadomości użytkowników.
Właśnie to jest głównym powodem jego stosowania. Flat design nie zapiera tchu w piersiach, on ma po prostu budzić szybkie skojarzenia. Nic w tym dziwnego, ponieważ zdecydowanie szybciej reagujemy na bodźce graficzne, aniżeli czysto tekstowe.
4. Więcej przestrzeni.
O tej jakże ważnej zasadzie wspomniał już kiedyś Bartłomiej Kiljan w swoim poradniku user experience.
Ścisk przytłacza. Powoduje, że użytkownicy mają zbyt wiele ścieżek zachowań, które mogą w każdej chwili wybrać. Poszczególne elementy podstron walczą ze sobą o uwagę odwiedzających.
Dlatego też potrzebna jest przestrzeń.
Obecne podstawowe zasady projektowania stron internetowych nakazują zachowywać niezbędne wolne pole pomiędzy odpowiednimi elementami. Wszystko po to, aby nie tworzyć w użytkownikach uczucia paniki.
Być może brzmi to nieco przesadnie, ale tak właśnie jest. Jeśli jesteśmy otoczeni zbyt wieloma informacjami, gubimy się. Tak już my, ludzie, mamy. Nie pozwól więc, aby w trakcie projektowania nowego serwisu niepożądane sytuacje z życia codziennego przenosiły się do świata wirtualnego.
5. Proste formularze.
Jest to jedna z tych kwestii, które dość często poruszamy na łamach naszego bloga. Dlaczego? Ponieważ sprawdziliśmy to doświadczalnie.
Swego czasu przeprowadzaliśmy różne testy związane z liczbą pól formularzy. Wyniki nie były specjalnie odkrywcze, gdyż pokrywają się z ogólnymi wnioskami, które na ten temat możemy znaleźć w internecie (ConversionXL, Formstack).
Ogólna zasada jest prosta – im mniej, tym lepiej. Powód? Nie chcemy tracić swojego czasu.
Tak jest, po prostu nie chce nam się wypełniać rozbudowanych formularzy. Przyznaj – czy cieszysz się na widok ogromnego kwestionariusza, dodatkowo obwarowanego przeróżnymi nakazami (tu wielkie litery, tam małe, jeszcze gdzieś indziej wymagane spacje pomiędzy członami, innym razem bez nich)? Na pewno nie.
Tam, gdzie jest to możliwe, powinno się redukować liczbę pól formularza. Oczywiście trzeba pamiętać też o własnych korzyściach i nie przesadzić z redukcją, gdyż w przeciwnym wypadku nie będziemy otrzymywać takich ilości informacji, na jakie liczymy.
Trzeba więc znaleźć złoty środek i wypracować taki model, który jednocześnie będzie dostarczał nam wymagane informacje, ale nie będzie też powodował w użytkownikach chęci opuszczenia strony.
Jeżeli chcesz dowiedzieć się nieco więcej na ten temat, przeczytaj nasz tekst o błędach na landing page, które często można znaleźć w sieci.
6. Czytelność tekstu.
Podstawowe zasady projektowania stron internetowych bardzo często dotyczą samego tekstu. A dokładniej tego, w jaki sposób go przedstawiamy.
Należy koniecznie unikać dużych bloków tekstu. Są po prostu nieatrakcyjne i szybko męczą oczy. Dzielenie tekstu na akapity, które zawierają pionowe odstępy pomiędzy poszczególnymi sekcjami, jest jak najbardziej wskazane.
Trzeba też pamiętać o doborze właściwych fontów. W bazie Google Fonts można znaleźć całą masę fontów, które są przyjemne dla oka oraz sprawiają, że przez tekst brnie się łatwo i przyjemnie.
Nie zapomnij też o odpowiedniej wysokości linii. Chodzi o parametr, który oznacza się poprzez line-height. Zbyt niska wartość sprawi, że linie tekstu będą niemal nachodziły na siebie, z kolei za duża spowoduje „rozstrzelenie” tekstu w pionie. Trzeba znaleźć złoty środek. Pamiętaj jednak o tym, co stwierdziłem dwa punkty wcześniej odnośnie do przestrzeni – trzeba mieć ją na uwadze.
W artykule o optymalizacji konwersji sklepu również poruszaliśmy tematykę właściwego formatowania tekstu.
7. Łatwy dostęp do wyszukiwarki.
Wyszukiwarka nie jest elementem koniecznym na każdej stronie internetowej. Jednakże pewne specyficzne rodzaje stron www aż proszą się o to, aby wyszukiwarka była dostępna. Dodatkowo w widocznym miejscu.
Jeśli Twój serwis składa się z wielu artykułów lub informacji, które mogą być ukryte na różnych podstronach – zaopatrz się w wyszukiwarkę. Pamiętaj jednak o tym, aby uczynić ją łatwo dostępną. Nie chowaj jej w dolnej części strony. Pokaż użytkownikom, że w razie potrzeby mają ją pod ręką.
Oczywiście zadbaj też o jej poprawne działanie. Przydadzą się również filtry wyszukiwania, jeśli treść na Twojej stronie jest różnorodna i można ją przyporządkować do wielu wąskich kategorii. Odwiedzający to docenią.
8. Rezygnacja z paska bocznego.
Od pewnego czasu podstawowe zasady projektowania stron internetowych sugerują rezygnację z tzw. sidebarów. Czyli pasków bocznych.
Oczywiście nie jest to absolutnie uniwersalna porada. Są takie przypadki, w których pasek boczny jest bardzo przydatny.
Jednakże panuje trend przystosowywania treści m.in. wpisów blogowych do tego, aby wyglądały jak fragment książki. Podstrona, na której mamy tylko i wyłącznie tekst oraz obrazki. Wzrok wędruje wtedy z góry na dół, bez zbędnego odrywania uwagi na boki. Właśnie taki pożądany schemat zachowań leży u źródeł chęci rezygnacji z sidebara.
Całkiem niedawno poruszałem ten temat przy okazji wpisu o częstych błędach na blogach. W treści tego tekstu znajdziesz więcej argumentów za rezygnacją z pasków bocznych. Zajrzyj też do komentarzy, ponieważ tam również dyskutowaliśmy na ten temat.
9. Ograniczona liczba fontów.
O tak. Podstawowe zasady projektowania stron internetowych zakładają jak najmniejszą liczbę fontów wykorzystywanych na stronie www.
Absolutnie nie można przesadzić ich liczbą. Nie po to tworzy się schematy stylów, składające się z konkretnych fontów i kolorów, aby wszystko to wzbogacać o kolejne czcionki (informacja dla purystów językowych – znam techniczną różnicę pomiędzy oboma pojęciami, w tym przypadku „czcionkę” stosuję w formie synonimu).
Ogrom fontów prowadzi do braku spójności. Zwykle zaleca się korzystanie z dwóch rodzajów czcionek – głównego i pomocniczego. Ten pierwszy stosowany jest z reguły dla zwykłego tekstu, z kolei drugi jako wyróżnienie nagłówków. W większości przypadków taki podział jest optymalny.
Niestety, ale często na stronach internetowych można spotkać sytuacje, w których dany serwis pobiera np. z Google Fonts kilkanaście różnych czcionek. Jest to widoczne szczególnie wtedy, gdy strona internetowa bazuje na gotowym motywie WordPressa. Pół biedy, jeśli w rzeczywistości nie korzysta się z nich wszystkich. Jednak, nawet jeżeli, to dlaczego są one ładowane w tle w takiej liczbie? Nie ma to najmniejszego sensu, gdyż w ten sposób cała strona pobiera się nam zdecydowanie dłużej. Należy ograniczać liczbę połączeń z zewnętrznymi zasobami do niezbędnego minimum.
10. Mało wyśrodkowanych tekstów.
Jest to jedna z tych kwestii, na które zwracam ogromną uwagę. Niestety, ale nie potrafię zrozumieć fenomenu wyśrodkowywania tekstu na całych podstronach serwisów internetowych.
Tekst wyśrodkowany sprawia czytelnikom trudności w płynnym śledzeniu go wzrokiem. Jest po prostu niechlujny. Sprawia, że zarówno lewe, jak i prawe krawędzie bloków tekstu są nierówne. To utrudnia czytelnikom znajdowanie początku oraz końca linii, gdyż brakuje stałego punktu zaczepienia.
Pamiętaj o tym, aby środkowanie tekstu stosować tylko w przypadku nagłówków lub niewielkich bloków tekstu.
11. Skupienie uwagi na użytkownikach mobilnych.
Podstawowe zasady projektowania stron internetowych nie mogły pominąć tej kwestii. Nie chcę się zbytnio rozwodzić na ten temat, gdyż o zaletach RWD (responsive web design) jesteśmy notorycznie bombardowani od kilku lat przez setki (jak nie tysiące) artykułów.
Miej jednak na uwadze (w szczególności wtedy, gdy znajdujesz się w roli klienta i odbierasz projekt strony internetowej od zleceniobiorcy) ekrany innych urządzeń. Twój serwis nie będzie wyglądał tak samo na wyświetlaczu smartfona, jak ma to miejsce na ekranie monitora. I bardzo dobrze – obie wersje mają się od siebie różnić. Jednak w taki sposób, aby użytkownicy mobilni widzieli przed sobą serwis wygodny w nawigacji i czytelny. Tam nie ma miejsca na zbędne lub niedopracowane elementy.
O stronach przyjaznych dla użytkowników mobilnych wspomniałem już kiedyś w tekście zawierającym wskazówki user experience.
12. Korzystanie z odpowiednich narzędzi.
Nawet najzdolniejszy artysta nie będzie pracował sprawnie bez korzystania z odpowiednich narzędzi. Po to są one stworzone, aby usprawniać proces twórczy.
W internecie można znaleźć wiele usług i serwisów, których zadaniem jest ułatwianie przeróżnych czynności powiązanych z tworzeniem stron internetowych. Osobiście bardzo polecam Axure, jednak jest to narzędzie przeznaczone do nieco bardziej zaawansowanych projektów.
Zajrzyj na Creative Bloq, aby poznać całą listę programów i usług, które ułatwią Twoją pracę. Znajdziesz tam zarówno darmowe, jak i płatne rozwiązania.
13. Testy, testy i… testy!
Wszelkie podstawowe zasady projektowania stron internetowych da się sprawdzić tylko w jeden sposób. Poprzez testowanie.
Owszem, istnieje wiele zasad, które można odgórnie uznać za prawidłowe. Jednak mimo wszystko testy są konieczne, gdyż nie ma gwarancji, że nagromadzenie dobrych praktyk w ostatecznym rozrachunku da zgrabny i przyjazny użytkownikom serwis.
Podstawowe zasady projektowania stron internetowych – podsumowanie
Mam nadzieję, że powyższe porady przydadzą Ci się podczas projektowania nowej strony internetowej. Niektóre ze zdań zawartych w powyższym tekście bazują na wielu udokumentowanych przypadkach, jednak część jest moją prywatną opinią. Tym bardziej zachęcam do brania udziału w dyskusji i pozostawienia komentarza poniżej. Jeżeli masz odrębne zdanie na jakiś temat – zachęcam do odwiedzenia sekcji komentarzy.
Super dziekuje :)) bardzo czytelnie przedstawiony temat
fajny artykuł 😀
na pewno wezmę rady do siebie 🙂