Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

В предыдущей статье мы разбирались с теорией — с помощью основ психофизиологии выясняли, почему красивое кажется удобным. Сегодня мы хотим рассказать про основные методы, которые помогают управлять визуальным восприятием человека.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Эти методы можно использовать при проектировании интерфейсов, чтобы обратить внимание пользователя на нужные моменты, детали, информацию.

Методы легко масштабируются — они одинаково справедливы и при отрисовке иконок, и в проектировании больших, сложных интерфейсов. Но при этом они не универсальны, и не подходят для «любых типов задач». Выбирать и применять нужно именно то, что подходит для конкретных целей.

«Магическое число семь плюс-минус два»

Существует закономерность, согласно которой кратковременная человеческая память, как правило, не может вместить и воспроизвести более 7 ± 2 элементов. Если объектов становится больше, человек избегает решения задачи. Либо сводит её к более простым способам решения.

Например, если в интернет-магазине по одному запросу выдается сразу много карточек товаров, высока вероятность, что пользователь уйдет оттуда ничего не выбрав. Что делать, если в интерфейс нужно вписать намного больше объектов? Можно взывать к так называемой геометрической памяти, правильно группировать объекты и не забывать об эффекте края.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Геометрическая память

Мы обращаемся к геометрической памяти постоянно и для разнообразных задач. Для того чтобы перейти дорогу, нужно найти глазами зебру, а потом светофор. Взгляд, соответственно, направляется на дорогу, находит забру, затем поднимается вверх на светофор.

Так же и с интерфейсами. Возьмем самую простую и привычную задачу: позвонить человеку. Сначала разблокируем телефон, затем находим (чаще всего в левом нижнем углу экрана) иконку, напоминающую телефонную трубку (чаще всего она синяя или зеленая), находим номер телефона в списке или в поле поиска, нажимаем на кнопку вызова. Геометрическая память помогает направить взгляд в привычную область экрана и найти привычные паттерны.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Закон памяти: эффект края

Снова вернёмся к группировкам объектов. А что же делать с объектами, когда их очень много? Кажется очевидным тот факт, что если нужно выбрать какую-либо вещь или товар, то гораздо проще будет это сделать в небольшой выборке. Обычно эту проблему в интерфейсах решает поиск и фильтры.

Но что если и после этого шага — ассортимент огромен? Тут вступает в бой «эффект края». Это особенность восприятия, при которой человек лучше запоминает начальные и конечные элементы группы, и хуже — промежуточные. У пользователей нет времени изучать, где у вас что находится — информационный дизайн должен быть четко спланирован и продуман ещё на этапе проектирования. Если дизайнеры расположат важные объекты (рекламные банеры, товары, ссылки, кнопки) в начале и в конце страницы, то тогда «эффект края», безусловно, сработает. Еще один «лайфхак» — разделить товары над подгруппы, разделить список баннером с другим контентом или добавить страницы товаров с адекватным количеством товаров на каждой.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Больше внимания визуализации данных

Инфографика привлекает внимание в любом дизайне. Единственный способ эффективно представлять сложные данные пользователям – визуализировать их. В интерфейсе продуктов, особенно сложных, например, банковских, очень много цифр, метрик, индикаторов и других разнообразных и сложно воспринимаемых данных. Но если вы оформите все эти данные в аккуратную инфографику, пользователь быстрее разберется в этих данных и сможет проще решать свои задачи. И, как результат, будет чаще пользоваться вашим продуктом.

Не бойтесь визуализировать данные. Даже если на первый взгляд кажется, что это неуместно, то погрузитесь в стилистику и подберите подходящий визуал.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Accessibility-дизайн

Миссия accessibility-дизайна заключается в том, чтобы облегчить работу с цифровым продуктом людям с ограниченными возможностями и тем самым облегчить работу с ним для всех и расширить целевую аудиторию. Проработанный контраст визуала, субтитры, большие шрифты — для любого вида контента необходимо продумать путь пользователя с ограниченными возможностями.

Все точки взаимодействия бренда с клиентом должны быть отражены и проработаны. Работая над визуалом продукта, не забывайте об этом и постарайтесь сделать ваш дизайн более универсальным для разных групп пользователей.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Принципы Гештальта

При правильном и уместном использовании эти принципы помогут вам в решении как UX, так и UI задач. Применяйте их и со временем вы заметите, что метрики экранов или страниц, где используются эти принципы, вырастут.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Негативное пространство

Теория Гештальта основана на идее, что человеческий мозг будет пытаться упростить и организовать сложные изображения или конструкции, состоящие из множества элементов, подсознательно упорядочивая части в организованную систему, которая создаст цельную картину, а не просто серию разрозненных элементов.

Наш мозг создан так, что во всём склонен видеть структуру и модели, дабы понять окружающую среду лучше и оперативней. Так, если мы оставим пустое пространство вокруг нашего дизайна, пробелы в изображении создадут целое, большее, чем сумма его частей.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Сходство

В принципе Гештальта подобные элементы визуально сгруппированы независимо от близости друг к другу. Они могут быть сгруппированы по цвету, форме или размеру. Сходство может быть использовано, чтобы связать элементы друг с другом, независимо от расстояния между ними.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Непрерывность

Человеческий глаз будет следовать по самой ровной, гладкой траектории при просмотре линий, независимо от того, как линии были нарисованы. Это продолжение может быть ценным инструментом, когда цель — направить взгляд посетителя в определенном направлении.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Завершение образа

Принцип гласит, что мозг заполнит недостающие части дизайна или изображения, чтобы создать цельную картину. Простыми словами, это сложные формы, которые можно увидеть на логотипе Adobe, Sun Microsystem, NBC, США Network и так далее.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Близость

Этот принцип относится к тому, насколько близки элементы друг к другу. В UX-дизайне принцип близости используется для того, чтобы заставить пользователей группировать определенные вещи вместе. Объединяя вещи, пользователи будут воспринимать это как нечто связанное.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Взаимодействие фигуры и фона

Аналогично принципу замыкания, этот использует отрицательное пространство. Наш мозг будет различать объекты на переднем плане изображения. Это действительно удобно, когда дизайнеры хотят сделать акцент на фокусе.

Почему красивое кажется удобным: разбираем интерфейсы с точки зрения науки. Часть 2

Конечно, это далеко не все методы, с помощью которых мы можем управлять вниманием пользователя. Мы описали лишь базовые подходы, которые можно работают в большинстве ситуаций.

Если хотите больше — ставьте плюсик и мы напишем еще одну статью о том, как работать с визуальным восприятием пользователя :)

P.S. Ну а в заключительной части статьи вас ждет только практика — инструменты, которые сделают приложение простым, понятным. Другими словами, красивыми и удобным одновременно.

Ставьте лайки и подписывайтесь на нас тут и в Instagram: )

8787
55 комментариев

Спасибо за статью. Было бы еще лучше, если бы показали реальные примеры.

17
Ответить

На реальных примерах не получится лить воду.

8
Ответить

Спасибо за вашу обратную связь! 
Мы думали об этом, но решили, что так  будем субъективными и только собьём с толку читателей.

В следующей части будем рассказывать о конкретных инструментах при построении интерфейсов, возможно там вы найдёте больше ответов на ваши вопросы 😊

6
Ответить

Комментарий недоступен

6
Ответить

В нашей серии статей мы стараемся донести до читателей мысль о том, что красивое=удобное. В это части мы рассказываем про методы, которые можно использовать при построении интерфейсов, чтобы сохранять этот баланс )

1
Ответить

Плохая статья: заголовок не соответствует содержанию, иллюстрации слабые, примеров нет. Статью писала нейросеть? :)

5
Ответить

Дмитрий, как мы написали во вводке, это вторая часть из серии статей, в которых мы стараемся раскрыть тему, как и почему красивое кажется удобным, и как эти знания помогают дизайнерам создавать удобные и красивые интерфейсы.

Если тема вас затрагивает, оставляем ссылку на первую часть статьи :)
https://vc.ru/design/198754-pochemu-krasivoe-kazhetsya-udobnym-razbiraem-interfeysy-s-tochki-zreniya-nauki-chast-1?ref=vc.ru

2
Ответить