Карта на телефоне: превью проекта по касанию пинаPhone map: a project preview when you tap a pin

ЦельGoal

Инвестор на телефоне смотрит предложения на карте: касается пинов, видит, что где и почём, и открывает интересный проект — не теряя карту. Это первая часть цели сайта: сразу видеть карту с проектами.An investor on a phone browses offers on the map: taps pins, sees what is where and at what price, and opens an interesting project — without losing the map. This is the first part of the site's goal: seeing the map with projects right away.

ЗадачаProblem

На телефоне касание пина выбрасывало из карты: включался режим «Список» и страница прокручивалась к карточке проекта. Чтобы посмотреть соседний пин, нужно было снова нажать «Карта» и найти место, где был. Сравнить несколько проектов на карте было неудобно.On a phone a tap on a pin threw you out of the map: the «List» mode switched on and the page scrolled to the project card. To look at the next pin you had to tap «Map» again and find your place. Comparing several projects on the map was awkward.

Как решилиHow it was solved

• Касание пина показывает внизу карты превью — ту же карточку проекта, что в списке: название, город, цены, площади, число юнитов, программа аренды. Режим «Карта» остаётся.A tap on a pin shows a preview at the bottom of the map — the same project card as in the list: name, city, prices, areas, unit count, rental programme. The «Map» mode stays.
• Касание превью открывает проект; × (44 px) или касание по карте закрывает превью; следующий пин сразу заменяет его.Tapping the preview opens the project; × (44 px) or a tap on the map closes it; the next pin replaces it at once.
• Так устроены карты в приложениях недвижимости и путешествий. На компьютере ничего не изменилось: там список стоит рядом с картой и пин подсвечивает карточку в нём.This is how map views in property and travel apps work. Nothing changed on desktop: the list sits next to the map there and a pin highlights its card.

До и послеBefore and after