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

Мы в Surf знаем про создание интерфейсов пользовательских приложений не понаслышке. Мы создали более 200 успешных проектов по разработке мобильных и веб-приложений для Burger King, банка ЗЕНИТ, Магнита, РИВ ГОШ и других брендов. В статье поделимся методами и практическими советами по работе над интерфейсами приложений и расскажем, как выбрать команду для разработки прототипа.

Как устроен наш процесс разработки пользовательских интерфейсов для приложений: 6 этапов

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

Этап 1. Бизнес-анализ: определяем цели дизайна

На этапе исследования команда дизайнеров и аналитиков:

• Исследует бизнес-нишу, рынок в целом и прямых конкурентов.
• Анализирует цели будущего приложения (или его обновления), сопоставив их с требованиями бизнеса.
• Собирает технические требования и ограничения, метрики успеха и провала.
• Проводит аудит текущего приложения (при наличии).

В процессе выясняем, как клиент будет оценивать результат работы. Стремится ли он с помощью будущего приложения или обновлённого интерфейса увеличить продажи, привлечь новый сегмент аудитории или сделать постоянных клиентов лояльнее? Такой анализ позволяет клиенту точнее сформулировать видение желаемого продукта. По итогам этапа мы предлагаем дизайн-концепт приложения.

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

Этап 2. Исследования аудитории: выясняем потребности и предпочтения

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

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

Качественные исследования (custdev) проводятся с небольшой выборкой респондентов посредством глубинных интервью. Они позволяют получить инсайты и лучше понять мотивацию пользователей, восприятие бренда и другие аспекты проектирования интерфейса.

Так, работа с фокус-группой при разработке приложения для строителей «Петрович.BRO» помогла нам разобраться с ключевой проблемой целевой аудитории: бригадиры и прорабы большую часть времени проводят на стройках c мобильным телефоном или блокнотом, а в конце дня переносят собранные на объектах данные в Excel-таблицы с ПК. Результаты исследования подсказали, как правильно разработать дизайн, чтобы все данные можно было удобно заполнить на смартфоне, а также идею типового конструктора для расчёта стоимости работ и синхронизации смет и объектов.

Этап 3. Customer Journey Map: определяем сценарии использования

Опираясь на результаты исследований аудитории, мы разрабатываем карту пользовательского пути (CJM, или customer journey map). Карта описывает ключевые функциональности приложения, потребности и «болевые точки» пользователей и решения для них. При необходимости также проводим онлайн- или офлайн-воркшопы.

Например, для исследования пользовательского пути в приложении провели аудит UX/UI приложения Flowwow. Мы хотели упростить пользовательский путь к покупке цветов или подарков. Разобрали несколько ключевых сценариев и визуализировали пользовательскую логику в Figma. На основе полученных данных и отзывов пользователей определили основные недостатки интерфейса: перегруженность некоторых экранов, недостаточную заметность ключевых элементов и сложную навигацию. Из-за этого клиенты терялись среди категорий товаров, не понимали, что делать дальше, и отказывались от покупки.

Вот что мы предложили исправить:

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

Интуитивный первый экран поднимает конверсию в просмотр товара в среднем с 65% до 76%. При среднем числе пользователей в 1,5 миллиона до каталога не доходят 165 тысяч пользователей ежемесячно. Редизайн поможет увеличить конверсию и удовлетворённость клиентов.

Этап 4. Проектирование и прототипирование: смотрим, что получилось

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

Главная задача прототипа — дать клиенту возможность стать пользователем будущего приложения и убедиться, что команда Surf разделяет его видение продукта. Зачастую мы делаем прототипы детализированными с точки зрения функций, но чёрно-белыми — это помогает сосредоточиться на опыте взаимодействия с продуктом, а не визуальной составляющей.

Этап 5. Дизайн-система: единые правила для удобной работы

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

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

Этап 6. Разработка и отрисовка экранов и элементов

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

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

При создании мобильного приложения РИВ ГОШ мы непрерывно взаимодействовали с дизайнерами бренда и разрабатывали приложение на основе брендбука. Это позволило объединить видение клиента и нашу экспертизу в области создания мобильных интерфейсов.

Так, мы реализовали web view — компонент, который встраивает веб-страницы в приложения: пользователь нажимает в каталоге на один из кастомных брендов, и через web view открывается раздел сайта с этим брендом. Определённые разделы приложения поддерживаются актуальными без их обновления в приложении. Результат нашей работы: визуально привлекательное мобильное приложение, идеально сочетающее фирменный стиль РИВ ГОШ с богатой функциональностью.

Что такое прототип дизайна и зачем он нужен

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

Зачем нужна разработка прототипа:

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

Создание прототипа состоит из нескольких этапов:

1. Дизайнеры начинают с черновых зарисовок, фиксируют идеи и возможные варианты интерфейсных решений.
2. Эскизы переносятся в специализированные программы, такие как Figma или Adobe XD. Там создаётся базовый прототип дизайна с основными функциональными элементами и навигационной структурой.
3. Дизайнеры разрабатывают интерактивный прототип, в котором можно воспроизвести пользовательский путь. На основе прототипа проводят качественное тестирование, выявляют болевые точки интерфейса, неочевидные элементы навигации и потенциальные сложности в использовании приложения.

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

В поиске экспертов для разработки UI: на что обратить внимание

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

Начинают с глубокого исследования

В начале создания интерфейса важно сначала изучить потребности и предпочтения пользователей. Исследование позволит определить проблемы аудитории и оптимальные технические решения для удовлетворения пользователей.

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

Делают проработанный дизайн-концепт

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

Именно с дизайн-концепта началась наша история сотрудничества c Delivery Club. В далёком 2012 году наша команда предложила новую версию интерфейса приложения для доставки еды. Дизайн-концепт состоял из трёх экранов и рабочего прототипа для Android. Наше решение произвело впечатление, и именно мы разрабатывали следующие версии мобильного приложения Delivery Club для iOS, Android и Windows Phone.

Согласовывают прототип дизайна

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

Тестируют MVP

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

При создании новой версии приложения для сервиса платного ТВ «Мой Триколор» мы разработали MVP, который затем передали на тестирование фокус-группе из 12 жителей Москвы и Краснодара. Предложили им выполнить ключевые действия в приложении: пройти аутентификацию, пополнить баланс и подключить автоплатёж. Действующие клиенты Триколора успешно справлялись с заданиями, тогда как новичками было сложно с некоторыми механиками. Полученный фидбэк помог улучшить элементы интерфейса: были увеличены плашки в каталоге, добавлены иконки тарифов и выделены важные акценты внутри услуг.

Активно взаимодействуют с разработчиками

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

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

Вместо заключения

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

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

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