Александр Каменяр, глава отдела дизайна в TradingView, рассказывает о том, как с помощью UX решить задачи финтех-сервиса.
Специфика торгово-аналитических терминалов в том, что инвестору нужно большое количество инструментов и данных для принятия прибыльных решений. В рамках одного экрана приходится размещать десятки тулзов и сотни опций, функциональности каждой из которых в обычном мире с запасом хватило бы на отдельный продукт.
К тому же, у трейдеров очень высокие запросы к производительности (отзывчивости интерфейса и скорости загрузки), что обычно вступает в прямой конфликт с количеством функционала.
Как сделать все это понятным для пользователя, особенно неподготовленного? Как сделать так, чтобы это быстро работало, учитывая что продуктом пользуется до миллиона человек одновременно, на разных браузерах и устройствах?
В чем была проблема
С чем мы столкнулись на старте: трейдеры обычно очень консервативны и суеверны, их привычки формируются годами, и они не любят что-то менять, если это работает. Рынки, на которых работают трейдеры (акции, индексы, фьючерсы, опционы, валюты, криптовалюты, облигации), требуют разные инструменты анализа: графики, индикаторы, инструменты рисования, портфель, календари, тестер стратегий, сканер, алерты, торговля. Отдельный челлендж в том, как это все разместить в мобильной версии, как выделить тот функционал, который нужен только на ней или не нужен в мобильной версии вовсе.
Наш терминал в десктопном и мобильном виде.
Сперва мы сделали то, что 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-дизайнеры строят новые интерфейсы. Такой подход:
- упрощает и ускоряет разработку новых интерфейсов, ведь новые интерфейсы собираются из готовых компонентов;
- улучшает консистентность интерфейсов, что хорошо сказывается на пользовательском опыте. Все однотипные элементы выглядят и работают одинаково и привычно для пользователя;
- ускоренное погружение новых дизайнеров;
- фронтендеры переводят компоненты в код и также используют их. Ускорение фронтенд разработки;
- дизайнеры вносят изменения в компонент. Они автоматически применяются ко всем макетам, где был использован этот компонент. Это позволяет непрерывно развивать и совершенствовать продукт мелкими итерациями;
- компонентам мы задаем правила их изменения в зависимости от размера экрана. Это позволяет нарисовать компонент один раз, а под размер экрана он подстраивается автоматически.
Figma позволяет создавать компоненты и эффективно переиспользовать их. Меняем цвет в компоненте табов ордера — цвет изменился во всех местах, где был использован этот компонент табов.
Обратите внимание: ширина компонента табов в поп-апе и на телефоне разная. Но изменение цвета происходит везде. Потому что это один и тот же компонент, у которого прописаны правила изменения в зависимости от ширины.
Рассмотрим подробнее, как реагирует этот компонент на изменение ширины:
Напоминаю, это дизайн-инструмент а не верстка. В Figma дизайнеры при проектировании компонентов думают, как фронтендеры. Это очень хорошо сказывается на продукте.
Figma позволяет гибко настроить права внутри команды. Например, кто может редактировать дизайн-систему, а кто только пользоваться ей. У тимлида есть полный контроль над ситуацией.
Версионность
У Figma есть встроенная система контроля версий из коробки. У скетча нет.
Всегда видно, кто и какие изменения вносил. Всегда можно откатиться к одной из прошлых версий. Всегда можно посмотреть, как выглядел какой-либо компонент раньше.
Прозрачность работы
Тимлид всегда понимает, кто и над чем работает в данный момент.
***
Современные средства дизайн-разработки, такие как Sketch и Figma, позволяют нам построить дизайн-процесс, близкий по структуре к фронтенд-разработке. В нашей дизайн-системе компоненты автоматически подстраиваются под необходимый размер экрана. Мы используем библиотеку цветовых и текстовых стилей, библиотеку компонентов. Все это позволяет гибко вносить изменения в любую часть проекта и тем самым постоянно совершенствовать продукт. Ведь идеального дизайна не существует, но наша цель — быть к нему максимально близко.
Материалы по теме:
Что почитать, если вы хотите ориентироваться в UX
9 секретов UX, украденных у лучших экспертов
Все, что нужно знать о работе UX-дизайнера: главные вопросы
15 способов развлечь пользователя, пока он ждет загрузки сайта
Нашли опечатку? Выделите текст и нажмите Ctrl + Enter
Материалы по теме
- Пройти курс «Выбор системы налогообложения»
- 1 Юзабилити: что это такое и для чего нужно
- 2 Как человек воспринимает визуальную информацию и как это можно использовать в бизнесе?
- 3 Архитектура мобильного приложения – что это, как правильно выбрать
- 4 5 фреймворков для построения дизайн-процессов в компании
ВОЗМОЖНОСТИ
28 января 2025
03 февраля 2025
28 февраля 2025