Czym jest bliskość w projektowaniu stron internetowych i jak z niej korzystać?

To fascynujące, jak działa ludzki umysł. Czy zastanawiałeś się kiedyś, w jaki sposób ludzie wizualnie odbierają swój świat?

W XX wieku niemieccy psychologowie Max Wertheimer, Kurt Koffka i Wolfgang Kohler próbowali znaleźć odpowiedź na to pytanie. Przeprowadzili serię badań, w wyniku których opracowali zasady gestalt, które są zestawem prostych wskazówek, które wyjaśniają, jak ludzie widzą otaczający ich świat.

Bliskość jest uważana za jedną z zasad gestalt. Zasada ta ma znaczący wpływ na estetykę projektowania współczesnego interfejsu użytkownika. Na tym blogu opowiem Ci, co oznacza bliskość w Web Design i jak możesz z niej korzystać.

Czym jest bliskość w projektowaniu stron internetowych?

Pojęcie bliskości odnosi się do elementów, które należy uporządkować wizualnie i osiągnąć jak najmniejsze zamieszanie. Ważne jest, aby oddzielić treści, które nie są ze sobą powiązane, aby podkreślić brak związku między nimi.

Na przykład musisz zauważyć, że ikony kilku platform mediów społecznościowych zostały zgrupowane i nie zostały rozłożone na stronie internetowej. Jest to bardziej podobne do techniki umieszczania wszystkiego w jednym miejscu.

Układy, które wykorzystują bliskość, aby zminimalizować wizualną niejednoznaczność i promować zrozumienie, są łatwiejsze do zrozumienia. Bliskość pomaga również w strukturze układu strony. Właściwe zastosowanie bliskości ma znaczący i korzystny wpływ na wrażenia użytkownika.

Projektanci czerpią korzyści z zasady bliskości, ponieważ są w stanie osiągnąć główne cele, takie jak sprawienie, by układy wyglądały na mniej zagracone i grupowanie zmiennych, które są ze sobą połączone.

Jak wykorzystać bliskość w projektowaniu stron internetowych?

Biała przestrzeń

Zrozumienie znaczenia białej przestrzeni w projektowaniu jest pierwszym krokiem do pomyślnego przyjęcia pojęcia bliskości w projektowaniu.

Częstym problemem jest brak białej przestrzeni w projektach. Jeśli chodzi o wrażenia użytkownika, biała przestrzeń może wpływać na nie w takim samym stopniu, jak na rzeczywistą treść na stronie. Biała przestrzeń kieruje wzrokiem użytkownika, generuje kontrast i pozostawia trwały wpływ na umysł użytkownika.

Projektanci poprzez projekt komunikują charakter strony internetowej. Może to być tekst i obrazy. Ale efektowny projekt to coś, co ma dobrze zorganizowaną białą przestrzeń, która może wzmocnić elementy na stronie internetowej.

Utwórz wizualną hierarchię

Struktura strony internetowej oraz sposób organizacji i prezentacji treści są budulcem efektywnego sąsiedztwa. Projektant musi być w stanie skonstruować atrakcyjną wizualną hierarchię treści, aby osiągnąć cel efektywnej bliskości. Niezbędne jest zapewnienie swojej witrynie przejrzystej hierarchii wizualnej, dlatego ważne jest, aby efektywnie wykorzystać białą przestrzeń i ułożyć ze sobą porównywalne elementy.

Grupowanie i dalsze grupowanie podrzędne części witryny to najlepsza technika utrzymania hierarchii na swoim miejscu. Dzięki tej hierarchii użytkownik jest w stanie lepiej zrozumieć, gdzie był i dokąd chce się udać, co również pomaga wyrazić cel witryny.

Fakt, że użytkownik jest w stanie to zobaczyć, wskazuje, że jest świadomy i rozumie, gdzie przechowywane są odpowiednie informacje, co oznacza, że ​​pomyślnie przekazałeś wiadomość i cel witryny.

Popraw zrozumienie treści

Treść jest królem. W przypadku wielu produktów treść jest motywem, dla którego ludzie zaczynają z nich korzystać. Dobra przejrzystość (wygoda, z jaką czytelnik może rozpoznać pisemną treść tekstową) i czytelność (wygoda, z jaką czytelnik może dekodować symbole) to kluczowe elementy projektu produktu.

Wiele elementów może przyczynić się do przejrzystości i czytelności, w tym rodzina czcionek, rozmiar czcionki i kontrast treści tekstowej. Jednak sposób, w jaki kształtujesz treść treści na stronie internetowej, dodatkowo bez opóźnień wpływa na czytelność i przejrzystość treści.

Czytelność może być widoczna, gdy zawartość tekstowa jest dostarczana bez formatowania. Dostarczając treść w krótkich, łatwych do zeskanowania blokach — grupując zdania w akapity lub sekcje i oddzielając je odrobiną odstępu — pomagasz klientom testować i badać treść tekstową.

Mieć możliwy do zeskanowania układ

Czytanie i skanowanie treści, która jest zhierarchizowana i sklasyfikowana w logiczny sposób, jest znacznie prostsze. Budując swoją architekturę i design, strona internetowa powinna wykorzystywać bliskość, aby nie obciążać użytkowników treścią.

Dlatego też, pomimo tego, że koncepcje bliskości można stosunkowo łatwo wprowadzić w życie na stronach, które mają ograniczoną ilość materiału, bliskość jest istotnie bardziej istotna w przypadku stron o dużej zawartości treści. W rezultacie powinieneś sprawdzić, czy Twój układ jest prosty, czytelny i możliwy do zeskanowania przez użytkownika.

Podkreśl niektóre elementy

Nacisk jest jedną z najważniejszych koncepcji projektowania doświadczeń osobistych (UX). Dawanie pierwszeństwa precyzyjnym czynnikom lub treściom na stronie internetowej jest jednym z maksymalnych, nie nietypowych obowiązków dla projektantów.

Podczas gdy projektanci mogą korzystać z wielu ekskluzywnych strategii, aby uzyskać właściwe konsekwencje — w tym powiększanie szczegółów lub uwzględnienie dodatkowego kontrastu — możliwe jest uzyskanie identycznych konsekwencji bez zmiany autentycznych szczegółów. Zamiast tego możesz bawić się ilością słabych obszarów w szczegółach.

Istnieje natychmiastowy związek między biednymi obszarami a osobistymi zainteresowaniami. Im wyjątkowo ubogi obszar, który prześlesz w całości i szczegółowo, tym bardziej ważny stanie się on dla widza. Dzieje się to naturalnie – ponieważ zainteresowanie osoby może być skierowane w stronę szczegółu z bardzo ubogim obszarem, tak naprawdę z uwagi na fakt, że w tym miejscu nie ma niczego innego, co mogłoby ją zainteresować.

Naprawdę warto wspomnieć, że prawdopodobnie trudno jest rozpoznać, który szczegół wzbudza największe zainteresowanie na stronie internetowej. Dlatego zachęcamy do zastosowania internetowego oprogramowania do tworzenia layoutów, aby stworzyć prototyp swojego layoutu i zweryfikować go w teście 5-2.

Pokaż swój prototyp osobom, które stanowią twoją publiczność przez 5 sekund, po czym zapytaj ich: „Jakie są główne czynniki, które możesz sobie przypomnieć?” Jeśli nazywają szczegół (lub czynniki), które chcesz im zobaczyć, to wszystko jest w porządku.

Poprowadź oko widza przez treść

Zasada bliskości pomaga ci stworzyć waft, który jest dobrym sposobem na przeniesienie oka widza z jednego czynnika na drugi. Dopasowując białą przestrzeń, możesz bez wysiłku tworzyć ogniskowe lub regiony, które wyraźnie przyciągają uwagę użytkownika.

Tworzenie czynników centralnych zaczyna ewoluować wraz z rozwojem internetowej siatki układu, co jest dobrym sposobem na otoczenie czynników układu (wraz z treścią tekstową, obrazami lub praktycznymi kontrolkami) zawsze wewnątrz układu.

Gdy masz już siatkę, chcesz skonfigurować czynniki do obsługi klientów za pomocą sekcji z kluczowymi materiałami. Jak widać poniżej, właśnie to robi Evernote za pomocą parowania bloków treści tekstowych z ilustracjami. W rezultacie oko widza porusza się po zygzakowatej trasie podczas przewijania tej strony.

Zawijanie

Skupienie się na względnej odległości między czynnikami interfejsu użytkownika ma kluczowe znaczenie podczas rozmieszczania różnych monitorów i rozdzielczości. Projekt, który pojawia się na dużych monitorach laptopów, nie będzie widoczny na małych monitorach komórkowych.

Gdy układ jest zmniejszony, aby pomieścić mniejsze monitory, odstępy między czynnikami mogą zostać zminimalizowane, co prawdopodobnie zniszczyłoby rzekome relacje czynników interfejsu użytkownika. Ważne jest, aby sprawdzić układ na różnych monitorach i rozdzielczościach, aby sprawdzić, czy układ dobrze się skaluje. Można zastosować sprzęt Google Chrome Dev do symulacji urządzeń komórkowych.

To, jak poprawić wrażenia użytkownika witryny, jest również czymś, o czym możesz chcieć dowiedzieć się więcej. Skontaktuj się z nami, jeśli chcesz zaprojektować lub przeprojektować swoją stronę internetową.