Wojny z materią

Generalną zasadą budowy dostępnego interfejsu jest takie jego przygotowanie, żeby mogły się nim posługiwać także osoby, które posługują się wyłącznie klawiaturą, lub innymi, niestandardowymi urządzeniami do obsługi komputera. Interfejs powinien być także tak przygotowany, żeby korzystanie z niego było oczywiste, a operacje odwracalne. Nie ma nic gorszego dla aplikacji www, niż użytkownik, który nie jest pewien, co zrobić, aby osiągnąć oczekiwany rezultat. “Don’t make me think”, najważniejsza reguła budowy interfejsu.

Zanim przejdę do meritum krótkie wprowadzenie: rozwijamy i sprzedajemy system ecommerce. W tym systemie dostępne są różne produkty. Jak wiadomo, produkt, np. koszulka, ma pewne cechy, które są stałe (np. materiał), oraz takie, które mogą się zmieniać bez wpływu na ogólną charakterystykę produktu, np. rozmiar. Te pierwsze cechy nazywamy (tj: w firmie nazywamy) atrybutami, te drugie - opcjami. Koniec teorii.

Produkt może mieć więcej niż jedną opcję, a jedna opcja prawie zawsze ma więcej niż jedną dostępną wartość. Koszulki, oprócz rozmiaru, mogą mieć także opcję koloru. Produkt, który ma określoną wartość opcji, nazywamy wariacją. Jeżeli koszulka ma dwa dostępne rozmiary: mały i duży, oraz dwa kolory: zielony i czerwony, to łącznie ma 4 wariacje: mała zielona, mała czerwona, duża zielona, duża czerwona. Oczywistym jest (khe, khe ;)), że nie wszystkie wariacje zawsze występują w sklepie, czy nawet istnieją. Przełączanie wariacji realizowane jest przez zestaw dropdownów (patrz obrazek po prawej). Jeżeli wariacja dla danej kombinacji koloru i rozmiaru nie istnieje, w stosownym miejscu na stronie wyświetlany jest napis “wariacja niedostępna”.

Rozwiązanie wydaje się proste i eleganckie, ale tylko wtedy, gdy (A) dostępnych wariacji jest więcej niż niedostępnych, oraz (B) wariacje są niedostępne tylko czasowo. Oba te warunki zawodzą przy sklepach, które mają sezonowe kolekcje i pewność, że towar po wyprzedaniu już nie wróci. Dobrym pomysłem jest więc nie wyświetlać niedostępnych wariacji - czyli uniemożliwiać klientowi takie ustawienie dropdownów, które w wyniku daje “wariacja niedostępna”

Od strony technicznej sprawa jest prosta: po zmianie ustawienia pierwszego dropdowna (np.: kolor) badamy, jakie rozmiary są dostępne dla tego koloru, i usuwamy z drugiej listy wszystkie, które są niedostępne. Po wybraniu rozmiaru robimy to samo dla kolorów itp.

I wszystko byłoby super, gdyby nie to, że użytkownik nie ma pojęcia, że za jego plecami odbywają się jakieś podmiany list. Jeżeli np. produkt ma dostępne wariacje: (A, 1), (A, 2), (B, 1), (B, 3) ; wariacje (A, 3) i (B, 2) są niedostępne, a wariacją domyślną (czyli domyślnym ustawieniem dropdownów) jest (A,2), to klient:

• nie jest świadomy istnienia opcji wariacji B, dopóki nie zmieni drugiej opcji na 1
• dojście do wariacji(B, 3) wymaga: przełączenia 2 na 1, przełączenia A na B, przełączenia 1 na 3
• i nawet wtedy nie mamy pewności, czy wszystkie kombinacje zostały wyczerpane… a możemy jeszcze mieć wariację (C, 4), która w ogóle będzie niedostępna - nie z powodów braków magazynowych, ale niemożności ustawienia dropdownów w odpowiedniej pozycji!

No to jak to rozwiązać? Przecież klient musi jakoś móc wybrać opcje. Ano, trzeba niestety pożegnać się z klasycznym formularzem i przejść na rozwiązanie w pełni javascriptowe. Na przykład takie:

http://www.gap.com/browse/product.do?cid=15673&pid=431909

Prawda, że ładnie i przejrzyście? Szkoda tylko, że nie działa bez JavaScriptu…