W tym dokumencie opisujemy różne wzorce i pomysły projektowe, które pomogą Ci rozpocząć pracę z widokiem lotniczym. Sposób przedstawiania klientom zdjęć z lotu ptaka musi być starannie przemyślany, by klienci zauważyli pozytywne zainteresowanie i wartość produktu.
Widok z lotu dodaje do Twojej witryny atrakcyjny wizualnie element, pokazując obiekt i jego otoczenie z lotu ptaka.
Użytkownicy oglądający nieruchomość w 3D mogą dokładniej poznać jej położenie i rozmiar. Pomaga to również uwydatnić jej elementy, takie jak basen, budynki gospodarcze czy duży ogród, oraz pobliskie obiekty, takie jak drogi, zbiorniki wodne, góry czy parki.
Zwiększanie zaangażowania
Widok z lotu będzie dla Twoich klientów czynnikiem zachęcającym do skorzystania z usługi. Aby mogli w pełni skorzystać z jej zalet, muszą mieć jak najłatwiejszy dostęp do treści. W tej sekcji omówimy niektóre wzorce implementacji widoku z lotu ptaka.
Orientacja filmu
Pamiętaj, aby wziąć pod uwagę orientację ekranu urządzenia, na którym wczytuje się film z widokiem z lotu. Wyświetlanie filmu w orientacji poziomej na urządzeniu mobilnym, zwłaszcza na pełnym ekranie, może być niewygodne dla użytkownika. Wyświetlając film z nieprawidłowym współczynnikiem proporcji dla urządzenia, marnujesz znaczną część powierzchni ekranu.
Filmy z widokiem z lotu są dostępne w orientacji poziomej i pionowej.
może służyć do wykrywania zmian orientacji ekranu urządzenia, dzięki czemu film może być wyświetlany w odpowiedniej orientacji.Poniżej możesz zobaczyć przykład różnicy między wyświetlaniem widoku lotniczego na urządzeniu mobilnym w zalecanej orientacji a niezalecanej orientacji:
Umieszczona karta informacyjna
Jeśli wyświetlasz wiele obiektów w widoku wyszukiwania obiektu, warto dodać karty z nakładką, aby wyświetlić film z widoku lotni wraz z dodatkowymi informacjami o obiekcie, takimi jak adres i cena. Dzięki temu użytkownicy mogą szybko i łatwo zapoznać się z usługą bez konieczności przechodzenia na stronę z informacjami o usłudze.
Przykład poniżej pokazuje znacznik reprezentujący kompleks budynków Googleplex w Mountain View. Gdy najedziesz na ten znacznik, pojawi się karta informacyjna z filmem z lotu przedstawiającym obiekt.
Zdarzenie onClick można dodać zarówno do znacznika, jak i do załączonej karty, aby przekierowywać użytkowników na stronę z informacjami o danej usłudze. Ułatwia to użytkownikom dowiedzenie się więcej o usługach i podjęcie decyzji, czy są one dla nich odpowiednie.
Tworzenie usługi z elementami dynamicznymi
Jeśli chcesz zapewnić potencjalnym nabywcom naprawdę wciągające wrażenia, możesz zaprezentować swoją nieruchomość w ramach opowieści, która łączy zdjęcia z filmem z widoku lotniczego.Można go utworzyć w sposób podobny do karuzeli zdjęć, korzystając z HTML, CSS i JavaScriptu.
Na slajdzie powyżej umieściliśmy film z lotu ptaka, a na dole znajduje się link do dodatkowych informacji o nieruchomości. Ten przycisk powinien kierować użytkownika na stronę z informacjami o usłudze.
Jak to działa:
- Wybierz zdjęcia. Wybierz różne zdjęcia, które pokazują najlepsze cechy Twojej firmy.
- Utwórz film z widoku lotniczego.
- Połącz zdjęcia i filmy w jedną historię.
- Podziel się swoją historią. Podziel się swoją historią z potencjalnymi kupcami na stronie internetowej lub w ramach kampanii marketingowych e-mailowych.
Dzięki stworzeniu dla swojej nieruchomości prezentacyjnej prezentacji w formie opowieści możesz przyciągnąć uwagę potencjalnych kupujących.
Widok z lotu ptaka włącza się podczas wczytywania strony
Z badań Google nad UX wynika, że najwyższe zaangażowanie użytkowników występuje, gdy widok 3D jest wczytywany domyślnie. To nowy, ciekawy format, który chcemy ładować, gdy tylko klient zechce zapoznać się ze szczegółami nieruchomości. Jeśli pobierasz film z widokiem z lotu z interfejsu API, zostaniesz obciążony kosztami. Gdy użytkownik poprosi o film, rozważ jego automatyczne odtworzenie, aby zapewnić użytkownikom korzyści.
Nieprawidłowy wzór: ukrywanie widoku z lotu za przyciskiem jest uważane za nieprawidłowy wzór, ponieważ zmusza użytkowników do wykonania dodatkowego kroku, aby wyświetlić widok 3D. Może to być frustrujące i prowadzić do tego, że użytkownicy nie będą mogli korzystać z zalet widoku 3D lub będą mylić widok z lotu z treściami statycznymi.
Zalecamy, aby domyślnie wczytywać widok z lotu, gdy klient chce wyświetlić szczegóły obiektu. Dzięki temu użytkownicy będą mogli wygodnie przeglądać informacje i podejmować świadome decyzje dotyczące nieruchomości. Projektując funkcję autoodtwarzania, pamiętaj, że widok z lotu ptaka ma ponad 30 MB, a ładowanie w niektórych przypadkach może trochę potrwać.
Jeśli masz na stronie karuzelę obrazów, jako główny element możesz dodać film z widokiem z lotu ptaka, aby łatwo zintegrować trójwymiarowy widok z projektem witryny.
Umieszczenie przycisków wczytywanych widoków 3D jest łatwe, ale może zmniejszyć zaangażowanie użytkowników. Mapy Google domyślnie wczytują widoki 3D. Jeśli na przykład wyszukasz Empire State Building, widok 3D zostanie załadowany automatycznie, a podczas wyświetlania widoku 3D będziesz widzieć tylko część zdjęć. 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żywać przycisku do wyświetlania widoku z lotu ptaka, pamiętaj, że:
- Lokalizacja: przycisk powinien być pogrupowany z innymi przyciskami związanymi z mapowaniem, aby użytkownicy wiedzieli, że jest on powiązany z lokalizacją usługi.
- Przejście: przejście do filmu powinno być płynne i bezproblemowe. Jeśli na stronie jest już sekcja z obrazami, mapami i Street View, film z widokiem z lotu powinien być wyświetlany w tej samej sekcji.
- Podświetlenie: ponieważ jest to nowe uzupełnienie strony, warto wyróżnić przycisk za pomocą tagu „Nowa funkcja” lub miniatury statycznych obrazów z filmu.
- Emphasis: przycisk powinien być średnio lub mocno naciśnięty, ponieważ spowoduje to wyeksponowanie najważniejszego działania. W Google Material Design znajdziesz wskazówki dotyczące projektowania przycisków o różnym stopniu nacisku.
Oto kilka dodatkowych wskazówek dotyczących projektowania skutecznego przycisku widoku z lotu:
- 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 był dobrze widoczny i łatwy do kliknięcia.
- Użyj kontrastowego koloru. Przycisk powinien mieć inny kolor niż otaczający go tekst i tło, aby go wyróżnić.
- Użyj wezwania do działania. Przycisk powinien zawierać wyraźne wezwanie do działania, np. „Obejrzyj widok z lotu” lub „Obejrzyj film”.
Uwagi dotyczące wyświetlania
Wczytywanie filmu
Możesz wziąć pod uwagę wolniejsze połączenia, wyświetlając podgląd filmu w postaci stałego obrazu, a pełne treści wczytywać dopiero po interakcji użytkownika, np. po kliknięciu. Oprócz filmu z widokiem z lotu otrzymasz też miniaturę, która ułatwi Ci to zadanie.
Będziesz też mieć dostęp do filmu w różnych rozdzielczościach, które możesz strategicznie wykorzystać, aby zminimalizować czas oczekiwania użytkownika na załadowanie treści w zależności od szybkości połączenia.
Informacje o logo
Podczas implementowania widoku z lotu musisz przestrzegać wszystkich warunków, w tym dotyczących atrybucji logo. Więcej informacji znajdziesz na tej stronie.
Podsumowanie
Mamy nadzieję, że ten artykuł był inspiracją do zastanowienia się nad wdrożeniem widoku z lotu ptaka na stronie internetowej z dużym zaangażowaniem użytkowników.
Trzeba przemyśleć, w jaki sposób użytkownicy będą mogli odkrywać treści oraz w jakim formacie najlepiej je wyświetlać. Warto też wziąć pod uwagę typ urządzenia, na którym będzie odtwarzany film, zwłaszcza orientację ekranu i szybkość połączenia użytkownika.
Następne kroki
Sugerowane materiały do dalszego zapoznania się z tematem:
Współtwórcy
Ten artykuł jest aktualizowany przez Google. Pierwotnie napisali go autorzy wymienieni poniżej.
Główny autor:
Henrik Valve | inżynier rozwiązań Google Maps Platform