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 Luftbildansicht präsentieren, muss sorgfältig überlegt werden, damit das Produkt gut angenommen wird und Ihre Kunden den Mehrwert erkennen.

Mit der Funktion „Luftbild“ können Sie Ihrer Website eine visuell ansprechende Komponente hinzufügen, die ein Luftbild 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 Implementierungsmuster für die Luftbildansicht beschrieben, mit denen sich das 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 Display.

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 Aerial View 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 ganz einfach mehr über die Unterkunft erfahren und entscheiden, ob sie 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 Story präsentieren, die Fotos und ein Luftbildvideo kombiniert.Das lässt sich ähnlich wie ein Bilderkarussell mit einer Mischung aus HTML, CSS und JavaScript erstellen.

Animiertes GIF mit einem Beispiel für ein Luftaufnahmevideo, das in einer Story im Hochformat 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 diese Schaltfläche 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 Nutzerinteraktion am höchsten ist, 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 Bild-Karussell auf Ihrer Seite haben, kann das Luftbildvideo als erstes Element eingefügt werden. So lässt sich die 3D-Ansicht ganz einfach in Ihr bestehendes Website-Design integrieren.

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 Nutzer noch besser in die Inhalte eintauchen.

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 mit Bildern, Karten und Street View vorhanden ist, sollte das Video in der Vogelperspektive in diesem 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 werden, 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 zum Entwerfen einer effektiven Schaltfläche für die 3D-Ansicht:

  • 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 sie von Nutzern leicht gesehen und angeklickt werden kann.
  • 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 kann es sinnvoll sein, eine Vorschau des Videos als Standbild anzuzeigen und das vollständige Video erst nach einer Nutzerinteraktion wie „onClick“ zu laden. Zusammen mit dem Aerial View-Video erhalten Sie auch Zugriff auf ein Thumbnail, das Sie dafür verwenden können.

Sie haben auch Zugriff auf das Video in verschiedenen Auflösungen. Diese können strategisch eingesetzt werden, um die Wartezeit des Nutzers beim Laden der Inhalte 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