{"id":9130,"title":"\u0417\u0430\u0449\u0438\u0442\u0438\u0442\u044c \u0440\u0430\u0431\u043e\u0447\u0438\u0435 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u044b \u0438 \u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u043d\u0430 \u0442\u0435\u0445\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443","url":"\/redirect?component=advertising&id=9130&url=https:\/\/vc.ru\/promo\/305439-reshenie-dlya-biznesa-zashchitit-rabochie-kompyutery-i-tratit-menshe-na-tehpodderzhku&placeBit=1&hash=85c54b2e13f250dedc65edea594d27f2b8d3772b0cf075b87dc84abeac949895","isPaidAndBannersEnabled":false}
Дизайн
Yefim Kolodkin

Из 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 комментариев
Популярные
По порядку
Написать комментарий...

У вас какой-то личный конфликт с буквой «й»? За что вы ее так ненавидите? 

2

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

0

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

0

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

0

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

2

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

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

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

0

Круто! 

1
Принятый супер_стар

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

1

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

0

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

1

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

0

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

1

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

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

0

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

0

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

–2

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

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

2

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

0

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

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

0

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

0

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

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

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

0

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

0

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

–1

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

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

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

0

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

–1

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

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

0

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

0

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

0

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

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

1

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

0

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

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

0

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

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

0

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

0

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

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

:)

0

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

0

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

0

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

0

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

0
Читать все 37 комментариев
Три лучших поста 2021 года из крупнейшего сабреддита про продуктивность
Лайфхак в подборе: как ATS-системы помогают экономить время и бюджет рекрутеров

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

Покоряя воздух: 5 «летающих» hardware-резидентов «Сколково»

Конструкторскую мысль всегда манила возможность приподняться над землей. В древние времена пытливые умы создавали различные аппараты с крыльями, как у птиц. Затем появились воздушные шары, аэростаты, планеры, самолеты, космические аппараты. В XXI веке с развитием аэродинамики инженеры продолжают работать над различными летательными машинами,…

Next, vue, API и собеседования. О чём мы говорили на frontend meetup

Что лучше, Next.js или Nuxt.js? Как шарить API-клиент и перейти на TypeScript без боли? Как устроить собеседование во Frontend? Ответы на все эти вопросы есть в докладах с прошедшего frontend meetup. Записи всех выступлений уже доступны на YouTube

Как мы сделали POS-систему для рынка Канады

Автоматизация HoReCa, канадский рынок, французский язык – достаточно одного из этих пунктов, чтобы понять, что это не самый ординарный проект для студии мобильной разработки из Санкт-Петербурга. Но так получилось, что ещё в 2012 году мы создали сервис, который помог одной канадской кофейне справляться наплывом посетителей, а к текущему моменту он…

Не только лишь смартфоны в нашем парке тестовых устройств Александра Красножен
Исследователи нашли в Google Play сканер QR-кодов с вирусом, крадущим данные банковских приложений Статьи редакции

Программа может получить доступ к информации клиентов «Сбера», «Тинькоффа», ВТБ и других банков.

Эксперимент: оформляем банковские карты без бумажных документов

Оформление затянулось, но проект все равно продолжили развивать.

Опыт involta: как найти IT-специалиста
Геймификация, Big Data и доставка за 10 минут — какие тренды ждут российский фудтех в 2022 году

Скоро экспресс-доставка будет занимать 10 минут, а сервисы сами определят, какую еду привезти домой

Операторы в России перестали продавать тарифы с безлимитным мобильным интернетом новым абонентам Статьи редакции

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

null