W tym dokumencie znajdziesz opis różnych wzorców projektowych i pomysłów, które ułatwią Ci rozpoczęcie korzystania z widoku z lotu ptaka. Należy starannie przemyśleć sposób prezentacji widoku z lotu ptaka, aby przekonać się, że klienci są zadowoleni z produktu, a klienci dostrzegają jego wartość.
Widok z lotu ptaka dodaje do witryny atrakcyjny wizualnie komponent, zapewniając widok nieruchomości i otoczenia z lotu ptaka.
Użytkownicy, którzy zobaczą obiekt w 3D, mogą lepiej zorientować się w jego lokalizacji i rozmiarze. Pomaga też podkreślić cechy obiektu, takie jak basen, budynki gospodarskie lub duże podwórko, oraz pobliskie obiekty, takie jak drogi, zbiorniki wodne, góry czy parki.
Zwiększanie zaangażowania
Widok z lotu ptaka zrobi wrażenie na klientach, dlatego treści muszą być łatwe do odnalezienia, aby można było w pełni wykorzystać ich możliwości. W tej sekcji omówimy niektóre wzorce projektowania implementacji widoku z lotu ptaka, które pozwalają to osiągnąć.
Orientacja filmu
Warto wziąć pod uwagę orientację ekranu urządzenia, na którym wczytuje się film w widoku z lotu ptaka. Wyświetlanie filmu w orientacji poziomej na urządzeniu mobilnym, zwłaszcza na pełnym ekranie, może niekorzystnie wpłynąć na wrażenia użytkownika. Wyświetlając film o nieprawidłowym współczynniku proporcji dla danego urządzenia, tracisz znaczną ilość miejsca na ekranie.
Filmy w widoku z lotu ptaka są wyświetlane w orientacji poziomej i pionowej.
Poniżej przedstawiliśmy przykład tej różnicy, gdy uruchomiono widok z lotu ptaka na urządzeniu mobilnym, w zalecanej orientacji i w niezalecanej orientacji:
Umieszczona karta informacyjna
Podczas wyświetlania wielu obiektów w widoku wyszukiwania miejsc warto dodać karty informacyjne, aby wyświetlić film w widoku z lotu ptaka. Na wierzchu zostaną nałożone dodatkowe informacje o nieruchomości, takie jak adres i cena. Dzięki temu użytkownicy mogą szybko i łatwo poznać nieruchomość bez konieczności przechodzenia na stronę z informacjami o niej.
Przykład poniżej pokazuje znacznik reprezentujący kompleks Googlepleks w Mountain View. Po najechaniu na ten znacznik pojawi się karta informacyjna zawierająca film w widoku z lotu ptaka.
Zarówno do znacznika, jak i do umieszczonej karty informacyjnej można dodać zdarzenie onClick, aby przenieść użytkownika na stronę z informacjami o usłudze. Dzięki temu użytkownicy mogą z łatwością dowiedzieć się więcej o usłudze i zdecydować, czy jest ona dla nich odpowiednia.
Stwórz rzeczywistość przypominającą historię
Jeśli chcesz stworzyć atrakcyjną ofertę dla potencjalnych nabywców, możesz zaprezentować swoją nieruchomość w formie opowieści łączącej zdjęcia i film w widoku z lotu ptaka.Ten układ można utworzyć podobnie jak karuzela obrazów, używając kombinacji języków HTML, CSS i JavaScript.
W powyższym przykładzie zamieściliśmy na jednym ze slajdów film z widokiem z lotu ptaka. U dołu zamieściliśmy link do szczegółowych informacji o nieruchomości. Ten przycisk powinien przekierowywać użytkownika na stronę z informacjami o usłudze.
Działa to w następujący sposób:
- Wybierz zdjęcia. Wybierz różne zdjęcia, które podkreślą najważniejsze cechy Twojej usługi.
- Nagraj film w widoku z lotu ptaka.
- Łącz zdjęcia i filmy w historię.
- Podziel się swoją historią. Podziel się swoją historią z potencjalnymi nabywcami w swojej witrynie lub w kampaniach marketingu e-mailowego.
Zaprezentuj swoją witrynę w sposób przypominający fabułę, co pozwoli Ci przyciągnąć uwagę potencjalnych klientów.
Uruchamianie widoku z lotu ptaka przy wczytaniu strony
Z przeprowadzonych przez Google badań UX wynika, że największe zaangażowanie użytkowników zachodzi domyślnie, gdy wczytywany jest widok 3D. To nowy format, więc chcemy ją załadować, gdy tylko klient zechce zobaczyć szczegóły nieruchomości. Jeśli pobierasz filmy z widoku z lotu ptaka przez interfejs API, obciążymy Cię opłatą. Po wysłaniu żądania reklamy zastanów się nad autoodtwarzaniem, aby mieć pewność, że użytkownicy dostrzegą korzyści.
Antywzór: ukrycie widoku z lotu ptaka za przyciskiem jest uważane za niezawierające wzoru, ponieważ zmusza użytkowników do wykonania dodatkowej czynności w celu obejrzenia widoku 3D. Może to być frustrujące, a także sprawić, że stracą zalety widoków 3D lub mylą widok z lotu ptaka jako treści statyczne.
Jeśli klient chce zobaczyć szczegóły obiektu, zalecamy domyślne wczytanie widoku z lotu ptaka. Zwiększy to wygodę użytkowników i pomoże im podjąć świadomą decyzję o zakupie. Podczas projektowania funkcji autoodtwarzania pamiętaj, że film w widoku z lotu ptaka ma ponad 30 MB i może się wolno ładować u niektórych użytkowników.
Jeśli częścią strony jest karuzela obrazów, jako główny element możesz dodać film w widoku z lotu ptaka, co pozwoli Ci łatwo zintegrować obraz 3D z obecnym projektem witryny.
Umieszczanie przycisków w celu wczytywania widoków 3D jest łatwe do wdrożenia, ale może zmniejszyć zaangażowanie. Mapy Google domyślnie ładują widoki 3D. Gdy wyszukasz np. Empire State Building, widok 3D wczytuje się automatycznie i możesz zobaczyć jego częściowy widok, gdy jesteś w widoku 3D. To świetny sposób, by zapewnić użytkownikom ciekawsze wrażenia.
Projekt przycisku
Jeśli zdecydujesz się używać przycisku do otwierania widoku z lotu ptaka, pamiętaj o następujących kwestiach:
- Lokalizacja: przycisk powinien być zgrupowany z innymi przyciskami związanymi z mapowaniem, aby użytkownicy wiedzieli, że jest on związany z lokalizacją usługi.
- Przejście: przejście do filmu powinno być płynne. Jeśli na stronie znajduje się już sekcja, w której są wyświetlane zdjęcia, mapy i funkcje Street View, to w tej samej sekcji powinien się pojawić film z widoku z lotu ptaka.
- Wyróżnienie: jest to nowy dodatek do strony, dlatego warto wyróżnić przycisk za pomocą tagu „nowa funkcja” lub miniatury filmu.
- Wyróżnienie: przycisk powinien być umieszczony ze średnim lub dużym naciskiem, ponieważ jego naciśnięcie spowoduje bardzo widoczne działanie. W Google Material Design znajdziesz wskazówki dotyczące projektowania przycisków o różnym poziomie zawężenia.
Oto kilka dodatkowych wskazówek dotyczących projektowania skutecznych przycisków widoku z lotu ptaka:
- Używaj zrozumiałego i zwięzłego języka. Przycisk powinien być wyraźnie oznaczony, aby użytkownicy wiedzieli, do czego służy.
- Użyj dużej i czytelnej czcionki. Przycisk powinien być na tyle duży, aby użytkownicy mogli go łatwo kliknąć.
- Użyj kontrastowych kolorów. Przycisk powinien mieć inny kolor niż otaczający go tekst i tło, aby się wyróżniał.
- Użyj wezwania do działania. Przycisk powinien zawierać wyraźne wezwanie do działania, np. „Obejrzyj film z lotu ptaka” lub „Obejrzyj film”.
Uwagi na temat sieci reklamowej
Wczytuję film
Możesz też rozważyć wolniejsze połączenia, wyświetlając podgląd obrazu z kamerą i wczytując wszystkie funkcje razem z użytkownikiem, np. onClick. Oprócz filmu w widoku z lotu ptaka będziesz też mieć dostęp do miniatury, która pomoże Ci to zrobić.
Będziesz też mieć dostęp do filmów w różnych rozdzielczościach, więc można je strategicznie wykorzystywać, aby zminimalizować czas, jaki użytkownik musi czekać na wczytanie reklamy, gdy korzysta z różnych prędkości połączenia.
Informacje o logo
Przy implementowaniu widoku z lotu ptaka musisz przestrzegać wszystkich warunków, w tym oznaczenia logo. Więcej informacji znajdziesz na tej stronie.
Podsumowanie
Mamy nadzieję, że ten artykuł zainspiruje Cię do zastanowienia się nad tym, jak wdrożyć widok z lotu ptaka w swojej witrynie, tak by zwiększyć zaangażowanie użytkowników.
Zastanów się, w jaki sposób użytkownik odkrywa Twoje treści i w jakim formacie najlepiej je wyświetlać. Warto też wziąć pod uwagę typ urządzenia, na którym film będzie odtwarzany, ze szczególnym uwzględnieniem orientacji ekranu oraz szybkość połączenia.
Dalsze kroki
Sugerowana dalsza analiza:
Współtwórcy
Google przechowuje ten artykuł. Następujący współtwórcy napisali go pierwotnie.
Główny autor:
Henrik Valve | Inżynier ds. rozwiązań Google Maps Platform