В этом документе описаны различные шаблоны проектирования и идеи, которые помогут вам начать работу с Aerial View . Способ представления Aerial View вашим клиентам должен быть тщательно продуман, чтобы обеспечить высокий уровень вовлеченности в использование продукта и понимание его ценности клиентами.
Аэрофотосъемка добавляет визуально привлекательный элемент на ваш сайт, демонстрируя вид сверху на объект недвижимости и окрестности.
Когда пользователи видят недвижимость в 3D, они могут лучше представить себе ее местоположение и размеры. Это также помогает выделить особенности объекта, такие как бассейн, хозяйственные постройки или большой двор, а также расположенные поблизости объекты, такие как дороги, водоемы, горы или парки.
Повышение вовлеченности
Аэрофотосъемка произведет на ваших клиентов неизгладимое впечатление, и чтобы получить от нее максимальную выгоду, контент должен быть максимально легкодоступным. В этом разделе мы обсудим некоторые шаблоны проектирования для реализации аэрофотосъемки, которые помогут этого добиться.
Видеоориентация
Важно учитывать ориентацию экрана устройства, на котором загружается видео с видом сверху. Отображение видео в альбомной ориентации на мобильном устройстве, особенно в полноэкранном режиме, может негативно сказаться на пользовательском опыте. Показ видео с неправильным соотношением сторон для данного устройства приведет к значительной потере экранного пространства.
Видеоролики с видом сверху представлены в альбомной и портретной ориентации .
Ниже приведен пример, демонстрирующий разницу при запуске приложения Aerial View на мобильном устройстве в рекомендуемой и нерекомендуемой ориентации:
Встроенная всплывающая карточка
При отображении нескольких объектов недвижимости в окне поиска полезно добавить всплывающие подсказки, отображающие видеоролик с видом сверху и дополнительной информацией об объекте, такой как адрес и цена. Это позволяет пользователям быстро и легко составить представление об объекте, не переходя на страницу с подробным описанием.
В приведенном ниже примере показан маркер, обозначающий комплекс Googleplex в Маунтин-Вью. При наведении курсора на этот маркер появляется всплывающая карточка с видеороликом, снятым с воздуха.
К маркеру и встроенной всплывающей карточке можно добавить событие onClick , чтобы перенаправить пользователя на страницу с подробной информацией об объекте недвижимости. Это позволит пользователям легко узнать больше об объекте и решить, подходит ли он им.
Создайте для своего объекта недвижимости захватывающую, похожую на историю атмосферу.
Если вы хотите создать по-настоящему захватывающее впечатление для потенциальных покупателей, вы можете представить свою недвижимость в виде истории, сочетающей фотографии и видеоролик с видом сверху. Это можно сделать аналогично карусели изображений, используя сочетание HTML, CSS и JavaScript.
В приведенном выше примере мы разместили видеоролик с видом сверху на одном из слайдов, а внизу — ссылку для просмотра более подробной информации об объекте недвижимости. Эта кнопка должна переводить пользователя на страницу с подробным описанием объекта.
Вот как это работает:
- Выберите фотографии. Подберите несколько фотографий, которые подчеркнут лучшие черты вашей недвижимости.
- Создайте видеоролик с видом сверху.
- Объедините свои фотографии и видео в историю.
- Поделитесь своей историей. Расскажите свою историю потенциальным покупателям на своем веб-сайте или в рамках email-маркетинговых кампаний.
Создав для своего объекта недвижимости повествовательную историю, вы сможете привлечь внимание потенциальных покупателей.
Запуск аэрофотосъемки при загрузке страницы
В исследованиях UX Google мы видим, что наибольшая вовлеченность пользователей наблюдается, когда 3D-вид загружается по умолчанию. Поскольку это новый и интересный форм-фактор, мы хотим, чтобы он загружался сразу же, как только клиент захочет просмотреть подробную информацию об объекте недвижимости. Что касается стоимости, если вы получаете видео с видом сверху из API, с вас будет взиматься плата. После запроса видео рассмотрите возможность автоматического воспроизведения, чтобы пользователи могли оценить преимущества.
Антипаттерн: Скрытие вида сверху за кнопкой считается антипаттерном, поскольку это заставляет пользователей делать дополнительный шаг для просмотра 3D-изображения. Это может вызывать разочарование, а также приводить к тому, что пользователи упускают преимущества 3D-вида или ошибочно принимают вид сверху за статический контент.
Рекомендуется загружать вид сверху по умолчанию, когда клиент хочет просмотреть подробную информацию об объекте недвижимости. Это обеспечит удобство использования и поможет клиенту принять взвешенное решение. При разработке функции автовоспроизведения учитывайте, что видео с видом сверху занимает более 30 МБ и может загружаться медленно для некоторых пользователей.
Если на вашей странице есть карусель изображений, видеоролик с видом сверху можно разместить в качестве основного элемента, что позволит легко интегрировать 3D-эффект в существующий дизайн вашего сайта.
Разместить кнопки для загрузки 3D-видов несложно, но это может снизить вовлеченность пользователей. Google Maps загружает 3D-виды по умолчанию. Например, при поиске Эмпайр-стейт-билдинг 3D-вид загружается автоматически, и вы можете увидеть часть изображения, находясь в 3D-режиме. Это отличный способ сделать взаимодействие с сайтом более захватывающим и интересным.
дизайн кнопок
Если вы всё же решите использовать кнопку для доступа к режиму «Вид сверху», важно учесть следующее:
- Местоположение : Кнопку следует сгруппировать с другими кнопками, связанными с картой, чтобы пользователи понимали, что она относится к местоположению объекта недвижимости.
- Переход : Переход к видео должен быть плавным и незаметным. Если на странице уже есть раздел, отображающий изображения, карты и панораму улиц, то видеоролик с аэрофотосъемкой следует отобразить в этом же разделе.
- Выделение : Поскольку это будет новая функция на странице, целесообразно выделить кнопку с помощью тега «новая функция» или миниатюры видео в виде статичного изображения.
- Акцент : Кнопка должна быть оформлена со средним или высоким уровнем акцента, поскольку нажатие на нее будет выполнять заметное действие. В Google Material Design есть рекомендации по дизайну кнопок с разным уровнем акцента.
Вот несколько дополнительных советов по созданию эффективной кнопки «Вид сверху»:
- Используйте ясный и лаконичный язык. Кнопка должна быть четко обозначена, чтобы пользователи понимали, для чего она нужна.
- Используйте крупный и разборчивый шрифт. Кнопка должна быть достаточно большой, чтобы пользователи могли легко её увидеть и нажать на неё.
- Используйте контрастный цвет. Кнопка должна быть другого цвета, чем окружающий текст и фон, чтобы выделяться.
- Используйте призыв к действию. Кнопка должна содержать четкий призыв к действию, например, «Посмотреть вид сверху» или «Посмотреть видео».
Вопросы оформления
Загрузка видео
Возможно, вам стоит учесть медленные интернет-соединения, отображая предварительный просмотр видео в виде статичного изображения, а полную версию загружая при взаимодействии с пользователем, например, по клику. Помимо видео с видом сверху, вам также будет доступен миниатюрный вариант, который можно использовать для этой цели.
Вам также будет доступно видео в разных разрешениях, что позволит стратегически использовать их для минимизации времени ожидания загрузки видео при различной скорости интернет-соединения.
Авторство логотипа
При использовании функции Aerial View необходимо соблюдать все условия, включая указание авторства логотипа. Подробности см. на этой странице .
Заключение
Мы надеемся, что эта статья вдохновила вас на размышления о том, как вы могли бы внедрить функцию «Вид сверху» на свой веб-сайт, обеспечив при этом высокую вовлеченность пользователей.
Важно продумать, как пользователь будет находить контент и в каком формате его лучше всего отображать. Также следует учитывать тип устройства, на котором будет воспроизводиться видео, особенно ориентацию экрана, и скорость интернет-соединения пользователя.
Следующие шаги
Рекомендуемая дополнительная литература:
Авторы
Данная статья поддерживается компанией Google. Ее первоначальный автор — следующие лица.
Основной автор:
Хенрик Вальве | Инженер по решениям для платформы Google Maps