Dokumen ini menjelaskan berbagai pola dan ide desain untuk membantu Anda memulai perjalanan Aerial View. Cara Anda menyajikan Aerial View kepada pelanggan harus dipertimbangkan dengan cermat untuk memastikan Anda melihat tingkat interaksi yang baik dengan produk, dan pelanggan Anda melihat nilainya.
Aerial View menambahkan komponen yang menarik secara visual ke situs Anda, yang menampilkan tampilan mata burung dari properti dan sekitarnya.
Saat melihat properti dalam 3D, pengguna dapat lebih memahami lokasi dan ukurannya. Selain itu, citra satelit juga membantu menyoroti fitur properti, seperti kolam renang, bangunan luar, atau halaman yang luas, serta fitur di sekitarnya seperti jalan, perairan, pegunungan, atau taman.
Meningkatkan Interaksi
Aerial View akan menjadi faktor yang mengesankan bagi pelanggan Anda, dan untuk melihat manfaat sepenuhnya, konten harus semudah mungkin ditemukan. Di bagian ini, kita akan membahas beberapa pola desain implementasi untuk Aerial View guna mencapai hal ini.
Orientasi video
Penting untuk mempertimbangkan orientasi layar perangkat yang memuat video Tampilan Udara. Menampilkan video berorientasi lanskap di perangkat seluler, terutama dalam layar penuh, dapat memberikan pengalaman pengguna yang buruk. Dengan menampilkan video menggunakan rasio aspek yang salah untuk perangkat, Anda akan menyia-nyiakan banyak ruang layar.
Video Tampilan Udara disediakan dalam orientasi lanskap dan potret.
Di bawah ini, contoh perbedaan dapat dilihat dari menjalankan Aerial View di perangkat seluler, pada orientasi yang direkomendasikan, dan orientasi yang tidak direkomendasikan:
Kartu informasi tersemat
Saat menampilkan beberapa properti di tampilan penelusuran properti, sebaiknya tambahkan kartu pengarah tersemat untuk menampilkan video Tampilan Udara, dengan informasi tambahan tentang properti, seperti alamat dan harga yang dihamparkan di atasnya. Hal ini memungkinkan pengguna mendapatkan gambaran tentang properti dengan cepat dan mudah, tanpa harus mengklik halaman detail properti.
Contoh di bawah menunjukkan penanda yang mewakili kompleks Googleplex di Mountain View. Saat Anda mengarahkan kursor ke penanda ini, kartu informasi akan muncul, yang menampilkan video Tampilan Udara properti.
Peristiwa onClick dapat ditambahkan ke penanda dan kartu informasi sematan untuk mengarahkan pengguna ke halaman detail properti. Hal ini memudahkan pengguna untuk mempelajari properti lebih lanjut dan memutuskan apakah properti tersebut sesuai untuk mereka.
Buat Pengalaman seperti Cerita untuk Properti Anda
Jika ingin menciptakan pengalaman yang benar-benar imersif bagi calon pembeli, Anda dapat menampilkan properti dengan pengalaman seperti cerita yang menggabungkan foto dan video Tampilan Udara.Hal ini dapat dibuat dengan cara yang mirip dengan carousel gambar, menggunakan kombinasi HTML, CSS, dan JavaScript.
Pada contoh di atas, kami telah menyertakan video Tampilan Udara di salah satu slide, dengan link di bagian bawah untuk melihat detail selengkapnya tentang properti. Tombol ini akan mengarahkan pengguna ke halaman detail properti.
Berikut caranya:
- Pilih foto Anda. Pilih berbagai foto yang menyoroti fitur terbaik properti Anda.
- Buat video Tampilan Udara Anda.
- Gabungkan foto dan video Anda menjadi sebuah cerita.
- Bagikan cerita Anda. Bagikan kisah Anda kepada calon pembeli di situs Anda, atau kampanye pemasaran melalui email.
Dengan menciptakan pengalaman seperti cerita untuk properti yang ditampilkan, Anda akan dapat menarik perhatian calon pembeli.
Memulai Aerial View saat pemuatan halaman
Dalam studi UX Google, kami melihat bahwa engagement pengguna tertinggi terjadi saat tampilan 3D dimuat secara default. Karena ini adalah faktor bentuk baru yang menarik, kami ingin memuatnya segera setelah pelanggan ingin melihat detail properti. Saat memikirkan biaya, jika Anda mengambil video Tampilan Udara dari API, Anda akan dikenai biaya. Setelah video diminta, pertimbangkan untuk memutarnya secara otomatis, guna memastikan pengguna Anda melihat manfaatnya.
Anti-pola: Menyembunyikan Tampilan Udara di balik tombol dianggap sebagai anti-pola karena memaksa pengguna melakukan langkah tambahan untuk melihat tampilan 3D. Hal ini dapat membuat pengguna frustrasi, dan juga dapat menyebabkan mereka kehilangan manfaat tampilan 3D atau salah mengira Aerial View sebagai konten statis.
Sebaiknya muat Aerial View secara default saat pelanggan ingin melihat detail properti. Hal ini akan memberikan pengalaman pengguna yang luar biasa, dan membantu mereka membuat keputusan yang tepat terkait properti. Saat mendesain pengalaman putar otomatis, perlu diingat bahwa video Tampilan Udara berukuran 30 MB+, dan mungkin lambat dimuat untuk beberapa pengguna.
Jika Anda memiliki carousel gambar sebagai bagian dari halaman, video Tampilan Udara dapat disertakan sebagai item utama, sehingga Anda dapat dengan mudah mengintegrasikan pengalaman 3D ke dalam desain situs yang ada.
Menempatkan tombol untuk memuat tampilan 3D mudah diterapkan, tetapi dapat mengurangi interaksi. Google Maps memuat tampilan 3D secara default. Misalnya, saat Anda menelusuri Empire State Building, tampilan 3D akan otomatis dimuat, dan Anda dapat melihat sebagian gambar saat masih dalam tampilan 3D. Ini adalah cara yang bagus untuk memberikan pengalaman yang lebih imersif dan menarik kepada pengguna.
Desain tombol
Jika Anda memilih untuk menggunakan tombol untuk mengakses Aerial View, penting untuk mempertimbangkan hal berikut:
- Lokasi: Tombol harus dikelompokkan dengan tombol terkait pemetaan lainnya agar pengguna tahu bahwa tombol tersebut terkait dengan lokasi properti.
- Transisi: Transisi ke video harus mulus dan lancar. Jika sudah ada bagian di halaman yang menampilkan gambar, peta, dan Street View, video Tampilan Udara harus ditampilkan di bagian yang sama.
- Penyorotan: Karena ini akan menjadi tambahan baru pada halaman, sebaiknya soroti tombol dengan tag "fitur baru" atau thumbnail gambar diam dari video.
- Penekanan: Tombol harus didesain dengan penekanan sedang atau tinggi, karena menekannya akan melakukan tindakan yang terlihat jelas. Desain Material Google memiliki beberapa panduan tentang cara mendesain tombol dengan berbagai tingkat penekanan.
Berikut beberapa tips tambahan untuk mendesain tombol Tampilan Udara yang efektif:
- Gunakan bahasa yang jelas dan ringkas. Tombol harus diberi label dengan jelas agar pengguna tahu fungsinya.
- Gunakan font yang besar dan mudah dibaca. Tombol harus cukup besar agar mudah dilihat dan diklik oleh pengguna.
- Gunakan warna yang kontras. Tombol harus memiliki warna yang berbeda dari teks dan latar belakang di sekitarnya agar terlihat jelas.
- Gunakan pesan ajakan (CTA). Tombol harus menyertakan pesan ajakan (CTA) yang jelas, seperti "Tonton Tampilan Udara" atau "Tonton Video".
Pertimbangan Tampilan
Pemuatan Video
Anda mungkin perlu mempertimbangkan koneksi yang lebih lambat, dengan menampilkan pratinjau gambar diam dari video, dan memuat pengalaman penuh pada interaksi pengguna, seperti onClick. Selain video Tampilan Udara, Anda juga akan memiliki akses ke thumbnail yang dapat digunakan untuk melakukannya.
Anda juga akan memiliki akses ke video dalam berbagai resolusi, sehingga video ini dapat digunakan secara strategis untuk meminimalkan waktu yang harus dihabiskan pengguna untuk menunggu pengalaman dimuat, pada kecepatan koneksi yang berbeda.
Atribusi logo
Saat menerapkan Tampilan Udara, Anda harus memastikan bahwa Anda mengikuti semua persyaratan, termasuk atribusi logo. Lihat halaman ini untuk mengetahui detailnya.
Kesimpulan
Semoga artikel ini memberi Anda inspirasi untuk memikirkan cara menerapkan Aerial View di situs Anda, dengan engagement pengguna yang tinggi.
Anda harus memikirkan cara pengguna menemukan konten, dan format yang paling sesuai untuk menampilkannya. Sebaiknya pertimbangkan juga jenis perangkat yang akan memutar video, terutama orientasi layar, dan kecepatan koneksi pengguna.
Langkah Berikutnya
Bacaan lebih lanjut yang disarankan:
Kontributor
Google mengelola artikel ini. Kontributor berikut awalnya menulisnya.
Penulis utama:
Henrik Valve | Solutions Engineer Google Maps Platform