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