UX Research i badania

Wykorzystanie wiedzy o zmyśle wzroku w UX/UI designie

Wiedza o zmysłach jest ważnym elementem projektowania interfejsów użytkownika. W szczególności, wiedza o zmyśle wzroku jest niezwykle ważna w projektowaniu doświadczenia użytkownika (UX) oraz interfejsu użytkownika (UI).

07 cze 2022

UX design wiąże się z projektowaniem doświadczeń użytkownika. Jego odczuć, emocji oraz działań wykonywanych na danej stronie internetowej czy aplikacji. Każdym z tych działań steruje mózg danego użytkownika. Dosyć ciężkie byłoby jednak analizowanie każdej strony pod kątem tego, jak zareagują nasze neurony, czy receptory. O wiele prostsze oraz bardziej przyjazne jest odnoszenie się do samego użytkownika. Jednak warto wiedzieć w jaki sposób odbieramy rzeczywistość i jakie mechanizmy za tym stoją. 

 

Zmysł Wzroku

Najbardziej zaangażowanym zmysłem przy korzystaniu ze stron www jest niewątpliwie wzrok. Ponadto jest to jeden z lepiej przebadanych zmysłów. Pierwsze wrażenie zazwyczaj powstaje poprzez wzrok. Co prawda nasze doświadczenia wiążą się z integracją różnych zmysłów; np. kiedy coś jemy bierze w tym udział zmysł smaku, węchu, ale także wzroku, dotyku czy zmysł nazywany propriocepcją (zmysł odpowiedzialny za świadomość ułożenia części własnego ciała). Wzrok jest jednak na tyle silny, że można stwierdzić, że coś nam nie pasuje tylko na jego podstawie.

 

Jak działa zatem zmysł wzroku? Światło trafia do naszego oka, a konkretniej na siatkówkę. Znajdują się tam receptory: pręciki i czopki. Pierwsze z nich odpowiadają za widzenie ruchu i kształtu, są umiejscowione bardziej na obrzeżach siatkówki, są bardzo czułe na światło i ruch. Drugi typ receptora odpowiada za widzenie kolorów. Istnieją trzy rodzaje czopków, każdy z nich odpowiada za odbieranie częstotliwości fali przypisanej do koloru czerwonego, niebieskiego  lub zielonego. Jest ich najwięcej w centrum siatkówki, dlatego też to miejsce, w które się w danym momencie patrzy jest najbardziej wyraźne. Czopki działają najlepiej przy mocnym oświetleniu, jednak zbyt długie wystawianie ich na działanie mocnego światła może powodować ich uszkodzenie. Warto o tym pamiętać chociażby przy doborze kolorów do projektu, aby nie były one zbyt jaskrawe. 

Paleta kolorów, zmysł wzroku w UX/UI designie

Informacja o natężeniu światła oraz długości fali (co jest odpowiedzialne za konkretny kolor) przekazywana jest do nerwu wzrokowego. Ten z kolei przekazuje te informacje dalej do kory wzrokowej w mózgu, która znajduje się z płacie potylicznym. Najpierw trafiają one do pierwszorzędowej kory wzrokowej, gdzie jest odnotowywane, że coś widzimy. Następnie informacje trafiają do drugorzędowej kory wzrokowej, gdzie są interpretowane takie cechy jak ruch, linie poziome czy pionowe, kolor itd. Następnie informacje trafiają do kory ciemieniowej, gdzie są łączone z tym co już wiemy, naszymi wspomnieniami, przyzwyczajeniami oraz przekonaniami. Potem w płacie czołowym zachodzą procesy oraz decyzje wykonawcze, czyli co zrobić z tym co widzimy, jak na to zareagować. W płacie tym zachodzą także procesy poznawcze, które również są istotne podczas projektowania.

 

Wykorzystanie podczas projektowania

Jak jednak wykorzystać informacje o zmyśle wzroku opisane powyżej? To co widzimy dzięki czopkom, czyli to co jest w centrum naszego pola wzrokowego jest najbardziej czytelne, a więc także najłatwiejsze do przetworzenia. Co za tym idzie warto w pewien sposób kierować wzrokiem użytkownika np. przez wykorzystanie przycisków call to action, tak aby patrzył na rzeczy dla niego istotne np. w procesie kupna, czy pozyskiwania informacji. 

 

Im bliżej środka siatkówki jesteśmy tym więcej znajdziemy tam czopków. Na zewnątrz znajdziemy więcej pręcików, które nie są czułe na kolory, a jedynie na natężenie światła. Możemy to wykorzystać szczególnie przy projektowaniu strony, czy aplikacji na desktop, gdzie mamy odczynienia z większym polem do patrzenia. Obrzeża (o ile nie będzie tam nic przykuwającego uwagę), są raczej niewykorzystywane. Nie musi tutaj jednak chodzić konkretnie o marginesy strony. Kiedy patrzymy się np. na lewą stronę nie jesteśmy w stanie dokładnie zobaczyć tego co znajduje się w centralnym położeniu na ekranie. Chodzi tutaj o to aby akcje, które użytkownik ma wykonać kolejno po sobie były możliwe do wykonania w tym samym miejscu. Jeżeli wyskakuje jakiś pop-up z nową informacją, powinien on pojawić się w tym miejscu, gdzie użytkownik kliknął, jest to miejsce, w którym spodziewa się, że znajdzie jakąś informację. Dzięki temu jego reakcja będzie szybsza, a co za tym idzie wykona szybciej i łatwiej jakaś akcję. O widzeniu peryferycznym (czyli tym na obrzeżach naszego pola widzenia) warto pamiętać podczas projektowania bardziej skomplikowanych systemów, które będą użytkowane na kilku monitorach. 

Osoba przy monitorze, zmysł wzroku w UX/UI designie

Kolejną rzeczą którą można zapamiętać, jest to, że wszystkie opisane wcześniej procesy działają naprawdę bardzo szybko. Wszystkie impulsy nerwowe i przekazywanie informacji przez neurony odbywa się szybko i w krótkim czasie. Samo zauważenie bodźca odnotowywane jest w milisekundach. Dlatego warto, aby pierwsza rzucająca się w oczy rzecz na ekranie była dla użytkownika faktycznie tą najważniejszą, po którą przyszedł. Wyskakujące okienka są rozpraszające i wydłużają czas, a co się z tym wiąże także obniżają przyjemność z korzystania z danego serwisu.

 

Wszystkie te wskazówki mogą wydawać się proste i neutralne dla designerów, jednak ważne jest aby wiedzieć skąd takie a nie inne zasady w projektowaniu się wzięły.

FAQ

Najczęstsze pytania

  • Wzrok to najbardziej zaangażowany zmysł przy korzystaniu ze stron internetowych i jeden z najlepiej przebadanych — pierwsze wrażenie powstaje zazwyczaj przez wzrok, a znajomość mechanizmów widzenia pozwala zrozumieć, skąd wzięły się zasady projektowania.
  • Pręciki, umiejscowione na obrzeżach siatkówki, odpowiadają za widzenie ruchu i kształtu i są bardzo czułe na światło. Czopki odpowiadają za widzenie kolorów (czerwonego, niebieskiego i zielonego) — jest ich najwięcej w centrum siatkówki, dlatego to, na co patrzymy, jest najwyraźniejsze.
  • Informacje z nerwu wzrokowego trafiają do pierwszorzędowej kory wzrokowej w płacie potylicznym, potem do drugorzędowej — interpretującej ruch, linie i kolor — następnie do kory ciemieniowej, gdzie łączą się ze wspomnieniami i przekonaniami, a w płacie czołowym zapadają decyzje wykonawcze.
  • To, co w centrum pola widzenia, jest najczytelniejsze i najłatwiejsze do przetworzenia — warto więc prowadzić wzrok np. przyciskami call to action ku rzeczom istotnym w procesie zakupu czy pozyskiwania informacji. Pop-upy powinny pojawiać się w miejscu kliknięcia, gdzie użytkownik spodziewa się informacji.
  • Zbyt długie wystawianie czopków na mocne światło może je uszkadzać — warto o tym pamiętać przy doborze kolorów. Wyskakujące okienka rozpraszają i wydłużają czas reakcji, obniżając przyjemność korzystania z serwisu — pierwsza rzucająca się w oczy rzecz powinna być tą najważniejszą.

Blog

Powiązane artykuły

Czytaj więcej
UX Research i badania

Design-to-Code: co to jest i jak działa?

Design-to-Code to podejście, które skraca drogę od projektu w Figmie do działającego interfejsu w aplikacji, coraz częściej wspieranego przez AI. Zamiast ręcznie przepisywać layout, style i komponenty, część decyzji projektowych można automatycznie przenieść do kodu i szybciej zbudować pierwszą wersję UI. To nie magia, tylko zestaw konkretnych technik i narzędzi, które najlepiej działają wtedy, gdy projekt jest uporządkowany i oparty na design systemie.

Tomasz Kozon
22 lut 2026
UX Research i badania

Micro-Delays w UX: celowo projektowane mikroopóźnienia

W świecie projektowania UX szybkość działania interfejsu od lat uznawana jest za jeden z kluczowych wyznaczników jakości. Paradoksalnie jednak nie wszystkie opóźnienia są błędem - niektóre z nich są celowo projektowane, by wspierać zrozumienie, poczucie kontroli i zaufanie użytkownika. Micro-delays, czyli krótkie, kontrolowane mikroopóźnienia, mogą sprawić, że interakcje staną się bardziej naturalne i przewidywalne.

Tomasz Kozon
18 gru 2025
UX Research i badania

Scroll-Triggered Storytelling: Jak tworzyć historie, które ożywają podczas przewijania

Scroll-triggered storytelling to jedna z najbardziej angażujących form prezentowania treści w sieci, która łączy narrację z interakcją użytkownika. Dzięki animacjom i reakcjom na przewijanie historia dosłownie ożywa na ekranie, prowadząc odbiorcę przez opowieść w dynamiczny i intuicyjny sposób. Tego typu doświadczenia nie tylko zwiększają uwagę i zapamiętywanie treści, ale także budują głębsze, bardziej emocjonalne połączenie z marką lub projektem.

Tomasz Kozon
15 gru 2025
UX Research i badania

Dlaczego warto wybrać Justinmind? Zalety i zastosowania narzędzia

Projektowanie aplikacji i stron internetowych wymaga dziś nie tylko kreatywności, ale także narzędzi, które pozwalają szybko przekuwać pomysły w realne, interaktywne doświadczenia. Jednym z takich rozwiązań jest Justinmind – platforma do prototypowania, która zyskuje coraz większą popularność wśród projektantów UX i UI. Dzięki bogatym możliwościom, intuicyjnej obsłudze i szerokiemu wachlarzowi integracji, narzędzie to świetnie sprawdza się na każdym etapie tworzenia produktu.

Tomasz Kozon
11 gru 2025
UX Research i badania

Rive – interaktywne animacje w aplikacjach web i mobile

Animacje stały się jednym z kluczowych elementów nowoczesnych interfejsów, pomagając budować płynne, angażujące i intuicyjne doświadczenia użytkownika. Wraz z rozwojem narzędzi projektowych rośnie też potrzeba tworzenia animacji, które nie tylko wyglądają dobrze, ale również reagują na działania użytkownika i logikę aplikacji. Jednym z najszybciej zyskujących na popularności rozwiązań w tym obszarze jest Rive – platforma łącząca możliwości animacji 2D z mechaniką silników gier.

Tomasz Kozon
07 gru 2025
UX Research i badania

CSS Houdini: Custom Properties, Paint API i przyszłość stylowania

Nowoczesne interfejsy webowe coraz częściej wykraczają poza możliwości klasycznego CSS. Deweloperzy przez lata byli zmuszeni sięgać po JavaScript, SVG lub Canvas, aby tworzyć niestandardowe efekty wizualne i dynamiczne style. CSS Houdini zmienia ten paradygmat, otwierając wewnętrzny mechanizm renderowania przeglądarki na rozszerzenia tworzone przez programistów.

Tomasz Kozon
05 gru 2025