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

Question

[Serg-shumakov]

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



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

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

Есть ли более мудрое решение этой интерфейсной задачи или я обречен оставить пользователей с одним из костылей?

Answer 1

[Кирилл]

Для начала надо понять, какой из элементов имеет приоритет. Если конечная информация расположена на списке (название организации, телефон, email, расписание работы, описание, отзывы и т.д.), то именно на этом элементе нужно делать акцент и ему давать максимум места. Если суть сервиса показать плотность объектов на карте, или если выбор производится именно по расположению в городе с точностью до 100 метров, а не по описанию заведения, то тогда можно оставить карту главным элементом.

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

Примерно такая дилема была у airbnb.com до редизайна. Посмотрите, как они решили эту проблему в текущем дизайне.

Comments

[Serg-shumakov]

Отличный пример с airbnb!
Именно это я искал. Большое спасибо за столь развернутый и грамотный разбор задачи!

Answer 2

[Денис]

Как вариант можно сделать так:
Если список компаний прокручен до самого низу, то начинаем zoom`ить карту.
Скорее всего пользователь будет изменять масштаб только тогда, когда просмотрит весь список.

Comments

[Serg-shumakov]

Большинство пользователей не докрутят список до конца, он очень длинный (в среднем 20-25 экранов, а на некоторых страницах автоподгрузкой создается еще 50-70 доп.экранов). Скорее всего работа с зумом начнется задолго до последнего экрана.
Можно конечно сделать постраничную навигацию с выводом в списке 15-20 элементов, но боюсь это создаст другие проблемы в удобстве.

[Денис]

Согласен. Тогда лучше оставить как есть, пусть zoom работает на карте, проще текст прокрутить чем карту зумировать.
Ну можно еще у пользователя спрашивать при наведении на карту: хочет ли он сейчас использовать скрол списка или zomm карты :)

Answer 3

[Дмитрий]

Как вариант можно сделать так:
Сделать из списка раскрывающийся список (или фильтры), тогда если у него и будет возникать прокрутка, то после раскрытия т.е. когда курсор на области списка.
Ещё можно так:
Показывать несколько первых пунктов списка, остальные после нажатия на "показать ещё 10", тогда курсор после нажатия будет на области списка и пользователь привыкнет скролить по нему, когда на нем курсор, а на карту интуитивно догадается перенести курсор, когда ему понадобится использовать скролл на карте

Comments

[Serg-shumakov]

Вы предлагаете заменить содержимое списка на фильтры? К слову о фильтрах, они есть в большом количестве выше обсуждаемых объектов и благодаря им список состоит в среднем из 20-25 экранов, а не 100-200...

[Serg-shumakov]

Про "Показать еще 10" - интересное предложение, в том числе и с точки зрения скорости загрузки страницы. Спасибо, обязательно попробую.

[Кирилл]

Элемент "Показать еще 10" актуален лишь тогда, когда список отсортирован по какому-то важному критерию. Например, по цене услуги. Человек знает, что больше XXXX рублей он не готов за нее отдать, поэтому когда он долистает список до сумм XXXX+100, дальше он грузить не будет, ему те предложения уже не интересны.
Но если сортировка делается по алфавиту или по какому-то не определяющему критерию, то человеку нужен весь список сразу. Или все-таки делать сортировку по определяющему критерию)) - цена, рейтинг, удаленность от точки и т.д.

Answer 4

[Nick]

https://ru.airbnb.com/s/%D0%9B%D0%B8%D1%81%D1%81%D...

Сервис airbnb оставляет приоритет за списком апартаментов.