Тендеры и лиды
Информация
Всем привет! С вами команда KISLOROD. Мы занимаемся разработкой и развитием интернет-магазинов.
Мы разобрали приложения «Золотое Яблоко», «Лэтуаль», «Рив Гош», «ИЛЬ ДЕ БОТЭ» и «Парфюм-Лидер» и собрали 40 решений из их интерфейсов: как они устроены и какие проблемы клиентов помогают решить.
После регистрации приложение коротко рассказывает о доставке, подарках и программе лояльности. Слайды отвечают на вопросы, которые могли возникнуть у нового покупателя: куда привезут заказ, как работают бонусы, есть ли порог бесплатной доставки. Их можно пропустить и вернуться к выбору товаров.
Если человек уже открыл каталог, длинное знакомство с магазином только задержит его. На первых экранах нужны условия, которые повлияют на покупку, а не общие обещания выгоды.
Приложение предлагает включить пуш-уведомления и сразу говорит, о чем напишет: статус заказа, доставка, акции. Покупателю проще решить, нужны ли они, когда перед ним конкретные примеры сообщений.
Уведомление об отправке заказа и реклама распродажи решают разные задачи. Полезно дать человеку настроить их отдельно. Системный запрос разрешения лучше показывать в момент, когда польза уведомлений уже понятна.
На главном экране приложение предлагает указать адрес или определить местоположение. По выбранному адресу оно уточняет доступные варианты доставки, ее стоимость и ассортимент. Запрос можно отложить, если покупатель пока просматривает каталог.
Доступ к геопозиции сокращает ввод адреса, но не обязателен: косметику можно заказать домой, в офис или другому человеку, поэтому рядом нужен ручной ввод и возможность быстро поменять сохраненный адрес.
Внизу экрана размещены «Главная», «Каталог», «Избранное», «Корзина» и «Профиль». Иконки подписаны, текущий раздел выделен. Пока покупатель сравнивает товары, он может вернуться к сохраненным средствам или проверить корзину без пути через главное меню.
Здесь важнее понятный состав панели, чем число кнопок: редко используемые разделы займут место у каталога и корзины.
Сканер рядом со строкой поиска открывает камеру. Покупатель наводит ее на упаковку, приложение ищет совпадение в каталоге и показывает карточку. В магазине так можно проверить описание и цену в приложении; дома — найти средство, которое заканчивается.
Штрихкод не гарантирует совпадения: товара может не быть в каталоге или в наличии по выбранному адресу. На этот случай стоит оставить поиск по названию. Цена в приложении также может отличаться от ценника в магазине.
Покупатель входит по номеру телефона с кодом подтверждения или через предложенный сервис авторизации. Пароль для отдельного аккаунта магазина придумывать не приходится.
Способ входа должен вести к одному и тому же профилю с заказами и бонусами. Иначе человек, однажды вошедший по телефону, а позже через внешний сервис, рискует получить два разных аккаунта. До оформления заказа каталог можно оставить доступным без входа.
Покупатель пишет «крем для чувствительной кожи без отдушки» и получает товары с подходящими характеристиками. Ему не нужно заранее знать марку или точное название линейки. Поиск может учитывать синонимы и формулировки на обычном языке.
Ответы стоит связывать с проверяемыми свойствами товаров. Запрос «после процедуры» или «от выпадения волос» не дает системе права обещать лечебный эффект. Если подходящих средств нет, лучше показать это прямо и предложить уточнить критерии.
Каталог можно открыть по типу товара — уход, макияж, парфюмерия — или перейти к списку марок. Тому, кто ищет тональную основу, удобен первый путь. Тот, кто пришел за определенным брендом, сразу увидит его ассортимент.
Эти способы навигации отвечают на разные запросы и не должны заставлять покупателя повторно собирать фильтры после перехода между ними.
В меню рядом с названием раздела стоит небольшая иконка или фотография. Она помогает заметить нужную категорию при беглом просмотре. Для похожих разделов изображения должны различаться. Если все пункты обозначены одинаковыми баночками, меню будет трудно просматривать.
На отдельных карточках каталога запускается видео без звука: например, можно увидеть консистенцию крема или оттенок помады при нанесении. Воспроизведение останавливается, когда карточка уходит с экрана; покупатель может остановить ролик сам.
Видео пригодится там, где движение раскрывает товар лучше фотографии. Но автозапуск на каждой карточке затруднит просмотр ленты и увеличит расход трафика.
В каталоге покупатель свайпом просматривает несколько снимков товара. На них можно показать флакон с разных сторон, аппликатор или оттенок на коже; точки под фотографией подскажут, сколько кадров осталось.
Так часть вопросов решается прямо в списке товаров. Но миниатюра не подходит для чтения состава, а горизонтальный свайп не должен мешать вертикальной прокрутке каталога.
В длинном списке брендов или ингредиентов есть собственная строка поиска. Покупатель вводит часть названия и сразу видит подходящие пункты фильтра, сохраняя уже выбранные параметры.
Это полезно, когда марок много и человек точно знает, какая ему нужна. Поиск должен работать именно по значениям открытого фильтра, чтобы его не путали с поиском товаров во всем каталоге.
Над списком параметров видны отметки: бренд, цена, тип кожи и другие условия поиска. Ненужную отметку можно снять отдельно, не сбрасывая остальные.
Когда подходящих товаров не оказалось, покупатель сразу видит, какое сочетание сузило выдачу. Не нужно снова открывать каждый раздел фильтра и искать расставленные галочки.
После нажатия «В корзину» приложение предлагает выбрать вариант товара прямо поверх списка: оттенок помады, объем духов или цвет туши, только после выбора нужная позиция попадает в заказ.
Если молча добавлять вариант по умолчанию, ошибку покупатель заметит уже в корзине или после доставки. В окне выбора должны быть видны цена и наличие каждого варианта.
После добавления товара клиент видит кнопки «+» и «−». Покупатель сразу замечает выбранное количество и может его поправить без перехода в корзину.
Так удобно покупать несколько одинаковых средств для семьи или в запас. Счетчик должен учитывать доступный остаток и обновлять корзину, иначе число на карточке и состав заказа разойдутся.
При прокрутке длинного каталога кнопки «Фильтр» и «Сортировка» остаются сверху или появляются вновь при движении вверх. Увидев много неподходящих товаров, покупатель может уточнить выдачу на месте.
Закрепленный блок не должен закрывать фотографии и названия. Если он слишком высокий, на небольшом экране почти не останется места для товаров.
Над каталогом расположена строка с короткими фильтрами: цена, скидки, срок доставки. Можно выбрать один параметр сразу или открыть полный список условий.
Набор быстрых фильтров зависит от раздела. В парфюмерии покупателю может пригодиться объем, в декоративной косметике — оттенок. Активный фильтр должен быть виден, чтобы человек понимал, почему часть товаров исчезла из списка.
Есть задача на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR? Создайте тендер и выберите подходящего исполнителя из откликов.
Заполнить заявку
13843 тендера
проведено за восемь лет работы нашего сайта.
Рядом со скидкой можно открыть расчет: исходная цена, акция, примененный промокод, списанные бонусы. Покупатель видит, из чего сложилась сумма и что еще изменится при оформлении.
Доступные бонусы не равны списанным, а персональный купон может действовать только при определенной сумме заказа. Эти условия лучше показать до оплаты, чтобы цена в карточке не расходилась с ценой в корзине без объяснения.
Покупатель листает фотографии, описание, состав и отзывы, а кнопка «В корзину» остается внизу карточки. Вернуться к началу страницы ради покупки не приходится.
Кнопка должна показывать выбранный оттенок или объем либо открывать их выбор. Иначе удобный переход ускорит покупку не того варианта. На небольшом экране закрепленный блок также не должен закрывать текст и другие действия.
Если покупатель сделал скриншот карточки, приложение может предложить поделиться ссылкой на этот товар. По ссылке другой человек откроет актуальную карточку с вариантами, ценой и наличием по своему адресу.
Скриншот не всегда делают для отправки: иногда сохраняют состав или оттенок для себя. Предложение должно легко закрываться и не перехватывать сам снимок.
Кнопка «Похожие» открывает товары той же категории с близкими свойствами или ценой. Она пригодится, если нужного оттенка нет, состав не подошел или покупатель хочет сравнить несколько средств.
Сходство стоит объяснять: один аромат может быть близок по семейству, но заметно отличаться по цене и стойкости. Список «похожих» без понятного признака превращается в еще одну рекламную полку.
Пока покупатель прокручивает описание, блок с изображениями остается сверху. Можно еще раз посмотреть оттенок или упаковку, не возвращаясь к началу карточки.
У такого решения есть цена: крупная фотография отнимает место у состава и отзывов. На небольшом экране блок лучше уменьшать при прокрутке или давать возможность скрыть его.
Объемы духов или оттенки одной помады можно переключать внутри карточки. При смене варианта приложение обновляет фотографию, цену и наличие; покупатель видит, что именно попадет в корзину.
Так проще сравнить 30 и 50 мл одного аромата. Отзывы можно показывать вместе, но вариант покупки стоит отмечать: комментарий о стойкости аромата пригодится всем, а фотография конкретного оттенка — тем, кто выбирает его.
Рядом с «В корзину» размещена кнопка «Купить сейчас». Она ведет к оформлению выбранного товара, когда покупатель пришел за одним средством и не собирается просматривать каталог дальше.
Перед оплатой все равно нужно проверить вариант, количество, адрес и доставку. Если в корзине уже лежат другие товары, приложение должно ясно показать, попадут ли они в этот заказ.
В карточке указаны ближайший срок и стоимость доставки, а также магазины, где товар можно купить или забрать. Подробности открываются по нажатию: адреса точек, часы работы, условия самовывоза.
Покупатель может выбрать между доставкой и поездкой в магазин до добавления товара в корзину. Срок и остатки зависят от адреса и меняются; наличие на полке само по себе не означает, что товар зарезервирован для покупателя.
Покупатель, который уже пользовался средством, отвечает на несколько конкретных вопросов: например, понравился ли запах и ощущал ли он стянутость после применения. В карточке можно показать распределение ответов.
Проценты без количества участников мало что говорят. Формулировки вопросов тоже важны: субъективное «приятный запах» не следует превращать в обещание, что средство подойдет каждому. Опрос дополняет развернутые отзывы, когда покупателю нужны впечатления по отдельному свойству.
Рядом с рейтингом указано, сколько покупателей оценили товар. Отзывы можно отсортировать: сначала новые, с высокой или низкой оценкой. Так человек быстрее найдет сообщения о нужном ему опыте использования.
Одинаковые звезды у товаров с пятью и пятью тысячами отзывов дают разную опору для выбора. Число оценок и возможность посмотреть критические комментарии помогают прочитать рейтинг без догадок.
В отзыве покупатель может показать упаковку, свотч помады или консистенцию крема. Медиа доступны в общем списке и отдельной подборке, если человек хочет сначала посмотреть фотографии.
Снимки помогают оценить оттенок и текстуру вне студийной съемки. При этом освещение и камера меняют цвет, а фотография «до и после» не доказывает эффективность средства. Полезно указывать вариант товара, к которому относится отзыв.
После добавления товара на иконке корзины обновляется число. Покупатель видит, что действие сработало, даже когда остается в каталоге.
Важно считать одинаково во всем приложении: либо позиции, либо общее число единиц. Бейдж не расскажет, какие оттенки выбраны и не добавился ли товар дважды; для этого нужна сама корзина.
Кнопка «Поделиться» создает ссылку на выбранные товары с их вариантами и количеством. Получатель открывает список и решает, какие позиции добавить в свой заказ. Так можно передать подборку средств близкому человеку без скриншотов и переписывания названий.
По ссылке не должны открываться адрес, контакты и способ оплаты отправителя. Цены и наличие нужно обновить для получателя. Совместное редактирование и объединение двух корзин — отдельные возможности, сама ссылка их не создает.
В корзине указано, сколько осталось до бесплатной доставки. Если покупатель решил добавить еще один товар, он видит сумму без самостоятельного подсчета. После пересечения порога сообщение обновляется.
Расчет должен учитывать реальные условия: регион, способ доставки, скидки и товары, которые не входят в акцию. Иначе обещание «доставка бесплатно» исчезнет на следующем шаге.
Рядом с полем ввода кода покупатель видит свои купоны и акции магазина. У каждого предложения указаны срок и условия. Подходящий к текущей корзине промокод применяется нажатием, после чего сумма пересчитывается.
Купон за день рождения может быть доступен в профиле, но не подходить к выбранным товарам. Такие случаи стоит разделять и объяснять, почему скидка пока не действует. Бонусы, которые покупатель решит списать, лучше показывать отдельно от промокодов.
Рядом с позицией в корзине может появиться точное количество доступных единиц. Это полезно, если покупатель собирается заказать несколько штук или хочет понять, почему нельзя увеличить количество.
Остаток должен быть связан с актуальным складом и часто обновляться. Надпись «осталось 5» не резервирует товар; использовать ее ради искусственной срочности опасно — покупатель быстро заметит расхождение при оформлении.
Пока покупатель просматривает длинную корзину, внизу экрана видны итоговая сумма и кнопка «Оформить заказ». При изменении количества или применении скидки сумма обновляется на месте.
Если адрес и способ доставки еще не выбраны, нужно подписать, что именно входит в показанную сумму. Панель не должна закрывать последние товары или условия акции, которые покупатель проверяет перед оплатой.
Галочки у позиций дают выбрать, что купить сейчас. Остальные товары остаются в корзине для следующего заказа: например, крем закончился, а новый аромат пока можно отложить.
После снятия галочки приложение пересчитывает скидки, стоимость доставки и сумму к оплате только для выбранных товаров. Неотмеченные позиции не должны пропасть после завершения заказа.
Перед удалением приложение спрашивает, уверен ли покупатель в своем выборе. Это дает шанс сохранить товар, если он задел значок случайно или перепутал похожие позиции.
Для каждого товара отдельное подтверждение может замедлять очистку корзины. Если случайные удаления действительно часты, стоит сравнить такой диалог с более легким вариантом — удалить товар сразу и на несколько секунд показать «Вернуть».
Если позиция в корзине стала недоступной, рядом появляется «Найти похожие». Покупатель открывает альтернативы по типу средства, объему, оттенку или цене и сам выбирает замену.
Для косметики сходство особенно важно объяснить: похожий флакон не означает тот же состав или цвет. Перед подтверждением заказа приложение показывает новую цену и убирает недоступную позицию только после выбора покупателя.
Если оформление состоит из нескольких экранов, сверху видно, какой шаг открыт сейчас и что осталось: доставка, оплата, проверка заказа. Можно вернуться и исправить адрес или способ получения без потери уже введенных данных.
Индикатор полезен, когда шаги действительно есть. Дробить короткую форму на дополнительные экраны ради красивой шкалы прогресса покупателю ни к чему.
При оформлении покупатель выбирает дату и интервал из тех, которые доступны для его адреса и состава заказа. Выбранное время повторяется рядом с итоговой суммой перед оплатой.
Если интервал успели занять, приложение сообщает об этом до подтверждения заказа и предлагает другие варианты. Время нельзя менять молча после того, как покупатель его выбрал.
На последнем шаге покупатель видит доступные способы оплаты с понятными названиями: карта, СБП и другие варианты, которые поддерживает магазин. Списание бонусов показано отдельно, вместе с остатком и суммой, на которую оно повлияет.
Количество способов само по себе мало что решает. Покупателю нужны ясная сумма к оплате, условия оплаты частями, если она есть, и возможность вернуться к выбору способа, если первая попытка не прошла.
У каждого приложения свои узкие места. Выбирайте решения по данным поиска, оформления и обращений в поддержку. Результат покажут завершенные заказы, ошибки выбора и повторные покупки. Приглашаем на консультацию по UX-аудиту, изучим ваш бизнес и продукт, покажем, как можно вырасти и увеличить конверсию.
