Задача проекта
На сайте алготрейдинговой платформы было необходимо разместить график, где будет указана динамика доходности акций.
Условия
- Видна динамика на трех площадках: Московская Биржа, Crypto, Global Exchange
- У пользователя должна быть возможность посмотреть данные за определенный период
- Для каждой площадки должна быть отдельная временная шкала
- Внизу графика должна быть таблица, отображающая значения роста/спада за месяц
- Должна быть возможность добавления новых функций и площадок в тот же график
Дизайн
Для дизайна сайта выбрана горизонтальная симметричная композиция. Основные формы прямоугольные. Акценты в виде кругов, например полоса временной шкалы и точки перелома на графике.
Шрифты
Изначально я попробовала шрифт Mukta, он хорошо смотрелся на графике, но не так хорошо на сайте, создавалось ощущение "расплывчатости". Поэтому, чтобы придать сайту равновесия и строгости, я выбрала шрифт Roboto, для заголовков — чуть менее формальный Istok Web Bold.
Цвет
Основной цвет сайта и графика — нейтральный темно-синий. Он передает ощущение надежности и доверия (и да, именно его использует множество банков, все это знают). Для линии-индикатора выбран красный цвет, чтобы создать контраст.
Планирование
Изначально планировалось создать три графика, каждый с иконкой соответствующей площадки. Я отказалась от такого варианта, так как их нельзя было уместить на один экран, и нарушалось стилевое единство сайта.
Вкладки
Три графика объединены в один, пользователь переключается между ними с помощью вкладок в верхней части.
Что важно, сразу видны названия всех площадок. Кроме того, в любой момент можно добавить новую площадку, и она будет смотреться органично.
Шкала времени
Изначально планировалось сделать инпуты, где пользователь мог сам указать начальную и конечную дату, либо выбрать вариант из списка (по умолчанию - за последний месяц).
Причина отказа
Такой вариант обеспечивал точность и гибкость настроек вида, но от него пришлось отказаться. Слишком тяжелый интерфейс, особенно для мобильной версии.
Принятый вариант
Необходимо было легкое решение, которое выглядело бы идентично на всех устройствах, было интуитивно понятным и не занимало лишнее пространство. Таким решением стала шкала со слайдерами-ограничителями.
Такой вариант сразу понравился и пользователям, и заказчику. Что важно, он выглядит идентично на всех вкладках. Он оказался удобен и на мобильных устройствах.
Функция
Сначала это была гибкая волнистая линия с градиентом снизу. Несмотря на то, что такое решение смотрелось современно, я от него отказалась. Линия выбивалась из общего дизайна, градиент отвлекал внимание от цифр и делал график загруженным.
Замена
В итоге я заменила его на вариант с прямыми линиями. Момент перелома обозначен кругом. Круги пришлось увеличить, чтоб график выглядел менее формальным. Плюс на такие круги легче наводить курсором.
Деление шкалы
В качестве единицы для временной шкалы был выбран месяц, но потом было решено, что на разных площадках он будет разным. Отрезки разделены вертикальными линиями, чтобы было проще ориентироваться.
Добавление функций на график
Добавление новых функций не было реализовано, но, при необходимости, это сделать довольно легко.
Для каждой из площадок можно добавить новую функцию, например "Рейтинг надежности". Ее можно обозначить другим цветом и добавить обозначение снизу. При щелчке на иконку снизу надпись слева "Доходность" менялась бы на "Надежность".
Индикатор
Линия индикатора тоже претерпела перемены. Фон для даты снизу я заменила на более темный, а текст стал светлым, чтобы он не терялся на фоне временных отметок на оси Х.
При наведении на круг около строки "Накопительная доходность" снизу появляется соответствующая цифра.
Итог
Что можно улучшить в этой версии графика:
Для мобильных
- Cлайдеры для прокрутки должны быть более крупными, чтобы их легче было двигать пальцем
- Таблицу надо растянуть на всю область экрана, чтобы ее было легче смотреть
- График надо растянуть на полный экран. Обозначения на оси Y надо сдвинуть внутрь графика
Для десктопа
- Увеличить расстояние между вкладками с названиями площадок
- На главном экране справа должна была быть картинка с анимацией, изображающая движение криптовалюты
- На индикаторе рядом с процентами надо ставить стрелку вверх и вниз, чтобы обозначить рост / спад