Привет 🖐🏻 Меня зовут Катя, я UX/UI-дизайнер в Purrweb — студии разработки MVP для стартапов и бизнеса. Мы всегда делаем продукты с упором на UX. Почему? Потому что функциональный флоу позволяет бесшовно юзать приложение и не задумываться о лишних действиях. Выглядит это так: у человека есть цель, он открывает наш сервис, получает то, за чем пришел, и никакие препятствия ему не мешают.
Я уверена, что любые продукты нужно делать с заботой о пользователе. Ведь если каждая кнопка к месту, а ненужные фичи не отвлекают, человек с радостью будет пользоваться сервисом каждый день. А вы — знать, что ваш продукт делает его жизнь чуть лучше, проще и удобнее.
В статье я собрала 8 решений, которые точно влюбят пользователей в ваше приложение. Поехали!
1️⃣ Быстрая регистрация
В некоторых приложениях встречается регистрация по почте и паролю, но такие решения не всегда уместны. Почтовый ящик выдергивает пользователя из продукта: ему приходится вспоминать доступ к email-аккаунту, искать код среди писем, а иногда и вовсе перебирать папку со спамом.
Создание пароля тоже непростое дело и отнимает много времени. Если человек хочет получить доступ к приложению здесь и сейчас, то добавлять минимум одну заглавную букву, три цифры и знак вопроса — утомительно.
✅ Если регистрация с помощью почты и пароля не обусловлена соображениями безопасности или другой специфической логикой, лучше ускорить флоу с помощью более удобных способов. Например, добавить регистрацию по номеру телефона и коду ОТР либо через соцсети. Если вы уже вошли в какую-либо соцсеть на устройстве, зайти на некоторые сайты или в приложения будет значительно проще и быстрее. Можно сделать это буквально в несколько кликов.
Кейс Purrweb. В 2020 году мы делали приложение для поиска соседа по жилью PAD. Концепт простой: пользователь заполняет предпочтения, получает список кандидатов и выбирает подходящего соседа.
До старта разработки мы проанализировали конкурентов и подумали: долой регистрацию. Для тех, кто только скачал сервис, добавили возможность пропустить этот этап. Если пользователю нужно срочно найти комнату, он может посмотреть все возможные варианты через гостевой режим. Без этих ваших почт, кодов, паролей и телефонов.
Ну а для тех, кто никуда не торопится, есть небольшая анкета, которая поможет найти perfect-match-соседа
2️⃣ Удобный онбординг
Онбординг бывает разным, но самый распространенный и простой — многошаговый слайдер при первом входе в приложение. Это когда вам хочется побыстрее перейти к основному флоу, но вместо этого приходится много раз нажимать кнопку «Продолжить» или «Пропустить». Часто на этих слайдах пользователю не рассказывают о том, как выполнить ту или иную задачу, а демонстрируют фичи или мнимые выгоды продукта.
Например, в приложении Спортмастера есть несколько приветственных экранов. Но так ли важно, что в каталоге 47 тысяч товаров, если пользователю нужны одни кроссовки
✅ При онбординге важно как можно скорее «пустить» пользователя в приложение. А вот обучать его лучше от потребности — ненавязчиво и ситуативно. Например, в Тиндере при первом входе нам показывают, как лайкнуть профиль или перейти к следующему. При этом от инструкции можно отказаться, если уже знакомы с флоу.
Ненавязчивые подсказки в онбординге Тиндера помогают пользователю быстро сориентироваться в механике: свайп вправо — кандидат подходит, свайп влево — двигаемся дальше
3️⃣ Интерактивные элементы
Зачастую все интерфейсы строятся из стандартного набора компонентов. Например: кнопки, поля ввода или выпадающие элементы. С их помощью можно решить огромное количество задач, но иногда классические варианты выглядят скучно. Допустим, формы для регистраций или оформления покупок требуют сосредоточенности, поэтому их часто делают немного «безжизненными».
✅ Если концепция продукта позволяет разнообразить пользовательский опыт, можно «подменить» стандартные элементы в необычном ключе. Например, при оформлении сертификата в «Золотом яблоке» мы могли бы видеть несколько полей ввода: номер телефона получателя, поздравление, номинал и переход к оплате.
Вместо классического набора элементов компания разработала классную многошаговую формочку с необычным интерактивным опытом. По сути, мы собираем те же самые данные, но не даем пользователю заскучать и даже добавляем место для креатива, предлагая выбрать дизайн карты. Человек занимается созиданием: делает сертификат, декорирует его по своему вкусу и тем самым повышает ценность продукта в своих глазах. Отличный способ вовлечения!
Пользователь может менять цвет, надписи и изображения на сертификате, а также выбирать номинал с помощью интерактивных слайдеров
4️⃣ Удобная система оплаты
Иногда оплата товара в приложении — целый квест. Нужно несколько раз вводить номер карты, долго заполнять поля с адресом и чуть ли не указывать паспортные данные, чтобы заказать чехол для телефона.
✅ Я думаю, лучше упрощать все, что можно упростить. Особенно финальный этап воронки продаж, когда пользователь вот-вот купит ваш товар или услугу.
Давайте посмотрим на Ozon: у них максимально простая система оплаты. Иногда можно добавить товар в корзину, моргнуть, а он уже едет в пункт выдачи рядом с домом. С помощью такой бесшовной системы маркетплейс дополнительно мотивирует пользователей к быстрым покупкам. Почему бы не купить, когда это так легко?
Оформить заказ в Ozon можно всего за несколько кликов: маркетплейс еще и сам выберет пункт выдачи за вас
5️⃣ Тематические и сезонные обновления
Круто, когда команда продукта всегда в тонусе и не упускает возможности добавить в жизнь пользователей немного праздника. Как это работает: с конца осени в России готовятся к Новому году, потом сразу отмечают Рождество, День святого Валентина, гендерные праздники, не забывают и о Масленице, а там уже лето, осень, Хеллоуин, и все по новой.
✅ В чем плюс? Это общепринятые события, которые знакомы почти всем людям, и на них очень легко поймать волну единения. И больше продать, конечно, тоже. Согласитесь, жить становится веселее, когда в вашем инфополе круглый год что-то счастливое, яркое и радостное. К тому же сезонные обновления — лишний повод на время обновить дизайн и привнести в продукт чувство новизны.
Кейс Purrweb. Мы делали приложение и несколько тематических проектов для сети кофеен Skuratov. На новый, 2024 год делали для них адвент-календарь в стилистике российской зимы.
Образы получились узнаваемыми: автобусы-гармошки, киоски, романтика пятиэтажек, стол с салатами, елочные украшения, медведь, салюты, семейные фотокарточки в советском стиле… Продолжать можно бесконечно — лучше пролистайте галерею ниже и посмотрите сами.
Под календарь мы сделали отдельный лендинг с персонажами и анимациями. Каждый день можно было вытащить подарок: скидку, стаканчики сети Skuratov, напиток и много других ништяков.
Показываем несколько скриншотов 👇🏻
На лендинге сделали анимацию с качелью
Дни продолжают неумолимо бежать, пока движется наш автобус-гармошка
А дома всё как всегда: ковер на стене, советская звезда на елке, плед на диване и телевизор на тумбочке
Удивительно, но пес не стащил ни одного блюда со стола. Заметили на столе кусочек советского шампанского?
За окном салюты, ну и designed by Purrweb, конечно
6️⃣ Анимации
Приложением без анимаций можно пользоваться, и их отсутствие не помешает выполнить задачи, если флоу понятный и хорошо устроен. Но такие элементы придают приложению законченный вид и делают пользовательский путь более плавным.
✅ Анимации могут быть разными: переходы, загрузки или креативные иллюстрации. Такие приемы могут немного повысить лояльность пользователя, заинтересовать его и вовлечь в процессы внутри продукта. А еще с помощью небольших анимаций можно обратить внимание на особенные моменты, например специальные предложения или CTA.
Хороший пример приветственной анимации есть в приложении для знакомств Pure. Визуальная концепция яркая и разнообразная: при первом касании пользователь видит несколько меняющихся картинок с необычными образами и абстрактными персонажами. Благодаря этому продукт запоминается с первого раза. Посмотрите сами 👇🏻
Анимация в Pure цепляет и за счет контрастов: черно-белые рисунки появляются поверх ярких цветных узоров
Еще один интересный пример — анимация переливов в «Яндекс Музыке». Она помогает поддерживать общую визуальную концепцию и оживляет главную страницу. При входе в приложение пользователь видит облако, которое играет почти всеми цветами радуги — от розового и фиолетового до желтого и зеленого. Экран получается отзывчивым и интерактивным.
Цветные переливы как будто настраивают пользователя на приятный процесс прослушивания музыки и мотивируют его погрузиться в свою волну
7️⃣ Продуманные жесты
Хорошо, когда пользователю легко идти вперед по флоу, но еще важно подумать о том, как по нему вернуться. Это касается мобильных приложений, где в отличие от десктопа человек взаимодействует с интерфейсом при помощи пальцев, а не курсора. В этом случае жесты — альтернативный способ навигации. Иногда при первых релизах о них забывают, из-за чего пользовательский пусть становится сложнее, а касание с продуктом бывает раздражающим.
Например, в приложении для автомобилистов StarLine нет удобных жестов между экранами. Пользователю приходится тянуться наверх и много раз нажимать на стрелки, если нужно на главный экран 👇🏻
Вернуться на главный экран сложно без жестов, из-за этого пользователь вынужден тратить больше времени на задачу
✅ Лучше использовать жесты, чтобы упростить переходы между экранами. Например, когда свайпом можно закрыть модальное окно или вернуться, не нажимая на стрелочку вверху экрана. Использование этого инструмента прописано даже в гайдлайнах Human Interface от iOS.
Посмотрите, как реализованы жесты в приложении Т-Банка: переходы между разделами плавные и бесшовные
Кейс Purrweb. Мы делали приложение для доставки еды Talentum. Суть такая: пользователь может выбрать повара и заказать у него блюда на завтрак, обед или ужин. Фокус сделали не просто на еде, а на личности шефов. Ведь клиент покупает не в сетевом заведении, а у конкретного человека.
Чтобы приложение работало бесшовно, мы придумали анимации переходов между состояниями экрана. Это не отняло много времени и ресурсов команды, но пользователь получил плавно работающий продукт.
Вот как мы реализовали переходы в приложении для доставки еды Talentum
8️⃣ Эмпатия к пользователю
Вне работы я тоже пользуюсь множеством приложений, как и другие люди. Но, в силу небольшой профдеформации, замечаю, что некоторые из них сделаны без заботы о пользователе. Так происходит, когда в продукте присутствуют дарк-паттерны, о которых я говорила в начале статьи. Например, когда вместо конкретного результата вводят в заблуждение, заставляют что-то купить или, наоборот, — намеренно утаивают отдельные платежи: страховку или продление подписок.
✅ Главное качество UX/UI-дизайнера — это эмпатия, без нее в этой профессии ничего не получится. Нужно уметь поставить себя на место человека, который будет пользоваться вашим продуктом.
Представьте, что пользователь приходит к вам за помощью. Чтобы ее оказать, нужно понять, чего вы хотите добиться своим приложением. Благодаря какой экспертности сможете помочь. Если человек приходит, значит, он не может закрыть свою потребность сам. Не усложняйте ему жизнь, старайтесь облегчить.
Чтобы понять, что нужно аудитории, всегда проводите исследования и тестируйте гипотезы.
Бонус: 5 полезных ресурсов для развития насмотренности в дизайне
Если вы прямо сейчас находитесь в поиске современных решений для своего проекта, предлагаем изучить несколько полезных дизайн-ресурсов. Они пригодятся не только моим коллегам, но и всем, кто работает с IT-продуктами.
✔️ Mobbin — там собирают скриншоты реальных приложений. Это целая библиотека фич и UI/UX-решений. Я могу зайти на сайт и посмотреть, как реализована та или иная фича в популярных и редких продуктах. Например, суперлайк в Тиндере.
✔️ Книга кейсов геймификации — самый большой сборник кейсов — сюрприз — по геймификации на русском языке с разбором игровых механик и комментариями дизайнера Ильи Курылева.
✔️ Книга «Пользовательский интерфейс» от «Бюро Горбунова» — учебник с базовыми паттернами в дизайне интерфейсов для дизайнеров и разработчиков. В книге собраны принципы, которые актуальны сейчас и будут актуальны 20 лет спустя.
✔️ Сборник дарк-паттернов — все манипулятивные, раздражающие и демотивирующие решения собраны здесь. Заходите, читайте и никогда так не делайте.
✔️ Growth.Design — а здесь собрано очень много кейсов с переверсткой. С этим ресурсом вы поймете, как и куда развивать свой продукт.
