Студия Турум-бурум

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

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

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

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

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

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

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

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

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

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

Например, мобильное приложение Spot Hunter ориентировано на профессиональных фотографов и клипмейкеров, помогает им найти красивые локации и места для проведения съемок, а также для получения прибыли при публикации новых локаций
Например, мобильное приложение Spot Hunter ориентировано на профессиональных фотографов и клипмейкеров, помогает им найти красивые локации и места для проведения съемок, а также для получения прибыли при публикации новых локаций

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

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

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

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

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

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

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

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

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

Frame 113 (1).png

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

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

Пример динамики и анимации в детализированном прототипе приложения Spot Hunter
Пример динамики и анимации в детализированном прототипе приложения Spot Hunter

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

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

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

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

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

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

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

Пример контента для сторов мобильного приложения RetouchMe
Пример контента для сторов мобильного приложения RetouchMe

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



Оставьте номер и мы перезвоним
Спасибо!
Мы скоро свяжемся с Вами.
Напишите нам
Выберите направление:
    Спасибо!
    Мы скоро свяжемся с Вами.