На туристичному лендінгу hero продає емоцію. На маркетплейсі простору — склади, паркінг, квартири — перший візит це робота пошуку. Людина відкриває сайт із локацією в голові й приблизним бюджетом. Якщо карта й фільтри заважають — вона йде до конкурента або в WhatsApp-чат.
Ми збирали map-led discovery для storage і property. Нижче — патерни, що постійно спливають на юзабіліті.
Варто чітко розуміти, який це тип продукту. Тревел-бренд може продавати відчуття, бо покупка — це мрія, і в користувача є час гортати. Маркетплейс простору ближчий до утиліти: комусь потрібні 4м² складу біля дому до кінця місяця, або паркомісце біля конкретного офісу, і ця людина порівнює три-чотири відкриті вкладки одночасно. Продукт, що доводить до «так» найшвидше, з найменшим тертям між відкриттям сайту й реальним бронювальним варіантом, виграє це порівняння. Усе нижче випливає з того, що перший екран — спочатку інструмент пошуку, а вже потім поверхня бренду.
Спочатку місце, не поезія бренду
Короткого value line достатньо. Головна поверхня:
- Карта з читабельними пінами або кластерами
- Пошук адреси / району
- Фільтри, як люди порівнюють (ціна, розмір, мітки)
«Поруч зі мною» допомагає лише за чесного geolocation і фідбеку. Немає локації — дайте зрозумілий вибір міста чи регіону, а не порожню карту півконтиненту.
Найчастіший провал тут — hero-секція, що штовхає карту нижче фолду на десктопі, або й гірше — на другий екран на мобільному: маркетинговий заголовок, value proposition, стокове фото усміхненої людини, і лише після скролу — власне інструмент. Кожен піксель, витрачений на цю рамку до завантаження карти, — це піксель, який користувач має проскролити, щоб зробити те, за чим прийшов. Бренд-меседж не безглуздий сам по собі — просто на цьому типі продукту йому місце поруч із картою, а не перед нею.
Geolocation заслуговує окремої уваги, бо частіше провалюється тихо, ніж голосно. Користувач відхиляє пермішн (а помітна частка користувачів робить це з принципу, незалежно від сайту) — і якщо весь план продукту був «отримати координати», карті тепер нічого показувати й нема куди рухатись далі. Чесний дизайн — трактувати geolocation як прискорювач для вибору локації, що чудово працює й без нього: ввести місто, обрати з address autocomplete, вибрати з короткого списку обслуговуваних регіонів — а не як єдині двері всередину.
Фільтри, які розуміють
Три фільтри кращі за дванадцять. Типові переможці:
- Ціна (діапазон, місяць чи ніч — підпишіть одиницю)
- Розмір (м² або тип юніта)
- Must-have теги (клімат-контроль, 24/7, паркінг)
«Очистити все» — обов'язково. Користувачі експериментують; їм потрібен скид без перезавантаження.
Коли результатів 0 — скажіть чому («Немає юнітів до €80 у цій зоні») і дайте одну дію: розширити радіус, скинути фільтр або написати sales. Empty state лише з «No results» вчить іти геть.
Бажання додати ще фільтрів зазвичай іде від стейкхолдерів, які бачать кожен атрибут у базі й хочуть вивести всі. Але кожен фільтр — це рішення, яке користувач мусить прийняти до того, як побачить результати, а більшість атрибутів у базі лістингів — не критерії вибору для людини на першому візиті, а деталь-сторінкова інформація для того, хто вже звузив до двох-трьох варіантів. Три фільтри, що постійно виправдовують своє місце, — ті, що збігаються з тим, як люди насправді описують запит уголос: ціна, яку можуть собі дозволити, розмір, що підходить під те, що вони зберігають чи паркують, і одна-дві обов'язкові фічі. Усе інше — на детальній сторінці або за розкривним «розширені фільтри», яке більшість ніколи не відкриває.
Empty state з нулем результатів вартий часу на дизайн, бо це не рідкісний edge case на пошуковому продукті — помітна частка реальних пошуків, особливо на ринку з обмеженим раннім інвентарем, у якийсь момент сесії впирається в нуль. Трактувати цей екран як другорядний (загальне «no results» без наступного кроку) перетворює нормальну частину процесу пошуку на глухий кут. Трактувати його як реальний стан — з причиною і конкретною дією відновлення — перетворює той самий момент на шанс утримати користувача в пошуку, а не втратити.
Картки лістингів за п'ять секунд
З карти чи списку картка має відповідати:
- де це (на рівні району достатньо)
- ціна з періодом
- розмір або місткість
- один сигнал довіри (фото, верифікований хост, ключова опція)
Глибокий сторітелінг — на детальній сторінці. Browse — для відсіювання.
Ментальна модель, під яку варто дизайнити: сесія browse — це переважно процес відхилення, не вибору. Користувач сканує десять-п'ятнадцять карток, щоб відсіяти дев'ять-чотирнадцять, які очевидно не підходять, і відкриває лише одну-дві, що вижили. Картка, яка вимагає кліку, щоб відповісти «це взагалі в моєму бюджеті», провалює цю задачу — вона змушує крок відсіювання відбуватись по одному завантаженню детальної сторінки за раз, замість одного скану по списку чи карті. Тому консистентність між картками важливіша за те, наскільки відполірована окрема картка: якщо ціна іноді за місяць, іноді за день, без видимої одиниці, користувач не може порівняти на око й мусить відкривати кожну, щоб перевірити, — а це вбиває сенс списку, який можна гортати.
Інструменти хоста — частина UX шукача
Поламаний інвентар хоста = порожні карти. Якщо власник не може залити фото, поставити ціну чи імпортувати Excel з юнітами, шукач бачить «Знайдено: 0» — і звинувачує бренд, не ops.
Publish-флоу проєктуйте так само уважно, як пошук: title, price, size, features, ліміти фото й прев'ю вигляду на карті.
У це легко недоінвестувати, бо це не та поверхня, яку засновник чи інвестор бачить на демо — демо показує бік шукача, з картою, повною пінів. Але кожен із цих пінів з'явився тому, що хост пройшов publish-флоу й не здався на півдорозі, а маркетплейси живуть чи вмирають від щільності пропозиції саме в тих районах, де реально є попит. Publish-флоу із забагатьма обов'язковими полями, незрозумілими вимогами до фото або без масового імпорту наявних лістингів з таблиці тихо обмежить пропозицію якраз у тих районах, де конкурент із простішим онбордингом цього не зробить. Шукач ніколи не бачить publish-флоу, але напряму відчуває його провал — як тонку чи порожню карту.
Темний UI і контраст карти
Темний chrome виглядає преміально, доки пін не зникає на тайлах. Перевірте:
- контраст пінів на світлій карті
- selected vs default
- читабельність фільтр-бару на мобільному
Тестуйте на реальному телефоні на вулиці. Маркетплейсами часто користуються в дорозі.
Тайли карти — зазвичай єдиний елемент на сторінці, який дизайн-система не контролює: вони приходять від map-провайдера, у тій палітрі, яку той віддає, і більшість за замовчуванням світлі. Темна тема продукту, зібрана й перевірена на ноутбуці дизайнера, у приміщенні, при повній яскравості, може виглядати гостро — аж доки хтось не протестує її на телефоні під прямим сонцем, де темний контур піна на світлому тайлі або виживає, або зникає, без проміжного варіанту. Те саме з фільтр-баром на мобільному: бар, елегантний коли карта — єдине на екрані, може з'їсти стільки вертикального простору на малому viewport, що половина карти ховається за ним, — а це реальна ціна на продукті, де карта і є продукт.
Міряйте правильні події першої сесії
Марнославство: кліки hero CTA. Корисно:
- відправлений пошук / «near me»
- зміна фільтра → відкритий результат
- деталь лістингу з карти
- хост почав «додати оголошення»
Мало взаємодії з картою й високий bounce — зазвичай discoverability, не колір бренду.
Причина інструментувати саме ці події, а не загальні page views, — вони відповідають реальній задачі, з якою прийшов користувач. Велика цифра кліків по hero CTA може бути повністю оманливою на такому продукті — вона міряє, чи люди помітили кнопку, а не чи знайшли те, що шукали. «Зміна фільтра → відкритий результат» — набагато точніший сигнал, бо фіксує саме ту послідовність, що має значення: користувач звузив пошук і знайшов щось варте другого погляду. Коли ця послідовність рідкісна, а трафік здоровий, виправлення майже ніколи не в новій hero-картинці — зазвичай карта чи фільтри не показують результати так, як користувач очікує, і це продуктова проблема, яку варто дебажити session recordings, а не маркетингова, яку вирішують новим копірайтом.
Stereasoft будує web-маркетплейси на React і Next.js, де пошук і є продукт. Якщо перший екран можна підмінити іншим брендом і він усе ще «ок» — карта й фільтри ще не роблять достатньо роботи.