Case Study Gabinet medycyny estetycznej • Poprawa UX

Cennik, który nie wymaga kilkudziesięciu scrolli

Strona drgil.pl oferuje dziesiątki zabiegów medycyny estetycznej podzielonych na kilkanaście kategorii. Stary cennik wyświetlał wszystko naraz, tworząc jedną długą listę. Zmiana jednego elementu interfejsu wystarczyła, żeby nawigacja stała się intuicyjna.

Odwiedź stronę na żywo
Projekt aktywny • drgil.pl
Stary cennik drgil.pl - wszystkie ceny widoczne naraz na jednej długiej stronie
Wersja przed redesignem

Klient

drgil.pl

Sektor

Medycyna estetyczna

Zakres

UX / Redesign

Strona

Cennik

Problem

24 000 pikseli w dół, żeby znaleźć jedną cenę

Cennik gabinetu medycyny estetycznej to nie prosta lista. W przypadku drgil.pl to kilkanaście kategorii zabiegów, każda z wieloma pozycjami i wariantami cenowymi. W starej wersji strony wszystkie te dane były widoczne od razu po wejściu: jedna ciągła tabela bez żadnego podziału na sekcje.

Efekt był łatwy do zmierzenia. Strona cennika miała ponad 24 000 pikseli wysokości. Ktoś szukający konkretnego zabiegu musiał przewinąć całą stronę, żeby zorientować się co jest w środku, a potem wracać do góry w poszukiwaniu właściwej sekcji. Na telefonie, gdzie większość użytkowników przeglądała stronę, oznaczało to kilkadziesiąt ruchów palcem tylko po to, żeby znaleźć jedną pozycję w cenniku.

Długa strona to też problem z pierwszym wrażeniem. Użytkownik, który nie widzi końca listy, ma mniej powodów, żeby zostać i szukać dalej.

Rozwiązanie

Accordion zamiast jednej długiej listy

Pełna lista kategorii na starcie

Po wejściu na stronę użytkownik widzi wyłącznie nazwy kategorii zabiegów. Żadnego przewijania, żadnego zgadywania co jest na dole. Pełny przegląd oferty w jednym miejscu.

Kliknięcie rozwija tylko wybraną sekcję

Zainteresowany konkretnym zabiegiem klika w jego kategorię. Tabela z cenami rozwija się tylko dla tej jednej sekcji. Reszta pozostaje zwinięta i nie przeszkadza.

Naturalne na telefonie

Na urządzeniach mobilnych zmiana robi największą różnicę. Zamiast kilkudziesięciu scrolli jedno dotknięcie kategorii pokazuje dokładnie to, czego szuka użytkownik.

Efekt

Ta sama treść, zupełnie inne doświadczenie

Przy okazji przeprojektowania zaktualizowany został też sam cennik: odświeżone ceny i oferta zabiegów. Zmiana interfejsu i aktualizacja treści weszły w życie jednocześnie, dzięki czemu klienci trafiają na cennik aktualny i łatwy w obsłudze.

Efekt jest szczególnie zauważalny na telefonie. Strona, która miała ponad 24 000 pikseli wysokości, po zwinięciu kategorii wyświetla pełną listę zabiegów na jednym ekranie. Użytkownik od razu widzi całą strukturę oferty i sam decyduje, co go interesuje.

Przed

Cennik drgil.pl przed redesignem

Po

Cennik drgil.pl po redesignie ze zwijanymi kategoriami

24k px

wysokość strony przed zmianą

1 klik

żeby otworzyć dowolną kategorię

Mobile

największy zysk na urządzeniach mobilnych

Kolejny krok

Masz podobny problem na swojej stronie?

Czasem jedna zmiana w interfejsie robi większą różnicę niż pełen redesign. Chętnie przyjrzę się Twojej stronie i zaproponuję konkretne usprawnienia.