Load more na przykładzie Ikea

👋 Hej

Load more czy też pokaż więcej, to kontrolka, która pozwala użytkownikom na ładowanie większej liczby wyników na stronie. Jest świetnym zamiennikiem tradycyjnego oznaczenia paginacji. O tym kiedy stosować paginację, a kiedy load more, pisałem w ebooku przeprojektowani.

Dzisiaj chciałbym się skupić na tym, jak możesz za pomocą małych detali ulepszyć nieco tradycyjne load more. Będzie to mały szczegół, ale zawsze powtarzam, to detale tworzą dobry projekt.

👉 Jak robi to Ikea?

Za przykład posłuży nam sklep Ikea. Gdy przejdziesz do kategorii produktów, Ikea zamiast podziału na podstrony 1,2,3,4… zastosowała przycisk load more, co pozwoli Ci zobaczyć setki produktów będąc cały czas na jednej stronie.

➡️ Jednak to co wyróżnia load more w Ikei, to zastosowanie dwóch detali. Dzięki nim, od razu widzisz rozmiar danych wyjściowych oraz proces postępu, na którym obecnie jesteś. Mówię tutaj o widocznych liczbach “Pokaż 10 ze 100 wyników” oraz widocznym pasku postępu.

➡️ Pasek ten jest informacją, która pozwala użytkownikom zrozumieć rozmiar wyników. Można to trochę przyrównać do oznaczenia w paginacji: “jesteś aktualnie na 3 stronie”.

I to już?

Tak, to już. Te małe dwa detale sprawiają, że element load more zyskał PRZEWIDYWALNOŚĆ. A to bardzo pożądana cecha w projektach.

W tym konkretnym przypadku Ikea, zdecydowała się na rozwiązanie hybrydowe i połączyła cechy load more, które daje swobodę wyświetlania wielu wyników, z tradycyjną paginacją, która zorientowana jest na oznaczenie konkretnego miejsca. Tym samym dała użytkownikom precyzyjny komunikat, kiedy dotrą do końca wyników w danej kategorii.

👉 Czy to zadziała wszędzie?

Ten rodzaj oznaczenia sprawdzi się na stronach, które posiadają dużą oraz przewidywalną ilość wyników np. sklepy. W przypadku gdy wyników jest bardzo dużo i zmieniają się dynamicznie, to tego typu oznaczenie będzie o wiele trudniejsze we wdrożeniu np. w przypadku witryn takich jak wyszukiwarka Google.

A może zainteresują Cię…

Ebook przeprojektowani

Naucz się projektować interfejsy biorąc pod uwagę ich wygląd oraz użyteczność.

Ebook idealny landing page

Jak zwiększyć konwersję strony docelowej poprawiając ux/ui oraz webwriting.

Książka + ebook o formularzach

Łatwe, przyjemne, dostępne, konwertujące. Takie mogą być Twoje formularze.

Zestaw UX writing

Twórz mikrokopię, którą pokochają użytkownicy. Ebook, framework, kurs.

Ebook WCAG + UX

Praktyczna wiedza o dostępności i doskonaleniu wrażeń użytkownika.

Ebook o pisaniu

Opowiadaj. Pokaż problemy. Podaj rozwiązania. Zachęć do działania.

Rzuć też okiem na:

Menu