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