Дизайн сайта финтех-компании: что должен доказать первый экран
Дизайн сайта финтех-компании решает одну задачу на первом экране: ещё до прокрутки доказать, что делает продукт, что он действительно работает, кто отвечает за деньги и какой шаг сделать дальше. thelegacy проектировала финтех- и крипто-сайты для Banxe, dEquity, Skynet Trading и ARUS. Ниже — как первый экран каждого из них отвечает на эти четыре вопроса.
Сайт — часть нашей услуги UX/UI и веб-дизайна. Эта статья о публичном сайте, который должен завоевать доверие посетителя. Экраны, которые человек видит после регистрации, разобраны в статье примеры дизайна финтех-приложений.
Что должен доказать первый экран финтех-сайта?
Четыре вещи, в таком порядке: что это за продукт, что он существует, кто за него отвечает и какой шаг сделать. Посетитель, который собирается отдать деньги или личные данные, проводит эту проверку за несколько секунд, и экран, пропустивший хотя бы один пункт, оставляет вопрос, на который некому ответить.
| Что спрашивает посетитель | Что должен показать экран | Как это сделано в наших кейсах |
|---|---|---|
| Что это и подходит ли мне? | Название и одну строку о том, что делает продукт, словами, которые посетитель уже знает | Banxe: Multifunctional trading App, а дальше режимы: Spot, Futures, P2P, DeFi, Fiat Gateway |
| Это действительно работает? | Живые данные или настоящий экран продукта, а не абстрактную иллюстрацию | dEquity: полоса с ценами криптовалют над заголовком; Skynet: превью клиентского дашборда на первом экране |
| Кто стоит за моими деньгами? | Простые слова о том, что это за компания и что она делает, команду, юридические страницы | Skynet: дисклеймер в подвале сайта и блок руководства на странице About |
| Что мне делать сейчас? | Одно главное действие и более тихое второе для тех, кто хочет сначала почитать | dEquity: оранжевая Create Account рядом с контурной Download White Paper |
Те же четыре вопроса касаются сайта необанка, криптобиржи или инвестиционной платформы. От продукта к продукту меняется только то, какой из них самый трудный. Для незнакомого актива это первый; для фирмы, которая касается средств клиентов, — третий.
Как одной строкой сказать, что делает финтех-продукт?
Назовите категорию, которую посетитель уже знает, а затем перечислите конкретику, за которой он пришёл. Остроумный слоган может идти вторым; первая строка должна работать для человека, который никогда не слышал о компании.
На главной Banxe название набрано широким чёрным шрифтом, а сразу под ним — Multifunctional trading App. Следующая строка называет режимы один за другим: Spot, Futures, P2P, DeFi, Fiat Gateway. Трейдер, который ищет фьючерсы или фиатный шлюз, находит нужное слово, не открывая меню. Справа над бледно-лавандовым фоном парят глянцевые шестиугольники с буквами продуктовых знаков, так что бренд-система появляется на том же экране, что и предложение.
dEquity продаёт менее привычную вещь: доли доходных зданий, выпущенные как токены. Его заголовок не начинается с токенов или NFT. Он говорит A New Way to Invest in Real Estate, то есть ставит знакомый актив первым, а новизну умещает в два слова. Блокчейн объясняется ниже, когда посетитель уже решил, что тема его касается.
Как доказать, что продукт настоящий, ещё до регистрации?
Положите на первый экран то, что может показать только работающий продукт: живые цены, реальный список предложений или снимок настоящего интерфейса. Абстрактная 3D-форма или стоковое фото ничего не доказывают о продукте за ними.
dEquity пускает тонкую полосу с ценами криптовалют вверху страницы, над заголовком, а первый раздел под первым экраном — Top offers to invest: здания с доходностью, ценой и маленьким графиком. Banxe делает то же на шаг ниже. Под первым экраном стоят ряд промобаннеров и карточки монет с текущей ценой, изменением за сутки и кнопкой Buy, а за ними — таблица рынка. Посетитель видит рынок раньше, чем читает какие-либо обещания о нём.
У B2B-фирмы продукт — это часто дашборд, который посетитель без аккаунта не увидит. Сайт Skynet Trading решает это так: на первом экране пять пилюль с услугами стоят прямо над превью клиентского дашборда. Эмитент токена, который ищет маркет-мейкера, видит инструмент, с которым будет работать, ещё до описания услуг.
Наше дизайнерское решение во всех трёх: если у продукта есть данные, главная картинка — это данные. Они конкретнее всего, что может нарисовать иллюстратор, и меняются каждый день, а это говорит посетителю, что продукт живой.
Где финтех-сайт показывает, кто стоит за деньгами?
Там, куда смотрит внимательный посетитель: в подвале, на странице About и в блоке команды. Формулировки там должны быть достаточно простыми, чтобы сказать, что компания делает и, не менее важно, чего она не делает.
Skynet Trading сдаёт в аренду торговое программное обеспечение и консультирует эмитентов токенов и биржи. В подвале её сайта — короткий дисклеймер моноширинным шрифтом сайта: фирма является технологическим провайдером и консультантом, никогда не берёт средства клиентов в управление и не ведёт маркет-мейкинг собственными средствами. Над ним — блок Schedule a meeting с календарём и ссылки Company и Legal. На странице About есть раздел Meet Our Management с людьми, которые стоят за фирмой.
Та же логика касается лицензий и банков-партнёров. Если продукт работает по лицензии или через банк-партнёр, раскрытие этого должно быть там, где посетитель принимает решение, а не только в пользовательском соглашении. Подробнее о таких сигналах доверия — в статье финтех-брендинг.
С какого призыва к действию начать главную финтех-сайта?
С одного главного действия в цвете действий бренда и максимум одного второстепенного, нарисованного тише. Две равноценные кнопки заставляют посетителя выбирать раньше, чем он готов.
- dEquity использует оранжевый только для действий. Create Account — залитая оранжевая кнопка; Download White Paper стоит рядом контуром, для инвестора, который хочет сначала почитать.
- Banxe начинает регистрацию на первом экране: поле для email или телефона и градиентная кнопка Join now рядом. Log in вверху справа в том же градиенте, так что постоянные пользователи находят его сразу.
- ARUS — это приложение, поэтому сайт ведёт людей в сторы. Кнопки App Store и Google Play стоят в шапке рядом с Log in / Sign up и повторяются в разделе About.
Правильное главное действие следует из бизнеса: бирже нужен аккаунт, инвестиционной платформе сначала может быть нужен звонок или скачивание white paper, а мобильному кошельку — установка.
На что должна отвечать остальная главная страница?
Сначала на ситуации, для которых существует продукт, потом на детали. Список функций отвечает на вопрос, который посетитель ещё не задал; знакомая ситуация заставляет его узнать свою потребность.
ARUS, криптокошелёк и обменник для небольших денежных переводов, показывает это хорошо. Первый экран крупным шрифтом подаёт полное название, Authorized Realtime User Swap, со словом Realtime кислотно-лаймовым, рядом фото руки у банкомата и карточка 24/7 cash. Боковое меню ведёт к About, Technology, Gems, Application, Partners и Contacts.
Раздел About обходится без списка функций. Вместо него он показывает читателю четыре жизненные ситуации: деньги, которые должны дойти до кого-то в субботу, кошелёк со всеми картами и наличными, потерянный в поездке, переезд за границу, когда местного счёта ещё нет, а семье нужно помогать, и желание иметь веб-кошелёк на блокчейне совсем без карты. Посетитель, узнавший себя хотя бы в одной, нашёл причину установить приложение.
Ниже страница партнёров принимает заявки в два шага, сначала юридический представитель, потом компания, так что бизнес-партнёр никогда не видит одну длинную форму.
Как финтех-сайт работает на телефоне?
Порядок доказательств остаётся тем же; макет складывается в одну колонку. На мобильном сайте dEquity первый экран, список предложений и страницы объектов идут в той же последовательности, что и на десктопе, так что посетитель и здесь видит живые данные раньше объяснений. В Banxe основные страницы биржи для мобильного веба разложили заново, а не просто уменьшили.
Первый экран проверяйте на ширине телефона в первую очередь. Заголовок, который помещается в две строки на десктопе, на телефоне может занять пять и вытолкнуть экран продукта и главную кнопку за пределы первого экрана.
Чек-лист дизайна финтех-сайта
- Первая строка под названием говорит, что делает продукт, словами самого посетителя.
- Конкретные режимы, активы или услуги названы на первом экране, а не спрятаны в меню.
- Живые данные или настоящий экран продукта есть на первом экране или сразу под ним.
- Одно главное действие в цвете действий; второе, если есть, заметно тише.
- Подвал и страница About прямо говорят, что компания делает и чего не делает с деньгами клиентов.
- Лицензии, банки-партнёры или дисклеймеры стоят там, где принимают решение, если они есть у продукта.
- Команда показана с именами в разделе About или в блоке руководства.
- Первый экран проверен на ширине телефона, и главная кнопка там видна.
Если вы выбираете агентство для дизайна финтех-сайта, попросите показать такие первые экраны и объяснить, как студия решала, что на них положить. Наш подход — на странице услуги UX/UI и веб-дизайна; о продуктовой части читайте паттерны UX-дизайна в финтехе.
Главное
- Первый экран финтех-сайта отвечает на четыре вопроса по порядку: что это за продукт, что он работает, кто стоит за деньгами и что делать дальше.
- Самая сильная главная картинка — живые данные: dEquity ставит цены криптовалют над заголовком, Banxe — карточки монет с кнопкой Buy сразу под первым экраном.
- Доверие дают простые слова: подвал Skynet говорит, чего фирма не делает со средствами клиентов, а ARUS заменяет список функций четырьмя реальными ситуациями.
Частые вопросы
Какие страницы нужны финтех-сайту на старте?
Главная, страница для каждого продукта или услуги, страница About с командой, контакты и юридические страницы: соглашение, конфиденциальность и раскрытия по лицензиям или рискам, если продукт их требует. Если комиссии влияют на решение, им тоже стоит дать отдельную страницу.
Светлая или тёмная тема лучше для финтех-сайта?
Может работать любая. Сайт dEquity светлый, а его торговый интерфейс имеет тёмных двойников; сайт Skynet сделан на тёмно-синем фоне. Выбирайте по тому, что делает посетитель: читать и сравнивать предложения легче на светлой странице, долго следить за графиками — на тёмной.
Стоит ли проектировать сайт и приложение вместе?
В идеале да, в одном визуальном языке. Приложение и сайт ARUS делят белый, графитовый и кислотно-лаймовый, а сайт, приложение и дек Banxe построены на одной системе шестиугольников. Человек, который установил приложение после сайта, не должен чувствовать, что попал в другую компанию.
Чего избегать на первом экране финтех-сайта?
Типовых стоковых фото, утверждений без доказательств вроде «самая безопасная платформа», нескольких равноценных кнопок и иллюстрации там, где должен быть продукт. Каждое из этого занимает место того, что могло бы доказать, что продукт настоящий.
Чем финтех-сайт отличается от обычного сайта стартапа?
Посетитель собирается доверить ему деньги или документы, поэтому сайт должен объяснить, кто отвечает и что происходит со средствами, а не только что делает продукт. Юридические страницы и раскрытия — часть дизайна, а не то, что добавляют в последний момент.
