Warianty produktu: dlaczego zmiana koloru powinna zmieniać coś więcej niż kółeczko

Klient wybiera czerwony organizer, patrzy na zdjęcie czerwonego organizera i dodaje go do koszyka. W koszyku pojawia się biały. To może być mały błąd w przekazaniu identyfikatora. Dla kupującego jest znacznie większy: sklep właśnie pokazał, że nie można ufać własnemu wyborowi.

Na karcie produktu wariant oznacza coś więcej niż ozdobną etykietę przy zdjęciu. Oznacza konkretną rzecz, którą można zamówić. Czasem zmienia wyłącznie kolor, czasem także wymiar, cenę, termin realizacji lub zawartość zestawu. Projekt interfejsu ma pokazać tę różnicę i utrzymać ją do końca ścieżki. Kółeczko trzeba jeszcze połączyć z właściwym zamówieniem.

Wyobraźmy sobie fikcyjną rodzinę organizerów: dwa rozmiary, trzy kolory, dwie wersje pokrywy. Taki przykład wystarczy, żeby zobaczyć problem. Nie wszystkie połączenia muszą istnieć, a spośród istniejących część może być chwilowo niedostępna. Już na papierze mamy trzy różne sytuacje, których nie powinien obsługiwać jeden enigmatyczny szary przycisk.

Zbuduj mapę rzeczywistych kombinacji

Najpierw rozdziel opcję, wartość i wariant. Opcją może być rozmiar, wartością „szeroki”, a wariantem szeroki organizer czerwony z pełną pokrywą. To nie trzy nazwy tego samego. Shopify opisuje wariant jako kombinację wartości opcji i wskazuje, że dane takie jak cena czy zapas mogą wymagać zarządzania dla poszczególnych wariantów.

Do projektu przynieś rzeczywistą tabelę kombinacji. Dla każdej pozycji zapisz identyfikator, wartości opcji i status sprzedaży. Nie generuj automatycznie całego iloczynu możliwości, jeżeli firma nie oferuje wszystkich połączeń. Klikalny prototyp karmiony fikcyjną pełną dostępnością ukryje problem, który pojawi się pierwszego dnia działania sklepu.

Rozróżnij brak kombinacji od braku sztuki. „Nie produkujemy szerokiej wersji z perforowaną pokrywą” oznacza ograniczenie konstrukcji oferty. „Czerwona szeroka wersja wróci po dostawie” opisuje stan konkretnego towaru. Z punktu widzenia interfejsu obie sytuacje mogą blokować zakup, ale prowadzą do innych pytań i kolejnych kroków.

Zdecyduj również, co pozostaje wspólne dla rodziny. Materiał korpusu może być identyczny, wymiary już nie. Jeśli wszystko wpiszesz do ogólnego opisu, klient dostanie średnią z kilku produktów, której nikt nie sprzedaje. Model treści katalogu pomaga ustalić, na jakim poziomie przechowywać poszczególne informacje i jak unikać ręcznych kopii.

Dodatki nie zawsze są wariantami. Osobno kupowana pokrywa może być niezależną pozycją zamówienia. Grawer lub wpisany tekst może stanowić parametr personalizacji. Ustal to z osobą odpowiadającą za katalog, magazyn i realizację. Ekran nie powinien obiecywać logiki, której zaplecze sklepu nie potrafi obsłużyć.

Wybór powinien wyjaśniać własne ograniczenia

Masz do wyboru dwie podstawowe drogi: pokazywać wszystkie wartości z wyjaśnieniem niedostępnych albo zawężać kolejne pola na podstawie wcześniejszego wyboru. Pierwsza pozwala zobaczyć cały zakres oferty. Druga zmniejsza liczbę niemożliwych kroków. Wybierz na podstawie liczby opcji i warunku, z którym klient przychodzi do tej kategorii.

Jeżeli rozmiar jest zwykle warunkiem twardym, ustaw go przed kolorem. Osoba kupująca element do określonej wnęki musi najpierw znaleźć pasujący wymiar. Odwrotna kolejność może prowadzić do długiego oglądania wykończenia dostępnego tylko w zbyt dużej wersji. Nie zakładaj jednak tej hierarchii bez rozmowy o danej kategorii.

Przy niedostępnej wartości pokaż powód. „Brak w tym rozmiarze” znaczy co innego niż „wyprzedane”. Sam przekreślony próbnik koloru nie wyjaśnia żadnego z tych stanów. Jeśli powód można poznać dopiero po najechaniu myszą, odbiorca dotykający ekranu pozostaje bez odpowiedzi. Informacja powinna być dostępna także w zwykłej obsłudze telefonu.

Nie usuwaj po cichu wcześniejszego wyboru. Gdy zmiana rozmiaru wyklucza wybraną pokrywę, wyjaśnij skutek i poproś o uzupełnienie opcji. Automatyczne podstawienie innej wersji może ułatwiać utrzymanie formalnie poprawnego stanu, lecz kupujący powinien wiedzieć, że zmienił się przedmiot zamówienia. Domyślny wybór jest decyzją projektu, a nie neutralną pustką.

Zaprojektuj także powrót do wszystkich możliwości. Klient może uznać, że ważniejszy jest kolor niż wcześniej wybrany rozmiar. Jasne wyczyszczenie wyboru albo możliwość zmiany poprzedniej opcji pomaga rozpocząć porównanie od nowa. Nie trzeba do tego odświeżać strony i ryzykować utraty całego kontekstu.

Dwie możliwe logiki tej samej karty

Wróćmy do organizera. Klient najpierw wybiera kolor czerwony, a potem szeroki rozmiar. Szeroki model występuje wyłącznie z pełną pokrywą. Jednym rozwiązaniem jest pozostawienie obu pokryw na ekranie i oznaczenie perforowanej jako nieoferowanej w tej kombinacji. Dzięki temu odbiorca dowiaduje się, jak zbudowana jest rodzina produktów i dlaczego jego zamiar wymaga zmiany.

Drugie rozwiązanie prowadzi najpierw przez rozmiar, potem pokazuje dostępne kolory i wyposażenie. Wybór pełnej pokrywy może wynikać z jedynej możliwości, ale nadal trzeba to powiedzieć. Brak widocznej kontrolki nie powinien oznaczać braku informacji o zestawie. Podsumowanie wyjaśnia, że wybrany model zawiera pełną pokrywę i że nie ma tu drugiej wersji.

Obie drogi mogą być użyteczne. Pierwsza lepiej pokazuje zakres rodziny, druga prowadzi węższym korytarzem. Nie rozstrzygaj tego wyłącznie na podstawie liczby kliknięć. Zobacz, czy uczestnik potrafi wyjaśnić otrzymany produkt i zmienić priorytet, gdy wymarzona kombinacja nie istnieje. Jedno kliknięcie mniej nie rekompensuje zakupu opartego na błędnym założeniu.

Do porównania przygotuj również przypadek chwilowego braku. Jeśli szeroki czerwony organizer istnieje, lecz jest wyprzedany, zniknięcie czerwonej wartości może sugerować, że producent jej nie oferuje. Widoczny status pozwala rozpoznać sytuację. Dalsza droga zależy od rzeczywistej obsługi sklepu: inny kolor, kontakt lub powiadomienie, jeżeli taka funkcja została przewidziana.

Razem aktualizuj nazwę, obraz i warunki

Po zakończeniu wyboru pokaż krótkie podsumowanie: szeroki, czerwony, pełna pokrywa. Dzięki temu osoba nie musi odtwarzać stanu trzech oddalonych kontrolek. Podsumowanie jest szczególnie przydatne przy podobnych nazwach lub na telefonie. Nie zastępuje pól wyboru, lecz potwierdza, co wynika z ich połączenia.

Dokumentacja WooCommerce opisuje zmianę ceny, obrazu i dostępności po wybraniu wymaganych opcji wariantu. Rzeczywisty wygląd zależy między innymi od motywu. Dla projektu oznacza to konieczność odebrania spójności tych informacji, a nie założenie, że każda platforma pokaże je poprawnie bez uzgodnienia i testu.

Zdjęcie może przedstawiać dokładnie wariant albo całą rodzinę. Jeśli masz tylko fotografię wersji białej, nie przefarbowuj jej przypadkowo filtrem na dowolny odcień. Ustal, co materiał rzeczywiście potwierdza. Odbiorca powinien otrzymać jasną informację o reprezentacyjnym ujęciu, a przy istotnej różnicy konstrukcji osobny, właściwy obraz.

Gdy zmiana zdjęcia trwa dłużej niż zmiana ceny, zabezpiecz ten przejściowy moment. Nie pokazuj przez sekundę nowej nazwy nad starym produktem bez wskazania ładowania. Przy szybkim przełączaniu opcji upewnij się, że spóźniona odpowiedź poprzedniego wyboru nie nadpisze aktualnego stanu. W takim momencie mikrointerakcja służy zrozumieniu, a nie samej płynności ruchu.

Nie przewijaj strony automatycznie po każdym dotknięciu próbki. Klient może porównywać kolory, a skakanie ekranu utrudni ocenę. Przekazuj zmianę czytelnie, zachowując stabilne miejsce działania. Jeżeli potrzebne jest dodatkowe wyjaśnienie lub błąd, pokaż je blisko odpowiedniego pola zamiast odsyłać do komunikatu poza widocznym fragmentem.

Kolor potrzebuje nazwy, a rozmiar znaczenia

Próbka koloru przyspiesza oglądanie, lecz nie powinna być jedyną nazwą wartości. „Czerwony ceglasty” pozwala potwierdzić wybór osobie, która inaczej postrzega barwy albo korzysta z czytnika ekranu. Nazwa ma odpowiadać katalogowi. Wymyślne „zachód nad terakotą” może zostać jako określenie kolekcji, ale dobrze dodać zwykłe objaśnienie odcienia.

Wyraźnie odróżnij zaznaczenie od dostępności i wskazania klawiatury. Jedna cienka obwódka nie powinna oznaczać trzech stanów. Obserwuj kontrolki przy słabszym świetle, powiększeniu i w ruchu palca. Próba dostępności strony musi obejmować prawdziwy wybór, nie tylko oglądanie statycznej makiety z jedną aktywną opcją.

Rozmiary opisuj w systemie odpowiednim dla produktu. Oznaczenie „duży” bez wartości działa tylko wtedy, gdy klient zna całą kolekcję. Przy przedmiotach fizycznych dodaj drogę do wymiarów i skali produktu. Informacja o zewnętrznej szerokości nie zawsze odpowiada na pytanie, co zmieści się wewnątrz.

Zadbaj o pełne nazwy. „Zestaw z pokrywą podwyższoną” bywa dłuższy niż pole przygotowane dla „mały”. Jeżeli obcinasz końcówkę, możesz usunąć część rozstrzygającą wybór. Projektuj na prawdziwych nazwach, korzystając z zasad dla długich tekstów w interfejsie. Wszystkie opcje nie muszą wyglądać jak rząd równych kapsułek.

Kolejność wartości też niesie znaczenie. Rozmiary ułóż logicznie, kolory w uzgodnionej sekwencji, a wersje wyposażenia tak, żeby dało się odczytać relacje. Nie pozwól, aby przypadkowa kolejność importu stworzyła pozorną rekomendację. Jeżeli jedna opcja jest polecana, wskaż powód rekomendacji i warunki jej zastosowania.

Zapisz stany, które wykonawca ma rzeczywiście zbudować

Przy przekazaniu projektu wskaż stan początkowy, wybór częściowy i wybór kompletny. Pierwszy mówi, czy cokolwiek jest domyślnie zaznaczone. Drugi wyjaśnia, czego jeszcze potrzeba. Trzeci identyfikuje konkretny wariant. Bez tych trzech widoków wykonawca będzie uzupełniał najważniejsze reguły na podstawie jednej atrakcyjnej makiety, na której wszystko już jest poprawne.

Dodaj osobne przykłady oczekiwania i błędu pobrania danych. Jeżeli sklep nie potrafi potwierdzić ceny wybranej wersji, nie powinien pozostawiać przy niej dawnej ceny bez komunikatu. Ustal, czy można ponowić próbę, czy potrzebne jest odświeżenie. Treść błędu ma wskazać brak potwierdzenia, a nie sugerować, że towar na pewno zniknął z magazynu.

Wskaż, kto dostarcza dane i kto je zatwierdza. Osoba fotografująca może opisać widoczne wykończenie, magazyn zna zapas, a opiekun katalogu odpowiada za powiązanie identyfikatora z wersją. Projekt obejmuje ich wspólny wynik. Sama lista kolorów przekazana grafikowi nie wystarczy do uruchomienia poprawnej sprzedaży wielowariantowego produktu.

Zapisz również reakcję na zmianę danych podczas otwartej sesji. Klient może pozostawić kartę na dłużej i wrócić po rozmowie z drugą osobą. Przed wykonaniem działania sklep powinien potwierdzić właściwy stan po swojej stronie. Interfejs potrzebuje czytelnej odpowiedzi, jeśli warunki się zmieniły; nie należy udawać, że obraz otwarty godzinę wcześniej rezerwował towar.

Do odbioru dołącz identyfikatory przykładowych wariantów. Pozwalają porównać to, co widać na ekranie, z tym, co trafiło do koszyka i dalszej obsługi. Nie muszą dominować w projekcie dla klienta. Są narzędziem jednoznacznego potwierdzenia, że przyjemna kontrolka przekazuje dokładnie tę wersję, którą opisuje.

Sprawdź, czy wybór przeżywa dalszą drogę

Udostępniony adres powinien odtwarzać wskazany wariant albo wyraźnie pokazywać, że otwiera rodzinę bez wyboru. To decyzja do ustalenia na etapie wdrożenia. Sam wygląd adresu nie wystarczy: skopiuj go, otwórz w nowej sesji i porównaj obraz, nazwę, cenę oraz zaznaczone opcje. Link bywa częścią rozmowy między osobami podejmującymi zakup.

Przy powrocie do starszego linku uwzględnij również aktualność wyboru. Wariant może zostać wycofany po zmianie katalogu. Strona powinna wtedy wyjaśnić zmianę, zamiast bez słowa uruchamiać pierwszy dostępny model. Najważniejsze jest odzyskanie sensu wcześniejszego zamiaru, nawet jeśli nie da się już odtworzyć pierwotnej możliwości zakupu. Ten sam wariant powinien dać się rozpoznać w liście produktów zapisanych na później, także po zmianie katalogu.

Po dodaniu do koszyka pokaż identyfikowalną wersję. Ogólna nazwa kolekcji z miniaturą nie pozwala rozpoznać, czy wybrano właściwą pokrywę. To samo dotyczy ponownego wejścia z koszyka. Odbiorca powinien móc obejrzeć konfigurację bez ponownego szukania jej wśród wszystkich możliwości i bez przypadkowego dodania drugiej, odmiennej pozycji.

Przy zmianie dostępności zachowaj wcześniej wybrane wartości do wyjaśnienia. Komunikat „nie można dodać” powinien wskazać, który wariant przestał być dostępny i co można zrobić dalej. Nie przerzucaj klienta od razu na inny kolor. Substytut może wymagać nowej decyzji, nawet jeśli z punktu widzenia magazynu obie rzeczy należą do tej samej rodziny.

W próbie końcowej odtwórz historię kilku wyborów: wybór z adresu, zmiana rozmiaru, niemożliwa kombinacja, poprawka, koszyk i powrót. Powtórz ją dotykiem oraz klawiaturą. Taki odbiór całej ścieżki pokaże, czy wariant pozostaje tym samym przedmiotem na kolejnych ekranach.

Zanim zamówisz projekt, zbierz tabelę rzeczywistych kombinacji, przykładowe zdjęcia i informację o systemie magazynowym. Oferta Aeneia Design łączy projekt doświadczenia z uzgodnionym wdrożeniem sklepu. Rozmowa o kolorowych kontrolkach będzie wtedy rozmową o rzeczywistym produkcie, a nie o tym, który odcień szarości najlepiej maskuje brak danych.