Zdjęcie aranżacyjne pokazuje kompletną stylizację, umeblowane wnętrze, wyposażony warsztat. Odwiedzający widzi całość i nie wie, jakie produkty ją tworzą ani gdzie je znaleźć. Hotspoty rozwiązują ten problem, pod warunkiem że są poprawnie rozmieszczone i wdrożone.
Komercyjny sens tego formatu został omówiony osobno. Ten artykuł dotyczy wdrożenia.
Gdzie umieszczać punkty
Cztery zasady, według ważności.
Na produkcie, nie obok. Punkt umieszczony na środku obiektu jest rozumiany natychmiast. Punkt unoszący się kilka centymetrów dalej zmusza do zgadywania, co wskazuje.
Oddalone od siebie co najmniej o szerokość palca. Dwa zbyt bliskie punkty są nie do odróżnienia dotykiem. Licz odległość równą minimalnej strefie dotykowej między dwoma środkami.
Maksymalnie pięć do ośmiu na obraz. Powyżej obraz staje się zasiewem plakietek i odwiedzający nie otwiera żadnej. Jeśli Twój wizual zawiera dwanaście produktów, pokaż osiem i zaproponuj pełną listę poniżej.
Na czytelnych strefach. Punkt na bardzo ciemnym lub mocno teksturowanym obszarze znika. Przewidź obrys lub cień, by zagwarantować widoczność niezależnie od tła.
Problem współrzędnych
Główna trudność techniczna, i jest niedoceniana.
Punkt umieszczony 340 pikseli od lewej krawędzi na obrazie o szerokości 1200 pikseli ląduje w złym miejscu, gdy tylko obraz jest wyświetlany w 380 pikselach na telefonie.
Zasada: przechowuj współrzędne w procentach szerokości i wysokości, nigdy w pikselach. Punkt zostaje na swoim miejscu niezależnie od rozmiaru wyświetlania.
Druga pułapka: kadrowanie. Jeśli Twój obraz jest kadrowany różnie w zależności od formatu ekranu, szeroki na komputerze i kwadratowy na telefonie, punkty obliczone na jednym są błędne na drugim.
Dwie możliwe odpowiedzi. Używać tego samego obrazu wszędzie, tylko przeskalowanego. Albo zdefiniować osobne zestawy współrzędnych na format, co podwaja pracę rozmieszczania.
Pierwsze rozwiązanie jest najprostsze i wystarcza w zdecydowanej większości przypadków.
Lookbook Zakupowy: Shop the Look i Klikalne HotspotyLookbook zakupowy, który zamienia Twoje zdjęcia w sprzedaż€79,00
Zachowanie dotykowe
To ono decyduje o rzeczywistym użyciu, ponieważ ten format jest często przeglądany na telefonie.
Na komputerze najechanie pokazuje podgląd, a kliknięcie prowadzi do produktu. Na ekranie dotykowym najechanie nie istnieje, a bezpośrednie przeniesienie tego zachowania daje bezużyteczny interfejs.
Trzy opcje dla dotyku.
Jedno dotknięcie otwiera podgląd, drugie prowadzi do produktu. Częste zachowanie, z tą wadą, że wymaga dwóch gestów.
Jedno dotknięcie otwiera kompaktową kartę z obrazem, nazwą, ceną i przyciskiem dodania do koszyka. Odwiedzający może kupić bez opuszczania obrazu, co jest najlepszym zachowaniem komercyjnie.
Jedno dotknięcie prowadzi bezpośrednio do produktu. Szybkie, ale traci kontekst obrazu, co jest szkodą przy kompletnej stylizacji.
Druga opcja konwertuje najlepiej, bo pozwala skomponować kilka zakupów z tego samego obrazu.
Dwa szczegóły wdrożeniowe. Strefa dotykowa musi być większa niż widoczny punkt, co najmniej czterdzieści cztery piksele na bok. A zamknięcie podglądu musi być możliwe dotknięciem na zewnątrz, nie tylko małego krzyżyka.
Dostępność
Punkt systematycznie zaniedbywany w tym formacie, a przecież możliwy do załatwienia w kilku liniach.
Obraz z klikalnymi strefami stawia trzy pytania.
Sam obraz musi mieć tekst alternatywny opisujący scenę, nie listę produktów. „Salon z szarą sofą, dębowym stolikiem kawowym i lampą stojącą” wystarczy.
Każdy punkt musi być nazwanym elementem interaktywnym, noszącym nazwę produktu, który wskazuje. Punkt bez etykiety to niemy przycisk dla czytnika ekranu.
Nawigacja klawiaturą musi pozwalać dotrzeć do każdego punktu w logicznej kolejności i otworzyć podgląd klawiszem aktywacji.
Dodaj element, który załatwia wszystko: tekstową listę produktów pod obrazem. Służy czytnikom ekranu, użytkownikom klawiatury, wyszukiwarkom i odwiedzającym, którzy wolą listę. To najbardziej opłacalne uzupełnienie tego mechanizmu.
Co widzą wyszukiwarki
Hotspoty są budowane skryptem i ich zawartość nie zawsze jest czytelna.
Trzy praktyczne konsekwencje.
Linki do produktów muszą być prawdziwymi linkami w kodzie, nie klikalnymi elementami obsługiwanymi wyłącznie skryptem. Inaczej tracisz naturalne linkowanie między stroną aranżacyjną a kartami produktów.
Tekst alternatywny obrazu niesie informację o scenie, co pomaga wyszukiwarce obrazów.
Lista pod obrazem, wspomniana wyżej, czyni treść w pełni czytelną bez zależności od renderowania skryptów.
Wydajność
Obraz lookbooka jest zwykle duży i ciężki. Trzy środki ostrożności.
Serwować właściwy rozmiar według ekranu, z formatami adaptacyjnymi. Obraz 2400 pikseli na telefonie to czyste marnotrawstwo.
Deklarować wymiary, by zarezerwować miejsce i uniknąć skakania strony, gdy obraz się pojawia.
Ładować punkty po obrazie, ale rezerwować ich pozycję od początku, by nie pojawiały się z przesunięciem.
Punkt uzupełniający: jeśli masz kilka obrazów lookbooka na jednej stronie, ładuj natychmiast tylko pierwszy, a kolejne odłóż.
Zawartość podglądu
Pięć elementów, nie więcej.
Miniatura produktu, która wizualnie potwierdza, o co chodzi.
Nazwa, pełna, ale krótka.
Cena, z informacją o niedostępności w razie potrzeby.
Przycisk dodania do koszyka, lub wyboru rozmiaru, jeśli produkt ma warianty.
Link do pełnej karty produktu, dla tych, którzy chcą wiedzieć więcej.
Przy produktach z wariantami pojawia się kwestia rozmiaru. Dwa podejścia: otworzyć selektor w podglądzie albo odesłać do karty. Pierwsze konwertuje lepiej przy produktach łatwych do wyboru, drugie unika błędów przy produktach, gdzie wybór wymaga namysłu.
Utrzymanie
Aspekt często odkrywany po kilku miesiącach.
Obraz lookbooka starzeje się wraz z katalogiem. Trzy sytuacje do obsłużenia.
Produkt jest wyprzedany. Punkt musi zostać, z informacją o niedostępności i ewentualnie powiadomieniem o powrocie do sprzedaży. Usunięcie go zostawia w obrazie dziurę bez wyjaśnienia.
Produkt jest wycofany na stałe. Dwie opcje: usunąć punkt albo przekierować go na równoważny produkt z wyraźną wzmianką.
Cały obraz staje się nieaktualny. Miniona kolekcja. Przewidź datę końca dla każdego obrazu, a przynajmniej okresowy przegląd.
Przydatna kontrola, do zautomatyzowania: wylistować punkty wskazujące na nieaktywne lub usunięte produkty. W sklepie, który zgromadził dwadzieścia lookbooków, ta lista szybko się zapełnia.
Pomiar
Trzy wskaźniki.
Współczynnik interakcji z punktami w stosunku do wyświetleń obrazu. Mówi Ci, czy mechanizm jest zauważany i rozumiany.
Liczba różnych otwartych produktów na sesję. To właściwa wartość formatu: odwiedzający, który otwiera trzy, komponuje stylizację.
Średni koszyk sesji, które przeszły przez lookbook, w porównaniu z pozostałymi. To tu format się broni albo nie.
Moduł Lookbook Shoppable dla PrestaShop wdraża ten mechanizm w PrestaShop 8 i 9: rozmieszczanie punktów we współrzędnych względnych, by pozostawały dokładne przy każdym rozmiarze, kompaktowa karta z dodaniem do koszyka po dotknięciu, tekstowa lista produktów pod obrazem dla dostępności i SEO oraz wykrywanie punktów wskazujących na nieaktywne produkty.
