W tym dokumencie opisujemy różne wzorce projektowe i pomysły, które pomogą Ci rozpocząć korzystanie z widoku z lotu ptaka. Sposób prezentowania widoku z lotu ptaka klientom musi być starannie przemyślany, aby zapewnić wysoki poziom zaangażowania w usługę i pokazać klientom jej wartość.
Widok z lotu ptaka to atrakcyjny wizualnie komponent, który możesz dodać do swojej witryny. Pokazuje on nieruchomość i jej otoczenie z lotu ptaka.
Gdy użytkownicy zobaczą nieruchomość w 3D, będą mogli lepiej ocenić jej lokalizację i rozmiar. Pomaga też wyróżnić cechy obiektu, takie jak basen, budynki gospodarcze czy duży ogród, a także pobliskie obiekty, takie jak drogi, zbiorniki wodne, góry czy parki.
Zwiększanie zaangażowania
Widok z lotu ptaka będzie dla Twoich klientów atrakcyjny, a aby w pełni wykorzystać jego potencjał, treści muszą być jak najłatwiejsze do znalezienia. W tej sekcji omówimy niektóre wzorce projektowania implementacji widoku z lotu ptaka, które pomogą Ci to osiągnąć.
Orientacja filmu
Ważne jest, aby wziąć pod uwagę orientację ekranu urządzenia, na którym wczytywany jest film z Widoku z lotu ptaka. Wyświetlanie filmu w orientacji poziomej na urządzeniu mobilnym, zwłaszcza w trybie pełnoekranowym, może być niewygodne dla użytkowników. Wyświetlanie filmu z nieprawidłowym współczynnikiem proporcji na urządzeniu powoduje marnowanie znacznej części ekranu.
Filmy z widokiem z lotu ptaka są dostępne w orientacji poziomej i pionowej.
Poniżej znajdziesz przykład różnicy między widokiem z lotu ptaka na urządzeniu mobilnym w zalecanej i niezalecanej orientacji:
Umieszczona karta informacyjna
Gdy w widoku wyszukiwania nieruchomości wyświetlasz wiele obiektów, warto dodać umieszczone karty najazdowe, aby wyświetlać film z widokiem z lotu ptaka z dodatkowymi informacjami o nieruchomości, takimi jak adres i cena. Użytkownicy mogą dzięki temu szybko i łatwo zapoznać się z informacjami o obiekcie bez konieczności klikania strony z jego szczegółami.
Przykład poniżej pokazuje znacznik reprezentujący kompleks Googleplex w Mountain View. Gdy najedziesz kursorem na ten znacznik, pojawi się karta informacyjna z filmem przedstawiającym widok z lotu ptaka.
Zdarzenie onClick można dodać zarówno do znacznika, jak i do osadzonej karty najazdowej, aby przenieść użytkownika na stronę ze szczegółami obiektu. Ułatwia to użytkownikom uzyskanie dodatkowych informacji o obiekcie i podjęcie decyzji, czy jest on odpowiedni dla nich.
Tworzenie w usłudze środowiska przypominającego relację
Jeśli chcesz zapewnić potencjalnym kupującym prawdziwie wciągające wrażenia, możesz zaprezentować nieruchomość w formie historii, która łączy zdjęcia i film z widokiem z lotu ptaka.Możesz to zrobić podobnie jak w przypadku karuzeli zdjęć, używając kombinacji HTML, CSS i JavaScript.
W przykładzie powyżej na jednym ze slajdów umieściliśmy film z widokiem z lotu ptaka, a na dole dodaliśmy link do szczegółowych informacji o obiekcie. Ten przycisk powinien przenosić użytkownika na stronę ze szczegółami usługi.
Jak to działa:
- Wybierz zdjęcia. Wybierz różne zdjęcia, które pokazują najlepsze cechy obiektu.
- Utwórz film z widokiem z lotu ptaka.
- Połącz zdjęcia i filmy w relację.
- Podziel się swoją historią. Podziel się swoją historią z potencjalnymi kupującymi w witrynie lub w kampaniach e-mail marketingowych.
Tworząc w przypadku nieruchomości wystawowej historię, możesz przyciągnąć uwagę potencjalnych kupujących.
Uruchamianie widoku z lotu ptaka podczas wczytywania strony
Z badań UX przeprowadzonych przez Google wynika, że największe zaangażowanie użytkowników występuje wtedy, gdy widok 3D wczytuje się domyślnie. Jest to nowy i interesujący format, dlatego chcemy go wczytywać, gdy tylko klient zechce wyświetlić szczegóły nieruchomości. Jeśli chodzi o koszty, to w przypadku pobierania filmu z widokiem z lotu ptaka z interfejsu API będziemy pobierać opłaty. Gdy użytkownik poprosi o wyświetlenie filmu, rozważ automatyczne odtwarzanie, aby mieć pewność, że zobaczy korzyść.
Nieprawidłowy wzorzec: ukrywanie widoku z lotu ptaka za przyciskiem jest uznawane za nieprawidłowy wzorzec, ponieważ zmusza użytkowników do wykonania dodatkowego kroku, aby wyświetlić widok 3D. Może to być frustrujące, a także może spowodować, że użytkownicy nie będą mogli w pełni korzystać z widoków 3D lub będą mylić widok z lotu ptaka z treściami statycznymi.
Zalecamy domyślne wczytywanie widoku z lotu ptaka, gdy klient chce wyświetlić szczegóły obiektu. Zapewni to użytkownikom komfort i pomoże im podjąć świadomą decyzję dotyczącą nieruchomości. Projektując funkcję automatycznego odtwarzania, pamiętaj, że film z widokiem z lotu ptaka ma ponad 30 MB i może się wolno wczytywać u niektórych użytkowników.
Jeśli na stronie masz karuzelę obrazów, film z widokiem z lotu ptaka może być wyświetlany jako pierwszy element, co ułatwia zintegrowanie środowiska 3D z dotychczasowym wyglądem witryny.
Umieszczanie przycisków do wczytywania widoków 3D jest łatwe do wdrożenia, ale może zmniejszyć zaangażowanie. Mapy Google domyślnie wczytują widoki 3D. Na przykład gdy wyszukasz Empire State Building, widok 3D wczyta się automatycznie i będziesz mieć częściowy podgląd zdjęć, pozostając w widoku 3D. To świetny sposób na zapewnienie użytkownikom bardziej wciągających i angażujących wrażeń.
Projekt przycisku
Jeśli zdecydujesz się użyć przycisku, aby uzyskać dostęp do widoku z lotu ptaka, pamiętaj o tych kwestiach:
- Lokalizacja: przycisk powinien być zgrupowany z innymi przyciskami związanymi z mapami, aby użytkownicy wiedzieli, że jest on powiązany z lokalizacją obiektu.
- Przejście: przejście do filmu powinno być płynne i bezproblemowe. Jeśli na stronie jest już sekcja, w której wyświetlają się obrazy, mapy i Street View, film z widokiem z lotu ptaka powinien być wyświetlany w tej samej sekcji.
- Wyróżnienie: ponieważ będzie to nowy element na stronie, warto wyróżnić przycisk za pomocą tagu „nowa funkcja” lub miniatury filmu.
- Wyróżnienie: przycisk powinien być zaprojektowany z średnim lub wysokim wyróżnieniem, ponieważ jego naciśnięcie spowoduje wykonanie ważnego działania. Google Material Design zawiera wskazówki dotyczące projektowania przycisków o różnym stopniu wyróżnienia.
Oto kilka dodatkowych wskazówek dotyczących projektowania skutecznego przycisku widoku z lotu ptaka:
- Używaj jasnego i zwięzłego języka. Przycisk powinien być wyraźnie oznaczony, aby użytkownicy wiedzieli, do czego służy.
- Używaj dużej i czytelnej czcionki. Przycisk powinien być wystarczająco duży, aby użytkownicy mogli go łatwo zobaczyć i kliknąć.
- Użyj kontrastowego koloru. Przycisk powinien mieć inny kolor niż otaczający go tekst i tło, aby się wyróżniał.
- Używaj wezwania do działania. Przycisk powinien zawierać jasne wezwanie do działania, np. „Obejrzyj widok z lotu ptaka” lub „Obejrzyj film”.
Wskazówki dotyczące reklam displayowych
Wczytuję film
W przypadku wolniejszych połączeń możesz wyświetlać podgląd filmu w postaci statycznego obrazu, a pełną wersję wczytywać dopiero po interakcji użytkownika, np. po kliknięciu. Oprócz filmu z widokiem z lotu ptaka będziesz mieć też dostęp do miniatury, której możesz użyć w tym celu.
Będziesz mieć też dostęp do filmu w różnych rozdzielczościach, dzięki czemu możesz strategicznie wykorzystać tę funkcję, aby zminimalizować czas oczekiwania użytkownika na załadowanie treści przy różnych prędkościach połączenia.
Atrybucje logo
Podczas wdrażania widoku z lotu ptaka musisz przestrzegać wszystkich warunków, w tym zasad dotyczących atrybucji logo. Szczegółowe informacje znajdziesz na tej stronie.
Podsumowanie
Mamy nadzieję, że ten artykuł zainspiruje Cię do zastanowienia się, jak wdrożyć widok z lotu ptaka w swojej witrynie, aby zwiększyć zaangażowanie użytkowników.
Zastanów się, w jaki sposób użytkownik odkryje Twoje treści i w jakim formacie najlepiej je wyświetlić. Warto też wziąć pod uwagę typ urządzenia, na którym będzie odtwarzany film, zwłaszcza orientację ekranu, oraz szybkość połączenia użytkownika.
Następne kroki
Sugerowane dalsze lektury:
Współtwórcy
Google jest autorem tego artykułu. Oryginalni autorzy:
Główny autor:
Henrik Valve | Google Maps Platform Solutions Engineer