Jak powinien zachować się przycisk “Wstecz”?

👋 Hej

W tym artykule chciałbym przywołać nieco temat stosowania przycisku “Wstecz” w przeglądarce. Okazuje się, że ta łatwa z pozoru kontrolka, potrafi działać na przeróżne sposoby.

To prowadzi do zmiany oczekiwań użytkowników, którzy nie są
w stanie przewidzieć, jak na danej stronie zachowa się przycisk “Wstecz”.

Wyobraź sobie sytuację, gdy jesteś na finalnej stronie zamówienia, klikasz przycisk “Wstecz”, by powrócić do koszyka, tymczasem przenosi Cię na główną stronę…

Konsekwencje złamania oczekiwań użytkownika, co do tego, jak powinien zachowywać się przycisk „Wstecz”, może skutkować opuszczeniem strony.

👉 Kłopotliwe sytuacje

Istnieje wiele elementów, gdzie działanie przycisku “Wstecz” może być mylące. Potrzeba tu wyczucia i odesłania użytkownika do strony, którą faktycznie oczekiwał klikając “Wstecz”.

lightboxy, popupy
rozwinięte filtrowanie i sortowanie
rozwinięte akordeony
ze strony zamówienia do koszyka
listy produktów

👉 Jak powinien się zachować “Wstecz”?

Czy istnieja złota rada na to, gdzie powiniene odsyłać przycisk “Wstecz”? Nie, ponieważ każdy projekt jest inny i potrzeba indywidualnego podejścia.

Ale można przyjąć, że użytkownik klikając przycisk “Wstecz”, chce zostać przeniesiony do poprzedniego widoku, który oglądał. A zatem:

➡️ lightboxy, popupy – po kliknięciu przycisku „Wstecz” użytkownik powinien wrócić na stronę, na której znajduje się nakładka (nie na poprzednią stronę). Zatem przycisk “Wstecz” zamyka okienko.

Oczywiście w okienku nie powinno zabraknąć innych sposobów na zamknięcie jak ikona X oraz przycisk ESC. Przycisk “Wstecz” nie powinien być jedyną opcją na zamknięcie okienka.

➡️ filtrowanie i sortowanie – zazwyczaj dają całkowicie nową listę produktów, a zatem użytkownicy postrzegają każdą z tych czynności jako odrębny widok. Zatem można przyjąć, że kliknięcie
“Wstecz” przechodzi na poprzednio wybrany filtr (nie usuwa wszystkich wyborów). Zatem, gdy użytkownik kolejno po sobie wybrał 3 filtry, musi kliknąć 3 razy przycisk “Wstecz”.

➡️ rozwinięte akordeony, listy rozwijane. Pojedyncze, rozwinięte akordeony zazwyczaj nie zapełniają całego widoku strony, zatem
użytkownik w większości wypadków nie uznaje rozwinięcia jako nową stronę.

W tym momencie kliknięcie w przycisk “Wstecz” powinno zachowywać się, niezależnie od stanu akordeonu czyli przenosić na poprzednią stronę.

Podobnie z przyciskiem typu “Pokaż więcej”, który rozwija dodatkową treść. Przycisk “Wstecz” nie powinien zamykać treści, lecz przenosić na poprzednią stronę.

Jednak odwrotna sytuacja ma miejsce, gdy pod postacią akordeonu kryje się wieloetapowy formularz czy tez strona zamówienia. W tym momencie większość użytkowników potraktuje akordeony jako nowy widok, więc “Wstecz” powinien przenosić do poprzedniego kroku.

➡️ ze strony zamówienia do koszyka – tutaj sprawa jest prosta. Strona zamówienia to nowy widok, zatem kliknięcie w przycisk “Wstecz” powinno przenosić do poprzedniego kroku czyli
w większości do koszyka.

➡️ listy produktów. Przeglądając produkty w sklepie, przechodzimy między szczegółami produktu, a listą wszystkich produktów. Zatem będąc na rozbudowanej liście produktowej, gdy użytkownik chce na chwilę przeczytać o detalach danego produktu, powinien zostać odesłany dokładnie w to samo miejsce na liście, w którym się znajdował.

Załóżmy, że jesteś na 4 podstronie podkategorii, mniej więcej na środku listy produktów. Zainteresował Cię dany produkt i chcesz go podejrzeć. Będąc już na tym produkcie, chcesz powrócić
z powrotem do listy i kontynuować przeglądanie. Interfejs, po kliknięciu w przycisk “Wstecz”, powinien Cię przenieść dokładnie na środek tej listy, czyli do ostatniego miejsca, w którym był kursor.

Często w sklepach w tym momencie można zaobserwować, że użytkownik zostaje przenoszony na początek listy, przez co musi ręcznie przewinąć listę wyników i odnaleźć moment, w którym się znajdował.