Porównywarka produktów: najpierw wybierz, co warto zestawić

Klient wybiera trzy lampy do stołu. Pierwsza kosztuje 280 zł, druga 390 zł, trzecia 460 zł. Różnica wygląda jasno do chwili, gdy przy ostatniej zauważa dopisek „zestaw dwóch sztuk”. W porównywarce wszystkie trzy ceny stoją w jednym rzędzie, równiutko jak uczniowie na zdjęciu klasowym. Tylko przedmiot porównania gdzieś się zgubił.

To hipotetyczny przykład, lecz dobrze pokazuje kolejność pracy. Zanim narysujesz kolumny, rozstrzygnij, co klient do nich wkłada. Model lampy, wariant z określonym przewodem, pojedynczy produkt czy opakowanie? Każda odpowiedź może być poprawna. Mieszanka odpowiedzi w jednym niewyjaśnionym wierszu daje starannie zaprojektowane nieporozumienie.

Porównywarka ma pomóc rozstrzygnąć konkretną różnicę między kilkoma wybranymi pozycjami. Nie musi mieścić całej zawartości katalogu. Jeżeli klient po dziesięciu minutach nadal otwiera trzy karty, żeby ustalić, co właściwie kupuje, wspólna ramka niewiele mu ułatwiła.

Zestaw zaczyna się przed widokiem porównania

Na liście produktów przycisk „Porównaj” może znaczyć dwie rzeczy: dodanie pozycji do zestawu albo otwarcie już przygotowanego widoku. W projekcie rozdziel te działania. Po zaznaczeniu lampy pokaż, że trafiła do wyboru, i pozwól ją usunąć w tym samym miejscu. Osobny przycisk „Porównaj 3 lampy” prowadzi dalej. Dzięki liczbie użytkownik widzi skutek wyborów, zanim zmieni ekran.

Zaznaczona pozycja powinna być rozpoznawalna również po zmianie sortowania lub przejściu na kolejną stronę wyników. Jeżeli wybór ma się wtedy wyzerować, interfejs musi to wyjaśnić przed utratą zestawu. Pokaż także skrót zestawu z nazwami modeli, aby klient nie musiał odtwarzać wyborów z pamięci.

Ustal, czy do porównania trafia model, czy wybrany wariant. Przy lampie kolor klosza może nie zmieniać żadnego istotnego parametru, lecz długość ramienia już tak. Gdy klient wcześniej wybrał wersję z krótszym ramieniem, nagłówek zestawienia powinien ją nazywać. Automatyczny powrót do pierwszego wariantu z katalogu podmienia przedmiot decyzji.

Jeżeli wariant można zmienić już w zestawieniu, odśwież całą dotyczącą go kolumnę. Wybór dłuższego ramienia może zmieniać wymiary, cenę i dostępność jednocześnie. Nie zostawiaj nowych zdjęć obok starych parametrów. Podczas pobierania danych oznacz zmienianą kolumnę; pozostałe modele pozostaw czytelne. Po błędzie zachowaj poprzedni potwierdzony wariant z informacją o nieudanej zmianie, zamiast przedstawiać przypadkową mieszaninę dwóch wersji.

Niektórych pozycji nie da się użytecznie zestawić w tych samych polach. Lampa stołowa i zapasowy klosz mają wspólny kolor, ale odpowiadają na różne potrzeby. Zamiast dopuścić dowolny wybór i pokazać niemal same puste komórki, określ grupy porównania. Przy niepasującym produkcie wyjaśnij powód: „Klosz jest częścią zamienną. W tym zestawieniu porównujesz kompletne lampy”.

Limit liczby pozycji dobierz do widoku i zadania, a potem sprawdź go na prototypie. Gdy limit zostanie osiągnięty, pokaż wybrane produkty i możliwość wymiany jednego z nich. Samo szare pole „Porównaj” zostawia zagadkę: brak miejsca, błąd czy oferta niedostępna? Klient przyszedł wybrać lampę; dodatkowy pokój zagadek nie był zamawiany.

Zestaw kilku kandydatów można przygotować z listy zapisanych produktów. Zachowaj jednak różnicę między funkcjami. Na liście „na później” mogą leżeć lampa, regał i prezent dla kolegi. Przycisk porównania powinien objąć wyłącznie pasujące pozycje, a resztę pozostawić na miejscu.

Powrót do katalogu powinien przywrócić miejsce, z którego klient dodawał modele, oraz jego aktualny wybór. Oddziel usunięcie kolumny od opróżnienia całego zestawu. Przy dłuższej przerwie ponownie pobierz aktualne dane, ale zachowaj identyfikację wcześniej wybranych pozycji. Gdy jednej nie da się już odnaleźć, nazwij ją i pozwól usunąć lub zastąpić. Pozostałe dwie lampy nie muszą znikać wraz z nią.

Najtrudniejszy wiersz nie zawsze jest najdłuższy

Wróćmy do trzech lamp. Aby zestawienie miało sens, trzeba ustalić podstawę ceny. Można pokazać cenę oferowanego opakowania oraz liczbę sztuk w nim, a ewentualną cenę za sztukę wyraźnie odróżnić. W naszym przykładzie zestaw dwóch lamp za 460 zł daje 230 zł za jedną. To własne przeliczenie przykładowych danych, nie informacja o rzeczywistej ofercie.

Ta liczba nie oznacza, że sklep sprzedaje pojedynczą lampę za 230 zł. Jeżeli minimalny zakup obejmuje dwie sztuki, klient musi nadal widzieć 460 zł jako kwotę zakupu zestawu. Inaczej porównywarka nagradza najatrakcyjniejszą matematykę, a ukrywa warunek zamówienia. Przyjęta podstawa ceny powinna być jednakowa w całym wierszu i opisana obok niego.

Podobny problem dotyczy wymiarów. Wysokość produktu i wysokość pudełka nie mogą dzielić wiersza „Wysokość”. Długość przewodu podana w centymetrach może zostać przeliczona z metrów, ale wymiar po złożeniu nie zamienia się w wymiar rozłożonego produktu przez zmianę jednostki. Najpierw nazwij cechę, dopiero potem ujednolicaj zapis.

Pomaga roboczy opis każdego pola: czego dotyczy, w jakiej jednostce jest zapisane i kiedy ma zastosowanie. Znaczenie potwierdza osoba odpowiedzialna za katalog. Projektant nie powinien zgadywać, czy liczba „52” jest wysokością z kloszem, bez klosza czy odległością zalecaną przez autora zdjęcia. Tę część pracy rozwija model treści katalogu produktowego.

Rozróżnij również brak danych, brak cechy i brak zastosowania. „Nie podano” przy długości przewodu mówi o niepełnym opisie. „Bez przewodu” opisuje konstrukcję lampy. „Nie dotyczy” może pasować do parametru przewodu przy modelu działającym wyłącznie na baterie, jeżeli taki właśnie produkt oferujesz. Jeden myślnik zamiast wszystkich trzech informacji nie pomaga podjąć decyzji.

Uzgodnij też poziom dokładności. Gdy jeden opis podaje 51,8 cm, a drugi 52 cm, zaokrąglenie może ukryć różnicę istotną przy ciasnej wnęce. Wartości mogą wyglądać jednakowo dopiero po przyjęciu konkretnej reguły. Jeżeli sklep nie zna tolerancji wymiaru, nie dopisuj samodzielnie zapewnienia, że produkt na pewno się zmieści. Pokaż dostępną dokładność i wskaż, jak klient może potwierdzić dopasowanie przed zamówieniem.

Jeśli do poprawnego zakupu konieczna jest brakująca wartość, pokaż drogę do jej ustalenia. Może to być sprawdzona karta techniczna albo zapytanie zawierające nazwę modelu i parametru. Nie przepisuj do komórki domysłu na podstawie zdjęcia. Przy dopasowaniu do wnętrza uzupełnieniem pozostaje pokazanie wymiarów i skali produktu; równe liczby w zestawieniu nie zastąpią informacji, gdzie te wymiary zmierzono.

Klient powinien wiedzieć, do której lampy należy liczba

W dłuższym zestawieniu użytkownik czyta jeden parametr, po czym sprawdza drugi kilkanaście wierszy niżej. Nazwa modelu musi pozostać łatwa do odnalezienia. W badaniach opisanych przez Baymard znikające podczas przewijania nagłówki utrudniały przypisanie wartości do produktów; autorzy wskazują utrzymanie nagłówków w widoku jako pomoc w zachowaniu tego kontekstu. To konkretna obserwacja z badania widoku porównania, opublikowanego w 2022 roku, a nie wynik testu Twojego sklepu.

W prototypie sprawdź jednocześnie nazwę modelu i nazwę parametru. Widoczny nagłówek kolumny pomaga mniej, jeśli po przesunięciu w bok klient traci informację, czy ogląda masę lampy, czy długość przewodu. Na telefonie można ograniczyć liczbę widocznych kolumn albo zaprojektować przesuwanie z zachowaniem identyfikacji produktów. Zachowanie powinno być czytelne bez instrukcji zaszytej w stopce.

Układ dla stałego porównania pakietów usług dostarcza części przydatnych rozwiązań, opisanych w tekście o tabelach porównawczych na telefonie. Tutaj dochodzi jednak ruchomy zestaw kolumn. Użytkownik może usunąć środkowy model, dodać czwarty lub wrócić z innego miejsca katalogu. W każdym z tych stanów identyfikacja musi nadal działać.

Nie każdy parametr wymaga takiej samej szerokości opisu. Obok prostej masy może pojawić się sposób montażu z dwoma warunkami. Skrócony tekst powinien dać się rozwinąć bez utraty modelu i wiersza. Przy zdjęciu detalu nazwij przedstawioną część. Samo powiększenie fotografii nie odpowiada na pytanie, czy uchwyt znajduje się w komplecie, czy pokazano go wyłącznie jako przykład użycia.

Nagłówki wymagają również znaczenia w kodzie. MDN opisuje atrybut scope, który wiąże komórkę nagłówkową z odpowiednim wierszem albo kolumną; nie zmienia wyglądu, lecz niesie informację semantyczną. To wąska właściwość nagłówka tabeli w HTML, a nie obietnica dostępności całej porównywarki. Samo pogrubienie nazw wizualnie nie ustanawia tych relacji.

Przy usuwaniu kolumny zaplanuj, na który element przejdzie fokus, czyli wskazanie aktywnego elementu interfejsu. Osoba używająca klawiatury nie powinna wracać na początek strony po każdym usuniętym produkcie. W widoku dwóch modeli usunięcie jednego może pozostawić jego parametry obok przycisku dodania kolejnego. Nie trzeba od razu wyrzucać klienta na listę wyników i kasować jego pracy.

Pokaż różnicę, lecz nie wymyślaj zwycięzcy

Przełącznik „Pokaż tylko różnice” może skrócić długie zestawienie, ale wymaga ustalenia, co uznajecie za równe. „2 m” i „200 cm” mogą oznaczać tę samą długość. „Ciepła biel” i „biały ciepły” mogą być różnymi zapisami jednej potwierdzonej cechy. Z kolei takie samo słowo „bawełna” nie rozstrzyga, czy chodzi o cały produkt, czy wyłącznie pokrowiec.

Najpierw porządkuj dane, potem wykrywaj różnice. Reguła oparta wyłącznie na porównaniu tekstu może podświetlić zmianę skrótu i przeoczyć zmianę znaczenia. Niech osoba odpowiadająca za produkt zatwierdzi normalizację wartości, zamiast akceptować długi wykaz automatycznie znalezionych podobieństw.

Brakująca wartość nie powinna zniknąć tylko dlatego, że w pozostałych kolumnach występuje identyczna liczba. Gdy dwie lampy mają przewód dwumetrowy, a przy trzeciej brak informacji, wiersz nadal zawiera nierozstrzygniętą różnicę. Schowanie go sugerowałoby większą pewność niż ta, którą daje katalog.

Nie każda większa liczba oznacza zaletę. Cięższa podstawa może być pożądana na stole, ale mniej wygodna przy częstym przenoszeniu. Dłuższe ramię może pomóc przy dużym blacie i przeszkadzać na wąskiej półce. Zamiast automatycznie malować najwyższy wynik na zielono, pokaż wartość i znaczenie parametru. Ostateczna preferencja należy do osoby wybierającej.

Podobnie traktuj oceny klientów. Średnia z kilku wypowiedzi o innym wariancie nie jest równorzędnym technicznym parametrem lampy. Jeżeli włączasz ją do porównania, dodaj liczbę opinii i wyjaśnij zakres wersji, których dotyczy. Osobno opisujemy kontekst opinii obok gwiazdek, bo doświadczenie użytkownika może pomóc w wyborze, lecz nie powinno udawać pomiaru laboratoryjnego.

Co sprawdzić z trzema rzeczywistymi kartami

Przed wdrożeniem wybierz z katalogu zestaw niewygodny dla projektu: podobny produkt w opakowaniu, wersję z brakującym parametrem i model z nietypowym wariantem. Osoba znająca ofertę przygotowuje potwierdzone dane i warunki zadania, a uczestnik próby dostaje cel zakupowy. Na przykład: wybierz jedną lampę mieszczącą się na półce o wskazanej głębokości, z przewodem sięgającym do podanego gniazdka.

Obserwuj, skąd bierze odpowiedź. Jeśli wybiera na podstawie ceny za sztukę, sprawdź, czy rozumie wielkość opakowania. Jeśli odrzuca model z myślnikiem, zapytaj po zadaniu, jak zinterpretował ten znak. Jeżeli otwiera kartę, żeby rozpoznać wariant, sprawdź, której informacji zabrakło w nagłówku. Sama poprawna odpowiedź nie ujawnia jeszcze, czy była wynikiem rozumienia, czy szczęśliwego strzału.

Zmień potem jeden produkt i powtórz kluczowy fragment: usuń model, wróć do wyników, dodaj zamiennik. Porównywarka ma wspierać zmianę zdania. Projekt, który działa wyłącznie z trzema starannie wybranymi kartami demonstracyjnymi, jest pokazem slajdów z przyciskami.

Zakres takiej pracy można połączyć z projektowaniem strony i interfejsu w Aeneia Design. Wynikiem ma być widok, w którym klient rozpoznaje przedmiot porównania, rozumie puste miejsce i umie zmienić zestaw. Jeśli po tej drodze wybierze droższą lampę, bo lepiej pasuje do półki, porównywarka wykonała swoją pracę. Liczy się wybór pasujący do jego warunków, nie automatyczny medal dla jednej kolumny.