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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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