Тестовое задание в МВидео

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

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

Экран с разрешением 1920х1080.

Хедер должен ездить при скроллинге страницы

Сайдбар с фильтрами открывается при нажатии кнопки фильтров.

Альтернативно можно сделать сайдбар без затемнения для улучшения видимости данных.

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

Области отображения данных.

Зеленый - область, докуда график может доходить при максимальном сдвиге вправо

Красный - область, в которой график может отображаться.

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

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

Область наполнения соответствует размеру контейнера во всех случаях. Надписи “Средняя цена” и “Продажи в штуках” не пропадают при зуме, но остаются на том же месте при сдвиге графика - то есть, могут уйти за края.

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

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

Если такой кейс невозможен, то можно использовать альтернативный вариант - изменение порядка столбцов тем жеdrag and drop внутри настроек столбцов.

Оформление юзерфлоу.