Zasada bliskości mówi o tym, że odnoszące się do siebie elementy powinny być rozmieszczone wizualnie tak, aby unikać zamieszania i prowadzić do lepszej organizacji wyglądu projektu. Elementy ze sobą nie powiązane powinny być rozmieszczone w znacznej odległości, aby użytkownik nie miał wątpliwości, że brak pomiędzy nimi bezpośredniego związku.

Poprawne używanie zasady bliskości w połączeniu z innymi zasadami projektowania ma ogromny wpływ na odczucia użytkownika oraz ostateczny sukces strony.

Nie bój się białych przestrzeni.

Pierwszym krokiem do odpowiedniego wdrożenia zasady bliskości jest zrozumienie wagi białych przestrzeni w projekcie.

Brak białego pola jest typowym błędem amatorskich projektów. Projekt jest sposobem przekazu informacji. Gdy amatorzy biorą się za przekazanie treści, ich typową skłonnością jest równomierne rozłożenie zawartości tak, aby zapełnić całą przestrzeń. Nie zastanawiają się oni nad możliwościami dobrego wykorzystania białego tła.

Białe pola mogą wpłynąć na zachowanie użytkownika nie mniej (jeśli nie bardziej) niż właściwa zawartość strony. Prowadzą one wzrok w określonym kierunku, tworzą kontrasty oraz pozostawiają trwałe wrażenia.

Duża ilość wolnej przestrzeni w nagłówku oraz odpowiednio pooddzielana od siebie treść, a także paski boczne stanowią o przejrzystości i dobrze zorganizowanym wyglądzie strony.

Nie obawiaj się zatem wolnego miejsca na stronie. Odpowiednie jego wykorzystanie jest pierwszym krokiem w realizowaniu zasady bliskości, a poprzez to projektowaniu stron o bardziej atrakcyjnym wyglądzie.

Pogrupuj wizualnie powiązane ze sobą elementy.

Biała przestrzeń jest jednakże tylko jednym ze sposobów wykorzystania zasady bliskości. Projekt może mieć wiele białej przestrzeni. Jeśli jednak jego elementy nie będą odpowiednio pogrupowane, przestrzeń ta, jak pokazują dwie wizytówki poniżej, będzie mało efektywne wykorzystana:

Wizytówka po lewej nie jest przeładowana treścią, posiada białe pola. Jej treść nie jest ułożona logicznie i stąd słabe wrażenie jakie wywiera.

Czytający musi przeszukiwać ją wzrokiem kilkakrotnie. Wizytówka po prawej robi znacznie lepsze wrażenie – wystarczy rzut oka i czytający znajduje wszystkie informacje (więcej o tym w dalszej części artykułu).
Pogrupowanie elementów wizytówki po prawej stronie jest także bardziej logiczne. W pierwszym zestawie informacji widzimy, napisaną dużą czcionką, nazwę firmy. Poniżej jej adres. Druga grupa mówi nam jak zasięgnąć więcej informacji na temat jej usług (numer telefonu, adres strony).

Przykład ten pokazuje jak ważna jest zasada bliskości w przypadku materiału do druku, jednakże można ją również stosować przy projektowaniu stron.

Tworzenie hierarchii wizualnej.

Efektywne wykorzystywanie białych przestrzeni oraz grupowanie powiązanych ze sobą elementów są decydujące jeśli chodzi o nadawanie stronie przejrzystej hierarchii wizualnej. Oczywiście, budowa strony oraz przepływ informacji stanowią podstawę efektywnej bliskości.

O hierarchii decyduje sposób rozmieszczenia elementów na stronie.

Pomaga ona użytkownikowi połapać się, które miejsca już odwiedził, a do których dopiero zajrzy prezentując mu tym samym cel istnienia strony.

Strony które łatwo się przegląda i czyta.

Dobrze przedstawiona hierarchicznie i logicznie pogrupowana zawartość jest łatwiejsza do przeglądania oraz czytania.

Nagłówki przedstawiające tylko główne punkty umożliwiają czytelnikowi sprawne poruszanie się po stronie. Nie trzeba wspominać, że treść powinna być planowana od początku tak, aby uwzględniać odpowiednią hierarchię wizualną. Lista z wcięciami powyżej jest tego marnym przykładem ponieważ zawartość nie idzie w parze z hierarchią wizualną.

Strona, w której strukturze zastosowano zasadę bliskości nie przytłacza czytelnika nadmiarem informacji.
Mimo, iż zastosowanie tej zasady jest względnie proste na stronach gdzie nie pojawia się wiele treści, znacznie ważniejsze jest wykorzystywanie jej na stronach bogatych w treść.

Siatki pomagają utrzymaniu bliskości.

Jednym ze sposobów grupowania i wykorzystywania białej przestrzeni jest rozpoczynanie pracy od zbudowania siatki.

Wygląd tworzony w oparciu o siatkę, z odpowiednimi odstępami, daje mnóstwo przestrzeni pomiędzy sekcjami i, w wielu przypadkach, zmusza projektanta do stosowania zasady bliskości bez specjalnego myślenia o niej.

Prowadź czytelników dobrą drogą.

Inną cenną korzyścią bliskości elementów związanych ze sobą jest fakt, że pozwala ona użytkownikowi poruszać się płynnie po stronie. Gdy podstawowe narzędzie nawigacji jest wyraźnie oddzielone od pozostałych elementów strony, użytkownicy szybko je znajdą i raczej nie zapomną gdzie się ono znajduje.

Odpowiednia hierarchia wizualna poprzez wykorzystanie bliskości, pozwala czytelnikowi w łatwy sposób zagłębić się w stronę bez ryzyka błądzenia i wchodzenia w zakładki wcześniej już odwiedzane.

Zawsze będzie się on czuł komfortowo i bez problemu dotrze do najważniejszych sekcji na stronie.

Projektanci stron z małym lub z brakiem doświadczenia w projektach drukowanych mogą wiele skorzystać realizując zasady jakie projektanci materiałów drukowanych z powodzeniem stosują od czasów sprzed boomu na strony internetowe.

Bliskość nie jest jedyną zasadą projektową, która czyni stronę bardziej przyjazną w użyciu i przyjemną w oglądaniu. Warto ją jednak, z powodów przedstawionych powyżej, wziąć pod uwagę przy projektowaniu stron.

Materiały własne, Smashing Network

Brak podobnych wpisów.