Приятный, удобный, простой: как избежать ошибок при создании дизайна мобильных приложений

Качественный UI-дизайн может повысить коэффициент конверсии сайта на 200%, а хороший UX — на 400%. Ведущий UI/UX дизайнер Т1 Консалтинг Сергей Любавский и менеджер проекта Т1 Консалтинг Влада Любимова рассказывают, как сделать мобильное приложение удобным и красивым.

На юзабилити сайтов особенное внимание обращают как минимум 60% покупателей. У 94% потребителей плохой веб-дизайн вызывает недоверие и желание уйти. А чтобы привлечь пользователя в интернете и задержать его внимание, есть всего 10 секунд.

Так что одна из первостепенных задач для бизнеса — сделать свое онлайн-присутствие:

а) понятным (речь про юзабилити или UX: информационная архитектура, иерархия экранов, навигация, скорость загрузки и тд.);

б) приятным (речь про визуал или UI: фирменный стиль, инфографика, анимация, адаптивность и тд).

Цели у UX и UI общие: обеспечить клиенту приятное путешествие от точки входа до целевого действия. Для пользователя все сводится к комфорту, а вот у бизнеса на кону более серьезные факторы: лояльность ЦА, репутация и итоговый заработок. Так, качественный UI может повысить коэффициент конверсии сайта на 200%, а хороший UX-дизайн — на 400%.

А поскольку статистика показывает, что десктопный трафик значительно уступает мобильному — только в Рунете к концу 2021 года на мобильные устройства пришлись рекордные 83% — в работе над дизайном упор следует делать на мобильные приложения. Разбираемся, какие распространенные ошибки при этом допускают и как их избежать.

Для начала определимся с тем, что отличает мобильное приложение от веб-сайта:

• Навигация. У десктопной версии большое пространство, у мобильной — ограниченное, по нему пользователя вести сложнее;
• Уведомления. Мобильное приложение может посылать пуши даже в закрытом состоянии — это мощный инструмент, но важно пользоваться им аккуратно, чтобы не оттолкнуть клиента;
• Адаптивность. Дизайн приложения должен подстраиваться под операционные системы, гаджеты, повороты экрана, приближение и так далее.

С чего начать работу над дизайном мобильного приложения:

Первым делом нужно:

• Выявить основные потребности ЦА, прощупать ее интересы и боли;
• Провести анализ конкурентов, количественно и качественно оценить продукты-аналоги;
• Отследить тенденции выбранной ниши.

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

Рассмотрим процесс пошагово:

Шаг 1. Любой ИТ-проект начинать следует с анализа. Определить, зачем и для кого делаем продукт, в чем его уникальность. Рассмотреть уже существующие решения, подобрать референсы. Сегментировать ЦА, продумать алгоритмы пользования приложением.

К примеру, в нашем случае (мы только что запустили корпоративное приложение Т1 Онлайн), цель такова: автоматизировать внутренние бизнес-процессы и повысить уровень их прозрачности, улучшить взаимодействие коллектива. Для этого мы решили объединить все корпоративные сервисы для сотрудников компании — от новостной рассылки и онбординга до выдачи отпусков/больничных/справок — в одном удобном окне.

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

Так, в Т1 Онлайн мы нарисовали личные профили сотрудников, предусмотрели доступ к основным сервисам. Отдельно сделали ленту с новостями компании и раздел для заявок.

Шаг 3. Когда готов прототип, нужно убедиться, что он понятен и удобен пользователям — для этого желательно запустить опросы. Учтите, что на этом этапе абсолютно неважно, как все выглядит — важно, чтобы продукт был доступным для вашей ЦА.

Шаг 4. Дальше можно подключать UI-дизайнера, чтобы одеть наш «скелет» в «униформу». То есть на этом этапе начинают работу над графической частью интерфейса: подбирают цвета, шрифты, формы, иконки, кнопки. Другими словами, вырабатывают стандарты визуального единообразия — создают дизайн-систему.

Шаг 5. К этому моменту у нас есть все, но по факту нет ничего: разодетый «скелет» нужно «оживить». На арену выходят разработчики и может показаться, что UX/UI-дизайнеров уже можно отпустить. На деле им предстоит важная и сложная работа: проконтролировать, чтобы в верстке сохранились логика и визуал макетов.

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

Что касается сроков, на UX (то есть на дизайн без визуала) от общего времени разработки приложения нужно закладывать около 60% времени — если речь идет о масштабном, сложном проекте. А если продукт прост по функционалу и в основном заточен на визуал, то там расклад может быть совсем другим, и 90% сил и времени уйдет на на UI. Иначе говоря, конкретных идеальных сроков тут нет. Так, на UX базового функционала Т1 Онлайн ушло примерно 3-4 месяца, и мы продолжаем прототипировать новые сервисы. А у приложения попроще, вроде интернет-аптеки, может уйти всего несколько недель. Также сроки зависят от ресурсов, слаженности и численности команды.

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

• Не бегите рисовать макеты, пока не уделили достаточно времени аналитике. Сначала цифры, потом картинки. Иначе получите красивый, но абсолютно неюзабельный продукт;
• Не доверяйте работу над дизайном приложения специалистам без релевантного опыта. У мобильного продукта своя специфика, и если у UX/UI-дизайнера весь прошлый опыт сводится к десктопу, то вполне вероятны утяжеленные интерфейсы, неподходящие шрифты и нарушение логики навигации;
• Не увлекайтесь новаторством. Многие новички хотят предложить рынку что-то креативное, а в итоге создают интуитивно непонятные решения. К примеру, если в соцсетях лайки обычно ставятся двойным тапом, а в вашем приложении за лайк будет отвечать свайп, пользователь растеряется (и, скорее всего, рассердится).

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

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

В первую очередь нужен замер лояльности пользователей, сбор живых отзывов на приложение и его конкретные фичи. Но чтобы понять, полезен ли конкретный UX/UI-дизайн бизнесу глобально, нужно посмотреть, помогает ли приложение в достижении главных целей компании. Если это интернет-магазин — приложение должно продавать. Если это блог — информировать. И так далее. Кстати, это не разовое мероприятие — отслеживать эффективность нужно регулярно.

Если взять Т1 Онлайн, то мы смотрим на то, где сотрудники предпочтут решать рабочие вопросы. Если пройдет пара месяцев, а они продолжат пользоваться условным Microsoft Project, поищем, что доработать. И наоборот, если все добровольно выберут наше приложение, будем считать, что проект успешен — и продолжим внедрять новые сервисы.