Из MVP в продукт высокого уровня при помощи дизайна: оптимизация интерфейса для финансового проекта

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

У любой компании, в особенности стартапа, есть необходимость в удобном учёте финансов. Мы сами начинали работу как стартап (и до сих пор не утратили для себя этого звания), поэтому знаем, каково это — когда на специального сотрудника денег не хватает, а отчётность перед инвесторами и учредителями обязательна.

Заказчик создал MVP платформы для ведения учёта финансов, основной фишкой которого в будущем станет аккредитация программы у различных корпораций поддержки МСП и банков. Говоря иначе, если ваша компания хочет запросить финансовую поддержку, то будущие кредиторы смогут проводить проверку и оценку рисков, исходя из данных по финансовому состоянию, указанных на платформе Startis — помимо удобства программы, это должно послужить дополнительным стимулом к её использованию.

Дано

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

Задача

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

Решение

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

Startis, будучи классическим миксом из таблиц, инфографики и обширного массива данных, был вдохновлён работами Артёма Горбунова, Олега Пащенко и Ильи Михайлова в бытность их арт-директорами «Студии Артемия Лебедева» и всему лучшему, что было создано под их руководством в период 2003...2010 гг. Творчеством информационных дизайнеров «New York Times», «Washington Post», «Politico», «Reuters» и «Bloomberg». Мы обратились к философии Дитера Рамса, заметкам Ильи Бирмана, советскому энциклопедическому дизайну и, конечно же, Эдварду Тафти, его книгам и видению.

Таблицы

Для понимания важности произведённых работ по таблицам, необходимо понять их суть и предназначение.

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

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

Числовые данные вводятся в четыре таблицы:

  • Прибыль и убытки;
  • Движение денежных средств;
  • Баланс;
  • Технико-экономические показатели.

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

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

Особое внимание уделяется правильной выточке: параметры выстроены по левому краю, а числовые данные — по правому, по разрядам.

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

В отношении числовых данных у таблиц три функциональные особенности: часть данных вводится руками, часть — автоматически рассчитывается, часть — суммируется. То, что владельцы компаний, аналитики и инвесторы обычно настраивают через формулы в Excel, было реализовано в более удобном виде в Startis.

В отличие от Excel, пользователь при интерактивном взаимодеиствии сразу видит, как взаимозависимые параметры связываются и суммируются. Например, в таблице «Движение денежных средств» взаимозависимыми параметрами являются:

  • Операционная деятельность, млн руб.;
  • Инвестиционная деятельность, млн руб.;
  • Финансовая деятельность, млн руб..

Всё вместе:

  • Чистый поток, млн руб.

Применена классическая древовидная ступенчатая иерархия: данные, входящие в параметр, занимают подчинённое положение. Для удобства их можно сворачивать и разворачивать.

Интерактивная отдача также проработана: строки при наведении выделяются плашками, изменяемые числовые данные подчёркиваются жёлтыми линиями, информеры показывают вложенные сравнительные данные, в некоторых местах всплывают подсказки, рисуются взаимосвязи и зависимости. Здесь ключевым источником вдохновения послужил «Biathlontime» от Ильи Бирмана.

В зависимости от настроек при создании финансовои модели:

  • таблицы можно просматривать по месяцам, кварталам или годам — мы просчитали компоновку для всех ситуации;
  • в таблицах можно видеть только фактические, плановые показатели или все сразу — мы создали два способа их вывода (в виде информера и сразу в таблице);
  • числовые данные могут быть округлёнными (1.72) или полноценными (1 723 290) — в округлённых данных мы применили визуальное разделение целои и дробнои частеи.

Рассчитана техническая возможность импорта числовых данных из Excel. А таблицеи «Технико-экономические показатели» в состоянии «Показывать факт и план совместно» мы реализовали формат классических индикаторов роста и падения в минималистичных биржевых котировках.

Инфографика

В качестве программного фундамента мы использовали Javascript-библиотеку Chart.js. Библиотека работает на основе HTML5, предлагает наиболее популярные типы инфографики с возможностью кастомизации, поддерживает все современные версии браузеров и имеет встроенную анимацию. Проект подробно представлен на Github и работает по принципу open source community.

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

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

Впервые в нашеи практике мы применили принцип редактирования «on spot»: если параметр является textfield, то он подаётся сразу текстом — без полей, рамок или подчёркивании. Аналогичный механизм можно встретить в Notion и Asana. Данныи принцип упрощения в итоге распространился и на другие элементы интерфеиса:

  • вместо тяжеловесных dropdown’ов — текст и стрелка вниз;
  • вместо массивнои «шестерёнки» — компактное многоточие;
  • вместо галочек на квадратных плашках и буллитов, очерченных рамками — просто галочка и точка.

График можно просматривать по месяцам, кварталам и годам; он может быть большим или малым; каждыи параметр может отображать только план, факт, или всё сразу.

У графиков типа «curve» линии могут быть с точками или без точек, полноценными или пунктирными.

А колонки в графиках типа «histogram» могут идти раздельно или же собираться в кластеры, надстраиваясь друг над другом. Всё адаптируется к ширине браузера, расширяется на мониторах и сужается, перестраиваясь, на смартфонах.

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

В том числе нами проработана более комплексная версия инфографики типа «curve»: с подсказками, дополнениями, расширенным прогнозированием и вариативной интерактивностью.

Финансовая модель

Таблицы и инфографика являются составными частями финансовой модели. Создавая финансовую модель, пользователь определяет фундаментальные параметры, на основе которых в дальнейшем выстраивается колоночный объём таблиц — а затем и инфографика. Пример параметров финансовой модели:

Профиль

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

Как и везде на сайте, данные в профиле меняются на месте — без полей, лишних подчёркиваний и прочего UI/UX-декора.

Краткий обзор проекта

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

0
37 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

На самом деле мы сами не совсем поняли, что произошло - почему-то при копировании из черновика в данный редактор буквы "й" съелись :) 
Мы постарались везде поправить, но где-то, видимо, пропустили. Спасибо, что заметили!

Ответить
Развернуть ветку
Yes, Your Grace

Хм, встретил фразу про реализацию чекбоксов без самих, собственно, боксов, но на скринах не увидел. Интересно, как показан неактивный стейт?

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

Мы очень рекомендуем подписаться на наш Instagram (uprising_agency): там мы публикуем фрагменты работ, процесс, новости о релизах — и в том числе анимационные демонстрации интеракций и придуманных решений. Ведь принцип „on spot“, реализованный в „Startis“, как раз лучше будет увидеть именно в действии. Stay tuned!

Ответить
Развернуть ветку
Yes, Your Grace

Пустой аккаунт с двумя публикациями, одна из которых "привет"-пост и отсутствие ответа на мой простейший вопрос... 🤔
Чёт как-то я вам не очень начал доверять.

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

Да, в «Instgram» мы только начали. Совсем скоро там будут новые посты, среди которых - интересующий Вас. Да прибудет с Вами терпение — великая добродетель, которая способна приводить к удивительным открытиям : ).

А пока можете ознакомиться, например, с нашей презентацией работ https://drive.google.com/file/d/1vwLzWXEoFfcU_XLEu5bRLqAvLlE9CGC2/view?usp=sharing или страницей об агентстве - https://www.notion.so/uprisingagency/Digital-Uprising-Agency-d5668a8222164aabb5de02b8d771e4fd 
Там много всего интересного)

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

Ответить
Развернуть ветку
Матин Таджиев

Круто! 

Ответить
Развернуть ветку
Dmitry Tsygankov

Отлично получилось, молодцы. Сам работал над продуктом со множеством таблиц, так что вам особая благодарность)

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

Благодарим за оценку! Этот проект был действительно непростым :)

Ответить
Развернуть ветку
Андрей Горобченко

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

Ответить
Развернуть ветку
Game Topia

А он вам не напоминает полярника в белом комбинезоне пробирающегося через снега в метель? Проведешь долго время и уснёшь. 

Ответить
Развернуть ветку
Андрей Власов

Лаконично, чисто, информативно.
Интересно было бы увидеть полный гайд к дизайну.

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

Благодарим за оценку! Нам очень приятно, что смогли передать наши основные ценности в этом проекте.

Не очень поняли по "гайду к дизайну". Имеются в виду гайдлайны к дизайну? UI/UI kit? Гайд-документация? Данная работа нами не проводилась — мы просто сделали дизайн от и до :)

Ответить
Развернуть ветку
Андрей Власов

Да, гайдлайны к дизайну. Ну раз нет, то хотя бы Ui kit)

Ответить
Развернуть ветку
Game Topia

Тырить бест практики - научились. Осталось научится отличать правильный дизайн, от безграмотного и тогда станете очень крутыми.

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

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

А что именно кажется Вам безграмотным? С удовольствием выслушаем критику)

Ответить
Развернуть ветку
Game Topia

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

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

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

Более того, в нашем случае мы этого не скрываем, о чём и написали в статье. Но есть большая разница с "плагиатом" - мы развили свою идею и направление, учитывая требования заказчика, наш опыт, идеи и наработки.
Может быть, вы открыли какую-то новую страницу в истории дизайна? Желаем Вам успехов и будем рады увидеть результат Вашего труда!

Ответить
Развернуть ветку
Game Topia

А в плагиате тоже ничего плохого нет. Но посмотрите на референсы, вы ничего нового не добавили. Вам попадались кадры жителей северной Кореи? Это первое о чем я подумал увидев ваш дизайн. Только он жёлтый. Скучно.. сейчас год какой! Посмотрите таблицы криптобирж! И не надо переключатся на "сам делай лучше", это самое последнее что может сказать профессионал.

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

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

Да и как-то вопрос с безграмотностью дизайна остался без ответа. А очень хотелось послушать качественную критику)

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

Ответить
Развернуть ветку
Game Topia

Стильный минимализм. Что делает его стильным? Как бы выглядел это мин садизм, если бы не был стильным?

Ответить
Развернуть ветку
Game Topia

Минимализм не бывает дешёвым. А вас нет ничего, за что глаз может зацепиться. П
Представьте себе телефонч в котором все программы были бы в таком стиле. Вам разве не стало бы скучно? 

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

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

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

Мы, в первую очередь, думаем о пользователе и его удобстве. Здесь это самый важный критерий.

Ответить
Развернуть ветку
Game Topia

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

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

Акцентов в данном случае вполне достаточно. 
Утилитарный информ. дизайн и должен быть отчасти скучным. Но в данном контексте под термином «скучный» скорее скрывается «деловой» и «практичный». Ярким примером этой парадигмы как раз и являются наши референсы: «Washington Post», «New York Times» и пр.

При этом да: мы большие поклонники «Dribbble», crypto currency style (особенно dark theme), trendy dashboards и пр. — но всему своё место и назначение. Условно говоря, сравнивать «Startis» и сайты про «Etherium» или «Bitcoin» — это как сравнивать манго и говядину: это разные вещи, хоть и еда :)))

Ответить
Развернуть ветку
Game Topia

На дрибле tables charts Обращайте внимание на те, где много цвета. Жаль там стоимость часа работы нет. И что, у Вашингтон пост команда из лучших дизайнеров, которая всегда поддерживает его в  актуальности?

Ответить
Развернуть ветку
Марат Давлетшин

А где в живую можно посмотреть результат

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

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

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

Ответить
Развернуть ветку
Alex Ayer

Лучше - не надо. Типичный пример "ожидание vs реальность"

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Alex Ayer

А покажите адаптив, и конкретно мобилку. Десктоп очень крутой у вас получился 

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

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

Также рекомендуем следить за нашим «Instagram», где нюансам грамотной проработки различных состояний (от mobile до desktop) по различным нашим проектам в будущем будет уделяться особое внимание — конечно, с эффектной их подачей))

Ответить
Развернуть ветку
Ivan Deryabin

Прикольно. Мы тоже пилим ERP для стартапов. Я только не понял будет ли у Вас план-факт. Но выглядит визуально прикольно.  

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

"в таблицах можно видеть только фактические, плановые показатели или все сразу — мы создали два способа их вывода (в виде информера и сразу в таблице);"

"А таблицей «Технико-экономические показатели» в состоянии «Показывать факт и план совместно» мы реализовали формат классических индикаторов роста и падения в минималистичных биржевых котировках".

:)

Ответить
Развернуть ветку
Ivan Deryabin

И главное - не понял из текста -проект-то готов или нет? Извините, читал по диагонали.

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

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

Ответить
Развернуть ветку
Ivan Deryabin

Ok. А то есть сам проект будут другие делать? 

Ответить
Развернуть ветку
Yefim Kolodkin
Автор

Да, все верно, реализация в наши задачи не входила :)

Ответить
Развернуть ветку
34 комментария
Раскрывать всегда