@Serg-shumakov

Как совместить большую карту и длинный список в дизайне?

Ситуация:
На странице размещены 2 элемента - список компаний (слева, 35% ширины экрана) и карта (справа, 65% ширины экрана) отображающая расположения этих компаний. Высота списка компаний на среднем мониторе порядка 20-25 экранов. Карта прикрепляется к верху экрана, занимает максимальную высоту и путешествует вместе со скроллом списка.

08d28689dd904324a71fa1cadb52adf3.png

Проблема:
Логично, что самый оптимальный способ навигации по обоим элементам - скролл (у карты он изменяет масштаб). Но так как карта располагается справа и имеет большую ширину, чем список в большинстве случаев список будет прокручиваться, когда курсор будет над картой. В таком случае, вместо прокрутки списка пользователь будет прокручивать карту.

Из очевидных решений:
Отключить скролл карты, пусть пользуются инструментами Zoom и левой кнопкой мышки для перетаскивания центра карты, как например сделали на realty.yandex.ru.
Минусы: Учитывая, что карта является не менее важным элементом, чем список и требует постоянных изменений масштаба, прокрутка там все таки нужна.

Есть ли более мудрое решение этой интерфейсной задачи или я обречен оставить пользователей с одним из костылей?
  • Вопрос задан
  • 2593 просмотра
Решения вопроса 1
kirill-kvanto
@kirill-kvanto
Основатель Myrentacar.com
Для начала надо понять, какой из элементов имеет приоритет. Если конечная информация расположена на списке (название организации, телефон, email, расписание работы, описание, отзывы и т.д.), то именно на этом элементе нужно делать акцент и ему давать максимум места. Если суть сервиса показать плотность объектов на карте, или если выбор производится именно по расположению в городе с точностью до 100 метров, а не по описанию заведения, то тогда можно оставить карту главным элементом.

Судя по скриншоту, у вас каталог мест в городе. В нем самая нужная пользователю информация - в списке. Человеку, по большому счету, все равно, где автосервис расположен в пределах его района. Главное, чтобы были хорошие отзывы и тот вид работ, который нужен пользователю.
Поэтому я бы посоветовал уменьшить карту до 50% экрана, а остальное уделить списку.
Список я бы расположил справа от карты. Пользователь будет сначала зумить карту до своего района, а потом искать в районе нужную организацию. Поэтому сначала он работает с картой (слева), а потом гоняет список (справа). Так курсор будет следовать за внимание пользователя и не окажется на ненужном элементе в ненужный момент.

Примерно такая дилема была у airbnb.com до редизайна. Посмотрите, как они решили эту проблему в текущем дизайне.
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
broder4ik
@broder4ik
Как вариант можно сделать так:
Если список компаний прокручен до самого низу, то начинаем zoom`ить карту.
Скорее всего пользователь будет изменять масштаб только тогда, когда просмотрит весь список.
Ответ написан
Dussky02
@Dussky02
Как вариант можно сделать так:
Сделать из списка раскрывающийся список (или фильтры), тогда если у него и будет возникать прокрутка, то после раскрытия т.е. когда курсор на области списка.
Ещё можно так:
Показывать несколько первых пунктов списка, остальные после нажатия на "показать ещё 10", тогда курсор после нажатия будет на области списка и пользователь привыкнет скролить по нему, когда на нем курсор, а на карту интуитивно догадается перенести курсор, когда ему понадобится использовать скролл на карте
Ответ написан
nickproduct
@nickproduct
Product Manager
https://ru.airbnb.com/s/%D0%9B%D0%B8%D1%81%D1%81%D...

Сервис airbnb оставляет приоритет за списком апартаментов.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы