Зміст
Однією з найвпливовіших психологічних теорій в області UX і дизайну взаємодії є теорія гештальту. Теорія була заснована німецькими психологами, і слово "гештальт" в перекладі означає форма або форма Як випливає з назви, ідея гештальт-теорії полягає в тому, що люди сприймають групи об'єктів як патерни, а не окремі об'єкти.
Існує багато статей про принципи гештальту, але не так багато з них допомагають зрозуміти, як застосовувати їх у роботі UX/UI дизайнера. Ця стаття дасть вам кілька ідей про те, як використовувати принципи гештальту для створення кращих UX та UI дизайнів, які допоможуть людям досягати своїх цілей з меншими зусиллями.
Закон подібності
Принцип подібності стверджує, що коли об'єкти фізично схожі, ми схильні згрупувати їх разом і припустити, що у них є той самий функціонал Наприклад, на зображенні нижче досить легко відрізнити лінію, що містить бордово-червоні кола, від решти зображення завдяки іншому кольору.
Приклад принципу подібності. Фото автора.
Використання подібності в UX та UI дизайні
Уявімо, що ваша компанія розробила додаток під назвою "Il Mio Chef", яким користуються шанувальники італійської кухні в США і Канаді (ми будемо використовувати його до кінця цієї статті). У нещодавньому звіті, який вам передав ваш UX-дослідник, йдеться про те, що, коли справа доходить до замовлення італійської їжі, користувачі здебільшого дбають про те, які ресторани знаходяться найближче до них. Зрештою, ми всі хотіли б, щоб нашілазанью або піцу, доставлену поки вони ще свіжі і теплі, чи не так?
Дивіться також: Як створювати NFTЩоб полегшити користувачам нашого додатку пошук найближчих до них ресторанів, ми можемо використовувати принцип подібності, виділяючи ці ресторани в інтерфейсі. На зображенні нижче ви можете побачити, як виділення цих варіантів жовтим кольором (праворуч) має велике значення, візуально підкреслюючи різницю між найближчими ресторанами і тими, що знаходяться далі. Ось як ви можете це зробитиможе використовувати принцип схожості, щоб допомогти вашим користувачам швидко знайти те, що вони шукають.
З використанням гештальт-принципу подібності. Зображення автора.
Закон близькості
Принцип близькості стверджує, що об'єкти, які розташовані близько один до одного здаються більш пов'язаними між собою Наприклад, на першому і другому зображеннях однакова кількість кіл, але на другому деякі стовпчики розташовані ближче один до одного і створюється враження, що це три окремі групи, а не одна велика група.
Близькість - приклад 1 - велика група. Зображення автора.
Близькість - приклад 2 - три різні групи. Зображення автора.
Використання близькості в UX та UI дизайні
Візьмемо приклад зі сфери візуалізації інформації.
Цього разу уявімо, що ви - керівник, який хоче побачити, як працює ваш додаток "Il Mio Chef". Ви хочете подивитися на KPI, які вимірюють фінансові показники, залученість користувачів і задоволеність. Спочатку ваш фахівець з візуалізації інформації створює наведену нижче інформаційну панель, яка змушує вас і всіх інших керівників губитися в цифрах і ставити ще більше запитань. Через місяць багато хто з васпросто припиніть використовувати цей дашборд взагалі.
Дашборд КПІ - Il Mio Chef. Зображення автора.
На цьому етапі ви повертаєтеся до свого фахівця з візуалізації інформації і просите його полегшити людям розуміння загальної картини, переробивши дизайн дашборду. Принцип близькості стає в нагоді в цьому випадку, і ви можете побачити новий дизайн нижче. Він містить три групи, розділені за типом KPI, і це допомагає кожному зрозуміти, як додаток працює з точки зору фінансових показників.Групування об'єктів разом і використання більшого пробілу між групами може допомогти вашим користувачам швидше засвоювати інформацію.
Використання гештальт-принципу близькості в дизайні дашбордів. Зображення автора.
Закон безперервності
Принцип безперервності стверджує, що як тільки око починає стежити за об'єктом, воно буде продовжувати "рух" у цьому напрямку, поки не зіткнеться з іншим об'єктом. Цей рух допомагає нам сприймати об'єкт як частину того ж шляху, який ми повинні пройти, щоб знайти інформацію. На зображенні нижче показано, як ми можемо використовувати принцип безперервності для створення таких візуальних моделей, які направляютьпогляд у певному напрямку.
Приклад принципу безперервності. Зображення автора.
Використання безперервності в UX та UI дизайні
Ваш UX-дослідник представив новий звіт, який показує, що основною мотивацією для користувачів використовувати додаток "Il Mio Chef" є дослідження їжі, оскільки він дозволяє їм щотижня отримувати доступ до нових ресторанів італійської кухні. Ви дивитеся на метрику, яка показує, скільки разів люди прокручують варіанти з поточним UX-дизайном на зображенні нижче (ліворуч), і бачите, що вони ніколи не прокручують більше двох разів насереднього рівня, щоб побачити, які варіанти доступні для них.
Використовуючи принцип безперервності (праворуч на зображенні нижче), ваш UX-дизайнер допоміг збільшити цю кількість до 10 свайпів в середньому. Як це сталося? Приховуючи частину зображення і підкреслюючи той факт, що вам потрібно провести пальцем вліво або вправо, щоб побачити, що там знаходиться, ваші користувачі буквально створювали рух "свайпу" і були більш мотивовані досліджувати більше ресторанів іЦе те, що попередній дизайн зовсім не мотивував вас робити, навіть якщо у вас вже є внутрішня мотивація до цього.
Використання гештальт-принципу безперервності в UX/UI дизайні. Зображення автора.
Підводячи підсумки Використання принципів гештальту, представлених у цій статті, у вашому UX та UI дизайні може допомогти вашим користувачам швидше знаходити інформацію та краще її засвоювати. Крім того, це може підвищити їхню задоволеність вашим продуктом, мотивуючи їх до дій, які вони люблять найбільше.
Дивіться також: Як намалювати гарбуз
Обкладинка містить ілюстрацію Міклоша Філіпа, відредаговану у видавництві Vectornator.
