Обложка

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

Недавно купил токенизированные акции SpaceX в кошельке Телеграма на 10 000 ₽. Спустя пару дней открываю приложение и вижу, что баланс просел на 475 ₽. Пытаюсь понять, по какому курсу я их вообще купил, и упираюсь в стену. Интерфейс скрыл эту цифру. Чтобы понять цену входа, пришлось буквально брать калькулятор.

Страница токена в Telegram Wallet

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

Экономия 30%, дизайн‑система неизменна, бэкенд не меняем

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

Однако интерфейс может и должен быть адаптивным. Если у юзера только 1 актив, не нужно на странице акций SpaceX каждый раз напоминать, что это SpaceX и уж тем более писать баланс и изменения по портфелю дважды за блок.

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

Строка «+0.00 SPCXx Получено» не говорит о том, сколько я потратил и по какому курсу была сделка

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

Адаптивный интерфейс истории транзакций

В первой попытке старался улучшить доступность без кардинального редизайна. Ключевой фишкой является свитчер валюты отображения, который я подсмотрел у Т‑Инвестиций и который уже используется Кошельком для отображения цены «За все время/За сегодня».

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

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

Версия во все тяжкие

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

В первой версии этого расширенного макета я вообще хотел передавать профит от сделки в формате красивой зеленой ↑ 11.71% плашки.

Отказался от такой красивой UI плюшки из‑за возможной дезинформации пользователя. Телеграм Кошелек раcсчитан как на опытного юзера, так и на рядового пользователя. Когда рядом с зеленым +124,6 USDT стоит ↑ 11.71%, для пользователя это значит: «Я заработал 124,6 доллара, и это принесло мне 11.71%».

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

Финальная версия блока транзакций

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

В финальном варианте я полностью переработал карточки с транзакциями. Покупка SpaceX означает то же самое, что и Exchanged USDT to SPCXx, но считывается быстрее.

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

Изначально хотел указывать стоимость за 1 акцию на момент покупки трейдерским символом @, но заменил на ≈ для широкой аудитории

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

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

Важно не делать отменённую транзакцию полностью красной, юзер может принять это за потерю/заморозку средств, а не отмену транзакции.

Цветовое решение для краевых состояний сделки

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

Первая версия редизайна всей страницы

В первой версии только поменял карточку актива с column на row. Одна строчка в css делает макет на 3% меньше и более читаемым за счет построчного сканирования элементов. Дизайн, как и раньше, остается дружелюбен к длинным названиям.

Бета версия всей страницы

В шапке мини аппа Телеграм Кошелька стабильно, наравне с навигацией, занимает место название приложения. Оно не несет информации для пользователя и возможности платформы позволяют сделать его адаптивным.

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

Бонус

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

Финальный интерфейс

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