7 качеств конверсионного интерфейса: пошаговое руководство по снижению «сопротивления интерфейса»

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

7 качеств конверсионного интерфейса: пошаговое руководство по снижению «сопротивления интерфейса»

Привет! Меня зовут Юра Туривный — я дизайнер продуктовых интерфейсов. За последние 12 лет работы я узнал много правил, помогающих мне в проектировании. Но запомнить все сложно, поэтому я сформулировал обобщающие лаконичные «7 качеств конверсионного интерфейса».

Вот эти качества:

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

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

Чему сопротивляется интерфейс

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

Продуктовая ценность — это положительные, измеримые изменения в жизни человека от использования продукта.

Интерфейс — это способ получения продуктовой ценности.

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

Сопротивление интерфейса — это физические и когнитивные усилия, затрачиваемые на получение продуктовой ценности.

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

С определениями все, перейдем к практике. Первое «качество» — высокая «плотность пользы».

01. Высокая «плотность пользы»

— Плотность пользы низкая, надо бы почистить.

«Плотность пользы» — это отношение полезной к не полезной информации на площадь экрана. Все, что не подталкивает человека для продвижения по воронке, снижает «плотность пользы».

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

Карточки фильмов на <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.imdb.com%2F&postId=559649" rel="nofollow noreferrer noopener" target="_blank">главной станице IMDB</a>
Карточки фильмов на главной станице IMDB

Без понимания ценности продукта с «плотностью пользы» работать не выйдет. C Localie, сначала я провел свой авторский воркшоп «Портрет героя», на основе чего и сформулировал job story:

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

Job story — отличный шаблон для упаковки смысла ценности продукта. Так же, для проектирования понадобиться обозначить воронку и тип пользователя:

Цель главной станицы: понять, что такое Localie, как это работает и перейти на страницу города. Тип пользователя: новый.

Главная причина провала стартапов (42%) отсутствие потребности в продукте. Поэтому, если не получается сформулировать правдивый Job story, возможно, и над интерфейсом не стоит работать. Не зря «плотность пользы» идет первым в списке качеств.

Разберем следующее «качество» и перейдем к практике.

Сопутствующее чтиво:

02. Низкая «плотность логики»

— Давай снижать плотность логики, интерфейс перегружен.

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

Например, за низкую «плотность логики» многие любят интерфейсы Apple и предвзято относятся к Windows. Вы только посмотрите! 14 против 26 контролов в шапке проводника MacOS Monterey и Windows 11 соответсвенно.

Сравнение «плотности логики» проводника MacOS Monterey и Windows 11
Сравнение «плотности логики» проводника MacOS Monterey и Windows 11

Хоть интерфейс MacOS и выглядит проще, нельзя сказать, что он уступает Windows функционально. Чтобы добиться этого, дизайнеры Apple пользуются принципом «постепенного раскрытия»: выносят наружу только ключевые действия, а второстепенные прячут. Идеально оставить три-четыре действиями в группе — это максимально снизит «сопротивление интерфейса».

Применение принципа «постепенного раскрытия» снижает «плотности логики» и увеличивает конверсию в ключевые действия.

Обратите внимание, как организованы кнопки в YouTube Music:

  • Shuffle и Radio — выделены ярче всех, именно они включают музыку и предоставляют доступ к главной ценности продукта;
  • Subscribe — второстепенна, но потенциально тоже сократит путь к прослушиванию;
  • Share — спрятано под три точки.
Главный экран артиста в <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fmusic.youtube.com%2Fchannel%2FUCzVh-F-RZdTHGV3S1o4KBWQ&postId=559649" rel="nofollow noreferrer noopener" target="_blank">Youtube Music</a>
Главный экран артиста в Youtube Music

Удивительно, как правило трех-четырех объектов часто встречается в повседневных интерфейсах. Например, в Gmail — у каждого письма в списке только три действия и три информационных объекта:

Высокая «плотность пользы» и низкая «плотность логики» в списке писем GMail
Высокая «плотность пользы» и низкая «плотность логики» в списке писем GMail

Теперь посмотрим, как «плотность логики» и «плотность пользы» работают на практике. Я перерисую главную страницу Localie в прототип, чтобы не отвлекаться от сути, и постепенно буду ее улучшать.

Увеличенная «плотность пользы» и уменьшенная «плотность логики» в интерфейсе
Увеличенная «плотность пользы» и уменьшенная «плотность логики» в интерфейсе

Перейдем к следующем трем «качествам», после продолжим работу над интерфейсом.

Сопутствующее чтиво:

03. Привычность

— Слишком экспериментально, давай привычнее, люди не поймут!

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

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

Закон Якоба

Взгляните на интерфейс сервиса поиска авиабилетов Hipmunk. Он настолько хотел быть «удобным» и «особенным», что умер в 2020 году. Хотя, скорее всего, это и не единственная причина.

Уникальный интерфейс поиска авиабилетов Hipmunk оказал медвежью услугу продукту
Уникальный интерфейс поиска авиабилетов Hipmunk оказал медвежью услугу продукту

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

Лучший интерфейс — это тот, которого нет. «Привычность» уменьшает условную видимость интерфейса, тем самым снижая «сопротивление интерфейса».

Я определяю 2 типа «привычности»: внутреннюю и внешнюю.

Внешняя «привычность»

К внешней «привычности» я отношу:

  • Паттерны взаимодействия в рамках отрасли;
  • Глобальные паттерны взаимодействия;
  • Привычные термины;
  • Привычные ментальные модели.

Посмотрите, как блок табов на сайте Правительства Голландии напоминает ссылки. Это нарушает «привычность» и сбивает с толку пользователя:

Не привычный вид табов на <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Find.nl%2Fen%2Fresidence-permits%2Fwork%2Fhighly-skilled-migrant&postId=559649" rel="nofollow noreferrer noopener" target="_blank">сайте Правительства Голландии</a>
Не привычный вид табов на сайте Правительства Голландии

Внутренняя «привычность»

«Внутреннюю привычность» часто называют консистентностью. К этому относятся единые паттерны взаимодействия, контролы, терминология и т. д. внутри одного продукта. Дизайн-системы отлично решают задачу консистентности, а значит и увеличения конверсии в том числе.

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

Разберем еще два «качества» и вернемся к проектированию.

Сопутствующее чтиво:

04. Открытость

— А это что за иконка? Без подписи не понятно, давай открытее.

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

Легко проверить интерфейс на «открытость», пользуясь взглядом новичка: представьте, что вы видите происходящее на экране в первый раз. Если все понятно: от состояний интерфейса до значения иконок и терминов — все в порядке.

Обратите внимание на антипример ниже, как интерфейс робота-пылесоса Ecovacs скрывает функции за неочевидными иконками:

Интерфейс робота-пылесоса Ecovacs не сильно проявляет «открытость»
Интерфейс робота-пылесоса Ecovacs не сильно проявляет «открытость»

Особенно важно проявить «открытость» при ошибках системы. Не прячьтесь за секретными формулировками вроде «Ошибка 521», объясните причину на человеческом языке и подскажите, что делать дальше.

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

Отсутствие обратной связи в течении 400 миллисекунд превышает порог Доерти, что может привести к отказу пользователя.

Далее расскажу про «предусмотрительность» и вернемся к интерфейсу.

Сопутствующее чтиво:

05. Предусмотрительность

— А что если, человек удалит и захочет вернуть? Не предусмотрительно!

«Предусмотрительный» интерфейс идет на шаг впереди, мягко подталкивает и сокращает путь пользователя.

Базовое правило, отвечающее за «предусмотрительность» — провести человека за ручку: ответить на возможные вопросы или, даже, совершить действия за него.

Хороший пример «предусмотрительного» интерфейса — формы поиска на сайтах авиабилетов. Форма сама переходит к следующему полю, показывает подсказки, исправляет ошибки и т.д..

Форма поиска на сайте <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fwww.aviasales.ru%2F%3Fparams%3DAMS1&postId=559649" rel="nofollow noreferrer noopener" target="_blank">Авиасейлс</a> пример проработанной «предусмотрительности»
Форма поиска на сайте Авиасейлс пример проработанной «предусмотрительности»

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

«Предусмотрительный» интерфейс зарезервированного жилья AirBnb
«Предусмотрительный» интерфейс зарезервированного жилья AirBnb

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

— А сколько ждать ответа? — Около часа. «Предусмотрительно» подсказывает Авито
— А сколько ждать ответа? — Около часа. «Предусмотрительно» подсказывает Авито

Еще один «предусмотрительный» прием — не заставлять пользователя напрягать память. Например, показать историю поисков, подсветить посещенные ссылки или просмотренные товары.

Также, важно «предусмотрительно» оберегать человека от возможных ошибок. Например, если он случайно удалил товар из корзины — предложить вернуть его обратно.

Теперь посмотрим, как качества «привычность», «открытость» и «предусмотрительность», проявят себя на практике.

Проработанная «привычность», «открытость» и «предусмотрительность» в интерфейсе
Проработанная «привычность», «открытость» и «предусмотрительность» в интерфейсе

Вы молодцы, еще 2 качества и закончим!

Сопутствующее чтиво:

06. Разборчивость

— Шрифт не читается, разборчивость низкая. Давай контрастнее и крупнее!

Ясная передача смысла визуальными средствами — это все про «разборчивость». Это качество определяется контрастом с фоном, а также, контрастом и положение объектов друг относительно друга. Разберем по порядку.

Контраст с фоном

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

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

Контрастная графика интерфейса Uber
Контрастная графика интерфейса Uber

Контраст и положение объектов друг относительно друга

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

Например, на странице товара Amazon слоев информации слишком много, и контраст между ними довольно слабый — от этого страница выглядит шумной, и быстро пробежаться взглядом по ней довольно сложно:

Визуально «неразборчивая» страница товара Amazon
Визуально «неразборчивая» страница товара Amazon

Выравнивание объектов друг относительно друга также влияет на «разборчивость». Существует три главных правила:

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

Если обобщить — положение объектов должно соответствовать смысловой структуре.

Например, посмотрите на два одинаковых списка событий в Яндекс Афише: в приложении — слева, и в веб версии — справа:

Не удачный и «разборчивый» дизайн списка событий в Яндекс Афише
Не удачный и «разборчивый» дизайн списка событий в Яндекс Афише

Не трудно заметить, насколько сложнее воспринимается информация в приложении — в этом дизайне нарушено примерно все. Спасибо дизайнерам за этот антипример!

Ура, почти закончили! Перейдем к последнему «качеству» — «эргономичность».

Сопутствующее чтиво:

07. Эргономичность

— Давай сделаем кнопки больше! Эргономичность страдает!

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

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

Добавить тут особенно нечего, поэтому сразу к интерфейсу.

Улучшенная «разборчивость» и «эргономичность» интерфейса
Улучшенная «разборчивость» и «эргономичность» интерфейса

Сопутствующее чтиво:

С благодарностью поздравляю, на этом все! Для большей наглядности сравним общее было/стало.

Интерфейс проработанный по «7 качествам конверсионного интерфейса»
Интерфейс проработанный по «7 качествам конверсионного интерфейса»

Ставьте лайк, если считаете, что стало лучше, понятнее и человек вероятнее перейдет на страницу города.

На практике

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

Применение «7 качеств» на практике
Применение «7 качеств» на практике

Кроме того, я пользуюсь «7 качествами» как чеклистом во время проектирования и обязательно нахожу, что еще улучшить. Менеджерам продуктов и арт-директорам «качества» помогут конструктивнее комментировать работу дизайнера. А программистам создавать более юзерфрендли интерфейсы даже без дизайнера.

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

2929
12 комментариев

Супер интересный материал 👍

2
Ответить

Спасибо! Рад, что понравилось!

1
Ответить

"Плотность логики" - вот как-то не по-русски, для меня.
Может "Функциональность", как отношение основных функций к вспомогательным.

2
Ответить

"Мастер-класс" получился. Доходчиво и полезно.

1
Ответить

Благодарю!

Ответить

Хороший материал

1
Ответить

Спасибо!

Ответить