Детали и общие паттерны в интерфейсе

Привет! На связи руководитель дизайн-команды Пульса и Медиапроектов VK (ex. Mail.ru). В этой статье я расскажу про детали в интерфейсах: почему так важно уделять им внимание, а также расскажу о некоторых психологических аспектах при взаимодействии пользователя с интерфейсом.

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

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

Единообразие

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

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

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

Детализация

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

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

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

Мы — эгоисты

Люди всегда ценят внимание к своей персоне. Пользователю важно видеть, что для него стараются: нарисовали классную анимацию или сделали приятный дизайн. Но при этом при разработке интерфейса нужно задать себе вопрос: «Поймет ли пользователь и как он отреагирует?».

Когда пользователь пользуется продуктом, его не волнуют особенности устройства компании, экосистемы: вот это вот всё — ему нужно видеть, что старались именно для него. В этой связи очень важно иметь понимание клиентского опыта. Причём такое понимание должно быть не односторонним, иначе не будет объективности. По возможности, необходимо изучение опыта максимального количества потенциальных пользователей.

Проработка интерфейса и его элементов показывает профессионализм дизайнеров и разработчиков, и демонстрирует внимание к пользователю. Абсолютное большинство пользователей хотят быть причастны к «системе», которая одновременно хорошо работает и хорошо выглядит. Приведу несколько примеров:

Такие небольшие, но “тёплые” элементы обычно очень нравятся пользователю и вызывают более тесную связь с продуктом.

Работа подсознания

Визуальное восприятие интерфейса играет едва ли не самую важную роль при взаимодействии пользователя с ним. Например, для большинства пользователей фигура с закругленными углами легче для восприятия, чем фигура с острыми углами. Причина кроется в особенностях работы головного мозга: зрению проще справиться с окружностью, чем с многоугольником. Обработка углов требует вовлечения большего количества нейронов, чем обработка скруглённых форм.

Помимо правила с окружностями существует также и несколько других принципов хорошего визуального восприятия:

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