Наведении: Появление изображения при наведении на текст // Анимация в вебе

Список продуктов: отображение дополнительной информации при наведении курсора (70% сайтов не делают этого)

Основная цель cписка продуктов состоит в том, чтобы пользователи могли легко и точно определить, какие товары нужно исследовать подробнее. Когда нужная информация отсутствует, противоречива или неадекватна, пользователи столкнутся со множеством проблем юзабилити, которые в конечном итоге могут заставить их покинут сайт.

Несмотря на определенные улучшения с тех пор, как в 2015 году мы впервые провели сравнительный анализ списков продуктов на 60 наиболее популярных сайтах электронной коммерции США и Европы, проблемы все еще очевидны.

Наши последние юзабилити-тесты показали, что:

• 42% сайтов отображают слишком мало информации о товарах в списках продуктов, чтобы пользователи могли точно оценить, стоит ли изучать страницу продукта или нет (незначительное улучшение – 46% в 2015 году).
• 42% сайтов отображают информацию в списке продуктов настолько непоследовательно, что пользователи не могут провести базовое сравнение товаров (улучшение по сравнению с 64% в 2015 году).
• 11% сайтов используют «неадекватный» для большинства пользователей размер миниатюр. Он не позволяет выполнить базовую визуальную оценку товара в списке продуктов (по сравнению с 32% в 2015 году).

Некоторые сайты решают эти проблемы с помощью простого метода: отображение дополнительной информации или изображений прямо внутри элемента списка, когда пользователь наводит на него курсор. Наш тест-юзабилити показал, что этот дополнительный слой текстовой или визуальной информации позволяет значительно сократить перемещения пользователей туда-сюда по списку и страницам продуктов только для того, чтобы отказаться от ненужных товаров.

Мы заметили, что отображение дополнительной информации об элементах списка при наведении курсора приводит к тому, что пользователи тратят меньше времени на нерелевантные продукты. Это в свою очередь приводит к общему увеличению показателя продаж на протестированных сайтах, использующих данный дизайн.

Тем не менее, наш бенчмарк показывает, что только 3% сайтов электронной коммерции отображают дополнительную текстовую информацию при наведении курсора, и только 28% показывают дополнительные изображения при наведении курсора (по сравнению с 18% в 2015 году). Другими словами, почти

70% сайтов электронной коммерции вообще не используют этот прием.

В этой статье мы представим результаты нашего крупномасштабного юзабилити-теста по отображению миниатюр и дополнительной информации об элементах списка при наведении курсора, в частности:

• Проблемы юзабилити, которые, как предполагается, решает дополнительная информация, показываемая при наведении курсора,
• 6 типов информации, отображаемой при наведении курсора, которые хорошо показали себя во время тестирования,
• Обсудим, как решить эти проблемы на мобильных и сенсорных устройствах, где нет состояния наведения курсора.

Дизайн списка товаров – это поиск баланса

Из наших юзабилити-тестов становится ясно, что список продуктов – это, по сути, поиск баланса: каждый элемент списка должен отображать достаточно информации, чтобы пользователь мог просмотреть продукты и сравнить их друг с другом (чтобы понять, какие товары актуальны для него). Тем не менее, элементы списка не должны отображать слишком много информации, иначе список станет загроможденным, и пользователям будет сложно просмотреть доступные варианты.

Недостаток информации об элементах списка повышает вероятность того, что пользователи не найдут нужные продукты, а избыточная информация затрудняет просмотр и может сделать страницу пугающей.

В ходе тестирования некоторые пользователи были разочарованы, когда не смогли увидеть продукты без моделей, например, на сайте ASOS, и в итоге открыли страницу продуктов с многочисленными товарами, которые сразу же отбросили, увидев их изображения

На практике мы наблюдаем, как во время юзабилити-теста большинство сайтов выбирают «чистый» дизайн списка. Проблема в том, что очень часто список продуктов содержит слишком мало информации. Это классический пример ложной простоты, поскольку на самом деле пользователю сложнее решить, какие продукты исследовать.

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

На практике это приводит к тому, что пользователи тратят большую часть своего времени на совершенно ненужные продукты и часто

упускают из виду релевантные товары. Неудивительно, что после 3-15 минут поиска иголки в стоге сена пользователи устают, и большинство из них просто сдаются и покидают сайт.

Хотя сайт TigerDirect предоставляет много информации о своих продуктах, они делают это таким образом, что пользователю сложно сканировать и понимать детали продукта (см. нашу статью 3 Key Design Principles for Product Listing Information, чтобы узнать больше о том, как лучше отображать информацию в списке товаров)

Отображение слишком большого количества информации в списке продуктов является гораздо менее распространенной проблемой. Излишняя

информация об элементах списка может привести к тому, что страница будет выглядеть перегруженной, и пользователям будет сложно просмотреть доступные им варианты, поскольку список продуктов будет трудно сканировать.

Короче говоря: слишком много текстовой или визуальной информации о продукте непосредственно в элементах списка сделает список громоздким, но в то же время дополнительная информация может дать пользователю полезные сведения о продукте, необходимые для поиска нужных товаров. Как упоминалось в начале этой статьи, нужно добиться баланса. К счастью, состояние наведения курсора может помочь нам изящно достичь его.

Отображение дополнительных изображений и информации при наведении курсора

Во время юзабилити-тестов, когда сайты отображали альтернативные миниатюры или дополнительную информацию о продукте при наведении курсора мыши, пользователям было намного проще находить соответствующие элементы в списке продуктов.

На сайте IKEA размеры изделия и повторяющиеся кнопки отображаются при наведении курсора. В результате список продуктов выглядел простым, что также позволило передавать много информации о каждом продукте, который может заинтересовать пользователя.

Кроме того, это позволяет пользователю сравнивать продукты в списке друг с другом по двум ключевым атрибутам (эстетика и цена) без наведения курсора

Большим преимуществом раскрытия дополнительной информации при наведении курсора является то, что по умолчанию элементы списка выглядят очень просто. Таким образом, список продуктов удобно просматривать, а наведя курсор можно получить ценную информацию о продукте (которая помогает пользователям находить актуальные товары).

В итоге пользователь получает более управляемый и менее пугающий список продуктов. Кроме того, поскольку дополнительная информация

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

Но какую информацию и изображения мы должны показывать по умолчанию, а какую при наведении курсора?

6 видов информации для отображения при наведении курсора

1) Отрасли, опирающиеся на визуальный контент

При тестировании сайтов, торгующих такими товарами, как одежда и домашний декор, наиболее эффективной комбинацией отображения дополнительного контента при наведении курсора было, как отображение эскиза продукта в «контексте использования», так и версия «вне контекста», показывающая товар на пустом фоне.

Это помогло пользователям легко представить, как продукт может выглядеть в реальном сценарии (контекстная версия), и в то же время позволило им осмотреть продукт, не отвлекаясь на другие вещи.

На сайте H&M, пользователи могут видеть, как контекстную миниатюру «в использовании» (одежда, которую носит модель, первое изображение), так и изолированное изображение товара (второе изображение). Это позволяет пользователям видеть «что они на самом деле покупают» и в то же время посмотреть на продукт во вдохновляющем контексте использования. Последний момент был высоко оценен участниками теста

Изображения вне контекста хороши для сравнения одного продукта с другим, в то время как контекстные изображения могут «продавать» продукты благодаря их эстетике, настроению и образу жизни, как на сайте Marks & Spencer

Результаты тестирования не выявили убедительных доказательств того, что один из этих двух типов изображений должен отображаться по умолчанию, а другой должен быть переведен в состояние наведения курсора – оба варианта показали себя хорошо в зависимости от контекста. Мы установили, что важна последовательность. Поэтому убедитесь, что все элементы списка отображают по умолчанию один вариант, а затем переключаются на другой. Никогда не смешивайте эти два параметра, поскольку отсутствие согласованности вызывало большое разочарование у участников тестирования.

2) Текстовая информация о продукте

Помимо отображения дополнительных изображений в элементе списка (т. е. предоставления дополнительной визуальной информации при наведении курсора), отображение дополнительной текстовой информации о продукте также улучшило список продуктов. В частности, продукты, зависящие от характеристик, часто имеют длинные списки ключевых функций и спецификаций, которые можно отображать в качестве дополнительной информации при наведении курсора. Можно получить относительно «чистое» состояние по умолчанию, если вторичные спецификации продукта будут отображаться только при наведении курсора.

Многим сайтам требуется знание предметной области, чтобы понять определенные спецификации продукта. HP помогает пользователю, объясняя некоторые основные функции и технические термины при наведении курсора

Отображение дополнительной текстовой информации о продукте является отличным способом найти баланс между простыми и чистыми списками продуктов, но при этом дает пользователям возможность выполнить первоначальный просмотр перед тем как решить, посещать страницу продукта или нет. Поэтому элемент списка по умолчанию остается простым и аккуратным, а при наведении курсора можно посмотреть дополнительную информацию о ключевых атрибутах продукта.

Home Depot предоставляет смесь текстовой и визуальной информации, чтобы более подробно сообщить пользователю, что именно доступно в наборе. Это помогает пользователям искать определенный компонент как по названию, так и по внешнему виду

3) Вариации продукта

Если существует несколько вариантов продукта, например, разные цвета, материалы, узоры, размеры или стили, настоятельно рекомендуется указать это в элементе списка по умолчанию, чтобы пользователь знал, что разные варианты можно найти на странице товара. Как правило, это лучше всего сделать, предоставив информационный след. Например, «Доступно 6 размеров», а для цветов, отображая цветные точки или образцы (см. нашу статью How to Implement Interactive Swatches on Mobile Product Listing Pages). Тем не менее, состояние наведения курсора можно использовать для уточнения того, какие типы вариаций продукта пользователь сможет найти.

В состоянии по умолчанию, без наведения курсора, на сайтах Nike и Adidas, сообщают пользователям, что существует несколько вариантов продукта, но как только вы наведете курсор на элемент, появляется галерея изображений с миниатюрами дополнительных вариантов, что значительно повышает вероятность того, что пользователи посетят страницу продукта, даже, если они не заинтересованы в показанном по умолчанию варианте. Обратите внимание, что в обоих приведенных выше примерах образцы доступных цветов отображаются по умолчанию, без наведения курсора

Для визуальных вариаций указание доступных вариантов продукта может быть расширено, чтобы показать миниатюры других вариаций. Это позволяет пользователю лучше понять, как выглядят другие варианты. Это может иметь решающее значение, если есть существенные эстетические различия. Иначе пользователь может посчитать продукт неподходящим или не заслуживающим дальнейшего изучения.

Bang & Olufsen выделяет продукты, которые можно кастомизировать, указав эту информацию при наведении курсора в списке продуктов. Кастомизация может быть привлекательной особенностью для многих продуктов и побудит пользователей узнать больше о товаре

Для текстовых вариаций сводка может быть расширена, чтобы показать фактические значения вариаций. Таким образом, для пары брюк сводка «Доступно 6 размеров» может быть расширена до «Доступно в размерах Slim Fit, High Waist, Low Waist, Skinny Fit, Regular Fit и Loose Fit».

4) Повторяющиеся элементы списка продуктов

Некоторые функции списка продуктов идеально подходят для отображения в качестве дополнительной информации при наведении курсора. Это могут быть повторяющиеся кнопки, такие как «Добавить в корзину», «Список желаний» и «Сравнить» – пользователи все равно не могут нажимать две кнопки одновременно. Информация о несущественных элементах списка обычно включает в себя политики сайта (например, «Доступно онлайн») или предложения по продукту (например, «Распродажа») и добавляется для информирования пользователей или побуждения их совершить покупку. К дополнительным примерам относятся “New Arrival”, “Free Shipping”, “Home Delivery Available”, “Click and Collect Available”, “Pickup Free”, “90 minute delivery” “Buy Online”, “Ship to Store” и т. д.

Поэтому отображение подобных функций при наведении курсора помогает уменьшить визуальный беспорядок, не ограничивая функциональность элемента списка.

Сайт Rakuten отображает при наведении курсора только повторяющиеся функции «Добавить в корзину» и «Добавить в список желаний», а Gilt демонстрирует доступные размеры продукта вместе с повторяющимися элементами интерфейса, такими как кнопка «Добавить в корзину». Постоянное отображение повторяющихся элементов может значительно загромождать интерфейс и смещать фокус с актуальной информации о продукте

В десктопных версиях сайтов, как правило, нет необходимости постоянно отображать несущественные интерактивные элементы, такие как кнопка «Добавить в корзину», функция «Сохранить» или флажок «Сравнить». Вместо этого они могут отображаться, при наведении курсора на отдельный элемент списка.

Помимо уменьшения беспорядка и упрощения сканирования, отображение несущественных элементов при наведении курсора на компьютерах также привлекает внимание пользователей к несущественным элементам именно в тот момент, когда они могут быть полезны – когда пользователь проявляет интерес, наведя курсор на элемент списка, и, таким образом, может выбрать его для сравнения, добавить в корзину или сохранить в списке желаний.

5) Миниатюры, демонстрирующие совместимость

Мы заметили, что в определенных отраслях, опирающихся на спецификации, отображение при наведении курсора дополнительной миниатюры, демонстрирующей совместимость товара может улучшить навигацию по списку продуктов. Например, во время тестирования пользователи выбирали спальные мешки на основе того, «насколько теплыми они выглядят», и подбирали адаптер для ноутбука на основе его внешнего вида, чтобы он подходил к ноутбуку.

Хорошим примером являются сумки для фотоаппаратов, которые выгодно показать, как в закрытом виде (для демонстрации эстетики продукта), так и в открытом виде с камерой внутри (т.е. миниатюра совместимости, демонстрирующая, как продукты подходят друг другу). Это может дать пользователям представление о том, как продукт будет работать по назначению.

В частности, для техники аспекты совместимости обычно требуют обширных знаний в предметной области, пользователи часто полагаются на изображения демонстрирующее сочетание с другими продуктами. Apple знает об этом поведении, поэтому многие аксессуары имеют вспомогательную миниатюру, демонстрирующую совместимость. На примере выше, показаны крупные планы для различных разъемов и подключение адаптеров

Кроме того, дополнительный визуальный слой будет полезен, поскольку пользователи часто пытаются определить совместимость на основе визуальных элементов продукта. Особенно изображения штекеров, портов и подключений могут помочь развеять сомнения пользователей относительно правильности технических названий нужных им разъемов. Дополнительные миниатюры изображений могут предоставить этим пользователям визуальное подтверждение совместимости. Добавление тегов к миниатюрам совместимости может быть частью более широкой структуры базы данных совместимости, а также обеспечить поддержку поиска по совместимости.

Обратите внимание, что, хотя, совместимость определенных продуктов должна отображаться вместе с «зависимым» продуктом (например, объектив камеры часто будет прикрепляться к камере), это может сбить с толку пользователей, так как становится неясно, что на самом деле продается – это комплект камеры с сумкой, или же это просто сумка с образцом камеры, или наоборот? Это может быть сложной дилеммой, которую нужно решить, но хорошо подобранные вторичные миниатюры доказали свою эффективность во время тестирования.

6) Отображение жизненно важных функций

Другое практическое использование дополнительных миниатюр при наведении курсора – выделения ключевой функции продукта в дополнение к обычному изображению вне контекста. Например, при покупке спального дивана пользователи, очевидно, будут интересоваться не только его внешним видом, но также и тем, как он раскладывается для сна. Здесь идеально подойдет миниатюра, отображаемая при наведении курсора.

Сайт Crate & Barrel выделяет ключевую особенность продукта с помощью изображения, показываемого при наведении курсора. Например, разложенный диван или детали тумбочки. Пользователям будет полезно увидеть оба состояния на странице списка продуктов

При рассмотрении основных функций важно отметить, что ключевые функции некоторых продуктов могут быть очевидными. Например, основная функция чехла для ноутбука – его защита. Это не обязательно показывать, если другие аспекты продукта могут быть более актуальны для выделения.

Поэтому жизненно важная функция продукта может меняться в зависимости от контекста пользователя. Например, пользователь, ищущий «спальный диван», вероятно, сочтет аспект удобства сна ключевой функцией. Однако пользователь, который ищет «диван для гостиной», будет больше заинтересован в том, чтобы увидеть диван в контексте использования, поскольку ему интересны другие аспекты продукта. Конечно, это относится не только к поиску, но также может быть адаптировано на основе текущих категорий, а также любых примененных фильтров – всего, что может указывать на интересы или предпочтения пользователя.

Не заходите слишком далеко

Хотя рассмотренные выше эффекты при наведении курсора очень помогают пользователям, а списки продуктов без таких функций (в настоящее время 70% сайтов), как правило, вызывают гораздо больше ненужных перемещений по списку, важно не переусердствовать с ними.

Хотя может показаться заманчивым, особенно в отраслях, опирающихся на визуальный контент, перевести почти весь текст в состояние наведения курсора, юзабилити-тесты показали, что это может привести к серьезным проблемам юзабилити. Когда базовая информация о продукте переводится в состояние наведения, пользователям очень трудно быстро просматривать список продуктов и оценивать релевантность каждого товара.

Ранний дизайн списка товаров на сайте Ann Taylor довел ситуацию до крайности, убрав всю текстовую информацию о продукте (включая цену!) из состоянии по умолчанию, показывая ее только при наведении курсора

Когда ключевые атрибуты продукта постоянно отображаются в списке продуктов, пользователь может бегло просмотреть список и провести базовые сравнения. Скажем, «Цена» переводится в состояние наведения курсора в качестве вторичной информации, пользователь должен будет навести указатель мыши на каждый продукт в списке, чтобы узнать цену, запоминая положение всех товаров, которые имеют для него малейший интерес.

А что с сенсорными устройствами?

На мобильном сайте Under Armour выбирается отображение релевантной информации прямо на странице списка продуктов (например, использование образцов для обозначения вариантов товара) и включает повторяющиеся элементы, такие как функция «Список желаний» (хотя и не в центре изображения, чтобы избежать непреднамеренных нажатий)

На сенсорных устройствах состояние наведения курсора отсутствует. Так, как мы можем решить эту проблему в дизайнах для смартфонов и планшетов?

Данные наших широкомасштабных исследований в области мобильной электронной коммерции и юзабилити списка продуктов показывают, что дополнительные данные просто не должны отображаться в мобильных списках продуктов. На самом деле это связано с принципом «не заходите слишком далеко», то есть отображайте вторичную информацию только при наведении курсора.

Любая базовая информация о продукте должна постоянно отображаться в элементе списка, иначе эффект наведения курсора в конечном итоге принесет больше вреда, чем пользы. Таким образом, дополнительная информация при наведении курсора должна рассматриваться как «бонусный» контент, который может предоставить пользователю еще больше информации о продукте, но он не должен быть необходим для базовой интерпретации товара.

Теперь, возвращаясь к дизайну мобильных сайтов, попытка отобразить этот «бонусный контент» приводит к одной из двух проблем:

• Добавлены в представление по умолчанию – если вторичная информация добавлена по умолчанию в мобильные списки продуктов, она часто разрушает их. Добавление дополнительного контента делает элементы списка слишком большими, а это означает, что очень немногие из них поместятся в окне просмотра пользователя, что, в свою очередь, приведет к потере обзора. На практике мы наблюдаем, что проблемы с навигацией возникают, когда элемент списка занимает 50% или более от высоты области просмотра.
• Появляются при нажатии – альтернатива, которая также плохо работает, заключается в том, что первое «нажатие» на элемент списка открывает «дизайн наведения курсора». Это нарушает ожидания пользователя о том, как работает список товаров – пользователь ожидает, что его перенаправят на страницу товара. По сути, это разновидность функции «быстрого просмотра», и поэтому она сталкивается с теми же проблемами, связанными с увеличением концептуальной сложности иерархии списка продуктов, что, по нашему мнению, пользователям очень труднопонять даже в десктопной среде.

Дополнительная информация при наведении курсора должна рассматриваться как «прогрессивное улучшение» дизайна элемента списка. На устройствах, поддерживающих наведение курсора пользователям предоставляется интерфейс, включающий вторичную информацию. На устройствах, где контекст не позволяет этого (небольшой экран и отсутствие состояния наведения курсора), мы удаляем дополнительный слой информации. То есть, на сенсорных устройствах, нажав элемент списка один раз, вы попадете на страницу продукта. (Это в принципе похоже на то, что мы рассмотрели в нашей статье об отзывчивом масштабировании esponsive, где пользователям на больших десктопных мониторах предоставляется расширенный интерфейс).

Резюме: отображение вторичной информации при наведении курсора

Сайт Macy использует состояние наведения курсора, чтобы показать пользователю галерею изображений продуктов, что позволяет им видеть несколько изображений без необходимости посещения страницы с описанием продукта

Наличие дополнительного слоя текстовой или визуальной информации, отображаемой при наведении курсора может существенно улучшить способность пользователя просматривать и оценивать товары из списка.

Во время юзабилити-тестирования дополнительная информация, отображаемая при наведении курсора, помогала пользователям тратить меньше времени, что, в свою очередь, позволило проводить больше времени на страницах актуальных продуктов. Это в свою очередь повысило уровень успешности поиска нужных продуктов. Тем не менее, наш тест показывает, что только 3% сайтов электронной коммерции отображают дополнительную текстовую информацию при наведении курсора, а 28% показывают дополнительные изображения.

Вторичная информация, отображаемая при наведении курсора может быть особенно полезна для:

1. Продуктов, опирающихся на визуальный контент– рассмотрите возможность показа как изображения вне контекста, так и изображений в контексте использования, поскольку это дает пользователям эстетически богатый опыт и возможность визуального сравнения. (Внимание: будьте последовательны в том, какой тип изображения отображается по умолчанию).
2. Продуктов, опирающихся на спецификации – может отображаться дополнительная текстовая информация о продукте для упрощения поиска. Обычно это характеристики продукта, не отображаемые по умолчанию, например, материалы и размеры, в то время как базовая информация, такая как марка, тип продукта и цена, должна отображаться по умолчанию.
3. Вариаций продукта – если элемент существует в нескольких вариантах, рассмотрите возможность показать один или несколько вариантов. Особенно важны визуальные вариации, поскольку в противном случае пользователи могут проигнорировать товар, когда для проверки доступно только одно изображение по умолчанию.
4. Повторяющихся функций элемента списка – рассмотрите возможность перемещения статических элементов, повторяемых для каждого отдельного продукта, в состояние наведения курсора. Например, «Добавить в корзину», «Сохранить в список желаний», «Сравнить» и т. д. Это может значительно улучшить отношение сигнал / шум в списке продуктов.
5. Миниатюр, связанных с совместимостью. Подумайте о том, чтобы добавить дополнительную миниатюру, чтобы выделить различные аспекты продукта, связанные с совместимостью.
6. Отображения ключевых функций. Используйте наведение курсора для элементов, имеющих ключевую функцию или компонент, которые могут быть полезны пользователям, чтобы выделить эту функцию в списке продуктов.

И снова: не забывайте отображать вторичную информацию только при наведении курсора. Не заходите слишком далеко, это принесет больше вреда, чем пользы, так как информация не будет доступна на сенсорных устройствах, не имеющих состояние наведения курсора. Считайте это «бонусной информацией», прогрессивным улучшением для устройств, где она может быть реализована соответствующим образом.

---

Перевод статьи baymard.com

отображать информацию об объектах при наведении курсора мыши в настраиваемых приложениях ArcGIS

Back to results

Print Share

Be The First To Get Support Updates

Want to know about the latest technical content and software updates?

Get Notifications

Back to top

Summary

При создании интерактивной карты с помощью настраиваемых приложений ArcGIS, таких как Minimalist, Media Map или Attachment Viewer, полезно разрешить пользователям наводить курсор на объекты карты для отображения информации об объектах во всплывающем окне, всплывающей панели или надписи без щелчка мышью. В этой статье подробно описаны действия по отображению информации об объектах с помощью наведения курсора в настраиваемых шаблонах приложений Minimalist, Media Map и Attachment Viewer.

Procedure

В настраиваемом приложении Minimalist

Включите всплывающие окна при наведении курсора в настраиваемом приложении Minimalist, чтобы отображать информацию об объектах во всплывающем окне или панели при наведении курсора на объект на карте.

1. Войдите в ArcGIS Online и создайте настраиваемое приложение Minimalist. Обратитесь к ArcGIS Online: Создание приложения с Настраиваемыми приложениями для получения дополнительной информации.
2. В настраиваемом приложении Minimalist на боковой панели щелкните Полная установка.

Примечание: По умолчанию активирована Быстрая установка, и боковая панель свернута.

3. Когда будет предложено, щелкните Переключить.
4. На боковой панели щелкните Интерактивность> Исследовать/Навигация.

Примечание: В качестве альтернативы щелкните на боковой панели Поиск, найдите и щелкните Включить отображение всплывающего окна по наведении курсора.

5. Включите опцию Включить отображение всплывающего окна по наведении курсора, чтобы отображать всплывающее содержание при наведении курсора на объекты карты без щелчка мыши.

6. Щелкните Опубликовать..

На изображении ниже показана информация об объекте, отображаемая во всплывающем окне на карте при наведении курсора на объект.

Примечание: В качестве альтернативы на вкладке Описание на боковой панели включите опцию Панель всплывающих окон в разделах Легенда, Детали и Всплывающие панели, чтобы просматривать информацию об объектах на всплывающей панели при наведении курсора на объекты карты.

В настраиваемом приложении Media Map

Включите всплывающие окна при наведении курсора в настраиваемом приложении Media Map, чтобы отображать информацию об объектах во всплывающем окне при наведении курсора на объект на карте.

1. Войдите в ArcGIS Online и создайте настраиваемое приложение Media Map. Обратитесь к ArcGIS Online: Создание приложения с Настраиваемыми приложениями для получения дополнительной информации.
2. В настраиваемом приложении Media Map на боковой панели щелкните Полная установка.

3. Когда будет предложено, щелкните Переключить.
4. На боковой панели щелкните Описание> Местоположение подробно.
5. Включите опцию Включить отображение всплывающего окна по наведении курсора, чтобы во всплывающем окне отображалась информация об объектах при наведении курсора на объекты карты без щелчка мыши.

6. Щелкните Опубликовать..

На изображении ниже показана информация об объекте, отображаемая во всплывающем окне на карте при наведении курсора на объект.

Настраиваемое приложение Attachment Viewer

Включите надписи объектов при наведении курсора в настраиваемом приложении Attachment Viewer, чтобы отображать информацию об объектах во всплывающей надписи при наведении курсора на вложение объекта на информационной панели.

1. Войдите в ArcGIS Online и создайте настраиваемое приложение Attachment Viewer. Обратитесь к ArcGIS Online: Создание приложения с Настраиваемыми приложениями для получения дополнительной информации.
2. В настраиваемом приложении Attachment Viewer на боковой панели щелкните Полная установка.
3. Когда будет предложено, щелкните Переключить.
4. На боковой панели щелкните Тема и компоновка.
5. Под Компоновкой приложения щелкните ниспадающий список и выберите Ориентированная на карту.

Примечание: По умолчанию выбрана компоновка Ориентированная на вложение, а надпись объекта при наведении курсора не поддерживается.

6. На боковой панели щелкните Описание> Местоположение подробно.
7. Включите опцию Надпись объекта, чтобы отображать информацию об объекте в надписи на карте при наведении курсора на вложение на информационной панели.

8. Щелкните Опубликовать.

Примечание: Обратитесь к шагу 4 этой документации, чтобы настроить всплывающий заголовок слоя в Map Viewer для отображения необходимой информации в надписи объекта при наведении курсора в настраиваемом приложении Attachment Viewer. 

На изображении ниже показана надпись объекта, отображаемая на карте при наведении курсора на вложение на информационной панели.

Related Information

• Блог ArcGIS: Просматривайте вложения векторных слове с помощью Attachment Viewer
• Практическое руководство: Отображение всплывающих окон при наведении мыши в ArcGIS API for JavaScript 4.x
• Как: включить всплывающие окна при наведении курсора в Esri Story Map
• ArcGIS Online: Создайте приложение с помощью Настраиваемых приложений
• ArcGIS Online: Выбор шаблона Настраиваемых приложений ArcGIS
• GeoNet: Отображение атрибутов данных в ArcGIS Online при наведении курсора

Last Published: 3/15/2021

Article ID: 000025223

Software: Configurable Web Apps Zone. Look.up, time.aware.2016, time.aware.2015, time.aware.2012, summary.viewer, story.map.tour, story.map.swipe.and.spyglass, story.map.shortlist, story.map.series, story.map.journal, story.map.crowdsource, story.map.cascade, story.map.basic.2015, story.map.basic.2012, simple.scene.viewer, simple.map.viewer.2014, simple.map.viewer.2012, scene.styler, public.information, public.gallery, Nearby, minimalist.2016, minimalist.2015, minimal.gallery, media.map, maps.and.apps.gallery, map.tools, map.styler, map.carousel, local.perspective, live.map.beta, layer.showcase, Interactive.Legend, information.lookup, impact.summary, imagery.viewer, image.visit, image.mask, image.interpretation, Geoform, geo.list, finder.2014, finder.2013, find.edit.filter.march.2014, find.edit.filter.july.2014, filter.2014, filter.2012, elevation.profile.2015, elevation.profile.2013, elevation.profile.2012, edit.2015, edit.2013, Directions, Current, crowdsource.reporter, crowdsource.polling, crowdsource.manager, compare.scenes, compare. analysis.2015, compare.analysis.2013, compare, classic.viewer, category.gallery, Basic.Viewer.2016, Basic.Viewer.2014, Attachment.Viewer, 3d.data.visualization

Download the Esri Support App on your phone to receive notifications when new content is available for Esri products you use

Download the Esri Support App on your phone to receive notifications when new content is available for Esri products you use

Is This Content Helpful?

Yes

No

How can we make this better? Please provide as much detail as possible.

Translation Feedback

How can we make this translation better?

Get notified about latest updates to this technical article?

Do you want to Unsubscribe?

Приложение

Home Measurement создает 3D-модель из фотографий

Зарегистрироваться

Войти

Измеряйте, проектируйте и оценивайте проекты по внешнему благоустройству дома в одном месте.

Сделайте несколько фотографий

Используйте наше мобильное приложение, чтобы сфотографировать свой дом с нескольких точек. Мы автоматически загрузим их в облако и возьмем оттуда.

Преобразуйте свои фотографии

Используя нашу запатентованную технологию, мы преобразуем ваши фотографии в полностью измеренную и настраиваемую 3D-модель. Мы сообщим вам, когда он будет готов.

Просмотр измерений

Получите доступ ко всем измерениям крыши и сайдинга в рамках 3D-модели в нашем приложении или онлайн. Или экспортируйте через PDF, Excel или другие форматы файлов.

Дизайн в 3D

Измените крышу, сайдинг и окна, используя настоящие материалы таких брендов, как GAF, JamesHardie и Alside. Посмотрите готовый проект с нашей полностью общедоступной 3D-моделью.

Сделайте несколько фотографий

Используйте наше мобильное приложение, чтобы сфотографировать свой дом с нескольких точек. Мы автоматически загрузим их в облако и возьмем оттуда.

Преобразуйте свои фотографии

Используя нашу запатентованную технологию, мы преобразуем ваши фотографии в полностью измеренную и настраиваемую 3D-модель. Мы сообщим вам, когда он будет готов.

Просмотр измерений

Получите доступ ко всем измерениям крыши и сайдинга в рамках 3D-модели в нашем приложении или онлайн. Или экспортируйте через PDF, Excel или другие форматы файлов.

Дизайн в 3D

Измените крышу, сайдинг и окна, используя настоящие материалы таких брендов, как GAF, JamesHardie и Alside. Посмотрите готовый проект с нашей полностью общедоступной 3D-моделью.

Правильный инструмент для правильной работы

Особенности

---

Точность «с точностью до дюйма» при всех полных наружных измерениях, включая все кровельные, сайдинговые, оконные, поверхности и проемы.

---

Делайте снимки в любом порядке и делайте столько снимков, сколько захотите. Просмотрите и отредактируйте перед отправкой для создания 3D-модели. Задокументируйте свою собственность с помощью бесплатного хранилища фотографий.

---

Попробуйте новые варианты отделки и цвета в точной 3D-модели вашего дома. Добавьте каменный фасад, специальные акценты, например, качели на фронтоне, замените лепнину или исследуйте новые цветовые сочетания.

---

Снимайте и храните фотографии недвижимости бесплатно, а также в любое время в будущем закажите измерения и 3D-модель.

---

Экспортируйте свои измерения, чтобы помочь с оценкой в ​​форматах PDF, Excel, JSON или XML. Экспортируйте свою 3D-модель в популярные типы САПР: SKP, DXF, DWG. Экспортируйте все свои фотографии на свой компьютер.

---

Пригласите любого сотрудника вашей компании с Pro Connect для максимальной гибкости рабочего процесса.

---

Точные оценки для нескольких сделок за секунды, которые отражают сложность работы и индивидуальные цены.

---

Все ресурсы, необходимые для выполнения работы в одном месте, от подробных смет и контрактов до измерений и экономических расчетов.

---

Точные, предварительно заполненные списки материалов для нескольких профессий, которые отражают ваши уникальные предпочтения по установке для конкретного проекта.

---

---

Все размеры и чертежи каждой высоты, необходимые специалисту по благоустройству дома. Софит, фасция и обшивка легко просматриваются, что позволяет быстрее, точнее и прозрачнее проводить оценки.

---

Делайте снимки в любом порядке и делайте столько снимков, сколько захотите. Просмотрите и отредактируйте перед отправкой для создания 3D-модели. Задокументируйте свою собственность с помощью бесплатного хранилища фотографий.

---

HOVER подходит для домов на одну семью, таунхаусов и многоквартирных жилых домов. Узкие участки, городские или сельские районы, даже с небольшой растительностью или препятствиями.

---

Пригласите домовладельцев сфотографировать свой дом для удаленной оценки или просто получить 3D-модель и выполнить измерения перед первой встречей. Узнать больше

---

От CRM до управления проектами и оценки — наши партнеры по интеграции помогут вам оптимизировать рабочий процесс. См. наши партнерские интеграции.

---

Без проблем работает на вашем компьютере и смартфоне. Получите доступ к своим данным HOVER из полевого или домашнего офиса в любом месте, в любое время, на любом устройстве Apple или Android.

---

Создавайте предложения в собственном шаблоне без ручного ввода и получайте цифровые подписи прямо на месте.

---

Легко заказывайте у ведущих поставщиков, таких как Beacon Pro+, одним щелчком мыши, и ваши списки материалов автоматически заполнятся вашей корзиной для удобной проверки, не покидая платформы HOVER.

---

Создавайте рабочие задания одним щелчком мыши, которые отражают конкретные потребности проекта в установке.

---

---

Точность «с точностью до дюйма» для всех полных наружных измерений, включая всю кровлю, сайдинг, окна, поверхности и проемы.

---

Все размеры и чертежи каждой высоты, необходимые специалисту по благоустройству дома. Софит, фасция и обшивка легко просматриваются, что позволяет быстрее, точнее и прозрачнее проводить оценки.

---

Делайте снимки в любом порядке и делайте столько, сколько хотите. Просмотрите и отредактируйте перед отправкой для создания 3D-модели. Задокументируйте свою собственность с помощью бесплатного хранилища фотографий.

---

Делайте снимки в любом порядке и делайте столько снимков, сколько захотите. Просмотрите и отредактируйте перед отправкой для создания 3D-модели. Задокументируйте свою собственность с помощью бесплатного хранилища фотографий.

---

Попробуйте новые варианты отделки и цвета в точной 3D-модели вашего дома. Добавьте каменный фасад, специальные акценты, например, качели на фронтоне, замените лепнину или исследуйте новые цветовые сочетания.

---

HOVER подходит для домов на одну семью, таунхаусов и многоквартирных жилых домов. Узкие участки, городские или сельские районы, даже с небольшой растительностью или препятствиями.

---

Снимайте и храните фотографии недвижимости бесплатно, а также в любое время в будущем закажите измерения и 3D-модель.

---

Пригласите домовладельцев сфотографировать свой дом для удаленной оценки или просто получить 3D-модель и выполнить измерения перед первой встречей. Узнать больше

---

Экспортируйте свои измерения, чтобы помочь с оценкой в ​​форматах PDF, Excel, JSON или XML. Экспортируйте свою 3D-модель в популярные типы САПР: SKP, DXF, DWG. Экспортируйте все свои фотографии на свой компьютер.

---

От CRM до управления проектами и оценки — наши партнеры по интеграции помогут вам оптимизировать рабочий процесс. См. наши партнерские интеграции.

---

Пригласите любого сотрудника вашей компании с Pro Connect для максимальной гибкости рабочего процесса.

---

Без проблем работает на вашем компьютере и смартфоне. Получите доступ к своим данным HOVER из полевого или домашнего офиса в любом месте, в любое время, на любом устройстве Apple или Android.

---

Точные оценки для нескольких сделок за секунды, которые отражают сложность работы и индивидуальные цены.

---

Создавайте предложения в собственном шаблоне без ручного ввода и получайте цифровые подписи прямо на месте.

---

Все ресурсы, необходимые для выполнения работы в одном месте, от подробных смет и контрактов до замеров и экономических расчетов.

---

Легко заказывайте у ведущих поставщиков, таких как Beacon Pro+, одним щелчком мыши, и ваши списки материалов автоматически заполнятся вашей корзиной для удобной проверки, не покидая платформы HOVER.

---

Точные, предварительно заполненные списки материалов для нескольких профессий, которые отражают ваши уникальные предпочтения при установке для конкретного проекта.

---

Создавайте рабочие задания одним щелчком мыши, которые отражают конкретные потребности проекта в установке.

---

Готовы увидеть возможности?

Если вас впечатлили эти функции, вам есть, чем порадоваться.

О HOVER | Познакомьтесь с командой

Зарегистрироваться

Войти

С помощью нескольких фотографий со смартфона вы можете получить интерактивную 3D-модель любого дома.

HOVER создает точно измеренные, настраиваемые 3D-модели домов из фотографий смартфона. Домовладельцы могут визуализировать проект до его начала, а профессионалы экономят время и деньги, будучи более прозрачными и совместными.

Инструменты проектирования для домовладельцев

Выберите и посмотрите реальные продукты — кровлю, сайдинг, окна и многое другое — на виртуальной 3D-модели вашего дома.

Улучшение дома — это большое дело — мы избавляемся от догадок.

Инструменты повышения производительности для профессионалов

Более простые и точные измерения, автоматические оценки, заполненные выборки и прямой заказ облегчают вашу работу.

Делайте больше, работая умнее, а не усерднее.

Сотрудничество в лучшем виде

Домовладельцы и профессионалы могут использовать наши инструменты вместе — виртуально или лично — для выбора материалов, составления смет и подписания предложений.

Прозрачное сотрудничество укрепляет доверие и приводит к честной и справедливой сделке для всех.

Инструменты проектирования для домовладельцев

Выбирайте и смотрите реальные продукты — кровлю, сайдинг, окна и многое другое — на виртуальной 3D-модели вашего дома.

Улучшение дома — это большое дело — мы избавляемся от догадок.

Инструменты повышения производительности для профессионалов

Более простые и точные измерения, автоматические оценки, заполненные выборки и прямой заказ облегчают вашу работу.

Делайте больше, работая умнее, а не усерднее.

Лучшее сотрудничество

Домовладельцы и профессионалы могут использовать наши инструменты вместе — виртуально или лично — для выбора материалов, составления смет и подписания предложений.

Прозрачное сотрудничество укрепляет доверие и приводит к честной и справедливой сделке для всех.

Вопросы конфиденциальности

Домовладельцы постоянно контролируют доступ к своим личным данным.

См. нашу Политику конфиденциальности

Наши ценности

Руководящие принципы, определяющие не только то, что мы делаем, но и то, как мы это делаем.

---

Подумай.

Чтобы улучшить то, как обустройство дома происходит для домовладельцев и профессионалов, мы делимся нашими разнообразными взглядами, подвергаем сомнению предположения и подталкиваем друг друга к инновациям.

---

До.

У нас сильный уклон в сторону действия. Мы работаем над тем, чтобы превратить превосходное мышление в продукты, которые поражают наших клиентов, и мы учимся и адаптируемся на этом пути.

---

Подача.

Мы руководствуемся принципами лидерства и прозрачности. Независимо от того, работаете ли вы с коллегами, обслуживаете наших клиентов или участвуете в общественной работе, расширение прав и возможностей других посредством обслуживания является частью нашей основной деятельности.

---

---

Подумай.

---

До.

---

Серв.

Чтобы улучшить то, как обустройство дома происходит для домовладельцев и профессионалов, мы делимся нашими разнообразными взглядами, подвергаем сомнению предположения и подталкиваем друг друга к инновациям.

У нас сильное стремление к действию. Мы работаем над тем, чтобы превратить превосходное мышление в продукты, которые поражают наших клиентов, и мы учимся и адаптируемся на этом пути.

Мы руководствуемся принципами лидерства и прозрачности. Независимо от того, работаете ли вы с коллегами, обслуживаете наших клиентов или участвуете в общественной работе, расширение прав и возможностей других посредством обслуживания является частью нашей основной деятельности.

---

---

Подумай.

Чтобы улучшить то, как обустройство дома происходит для домовладельцев и профессионалов, мы делимся нашими разнообразными взглядами, подвергаем сомнению предположения и подталкиваем друг друга к инновациям.

---

До.

У нас сильный уклон в сторону действия. Мы работаем над тем, чтобы превратить превосходное мышление в продукты, которые поражают наших клиентов, и мы учимся и адаптируемся на этом пути.

---

Подача.

Мы руководствуемся принципами лидерства и прозрачности. Независимо от того, работаете ли вы с коллегами, обслуживаете наших клиентов или участвуете в общественной работе, расширение прав и возможностей других посредством обслуживания является частью нашей основной деятельности.

---

Присоединяйтесь к нашей команде

Узнать больше

Штаб-квартира HOVER находится в Сан-Франциско, офис — в Рочестере, штат Нью-Йорк, а сотрудники — в США.

Работа с США

11

лет инноваций

4.7

Glassdoor Rating

1,1 M

Загрузки приложений

200+

Hover Dog технологии, страхование и обустройство дома, в том числе некоторые из них, которые также являются нашими клиентами.