Projektowanie stron - co sprawia, że strona www jest przyjazna dla użytkownika?
Strona internetowa przyjazna dla użytkownika (ang. user-friendly) to nie tylko strona, która jest atrakcyjna dla oka i angażująca. To oczywiście ważne, ale nie jedyne aspekty, które należy wziąć pod uwagę przy projektowaniu stron www. Przyjazna strona to taka, która również, a może przede wszystkim zapewnia użytkownikowi komfort i bezpieczeństwo użytkowania. Projektowanie stron internetowych, które są przyjazne i przemyślane pod kątem użyteczności (ang. usability) dla użytkownika, wpisuje się w podejście klientocentryczne. Co to jednak znaczy, że strona jest przyjazna dla użytkownika?
Aby zaprojektować przyjazną stronę www, nie tylko należy wykazać się umiejętnościami technicznymi, ale również zastosować zasady dobrego designu. Podstawą jest zastosowanie się do Wytycznych dla dostępności treści internetowych (WCAG) w aktualnej na moment powstania tego artykułu wersji 2.1. Nie będę w tym miejscu opisywał treści całego dokumentu. Jednak warto podkreślić, że według wymogów dostępności treści powinny być postrzegalne (czytelne, rozróżnialne), funkcjonalne, zrozumiałe, kompatybilne (dające się interpretować przez pozostałe programy używane przez użytkownika), zgodne z normami. Zasady dobrego designu, które przedstawiam, uwzględniają powyższe wymagania.
Zasada 1 - Zarządzaj wolną przestrzenią
Pusta przestrzeń (ang. negative space lub white space) to wolne miejsce pozostawione pomiędzy elementami umieszczonymi na stronie. Czasami wydaje się nam, że im więcej przestrzeni zagospodarujemy (czytaj: umieścimy na niej więcej elementów) tym nasza strona będzie ciekawsza i bardziej angażująca dla użytkownika. Jednak jest zupełnie odwrotnie. Spróbujmy postawić się w roli użytkownika, który odwiedza naszą stronę i mamy ledwie kilka sekund na to, żeby go zaangażować. Umieszczenie wielu elementów na niewielkiej przestrzeni, bez wyraźnej granicy pomiędzy sprawia, że użytkownik staje się przytłoczony, traci orientację, które elementy są ważniejsze i co właściwie od niego oczekujemy. Elementy właściwie walczą między sobą o atencję użytkownika, zamiast współdziałać. Ograniczenie liczby elementów do istotnego minimum, wyraźne ich odseparowanie poprzez pozostawienie pustej przestrzeni zwiększa dostępność i czytelność treści oraz przyczynia się do ich lepszego zrozumienia.
Zasada 2 - Grupuj elementy powiązane
Treści i elementy graficzne, które dotyczą tego samego kontekstu, powinny być uporządkowane i zgrupowane. Natomiast pozostałe treści powinny być od nich odseparowane. Dzięki temu użytkownik znacznie szybciej zorientuje się, co chcemy przekazać i w efekcie będzie bardziej skłonny wykonać akcję, której od niego oczekujemy. Projekt stanie się bardziej czytelny, funkcjonalny i przyjazny dla użytkownika. Jako separator dobrze sprawdza się pusta przestrzeń, o której była mowa wcześniej.
Zasada 3 - Działaj spójnie
Elementy designu, które stosujemy w ramach projektu, powinny być ze sobą spójne, powtarzalne i powinny się wzajemnie uzupełniać. Chodzi w tym przypadku o stosowanie spójnych grafik, kształtów, czcionek i kolorów. Dzięki stosowaniu spójności w przekazie możemy budować i utrwalać skojarzenia z naszą marką w bardziej trwały sposób. Jednocześnie poprawiając czytelność i wprowadzając porządek.
Zasada 4 - Wykorzystuj kontrast
Kontrast odnosi się do elementów, które w pewien sposób różnią się od siebie. Może to dotyczyć różnic w barwie, kształcie, wielkości czy rodzaju użytej czcionki. Kontrast pozwala na zwrócenie uwagi na element designu, który z różnych względów powinien być wyróżniony tak, aby zwrócić uwagę użytkownika. Przykładem może być wyróżnione call-to-action.
O kontrakście możemy mówić również jako o aspekcie zwiększającym dostępność i czytelność treści.
Zasada 5 - Równaj
Wyrównanie odnosi się do ułożenia elementów względem często niewidocznej linii. Możemy stosować wyrównanie horyzontalne lub wertykalne. Wyrównanie sprawia, że projekt jest bardziej uporządkowany, czytelny i zrozumiały dla użytkownika, dzięki czemu ułatwia orientację.
Zasada 6 - Stosuj punkty skupienia
Punkty skupienia (ang. focal points) mają za zadanie przyciągnąć uwagę użytkownika i stanowią początek customer journey. Jako punkt skupienia możemy zastosować grafikę, kształt czy wyróżnioną czcionkę. Dzięki temu możemy zwrócić uwagę użytkownika na najbardziej istotne elementy naszego projektu i wzbudzić zaangażowanie.
