Jak wyświetlać rosnącą kolekcję małych wirtualnych zwierzaków

Małe zwierzaki to przede wszystkim elementy wizualne, dlatego regularna siatka to dobry punkt wyjścia. Użyj komórek jednakowego rozmiaru i zachowaj stały kierunek czytania: od lewej do prawej, a następnie od góry do dołu. Dzięki temu każde nowe zwierzę zajmuje przewidywalne miejsce, a kolekcjoner wracający do galerii może ją szybko przejrzeć. Apple zaleca znane układy wierszy lub siatek do kolekcji wizualnych, a Material Design opisuje lekkie kafelki siatki jako odpowiednie do galerii obrazów. (Apple Human Interface Guidelines: Collections; Material Design: Cards)

Zadbaj, by w każdej komórce było dość miejsca na obraz zwierzaka i jego nazwę. Jeśli przy każdym zwierzaku muszą być widoczne nazwa, typ lub krótki status, użyj prostego kafelka z czytelną hierarchią zamiast dodawać pełną kartę z obramowaniem, przyciskami i ozdobnymi detalami. Wytyczne Material rozróżniają galerie obrazów od kart, które sprawdzają się lepiej, gdy elementy zawierają różnorodne treści lub działania. W kolekcji zwierzaków, które są do siebie podobne, dodatkowe ozdobniki kart odwracają uwagę od kolekcji.

Gdy kolekcja przekroczy obszar dostępny na ekranie, siatka nie pomieści wszystkich zwierzaków naraz. Wybierz główny cel: zobaczyć jak najwięcej zwierzaków na pierwszy rzut oka, szybko znaleźć konkretnego zwierzaka po nazwie czy cieszyć się wyróżnionym pokazem. Każdy z tych celów wymaga innego układu.

Główny cel	Przydatny sposób wyświetlania	Kompromis
Przeglądanie wielu zwierzaków	Kompaktowa, równa siatka	Każdy zwierzak zajmuje mniej miejsca
Znalezienie znanego zwierzaka	Siatka z wyszukiwaniem lub sortowaniem alfabetycznym	Elementy sterujące zajmują część ekranu
Pokazanie kilku ulubionych	Wyróżniony wiersz lub większy obszar nad siatką	Większa część kolekcji znajduje się niżej
Porównanie szczegółów zwierzaków	Lista lub widok szczegółów	W początkowym widoku mieści się mniej zwierzaków

Traktuj wyróżniony obszar jak małe okno na kolekcję, a nie jej zamiennik. Możesz na przykład pokazać u góry kilku ulubieńców, a poniżej umieścić pełną siatkę. Przykładowa adaptacyjna galeria zwierzaków dla Androida wykorzystuje wyróżniony obszar zwierzaka i siatkę, która może pokazać więcej zwierzaków, gdy układ ma więcej miejsca. Potwierdza to ogólną zasadę projektowania: obszar wyróżniony może mieć pierwszeństwo wizualne, a pod nim nadal powinna znajdować się galeria, którą da się przeglądać. (Android Developers: Furry friends and adaptive APIs)

Gdy siatka staje się długa, podziel ją na kategorie odpowiadające temu, jak kolekcjoner postrzega zwierzaki. Możliwe kryteria to gatunek lub świat, zestaw kolekcjonerski, gama kolorów albo okres zdobycia — korzystaj tylko z kategorii, które faktycznie występują w kolekcji. Zacznij od niewielkiej liczby grup. Zbyt wiele małych sekcji może sprawić, że przeglądanie przypomina przechodzenie między osobnymi kolekcjami.

Zachowaj jeden wyraźny widok domyślny, na przykład „Wszystkie zwierzaki”, i pokaż, która grupa jest aktywna. Jeśli zwierzaki mogą należeć do więcej niż jednej grupy, filtr jest zwykle czytelniejszy niż powielanie tego samego zwierzaka w wielu sekcjach. Jeśli każdy zwierzak należy dokładnie do jednej stałej grupy, opisane sekcje mogą ułatwić przeglądanie całej kolekcji. Są to praktyczne sposoby porządkowania treści według jej struktury; najlepszy podział zależy od rzeczywistych cech kolekcji, a nie od uniwersalnego zestawu kategorii.

Właściciel może rozpoznawać zwierzaka po jego wyglądzie, ale nazwy ułatwiają przeglądanie coraz liczniejszej kolekcji i odróżnianie podobnych wariantów. Umieść krótką nazwę bezpośrednio pod każdą miniaturą. Jeśli dwa zwierzaki mogą mieć tę samą nazwę, dodaj jeden zwięzły identyfikator uzupełniający, na przykład nazwę zestawu lub formę. Nie umieszczaj na każdym kafelku wielu statystyk, odznak i elementów sterujących: odwracają uwagę od obrazu i zagęszczają siatkę.

Jeśli widok jest częścią strony internetowej lub aplikacji, zadbaj, by tożsamość zwierzaka była dostępna zarówno w formie tekstu, jak i obrazu. Wytyczne W3C mówią, że obrazy informacyjne wymagają tekstowych opisów alternatywnych przekazujących istotne informacje; jeśli sąsiadująca etykieta zawiera już te same informacje, powtarzanie ich w tekście alternatywnym obrazu może być zbędne. W praktyce połącz widoczną nazwę z odpowiednią etykietą dostępną dla technologii asystujących i nie opieraj rozpoznawania charakterystycznego zwierzaka wyłącznie na kolorze lub obrazie. (W3C WAI: Images Tutorial)

Dostosuj liczbę kolumn do dostępnej szerokości, zamiast wymuszać ich stałą liczbę na każdym ekranie. Na kompaktowym telefonie mogą być widoczne dwie kolumny; na szerszym ekranie można pokazać więcej, o ile obrazy i nazwy pozostają czytelne. Zachowaj równe odstępy i podstawową kolejność elementów po zmianie układu. Przykład adaptacyjnego projektu dla Androida pokazuje dwukolumnową galerię na kompaktowych ekranach i więcej treści, gdy dostępna jest większa przestrzeń. (Android Developers: Furry friends and adaptive APIs)

Sprawdź widok przy najmniejszej szerokości, z której prawdopodobnie będą korzystać użytkownicy, oraz na szerokim ekranie komputera. Zwróć uwagę na ucięte nazwy, obrazy, na których trudno rozpoznać zwierzaki, nierówne wysokości kafelków oraz elementy sterujące, które niezgrabnie się zawijają. Jeśli jeden zwierzak ma dłuższą nazwę, pozwól jej celowo zająć drugi wiersz albo konsekwentnie ją skróć i zapewnij sposób wyświetlenia pełnej nazwy; nie pozwól, by jeden nietypowy wpis przypadkowo zaburzył całą siatkę.

W przypadku krótkiej kolekcji może wystarczyć przewijanie jednej siatki. Dodaj wyszukiwanie, gdy trzeba znajdować konkretnego zwierzaka na dłuższej liście. Dodaj sortowanie, gdy kolejność ma znaczenie — na przykład alfabetyczne lub według daty dodania zwierzaka. Dodawaj filtry tylko dla cech, które pomagają odróżniać elementy. Umieść te elementy sterujące nad wynikami i pokaż wybrane sortowanie lub filtr, by widok był zrozumiały. Wytyczne Material dotyczące kolekcji zalecają umieszczanie filtrowania i sortowania poza samymi kartami, dzięki czemu elementy mogą skupiać się na swojej zawartości. (Material Design: Cards)

Nie polegaj na nieskończonym przewijaniu, które nie pokazuje postępów. Widoczna liczba elementów w kolekcji, nagłówki sekcji lub wyraźny przycisk „Pokaż więcej” mogą pomóc użytkownikom zorientować się, ile jeszcze zostało. To opcjonalne wskazówki, a nie wymagania; wybierz najprostszą, która pomaga użytkownikowi się zorientować bez wprowadzania wizualnego bałaganu.

Dodaj kilka reprezentatywnych zwierzaków, w tym podobnie wyglądające okazy i tego z najdłuższą nazwą, a następnie obejrzyj kolekcję na ekranie telefonu i komputera. Zadaj sobie pytania: czy można rozpoznać każdego zwierzaka, przeczytać jego nazwę, zrozumieć bieżącą grupę lub sposób sortowania oraz dotrzeć do całej kolekcji bez zgadywania? Czy można znaleźć znanego zwierzaka bez przeglądania każdego elementu? Czy obrazy nadal przyciągają uwagę?

Jeśli trudno rozpoznać zwierzaki, powiększ kafelki lub ogranicz widoczne szczegóły. Jeśli trudno znaleźć elementy, dodaj wyszukiwanie po nazwie lub sensowny sposób sortowania. Jeśli pierwszy ekran sprawia wrażenie przepełnionego, przeznacz niewielki obszar na wyróżnione zwierzaki i umieść pełną kolekcję niżej. Wprowadzaj po jednej zmianie naraz i ponawiaj przegląd w miarę rozrastania się kolekcji; właściwy układ to taki, który nadal pomaga użytkownikowi wykonać konkretne zadanie w używanym przez niego rozmiarze ekranu i przy danej liczbie elementów.

• Apple Developer, „Collections” — https://developer.apple.com/design/human-interface-guidelines/collections
• Material Design, „Cards” — https://m1.material.io/components/cards.html
• Android Developers, „Furry friends and adaptive APIs” — https://developer.android.com/design/ui/gallery/social/pawparazzi
• W3C Web Accessibility Initiative, „Images Tutorial” — https://www.w3.org/WAI/tutorials/images/