Создайте список продавцов фермерского рынка с простой страницей-картой палаток, оптимизированной для телефонов: быстрые обновления и лёгкая навигация в день рынка.
В день рынка люди не просматривают сайты спокойно. Они идут с кофе, щурятся на солнце и пытаются найти одну палатку до того, как товар раскупят. Продавцы испытывают противоположную проблему: где ставить палатку, изменилось ли место и когда начинается разгрузка.
Простой список продавцов помогает, но всё равно не отвечает на главный вопрос в моменте: где этот продавец сейчас? Без указания мест палаток посетители бродят по рядам, спрашивают у других покупателей или сдаются и покупают что-то другое.
«Удобно для телефонов» — это не про модный дизайн. Это про быструю загрузку, читаемый текст без масштабирования и главные действия, доступные большим пальцем. Если карта грузится вечно, имена продавцов мелкие, или людям приходится щипать и двигать экран, страница терпит неудачу в самый нужный момент.
Эта страница должна работать быстрее 10 секунд: показать часы и статус на сегодня, помочь найти продавца по имени или категории, показать читаемую метку палатки, которая соответствует карте, сделать заметными изменения (перемещения палаток, отмены, особые схемы), и снизить количество вопросов на инфо-палатке и в соцсетях.
Реальный пример: человек опоздал и хочет найти продавца мёда, которого видел на прошлой неделе. Ему не нужна длинная история о рынке. Он хочет открыть каталог, найти «Honey», увидеть «Booth B12» и глянуть на карту, где B12 относительно входа.
Держите этот сценарий «в движении» в голове — и проектные решения становятся проще: меньше отвлекающих элементов, крупные метки и прямая дорога от имени к месту.
Люди открывают эту страницу по одной причине: быстро найти продавца и дойти до нужного места без догадок. Публикуйте только то, что помогает в этот момент — тогда страница останется короткой, быстро загрузится и её проще поддерживать в актуальном состоянии.
Начните с базовой информации, которую посетители ищут сразу: название рынка, точный адрес, какой вход использовать, даты или сезон (например, по субботам с мая по октябрь) и часы, которые соответствуют реальности (включая время начала уборки у продавцов). Добавьте короткую подсказку по парковке и одну заметку по доступности (пандусы, ровные маршруты, удобство для колясок).
Далее публикуйте каталог продавцов для быстрого сканирования. Широкие категории делают большую часть работы: Овощи и фрукты, Выпечка, Готовая еда, Ремесленные изделия, Растения/цветы. Не заставляйте людей учить вашу внутреннюю систему.
Каждая карточка продавца требует лишь нескольких полей, чтобы быть полезной: имя, указанное на вывеске, одна основная категория, ID палатки/ряда, который совпадает с картой, и короткая подсказка (1–2 позиции, ради которых приходят люди). Платёжные пометки вроде «только наличные», «карты» или «SNAP» тоже помогают, но только если вы можете держать их в актуальном состоянии.
Планируйте изменения в день проведения. Даже одна строка «Обновления сегодня» делает страницу более надёжной: «Honey House: распродано к 11:30» или «Sunny Bread: перемещён с B3 на B7». Делайте обновления короткими и помечайте временем.
Большинство посетителей откроют ваш список, идя по рынку, держа сумку и сталкиваясь с бликами. Цель простая: найти продавца, подтвердить палатку и идти.
Поставьте строку поиска вверху и делайте её доступной при прокрутке. Фиксированный тонкий хедер хорошо работает на телефонах: поле поиска плюс одна кнопка фильтра.
Фильтры должны соответствовать тому, как люди задают вопросы. Мало кто ищет «Vendor #42». Они вводят «кофе», «яйца» или «без глютена». Ограничьте фильтры теми, что действительно важны для вашего рынка: категория, тип оплаты, диетические потребности и простой статус «Сегодня здесь», если состав меняется неделя от недели.
Карточки продавцов должны оставаться компактными. Если одна карточка занимает весь экран, люди уходят. Ориентируйтесь на главное: имя продавца (самый крупный текст), категория (малый тег), метка палатки, совпадающая с вывесками, и короткие заметки по оплате вроде «Карта + SNAP». Добавляйте однострочный блиц только если он действительно помогает.
Сделайте метку палатки нажатой. При нажатии показывайте расположение палатки, не теряя места в списке. Два варианта хорошо работают для телефонов: небольшой bottom sheet с картой, центрированной на этой палатке, или вид карты с понятной кнопкой «Вернуться к списку», возвращающей к той же позиции прокрутки.
Пример: Jamie ищет «honey» в движении. Он видит три результата, нажимает «B12», карта открывается по центру на B12, и одним тапом возвращается к результатам по мёду.
Карта, которая нормально смотрится на ноутбуке, может раздражать на телефоне. Цель ясна: человек должен быстро найти Палатку 18, идя в солнце и одной рукой.
Начните с макета, соответствующего тому, как люди перемещаются по рынку. Для многих рынков чистая сетка с номерами палаток и буквами рядов легче для восприятия, чем детализированный рисунок. Если на объекте есть входы, деревья или сцена, сгруппируйте палатки в простые зоны, например «A: Главный ряд» и «B: Задний ряд». Держите формы простыми.
Делайте метки палаток большими и с высоким контрастом. Мелкие номера — основная причина, по которой люди масштабируют карту, теряют ориентир и сдаются. Маркер «Вы здесь» может помочь, но он необязателен. Важнее, чтобы номера и названия зон совпадали с тем, что напечатано на реальных вывесках.
Дайте посетителям два вида карты: обзор всего рынка с ключевыми ориентирами (вход, инфо-палатка, туалеты) и детальный вид, разбитый по секциям (например, ряд A и ряд B) с большими номерами палаток. Под картой добавьте простой текстовый запасной вариант вроде «Ряд A палатки 1–20, Ряд B палатки 21–40» для быстрого чтения.
Проектируйте с учётом еженедельных изменений. Если палатки 12 и 13 объединяют, покажите один большой блок с меткой «12–13» и отразите это в каталоге продавцов. Если продавец переехал, сохраняйте номер палатки как главный источник правды. Старое место пометьте как «пустое», а не перенумеровывайте серед сезона.
Пример: посетитель ищет «Honey» и видит «Sunny Apiary, Booth 27 (Zone B)». Они нажимают на Zone B, открываются крупные номера, и Палатка 27 очевидна без масштабирования.
Посетители теряются не потому, что карта «неправильная», а потому, что карта и вывески используют разные слова. Если на странице написано «Local Honey», а на вывеске только «B12», посетитель сомневается и перестаёт доверять информации.
Выберите одну систему подписей, которую вы сможете поддерживать каждую неделю: Booth 1–40, A1–A10 или простые зоны вроде Produce Row и Food Court. Выбирайте то, что подходит вашей площадке. Плотная сетка обычно хорошо работает с метками A1, тогда как длинный уличный рынок лучше читается по рядам или зонам.
После выбора используйте одинаковые метки везде: на странице с картой палаток, на печатных знаках, на меловых досках и на любых «Вы здесь» табло. Если волонтёры помогают с установкой, дайте им ту же таблицу меток, чтобы номера не «уезжали».
Добавьте несколько ориентиров, чтобы карта выглядела реалистично на маленьком экране. Трёх–шести достаточно: инфо-палатка, туалеты, сцена/музыка, главный вход/выходы и, возможно, банкомат или пункт первой помощи. Легенда должна быть короткой и читаться без масштабирования.
Пример: посетитель нажимает «Sourdough Bakery» и видит «Booth B7 (near Music)». При подходе ближайшая табличка тоже говорит «B7», а баннер у сцены совпадает с картой — посетитель идёт прямо, не спрашивая прохожих.
Соберите данные продавцов в одном месте, прежде чем редактировать сайт. Подойдёт общая таблица или короткая форма, которая заполняет таблицу. Важно иметь единый источник правды, чтобы не гоняться за сообщениями в последний вечер.
Затем закрепите метки палаток (или ряды/места) и подтвердите их с продавцами. Быстрое «ответьте YES, чтобы подтвердить палатку 14» предотвратит самую распространённую проблему: продавцы придут с ожиданием другого места.
Практический порядок работ, снижающий переработку:
Сделайте один реальный тест: встаньте у входа, откройте страницу одной рукой и попробуйте найти три продавца за 20 секунд. Если не получается — упрощайте метки, сокращайте лишнее или переставляйте элементы.
Также назначьте одного человека (не группу в чате) для публикации утренних изменений. Это предотвращает конфликтующие правки и делает страницу более надёжной.
Большинство людей открывают вашу страницу, пока идут по рынку и ищут одну палатку быстро. Маленькое трение превращается в «не сейчас» за секунды.
Перегрузка — частая проблема. Длинные истории о продавце, много фотографий и большие блоки текста превращают каталог в домашнее задание. Если кто-то просто хочет «Кто продаёт персики?», ему не нужно пролистывать параграфы и баннеры.
Карта — следующая большая точка потерь. Если ваша карта — одно изображение с крошечными метками, люди масштабируют, теряют место и сдаются. Телефонная карта должна иметь метки, читаемые при нормальном масштабе, и достаточно пространства для точного нажатия.
Несоответствие меток создаёт мгновенную путаницу. Если онлайн-карта говорит «A12», а вывеска на месте — «12» (или «Row A - 12»), посетитель перестаёт доверять странице. То же касается имён продавцов: «Sunny Farm Co.» онлайн vs «Sunny Farms» на вывеске создаёт ощущение двух разных продавцов.
Ещё одна проблема — прятать базовое. Часы, адрес и «куда входить» должны быть над каталогом. Люди используют эту страницу, чтобы решить, успеют ли они добраться сегодня.
И наконец, рынки меняются. Если вы не планируете обмены в последний момент, ваша страница становится неверной в самый неподходящий момент. Кто-то придёт за «Green Truck Tacos», подойдёт к отмеченному месту и увидит вместо этого лавку с украшениями. Вероятно, он больше не вернётся к вашей странице на следующей неделе.
Несколько исправлений спасают большинство случаев: держите карточки короткими (имя, палата, категория, заметки по оплате по необходимости), совпадайте в метках с печатными вывесками, делайте карту читаемой без масштабирования (даже если придётся убрать детали), размещайте часы и адрес наверху и определите, кто и как быстро вносит изменения.
Протестируйте страницу как посетитель: на телефоне, по сотовой сети, при ярком свете и одной рукой. Проблемы, не заметные на ноутбуке, именно те, что заставят людей отказаться утром рынка.
Сфокусируйтесь на проверках, которые действительно важны: быстрая загрузка на сотовой сети, читаемость без масштабирования, очевидный поиск и фильтры, метки палаток, совпадающие с вывесками, и надёжный процесс обновлений (включая ответственных за правки и способ подтверждения).
Практический тест: попросите друга, который никогда не был на вашем рынке, найти двух продавцов и их палатки за 20 секунд на улице. Если он сомневается — упрощайте имена, перемещайте важную информацию выше или уменьшайте количество деталей на карте.
Суббота, 9:05. У вас 45 продавцов и два входа: North Gate (возле парковки) и South Gate (возле детской площадки). Посетитель открывает каталог на телефоне, идя внутрь.
Они вводят «Lopez» в строку поиска. Каталог сужается до одной карточки: Lopez Honey. В карточке указана метка палатки, совпадающая с вывеской, например B12, и короткая подсказка: «Ряд B, рядом с North Gate». Также есть простое действие «Показать на карте», которое переключает карту на нужное место.
Менее чем за минуту они делают три быстрые проверки: подтверждают, что метка палатки совпадает с ближайшим маркером ряда, смотрят подсветку карты, чтобы выбрать быстрый путь от North Gate, и бегло читают карточку на предмет полезной детали, например «принимает карты».
Сегодня произошло изменение в последний момент: Lopez Honey поменялся палатками с соседним продавцом. Вместо путаницы карточка показывает Moved to B14 (today only). На карте B12 остаётся помеченным как «Moved», а B14 подсвечивается.
Одна палатка временно пуста — продавец опаздывает. Карта всё ещё показывает номер палатки, но она слегка затемнена с пометкой «Empty right now», чтобы посетители не блуждали. Карточка продавца остаётся в списке, но с меткой Arriving late вместо того, чтобы исчезнуть.
Список и карта помогают только если они совпадают с тем, что люди видят на месте. Самый простой способ держать всё в порядке — превратить обновления в задачу, а не в хаос. Назначьте одного человека, который «держит» страницу в день рынка. Это не значит, что он делает всю работу, но все знают, кто имеет последнее слово.
Держите небольшую бегущую запись изменений, которую обновляете тем же утром: кто отменился, кто обменялся палатками и кто пришёл позже. Используйте ту же страницу каждую неделю и добавляйте дату вверху, чтобы возвращающиеся посетители понимали, что информация актуальна.
Простой недельный рутин остаётся управляемым даже в жаркие дни: проверяйте подтверждения до установки, пройдитесь по площадке и сверяйте номера палаток, обновите верхнюю заметку с реальными изменениями, а ошибки исправьте в течение 10 минут после открытия.
Планируйте рост, сохраняя единый формат карточки продавца (имя, категория, палата, заметки по оплате и одна короткая подсказка). Добавление нового продавца должно быть заполнением полей, а не переработкой страницы.
Перенесите макет в реальную страницу с тремя блоками, которые люди быстро поймут: каталог продавцов, простые фильтры и карта палаток, удобная для телефона.
Начните с малого и публикуйте рано. Простая страница, которая быстро загружается, лучше идеального дизайна, который никогда не выйдет в сеть. Полируйте после того, как увидите, какие вопросы остаются у посетителей у инфо‑палатки.
Если вы хотите быстрее собрать страницу, Koder.ai (koder.ai) может сгенерировать простой каталог из чата и помочь вам итеративно работать в Planning Mode перед тем, как правки станут живыми. Снимки состояния и откат полезны, когда нужно быстро отменить ошибку утром рынка.
Думайте о будущем: в конце сезона сохраните данные продавцов и файл карты, экспортируйте исходники — чтобы в следующем году это был не полный пересозданный проект, а обновление.
Начните с часов работы рынка и статуса, затем сделайте каталог продавцов с поиском в первую очередь, укажите табличку с номером палатки, соответствующую вывескам на месте, и, наконец, карту, которая выделяет эту палатку. Если эти четыре элемента быстро работают на телефоне, большинство посетителей найдут то, что им нужно без лишнего контента.
Используйте широкие, знакомые категории и сделайте поиск главным инструментом. Большинство людей будут вводить то, что им нужно (например «мёд» или «кофе»), а не просматривать сложную таксономию.
Показывайте точное имя так, как оно написано на вывеске продавца, указывайте одну основную категорию и показывайте ID палатки, который совпадает с картой и маркерами в проходах. Добавляйте короткую заметку «известен тем, что…» только если это действительно помогает подтвердить выбор.
Считайте ID палатки главным источником правды и сохраняйте его в течение всего сезона. Если продавец переехал, обновите карточку продавца с новым местом, а старое место пометьте как «перемещено» или «пусто», но не перенумеровывайте все палатки.
Поместите небольшую, помеченную временем область «Обновления сегодня» рядом с верхом и держите её краткой. Публикуйте только те изменения, которые влияют на путь посетителя: отмены, распроданные товары, обмены палаток и временные схемы.
Делайте метки крупными, с высоким контрастом и читаемыми при нормальном увеличении, избегайте перегрузки деталями в одном изображении. Простая сетка с буквами рядов или зонами часто проще для использования в движении, чем подробная иллюстрация.
Выберите одну систему нумерации (например A1–A20 или Booth 1–40) и используйте её везде: онлайн, на печатных табличках и на доске «Вы здесь». Даже небольшие несоответствия заставляют людей перестать доверять странице.
Поставьте в самом верху часы работы, точный адрес и вход, которым стоит пользоваться. Добавьте одну короткую подсказку по парковке и одну заметку по доступности, чтобы посетителям не пришлось искать базовую информацию.
Проведите тест с телефоном в одной руке у входа и попытайтесь за 20 секунд найти три продавца. Если это медленно или непонятно, упростите карточки продавцов, увеличьте размер меток или уменьшите детали на карте до тех пор, пока поиск не станет лёгким.
Назначьте одного человека ответственным за обновления в утро рынка и заранее согласуйте, что считать официальной информацией. Если вы используете Koder.ai, можно работать в Planning Mode и пользоваться снимками состояния и откатами, чтобы быстро исправить ошибочный правку при спешке.
