Zapisane na później: lista, która pamięta powód wyboru

W poniedziałek zapisujesz białą lampę z krótkim ramieniem. W czwartek wracasz do listy: zdjęcie pokazuje czarną, a karta otwiera najpopularniejszy wariant z długim ramieniem. Serduszko nadal jest wypełnione. Tylko pamięta coś innego niż ty.

W fikcyjnym sklepie z oświetleniem właścicielka małej księgarni wybiera lampy do stołów. Przez kilka dni sprawdza wymiary, uzgadnia kolor z drugą osobą i odkłada kilka propozycji. Lista zapisanych produktów ma jej pomóc wrócić do wybranego koloru i mocowania bez ponownego przeszukiwania katalogu. Sam zbiór adresów do rodzin produktów nie zawsze wystarczy.

Co zapisuje kliknięcie serca

Najpierw ustal jednostkę zapisu. Klient może zapisywać cały model, konkretny wariant albo własną konfigurację. To trzy różne obietnice. Jeśli zapisujesz model, wyjaśnij, że kolor i rozmiar trzeba będzie wybrać później. Jeśli zapisujesz wariant, pokaż jego cechy na liście i zachowaj je po przejściu do produktu.

Przycisk powinien działać zgodnie z miejscem użycia. Na karcie na liście produktów, gdzie klient nie wybierał jeszcze ramienia, zapis może dotyczyć modelu. Na stronie produktu po ustawieniu koloru i długości może dotyczyć konkretnej kombinacji. Gdy te dwa działania mają różne znaczenie, nie ukrywaj różnicy pod jednakowym komunikatem „zapisano produkt”.

Shopify opisuje SelectedOption jako parę nazwa–wartość określającą wybór opcji wariantu. To przykład reprezentacji konkretnego wyboru. Sama referencja danych nie oznacza gotowej funkcji listy ani jej synchronizacji. W projekcie ustal, jakie cechy rzeczywiście utrwalisz i jak pokażesz je klientowi po powrocie.

W naszej księgarni pozycja może więc brzmieć: nazwa modelu, biały kolor, krótkie ramię, wybrany typ mocowania. Zdjęcie ma odpowiadać temu wariantowi, a jeśli go nie ma, nie sugerować innego. Wyróżnij cechy, które rozstrzygają wybór. Samo powtórzenie nazwy z karty produktu nie przypomni, dlaczego akurat tę wersję dodano do listy.

Jeżeli klient zmieni wariant po wcześniejszym zapisie, zaprojektuj czytelną regułę. Może aktualizować zapisaną pozycję albo dodać drugą wersję tego samego modelu. Obie drogi bywają użyteczne. Właścicielka księgarni może celowo porównywać białą i grafitową lampę. Automatyczne zastąpienie pierwszej usunie jej wcześniejszy wybór bez pytania.

Również cofnięcie zapisu wymaga jasnego zakresu. Czy dotyczy obecnej wersji, wszystkich zapisanych wariantów modelu czy wyłącznie pozycji widocznej na danej karcie? Nazwa działania i stan listy powinny pozwalać to przewidzieć. Zasady wyboru wariantu produktu trzeba tutaj przedłużyć na zapis i późniejszy powrót, zamiast zaczynać od wariantu domyślnego.

Zapisane gdzie i dla kogo?

Przy pierwszym użyciu pokaż klientowi, gdzie będzie dostępna lista. Może działać tylko w tej przeglądarce, na koncie albo przez osobny link. Dobierz komunikat do użytego rozwiązania. „Wróć kiedy chcesz, na dowolnym urządzeniu” jest obietnicą znacznie szerszą niż pamiętanie danych na jednym komputerze.

MDN opisuje localStorage jako mechanizm zachowujący dane między sesjami przeglądarki. Dla trybu prywatnego wskazuje usunięcie po zamknięciu ostatniej prywatnej karty. To konkretna granica techniczna, jeśli właśnie na tym mechanizmie opiera się lista. Komunikat dla klienta powinien mówić o miejscu zapisu zwykłymi słowami.

Potwierdzaj działanie dopiero po jego skutecznym wykonaniu. Jeśli zapis nie jest dostępny, serce nie powinno pozostawać w stanie sugerującym sukces. Pokaż informację przy działaniu i dostępną dalszą drogę. Nie każ klientowi odkrywać pustej listy dopiero po powrocie następnego dnia.

Zaprojektuj również oczekiwanie na wynik zapisu. Powtórne kliknięcie podczas trwającej operacji nie powinno bez wyjaśnienia dodać drugiej pozycji ani odwrócić pierwszego wyboru. Po niepowodzeniu pozwól ponowić działanie tak, żeby klient rozumiał, czy zapisuje teraz, czy usuwa zapisany wariant. W próbie sprawdź opóźnioną odpowiedź, zamiast oceniać wyłącznie natychmiastową zmianę koloru serca.

Przy liście przypisanej do konta sprawdź przejście od korzystania bez logowania do zalogowania. Klient może mieć już dwie wcześniejsze propozycje i dodać trzy kolejne na telefonie. Ustal, czy je łączysz, czy proponujesz wybór zestawu. Przed zastąpieniem pokaż skutek. Zniknięcie trzech nowych lamp po zalogowaniu trudno wyjaśnić samą zmianą ikonki użytkownika.

Jeżeli zapis wymaga konta, wyjaśnij to przed dłuższą czynnością. Możesz pozwolić obejrzeć listę lokalną, a zapis na koncie zaproponować w odpowiednim momencie, jeśli tak działa serwis. Nie wprowadzaj dodatkowego etapu tylko dlatego, że konto już istnieje w sklepie. Najpierw ustal, jaką korzyść daje przy tej konkretnej liście.

Na wspólnie używanym komputerze odróżnij listę konta od danych pozostawionych w przeglądarce. Po wylogowaniu klient powinien rozumieć, co jest nadal widoczne. Ktoś inny nie powinien przyjąć tych samych serc za własny wybór. To część czytelnego zachowania funkcji, a nie temat do ukrycia w długiej instrukcji technicznej.

Gdy otwarcie listy wymaga pobrania danych, odróżnij oczekiwanie od pustego zestawu. Komunikat „nic jeszcze nie zapisano” nie powinien pojawić się tylko dlatego, że odpowiedź nie nadeszła. Po błędzie pokaż możliwość ponowienia i zachowaj pozostały kontekst. Klient nie powinien zaczynać dodawania tych samych lamp drugi raz, bo chwilowy brak dostępu przedstawiono jako brak jego wyborów.

Lista ma pomagać pamiętać powód wyboru

W księgarni jedna lampa pasuje do wąskiego stołu, druga do miejsca przy oknie. Jeśli rozwiązanie oferuje własne notatki lub nazwy zestawów, pozwól zapisać ten powód. „Stół przy wejściu” bywa po tygodniu użyteczniejsze niż kolejność dodania. Nie każ klientowi budować systemu folderów, zanim odłoży pierwszy produkt; zacznij od najprostszej sensownej listy.

Przy większym zestawie pokaż rozpoznawalny obraz, nazwę i cechy wariantu, a działania rozdziel od siebie. Otwarcie produktu, usunięcie pozycji i dodanie do koszyka nie powinny kryć się pod tym samym kliknięciem w kafel. Po przypadkowym usunięciu przydatne może być cofnięcie. Utrata notatki powinna być również objęta jego zakresem, jeśli należała do tej pozycji.

Jeśli lista przechowuje planowaną liczbę sztuk, oddziel ją od liczby propozycji. Właścicielka księgarni może zapisać trzy modele jako alternatywy dla sześciu stołów. Licznik przy liście powinien mówić o trzech pozycjach, a dodanie wybranej lampy do koszyka jasno określać liczbę sztuk. Zapisana notatka „sześć stołów” nie jest poleceniem zamówienia sześciu egzemplarzy każdego modelu.

Zapis na później nie musi oznaczać gotowości do zakupu. Nie przenoś automatycznie całej listy do koszyka po powrocie. Właścicielka księgarni mogła celowo odłożyć konkurujące propozycje i zamierzać kupić tylko jedną. Zbiorcze dodanie, jeśli je oferujesz, powinno pokazać zakres i wynik przed podjęciem dalszej decyzji.

Przy działaniu na kilku zaznaczonych pozycjach pokaż wynik dla każdej z nich. Jeżeli dwie lampy dodano do koszyka, a trzecia wymaga wyboru wariantu, nie podsumowuj wszystkiego jako „gotowe”. Zachowaj nieprzeniesioną propozycję i wskaż następne działanie. Nie usuwaj całej listy tylko dlatego, że część zestawu udało się przenieść.

Dobrze działa przejście do porównania wybranych modeli, gdy klient faktycznie chce zestawić parametry. Lista zapisanych produktów zachowuje zainteresowanie, a porównywarka porządkuje konkretne różnice. Nie łącz tych funkcji w jeden niejasny tryb, w którym usunięcie kolumny z porównania kasuje także zapis na później.

Po otwarciu produktu i powrocie zachowaj rozpoznawalne miejsce na liście. Przy kilkunastu pozycjach skok na sam początek zmusza do ponownego szukania. Jeśli lista ma własne porządkowanie, wyjaśnij je i nie zmieniaj co chwilę bez działania klienta. Kolejność ostatnio oglądanych i kolejność dodanych nie są tym samym.

Gdy zapis następuje na liście z aktywnymi filtrami, odróżnij filtr od trwałej cechy wyboru. Klient mógł przeglądać białe lampy, ale przycisk na ogólnej karcie nadal zapisywać cały model. W powrocie liczy się to, co rzeczywiście utrwalono, a nie kontekst, który akurat znajdował się na ekranie.

Jeżeli chcesz ustalić, jakie informacje ludzie próbują zapamiętać między wizytami, przydaje się badanie dzienniczkowe drogi do zakupu. Pozwala zebrać ślady kolejnych podejść i powodów powrotu. Nie zastępuj ich założeniem, że każdy zapisany produkt jest porzuconym zakupem wymagającym pilnego przypomnienia.

Katalog się zmienił. Pokaż, co z dawnym wyborem

Przy powrocie sprawdź, czy zapisana wersja nadal istnieje. Jeżeli biały kolor wycofano, nie otwieraj bez komentarza czarnego. Zachowaj informację o dawnym wyborze i nazwij zmianę. Możesz zaproponować dostępne wersje, lecz klient powinien sam rozstrzygnąć, czy któraś nadal pasuje do stołu w księgarni.

Odróżnij chwilowy brak od wycofania wariantu i od usunięcia całego produktu. Każdy stan daje inną dalszą drogę. W pierwszym może mieć sens oczekiwanie, w drugim wybór innej wersji, w trzecim poszukanie zamiennika. Nie kasuj automatycznie pozycji, jeśli jej obecność pomaga człowiekowi zrozumieć, co się zmieniło.

Pokaż aktualne warunki przy przejściu do koszyka. Lista zapisanych produktów nie jest rezerwacją ceny ani dostępności, chyba że oferta rzeczywiście obejmuje takie zobowiązanie. Wyjaśnij zmianę w miejscu, w którym klient podejmuje decyzję. Stare zdjęcie i dawny opis pozostawione przy aktualnym przycisku zakupu mogą stworzyć sprzeczny widok.

Podobny problem pojawia się przy ponownym zakupie z dawnego zamówienia. Stary zapis wskazuje wcześniejszy zamiar albo wcześniejszy zakup, lecz nowe działanie potrzebuje dzisiejszych danych. Różnica polega na tym, że lista zapisanych produktów często zawiera konkurujące propozycje, których klient nigdy nie zamierzał zamawiać razem.

Co zobaczy osoba, której wyślesz listę

Przy udostępnianiu określ, czy odbiorca widzi kopię z chwili wysłania, czy aktualizowaną listę. Jeśli druga osoba usuwa propozycję ze wspólnego zestawu, właścicielka księgarni powinna móc zrozumieć zmianę. W prostszym rozwiązaniu link może służyć tylko do odczytu. Nazwij zakres zamiast pozwalać, by dwie osoby odkryły go podczas równoczesnego wybierania lamp.

Przed udostępnieniem pokaż zakres widoczny dla odbiorcy. Lista modeli i kolorów może nadawać się do wysłania dostawcy, a prywatne notatki o wyposażeniu księgarni niekoniecznie. Jeżeli funkcja pozwala wybrać zawartość, pokaż wynik w podglądzie. Jeśli przekazuje cały zestaw, wyjaśnij to przy działaniu, aby klient mógł świadomie zdecydować o wysłaniu.

Odbierz powrót, nie samą animację serduszka

W próbie zapisz dwa warianty jednego modelu i produkt bez wybranej wersji. Zamknij stronę, wróć oraz otwórz każdą pozycję. Zobacz, czy odczytane cechy zgadzają się z wcześniejszym wyborem. Potem sprawdź usunięcie, cofnięcie i zmianę jednego wariantu. Samo pojawienie się liczby przy sercu potwierdza niewielki fragment funkcji.

Przygotuj także przypadek zmiany katalogu i niedostępnego zapisu. Jeśli przewidziano listę na koncie albo link do udostępnienia, przejdź odpowiadające im ścieżki. W drugim oknie sprawdź też widok odbiorcy linku: właściwe warianty, widoczne notatki i dostępne działania powinny zgadzać się z zapowiedzią przed wysłaniem.

W Aeneia Design można przełożyć taki powrót na projekt interakcji sklepu: jednostkę zapisu, stany, komunikaty i przejścia do produktu lub koszyka. Zacznij od informacji, którą klient chce zachować. Z niej wyniknie zachowanie serca i listy, a nie odwrotnie.

W czwartek właścicielka księgarni powinna rozpoznać białą lampę z krótkim ramieniem albo dowiedzieć się, dlaczego nie może już do niej wrócić. Jeśli ma ponownie przekopać katalog i odtworzyć wszystkie wybory, serce zapamiętało jej kliknięcie, lecz oszczędziło niewiele pracy.