Как сделать понятный дизайн финтех-сервиса

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

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

В чем была проблема

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

Наш терминал в десктопном и мобильном виде.

Сперва мы сделали то, что Google сделал в сравнении с MS Word — добавили социальный аспект. Работу начали в 2011 году, когда html5/js дошел до уровня, позволяющего делать что-то подобное. Десктопные торговые терминалы разрабатывались в 90-х и 2000-х, и сильно устарели, там много устаревших инструментов, которые невозможно переносить 1 к 1.

Как выглядит олдскульный терминал InteractiveBrokers

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

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

Работа трейдера связана с быстрым принятием решений, в терминал приходит большое количество данных в реальном времени. Для принятия прибыльных решений у трейдера есть считанные секунды, поэтому если в интерфейсе что-то запаздывает или тормозит, все теряет смысл.

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

Решение проблемы

Наша цель — мощный инструмент, которым легко и приятно пользоваться. Поэтому у нас собственная дизайн-команда с продуктовым уклоном. Ежедневно мы анализируем проблемы и потребности пользователей, улучшаем действующий функционал и создаем новый для большого парка устройств. Веб, мобильный веб, iOS, Android. Платформа должна выглядеть так, чтобы юзер мог сфокусироваться на главной задаче и избежать расфокусировки внимания. Нам повезло, что у нас много юзеров, и на каждое изменение мы получаем много фидбэка.

Карточка торговой идеи на английском, японском и арабском языках.

Веб и мобильная панель размещения торгового ордера.

У нас работают сильные UI-дизайнеры, которые используют передовые средства разработки. Мы вдохновлялись топовыми веб-продуктами: Figma, InVision, cartodb, Trello.

Наши дизайнеры анализируют тысячи юскейсов от юзеров, статистику от команды аналитики. Рисуют десятки вариантов интерфейсов, прежде чем прийти к окончательнму варианту.

Для решения задач сервиса мы используем связку Sketch + Zeplin. В данный момент переходим на более прогрессивный инструмент Figma. Оба решения позволяют организовать эффективную командную работу и взаимодействие с фронтендом.

Zeplin — мост между дизайном и фронтендом.

Figma — будущее дизайна, TradingView уже использует ее.

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

Фрагмент дизайн-системы TradingView в Sketch.

Дизайн-система TradingView в Figma

Как и многие прогрессивные компании, мы использовали связку Sketch + Zeplin. Sketch— графический редактор, заточенный под разработку интерфейсов. Zeplin — удобный мост между дизайнерами и фронтендерами. Сейчас это стандарт продуктовой разработки. Sketch позволяет наладить эффективную работу внутри команды дизайна. А Zeplin делает удобной передачу макетов в разработку и обсуждение макетов всеми участниками процесса.

Но мы сделали еще шаг вперед и перешли на новый дизайн-инструмент Figma. Вот в чем его преимущества.

Командная работа

Главная особенность Фигмы в том, что это не программа, а веб-инструмент. Для того чтобы начать работу, нужно всего лишь зайти на figma.com и залогиниться. Да, создание дизайна происходит в браузере. Между Sketch и Figma можно провести такие же параллели, как между Word и Google Docs. Совместно работать в Google Docs в реальном времени над одним документом гораздо эффективнее, чем пересылать друг другу Word-файлы. С дизайном так же. Эффективность командной работы сильно выросла.

Мощная поддержка дизайн-системы

Дизайн-система — это набор компонентов и правил. Единый источник правды для дизайнеров и фронтендеров. Figma гораздо лучше, чем Sketch подходит для разработки и использования дизайн-системы.

Цветовые стили в Figma

В Figma можно использовать цветовые стили так же, как это делают фронтендеры. У нас цветовые стили даже называются так же, как у фронтендеров. Дизайнеры и фронтендеры разговаривают на одном языке.

Потрясающая гибкость в редактировании цвета. Однажды мы захотели поднять контраст фирменного синего цвета. Представьте, что вам нужно пройтись по всем 600 макетам в проекте и отредактировать все элементы, где использовался этот цвет. В Figma нам потребовалось отредактировать цветовой стиль в одном месте, и изменения автоматически применились ко всем макетам. Осталось проконтролировать, что фронтенд также отредактировал у себя цветовой стиль. Вуаля. В Sketch цветовые стили отсутствуют.

Кроме того, можно использовать текстовые стили. Мы отредактировали текстовый стиль основного текста в одном месте > размер основного текста автоматически изменился на всех макетах! Магия. Переиспользование. Скорость.

Компоненты

Это кирпичики, из которых UI-дизайнеры строят новые интерфейсы. Такой подход:

1. упрощает и ускоряет разработку новых интерфейсов, ведь новые интерфейсы собираются из готовых компонентов;
2. улучшает консистентность интерфейсов, что хорошо сказывается на пользовательском опыте. Все однотипные элементы выглядят и работают одинаково и привычно для пользователя;
3. ускоренное погружение новых дизайнеров;
4. фронтендеры переводят компоненты в код и также используют их. Ускорение фронтенд разработки;
5. дизайнеры вносят изменения в компонент. Они автоматически применяются ко всем макетам, где был использован этот компонент. Это позволяет непрерывно развивать и совершенствовать продукт мелкими итерациями;
6. компонентам мы задаем правила их изменения в зависимости от размера экрана. Это позволяет нарисовать компонент один раз, а под размер экрана он подстраивается автоматически.

Figma позволяет создавать компоненты и эффективно переиспользовать их. Меняем цвет в компоненте табов ордера — цвет изменился во всех местах, где был использован этот компонент табов.

Обратите внимание: ширина компонента табов в поп-апе и на телефоне разная. Но изменение цвета происходит везде. Потому что это один и тот же компонент, у которого прописаны правила изменения в зависимости от ширины.

Рассмотрим подробнее, как реагирует этот компонент на изменение ширины:

Напоминаю, это дизайн-инструмент а не верстка. В Figma дизайнеры при проектировании компонентов думают, как фронтендеры. Это очень хорошо сказывается на продукте.

Figma позволяет гибко настроить права внутри команды. Например, кто может редактировать дизайн-систему, а кто только пользоваться ей. У тимлида есть полный контроль над ситуацией.

Версионность

У Figma есть встроенная система контроля версий из коробки. У скетча нет.

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

Прозрачность работы

Тимлид всегда понимает, кто и над чем работает в данный момент.

***

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

Материалы по теме:

Что почитать, если вы хотите ориентироваться в UX

9 секретов UX, украденных у лучших экспертов

Все, что нужно знать о работе UX-дизайнера: главные вопросы

15 способов развлечь пользователя, пока он ждет загрузки сайта