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

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

Исходный экран состоит из трёх основных областей:

1. список валютных пар;

2. стакан;

3. область графиков.

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

Список валютных пар

Тут всё просто — это список курсов продажи разных монет. Например, название из первой строчки STXUSDT говорит что это цена монеты STX в USDT (стейбл-коин, привязанный к доллару США). В данном интерфейсе стоимость всех монет указана в отношении к одной и той же единице.

Наверху в списке есть инструменты работы со списком монет. Можно добавлять, удалять, передвигать их по списку. Из важных и не очевидных — настройка уведомлений. Помогает следить за курсом монеты и присылать уведомления при наступлении события.

Стакан

Про стакан проще посмотреть видео: https://www.youtube.com/watch?v=3DDw8uaydpM

Но постараюсь вкратце объяснить текстом

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

Например, на строчках ниже видно, что есть предложения о продаже 26 069,6 STX по цене 1,8330 USDT за штуку и о покупке 16 555,2 STX по цене 1,8270 USDT. 

Размер закрашенной области дополнительно визуализирует объём предложения, а масштаб выбирается пользователям в настройках (видео про настройку стакана)

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

Как пользуются стаканом в двух словах не объяснить. Если совсем кратко — смотрят на соотношение предложения и спроса и на основе появившихся больших лотов предсказывают движение цены в одну или в другую сторону. 

Графики

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

Диаграмма внизу графика показывает объём торгов за каждый интервал. 

Обычно на экран выведено сразу много графиков и все они важны для принятия решения. Как ими пользоваться с телефона — интересный вопрос. Можно придумать как минимум три разных схемы.

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

А где же кнопки

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

Как пользуются интерфейсом

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

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

Заключение

Чтобы разобраться в деталях как устроено приложение и как с ним работают — нужно копать сильно глубже, но я пока не стал, так как для задания воркаута таких вводных достаточно. Если вдруг у вас есть ссылки на статьи или видео с более подробным описанием — поделитесь ими в комментариях. Будет здорово собрать какой-то дайджест по теме.