Галерея товара на телефоне: она слушается пальца, а не страницы
Больше половины покупателей открывают карточку товара с телефона. И первое, что они делают, — трогают фото: листают, тянут, разводят пальцами. Обычная галерея отвечает на это с опозданием, прыжками страницы и увеличением всего экрана разом. Мы разобрали, что с этим делать, и показываем четыре решения на живом проекте: Nectar Lingerie, магазин белья и домашней одежды с собственным производством.
5 минут чтенияИнтернет-магазины
Фото идёт за пальцем, а страница стоит на месте
С телефона карточку товара не читают, а трогают: провёл пальцем — увидел следующее фото. И вот тут обычная галерея подводит сразу по нескольким пунктам. Фото не двигается, пока палец не оторвёшь. Следующий кадр появляется не сразу, а после серой заглушки. А если у него другие пропорции, страница подпрыгивает, и кнопка «В корзину» уезжает из-под большого пальца. Мы сделали иначе: жест ведёт сама галерея. Лента с фото движется вместе с пальцем, короткий резкий взмах листает так же уверенно, как долгое протягивание, а листать можно по кругу в обе стороны, с какого кадра ни начни.
- Соседние кадры уже загружены. Пока человек разглядывает текущее фото, браузер тихо подтягивает предыдущее и следующее, так что переключение происходит мгновенно, без серого прямоугольника. Подгрузка начинается с небольшой паузой и только когда вкладка открыта: то, что человек смотрит прямо сейчас, важнее.
- Рамка не меняет высоту. Она задаётся по первому кадру и дальше не пересчитывается. Поэтому при листании всё, что находится под фото, остаётся там, где было.
- Листать можно и касанием. Нажали на левую половину фото — предыдущий кадр, на правую — следующий. Нажатая половина на миг подсвечивается: видно, куда попал палец.
Полоски вместо точек: понятно, где ты, даже когда фотографий шестьдесят
Под фото обычно рисуют ряд точек, по одной на кадр. Пока фотографий десять, это терпимо. Но у товара бывает и шестьдесят кадров, и тогда точки сливаются в серый частокол во всю ширину экрана: где ты сейчас, не разобрать. Мы заменили точки полосками, как в сторис. На экране видно только семь, лента с полосками едет вслед за активной, а крайние в окне бледнеют: сразу понятно, что кадры на этом не заканчиваются. Просмотренные полоски залиты целиком, будущие пустые, а по активной бежит прогресс.
- Галерея листает сама. Только на телефоне и только пока на неё смотрят. Кадр держится четыре секунды, и ровно столько же бежит прогресс в полоске. Разойтись они не могут: кадр меняется в тот момент, когда полоска заполняется до конца.
- И вовремя останавливается. Пока палец лежит на фото, автолистание стоит. Стоит оно и когда вкладка свёрнута или галерея ушла за край экрана. А если в настройках телефона включено «меньше движения», листать само оно не будет вовсе.
Щипок увеличивает фото, а не всю страницу
Ткань, шов, фурнитуру хочется разглядеть поближе. Покупатель делает то, что привык делать в телефоне: разводит два пальца. На обычном сайте в ответ увеличивается вся страница целиком. Шапка, цена и кнопка «В корзину» уплывают за край экрана, и потом приходится тем же щипком сжимать всё обратно. У нас растёт только фото, внутри своей рамки, до четырёх раз. Страница при этом никуда не девается. Увеличенное фото можно двигать одним пальцем, но за края рамки оно не выезжает: там пусто, смотреть нечего. Одно касание возвращает исходный размер, смена кадра тоже всё сбрасывает. Для увеличенного кадра подгружается самая большая версия файла, так что детали видны по-настоящему.
Частые вопросы про галерею товара
Чем ваша галерея отличается от обычной карусели в шаблоне магазина?
Обычная карусель реагирует уже после того, как палец оторвали от экрана. Наша ведёт фото вместе с пальцем, заранее подгружает соседние кадры, держит высоту рамки, чтобы страница не прыгала, показывает положение полосками с прогрессом, а по щипку увеличивает только фото, а не всю страницу.
Что будет, если у товара очень много фото?
Индикатор показывает только семь полосок и едет вслед за активной, крайние бледнеют, так что видно: кадры продолжаются. При этом на странице одновременно живут всего три кадра, предыдущий, текущий и следующий. Поэтому товар с шестьюдесятью фото открывается не тяжелее, чем с тремя.
Автолистание не раздражает покупателя?
Оно включается только на телефоне и только пока на галерею смотрят. Под пальцем замирает, при свёрнутой вкладке и когда галерея ушла за край экрана тоже, а если в настройках телефона включено «меньше движения», не запускается вовсе.
Работает ли увеличение щипком на любом телефоне?
Да, это тот же жест двумя пальцами, который понимает любой телефон. Разница в том, что увеличивается фото внутри своей рамки, а не страница целиком, и для увеличенного кадра подгружается большой файл.
Это входит в стоимость магазина или делается отдельно?
Входит. Такая галерея стоит в карточке товара каждого магазина, который мы делаем и ведём по подписке.