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

Мы в WINFOX обычно строим работу так:

— аналитика;
— техническое задание;
— проектирование и дизайн;
— разработка;
— тестирование и стабилизация;
— публикация в сторах;
— поддержка и развитие.

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

Рустам Мухамедьянов, руководитель студии WINFOX

Мы уже рассказывали про аналитику и техническое задание. Сейчас пойдет речь о следующих этапах: проектирование, дизайн и разработка.

Этап 3. Проектирование и дизайн

Здесь наша работа делится на два направления: UX-дизайн, то есть проектирование, и UI-дизайн, то есть дизайн привычном понимании.

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

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

Что в результате:

— карта экранов;
— статичный или интерактивный прототип приложения;
— отрисованные экраны и элементы интерфейса.

Иногда заказчик говорит: «А давайте не будем тратить время на проектирование и сразу займемся дизайном?». Не делайте так. Допустим, мы исключили проектирование и сделали дизайн. Посмотрели его, и у вас появилась куча идей, как все улучшить. Мы вносим правки и перерисовываем дизайн. Трудозатраты и стоимость проекта вырастают в два раза, а скорость работы вдвое снижается. Дизайнер выгорает, а вы как заказчик недовольны, что проект стал дороже. Все в минусе.

Александр Хрущев, технический директор студии WINFOX

UX-дизайн

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

Проектирование особенно важно для проектов с большой долей неопределенности. Например, для стартапов.

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

Рустам Мухамедьянов, руководитель студии WINFOX

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

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

Александр Хрущев, технический директор студии WINFOX

UI-дизайн

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

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

Валерий Сорокин, менеджер проектов студии WINFOX

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

Этап 4. Разработка

Программирование — один из главных этапов. Написание кода любого приложения делится на фронтенд и бэкенд.

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

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

Что в результате:

— первый релиз приложения.

Фронтенд

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

Нативная разработка

Нативные приложения написаны для конкретной мобильной платформы: iOS, Android, Windows. Язык программирования, который используется для написания таких сервисов, поддерживается только одной платформой. Например, Swift и Objective-C понимает только iOS, а Java или Kotlin — только Android.

Делайте нативное приложение, если оно должно стать важной частью бизнеса и влиять на продажи.

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

Плюсы нативных приложений:

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

Минусы нативных приложений:

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

Кроссплатформенная разработка

При создании таких приложений используются общие наборы средств разработки (SDK). Из-за этого кроссплатформенные сервисы не используют все нативные преимущества каждой платформы. Зато сделать такое приложение дешевле — это оптимальный вариант для проектов с ограниченным бюджетом.

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

Плюсы кроссплатформенных приложений:

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

Минусы кроссплатформенных приложений:

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

Чек-лист: как выбрать тип приложения

Исходите из своих бизнес-целей и ответьте на следующие вопросы:

— Насколько быстрое и отзывчивое приложение вам нужно?
— Насколько важны бизнес-процессы, которые встроены в приложение?
— Насколько сложные функции будет выполнять ваше приложение?

Главное отличие между нативным и кроссплатформенным приложением — в скорости и отзывчивости работы. Это как проехаться на Porsche Cayenne и Hyundai Solaris. Оба авто едут по дороге, разгоняются, маневрируют и входят в повороты. Но разница чувствуется сразу.

Рустам Мухамедьянов, руководитель студии WINFOX

Бэкенд

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

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

На этапе бэкенда участие заказчика минимальное. Вам не надо думать, где хранить данные и нужно ли использовать бессерверную архитектуру — это решают разработчики. Мы в WINFOX всегда выбираем оптимальные для клиента решения. Единственное исключение — это когда надо вписать приложение в уже существующую среду. Тогда вы можете сказать: «Делайте на PHP, а не на Java».

Александр Хрущев, технический директор студии WINFOX

Коротко

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

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

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

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

Делайте нативное приложение, если оно должно стать важной частью бизнеса и влиять на продажи.

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

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

Чтобы помочь тем, кто решил сделать свой мобильный сервис, мы написали книгу «Мобильное приложение для бизнеса: что нужно знать заказчику». В ней мы постарались дать ответы на наиболее частые вопросы, которые задают нам заказчики. В этой книге нет туманных советов из серии «Как сделать приложение: три простых шага». Зато есть опыт, накопленный WINFOX за пять с лишним лет работы на рынке мобильной разработки, примеры из практики и руководство к действию.

Те, кто обращаются в нашу студию, получают печатную версию книги.

Рустам Мухамедьянов, руководитель студии WINFOX

Читайте другие материалы по теме:

Как понять, что вашему бизнесу нужно мобильное приложение

Как бизнес использует мобильные приложения

Сколько стоит разработка и как на ней сэкономить

Как мы делаем мобильные приложения: аналитика и техническое задание

Как мы делаем мобильные приложения: тестирование, стабилизация и публикация в сторах

Как мы делаем мобильные приложения: поддержка и развитие

iOS или Android: какую платформу выбрать

Фрилансер, инхаус или студия: как выбрать исполнителя

Водопад или аджайл: что вам подходит

Как продвигать приложение после запуска

Как измерить эффективность: ключевые показатели