Рис. 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 и типы данных с широкой функциональностью, которые специально разработаны для соответствующих моделей данных
В документоориентированных СУБД, как правило, хранятся иерархические структуры данных. Сама база данных состоит из коллекций, в которых хранятся документы. В документе хранятся поля в виде «ключ-значение». Документ составлен в представлении JSON (Java Script Object Notation), а внутренняя организация хранения и передачи данных между клиентом и сервером осуществляется в его бинарном представлении: BSON (Binary-encoded serialization of JSON). Каждому документу автоматически присваивается идентификатор специального типа ObjectId шестнадцатеричное строковое значение - по сути первичный ключ. Если в базу данных записывается документ без идентификатора, MongoDB генерирует уникальное поле «_id» автоматически.