Каким должно быть приложение для криптобиржи: наш опыт разработки

Разбираем, что нужно пользователю от приложения криптобиржи и какие ошибки в нём бесят больше всего.

В 2017 году, когда биткоин ещё был дорогим, к нам обратились представители криптовалютной биржи Twim. Им нужно было разработать мобильное приложение. Базовые требования, которые озвучил заказчик — удобный интерфейс и ориентация одновременно и на новичков, и на трейдеров-профессионалов.

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

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

Как мы изучали рынок

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

Чтобы понять, как сделать хорошее приложение, мы попросили CTO Twim Илью Логинова прочитать нам несколько лекций о том, как работают криптобиржи.

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

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

Особенности приложений для криптобиржи

Главное, что необходимо любому трейдеру — чтобы приложение было удобным, работало быстро и без ошибок. На бирже, где цена может поменяться несколько раз за секунду, «тормозящее» приложение — полный провал: пользователи потеряют деньги и время, а потом и вовсе уйдут на другую биржу, где таких проблем нет.

Для Twim мы разработали нативные приложения для iOS и Android. Использовали стандартную для индустрии архитектуру, в которую внесли некоторые дополнительные элементы. Стандартная схема удобна для разработчика: заранее понятно, как писать код, как приложение поведёт себя в разных бизнес-сценариях и как упростить автотестирование. Каждый элемент архитектуры задокументирован, поэтому команде заказчика, которая будет поддерживать приложение, будет просто с ним работать.

1. Приложение должно работать и с телефона, и с планшета

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

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

Для смартфона нужны только базовые возможности: стоимость портфеля, котировки криптовалют, совершённые операции

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

Интерфейс для планшета в приложении Twim

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

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

2. Приложение должно быть удобным

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

Вот, например, отзыв пользователя о начале работы с приложением Binance.

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

На создание UX Twim мы потратили около двух месяцев.

Прототип интерфейса для Twim

3. Чем отличается дизайн приложения для криптобиржи

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

Пример оформления в чёрной теме — так выглядят экраны криптобирж Binance и Bitfinex

Например, приложения крупнейших криптобирж Binance и Bitfinex оформлены в чёрной теме. А вот ориентированная на рынок России и стран СНГ криптобиржа EXMO поддерживает сразу 2 режима — у них есть возможность переключиться с тёмной «ночной» темы на светлую «дневную».

В мобильном приложении EXMO можно выбрать удобную тему

Для Twim мы выбрали тёмную тему. Остальные элементы сделали выделяющимися и контрастными. Кнопки — жёлто-оранжевыми, потому что этот цвет хорошо виден на тëмном фоне. Для шрифтов выбрали белый, но определённой степени интенсивности.

Такой дизайн интерфейса разработал Surf

4. Графики — важная часть приложения для криптобиржи

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

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

С технической точки зрения процесс отображения графиков в биржевом приложении не так прост, как кажется. Для отображения графиков из TradingView нам понадобился компонент WebView. Он позволяет встраивать web-страницы в Android-приложения. Чтобы графики корректно показывались и на IOS, и на Android устройствах, мы написали дополнительные обработки — нативные обертки на Swift и Kotlin.

Процесс выглядел так.

  1. Данные от сервера биржи по протоколу для удалённой передачи данных gRPC передавались в TradingView.
  2. Там они преобразовывались в графики и отправлялись в приложение через WebView.
  3. В зависимости от того, каким устройством пользуется трейдер, iOS или Android, использовалась нужная нативная обёртка.
Графики в Twim отображаются в том же дизайне, в каком оформлено приложение

С какими проблемами мы столкнулись и как их решали

Низкая скорость передачи данных

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

Вот как реагировали пользователи на то, что в приложении Binance после обновления временно снизилась скорость работы.

Как мы решали эту проблему?

При разработке приложения мы стремились сохранить высокую скорость передачи данных — они должны были обновляться до 20 раз в секунду. Поэтому вместо REST мы использовали связку из gRPC, HTTP/2 и буферов протоколов (protobuf).

Вот как это работало. gRPC — высокопроизводительный фреймфорк для удалённого вызова процедур от Google. С его помощью приложение передавало потоки данных — котировки криптовалют — от сервера к клиенту и обратно. Протокол HTTP/2 преобразовывал данные в бинарный вид. Это экономило трафик и повышало скорость их передачи.

Протокол сериализации protobuf стал альтернативой JSON. Он упаковывал данные для клиента и сервера и делал это очень быстро, так как они были в бинарном виде, оптимизированы под минимальный размер сообщения.

В 2017 году, когда мы делали приложение для Twim, Android корректно работал с gRPC, так как уже были стабильные библиотеки. А вот для iOS мы написали интерпретатор, который генерировал сущности на языке Swift, на котором писали приложение для iOS. Сейчас в такой прослойке необходимости нет, так как разработчики уже сделали реализацию для Swift.

Перегрев аккумулятора устройства и мерцание экрана

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

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

Как мы решали эту проблему?

Мы сложили данные в стек — можно сравнить со списком или стопкой. Пока интерфейс отрисовывает новые данные, с сервера приходят ещё обновления, они последовательно складываются в наш «список»-стек. Когда UI обращается за новыми данными, он берёт последнее, самое актуальное обновление, и рисует его. Так процессор успевает переработать информацию, а аккумулятор работает в нормальном режиме.

Итог: что важно в мобильном приложении криптобиржи

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

Мы разрабатывали и другие приложения для финтех сектора. Если вам интересно почитать про наши проекты, заходите на наш сайт. Если появились вопросы по разработке приложения для Twim, пишите в комментариях, будем рады ответить. Кстати, весь код мы публикуем в публичных репозиториях: репозиторий iOS команды Surf и репозиторий Android команды Surf.

0
25 комментариев
Написать комментарий...
Илья Дёмин

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

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

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

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

Cum-unity

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

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

Развернуть ветку
Илья Дёмин

Да, там есть люди, которые регулярно выкладывают ролики. На них можно подписываться (удобно следить за новинками), писать комментарии (некоторые правильно реагируют на недостатки и исправляют их в дальнейшем) и т.д.

Это как Ютуб.

Ответить
Развернуть ветку
Иван Шеметов

Интересный у вас аналог ютюба 

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

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

Развернуть ветку
Dmitriy Nikitin

Интересный способ разогреть руку: посмотреть на тех кто подписан, почитать комменты, посмотреть новинки, запостить пару своих мыслей, НО ВОТ ПОСЛЕ ЭТОГО-О-О-О КАК СЛЕДУЕТ всё.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В-третьих, каждое приложение для криптовалютной торговли отвечает определённой бизнес-цели. Например, азиатские биржи - это инструмент перочинный нож, в них есть вообще всё. Американские же биржи имеют либо урезанный функционал, либо нарочито кусочный (например, Robinhood). Да, я делаю поправку на 2017-й год.

Я это всё к чему. Слежу за вашими кейсами в банковской сфере, и там как раз-таки всё круто. Ожидал и от этого кейса более глубокого погружения, но разочаровался. 

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

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

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

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

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

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

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

ну и каким же должно оно быть? с точки зрения UX/UI сделали копию уже имеющихся приложений, никаких фишек нет. скучно.

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

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

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

Поправили. Спасибо вам за внимательность!

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

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

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

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

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

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

Развернуть ветку
Yar Chik

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

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

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

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

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

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

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

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

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

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

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

Развернуть ветку
Иван Шеметов
Ответить
Развернуть ветку
Дмитрий Гребенюк

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

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

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

Развернуть ветку
Георгий Хромченко

Я честно говоря подумал что всякие котировки должны быть как каналы в RabbitMQ, чем-то не подходит?

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

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

Развернуть ветку
Иван Шеметов

@Инспектор они реально умнеют

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

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

Развернуть ветку
Иван Шеметов

@Инспектор мне мстят

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

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

Развернуть ветку
Аполлон Степанов

Спасибо за статью, было интересно читать.

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

Ошибки приносящие убыток. 

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

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

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

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

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

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

Развернуть ветку
Аккаунт отморожен

Вы из какого года и какой Вселенной пишете, если в 17-м биток «ещё был дорогим», а Binance не было и можно было пилить свою криптобиржу?

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

Лучше Бинанса навряд ли получится что то придумать

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

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

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

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

Развернуть ветку
Vyacheslav Teplyakov

Копия приложения финам на 99%
Это не плохо на самом деле, ибо оно не плохое.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Развернуть ветку
Михаил Кононов

Господа, не потому что Хейтер, стараюсь донести до людей, что с этой биржей нельзя иметь дел, от слова СОВСЕМ!!! Кидают на деньги, пишу так как сам попал на круглую сумму!!! Начинают отписываться стандартными фразами, а потом просто извините, так получилось... 

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

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

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