I am ready for a long road flight for work with a week- or months-long projects.
Выбор города в интернет-магазине
90+ моментов, которые стоит учесть при проектировании
Функция выбора города есть в подавляющем большинстве интернет-магазинов. Почему? Потому что от города могут зависеть условия доставки, цены, ассортимент каталога товаров и многое другое.
Казалось бы – что здесь сложного? Проверил, правильно ли сайт определил город. Если нет – выбрал нужный. И всё. Но на деле при проектировании этого процесса и интерфейса есть много тонкостей, на которые стоит обратить внимание.
В этой статье – чек-лист из 90+ гайдлайнов на основе анализа топ-100 интернет-магазинов РФ по выручке. Делитесь этим материалом с коллегами, если он будет вам полезен. И не забудьте подписаться на мой канал в Telegram – я это очень ценю.
Казалось бы – что здесь сложного? Проверил, правильно ли сайт определил город. Если нет – выбрал нужный. И всё. Но на деле при проектировании этого процесса и интерфейса есть много тонкостей, на которые стоит обратить внимание.
В этой статье – чек-лист из 90+ гайдлайнов на основе анализа топ-100 интернет-магазинов РФ по выручке. Делитесь этим материалом с коллегами, если он будет вам полезен. И не забудьте подписаться на мой канал в Telegram – я это очень ценю.
Структура статьи
Для удобства статью я разбил по блокам. Так будет легче для восприятия. Каждый из блоков содержит в себе детальный чек-лист.
1. Текущий город
Привычно расположен
Разместите элемент выбора города там, где он расположен в большинстве магазинов и где его чаще ожидают увидеть клиенты – в левой верхней части страницы.
Город определяется автоматически
Хорошая практика – определять город автоматически на основе IP-адреса, но не просить сделать это клиента вручную.
Город определяется корректно
По-хорошему, ошибок при определении города быть не должно. В противном случае мы создаем еще одну задачу, которую придется выполнять клиенту.
Сопровождается геометкой
Рядом с текущим городом можно разместить небольшую иконку в виде геометки, облегчающую восприятие информации.
Без лишнего текста
При этом любой вторичный текст (например, слово «Город») можно упразднить, если он не несет какой-либо дополнительной ценности.
Виден полностью
По возможности спроектируйте интерфейс таким образом, чтобы текущий город или регион были видны полностью и не обрезались.
Анимирован
Иногда, если popup уточнения города не появляется по умолчанию, его можно анимировать, чтобы привлечь внимание.
Реагирует на наведение
Элемент текущего города может реагировать на наведение курсора, давая тем самым визуальную обратную связь.
Подсказки информативны
Если вы используете контекстные подсказки, сделайте их информативными. В примере это может быть текст «Текущий город» и пояснение того, на что влияет выбор города.
29 детальных чек-листов по e-commerce доступны в моем Telegram.
2. Запрос на уточнение города
Появляется сразу?
Часто можно встретить кейсы, когда запрос появляется сразу же при загрузке страницы. Понятно, что это важно. Но такая механика может быть воспринята, как назойливая.
Появляется при наведении
Более элегантная механика – показать запрос на уточнение города лишь тогда, когда клиент навел курсор на элемент текущего города.
Появляется не при клике
Если клиент кликнул на текущий город, намерение его изменить уже более явное, чем при наведении. В этом случае лучше переходить сразу к выбору города, а не к уточнению.
В формате popup сообщения
Наиболее часто запрос на уточнение реализуют в формате небольшого всплывающего сообщения.
В формате bar'а
Однако иногда можно встретить такой запрос и в формате полоски, по сути являющейся частью страницы и видимой по умолчанию.
Не блокирует интерфейс
Клиента можно спросить, правильно ли определен город. Но блокировать при этом весь интерфейс и заставлять выбрать город силой – слишком агрессивно.
Рядом с текущим городом
Призыв уточнить город не должен быть визуально оторван от label'а текущего города – это два связанных между собой элемента, и их лучше расположить рядом.
Фиксирован при скролле?
Если вы используете формат bar'а и элемент не занимает много места, его можно сделать фиксированным при скролле. Это повысит его заметность.
Без конкурирующих запросов
Запрос уточнения города не должен конкурировать в один момент времени с другими запросами – в том числе и с запросом геолокации.
Хорошо заметен
Блок не должен «кричать», но при этом должен достаточно хорошо выделяться на фоне остальной страницы, чтобы привлечь внимание клиента.
Вписывается в экран
Проектируя popup с уточнением города, позаботьтесь о том, чтобы он вписывался в страницу и был виден полностью.
Содержит вопрос
В рамках блока к клиенту можно обратиться с вопросом, например, «угадали ли мы ваш город?»
Содержит пояснение
Также хорошей практикой, помимо запроса, будет рассказать клиенту, для чего требуется указать город и на что это повлияет.
Текст запроса корректен
Базовый момент: убедитесь, что сам текст запроса не содержит ошибок. В данном примере клиента спрашивают про корректность региона, подсвечивая при этом город.
Highlight города
Город в тексте запроса можно специально выделить, чтобы лучше сфокусировать на нем внимание клиента.
Содержит иллюстрацию
Если дизайн сайта позволяет, в некоторых случаях запрос на уточнение города можно снабдить небольшой иллюстрацией.
Текущий город vs. город в запросе
Город в запросе не должен отличаться от города, который указан в рамках страницы, иначе клиента можно ввести в заблуждение.
Кнопки хорошо выделяются
Спроектируйте кнопки действий в блоке так, чтобы они были заметны, выглядели, как кнопки, и клиенту было понятно, что на них можно нажать.
Кнопка подтверждения – основная
В большинстве случаев город должен определяться корректно, поэтому подтверждение будет основным действием, и это должно отражаться в том, как выглядит кнопка.
Позиция кнопки подтверждения
Как считаете, основная кнопка должна быть расположена сначала или последней? Какие мысли? За и против? Напишите в комментах.
Кнопки интерактивны
Добавьте в кнопки реакцию на наведение курсора. Это позволит сделать интерфейс более отзывчивым.
Таймер закрытия запроса
В некоторых случаях запрос реализован интересно и нестандартно: он появляется по умолчанию, но по истечении времени исчезает сам, не требуя от клиента действий.
Без запроса геолокации
Город можно определить и по IP-адресу. Проактивный запрос точной геолокации через браузер может быть воспринят, как попытка нарушить приватность.
3. Интерфейс выбора города
Быстро загружается
Если клиент хочет указать другой город, не нужно заставлять его ждать: интерфейс выбора города должен загружаться без каких-либо значимых задержек.
Затемнение фона
Если интерфейс со списком городов занимает не всю площадь экрана, фоновую страницу можно затемнить, чтобы сместить фокус внимания именно на выбор города.
Без скролла фоновой страницы
Если вы реализовали список городов в формате всплывающего окна или сайдбара, скролл фоновой страницы при их появлении лучше блокировать – в нем нет смысла.
Содержит призыв к действию
Базовый момент: заголовок окна со списком городов можно реализовать в формате призыва к действию – выбору города.
Содержит пояснение
Если вы решили не указывать пояснение, для чего нужен выбор города, в запросе на уточнение города, это можно сделать в рамках списка городов.
Highlight территории покрытия
Если вы доставляете товары во внушительное количество населенных пунктов, этот факт можно подсветить в рамках списка городов, как еще одно преимущество.
Размер окна vs. скролл
Если у вас в списке большое число городов, по возможности не упаковывайте их в маленькое окошко с длинной прокруткой. Это усложняет поиск и выбор города.
Один vs. несколько столбцов
Если городов много, в версии сайта для ПК разместите их в нескольких столбцах вместо одного, чтобы найти город было легче.
Разбиение по алфавиту
Часто можно встретить кейсы, когда общий список городов для облегчения поиска разбит по буквам алфавита, которые отдельно подсвечиваются.
От общего к частному
Другой пример структурирования списка – это сначала выбрать округ, регион и затем уже город. Что думаете по поводу удобства такого выбора? Напишите к комментах.
Системный интерфейс?
Меня могут обвинить во вкусовщине, но возможно интерфейс выбора города стоит сделать более «симпатично», чем просто в виде системного dropdown'а?
Заголовок vs. варианты
Убедитесь, что заголовок соответствует вариантам: спрашиваете про регион – в значениях регионы, спрашиваете про город – в значениях города.
4. Популярные города
Блок с популярными городами
Хорошей практикой будет вывести наиболее часто выбираемые города в отдельный блок, чтобы не заставлять большинство клиентов искать свой город в длинном списке.
Highlight популярных городов
Популярные города можно выделить на фоне остальных. Сделать это можно с помощью бабблов, жирного текста, шрифта большего размера и т.д.
По умолчанию – только популярные
В некоторых кейсах по умолчанию отображаются лишь популярные города – так, что большинство клиентов даже не сталкиваются с длинным списком населенных пунктов.
Популярные vs. все города
Некоторые пользуются схожей механикой, но дают клиенту возможность переключаться между самыми крупными городами и списком всех городов.
Сортировка популярных городов
Популярные города лучше отсортировать по алфавиту, чтобы облегчить поиск нужного города. Исключения – Москва и Санкт-Петербург. Они чаще всего – первые.