{"id":13799,"url":"\/distributions\/13799\/click?bit=1&hash=865a89ddf5e1b9e468c75aafc8397c3511c1f5c9a63c9b3d346956d539f26271","title":"\u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043f\u0440\u043e\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430 \u00ab\u041c\u0430\u0440\u043a\u0435\u0442\u0435\u00bb ","buttonText":" \u041a\u0430\u043a?","imageUuid":"f7affe9f-a742-5820-ac81-04ba4a1a8f84","isPaidAndBannersEnabled":false}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Shuffle и Radio — выделены ярче всех, именно они включают музыку и предоставляют доступ к главной ценности продукта;
  • Subscribe — второстепенна, но потенциально тоже сократит путь к прослушиванию;
  • Share — спрятано под три точки.
Главный экран артиста в Youtube Music

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

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

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

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

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

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

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

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

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

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

Закон Якоба

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

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

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

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

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

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

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

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

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

Не привычный вид табов на сайте Правительства Голландии

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Форма поиска на сайте Авиасейлс пример проработанной «предусмотрительности»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

На практике

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

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

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

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

0
12 комментариев
Написать комментарий...
Евгений Андреев TGM

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

Ответить
Развернуть ветку
Юра Туривный
Автор

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

Ответить
Развернуть ветку
Саша G

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

Ответить
Развернуть ветку
Вероника Бойко

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

Ответить
Развернуть ветку
Юра Туривный
Автор

Благодарю!

Ответить
Развернуть ветку
Евгений

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

Ответить
Развернуть ветку
Юра Туривный
Автор

Спасибо!

Ответить
Развернуть ветку
Dasha Muhlynina

очень полезно, спасибо, сохранила)

Ответить
Развернуть ветку
Юра Туривный
Автор

Рад быть полезным!

Ответить
Развернуть ветку
Юра Туривный
Автор

Может )

Ответить
Развернуть ветку
Nick Nedelchuk

Очень хороший разбор и грамотный подход. Респект!

Ответить
Развернуть ветку
Юра Туривный
Автор

Спасибо 🙌

Ответить
Развернуть ветку
Читать все 12 комментариев
null