1 2 800x440 - Почему пользователи не могут запомнить наши интерфейсы? Об эффекте маски в дизайне
«Понимание комиксов: невидимое искусство» (1993), Скотт Маклауд

Почему пользователи не могут запомнить наши интерфейсы

Позвольте мне поделиться с вами моим сегодняшним опытом…

… Я заказал такси, используя одно из этих приложений.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему пользователи не могут запомнить наши интерфейсы? Об эффекте маски в дизайне
Приложения для поездок

… Я проверил свои сбережения в одном из этих банковских приложений.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему пользователи не могут запомнить наши интерфейсы? Об эффекте маски в дизайне
Банковские приложения

… Я купил пару футболок через одно из этих приложений для розничной торговли.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему пользователи не могут запомнить наши интерфейсы? Об эффекте маски в дизайне
Приложений для розничной торговли

К концу дня я использовал три разных приложения и ни одно из них не запомнил.

Компании избегают придавать характер своим интерфейсам. Они формируют бренд, но прячут интерфейс под маской… подобно человеку-пауку, скрывающему свое лицо.

Эффект маски

Когда в 1963 году Marvel выпустили «Человека-паука», персонаж сразу нашел отклик у читателей, потому что, в отличие от других супергероев, все дети могли представить себя под его маской.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему пользователи не могут запомнить наши интерфейсы? Об эффекте маски в дизайне
Человек-паук: Через вселенные (2018)

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему пользователи не могут запомнить наши интерфейсы? Об эффекте маски в дизайне
Понимание комиксов: невидимое искусство (1993), Скотт МакКлауд

Недавно с фильмом «Соник в кино» у нас был еще один пример того, как люди испытывают эмпатию через «эффект маски». Людям понравился оригинальный пиксельный дизайн Соника, но, когда Sony Pictures выпустила трейлер фильма и представила новый реалистичный внешний вид, люди сразу же его возненавидели.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему пользователи не могут запомнить наши интерфейсы? Об эффекте маски в дизайне
Эволюция Соника

Фидбек аудитории заставил студию переделать фильм сделав новый дизайн Соника мультяшным.

Избегание неправильного восприятия

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему пользователи не могут запомнить наши интерфейсы? Об эффекте маски в дизайне
Pablo Casado (PP), Pedro Sanchez (PSOE) и Albert Rivera (C’s)

Теперь посмотрим на интерфейсы этих банковских приложений. Это одинаковый язык дизайна.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему пользователи не могут запомнить наши интерфейсы? Об эффекте маски в дизайне
Банковские приложения

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

Мы не создаем эмпатию, потому что боимся, что пользователи могут покинуть нас.

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

Не похоже, что мы проектируем, похоже, что мы просто следуем рецепту.

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

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

Позвольте пользователям запомнить вас

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

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

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Почему пользователи не могут запомнить наши интерфейсы? Об эффекте маски в дизайне
Тинтин (Эрже), Гоку (Акира Торияма) и Лиза (Мэтт Грейнинг)

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

Давайте добавим слой индивидуальности в наши дизайны. Что-то, что позволит пользователям запомнить вас.

Свежие вакансии
                        Skywaylab Skywaylab After Effects- 2D аниматор на проектные работы удаленно! Фриланс Москва до 20 000 руб за ролик ₽
                        MYTONA MYTONA Motion-designer Полная Санкт-Петербург
                        Beta Beta Senior / Middle Web Designer Офис Москва
                        Traffic Time Traffic Time Дизайнер-сборщик страниц на платформе GetCourse Удаленно Москва
                        Digital agency aim Digital agency aim Middle UX/UI дизайнер Удаленно Брянск от 80 000 ₽
Все вакансии

Оригинал: uxdesign.cc

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Добавить комментарий
Похожие записи

Как создавать темные темы. Руководство от Superhuman

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

10 золотых правил UI дизайна

Когда вы сомневаетесь, обратитесь к этому списку стандартных приемов UI дизайна, которым нужно следовать

Основы иерархии в дизайне интерфейса (UI)

Понятие иерархии, ресурсы и значение иерархии для дизайна интерфейсов