Дизайн мобильных приложений: процесс разработки и этапы проектирования

Согласно Statista, на сегодняшний день в мире 3,5 миллиарда мобильных пользователей и к 2021 году их будет почти 4 миллиарда. Поэтому мобильное приложение для e-commerce проектов уже больше, чем просто рекомендация. Как создается дизайн мобильных приложений? Что отличает мобильное приложение от других проектов? Какие существуют особенности и возможности мобильного приложения, которые стоит учитывать? В этой статье мы покажем процесс, результаты и реальные примеры.

Процесс создания дизайна мобильных приложений

Есть два основных вида работ с мобильными приложениями — редизайн уже существующего приложения и создание нового приложения с нуля.

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

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

Сбор информации и требований

Создание дизайна мобильных приложений начинается со сбора информации и требований. В свою очередь требования делятся на 2 типа:

1. Требования пользователя — для кого создается приложение, какие задачи оно должно решать, для чего нужен этот продукт с точки зрения целевой аудитории (ЦА) и т.д.

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

• Какую нишу будет занимать приложение?
• Какие задачи должен решать продукт?
• Как мобильное приложение будет монетизироваться?
• Как приложение будет себя позиционировать на рынке? В чем его уникальное торговое предложение (УТП)?
• Кто главные конкуренты?
• Какие есть примеры best practice на рынке?

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

Создание архитектуры и навигации

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

Также на этом этапе пишутся пользовательские сценарии и истории от первого касания до совершения целевого действия, т.е. происходит моделирование приложения. Сценарии использования (use cases) определяют необходимый функционал и экраны для будущего приложения. Затем рисуют блок-схемы для визуализации этих историй и сценариев и создают малодетализированные макеты графического интерфейса мобильного приложения.

Создание прототипа

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

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

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

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

Тестирование прототипа мобильных приложений

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

Дизайн мобильных приложений и разработка

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

Подготовка контента для сторов

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

Доработка и анализ дизайна мобильных приложений

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

Особенности и возможности дизайна мобильных приложений — основные рекомендации

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

• Учитывайте, что мобильные устройства имеют ограниченный дисплей.

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

• Используйте особенности управления и функционал мобильных устройств.

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

• Помните об ориентации экрана мобильного устройства.

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

• Учитывайте мобильный трафик интернета.

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

• Продумайте роль приложения в маркетинговой стратегии заранее.

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

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