Jak poprawić ux w galerii / portfolio?

Bez długiego wstępu, ponieważ treść będzie dłuższa niż zwykle. Na co zwrócić uwagę projektując galerię zdjęć?

👉 Małe lub za duże rozmiary

Jest to pierwszy i zarazem oczywisty błąd, ale nadal wielu właścicieli stron w swoich portfolio umieszcza zdjęcia, które:

  • nie są skompresowane
  • są za małe
  • są za duże

Przeglądając galerię zdjęć, klikam na miniaturkę w celu powiększenia zdjęcia. Zdjęcie otwiera się w oknie modalnym, ale w tym samym rozmiarze co miniaturka. Jaki jest więc sens tworzenia tego w oknie modalnym?

Oferowanie rozmiarów zdjęć w okolicach 300px na szerokość, to zbyt mała rozdzielczość. Stosuj okolice 600px minimum, by zdjęcie było wyraźne i bogate w detale.

👉 Brak przewijania w galerii

Przechodząc do galerii zdjęć, nie dopuść do sytuacji, by użytkownik musiał każdorazowo zamykać zdjęcie, by zobaczyć następne. Po otwarciu pierwszego zdjęcia w oknie modalnym, daj możliwość nawigowania na kolejne i poprzednie zdjęcie, za pomocą strzałek: Następne, Poprzednie.

Wyobraź sobie sytuację, gdy galeria posiada 50 zdjęć, a Ty za każdym razem musisz zamknąć zdjęcie i otworzyć kolejne. Masakra.

👉 Gdzie jestem? Ile jeszcze?

Otwierając zdjęcie w oknie modalnym, daj wyraźną informację o tym, ile zdjęć znajduje się w galerii. Dzięki temu użytkownik wie, jak obszerna jest galeria. Daje to również sygnał, które zdjęcie z kolei jest oglądane.

👉 Daj podgląd

Oferując przeglądanie galerii zdjęć, czy to w postaci slidera czy za pomocą okien modalnych, udostępnij podgląd miniaturek kolejnych zdjęć. Ta zasada sprawdza się też w galerii produktu w sklepie internetowym.

Użytkownik nie musi zaczynać od pierwszego zdjęcia, by dojść do interesującego fragmentu np. zbliżenie na detal produktu. Dzięki miniaturkom od razu widzi, które zdjęcie potencjalnie może go zainteresować.

👉 Galeria nie jest klikalna…serio?!

Nie wiem dlaczego tak się dzieje, ale ten błąd spotkałem nawet na stronach doświadczonych projektantów stron. Mam na myśli sytuację, gdy przechodzę do działu realizacje/portfolio, by zobaczyć wykonane projekty.

Widzę mockup laptopa, gdzie na ekran nałożony jest sceenshot wykonanej strony. Chcę zobaczyć więcej zrzutów tego projektu, ale niestety zdjęcie czy też mockup, nie jest klikalne. Jak mam ocenić projekt, skoro widzę jego mały fragment, w mocnym pomniejszeniu, w dodatku na mockupie?

👉 Zoom

Ten punkt jest szczególnie pomocny w galeriach produktu, ale i w portfolio też się przyda. Klienci często chcą obejrzeć detale produktu.

Dodaj więc opcje przybliżenia zdjęcia za pomocą opcji zoom. Dobrze, jeśli zachowasz widok oryginalnego widoku, a obok pokaże się zbliżenie, co daje użytkownikowi kontekst tego, gdzie patrzy.

👉 Daj wiele możliwości ucieczki

Użytkownik powinien otrzymać wiele możliwości zamknięcia galerii, będąc w trybie powiększenia. Udostępnij takie sposoby:

  • ikona krzyżyka w rogu
  • klawisz Escape
  • kliknięcie poza obszarem okna modalnego

Każda galeria powinna mieć kontrolkę dostępną z klawiatury, aby zamknąć okno. Zatem aktywny klawisz esc jest tutaj obowiązkiem dostępności.

👉 Mobilnie – pokaż, że jest więcej

Wyświetlając galerię na urządzeniach mobilnych, pokaż użytkownikowi, że jest więcej niż jedno zdjęcie do obejrzenia, Daj wizualną wskazówkę na przykład w postaci:

  • fragment krawędzi kolejnego zdjęcia jest widoczny
  • widoczna nawigacja następne i poprzednie
  • miniaturki galerii
  • informacja o ilości zdjęć (1 z 15)

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