Klient, który patrzy na zdjęcie kanapy na białym tle, widzi kanapę. Ta sama kanapa w salonie, z dywanem, lampą i poduszkami, pokazuje mu efekt. Shop the Look zamienia tę aranżację w ścieżkę zakupową: każdy widoczny przedmiot staje się klikalny.
Mechanika jest prosta. Jej powodzenie zależy od szczegółów wykonania, które widać dopiero na produkcji.
Gdzie to działa
Realnie nadają się trzy rodziny.
Moda i akcesoria, przypadek pierwotny. Kompletna stylizacja odpowiada na pytanie, którego karta produktu nie porusza: z czym nosić tę rzecz.
Dekoracja i meble. Zakup odbywa się przez klimat wnętrza, prawie nigdy przez pojedynczy produkt. To sektor, w którym średni koszyk rusza się najbardziej.
Majsterkowanie i ogród w kontekście. Urządzony taras, wyposażony warsztat, kącik biurowy. Odwiedzający odkrywa produkty komplementarne, których by nie szukał.
Mechanizm jest natomiast bezużyteczny na katalogu technicznym, gdzie zakup jest jednostkowy i sprecyzowany z góry: części zamienne, materiały eksploatacyjne, produkty profesjonalne kupowane po referencji.
Zdjęcie, pierwsze ograniczenie
Wynik zależy bardziej od obrazu niż od modułu.
Każdy produkt musi być rozpoznawalny. Przedmiot w połowie schowany za innym da niezrozumiały punkt aktywny. Komponuj scenę, myśląc o strefach klikalnych, nie tylko o estetyce.
Rozdzielczość musi pozwalać na zoom, zwłaszcza na mobile, gdzie odwiedzający powiększa, żeby rozróżnić detal przed kliknięciem.
Kadr musi zostawiać przestrzeń. Produkt przyklejony do krawędzi obrazu nie może dostać punktu aktywnego bez wyjścia dymka poza kadr.
Przewidź też format: bardzo szeroki obraz źle działa na mobile, kwadratowy marnuje przestrzeń na desktopie. Dwie wersje tej samej sceny to najczystsze rozwiązanie.
Lookbook Zakupowy: Shop the Look i Klikalne HotspotyLookbook zakupowy, który zamienia Twoje zdjęcia w sprzedaż€79,00
Rozmieszczanie punktów aktywnych
Cztery reguły z realnego użycia.
- Maksymalnie pięć do siedmiu na obraz. Powyżej scena staje się polem kropek i odwiedzający nie otwiera żadnej.
- Wystarczający rozmiar dotykowy. Punkt musi być osiągalny palcem, co zakłada strefę około czterdziestu pikseli boku na mobile, niezależnie od wizualnego rozmiaru kropki.
- Jeden punkt na produkt, na najbardziej rozpoznawalnej części. Na krześle siedzisko, a nie noga.
- Wizualna wskazówka klikalności. Statyczna kropka pozostaje niezauważona. Lekka animacja przy wejściu na obraz, potem dyskretny stan spoczynku, rozwiązuje ten punkt.
Zawartość punktu aktywnego
To, co otwiera się po kliknięciu, decyduje o konwersji. Cztery elementy, nie więcej.
Nazwa produktu, cena, dostępność i akcja. Ta akcja musi być bezpośrednim dodaniem do koszyka, gdy produkt nie ma wariantów, i linkiem do karty, gdy wybór rozmiaru lub koloru pozostaje konieczny.
Wymuszanie przejścia przez kartę dla produktu bez opcji dodaje zbędny krok. Proponowanie bezpośredniego dodania dla produktu wymagającego rozmiaru produkuje błędne zamówienia i zwroty.
Zachowanie na mobile
To tutaj większość wdrożeń zawodzi. Na mobile dymek otwierający się obok punktu aktywnego zakrywa obraz i często wychodzi poza ekran.
Zachowanie, które działa: po kliknięciu punktu aktywnego karta produktu pojawia się na dole ekranu, na całej szerokości, nie zasłaniając dotkniętej strefy. Odwiedzający zachowuje kontekst wizualny i może przejść do kolejnego punktu bez zamykania.
Przewidź też widok zapasowy. Pod obrazem klasyczna lista produktów obecnych w scenie, zawsze widoczna. Służy odwiedzającym, którzy nie rozumieją mechaniki, i rozwiązuje dwa inne problemy.
Dostępność i pozycjonowanie
Oba załatwia ta sama lista.
Obraz z nałożonymi punktami aktywnymi nie jest dostępny dla czytnika ekranu, a produkty nie są indeksowalnymi linkami, jeśli moduł ładuje je JavaScriptem po kliknięciu. Lista HTML pod obrazem, z linkiem do każdej karty, czyni scenę dostępną i tworzy realne linkowanie.
Dodaj opisowy tekst alternatywny na obrazie, który opisuje scenę, a nie nazwę pliku.
Gdzie umieszczać looki
Trzy komplementarne miejsca.
Dedykowana strona grupująca wszystkie sceny, ułożona według uniwersum lub sezonu. Dobrze się udostępnia i pozycjonuje na zapytaniach inspiracyjnych.
Na górze kategorii, jedna lub dwie sceny z danego uniwersum. To miejsce, które konwertuje najlepiej, bo odwiedzający jest tam już w fazie poszukiwania.
Na karcie produktu blok „widziany w tych aranżacjach”, który odsyła do scen zawierających ten produkt. To odwrotne linkowanie podnosi średni koszyk.
Pomiar
Trzy wskaźniki. Współczynnik interakcji, udział odwiedzających otwierających co najmniej jeden punkt aktywny, który mówi, czy mechanika jest zrozumiana. Współczynnik dodań z punktów aktywnych. Oraz średni koszyk sesji, które widziały scenę, w porównaniu z pozostałymi: to tam mechanizm się uzasadnia lub nie, bo kosztuje czas produkcji fotograficznej.
Moduł Lookbook Shoppable i Shop the Look obsługuje tę mechanikę w PrestaShop 8 i 9: rozmieszczanie punktów aktywnych na obrazie, karta produktu z bezpośrednim dodaniem do koszyka, dopasowane zachowanie na mobile, lista HTML produktów dla dostępności i odwrotny blok na powiązanych kartach.
