Чем хороший UX-дизайн отличается от бесящего? Разбираем на кейсах Ozon, Золотого яблока и других брендов

Недовольные пользователи, гневные отзывы и отсутствие продаж — то, что вы получаете, если в продукте плохо продуман UX-дизайн. Рассказываем, как сделать приложение, чтобы аудитория его ценила, любила, советовала друзьям и несла вам все свои денежки.

Привет 🖐🏻 Меня зовут Катя, я UX/UI-дизайнер в Purrweb — студии разработки MVP для стартапов и бизнеса. Мы всегда делаем продукты с упором на UX. Почему? Потому что функциональный флоу позволяет бесшовно юзать приложение и не задумываться о лишних действиях. Выглядит это так: у человека есть цель, он открывает наш сервис, получает то, за чем пришел, и никакие препятствия ему не мешают.

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

В статье я собрала 8 решений, которые точно влюбят пользователей в ваше приложение. Поехали!

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

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

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

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

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

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

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

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

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

✅ Я думаю, лучше упрощать все, что можно упростить. Особенно финальный этап воронки продаж, когда пользователь вот-вот купит ваш товар или услугу.

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

Круто, когда команда продукта всегда в тонусе и не упускает возможности добавить в жизнь пользователей немного праздника. Как это работает: с конца осени в России готовятся к Новому году, потом сразу отмечают Рождество, День святого Валентина, гендерные праздники, не забывают и о Масленице, а там уже лето, осень, Хеллоуин, и все по новой.

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

Показываем несколько скриншотов 👇🏻

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

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

Хороший пример приветственной анимации есть в приложении для знакомств Pure. Визуальная концепция яркая и разнообразная: при первом касании пользователь видит несколько меняющихся картинок с необычными образами и абстрактными персонажами. Благодаря этому продукт запоминается с первого раза. Посмотрите сами 👇🏻

Еще один интересный пример — анимация переливов в «Яндекс Музыке». Она помогает поддерживать общую визуальную концепцию и оживляет главную страницу. При входе в приложение пользователь видит облако, которое играет почти всеми цветами радуги — от розового и фиолетового до желтого и зеленого. Экран получается отзывчивым и интерактивным.

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

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

✅ Лучше использовать жесты, чтобы упростить переходы между экранами. Например, когда свайпом можно закрыть модальное окно или вернуться, не нажимая на стрелочку вверху экрана. Использование этого инструмента прописано даже в гайдлайнах Human Interface от iOS.

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

✅ Главное качество UX/UI-дизайнера — это эмпатия, без нее в этой профессии ничего не получится. Нужно уметь поставить себя на место человека, который будет пользоваться вашим продуктом.

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

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

Если вы прямо сейчас находитесь в поиске современных решений для своего проекта, предлагаем изучить несколько полезных дизайн-ресурсов. Они пригодятся не только моим коллегам, но и всем, кто работает с IT-продуктами.

✔ Mobbin — там собирают скриншоты реальных приложений. Это целая библиотека фич и UI/UX-решений. Я могу зайти на сайт и посмотреть, как реализована та или иная фича в популярных и редких продуктах. Например, суперлайк в Тиндере.

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

✔ Книга «Пользовательский интерфейс» от «Бюро Горбунова» — учебник с базовыми паттернами в дизайне интерфейсов для дизайнеров и разработчиков. В книге собраны принципы, которые актуальны сейчас и будут актуальны 20 лет спустя.

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

✔ Growth.Design — а здесь собрано очень много кейсов с переверсткой. С этим ресурсом вы поймете, как и куда развивать свой продукт.

Больше инсайтов для стартаперов, дизайнеров и всех причастных читайте в телеграм-канале «Стартап-пикап». И расскажите в комментариях, какие приложения навсегда остаются в вашем сердечке или хотя бы смартфоне?