I am ready for a long road flight for work with a week- or months-long projects.
ПРИЗЫВ К УСТАНОВКЕ ПРИЛОЖЕНИЯ
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
76
ГАЙДЛАЙНОВ
Свое приложение есть уже у большинства крупных интернет-магазинов. На их сайтах мы можем встретить блоки с призывом к установке. Но меня поразило: насколько много компаний относятся к этому вопросу спустя рукава. Для многих это точка роста. В статье – ответы на вопрос о том, как этого роста достичь.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подпишитесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
СТРУКТУРА СТАТЬИ
Для удобства статью я разбил на блоки. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. РАЗМЕЩЕНИЕ БЛОКА
В футере
Если у компании есть свое приложение, по умолчанию блок со ссылками на него можно встретить в футере.
Блок на главной странице
Если ваша цель – повысить осведомленность о мобильном приложении, информацию о нем можно разместить в качестве полноценного блока в рамках главной страницы.
Отдельный лендинг
Некоторые интернет-магазины рассказывают о приложении более детально с помощью отдельного лендинга.
В шапке сайта
В некоторых случаях, чтобы повысить вероятность, что клиент заметит наличие у магазина своего приложения, ссылка на его лендинг специально выносится в шапку сайта.
Фиксированный блок
В мобильной версии для рекламы приложения часто используется фиксированный блок, позволяющий в любой момент его скачать.
Внизу экрана на мобильных?
Если в мобильной версии баннер расположить снизу, до него легче будет дотянуться. Но при этом он может стать чересчур навязчивым, закрывая собой меню в таббаре.
Блокировка экрана?
Еще одна спорная практика – полностью блокировать взаимодействие с сайтом до того, как клиент в явной форме не подтвердит, что не хочет скачивать приложение.
Страница подтверждения
Рассказать о приложении можно и на странице подтверждения заказа. Повысить шансы на установку можно, рассказав о более удобном трекинге статуса доставки.
Интерфейс проверки статуса
Во многих магазинах есть отдельный workflow проверки статуса заказа. Как и на странице подтверждения, здесь можно предложить ваш app, как более удобный метод проверки.
Email-рассылки
Информацию о приложении можно включать в ваши email-рассылки: как в виде ссылок в футере, так и в качестве полноценного контентного блока.
Offline-носители
Помимо цифровых каналов, вы также можете знакомить клиента с приложением на упаковке товара, пакетах, в магазинах, на поверхностях машин доставки и т.д.
Не виден, если приложение «сырое»
Не начинайте маркетинг приложения слишком рано. Если оно еще не доработано, у него низкий рейтинг, первое впечатление легко можно испортить.
2. ПРИЗЫВ К ДЕЙСТВИЮ
Добавлен
Добавьте к блоку с информацией о приложении заголовок, чтобы клиенту было более понятно, чему именно он посвящен.
Понятен
Из заголовка должно быть понятно, о чем этот блок. Если вы хотите, чтобы клиент скачал приложение, скажите об этом в явной форме.
Отталкивается от глагола
Вместо просто констатации факта, что у вас есть приложение, предложите клиенту скачать его, используя глагольную форму.
Highlight ценности
Помимо просто призыва скачать приложение, подсветите, какую ценность клиент получит, совершив целевое действие. Это может повысить шансы на установку.
Активация первого использования
Клиента можно в явной форме побудить к тому, чтобы воспользоваться приложением, предложив скидку или бонус за первый заказ, совершенный через него.
Highlight бесплатности
Ненавязчиво упомянув о том, что приложение бесплатно для скачивания, можно отработать возражения части клиентов, при этом никак не навредив всем остальным.
Highlight рейтинга
Если у вашего приложения высокий рейтинг, это можно дополнительно подсветить в рамках призыва к его скачиванию.
Highlight количества оценок
Если у приложения помимо высокого рейтинга еще и большое количество оценок, это также может сыграть роль социального доказательства и побудить клиента к установке.
Без дублирования
Призывая к скачиванию приложения в мобильной версии, убедитесь, что между блоками с призывом к действию не будет «конкуренции» и они не будут дублироваться.
Пояснение преимуществ
Если вы говорите, что в приложении удобнее заказывать, не будьте голословными: поясните, почему приложение удобнее, за счет каких функций или особенностей.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
3. HIGHLIGHT ПРИЛОЖЕНИЯ
Highlight интерфейса
Подсветив визуально привлекательный интерфейс приложения, вы можете повысить шансы на то, что клиент заинтересуется и скачает его.
Highlight страницы в магазине
Также можно подсветить следующий шаг при переходе по ссылкам – страницу приложения в сторе. Это будет полезно, если у него высокий рейтинг, и он виден.
Highlight иконки
Также в блоке можно разместить актуальную иконку приложения, с которой клиент встретится буквально на следующем шаге, перейдя в магазин по ссылке.
Анимация интерфейса
Вместо статичного изображения можно реализовать анимацию, показывающую интерфейс приложения в действии и подсвечивающую сразу несколько экранов.
В рамках устройства
Вместо того, чтобы показывать просто скриншот приложения, можно разместить его в рамках устройства. Это позволит добавить больше контекста.
Репрезентативно
Убедитесь, что на скриншоте вы подсвечиваете наиболее репрезентативный экран, который используется в рамках ключевого процесса работы с приложением.
В хорошем качестве
Если изображение вашего приложения загружено в плохом качестве, размыто и пикселит, как думаете, какое влияние это окажет на шансы его скачивания?
Достаточного размера
Разместите изображение интерфейса в достаточном размере, чтобы его легко было разглядеть. Особенно это касается просмотра с мобильных устройств.
Изображение актуально
Будь то страница в сторе или интерфейс приложения, своевременно обновляйте его в случае каких-либо изменений. Это позволит лучше управлять ожиданиями клиента.
Устройство релевантно
Если вы показываете изображения в рамках устройства, как и в случае со сторами, отображайте устройство в картинке на основе операционной системы клиента.
Устройство актуально
Мир не стоит на месте и новые модели устройств выходят каждый год. Поэтому хорошей практикой будет своевременно обновлять дизайн рамки до флагманской модели.
4. ЛЕНДИНГ ПРИЛОЖЕНИЯ
Реализован
Чтобы лучше донести ценность, которую клиент получит от использования приложения и повысить шансы на установку, на сайте можно реализовать отдельный лендинг.
Содержит визуальные компоненты
Снабдите текстовые описания скриншотами и иллюстрациями. Иначе есть риск потерять внимание клиента. Особенно это важно в случае, если клиент – визуал.
Рассказывает о функционале
Подсветите в рамках лендинга ключевые функции вашего приложения, которые сделают жизнь клиента удобнее.
Отвечает на вопросы клиента
Соберите ключевые вопросы, которые задают / могут задать клиенты и ответьте на них в рамках лендинга, чтобы повысить шансы на скачивание приложения.
Содержит свежие обновления
Если обновления в функционале приложения заметно улучшают клиентский опыт, об этом также можно упомянуть. Но, в отличии от примера, более кратко и визуально.
Содержит доп.мотиваторы
Эффективность лендинговой страницы можно повысить, внедрив в нее дополнительные мотиваторы к установке: например, рассказав о промокоде на первый заказ.
Заканчивается блоком СТА
Закончите лендинг о приложении явным призывом к его скачиванию с ярко выраженным QR-кодом (версия для ПК) или кнопкой (мобильная версия).
5. КНОПКИ СТОРОВ
Приложение доступно везде
В идеале, ваше приложение должно быть доступно во всех магазинах приложений: AppStore, Google Play, Galaxy Store, App Gallery, RuStore, NashStore.
Кнопки общепринятые
Базовый момент: чтобы суть кнопки была максимально понятна, следуйте гайдлайнам от сторов. В этом примере об актуальных гайдлайнах Apple, видимо, не слышали:
В хорошем качестве
Загрузите иконки сторов в хорошем качестве, чтобы не добавлять негатива в общее впечатление клиента о сайте.
Обособлены
По возможности уберите лишний визуальный шум. Сделайте кнопки сторов визуально обособленными, чтобы они воспринимались, как самостоятельный блок.
Видны по умолчанию
Сделайте кнопки видимыми по умолчанию. Иначе приложение будет менее заметно, а клиенту придется совершать для его скачивания дополнительные действия.
Верстка кнопок корректна
Если вы используете для кнопок не картинки, а код, убедитесь, что их верстка корректна и они выглядят единообразно в плане размера и расположения элементов.
Шрифты корректны
Также убедитесь, что шрифт в текстах кнопок отображается корректно. В примере Times New Roman – вероятно, не совсем тот шрифт, который изначально предполагался:
На языке клиента
Текст в кнопках сторов должен быть на том же языке, что и язык интерфейса, с которым взаимодействует пользователь.
Не слишком мелкие
Если кнопки слишком мелкие, это может не только затруднить их восприятие на десктопе, но и повысить шансы промаха при нажатии на них в мобильной версии.
Ничем не перекрываются
Спроектируйте интерфейс так, чтобы кнопки не перекрывались другими объектами. В примере, пытаясь перейти в AppStore, клиент по ошибке может открыть чат:
Не кликабельны на ПК
Зачем делать кнопки кликабельными на ПК? Чтобы клиент перешел и понял, что версии для ПК нет? Это имеет смысл, только если есть версия приложения для ПК.