Projektowanie UI: Stany zakładek

0:00Możemy wydzielić zakładki na dwa popularne typy pionowe i poziome.

0:05Zacznijmy od poziomych

0:06w wersji desktopowej poziome zakładki to te, które ułożone są

0:10po prostu obok siebie, a treść pojawia się poniżej nich.

0:15Tutaj dla przykładu macie sklep, w którym to zakładek użyto rozdziału między

0:21komentarzami i opiniami klientów a pytaniami i odpowiedziami.

0:25Jak będziemy klikać między poszczególnymi

0:27zakładkami, to treść poniżej będzie nam się przeładowywać.

0:32Baymard Institute w badaniach pokazał, że poziome zakładki na desktopach powodują problemy z

0:36użytecznością i generalnie zalecają, żeby ich unikać.

0:40Właściwie we wszystkich branżach, ze

0:42względu na użytkowników, którzy całkowicie pomijają tę sekcję.

0:46Stwierdzono ponadto, że problemów nie da

0:48się rozwiązać niezależnie od stylu kart w witrynach.

0:52Jednocześnie podkreślają, że nie wszyscy

0:54użytkownicy przeskoczą poziome karty, zwłaszcza internetowi i hard userzy, czyli

1:00projektanci, programiści i tym podobne, którzy często szybko rozpoznają dany wzór.

1:05Dlatego zanim podejmiemy decyzję, warto zastanowić się, kto jest naszym odbiorcą.

1:10Czy będą to osoby, które swobodnie

1:11poruszają się po stronach internetowych i doskonale znają ten wzorzec?

1:15Jeśli tak dobrze zaprojektowane zakładki nie powinny sprawiać większych problemów.

1:20Zakładki mogą przyjmować wizualnie różne formy.

1:23Pamiętajmy jednak, by były dla

1:25użytkowników rozpoznawalne jako elementy interaktywne.

1:28Standardowe wzorce zakładają po prostu użycie tekstu i elementu graficznego,

1:32który będzie odróżniał aktywne zakładki od tych nieaktywnych.

1:36Ale przeczesując strony znajdziecie

1:38również te, które mają ikonę obok lub nad tekstem.

1:42Sytuacja wygląda trochę inaczej w przypadku rozwiązań mobilnych.

1:45Tu użytkownicy według wcześniej cytowanych

1:47badań radzili sobie dużo lepiej i to właśnie w rozwiązaniach mobilnych

1:51będziemy częściej spotykać się z tym wzorcem.

1:54I nie trzeba daleko szukać.

1:55Jeżeli tylko odpalić aplikacje mobilne

1:57Instagrama czy Twittera, zobaczycie ich zastosowanie na małych ekranach mobilnych.

2:01Kluczem jest zmieszczenie tych samych

2:03treści, które dostępne są na desktopach i taby pomagają uzyskać ten efekt.

2:10Użytkownicy mobilini nie chcą bowiem

2:12widzieć tylko wycinka informacji i szukać więcej używając innego urządzenia.

2:17Przed projektantami stoi więc spore wyzwanie jak zamieścić wszystkie treści,

2:21sprawić, żeby były czytelne, czyli odpowiednio duże

2:24i przy okazji nie zarzucić użytkowników dużą ilością informacji na raz.

2:29Taby właśnie w tym przypadku świetnie się sprawdzają.

2:32Jest jednak pewien mały problem, z którym

2:34spotkacie się, kiedy przyjdzie Wam je projektować.

2:37Szerokość ekranu mobilnego nie jest zbyt

2:39duża, a poziome zakładki muszą układać się obok siebie.

2:43W przypadku, gdy zakładek jest więcej niż

2:46moglibyśmy zmieścić, zachowując jednocześnie czytelność interfejsu,

2:49stosuje się często przewijane zakładki poziome.

2:53W rozwiązaniach mobilnych używamy do tego

2:55gestu swipe, czyli przeciągnięcia palcem po ekranie, ale również w wersjach

2:59desktopowych z takimi rozwiązaniami możecie się spotkać

3:02i takie przenikanie się między zakładkami niewidocznymi a widocznymi dla użytkownika

3:08występuje przez np. kliknięcia skrajnych zakładek, użycie scrolla albo strzałek.

3:14Choć wygodne dla projektanta, ma też pewne minusy dla użytkowników.

3:18Należy pamiętać, że jeśli wizualnie nie podpowiemy użytkownikowi, że gdzieś tam po

3:22swipe ma więcej zakładek, to sam może się tego nie domyślić.

3:26Dlatego warto zadbać o zabiegi, a dodatkowe zabiegi wizualne, które dadzą do

3:31zrozumienia, że to tylko część widocznych zakładek.

3:35Można zrobić to przez obcinanie tekstu, cienie lub nawet delikatną animację, która

3:40odsłoni część zakładek, jeśli użytkownik otworzy pierwszy raz aplikację.

3:45Drugi z typów to zakładki pionowe i z tymi

3:48spotkacie się dużo rzadziej na rozwiązaniach desktopowych.

3:51Nagłówki w tym wzorcu ułożone są jeden pod drugim, a treści pojawiają się zaraz obok.

4:00W wersji mobilnej takie pionowe zakładki znajdziemy trochę częściej i dobrym

4:04przykładem ich użycia jest aplikacja na system iOS Discorda.

4:08W tym przykładzie poruszamy się po

4:10zakładkach, by przechodzić między dostępnymi kanałami

4:12w aplikacji zamiast nazw zastosowane

4:15zostały ikony, a w przypadku gdy będzie ich więcej niż wysokość ekranu, mamy

4:19scrollowaną listę, więc wszystko się zmieści.

4:22Dużo powszechniejsze jest jednak

4:24stosowanie tabów mobilnych w wersji poziomej.

4:27Jeśli decydujemy się na ich zastosowanie,

4:29warto pamiętać, że to wzorzec, który użytkownicy widzą częściej.