Формирование особенностей и визуальная концепция сервиса по доставке вегетарианских товаров

УДК 007.51                                               

Объектом исследования являются современные требования к дизайну виртуальных интерфейсов, оптимальные решения UX/UI мобильных приложений. Предмет исследования – рынок мобильных прило- жений, дизайн прототипа мобильного приложения для вегетарианцев. Целью данной работы является исследование и разработка мобильного сервиса для доставки вегетарианских продуктов, которое будет максимально соответствовать потребностям и пред- почтениям пользователей.

Для достижения этой цели необходимо решить следующие задачи:

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

– Проанализировать потребности и предпочтения вегетарианцев.

– Разработать концепцию и функционал мобильного приложения.

– Создать прототип приложения.

– Оценить юзабилити и провести тестирование приложения.

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

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

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

ОСНОВНАЯ ЧАСТЬ.

Первым этапом в дизайн-исследовании является определение проблемы, которую будет решать дизайн, учитывая актуальность задачи, описанную во введении, а также статистические данные о том, что 4,5 % населения Беларуси (от 400 000 до 450 000 человек) считают себя вегетарианцами или же придерживаются вегетарианской диеты в различных ее проявлениях, можно смело говорить о наличии значительного потенциального рынка для специализированных сервисов.

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

Чтобы создать проект, эффективно выполняющий цели своего потребителя, важно учитывать не представления дизайнера о том, как должен выглядеть продукт, и не желания условного заказчика. Для этой цели необходимо в первую очередь ориентироваться на самого потребителя [1]. Наиболее эффективными методами в данном случае являются интервью и опрос. Все это позволило получить индивидуальные предпочтения и статистические данные о желаниях потенциальных пользователей. Эти данные позволили составить портрет пользователя, определить его потребности и выявить потенциальных конкурентов. В дальнейшем эта информация легла в основу разработки приложения [2].

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

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

После определения гипотез следующим этапом в процессе разработки сервиса является создание так называемого User Flow. Этот термин означает «поток пользователя» и представляет собой наиболее обобщенное представление о том, какой путь пользователь пройдет в рамках приложения от процесса входа до выполнения целевого действия. Целевым действием разрабатываемого приложения является непосредственная покупка товаров [3].

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

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

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

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

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

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

Рисунок 1 – Формообразование логотипа Figure 1 – Logo formation

Кроме того, логотип и фирменный стиль будут использовать специфическую цветовую гамму, предающие идеологию бренда:

– зеленый цвет – как цвет экологии, здоровья и силы;

– белый цвет – как цвет чистоты и современности;

– черный цвет – для темной темы приложения и как контрастный цвет для основных двух.

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

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

После создания основных правил брендинга следующий этап представляет собой создание визуальной концепции приложения на основании современных дизайн-трендов, правил iOS, а также уникальной идентичности бренда. Одной из частей брендинга, на которую часто не обращают внимание, является создание единого текстового стиля [7].

Для полного погружения пользователя в брендовую атмосферу, визуальные элементы, такие как логотип, цветовая гамма и шрифты, будут интегрированы не только в само приложение, но и в его интерфейс. Это означает, что каждый раз, когда пользователь взаимодействует с приложением, он будет подвергаться брендовой идентичности, что создаст сильное впечатление и укрепит узнаваемость [8]. Это важный этап, который определяет общий внешний облик приложения и его визуальное воздействие на пользователей. Для этого был разработан и реализован так называемый Style kit, который включал в себя не только правила использования цвета и шрифтов, но и подробные рекомендации по подбору фотографий и созданию малых графических форм, таких как иконки.

Рисунок 2 – Использование логотипа в среде Figure 2 – Using the logo in the environment

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

Основным принципом современного дизайна является консистентность, взаимосвязанность частей дизайна, их единообразие и постоянство. Кон-систентность позволяется использовать единый набор элементов и правил во всем дизайне. Дизайн система позволяет легко вносить изменения в дизайн-проект и легко его реализовывать [10].

Программа графического редактирования Figma, в которой было осуществлено прототипирование сервиса, имеет ряд функций, одной из которых является возможность создания компонентов. Компоненты – это многоразовые элементы дизайна, которые могут быть использованы повторно в различных частях проекта. Это упрощает процесс дизайна и поддержки консистентности внешнего вида приложения или веб-сайта. Исходя из этого, была создана дизайн-система, включающая в себя все повторяющиеся элементы из проекта, которые в дальнейшем расширялись и дополнялись большим количеством вариантов. Дизайн-система используется не только для обеспечения единства стиля, но и для повышения эффективности и скорости разработки [11].

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

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

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

Страница авторизации выполнена в максималь- но привычном для пользователей виде. Она представляет собой экран с заголовком «Авторизация» и кнопкой «Пропустить», если пользователь решает пропустить этот этап после обучения. Текстовое окно на этом экране рассказывает о пользе авторизации, чтобы привлечь пользователя и помочь ему выполнить авторизацию на эмоциональном уровне. Также на экране присутствует текстовое поле и иконки с предложением авторизоваться через почту или социальные сети. Этот кластер изображен на рисунке 4.

Рисунок 3 – Кластер экранов входа в приложение Figure 3 – Cluster of application login screens

Рисунок 4 – Кластер экранов авторизации/входа Figure 4 – Authorization/Login Screen Cluster

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

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

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

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

Рисунок 5 – Меню навигации в приложении Figure 5 – Navigation menu in the application

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

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

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

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

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

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

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

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

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

Рисунок 6 – Показ кликабельного интерактивного прототипа Figure 6 – Showing a clickable interactive prototype

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

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

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

ЗАКЛЮЧЕНИЕ

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

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

Рисунок 7 – Рекламно-информационная поддержка сервиса Figure 7 – Advertising and information support of the service

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