Kunden mit der Vogelperspektive ansprechen

In diesem Dokument werden verschiedene Designmuster und Ideen beschrieben, die Ihnen den Einstieg in die Entwicklung von Luftaufnahmen erleichtern sollen. Die Art und Weise, wie Sie Ihren Kunden die 3D-Ansicht präsentieren, muss sorgfältig überlegt werden, damit Sie eine gute Interaktionsrate mit dem Produkt erzielen und Ihre Kunden den Wert der 3D-Ansicht erkennen.

Mit der Funktion „Vogelperspektive“ können Sie Ihrer Website eine visuell ansprechende Komponente hinzufügen, die eine Vogelperspektive eines Grundstücks und der Umgebung zeigt.

Wenn Nutzer eine Immobilie in 3D sehen, können sie sich ein besseres Bild von ihrer Lage und Größe machen. Außerdem können Sie damit die Merkmale des Grundstücks wie einen Pool, Nebengebäude oder einen großen Garten sowie nahegelegene Elemente wie Straßen, Gewässer, Berge oder Parks hervorheben.

Mehr Interaktionen

Die Luftbildansicht ist ein echter Hingucker für Ihre Kunden. Damit sie ihr volles Potenzial entfalten kann, müssen die Inhalte so einfach wie möglich zu finden sein. In diesem Abschnitt werden einige Implementierungsentwurfsmuster für die Luftbildansicht beschrieben, mit denen sich dies erreichen lässt.

Videoausrichtung

Es ist wichtig, die Bildschirmausrichtung des Geräts zu berücksichtigen, auf dem das Aerial View-Video geladen wird. Die Anzeige eines Videos im Querformat auf einem Mobilgerät, insbesondere im Vollbildmodus, kann die Nutzerfreundlichkeit beeinträchtigen. Wenn Sie ein Video mit dem falschen Seitenverhältnis für das Gerät anzeigen, verschwenden Sie viel Platz auf dem Bildschirm.

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

kann erkannt werden, wenn sich die Bildschirmausrichtung des Geräts ändert. Das Video kann dann in der entsprechenden Ausrichtung angezeigt werden.

Unten sehen Sie ein Beispiel für den Unterschied zwischen der empfohlenen und der nicht empfohlenen Ausrichtung bei der Verwendung von „Luftbild“ auf einem Mobilgerät:

Animiertes GIF mit zwei Geräten, eines im Hochformat und das andere im Querformat. Auf beiden Geräten wird das Video im Hochformat angezeigt. Unter dem Gerät im Porträtmodus steht „Empfohlen“ und unter dem Gerät im Querformat „Nicht empfohlen“.

Eingebettetes Kurzprofil

Wenn Sie mehrere Unterkünfte in einer Ansicht für die Unterkunftssuche präsentieren, ist es hilfreich, eingebettete Hovercards hinzuzufügen, um das Luftbildvideo mit zusätzlichen Informationen zur Unterkunft wie Adresse und Preis einzublenden. So können Nutzer sich schnell und einfach einen Überblick über das Objekt verschaffen, ohne die Detailseite aufrufen zu müssen.

Das Beispiel unten zeigt eine Markierung für den Googleplex in Mountain View. Wenn Sie den Mauszeiger auf diese Markierung bewegen, wird die Minikarte mit dem Luftbildvideo der Unterkunft eingeblendet.

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

Sowohl dem Marker als auch der eingebetteten Kurzinfo kann ein onClick-Ereignis hinzugefügt werden, um den Nutzer zur Seite mit den Immobiliendetails weiterzuleiten. So können Nutzer sich ganz einfach über das Objekt informieren und entscheiden, ob es für sie infrage kommt.

Story-ähnliche Inhalte für Ihre Unterkunft erstellen

Wenn Sie potenziellen Käufern ein wirklich immersives Erlebnis bieten möchten, können Sie Ihr Objekt mit einer geschichtenartigen Präsentation vorstellen, die Fotos und ein Luftbildvideo kombiniert.Diese Präsentation kann ähnlich wie ein Bilderkarussell mit einer Mischung aus HTML, CSS und JavaScript erstellt werden.

Animiertes GIF mit einem Beispiel für ein Luftbildvideo, das im Hochformat wie eine Story angezeigt wird. Das Luftaufnahmevideo befindet sich auf der zweiten Folie. Unten ist die Schaltfläche „Gebäude ansehen“ zu sehen.

Im obigen Beispiel haben wir das Video mit der Luftaufnahme auf einer der Folien eingefügt und unten einen Link hinzugefügt, über den sich weitere Details zur Immobilie aufrufen lassen. Über diesen Button sollte der Nutzer zur Seite mit den Property-Details weitergeleitet werden.

So funktionierts:

  1. Wählen Sie Ihre Fotos aus. Wählen Sie verschiedene Fotos aus, die die besten Merkmale Ihrer Unterkunft hervorheben.
  2. Erstellen Sie Ihr Aerial View-Video.
  3. Fotos und Videos zu einem Beitrag kombinieren
  4. Erzählen Sie uns Ihre Geschichte. Erzählen Sie potenziellen Käufern auf Ihrer Website oder in E-Mail-Marketingkampagnen Ihre Geschichte.

Wenn Sie für Ihr Showcase-Objekt eine Geschichte erzählen, können Sie die Aufmerksamkeit potenzieller Käufer gewinnen.

Aerial View beim Seitenaufbau starten

In den UX-Studien von Google hat sich gezeigt, dass die höchste Nutzerinteraktion erzielt wird, wenn die 3D-Ansicht standardmäßig geladen wird. Da es sich um einen neuen und interessanten Formfaktor handelt, möchten wir ihn laden, sobald ein Kunde die Details der Unterkunft aufrufen möchte. Wenn Sie ein Luftvideo über die API abrufen, fallen Kosten an. Wenn das Video angefordert wird, sollten Sie es automatisch abspielen, damit die Nutzer den Vorteil sehen.

Antimuster:Die Luftbildansicht hinter einer Schaltfläche zu verbergen, gilt als Antimuster, da Nutzer einen zusätzlichen Schritt ausführen müssen, um die 3D-Ansicht aufzurufen. Das kann frustrierend sein und dazu führen, dass sie die Vorteile von 3D-Ansichten nicht nutzen oder die Luftbildansicht für statische Inhalte halten.

Es wird empfohlen, die Luftbildansicht standardmäßig zu laden, wenn ein Kunde sich die Details des Grundstücks ansehen möchte. So können sie sich ein gutes Bild von der Unterkunft machen und eine fundierte Entscheidung treffen. Beachten Sie beim Designen der Autoplay-Funktion, dass das Luftbildvideo mehr als 30 MB groß ist und das Laden für einige Nutzer länger dauern kann.

Wenn Sie ein Bildkarussell auf Ihrer Seite haben, kann das Luftbildvideo als erstes Element eingefügt werden. So lässt sich die 3D-Ansicht ganz einfach in das bestehende Design Ihrer Website einbinden.

Beispiel für eine Schaltfläche, über die auf die Luftbildansicht zugegriffen werden kann. Sie befindet sich neben einer vorhandenen Schaltfläche für den Zugriff auf Fotos.

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

Schaltflächendesign

Wenn Sie eine Schaltfläche für den Zugriff auf die Luftbildansicht verwenden, sollten Sie Folgendes beachten:

  • 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 auf der Seite bereits ein Bereich vorhanden ist, in dem Bilder, Karten und Street View angezeigt werden, sollte das Video in der Vogelperspektive im selben Bereich angezeigt werden.
  • Hervorhebung: Da es sich um eine neue Ergänzung der Seite handelt, ist es hilfreich, die Schaltfläche mit dem Tag „Neue Funktion“ oder einem Standbild-Thumbnail des Videos hervorzuheben.
  • Betonung: Die Schaltfläche sollte mit mittlerer oder hoher Betonung gestaltet sein, da durch das Drücken eine wichtige Aktion ausgeführt wird. Google Material Design bietet einige Hinweise dazu, wie Schaltflächen mit unterschiedlichen Hervorhebungsgraden gestaltet werden können.

Hier sind einige zusätzliche Tipps für die Gestaltung einer effektiven Schaltfläche für die Luftbildansicht:

  • Verwenden Sie eine klare und prägnante Sprache. Die Schaltfläche sollte deutlich beschriftet sein, damit Nutzer wissen, was sie bewirkt.
  • Verwenden Sie eine große und gut lesbare Schriftart. Die Schaltfläche sollte groß genug sein, damit Nutzer 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 sich abhebt.
  • Verwenden Sie einen Call-to-Action. Die Schaltfläche sollte einen klaren Call-to-Action enthalten, z. B. „Luftaufnahme ansehen“ oder „Video ansehen“.

Display-Aspekte

Video wird geladen

Bei langsameren Verbindungen empfiehlt es sich, eine Vorschau des Videos als Standbild anzuzeigen und das vollständige Video erst nach einer Nutzerinteraktion wie „onClick“ zu laden. Zusammen mit dem Luftbildvideo erhalten Sie auch Zugriff auf ein Thumbnail, das Sie dafür verwenden können.

Außerdem haben Sie Zugriff auf das Video in verschiedenen Auflösungen. Diese können strategisch eingesetzt werden, um die Wartezeit für den Nutzer bei unterschiedlichen Verbindungsgeschwindigkeiten zu minimieren.

Quellenangaben als Logo

Wenn Sie Aerial View implementieren, müssen Sie alle Bedingungen einhalten, einschließlich der Logo-Attribution. Weitere Informationen

Fazit

Wir hoffen, dass dieser Artikel Ihnen Anregungen gegeben hat, wie Sie die Luftbildansicht auf Ihrer Website mit hoher Nutzerinteraktion implementieren können.

Es ist wichtig, darüber nachzudenken, wie Nutzer die Inhalte finden und in welchem Format sie am besten präsentiert werden. Außerdem solltest du den Gerätetyp berücksichtigen, auf dem das Video abgespielt wird, insbesondere die Bildschirmausrichtung und die Verbindungsgeschwindigkeit des Nutzers.

Nächste Schritte

Empfohlene Artikel:

Beitragende

Dieser Artikel wird von Google verwaltet. Die folgenden Mitwirkenden haben den Artikel ursprünglich geschrieben.

Hauptautor:

Henrik Valve | Google Maps Platform Solutions Engineer