Разработка сервиса для свободного обмена одеждой

Размещено на http://www.allbest.ru

Размещено на http://www.allbest.ru

Разработка сервиса для свободного обмена одеждой

Пласкевич Анастасия Викторовна

Введение

В 2015 году сектор промышленности выпустил в атмосферу 1,2 миллиарда тонн парниковых газов (1/5 часть этих выбросов принадлежит Fashion-индустрии). Вопросами влияния производства на окружающую среду уже озадачен сам бизнес: в компаниях появляется термин «устойчивое развитие», определяя тем самым совокупность мер, которые должны наносить меньший ущерб окружающей среде, улучшать социальную ситуацию в регионах производства сырья, точечно улучшать экологию. Так, например, гигант LVMH (производитель одежды, косметики класса люкс) подписал договор о сотрудничестве с ЮНЕСКО по вопросам поддержки биоразнообразия и собирается переходить на экологичные альтернативы упаковки товаров [1].

Заметный ущерб для экологии наносит и концепция «быстрой моды» или fast_fashion. Корпорации выпускают огромное количество одежды, которая перенасыщает рынок, носится недолго или вообще утилизируется, так и не использовавшись. Теперь общество хочет переходить к «устойчивому потреблению» товаров: использовать только то, что необходимо и так долго, насколько получится [2]. В рамках модной индустрии набирают популярность секонд_хенды, передача вещей друг другу: один раз произведенная вещь использует весь свой потенциал. Этот тренд наблюдается и в России.

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

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

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

- Тренд на цифровизацию и Национальный проект «Цифровая Экономика» в России.

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

Объект исследования работы - это процесс обмена одеждой.

Предмет исследования: методы и средства автоматизации процесса обмена.

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

В соответствии с целью работы были поставлены следующие задачи:

1. Проанализировать текущую ситуацию на рынке и инсайты отрасли.

2. Сформировать бизнес-требования и нужды пользователя.

3. Сформировать функциональные и нефункциональные требования к приложению.

4. Спроектировать архитектуру приложения, навигацию и интерфейс.

5. Реализовать fullstack приложение для свободного обмена одеждой.

1. Обзор рынка и анализ потребительского поведения в России. Тренды цифровой среды

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

Предпосылки для исследования темы

Смена паттернов потребительского поведения в Ритейле

Классический современный рынок товаров, к которому будем относить и одежду средней ценовой категории, сформировался в эпоху роста потребления. Череда технологических скачков в XX веке позволяла все проще и дешевле наращивать предложение товаров на рынке, благодаря усовершенствованной транспортировке производитель смог работать с рынками во всем мире. Однако последние годы общество переходит от старой идеологии к концепту устойчивого развития. Сегодняшний покупатель на рынке -- представитель поколения миллениалов и центениалов. Такой покупатель не готов к потреблению ради потребления, причем этот паттерн поведения наблюдается повсеместно: экономические и географические характеристики стран или рынков мало значимы. С такими вызовами уже сталкивается классический бизнес потребительских товаров. Так, например, по данным Nielsen, совокупный среднегодовой темп роста устойчивых (экологически безопасных) товаров повседневного спроса в США в 3,5 раза выше, чем традиционных. В 2018 году 48% американских потребителей выразили готовность изменить свои привычки потребления, чтобы уменьшить негативное воздействие на окружающую среду. Миллениалов (75% выборки) среди них в два раза больше, чем бэби-бумеров (34% выборки). В исследовании также отмечается, что потребители, которые придерживаются принципов устойчивого потребления, на 67% чаще используют цифровые технологии для выбора или покупки товаров [3, 4].

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

Спрос на вторичный рынок и рост популярности шеринг-экономики

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

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

Крупные бренды создают новые бизнес модели: H&Mоткрывает первый в мире онлайн-магазин использованных вещей (онлайн секонд-хенд). Компания Nike предлагает клиенту обменять детские кроссовки, когда ребенок повзрослеет [1].

Национальный проект «Цифровая экономика»

Экономические лидеры мира, включая Великобританию, Германию, США, Японию и др. выделяют одним из приоритетных направлений развития своей страны - формирование прочной цифровой инфраструктуры. Помимо реализации таких вещей, как электронное правительство, государство также осуществляет поддержку отдельных структур. На фоне очередной волны трансформации бизнес-моделей и общества в целом, такие технологии, как искусственный интеллект, робототехника, облачные хранилища и др. стали невероятно популярны и востребованы для достижения разных целей: повышение производительности труда, оптимизация или автоматизация процессов, повышение комфорта и пр. В России на законодательном уровне утвержден перечень действий, чтобы создать подобную почву для ускорения внедрения цифровых технологий в экономику и социальную сферу, подготовить бизнес и государственные институты к цифровой трансформации, сформировать стратегии развития государства в будущем. (Указ Президента Российской Федерации от 7 мая 2018 г. № 204 «О национальных целях и стратегических задачах развития Российской Федерации на период до 2024 года») [5, 6].

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

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

Euromonitor Passport в своем ежегодном исследовании российского потребителя цифровых продуктов отмечает [3], что люди (особенно более молодое поколение миллениалов) готовы пожертвовать безопасностью данных, чем удобством пользования приложением/сервисом. Тренды двигаются в сторону упрощения доступа и минимальных условий для использования: например, внедрение технологий подтверждения или входа по отпечатку пальца вытеснит запоминание паролей или кодов, и ключом доступа станет тело человека.

Отношение к чужой одежде исследовано в работе «How does access to luxury fashion challenge self-identity? Exploring women's practices of joint and non-ownership» Здесь рассмотрено отношение женщин к одежде сегмента люкс, которой они пользуются, но не владеют. Через интервью выясняется то, как чувствуют себя женщины, одолжившие одежду люксового сегмента, или получившие ее от старших родственников или друзей. Известный факт, что дорогая и качественная одежда повышает уверенность и усиливает самоидентичность человека, который ее носит. Однако в ранних исследованиях о влиянии одежды, у которой были другие владельцы отмечались только негативные признаки. Одежду, приобретенную, например в секонд-хендах, считали негигиеничной, грязной, и даже «носящей отрицательные черты характера предыдущего владельца». Рассмотренное исследование 2018 года показывает, что, напротив, в практиках заимствования или шеринга одежды сейчас отмечается положительная связь между одеждой, текущим и предыдущим владельцем. Новый владелец может даже перенимать личные черты характера или особенности поведения предыдущего, особенно это касается одежды класса люкс. Важным элементом в этой практике является то, что новый владелец видит предыдущего и имеет небольшой, но опыт общения с ним. Тем самым, он может неосознанно проецировать качества на себя, во время ношения его одежды [7].

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

Так были рассмотрены элементы геймификации для улучшения пользовательского опыта в контексте шеринг-экономики. В исследовании отмечается, что игровые элементы внутри интерфейса вызывают привязанность, эмоции от использования приложения, а также вводят динамику в некий рутинный процесс. Основными и самыми успешными триггерами называются: принадлежность к определенной социальной группе людей (возможность взаимодействовать с похожими пользователями), социальное одобрение или подкрепление от системы (статусы или рейтинги), постановка и достижение целей. Из рисков выделятся потеря мотивации или получение негативных эмоций, в связи с недостижением цели, потерей статуса внутри системы. Хороший дизайн с продуманной геймификацией фокусируется на повышении эмоционального состояния пользователя в ключевых точках касания с приложением, но и поддерживает баланс, не перенасыщая пользователя бездумными задачами [8].

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

В первой главе были рассмотрены общие предпосылки для исследования темы. Было выявлено, что классический рынок товаров изменился прежде всего потому, что изменился потребитель: сегодняшний потребитель все чаще думает об устойчивом потреблении, его интересует вторичный рынок. Под это уже подстраивается крупный бизнес с помощью внедрения внутренней политики, смены маркетинговой стратегии и т.д. С другой стороны, была изучена ситуация, связанная с цифровой сферой. Например, благодаря национальной программе «Цифровая экономика» в России уже утвержден перечень действий для ускорения внедрения цифровых технологий в экономику и социальную сферу. Российский потребитель в целом, готов к потреблению цифровых продуктов, он уже пользуется объектами электронной коммерции.

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

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

2. Анализ предметной области сервиса свободного обмена одеждой

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

Существующие аналоги и похожие сервисы

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

Сервис БАШ НА БАШ. Bashnabash.org

«Баш на баш» - это доска объявлений по обмену товарами в России. На момент обращения к сервису, на нем размещены более 65 тысяч объявлений. «Баш на баш» предлагает меняться не только предметами одежды: на сайте представлены различные объявления, включая предметы ручной работы, мебель и даже земельные участки. Для того, чтобы обменяться вещью, нужно выбрать ее из списка, добавить несколько фотографий своего товара и указать его приблизительную стоимость в рублях. Можно меняться внутри одной категории или сразу в нескольких.

Просмотр товаров разрешен всем пользователям, обмен - только зарегистрированным. Зарегистрироваться можно и традиционно, с помощью электронной почты, а можно войти через социальные сети (ВКонтакте, Facebook, Одноклассники). Лента товаров представлена ниже (см. Рисунок 1).



Рис. 1. Лента товаров категории «Недвижимость» на сайте сервиса «Баш на баш»

Рядом с лентой товаров есть блок с фильтрами, где можно уточнить параметры поиска. Для этого нужно нажать дополнительную кнопку с иконкой поиска. Также доступны режимы отображения ленты товаров: по 10/20/50 объектов на странице, краткое или полное отображение каждого товара.

При нажатии на товар открывается подробная информация о нем. Также указаны предпочтения автора объявления. На рисунке ниже, можно увидеть, что пользователь готов обменять брюки на товары в категории «Одежда» и «Обувь». Сервис допускает также выкуп или обмен на деньги. Ниже изображен пример оформления информации о товар (см. Рисунок 2).



Рис. 2. Окно «О товаре»на сайте сервиса «Баш на баш»

Интерфейс приложения выглядит несколько устаревшим. Более того, слабая модерация сервиса пропускает скрытые объявления о продаже, а не обмене вещей. Сервис был создан в 2014 году и с тех пор значительных изменений в UI/UXне вносилось.

Мобильное приложение SWOP.IT

Компания Point for Services LTD была основана в 2019 году на Кипре, в конце 2019 года она выпустила мобильное приложение Swop.it, доступное в Google Play и AppStore [10]. Несмотря на недавний релиз приложения, Swop.itскачали уже более 500 тысяч человек, рейтинг приложения в Google Play 4,5 звезды.

Рассмотрим ту же страницу со всеми товарами, что и в сервисе «Баш на баш». Лента товаров изображена ниже (см. Рисунок 3).



Рис. 3. Интерфейс приложения Swop.it. Лента товаров

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

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

Итоги обзора и выводы по разделу

Из краткого обзора похожих сервисов можно вынести ключевые моменты, которые стоит учесть при проектировании и разработке сервиса. Характеристики оценены с точки зрения пользовательского опыта и удобства пользования в целом. Сведения об обширности охвата категорий, возможности продажи вещи за деньги не учитывались, количество привлеченных и активных пользователей также не учитывалось. В таблице ниже приведено краткое описание сервисов обмена по сравниваемым критериям с четырех сторон: как устроен поиск объявлений, отображение объявлений, простота входа в приложение и на каких платформах доступен сервис. Таблица консолидирует все изученные аспекты рассмотренных сервисов (см. Таблицу 1).

Табл. 1. Сравнительная таблица сервисов обмена

Критерий	Сервис
	Баш на Баш	Swop.it
Поиск товара
Настройка разных критериев поиска	Критерии по стоимости, категории товара, дате, городу, ключевым словам	Критерии сортировки по дате, стоимости в спец. Валюте, по популярности автора, разместившего объявление
Сброс фильтров или выбор «Все»	присутствует	присутствует
Настройка отображения результатов поисковой выдачи	присутствует	присутствует
Отображение товара
Сведения о товаре	Недостаточно проиллюстрирован товар, но вся информация отражена лаконично.	Товар ярко представлен. Визуально доля присутствия товара на экране - максимальна.
Режим редактирования	Простой режим редактирования товара. Однако после редактирования не всегда корректно отражается информация.	Очень простой и интуитивно понятный. Возможно загрузить данные позднее.
Простотарегистрациии входа
Регистрация в приложении	Долгая, требует большого количества заполненных полей.	Требует большого количества разрешений в настройках мобильного телефона.
Вход в приложение	Можно войти через популярные в РФ социальные сети.	Можно войти, используя Facebook, Gmail, Instagram
Платформы
Платформы	Веб-приложение. Мобильная версия сайта слабо адаптирована.	Мобильное приложение для Androidи IOS

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

Чтобы ответить на вопрос: «Как потребитель будет использовать приложение?», была составлена UserJourneyMap (UJM). Такая карта составляется, чтобы отразить эмоции, опыт и точки взаимодействия клиента и продукта.см. Приложение А.UserJourneyMapотображает, как именно, в каком месте пользователь взаимодействует с приложением, показывает ключевые точки в приложении, которые необходимо спроектировать с особенным вниманием. Также в будущем карта поможет определить и отслеживать качество продукта, устанавливая численные KPI (например, количество сделок, количество нажатий на определенные компонент, переходы на экран и пр.). Нет строгих нотаций и правил к заполнению «Карты путешествия пользователя», однако существуют несколько вариантов заготовленных матрицах.

Сначала, были изучены активности пользователя при первом столкновении с приложением. Ответы на вопрос «зачем пользователь попал на сайт?» и «Что он первым делом сделает, оказавшись на сайте?» позволили сформировать верхний уровень карты. Выяснилось, что обязательная регистрация/вход и получение доступа к системе - неудобная операция для пользователя, в качестве решения: на UJM предложено подставлять данные для входа и использовать минимум сведений при регистрации, остальные данные пользователь сможет заполнить позже.

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

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

- Неправильная классификация товаров пользователем (установка неверных тегов и/или умышленное указание неверной информации.

- Процесс обмена после нахождения пары товаров в приложении может не завершиться по различным причинам.

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

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

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

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

Сам процесс обмена одежды можно разделить на 5 этапов:

1. Поиск и отбор подходящих товаров (тех, которые пользователь хочет получить).

2. Ответ на совпадения от других пользователей.

3. Процесс подтверждения обмена и назначении места встречи или способа передачи товара друг другу.

4. Встреча и передача товара друг другу вне приложения.

5. Подтверждение о состоявшемся обмене в приложении.

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

Действия 1-3, 5 выполняются с помощью приложения и могут быть отражены на одном процессе, поскольку достаточно коротки и понятны. Это будет бизнес-процесс«Процесс обмена одеждой». На рисунке ниже представлена его модель в нотации BPMN2.0.(См. Рисунок 4).



Рис. 4. Модель бизнес-процесса «Процесс обмена одеждой» в нотации BPMN 2.0

Процесс обмена одеждой вне приложения

В рассматриваемом бизнес-процессе важно отметить, что он может резко завершиться практически на каждом этапе. Это один из главных бизнес-рисков. Также необходимо мотивировать пользователя переводить пару товаров в статус «обменян» после того, как произошел фактический обмен. Подтверждение необходимо получить от обеих сторон. Для увеличения количества подтверждений обмена (запуск процесса «переносит товары в статус «обменянные») в следующих версиях планируется использовать напоминания. Моделирование бизнес-процесса на языке BPMN 2.0 представлено на Рисунке 5.

Рис. 5. Модель бизнес-процесса «Процесс обмена одеждой вне приложения» в нотации BPMN 2.0

Стек технологий для разработки сервиса

Правильно выбранные инструменты для разработки делают ее более успешной и эффективной, помогают сократить риски, на начальном этапе подобрать совместимые технологии. Таким образом, правильно выбранный стек технологий - важный фактор успешной реализации проекта. Для разработки сервиса для свободного обмена одеждой проанализированы и выбраны технологии для реализации UI/UX, базы данных и серверного API. Также указаны предпочитаемые технологии, необходимые для процесса разработки (программное обеспечение, плагины).

Чтобы найти нужные товары или услуги, российский потребитель чаще всего просматривает страницы с ноутбука или смартфона. Однако, чтобы завершить заказ (оплатить, оформить доставку), он использует стационарный компьютер или ноутбук [3]. У них более удобный и большой экран, выше качество и скорость интернета, а также потребитель привык, что десктоп-версия более удобна и проработана. Таким образом, на сегодняшний день мобильные приложения не могут обеспечить оптимальный покупательский опыт (исследователи Euromonitor Passport прогнозируют, что мобильные приложения будут превалировать над веб-приложениями в России не раньше 2023 года). В работе акцентируется именно покупательский опыт с той стороны, что потребитель выступает лицом, который приобретает какую-либо ценность, в случае обмена, пользователь приложения по-прежнему ищет определенную ценность, поэтому, поведение можно приравнять к покупательскому.

Одной из главных тенденций в разработке веб-приложений сегодня становится технология Single page application (SPA). Такие приложения уже поддерживают поисковую и SEO оптимизацию, выигрывают по скорости работы и удобству использования у стандартных многостраничных сайтов (Multi Page application). Более того SPA позволяет добиться эффекта «приложения», когда вебсайт похож скорее на встроенное приложение на компьютере, а не типичный сайт с перезагрузками и задержками.

Развитие SPA связано с появлением технологии AJAX в 2005 году. AJAX позволял разработчикам динамически отправлять запросы на сервер, без перезагрузки страницы. Позднее появились другие технологии: JQuery, Dojo, Javascript, Prototype и др. Они работали с клиентской стороны и используются до сих пор.JQuery и JavaScript все еще входят в рейтинги самых используемых языков для разработки в контексте клиентской части веб-приложений.

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

- Backbone.

- Angular.

- Ember.

- React.

- Vue.

Краткая сравнительная характеристика с оценкой популярности и сложности освоения технологий представлена в Таблице 2.

Табл. 2. Сравнение технологий для разработки клиентской части приложения

Технология	Тип	Виртуальный DOM (Shadow DOM)	Популярность (от 1 до 5, где 5 - самый популярный)	Сложность обучения (от 1 до 5, где 5 - самый сложный)
Backbone	Фреймворк	+	1	3
Angular	Фреймворк	+	3	5
Ember	Фреймворк	+	1	5
React	Библиотека	+	5	5
Vue	Библиотека	+	2	3

После тщательного анализа была выбранаopen-source библиотека React.js для реализации клиентской части приложения. React поддерживается компанией Facebook, обновляется, развивается и на сегодняшний день остается самым популярным фреймворком (React часто называют фреймворком, хотя фактически - это библиотека) для разработки приложений [11, 12].

React использует реактивный подход в создании приложений - потоки данных асинхронны, изменения распространяются быстрее и синхронизируются в местах, где указаны те же переменные («propagate changes»). React придерживается концепции многоразовых компонентов, поэтому при проектировании интерфейса весь пользовательский экран будет логически разделен на компоненты. Разработка ведется на языке JSX - по сути совмещенного языка JavaScript и языка разметки, XML-подобный синтаксис, поддерживаемый ECMAScript.

Система управления базами данных

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

Ежегодно DB-engines составляет график популярности исследуемых систем управления базами данных [13], аналитики учитывают частоту использования технологии, отзывы разработчиков, выход новых версий и другие критерии. MySQL, согласно DB_Engines, -- наиболее популярная реляционная система управления базами данных, PostgreSQLтакже имеет растущий тренд и набирает популярность среди SQLСУБД, а MongoDB -- наиболее известная NoSQLсистема управления базами данных. Redis, хранилище типа ключ-значение, также резко набирает популярность в NoSQL системах управления базами данных (особенно заметен яркий скачок в 2014-2015гг.). Данные актуальны на март 2020 года. Для сравнения были выбраны именно эти системы управления базами данных. Важно отметить, что использование вышеперечисленных СУБД является бесплатным.

В таблице 3 приведено сравнение систем управления базами данных по семи характеристикам. Сначала приведен тип каждой из рассматриваемых СУБД. Далее расположена оценка по различным характеристикам: Подход к разработке и жизненный цикл приложения, как устроена модель данных, насколько безопасна в использовании данная СУБД (есть ли возможность обернуть обращения к базе в транзакции и пр.), производительность используемой технологии, возможности к масштабированию системы (поскольку мы рассматриваем MVPс дальнейшей доработкой), и, наконец, удобство администрирования СУБД. Каждая характеристика оценена баллами от нуля до трех, где 0 - пустая ячейка, «3» - наивысший балл. Для выделения сверхвысокой производительности СУБД Redis, в таблицу занесено значение «4».

Табл. 3. Сравнение систем управления базами данных

Критерий	MySQL	PostgreSQL	MongoDB	Redis
Тип СУБД	Реляционная	Реляционная	Документо-ориентированная	Ключ-значение
Подход к разработке и жизненный цикл приложения	3	3	+++	2
Модель данных	2	3	2	1
Транзакции и Консистентность (ACID)	3	3	1
Производительность	3	3	2	4
Масштабируемость	2	1	3	3
Администрирование	2	1	3	2

В MongoDB данные представляют собой документы. Данные многих веб-приложений отображать очень просто. В MongoDB достаточной гибкий JSON-формат документов и низкий порог входа: не нужно специальных знаний языка SQL. Таким образом, простая логика и простые запросы реже создают проблемы. Также в MongoDB встроена достаточно простая масштабируемость с использованием технологии шардинга (шардинг - это стратегия масштабирования приложений. Шардирование - процесс, когда база данных делится на блоки и распределяется по разным серверам-шардам). Если говорить про приложения, где используется MongoDB, и на чем они фокусируются -- это очень быстрая разработка, однако здесь возникает вопрос жизненного цикла приложения. MongoDB подходит для приложений с ограниченным циклом жизни. Для создания сервиса для обмена одеждой это допустимое ограничение. Данные о пользователях зафиксированы, а товары, которые загрузил пользователь, хранятся в системе временно, пока не будут обменяны. Далее об обменянных товарах может храниться только короткая информация, полные сведения уже не нужны. MySQL в этом плане более гибок и обеспечивает долгий срок службы на 15 и более лет.

Для реализации сервиса выбрана нереляционная система управления базами данных Mongo DB ввиду низкого порога входа в технологию, JSON-подобный формат (документоориентированная система управления базами данных), легкой масштабируемости, и достаточной простоты в поддержке и администрировании.

Язык разработки северной части

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

К рассмотрению были отобраны три технологии:

- Node.js- серверная платформа для работы с JavaScript через движок V8. JavaScript выполняет действие на стороне клиента, а Node - на сервере. Позволяет писать полноценные приложения. Node умеет работать с внешними библиотеками, вызывать команды из кода на JavaScript и выполнять роль веб-сервера [12].

- PHP- язык программирования, специально разработанный для написания web-приложений (сценариев), исполняющихся на Web_сервере, широко используемый язык сценариев общего назначения с открытым исходным кодом. Аббревиатура PHP означает «Hypertext Preprocessor (Препроцессор Гипертекста)».

- Go - статически типизированный, компилируемый, многопоточный язык для создания серверной части приложения. Разработан внутри компании Google.

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

В Таблице 4 представлены языки программирования, сравниваемые по шести критериям. Критерии сформированы самостоятельно в процессе подбора технологического стека. В рамках сравнения не рассмотрен критерий «перспектива развития», поскольку выбраны наиболее популярные на сегодняшний момент (и на ближайшее время) языки программирования, подходящие под поставленную задачу.

Каждая характеристика оценена баллами от нуля до трех, где «0» - пустая ячейка, «3» - наивысший балл.

Табл. 4. Сравнение языков программирования для серверной разработки

Критерий	PHP	GO	Node.js
Лаконичность синтаксиса	3	1	2
Инструменты для разработчика	1	2	3
Готовность команды к работе	1	1	3
Объем документации	3	1	2
Параллелизм	1	3	1
Масштабируемость	2	2	1

Для разработки была выбрана технология Node.js, она отвечает требованиям к лаконичности синтаксиса и наличию документации в свободном доступе. Также, поскольку разработка серверной части будет производиться параллельно с клиентской, наличие языка JavaScriptв обоих частях сделает переходы между задачами более простыми. Для разработки на Node.jsбудет использоваться веб-фреймворк Express версии 4.17. Expressпредставляет собой небольшую грубую надстройку над Node.jsдля реализации типовых действий: отправки/получения http-запросов, работы с веб-сокетами, предоставляет интерфейс программирования приложений (API). и пр. В сравнительной таблице критерию «Инструменты для разработчика» для Node.jsприсвоено значение «3» потому, что для работы с Node.jsбудет использоваться пакетный менеджер NPM, который также поддерживает работу React.

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

Разработка будет вестись на компьютере с операционной системой Windows 10. Среда разработки исходного кода программы - VisualStudio Code от компании Microsoft.VisualStudioCode позволяет:

- Запускать и отлаживать программу.

- Производить реинжиниринг исходного кода программы.

- Поддерживает автоматическую подстановку кода (технология Intelli Sense codecompletion).

- Поддерживает систему контроля версий (например, Git).

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

Так для комфортной работы с React, были подобраны следующие бесплатные плагины: Bracket Pair Colorizer, Code Spell Checker, DuplicateSelection, Path Intellisense, Auto Rename Tag, CodesnippentsforReact, ESLint, glean, ReactRefactor.

Основная функция приложения для свободного обмена одеждой - возможность найти человека с потребностью обменяться вещами (при этом, важно учесть, что пользователям взаимно должны понравиться вещи, которые им предлагают на обмен). Следует обратить внимание, что действие «Листает ленту товаров других пользователей» означает, что Пользователь 1 либо отметит одежду, как понравившеюся, либо откажется от нее. Отложить или просто посмотреть товар невозможно (см. Рисунок 6). Таким образом, формируются списки понравившихся предметов одежды и там, где есть пересечения между пользователями и товарами, приложение предлагает произвести обмен.

Рис. 6. Диаграмма прецедентов для проектирования сервиса свободного обмена одеждой

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

Во второй главе рассмотрены аналоги проектируемого приложения, исследован их пользовательский интерфейс. Чтобы выделить бизнес-цели и нужды пользователя, была составлена и проанализирована карта пользовательского опыта. Также были спроектированы бизнес-процессы «Процесс обмена одеждой» и «Процесс обмена одеждой вне приложения» Модели бизнес-процессов представлены в тексте работы. Диаграмма прецедентов описывает возможности взаимодействия пользователя с сервисом.

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

Также в этой главе приведен анализ инструментов для разработки и технологий, используемых в проектировании и последующей реализации приложения. По итогам анализа технологий для реализации клиентской части приложения была выбрана библиотека React, написанная на языке JavaScript. В качестве языка для серверной разработки также выбран язык JavaScript, используется технология Node.jsс надстройкой Express. Из четырех рассмотренных СУБД (Системы управления базами данных) была выбрана NoSQLСУБД MongoDB. Такой стек технологий сокращенно именуется MERN.

3. Проектирование информационной системы сервиса свободного обмена одеждой

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

Стек технологий MERN. Архитектура взаимодействия

MERN - это аббревиатура, составленная по первым буквам используемых технологий, где M-MongoDB, E-Express.js, R-React.js, N -Node.js.MERN это вариация стека MEAN (где A-Angular.js), как видно, отличаются они только выбором технологии для реализации клиентской части приложения.

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

Ниже представлена архитектура разрабатываемого приложения, с указанием используемых технологий (см. Рисунок 7).

Рис. 7. Архитектура MERN приложения

На диаграмме отображены только основные технологии на всех уровнях. Помимо представленного, клиентская часть внутри себя имеет Redux для управления состоянием приложения, библиотеку Axios для удобной отправки HTTP-запросов и получения данных. Серверная часть также содержит модули для авторизации и стратегии аутентификации, пакеты для валидации данных, пакеты для работы с файловой системой и изображениями (библиотека Multer).

Принципы визуального проектирования

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

Адаптивность.

Кроссбраузерность (корректная работа во всех используемых браузерах).

Соответствие макету или дизайн системе продукта.

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

Визуальная иерархия

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

Фокус

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

Контраст

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

Выравнивание

Выравнивание используется для представления информации в удобочитаемом виде, удобном для визуального сканирования, т. е. легким и быстрым для восприятия. Выравнивание элементов объекта относительно других элементов создает ощущение единства и связности. Основной инструмент для создания единства и упорядоченности - модульная сетка. Модульная сетка состоит из колонок и рядов. Традиционное количество колонок в сетке - 12. Такое число обусловлено удобным количеством делителей. Для мобильных экранов можно использовать три колонки из двенадцати, для планшетов - достаточно Ѕ всех колонок. Для экранов разной ширины можно выстроить сетку из 8, 9, 10, 12 колонок. Модульная сетка повышает эстетическую привлекательность и эффективность интерфейса. Удобство применения заключается в единообразии расположения элементов, благодаря чему их поиск, и восприятие пользователем требует меньшего времени и усилий.

Баланс

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

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

Пространство

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

Описание экранов пользовательского интерфейса.

В проектировании интерфейса важно, насколько продукт решает задачи пользователя. Удобство использования (Англ. - Usability) - качество и эргономичность, показывает, насколько удобно пользоваться продуктом.

У любого пользователя уже частично построена в голове модель готового сайта, попытки изменить ее приведут к раздражению и отторжению продукта. Однако, это можно использовать: классические паттерны (например: меню в верхней части сайта, регистрация и вход - в правом верхнем углу, фильтры или настройки ленты - вверху или слева от самой ленты товаров и т.д.) упрощают навигацию по любому сайту, дают пользователю меньше времени на переходы по страницам, «зацепляя» его внимание на чем-либо значимом. Такие паттерны - это неотъемлемый общий язык интерфейса любого сайта или приложения [15].

На рисунке 8 изображен макет экрана приложения для свободного обмена одеждой. Для позиционирования элементов на экране (и во всех последующих макетах) была использована модульная сетка в 12 колонок, расстояние между колонками фиксированное -20px. В левой части макета находится информация о пользователе, его рейтинге (элемент геймификации). Ниже располагается тоггл, который переключает экраны «текущие Обмены» на «Новые обмены» (на диаграмме переходов эти экраны называются «Лист чатов»). В правой части находится лента товаров, а внизу предмет одежды, на который хочет поменяться человек. Листая ленту товаров влево-вправо и подбирая товар внизу, пользователь выставляет предложения об обмене. Все новые совпадения попадают во вкладку «Совпадения» на переключателе, когда пользователь ответит на запрос, у обоих пользователей совпадение переходит в «Сообщения».

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

Рис. 8. Макет экрана «Swipe» и «Обмены»

Другие макеты пользовательского интерфейса находятся в Приложении Б - Г.

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

Проектирование навигации

Исходя из функциональных требований к приложению, была смоделирована диаграмма переходов по экранам приложения. Примечание: экраны разделены по функциональному признаку: каждый «экран» в диаграмме представляет собой одно действие. В итоговом UI сервиса несколько экранов могут быть расположены вместе. Например, «Настройки профиля» могут не открываться в новом окне, а оставаться на экране рядом с данными о пользователе (экран «Профиль пользователя»). Диаграмма переходов между экранами UI представлена на Рисунке 5. Макеты каждого экрана находятся в приложении Б - Г. Основными экранами являются «Swipe экран», «Профиль пользователя», «Карточка товара», «Совпадения». См. Рисунок 9.

Рис. 9. Схема переходов между экранами в приложениисвободного обмена одеждой

Проектирование базы данных

Была выбрана система управления базами данных MongoDB. MongoDB является NoSQL системой управления базами данных. Это открывает новые возможности для хранения и обработки данных.Например, гибкость: Как правило, базы данных NoSQL предлагают гибкие схемы, что позволяет осуществлять разработку быстрее и обеспечивает возможность поэтапной реализации. Благодаря чему БД NoSQL хорошо подходят для частично структурированных и неструктурированных данных. Масштабируемость: Базы данных NoSQL рассчитаны на масштабирование с использованием распределенных кластеров аппаратного обеспечения, а не путем добавления дорогих надежных серверов. Некоторые поставщики облачных услуг проводят эти операции в фоновом режиме, обеспечивая полностью управляемый сервис. Высокая производительность: Базы данных NoSQL оптимизированы для конкретных моделей данных и шаблонов доступа, что позволяет достичь более высокой производительности по сравнению с реляционными базами данных. Широкие функциональные возможности: Базы данных NoSQL предоставляют API и типы данных с широкой функциональностью, которые специально разработаны для соответствующих моделей данных

...