Projektowanie UI: Zasady tworzenia tabów

0:00Myślę, że warto wspomnieć o alternatywach dla zakładek, bo te mają swoje wady.

0:04Omówimy je sobie pokrótce.

0:06Krótkie nagłówki.

0:08W związku z tym, że tekst nagłówka musi

0:11zmieścić się w zakładce, zazwyczaj jest dość krótki.

0:15To problem, bo użytkownicy mają tylko

0:17tytułu, aby ocenić, czy strona zawiera określony rodzaj informacji.

0:22W związku z tym krótkie i ogólne tytuły mogą spowodować, że użytkownicy nie będą

0:27mogli znaleźć informacji, które są dla nich ważne.

0:32Kolejnym problemem mogą być przewidziane zakładki stosowane często na mobilkach.

0:36O ile jest to sprytny sposób na zmieszczenie treści, tak użytkownik na

0:41pierwszy rzut oka nie widzi w ogóle, jakie typy treści są dostępne.

0:46Żeby zapoznać się z samymi nagłówkami, które jak ustaliliśmy, mogą nie być zbyt

0:51informatywne, użytkownik musi użyć przewijania.

0:55Najgorzej, gdy do przewinięcia jest ich całkiem sporo, by na końcu okazało się, że

1:01nie ma tam treści, których szuka użytkownik.

1:03To co mamy, jeżeli chodzi o alternatywy.

1:06Jedną z nich jest po prostu ułożenie

1:08treści jedna pod drugą, z wyróżnionym i mocnymi nagłówkami.

1:12Ten układ sprawdzi się, jeśli treści nie

1:15ma zbyt dużo albo mamy dużo długich nagłówków.

1:18Przy długich treściach mielibyśmy sporo

1:21scrollowania, więc ten wzorzec by się nie sprawdził.

1:25Pewnym sposobem na poradzenie sobie z długą treścią, np.

1:28w przypadku, gdy mamy dużo krótkich treści

1:31i jedną dłuższą będzie częściowe zwinięcie tej dłuższej.

1:36Zobaczcie. Pokazujemy w ten sposób część treści.

1:39Użytkownik nie musi się domyślać, co znajduje się pod spodem

1:43i jeśli ma potrzebę doczytać więcej, może ją zawsze rozwinąć.

1:47Jedną z wariacji tego rozwiązania jest

1:49łączenie przyklejonych do przeglądarki zakładek, które scrollują długie treści.

1:55Możecie zobaczyć to na przykładzie tego sklepu internetowego.

1:59Gdy wchodzę na stronę, w pierwszej kolejności mam najważniejsze informacje

2:03dotyczące tej strony, ale kiedy scrolluję do opisu w górnej części przeglądarki

2:10pojawiają się dość spore taby, które pomagają mi nawigować po całej stronie.

2:15Nie muszę teraz scrollować przez całą treść,

2:17żeby dotrzeć do tych elementów, które wydają mi się istotne.

2:23Oczywiście cały czas mogę wybrać

2:25scrollowanie i klasycznie przechodzić przez stronę tak jakbym chciała.

2:29Innym przykładem, gdzie zakładki mają

2:31najpierw bardziej graficzny charakter jest strona KFC.

2:35Kiedy zaczynamy scrollować grafiki,

2:37zmieniają się na zakładki tekstowe przypięte w górnej części przeglądarki.

2:42Użytkownik może wybrać, czy woli scrollować,

2:46czy chce dotrzeć do konkretnego miejsca, które go interesuje.

2:49Dużo szybciej tu możecie zobaczyć też przewijanie zakładek,

2:53które nie mieszczą się w oknie przeglądarki.

2:56Projektanci zastosowali po prostu ikonkę strzałki, która przewija treści.

3:02Kolejną alternatywą popularną w

3:04rozwiązaniach mobilnych są pionowe, zwijane sekcje.

3:07Tu możecie spotkać się z określeniem akordeon lub właśnie zwijane sekcje.

3:12Mają sporo zalet.

3:14Między innymi strona wydaje się mniej

3:16przeładowana, bo większość treści jest na start zwinięta.

3:20Łatwiej skanować nagłówki sekcji, więc

3:23szybko przejrzymy zawartość strony i wybierzemy sekcje, które chcemy rozwinąć.

3:28Nagłówki mogą zawierać więcej informacji,

3:31ponieważ każdy zwinięty nagłówek znajduje się w osobnym wierszu.

3:37To, o co warto zadbać stosując ten wzorzec, to choć częściowe odsłonięcie

3:41treści, tak, by użytkownik wiedział, czy znajdzie tam ciekawe informacje.

3:47W sklepach internetowych np.

3:49wyciąga się do nagłówka informacje o tym, ile jest opinii w sklepie, by użytkownik

3:54nie musiał klikać, żeby dowiedzieć się, że właściwie nic tam nie ma.

3:59Zdarzają się też rozwiązania, które

4:01automatycznie rozwijają całą zakładkę, co może się sprawdzić,

4:05ale jeśli treść będzie zbyt długa, to znów stracimy cały kontekst pozostałych

4:10zakładek, a użytkownik będzie musiał scrollować, żeby do nich dotrzeć.

4:15W przypadku tego sklepu internetowego mamy rozwinięty już opis produktu.

4:20Możemy go zawsze sobie zwinąć i rozwinąć

4:22kolejne sekcje, które mogą nas interesować.

4:25Zwijane sekcje sprawdzają się zwłaszcza tam, gdzie znajdują się jedna pod drugą.

4:31Typową pułapką jest użycie wzorca tylko dla niektórych sekcji na stronie, co

4:35utrudnia użytkownikom zrozumienie wzorca nawigacyjnego.

4:40Nie powinniśmy więc wkładać między zwijane sekcje innych, zwłaszcza rozbudowanych

4:44komponentów, jak slidery produktowe albo reklamy.