UI/UX: как удержать пользователя в мобильном приложении
Неудобное приложение не будут открывать — как бы вы его не продвигали. Рекламный бюджет и время сливаются зря. Поэтому перед продвижением приложения уделите внимание UX и UI. Чем они различаются, и как их разрабатывать, чтобы потом не было больно, в этой статье.
Иногда пользователи могут напоминать персонажей из фильма «Идиократия» (на обложке) — вы создали идеальное приложение, а они все равно не понимают. На самом деле виновата не аудитория, а не до конца продуманные UX и UI. Мы разберем, какие шаги учесть, чтобы все было в порядке. Но сначала проясним термины.
Чем различаются UX и UI
UX (user experience) — пользовательский опыт. Этим термином описывают впечатления, которые человек получает от мобильного приложения. Удобно ли пользоваться, есть ли все нужные функции, насколько приятно приложение визуально.
Иногда к UI относят меню приложения и его структуру, так как они помогают в навигации. На самом деле пользовательский опыт — более широкое понятие. Это концепция, которую воплощают в структуре, дизайне и функциях приложения.
UI (user interface) — пользовательский интерфейс. Сюда относится все, что связано с внешним видом приложения, от дизайна кнопок до цветовой гаммы.
То есть, UX описывает логику, по которой работает приложение, а UI воплощает ее в реальность. Они так тесно связаны, что разработка всегда ведется в команде, а еще лучше — одним специалистом, чтобы логика нигде не потерялась.
В первую очередь продумывают UX. Для этого проводят исследование целевой аудитории и продукта.
Сбор данных для UX
Сначала исследуют целевую аудиторию. Для этого используют опросы, открытые данные, веб- и мобильную аналитику, результаты предыдущих рекламных кампаний.
Опросить пользователей можно в социальных сетях, на сайте или в самом приложении (допустим, оно у вас уже есть, а вы его дорабатываете). Еще лучше добывать информацию из нескольких каналов — получите разнообразную, а значит, репрезентативную выборку.
Правила хорошего опроса:
- Проходится за 1-2 минуты. Длинный опрос надоест пользователю, и он его бросит.
- Есть готовые варианты ответов. Мало кому захочется развернуто отвечать на каждый вопрос, плюс такие данные тяжело группировать и обрабатывать. Но все же оставьте поле для «своего» ответа. Собственный продукт тяжело увидеть «со стороны», поэтому вы можете не учесть какой-то вариант, а пользователи об этом сообщат.
- Меньше креатива, больше конкретики. Так как основная цель — собрать данные, а не развлечь аудиторию, все вопросы должны быть емкими и допускать единственную трактовку.
К открытым данным относят отзывы на тематических сайтах и в сообществах, службы статистики, публикации в СМИ о вас и вашем продукте. А еще посты и комментарии в соцсетях — у вас и ваших конкурентов.
Веб- и мобильную аналитику собирают при помощи специальных сервисов (например, бесплатные Яндекс.Метрика, myTracker и Appmetrica). В их отчетах вы видите, какие действия на сайте/в приложении совершают чаще всего, какой контент просматривают, из каких каналов приходят. Так понимаете актуальные интересы пользователей и свои сильные стороны.
Если вы уже продвигали приложение, изучите результаты предыдущих кампаний. Социальные и демографические характеристики аудитории, путь пользователя от первого контакта с рекламой до целевого действия, события в приложении, популярные креативы.
Всю собранную информацию анализируют, составляют портреты ЦА (возраст, география, интересы и так далее) и разделяют ее на сегменты. Затем для каждого создают карту пользовательских путей.
Карта пользовательских путей (Customer Journey Map, CJM) — это сценарии взаимодействия с приложением. По CJM четко представляют, что делает пользователь, чтобы достичь цели (поиграть, заказать продукты и так далее). Значит, легче создать удобную для ЦА структуру, учесть все потенциальные препятствия и избежать их.
Пример сценария для магазина одежды:
- Пользователь скачивает приложение, открывает.
- Видит баннер с акцией на кроссовки в главном меню. Переходит по нему в раздел с обувью.
- Ищет кроссовки со скидкой, кладет в корзину и оформляет заказ.
Какие проблемы могут возникнуть? Пользователь может не сразу найти обувь по акции и отложить покупку. Наше UX-решение — вынести акционные товары в начало страницы.
Лайфхак: CJM выявляет не только проблемы, но и позитивные возможности. Из сценария выше предполагаем — когда пользователь кладет кроссовки в корзину, ему можно предложить похожие и сопутствующие товары (кеды, носки, шнурки).
Все эти нюансы и структуру отражают в ходе разработки UX и UI.
Разработка и тестирование UX/UI
Сначала создают вайрфрейм. Это «каркас» приложения без интерактивности и оформления: пустые блоки, все в черно-белом цвете. Вайрфрейм нужен, чтобы понять, какие элементы и где будут находиться, удобно ли их расположение. Если такие ошибки будут выявлять при готовом дизайне, интерфейс придется отрисовывать заново, а это непродуктивно. (И жестоко по отношению к дизайнерам.)
Каждый блок помечают названием элемента, который будет на его месте («Карта», «Кнопка заказа» и так далее). Располагают точно так же, как будущий интерфейс, с точностью до миллиметра.
Лайфхак для геймдева: если приложение «вертикальное», располагайте основные элементы внизу экрана. Если «горизонтальное» — ближе к левой и правой сторонам. Это нужно, чтобы до них было удобно дотянуться большими пальцами.
Вайрфрейм согласовывают со всеми ответственными за проект, и только потом переходят к макету. В нем отрисовывают интерфейс, добавляют текст и картинки. На этом этапе оценивают цветовую гамму, композицию, дизайн отдельных элементов.
Еще лайфхак: создайте несколько тем оформления и дайте пользователю выбирать. (Конечно, если это позволяют временные и денежные ресурсы.) Адаптивность всегда приветствуется, и ваши старания окупятся ростом Retention Rate.
После макета создают прототип — то есть, делают все интерактивным. Кнопки, разделы и ссылки теперь кликабельны, приложение можно тестировать на скорость и удобство. Прототип показывают фокус-группе (привлекают за вознаграждение или собирают из клиентов), либо оценивают самостоятельно. Для тестирования используют два метода: A/B и последовательные тесты.
При A/B-тестировании фокус-группу разделяют на две равные части и показывают ей разные версии приложения. Плюс метода в том, что его проводят быстро — значит, вы раньше запустите приложение и начнете получать прибыль.
Минусы: если проводите тесты при помощи инструментов магазинов приложений, аудитория разделится случайным образом. Вы не влияете на разнообразие пользователей в группе, и может получиться, что в одной из половин соберутся люди с очень похожими привычками. Результаты тестов искажаются, придется начинать сначала.
Альтернатива A/B — последовательное тестирование. Приложение показывают всей фокус-группе целиком — сначала одну версию, потом другую. В таком случае можно не беспокоиться о перевесе в выборке. Но тесты займут намного больше времени (есть риск, что за это время кто-то выпустит аналог и вы останетесь в аутсайдерах).
Вы выбрали метод, провели тестирование и теперь можете выбрать «лучший» вариант приложения. Это делают по комментариям пользователей (если общаетесь с фокус-группой напрямую) или по Retention Rate (если проводите тест через магазин приложений).
Конечно, это еще не все: любое приложение совершенствуют чуть ли не на всем протяжении его существовании. Но вы уже готовы отбивать затраты на разработку и получать прибыль — то, ради чего все и затевалось.
Напоследок: как точно не надо делать
На сладкое красочный антипример UI/UX. Это норвежский классифайд Arngren.net. Конечно, не мобильное приложение, но обойти стороной не могли.
На Arngren нет навигации, разделов, а главная страница представляет собой мешанину из текста, тегов и хаотично разбросанных картинок. Размер у изображений тоже разный.
Многие ссылки на описания товаров не работают, сами описания не похожи друг на друга. Текст выделен цветом по неизвестному принципу и так далее — посмотрите сами, если захочется.
Если вам не нравился свой дизайн, надеемся, после такого точно поверите в себя — хуже этого сделать невозможно.