Strona 3D na słabszym telefonie: zaprojektuj równie sensowną drogę bez sceny

Model krzesła obraca się płynnie na komputerze projektanta. Na telefonie klienta zostaje ciemny prostokąt i kółko, które sumiennie wykonuje swoją pracę: obraca się. Krzesło nie wykonuje żadnej. Właśnie wtedy okazuje się, czy strona została zaprojektowana do wyboru produktu, czy do prezentacji możliwości komputera w studiu.

Dobra droga bez sceny 3D nie jest przeprosinami schowanymi pod animacją. Powinna pozwolić zobaczyć rzecz, zrozumieć istotną cechę i przejść dalej. Może być mniej widowiskowa, lecz nadal musi odpowiadać na pytanie, z którym przyszedł odbiorca. Jeżeli trójwymiar pokazuje sposób składania stołu, zastąpienie go zdjęciem logo nie rozwiązuje problemu. Rozwiązuje jedynie problem pustego prostokąta.

Najpierw ustal, co właściwie ma pokazać scena

Zapisz jedno zdanie o jej zadaniu. „Buduje efekt premium” jest zbyt pojemne, żeby zaprojektować zastępstwo. „Pozwala obejrzeć połączenie oparcia z siedziskiem” daje już konkretny kierunek: potrzebny będzie kadr tylnej części krzesła i zbliżenie mocowania. „Pokazuje zmianę szerokości stołu” wskazuje na dwa stany oraz wymiary. Z tego samego powodu interfejs oglądania modelu produktu warto układać wokół pytań, a nie samych gestów obracania.

W przykładowej ofercie lampy odbiorca chce sprawdzić trzy rzeczy: kształt klosza, kierunek światła i sposób zamocowania. Model może wygodnie połączyć te widoki. Alternatywa może korzystać z trzech zdjęć, krótkich podpisów i schematu montażu. Obie drogi mają ten sam cel informacyjny, chociaż korzystają z innych narzędzi. Nie muszą wyglądać identycznie, tak jak instrukcja obsługi nie musi udawać pilota do telewizora.

Oddziel też treść produktu od dekoracyjnej otoczki. Jeżeli scena przedstawia abstrakcyjny świat marki, jej brak nie powinien zabierać nagłówka, opisu oferty ani przycisku. Jeśli natomiast zawiera jedyny widoczny wymiar produktu, trzeba przenieść ten wymiar również do zwykłej treści. Użytkownik nie powinien potrzebować sprawnej grafiki trójwymiarowej, żeby dowiedzieć się, co właściwie kupuje.

Takie rozpisanie funkcji dobrze zrobić przed produkcją materiałów. Fotograf może wtedy przygotować brakujący widok, a osoba od treści nazwać różnicę między stanami. Dorabianie alternatywy na końcu zwykle kończy się wyborem jedynego obrazka, który akurat leży w folderze. Folder rzadko ma przemyślaną strategię komunikacji.

Jeden kadr, kilka widoków czy zwykły opis?

Statyczny obraz wystarczy, gdy trójwymiar przede wszystkim pokazuje bryłę. Wybierz czytelny kąt, właściwy wariant i tło, na którym widać krawędzie. Kadr otwierający powinien być użyteczny również samodzielnie. Piękna sylwetka w kontrze światła może sprawdzać się w kampanii, ale słabo wyjaśnia, po której stronie szafki znajduje się uchwyt.

Kilka widoków przydaje się wtedy, gdy odbiorca porównuje części albo stany. Zamiast udawać obrót za pomocą kilkudziesięciu niemal identycznych zdjęć, można pokazać przód, tył i ważny detal. Podpis „Widok od strony przyłączy” daje lepszą orientację niż „Zdjęcie 4”. Zachowaj kolejność, którą da się zrozumieć bez pamiętania wcześniejszego ruchu kamery.

Opis lub prosty schemat bywa trafniejszy od zdjęcia. Jeżeli położenie przewodu wpływa na ustawienie produktu, opisz, z której strony wychodzi. Gdy produkt zmienia długość po rozłożeniu, podaj oba wymiary. Obraz ułatwia wyobrażenie, a zapis usuwa domysły. Nie dopisuj jednak zapewnienia o dokładności pomiaru tylko dlatego, że ilustracja wygląda technicznie.

Dokumentacja wczytywania model-viewer pokazuje użycie obrazu zastępczego do czasu załadowania modelu oraz przykład, w którym obraz pozostaje przy nieprawidłowym pliku modelu. To konkretna możliwość komponentu. O tym, czy wybrany obraz wyjaśnia ofertę, nadal decyduje projekt treści.

Dlatego wybór kadru trzeba uzgodnić z osobą odpowiedzialną za katalog. Jeśli po zmianie koloru produktu obraz zastępczy nadal pokazuje poprzedni wariant, powstaje sprzeczność, której płynniejsza animacja nie naprawi. Warto utrzymywać wspólne oznaczenie wariantu dla modelu, zdjęć i nazwy widocznej obok. Alternatywa powinna starzeć się razem z produktem, a nie osobno.

Nie każdą scenę trzeba przekładać na film. Krótkie nagranie może pokazać kolejność ruchu, lecz odbiorca traci swobodny wybór kąta i momentu. Dochodzą pytania o pauzę, opis oraz ciężar materiału. Wybór formatu dobrze zestawić z zasadami osadzania wideo na stronie usługowej, zamiast uznawać film za automatycznie lżejszą wersję każdej interakcji.

Przygotuj małą tabelę roboczą: pytanie odbiorcy, odpowiedź w scenie, odpowiedź bez sceny. Nie musi trafić na stronę. Ma ujawnić luki, zanim ktoś uzna pojedynczy obraz za pełny zamiennik doświadczenia. Trzy wiersze potrafią oszczędzić trzy spotkania o tym, czy „już jest fallback”.

Ładowanie, awaria i świadoma rezygnacja to różne chwile

Przed uruchomieniem sceny pokaż użyteczny kadr i jasno nazwany przycisk, na przykład „Obejrzyj lampę w 3D”. Osoba widzi produkt od razu, a dodatkową formę prezentacji wybiera świadomie. Obok może znaleźć się krótka informacja o alternatywie: „Wolisz zdjęcia? Zobacz trzy widoki”. Nie trzeba opisywać procesora graficznego ani robić z telefonu podejrzanego w sprawie niewczytanego krzesła.

W czasie ładowania zachowaj dostęp do opisu i następnego kroku. Jeżeli cała karta jest zasłonięta nakładką, drobna usterka sceny blokuje również treści, które już działały. Stan oczekiwania powinien mieć wyjście. Jego komunikat ma mówić o aktualnej czynności, a nie obiecywać, że wszystko potrwa jeszcze dokładnie sekundę.

Awaria może nastąpić również po rozpoczęciu oglądania. MDN opisuje zdarzenie webglcontextlost jako sygnał utraty bufora powiązanego z kontekstem WebGL. Z perspektywy projektu oznacza to potrzebę obsłużenia przerwanej sesji, a nie wyłącznie pierwszego wczytania. Treść komunikatu może pozostać prosta: „Widok 3D został przerwany. Możesz wrócić do zdjęć”.

Zapamiętaj wtedy wybór produktu. Jeżeli klient oglądał zieloną lampę, powrót do zdjęć powinien nadal dotyczyć zielonej lampy. Nie zmuszaj go do ponownego wybierania koloru i rozmiaru. Szczegółowy kąt kamery może być mniej istotny niż zachowanie wariantu oraz miejsca na stronie. Wymagania ustal według tego, co odbiorca faktycznie zdążył zrobić.

Osobny przypadek to ręczne wyłączenie sceny. Ktoś może po prostu woleć zdjęcia albo chcieć spokojnie przeczytać opis. Zapewnij tę możliwość także wtedy, gdy technicznie wszystko działa. Przy kolejnej zmianie wariantu strona nie powinna od razu ponownie wciskać odbiorcy modelu, który przed chwilą zamknął.

Zwykłego obracania modelu na stronie nie utożsamiaj z uruchomieniem widoku w rozszerzonej rzeczywistości. Jeśli projekt ma dodatkową funkcję AR, wymagającą osobnego przejścia i dostępu do kamery, odmowę obsłuż w tej konkretnej ścieżce. Odbiorca nadal może obejrzeć produkt na stronie. Komunikat „Brak dostępu do kamery, więc nie pokażemy krzesła” byłby w takim układzie dość osobliwą polityką sklepu.

Dobra alternatywa nie wymaga od człowieka diagnozy. Nie pytaj, czy ma WebGL, czy utracił kontekst, ani czy jego urządzenie jest „wspierane”. Zaproponuj rezultat: zdjęcia, opis ruchu, ponowną próbę. Diagnoza techniczna może trafić do zespołu, lecz nie musi zajmować głównego miejsca w rozmowie z kupującym.

Przygotuj również zachowanie po ponownej próbie. Kliknięcie „Spróbuj jeszcze raz” nie powinno usuwać zdjęć, zanim pojawi się działająca scena. Ustal, czy odbiorca czeka w tym samym miejscu, czy wraca do początku prezentacji. Dla osoby porównującej dwa produkty ważniejsze może być pozostawienie otwartego opisu niż odtworzenie efektownego wejścia kamery. Zapisz to zachowanie w specyfikacji i sprawdź podczas odbioru: ponowna próba pozostawia opis otwarty, a po uruchomieniu modelu pokazuje wcześniej wybrany wariant.

Na tym etapie rozdziel dwa zadania projektowe. Praca nad szybkością strony ma ograniczyć koszt oczekiwania. Projekt drogi bez sceny ma zachować sens strony wtedy, gdy oczekiwanie nie kończy się oczekiwanym widokiem. Potrzebujesz obu decyzji, bo nawet szybki pierwszy ekran nie gwarantuje ukończenia późniejszej interakcji.

W zakresie Aeneia Design przestrzenna forma może wspierać przedstawienie oferty. Warto już w briefie dopisać, jaką treść odbiorca dostanie po jej wyłączeniu i kto przygotuje potrzebne obrazy.

Odbierz dwie pełne drogi przez tę samą ofertę

Przy odbiorze projektu nie wystarczy wyłączyć plik modelu i zobaczyć, czy pojawił się obraz. Przejdź całe zadanie: znajdź produkt, sprawdź ważną cechę, wybierz wariant i wykonaj następny krok. Powtórz je przy uruchomionej scenie oraz w alternatywie. Zapisz różnice informacji, nie tylko różnice wyglądu.

Do prób przygotuj kilka sytuacji: model jeszcze się ładuje, ładowanie się nie udaje, widok zostaje przerwany, użytkownik sam przechodzi do zdjęć. Sprawdź zmianę orientacji telefonu i powrót z innej karty. Nie chodzi o kolekcjonowanie efektownych usterek, lecz o sprawdzenie, czy po każdej z nich człowiek rozpoznaje produkt i wie, co może zrobić.

Sprawdź również klawiaturę, etykiety kontrolek i kolejność treści. Dostępność strony firmowej dotyczy również doświadczeń dodanych dla efektu wizualnego. Samo istnienie zdjęcia nie pomaga, jeśli przycisk przejścia do niego pozostaje niedostępny albo opis zniknął pod warstwą interakcji.

Do odbioru warto włączyć osobę, która odpowiada za produkt, oraz osobę przygotowującą materiały. Pierwsza sprawdza zgodność informacji: czy oba widoki pokazują tę samą konstrukcję, czy podpis nie obiecuje elementu należącego do innego wariantu. Druga ocenia kompletność plików i podpisów. Wspólna próba pomaga zauważyć, że awaria techniczna i brak materiału to dwa różne problemy wymagające różnych poprawek.

W testach z ludźmi pytaj o cechę, której scena miała uczyć. „Gdzie podłącza się przewód?” daje więcej niż „Czy alternatywa jest wystarczająca?”. Pozwól odpowiedzieć na podstawie wybranej drogi. Jeśli odbiorca potrzebuje wrócić do 3D tylko po jedną podstawową informację, właśnie znalazłeś treść do uzupełnienia w wersji zastępczej. Gdy warunki urządzenia i otoczenia zmieniają obsługę, uzupełnij sesję o obserwację użycia strony w rzeczywistym miejscu pracy.

Podobną zasadę warto przyjąć przy interaktywnym demo produktu: dodatkowa interakcja ma ułatwiać zrozumienie, a możliwość pominięcia jej powinna prowadzić do sensownej oferty. Odbiorca, który wybiera prostszą drogę, nadal jest zainteresowanym klientem. Nie musi zdawać egzaminu z obsługi efektów specjalnych.

Na koniec dopisz właściciela obu wersji do procesu aktualizacji. Zmiana konstrukcji, koloru albo sposobu montażu powinna uruchamiać przegląd modelu i materiałów alternatywnych. Pomocny jest krótki zapis przy pozycji katalogowej: model, kadr otwierający, widoki detali, podpisy i data wspólnego przeglądu. Gdy zmienia się tylko cena, obrazy mogą pozostać aktualne. Gdy zmienia się położenie przyłączy, trzeba wrócić do odpowiednich widoków. Osoba publikująca aktualizację nie powinna odgadywać tej zależności po nazwach plików. W przeciwnym razie powstaną dwie opowieści o jednym produkcie, a dział obsługi dostanie rolę tłumacza. Dużo wygodniej zaprojektować zgodność, zanim trzeba ją objaśniać w wiadomościach.