gestalt_uiux

1.

Сьогодні:
Принципи
Гештальту в UI
UI/UX Start · Hillel IT School
01 Що таке принципи Гештальту
02 Як люди сприймають візуальну інформацію
03 6 ключових принципів для UI
04 Застосування в e-commerce
05 Типові помилки
06 Міні-тест на сприйняття
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

2.

Що таке принципи Гештальту
Гештальт-принципи пояснюють, як людина
сприймає візуальну інформацію.
Ми бачимо не окремі елементи, а
структури: групи, форми, зв'язки.
У UI це допомагає зробити інтерфейс зрозумілим
без зайвих пояснень.
Мозок бачить коло,
не 12 окремих точок
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

3.

Чому це важливо для UI
Користувач не аналізує екран поелементно.
Він швидко сканує і шукає відповіді на:
→ Що тут головне?
Назва товару
Назва товару
₴ 1 200
₴ 1 200
→ Які елементи пов'язані?
→ Куди натиснути?
→ Що є фоном, а що дією?
Купити
Купити
Мозок одразу бачить: 2 картки товару
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

4.

Найважливіші принципи для UI
01
02
03
Близькість
Подібність
Спільна область
Елементи поруч → пов'язані
Схожий вигляд → одна група
Рамка / фон → один об'єкт
04
05
06
Замкнутість
Продовження
Фігура / фон
Мозок домальовує форму
Погляд іде по лінії
Головне vs другорядне
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

5.

Близькість
Погано
Елементи, які стоять поруч, сприймаються як
пов'язані.
Краще
Назва
Назва
₴ 800
Купити
→ Групувати контент у секції
₴ 800
→ Об'єднувати елементи картки
→ Відділяти незв'язані блоки
Купити
→ Робити форму зрозумілою
Те саме, але відступи різні
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

6.

Подібність
Схожі елементи сприймаються як частина
однієї групи.
→ Однакові кнопки — однаковий стиль
Товар
Товар
₴ 1 000
₴ 1 000
Купити
→ Картки товарів — однакова структура
Купити
→ Іконки — один стиль у наборі
→ Повторювані елементи — консистентно
Товар
Товар
₴ 1 000
₴ 1 000
Купити
Купити
Однакова структура → мозок впізнає патерн
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

7.

Спільна область
Рамка або фон об'єднує елементи в одну
групу.
→ Картки товарів
→ Секції на сторінці
→ Модальні вікна
→ Форми
→ Pricing cards
PRO
₴ 499 / міс
Необмежені проєкти
Командний доступ
Пріоритетна підтримка
Спробувати безкоштовно
← Картка = спільна область
Все всередині → один об'єкт
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

8.

Замкнутість
Мозок може 'домальовувати' відсутні частини
форми.
Крок 2 з 4
Мозок бачить: 'половина шляху'
→ Іконки без замкнутого контуру
→ Логотипи з від'ємним простором
Незамкнений трикутник:
→ Progress bar (не повний)
→ Breadcrumbs
Мозок заповнює прогалини — менше елементів,
чистіший дизайн.
→ Ми все одно бачимо трикутник
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

9.

Фігура і фон
Користувач має одразу розуміти, що головне,
а що другорядне.
Видалити товар?
→ CTA-кнопки
Цю дію не можна скасувати.
→ Модальні вікна
→ Банери
Так, видалити
→ Стани error / success
Скасувати
Якщо фон і головний елемент конкурують —
користувачу складніше прийняти рішення.
Фон затемнений → модаль у фокусі
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

10.

Продовження
Погляд природно продовжує лінію або
напрямок руху.
Hero секція
↓
→ Вести погляд по сторінці
Переваги
→ Будувати логіку скролу
↓
→ Створювати зрозумілий user flow
→ Направляти до головної дії
CTA: Спробувати
Лінійний flow → погляд іде вниз до CTA
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

11.

Як це працює в e-commerce
Гештальт-принципи допомагають зробити шлях до
покупки простішим.
Фільтри
Ціна
Бренд
→ Картки товарів — однакова структура
Розмір
→ Фільтри — згруповані разом
→ Ціна і кнопка покупки — поруч
→ CTA — виділяється на фоні
Колір
Товар 1
Товар 2
₴ 1 200
₴ 1 200
→ Важливі блоки — не затиснуті
Купити
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.
Купити

12.

Типові помилки
✕ Різні стилі кнопок
✕ Хаотичні відступи
✕ Схожі елементи — різна
✕ Незрозуміло, що
поведінка
клікабельне
✕ Забагато акцентів
✕ Слабкий контраст фону і дії
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

13.

Міні-тест: яка кнопка виглядає більшою?
Подивіться уважно. Яка кнопка здається важливішою або більшою?
Меню
Про нас
Блог
Послуги
Контакти
Купити зараз
Купити зараз
Примітки • Умови • Конфіденційність • FAQ
A
A — ліва
B
B — права
C — вони однакові
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.
D — залежить від кольору

14.

Відповідь: вони однакові
Меню
Це ефект Ебінгауза.
Блог
Розмір елемента ми оцінюємо відносно
сусідніх елементів, а не сам по собі.
FAQ
Купити
Купити
Кнопка A
Кнопка B
Умови
→ CTA потребує простору навколо
Контакти
→ Важливі елементи не можна затискати
→ Whitespace підсилює ієрархію
→ Оточення впливає на сприйняття ваги
Однаковий розмір — різне сприйняття
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.

15.

Висновок
01 Близькість
Гештальт-принципи допомагають зробити інтерфейс зрозумілішим.
02 Подібність
→ Елементи логічно згруповані
03 Спільна область
→ Схожі речі виглядають схоже
→ Головна дія чітко виділена
04 Замкнутість
→ Фон не конкурує з контентом
→ Spacing підтримує ієрархію
05 Продовження
06 Фігура / фон
Хороший UI не змушує користувача здогадуватись.
UI/UX Start · Hillel IT School | Внутрішні навчальні матеріали. Не для поширення.