Пожелания и особенности: Что тебя ждёт Впереди финальный проект, где ты потренируешь навыки, полученные в этом спринте, и ещё глубже погрузишься в задачи дизайнера интерфейсов. При работе с некоторыми продуктами тебе нужно будет организовывать большие объёмы информации, например в таблицы. Важно уметь оформлять их красиво и удобно. Ты уже знаешь основные принципы дизайна таблиц и их адаптивности, теперь можно всё это применить на практике. В этом задании тебе предстоит поработать с интерфейсом, в котором есть таблицы и графики. Ты придумаешь, как должны быть организованы данные, чтобы пользователю было легко найти нужное. Работать ты будешь с одним из инструментов компании «Лента» — прогнозом спроса на товары собственного производства. Заказчик и продукт У компании «Лента» множество товаров, и около 10% из них — это товары собственного производства (продукты питания). Сейчас менеджеры магазинов решают, какое количество товаров изготовить в конкретный день, основываясь исключительно на своём опыте, что не всегда удобно и точно. У аналитиков есть данные о продажах товаров. И на их основе они разработали прогностическую модель, чтобы отслеживать, какой ожидается спрос по каждому товару в определённый период времени. Теперь важно донести эту информацию до менеджеров магазинов. Сотрудники смогут ориентироваться на прогноз по дням, когда будут планировать изготовление продукции и заказывать сырьё. По такому прогнозу менеджер магазина будет представлять, какой спрос ожидается: например, в четверг спрос на пироги в его магазине — 50 штук, а в пятницу — 200 штук. Менеджер сможет более точно планировать производство, чтобы, с одной стороны, продукции всегда хватало, а с другой — не оставалось лишней и продукты не портились. Итак, бизнес-цель — разработать визуализацию данных, чтобы помочь менеджерам магазинов планировать приготовление товаров собственного производства (кухня, пекарня и пр.). Кроме того, прогнозы помогут снизить количество списаний по сроку годности и объём упущенных продаж, когда клиенты готовы купить товар, но его нет в продаже. Аудитория продукта Менеджеры магазинов — сотрудники компании, которые отвечают за изготовление товаров собственного производства, заказывают необходимое сырьё и должны понимать примерный спрос на каждый товар. Кроме того, продуктом будут пользоваться аналитики, чтобы анализировать фактические продажи и прогноз и улучшать прогностическую модель. Твоя задача В этом проекте тебе предстоит: Спроектировать интерфейс, отображающий прогноз спроса на товары собственного производства, для заказчика ООО «Лента»; Оформить его в визуальном стиле «Ленты»; Адаптировать под нужные разрешения. Финальный результат работы — это дашборд/таблица, в которой отображается прогноз спроса по товарам, в каком количестве их нужно приготовить в каждом ТК. Материалы для работы Для работы тебе понадобятся: Брендбук «Ленты» Логотип Шрифт Montserrat (бесплатная альтернатива шрифту из брендбука) Таблица с данными от аналитиков Что конкретно нужно сделать Тебе нужно спроектировать дашборд с таблицами на основе исходных данных от аналитиков. У сотрудников есть свой профиль для входа, но интерфейс предполагается один для всех, в нём нет разделения по ролям сотрудников. Регистрацию и профиль делать не нужно. В дашборде должны быть показаны основные вкладки: Вкладка с прогнозами за период Эта таблица показывает предполагаемый спрос на товар из выбранного магазина или группы магазинов за определённый период. Ориентируйся на User Stories при проектировании функций. Как аналитик: Я хочу иметь возможность изучить прогноз для конкретного магазина за указанный мной период по группе товаров, категории товаров или отдельному товару, чтобы увидеть отклонения и закономерности в прогнозах и предложить лучшее решение по стратегии продаж. Я хочу сравнивать прогнозы за период для нескольких магазинов по группе товаров, категории товаров или отдельному товару, чтобы увидеть отклонения и закономерности в прогнозах и предложить лучшее решение по стратегии продаж. Я хочу иметь возможность сравнивать и легко находить нужную мне информацию в большом количестве строк, чтобы анализировать большие объёмы данных. Как менеджер магазина: Я хочу выбирать популярные периоды времени для прогноза (2 недели, месяц, год), чтобы сэкономить своё время при настройке фильтров прогноза. Я хочу указать свой уникальный период, за который нужен прогноз, чтобы получить более точный анализ, когда это необходимо. Я хочу видеть прогноз за выбранный период в сумме, а также в разрезе каждого дня, указанного в периоде, чтобы более точно распределить заказ на товары за период. Я хочу иметь возможность отсортировать данные в таблице по алфавиту, чтобы легко находить и анализировать нужные мне сведения. Я хочу иметь возможность отсортировать данные по количеству товаров (цифры прогноза на товары по дням) по возрастанию или убыванию, чтобы понимать, в какие дни ожидаются большие продажи и спланировать работу. Вкладка со статистикой продаж (таблица) Эта таблица отображает реальные продажи товаров за прошедшие периоды и сравнивает их с прогнозом. Как аналитик: Я хочу видеть реальные продажи товаров за прошедшие периоды и сравнивать их с прогнозом в разделе статистики, чтобы оценить эффективность прогнозных моделей. Я хочу, чтобы таблица, кроме данных о товаре, содержала фактические продажи, прогноз, разницу между ними и показатель качества прогноза (цифра от 1 до 10, основанная на разнице продаж, — чем меньше разница, тем выше показатель качества), чтобы улучшать процессы планирования поставок. Как менеджер магазина: Я хочу сравнить данные прогноза с фактом продажи за конкретный день или период, чтобы отследить тенденцию и учесть риски при планировании продаж. Я хочу сортировать данные о продажах по убыванию и возрастанию, чтобы увидеть самые горячие дни продаж, на основе этих данных найти закономерности и отклонения и точнее планировать продажи. Я хочу видеть оценку качества прогноза за период, чтобы оценивать риски и точнее планировать продажи. Фильтры Для обеих вкладок нужны фильтры с выбором магазина (ТК) и товара. Как менеджер: Я хочу выбрать конкретный магазин (ТК), чтобы сфокусироваться на данных, связанных с конкретным местоположением. Я хочу выбрать конкретный город, несколько городов, конкретный ТК, несколько ТК, все ТК в городе и сбросить выбор, чтобы удобно фильтровать и сравнивать данные по ТК и городам. Я хочу выбрать конкретный товар, чтобы видеть статистику и точность прогнозов по нему. Я хочу выбрать группу товаров, категории, несколько элементов или все и сбросить выбор, чтобы в полной мере проанализировать статистику и сравнивать данные по нескольким товарам или категориям. Я хочу быстро находить конкретный товар, чтобы посмотреть всю информацию по нему. Кнопка применить фильтр (можно сделать одну на обе вкладки) отображает выбранные данные в таблицах прогноза или продаж. Например, прогноз по группе товаров в конкретном ТК. Кроме того, добавь возможность сохранить выбранный фильтр, чтобы вернуться к нему позднее (кнопка «Сохранить фильтр»). Сохранённые фильтры показываются по клику на соответствующую кнопку (добавляется в меню или другое удобное место), их названия создаются автоматически исходя из категории поиска (например, «Москва, id 12345, багет французский»), фильтры можно удалять. Что ещё важно Добавь возможность построить графики на основе данных таблиц (кнопка «Построить график»). Во вкладке прогнозов и статистики покажи варианты отображения интерфейса с построенными графиками. Можно использовать инструменты для автоматического создания графиков (плагины в Figma). Покажи все необходимые состояния интерфейса: раскрытие списков; выбор города или товара; состояния ошибок в интерфейсе (нет подключения к интернету, 404 — страница не найдена, произошла ошибка базы данных); подсказки (например, когда ещё нет сохранённых фильтров); состояние загрузки данных в таблице. Оформи интерфейс в стиле «Ленты». Ориентируйся на брендбук. Сделай адаптив для стандартного экрана ноутбука и планшета. Всего получится три разрешения: 1920?1080, 1440?960, 834?1194 px. Проверь, чтобы таблицы и графики оставались читаемыми, зона клика достаточной, а пользователю было удобно работать с интерфейсом. Этапы работы Чтобы было проще выполнять проект, двигайся поэтапно. Тебе предстоит пройти три классических этапа: исследование, проектирование и дизайн. Советуем сразу распределить нагрузку, чтобы планомерно выполнять задание. Исследование Внимательно изучи все вводные — брендбук, данные таблицы и описание задачи. Собери референсы и составь мудборд, чтобы понять, как может выглядеть твой интерфейс. При подборе обращай внимание на организацию информации, а также на визуальные решения — какие-то из них ты сможешь использовать в своей работе. Проектирование Погрузись в данные таблицы и подумай, как можно организовать информацию. Создай вайрфреймы дашборда, наметь, где будут располагаться блоки, кнопки, фильтры и другие элементы. Помни про метод прогрессивного джипега: не стоит прорабатывать UI, пока не продумана общая структура. Перед дизайном ещё раз проверь, что архитектура выстроена верно, есть все нужные таблицы и функции. Визуальный дизайн Когда структура будет готова, приступай к оформлению макета. Чтобы ничего не упустить, ориентируйся на эти шаги. Подготовь фреймы для нужных состояний экрана. Для десктопа используй размер экрана 1920?1080 px. Для адаптивов — 1440?960, 834?1194 px. Продумай сетку и используй модули. Они станут хорошим подспорьем в работе. Не забывай про нюансы построения таблиц и графиков, о которых мы говорили в темах. Позаимствуй из своего мудборда графические элементы. Обращай внимание на то, как в твоих образцах выглядят иконки, кнопки и цвета. Проанализируй архитектуру каждого экрана. Насколько соблюдена иерархия в блоках, выдержаны в едином стиле иконки. Используй шрифт из материалов и продумай иерархию. Сохрани её в текстовых стилях своего Figma-файла. Определи акцентные и второстепенные цвета, ориентируясь на брендбук. Сохрани палитру в цветовых стилях Figma-файла. При необходимости в этом же документе сделай теневые стили в системе эффектов. Если где-то сбились цвета, с помощью плагина Match fills to local styles можно выкрасить выделенные фреймы в цвета палитры. Примени компоненты для основных повторяющихся элементов. Так ты сделаешь макет более единообразным и сэкономишь время, если в будущем решишь внести какие-то изменения. Собери UI-кит из основных стилей и элементов интерфейса. Не забудь отразить все состояния (ошибки, загрузка, успешное выполнение, ховеры). Адаптируй макет под стандартный экран ноутбука и планшет. На этом этапе необходимо показать, как ты работаешь над адаптивными версиями и понимаешь принципы адаптивности таблиц. Напомним, что об адаптиве таблиц мы говорили в 8 спринте, в теме «Адаптив сайтов со сложными элементами». Подсказки Если тебе не хватит данных из таблицы, чтобы показать все функции, нужные для решения User Stories, можешь придумать их самостоятельно. Главное, чтобы с таблицами было удобно работать. Приведи в порядок слои и их названия. Пусть всё будет красиво и опрятно не только в макетах. Не забудь убрать черновые названия. Структурируй Figma-файл. Расположи экраны сайта на одной линии слева направо, чтобы их удобно было просматривать и ничего не отвлекало. Создай страницу Drafts и сложи туда все черновики и материалы, которые не вошли в финальный вариант проекта. При необходимости ты всегда сможешь к ним вернуться. Используй шаблон, чтобы не упустить ничего важного. Перед сдачей работы на ревью укажи свои имя и фамилию на обложке финального проекта. Что не нужно делать Усложнять сценарии и добавлять новые шаги основного сценария. На что мы будем обращать внимание, принимая проект Организация информации. Твоим дашбордом должно быть удобно пользоваться, находить нужные фильтры, вкладки, разделы в таблице. Визуальный дизайн таблиц. Следи, чтобы данные в таблице отображались аккуратно, ничего не выезжало за ячейки, не обрезалось, размер шрифта был читаемым на всех разрешениях. Также в таблицах должно быть достаточно воздуха, чтобы их можно было легко изучать. Дизайн графиков. Помни о задаче и цели графика, чтобы выбрать верный вид. Проследи, чтобы цвета использовались корректно и не добавляли лишней информации. Соответствие визуальному стилю «Ленты». Ориентируйся.