Kunden mit der Vogelperspektive ansprechen

In diesem Dokument werden verschiedene Designmuster und Ideen beschrieben, um Ihnen den Einstieg in die Luftansicht zu erleichtern. Die Präsentation von „Bird’s Eye View“ für Ihre Kunden muss sorgfältig durchdacht werden, damit Sie eine gute Interaktion mit dem Produkt erzielen und Ihre Kunden den Wert erkennen.

Aerial View fügt Ihrer Website eine visuell ansprechende Komponente hinzu, die eine Immobilie und ihre Umgebung aus der Vogelperspektive zeigt.

Wenn Nutzer eine Unterkunft in 3D sehen, können sie sich ein besseres Bild von ihrem Standort und ihrer Größe machen. Neben nahe gelegenen Elementen wie Straßen, Gewässern, Bergen oder Parks sollten auch die Merkmale der Immobilie hervorgehoben werden, z. B. ein Pool, Nebengebäude oder ein großer Garten.

Mehr Interaktionen

Die Vogelperspektive ist ein Wow-Faktor für Ihre Kunden. Damit Sie die Vorteile voll ausschöpfen können, müssen die Inhalte so einfach wie möglich zu finden sein. In diesem Abschnitt werden wir einige Implementierungsdesignmuster für die Vogelperspektive besprechen, mit denen Sie dies erreichen können.

Videoausrichtung

Berücksichtigen Sie dabei die Bildschirmausrichtung des Geräts, auf dem das Aerial View-Video geladen wird. Die Darstellung eines im Querformat aufgenommenen Videos auf einem Mobilgerät kann die Nutzerfreundlichkeit beeinträchtigen, insbesondere im Vollbildmodus. Wenn du ein Video mit dem falschen Seitenverhältnis für das Gerät wiedergibst, wird ein erheblicher Teil des Bildschirms verschwendet.

Aerial View-Videos sind im Quer- und Hochformat verfügbar.

Unten sehen Sie ein Beispiel für den Unterschied zwischen der empfohlenen und der nicht empfohlenen Ausrichtung der Draufsicht auf einem Mobilgerät:

Animiertes GIF mit zwei Geräten, eines im Hoch- und das andere im Querformat Auf beiden Geräten wird das Video im Hochformat angezeigt. Unter dem Hochformat-Gerät wird empfohlen, unter dem Querformat wird nicht empfohlen.

Eingebettete Minikarte

Wenn Sie mehrere Unterkünfte in einer Unterkunftssuche anzeigen, ist es hilfreich, eingebettete Infofelder hinzuzufügen, um das Video mit der Vogelperspektive mit zusätzlichen Informationen zur Unterkunft wie Adresse und Preis einzublenden. So können sich Nutzer schnell und einfach einen Eindruck von der Unterkunft verschaffen, ohne zur Seite mit den Unterkunftsdetails klicken zu müssen.

Im folgenden Beispiel sehen Sie eine Markierung für den Googleplex-Komplex in Mountain View. Wenn Sie den Mauszeiger auf diese Markierung bewegen, wird die Minikarte mit dem Video der Unterkunft in der Vogelperspektive angezeigt.

Animiertes GIF mit einer Karte mit einem Infofeld mit einem Video aus der Vogelperspektive des Googleplex-Komplexes Diese Minikarte wird angezeigt, wenn der Cursor auf die entsprechende Markierung bewegt wird.

Sowohl der Markierung als auch dem eingebetteten Mini-Infofeld kann das Ereignis onClick hinzugefügt werden, um den Nutzer zur Seite mit den Details zur Unterkunft weiterzuleiten. So können Nutzer mehr über die Unterkunft erfahren und entscheiden, ob sie für sie geeignet ist.

Eine ansprechende Website für Ihre Unterkunft erstellen

Wenn Sie potenziellen Käufern ein wirklich immersives Erlebnis bieten möchten, können Sie Ihre Immobilie mit einer geschichtenähnlichen Präsentation präsentieren, die Fotos und ein Luftaufnahmevideo kombiniert.Diese kann ähnlich wie ein Bildkarussell erstellt werden, wobei eine Mischung aus HTML, CSS und JavaScript verwendet wird.

Animiertes GIF mit einem Beispiel für ein Video mit einer Luftaufnahme, das im Hochformat in einer Art Story angezeigt wird. Das Video mit der Luftaufnahme befindet sich auf der zweiten Folie und unten ist die Schaltfläche „Gebäude ansehen“ zu sehen.

Im obigen Beispiel haben wir das Video mit der Drohnenaufnahme auf einer der Folien eingefügt und unten einen Link zu weiteren Details zur Unterkunft hinzugefügt. Über diese Schaltfläche sollte der Nutzer zur Detailseite der Unterkunft weitergeleitet werden.

So funktionierts:

  1. Wählen Sie die gewünschten Fotos aus. Wählen Sie eine Vielzahl von Fotos aus, die die besten Merkmale Ihrer Unterkunft hervorheben.
  2. Erstellen Sie ein Aerial View-Video.
  3. Kombinieren Sie Ihre Fotos und Videos zu einer Story.
  4. Teilen Sie Ihre Geschichte. Erzählen Sie potenziellen Käufern Ihre Geschichte auf Ihrer Website oder per E-Mail-Marketing.

Wenn Sie Ihre Showcase-Property so ansprechend wie möglich gestalten, können Sie die Aufmerksamkeit potenzieller Käufer auf sich ziehen.

Vogelperspektive beim Laden der Seite starten

In den UX-Tests von Google haben wir festgestellt, dass die höchste Nutzerinteraktion auftritt, wenn die 3D-Ansicht standardmäßig geladen wird. Da dies ein neuer und interessanter Formfaktor ist, möchten wir ihn laden, sobald sich ein Kunde die Details der Immobilie ansehen möchte. Beim Abrufen eines Aerial View-Videos über die API fallen Kosten an. Wenn das Video angefordert wurde, sollten Sie die automatische Wiedergabe aktivieren, damit Ihre Nutzer den Vorteil sehen.

Anti-Muster: Wenn die Vogelperspektive hinter einer Schaltfläche versteckt ist, wird dies als Anti-Muster betrachtet, da Nutzer einen zusätzlichen Schritt ausführen müssen, um die 3D-Ansicht aufzurufen. Das kann frustrierend sein und dazu führen, dass Nutzer die Vorteile von 3D-Ansichten nicht nutzen oder die Vogelperspektive für statische Inhalte halten.

Wir empfehlen, die Vogelperspektive standardmäßig zu laden, wenn ein Kunde die Details der Unterkunft ansehen möchte. Dies sorgt für eine positive Nutzererfahrung und hilft ihnen, eine fundierte Entscheidung über die Unterkunft zu treffen. Beachten Sie beim Entwerfen der Autoplay-Funktion, dass das Video mit der Vogelperspektive mehr als 30 MB groß ist und bei einigen Nutzern möglicherweise langsam geladen wird.

Wenn Sie auf Ihrer Seite ein Bildkarussell haben, kann das Video mit der Draufsicht als Hauptelement eingefügt werden. So können Sie die 3D-Ansicht ganz einfach in Ihr vorhandenes Website-Design einbinden.

Beispiel für eine Schaltfläche, die zum Aufrufen der Vogelperspektive verwendet werden kann, neben einer vorhandenen Schaltfläche zum Aufrufen von Fotos

Schaltflächen zum Laden von 3D-Ansichten sind einfach zu implementieren, können aber die Interaktion beeinträchtigen. In Google Maps werden standardmäßig 3D-Ansichten geladen. Wenn Sie beispielsweise nach dem Empire State Building suchen, wird die 3D-Ansicht automatisch geladen. Sie können sich dann eine Teilansicht der Bilder ansehen, während Sie sich noch in der 3D-Ansicht befinden. So können Sie Nutzern ein immersiveres und ansprechenderes Erlebnis bieten.

Schaltflächendesign

Wenn Sie sich für den Zugriff auf die Vogelperspektive über eine Schaltfläche entscheiden, ist Folgendes wichtig:

  • Standort: Die Schaltfläche sollte mit anderen kartenbezogenen Schaltflächen gruppiert werden, damit Nutzer wissen, dass sie sich auf den Standort der Unterkunft bezieht.
  • Übergang: Der Übergang zum Video sollte flüssig und nahtlos sein. Wenn es auf der Seite bereits einen Abschnitt mit Bildern, Karten und Street View gibt, sollte das Aerial View-Video im selben Bereich angezeigt werden.
  • Hervorheben: Da die Schaltfläche neu auf der Seite ist, solltest du sie mit einem „Neue Funktion“-Tag oder einem Standbild-Thumbnail des Videos hervorheben.
  • Emphasis Die Schaltfläche sollte mit mittlerer oder hoher Betonung gestaltet sein, da durch Drücken eine wichtige Aktion ausgeführt wird. Google Material Design bietet einige Hinweise dazu, wie Schaltflächen mit unterschiedlicher Betonung gestaltet werden können.

Hier sind einige weitere Tipps für die Gestaltung einer effektiven Schaltfläche für die Vogelperspektive:

  • Verwenden Sie eine klare und prägnante Sprache. Die Schaltfläche sollte klar beschriftet sein, damit Nutzer wissen, wozu sie dient.
  • Verwenden Sie eine große und gut lesbare Schrift. Die Schaltfläche sollte groß genug sein, damit Nutzende sie leicht sehen und darauf klicken können.
  • Verwenden Sie eine Kontrastfarbe. Die Schaltfläche sollte eine andere Farbe als der umgebende Text und Hintergrund haben, damit sie auffällt.
  • Verwenden Sie einen Call-to-Action. Die Schaltfläche sollte einen klaren Call-to-Action enthalten, z. B. „Luftbild ansehen“ oder „Video ansehen“.

Displaykampagnen

Video wird geladen

Sie können langsamere Verbindungen berücksichtigen, indem Sie eine Standbildvorschau des Videos anzeigen und das vollständige Video erst bei einer Nutzerinteraktion wie „onClick“ laden. Neben dem Aerial View-Video haben Sie auch Zugriff auf ein Thumbnail, das Sie dafür verwenden können.

Du hast auch Zugriff auf das Video mit verschiedenen Auflösungen, sodass diese strategisch eingesetzt werden können, um die Zeit zu minimieren, die der Nutzer bei unterschiedlichen Verbindungsgeschwindigkeiten auf das Laden des Inhalts warten muss.

Logo-Attributionen

Wenn Sie die Funktion „Aerial View“ implementieren, müssen Sie alle Nutzungsbedingungen einhalten, einschließlich der Logo-Attribution. Weitere Informationen finden Sie auf dieser Seite.

Fazit

Wir hoffen, dass Ihnen dieser Artikel Anregungen gegeben hat, um darüber nachzudenken, wie Sie Aerial View auf Ihrer Website mit hoher Nutzerinteraktion implementieren können.

Überlegen Sie, wie Ihre Nutzer die Inhalte finden und in welchem Format sie am besten präsentiert werden sollten. Du solltest auch den Gerätetyp berücksichtigen, auf dem das Video abgespielt wird, insbesondere die Bildschirmausrichtung, und die Verbindungsgeschwindigkeit des Nutzers.

Nächste Schritte

Empfohlene weiterführende Informationen:

Beitragende

Dieser Artikel wird von Google gepflegt. Er wurde von den folgenden Beitragenden verfasst.

Hauptautor:

Henrik Valve | Google Maps Platform Solutions Engineer