Whitespace – o pustych przestrzeniach na stronach internetowych słów kilka

Whitespace - puste przestrzenie na stronach internetowych

Wraz z postępem technologicznym zmienia się sposób, w jaki postrzegamy strony internetowe.

Wystarczy odwiedzić serwis Wayback Machine i sprawdzić, jak kiedyś wyglądały najpopularniejsze polskie serwisy informacyjne. Różnica między tym, co ujrzysz, a tym, co mamy obecnie, jest wręcz kolosalna.

Obecnie wszystkim (rzetelnym) projektantom stron internetowych przyświeca jeden, główny cel – stworzyć witrynę, która będzie możliwie najwygodniejsza dla jej użytkowników.

Chodzi o to, aby osoby odwiedzające daną stronę internetową możliwie najszybciej odnalazły to, czego szukają. Jest to realne tylko wtedy, gdy serwis jest:

  • przyjemny dla oka
  • przejrzysty
  • szybki w działaniu
  • prosty w obsłudze

Ściśle wiąże się z tym pojęcie tzw. whitespace.

Co oznacza whitespace? Gdzie się je wykorzystuje? Dlaczego whitespace jest tak ważne w kontekście tworzenia wygodnych, nowoczesnych stron internetowych?

Odpowiedzi na te pytania znajdziesz w dalszej części tekstu.

Zachęcam do lektury.

Co to jest whitespace?

Whitespace – jest to przestrzeń oddzielająca dany element od innych elementów na stronie internetowej.

Powyższa definicja jest bardzo ogólna, dlatego też natychmiast rzućmy okiem na konkretny przykład, by zobaczyć, o co tak naprawdę chodzi.

Co to jest whitespace?

Jak widzisz, napis „Gotowi na zyski?” na powyższym obrazku jest wyizolowany spośród pozostałych elementów. Jest doskonale widoczny, nie przylegają do niego inne obiekty.

Font jest czytelny, a tło niemal jednolite kolorystycznie. Bez żadnego problemu jesteśmy w stanie odczytać wspomniany tekst.

Co więcej, ta sama sytuacja dotyczy przycisku znajdującego się pod spodem. Zastosowany margines sprawia, że również i on jest odpowiednio wyeksponowany.

Za to wszystko odpowiada właśnie whitespace, czyli ta wolna przestrzeń, która sprawia, że istotne dla danej strony internetowej elementy nie giną w tłumie i się wyróżniają.

Zapewne spytasz – dlaczego nazwa (white – biały, space – przestrzeń) wskazuje, że chodzi o białą przestrzeń, a na powyższym przykładzie mamy niebieskie tło?

Otóż „biała przestrzeń”… nie musi być biała. Nazwy tej nie należy traktować w sposób dosłowny, bowiem nie chodzi tutaj o białą barwę, lecz po prostu o pustą, wolną przestrzeń. Swoisty margines oddzielający elementy od siebie.

Być może w Twojej głowie zrodzi się kolejne pytanie, np. „o co właściwie tyle szumu?”.

Spieszę zatem z wyjaśnieniami.

Whitespace odgrywa obecnie niezwykle istotną rolę na stronach internetowych. Poniżej znajdziesz sześć kwestii, które dotyczą tego zagadnienia.

Jak wykorzystywać whitespace na stronach internetowych? Jakie są z tego korzyści?

1. Whitespace wprowadza hierarchię wśród treści.

Whitespace i hierarchia

Rzuć okiem na powyższy obrazek.

Odpowiednio skonstruowana treść, w dodatku umiejętnie oddzielona pustymi przestrzeniami, jest bardzo przyjazna w kontekście zapoznawania się z nią.

Widzimy klarowną hierarchię:

  • logo
  • hasło (zwięźle tłumaczące, do czego dana usługa służy)
  • element tzw. social proof, który ma wytworzyć w Twojej głowie myśl: „wow, aż tyle osób im zaufało!”
  • formularz
  • tekst dopowiadający
  • grafika wpisująca się w kontekst

Wszystko przedstawione jest w taki sposób, by na górze znajdowały się najważniejsze informacje. Schodzimy wzrokiem w dół, zapoznając się ze wszystkim po kolei, aby w którymś momencie pojawił się w naszej głowie bodziec powodujący chęć wypełnienia formularza.

Nie byłoby to możliwe bez zastosowania whitespace, czyli przestrzeni, która oddziela od siebie wszystkie wyżej wymienione elementy. Zmniejszenie odstępów lub zaprezentowanie informacji w mniejszej liczbie linii spowodowałoby optyczny ścisk, co nie wyglądałoby zbyt atrakcyjnie.

Usługa po prostu nie byłaby w stanie odpowiednio „przedstawić” się odwiedzającym.

2. Eliminuje tłok i ścisk.

Kontynuując myśl wieńczącą poprzedni punkt, ponownie spójrz na kolejny obrazek:

Puste przestrzenie na stronie www

Ta strona wygląda po prostu schludnie. Ma przyjemne dla oka kolory, fonty są czytelne, a wszystkie elementy łącznie cechuje odpowiednia hierarchia.

Wyobraź sobie na przykład:

  • mniejsze odstępy między pozycjami w menu
  • o wiele dłuższy niż obecnie blok tekstu znajdujący się po prawej stronie formularza
  • etykiety pól formularza niezaczynające się równo razem od lewej strony, lecz np. przylegające do poszczególnych pól
  • brak marginesu oddzielającego tekst czerwonego przycisku od jego krawędzi

Wyglądałoby to nie tylko nieestetycznie, lecz po prostu nieporęcznie. Niewygodnie. Niepraktycznie. Niefunkcjonalnie.

Odpowiednie „rozstrzelenie” wszystkich elementów wraz z nadaniem im właściwej hierarchii sprawia, że zastosowanie whitespace czyni strony internetowe po prostu przyjaznymi dla ich użytkowników.

3. Pozwala skupić się na konkretnych elementach strony internetowej.

Call to action - wezwanie do działania

Jaki jest cel powyższej strony internetowej?

Jak na dłoni widać, że chodzi o to, by użytkownicy klikali wyróżniony, pomarańczowy przycisk.

Whitespace, czyli widoczna na obrazku przestrzeń, umożliwia skupienie się właśnie na tej akcji – odbyciu darmowej konsultacji.

Jeżeli nie mielibyśmy wizerunku mężczyzny wyizolowanego na jednolitym tle, lecz np. szerokie zdjęcie przedstawiające wiele osób, wtedy przycisk oraz wspomagające go teksty zginęłyby w tłumie. Byłyby zdecydowanie mniej widoczne.

Wolna przestrzeń jest przez nasze oczy omijana, wzrok kieruje się od elementu do elementu. Jeżeli elementów tych jest mało i nic nie zaburza ich ekspozycji, wtedy są one przez nas doskonale rozpoznawalne.

4. Whitespace wzmacnia znaczenie tekstu.

Skupienie na tekście strony internetowej

Powyższy przykład idealnie ilustruje, jak whitespace doskonale potrafi współgrać z tekstem.

PayPal jest usługą finansową. Dotyczy tematu istotnego dla nas wszystkich, toteż nie możemy podejść do tej usługi nonszalancko. W końcu chodzi o pieniądze. Wiedzą to jej dostawcy, zatem muszą przekazać nam sporo informacji na ten temat. Oczywiście w możliwie najłatwiej przyswajalny dla nas sposób.

Poprzez obecność whitespace wokół widocznych na obrazku elementów wszystko ma bardzo czystą i uporządkowaną strukturę. Tekst jest wyraźny, czytelny i nie zlewa się z innymi obiektami.

Sytuacja ta wyglądałaby zgoła inaczej, gdyby tekst z grafiki był przedstawiony nam np. jednym ciągiem. Wtedy ciężko byłoby nam „wyłapać” tekst odnoszący się do nas samych, czyli odbiorców, gdyż zakładam, że jesteśmy w stanie przyporządkować się do co najmniej jednej spośród trzech wyszczególnionych przez usługodawcę grup.

5. Eksponuje istotne CTA.

CTA i whitespace

Ponownie zwróć uwagę na to, jak przycisk o treści „Find debt relief options” wyróżnia się na powyższej grafice.

Charakteryzuje go wyróżniający się kolor, który nadano tylko temu elementowi. Dzięki temu nie ma szans, aby go przeoczyć.

Jednak czy to wszystko?

Nie. Efekt ten nie byłby możliwy, gdyby otoczenie przycisku bardziej zwracało na siebie uwagę.

Podstawą wysokiej klikalności CTA jest sprawianie, by takie przyciski po prostu wyróżniały się z tłumu. Umieszczanie ich wokół mnogości innych obiektów optycznie „chowa” je przed naszym wzrokiem.

Nie uczyniono tego na powyższym przykładzie, stąd też tak dobra jego prezencja.

6. Niekiedy stanowi o ekskluzywności.

Whitespace i minimalizm to mariaż doskonały.

Wykorzystywanie dużych, wolnych przestrzeni na ograniczonych obszarach wymusza w nas stosowanie małej ilości elementów. Stąd też siłą rzeczy rodzi się minimalizm.

Minimalizm, który nie zajmuje się żadnymi ozdobnikami. Zwraca uwagę, w sposób nienarzucający się, tylko i wyłącznie na konkrety.

Dlatego też minimalizm kojarzony jest z ekskluzywnością. Doskonale podkreśla to firma Apple – zarówno poprzez design swoich produktów, jak i sposób przedstawiania ich na własnej stronie internetowej.

Ekskluzywność na stronie internetowej

Nie ma takiej możliwości, aby produkty uznawane za pewną klasę premium dobrze prezentowały się w chaotycznym i nieprzemyślanym designie.

Zatem whitespace jak najbardziej może przydać się w momencie, gdy chce się wytwarzać przekaz kojarzony z wyjątkowością i wytwornością. Właśnie o to w tym chodzi, by przemawiać do odbiorców możliwie najbardziej subtelnie.

Czy rola whitespace rzeczywiście jest tak istotna?

Jak najbardziej!

Strony internetowe odpowiednio umiejące grać wolną przestrzenią robią na nas wrażenie. Nie tylko estetyką, lecz także intuicyjnością poruszania się po nich.

Dlatego też whitespace powinno być Twoim świetnym przyjacielem, jeżeli zamierzasz uczynić własną witrynę nowoczesną i przejrzystą.

Spodobał Ci się ten tekst?

Jeśli sądzisz, że moglibyśmy Tobie pomóc, odezwij się do nas. Wypełnij bardzo prosty formularz szybkiej wyceny. Gwarantujemy szybką odpowiedź.

Bądź pierwszą osobą, która skomentuje ten artykuł! 😉

Oświadczam, że akceptuję postanowienia zawarte w polityce prywatności. *

Michał Ziółkowski

Co-founder agencji interaktywnej MobileTry z Olsztyna, świadczącej kompleksowe usługi przede wszystkim małym firmom. Specjalizacją agencji jest tworzenie stron internetowych i sklepów internetowych. Ponadto MobileTry prowadzi kampanie reklamowe w internecie oraz oferuje usługi z zakresu pozycjonowania.

Mało czytania? Nie ma problemu!

Sprawdź inne teksty powiązane z tym artykułem

Michał Ziółkowski

5 lat temu

Porady dotyczące user interface – 7 ważnych kwestii

Oto nasze porady dotyczące user interface, których wcielenie w życie sprawi, że Twoja strona internetowa będzie bardziej przyjazna odbiorcom. Sprawdź je!

Jakub Ozorowski

5 lat temu

Brak konwersji w sklepie internetowym – 10 typowych przyczyn

Brak konwersji w sklepie internetowym to niewątpliwie ogromny problem dla właścicieli stron e-commerce. Jakie są najczęstsze przyczyny tego stanu rzeczy?

Michał Ziółkowski

5 lat temu

Proces tworzenia strony internetowej – na czym polega?

Z jakich kroków składa się proces tworzenia strony internetowej? Jakie jego aspekty są istotne, a które mniej? Zobacz, jak proces ten powinien przebiegać.

Michał Ziółkowski

5 lat temu

Najczęstsze błędy typograficzne na stronach internetowych

Jakie są najczęstsze błędy typograficzne na stronach internetowych? Dlaczego należy ich bezwzględnie unikać na własnej stronie? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Aktualizacja strony internetowej – kiedy najlepiej ją przeprowadzić?

W którym momencie aktualizacja strony internetowej powinna być przeprowadzona? Po czym poznać, że najwyższy czas na zmiany? Poznaj nasz poradnik.

Jakub Ozorowski

5 lat temu

Co irytuje użytkowników stron internetowych? – 14 kwestii

Czy wiesz, co irytuje użytkowników stron internetowych? Jakie są to elementy? W naszym wpisie wymieniamy kluczowe sprawy, na które musisz zwrócić uwagę.