Projektowanie UI: Typy zakładek

0:00Omówiliśmy najważniejsze elementy

0:01interfejsu, ale całkiem sporo jeszcze przed nami.

0:04W tej części kursu opowiem trochę o

0:06zakładkach i pokażą dobre praktyki ich projektowania.

0:09Określenie taby czy zakładki można

0:11przypisać wielu elementom graficznych interfejsów użytkownika.

0:15Mówimy przecież o zakładkach w

0:16przeglądarce, mając na myśli właśnie pojedyncze karty czy zakładkach na

0:21stronach internetowych w znaczeniu nawigacji głównej spotkamy się również z

0:25określeniem tab bar przy nawigacji aplikacji mobilnych.

0:28Brak spójności w nazwie elementów interfejsów nie pomaga.

0:31Jak wspomniałam wcześniej, spotkamy się z

0:33określeniem taby i zakładki w kontekście różnych elementów, stron i narzędzi.

0:37Zakładki, o których będę teraz opowiadać to nic innego jak najczęściej tekstowe

0:42linki, które pozwalają przełączać zawartość w obrębie jednej podstrony.

0:46Przeklikując się między nimi najczęściej chowamy jedną treść i pokazujemy drugą.

0:52Bardzo często spotkacie się z nimi w aplikacjach mobilnych.

0:55Nie oznacza to wcale, że zakładek nie używamy w większych rozdzielczościach.

0:58Warto jednak mieć na uwadze, że jest szansa, że użytkownicy je przeoczą.

1:03Według badań Baymard Institute z 2019 roku,

1:07porównując jak użytkownicy korzystali z zakładek na desktopie, a jak na mobilkach

1:11w internetowych sklepach wyszło, że na większych rozdzielczościach użytkownicy

1:15nie zauważali zakładek, przez co nie docierali do części treści na stronie.

1:20Mając przed sobą mały ekran telefonu, zdecydowanie łatwiej objąć nam go wzrokiem i

1:25szybko zeskanować elementy na stronie niż w przypadku dużego ekranu.

1:29Jeżeli więc zdecydujecie się mimo to na zaprojektowanie tabów na większe ekrany,

1:34zadbajcie, żeby były wystarczająco widoczne i zrozumiałe dla użytkowników.

1:39Jeśli na ekranie będzie dużo elementów

1:41zabiegająchych o naszą uwagę, jest większe ryzyko, że czegoś nie zobaczymy.

1:46Pokażę też alternatywne rozwiązania, które

1:48mogą zastąpić działanie klasycznych zakładek.

1:51Na koniec warto zapamiętać to, że wiele

1:54stron, nawet tych znanych, wykorzystuje pewien wzorzec.

1:57Nie musi wcale oznaczać, że jest skuteczny i dobrze działa.

2:01Wiele dużych firm wciąż nie testuje rozwiązań z użytkownikami lub nie mają

2:05dedykowanych zespołów projektowych czy swoich deweloperów, którzy mogliby na

2:10bieżąco rozwiązywać problemy związane z interfejsem.

2:13Zamiast ślepo podążać za widzianymi

2:15wszędzie rozwiązaniami, warto je najpierw sprawdzić.

2:18Jeśli sami nie macie możliwości

2:19przeprowadzenia badań, bo nie macie takich kompetencji, albo firma nie chce zatrudnić

2:23badaczy, to zostają jeszcze raporty branżowe firmy takie jak Nielsen Norman

2:27Group czy Baymard Instytut, na które będę się w tej części często powoływać.

2:32Przygotowują takie zestawienia i testują rozwiązania rynkowe.

2:36Części treści udostępniają również za darmo w formie artykułów.

2:40Te dostępne są jedynie w języku

2:41angielskim, ale wystarczy odrobina chęci i motywacji i przy użyciu translatora

2:45powinniście wyłuskać dla siebie najważniejsze wnioski.

2:48Pamiętajcie też, żeby przy okazji zwracać uwagę na daty testów i badań.

2:52Te sprzed 10 lat mogą być już nieaktualne

2:55ze względu na rozwój technologii informacyjnych, powszechność użycia

2:58pewnych wzorców i przyzwyczajenia użytkowników.

3:05No dobrze, czym są zakładki?

3:06Do czego ich używamy?

3:07Głównym zadaniem tabów jest ukrywanie części treści w ramach jednej strony.

3:12Weźmy na przykład stronę produktu

3:14w sklepie internetowym bywają produkty, które mają dość obszerne opisy,

3:18żeby je wszystkie zmieścić, moglibyśmy po prostu umieścić je jeden pod drugim.

3:23Nawigowanie po takiej stronie będzie

3:24jednak utrudnione, a od samej ilości tekstów użytkowników może rozboleć głowa.

3:29Dlatego często stosowanym zabiegiem jest

3:31właśnie stosowanie tabów i rozdzielanie treści na mniejsze cząstki.

3:36Możemy pod tabami schować opisy, informacje techniczne, dodatkowe akcesoria

3:40czy opinie użytkowników, a klikając między tymi treściami wciąż

3:44jesteśmy na tej samej podstronie i nie tracimy kontekstu informacji.

3:48Opis dotyczy tego konkretnego produktu, tak samo jak opinie.

3:52W związku z tym, że taby mają za zadanie ukrywać część informacji, musimy zadbać o

3:58odpowiednie ich nazywanie, tak by użytkownik na pierwszy rzut oka

4:02rozumiał, jakie treści się pod nimi chowają.

4:05Jeżeli użytkownik nie będzie rozumiał, co

4:07tam znajdzie, jest duża szansa, że po prostu nie kliknie.

4:11Nawet jeśli znalazłby tam potencjalnie interesujące informacje,

4:15taby dotyczą pewnego zakresu treści, który się w nich znajduje.

4:19Upewnijmy się więc, że granica między

4:21treścią w tabach jest wyraźnie rozdzielona od tej poza nimi.

4:25Zazwyczaj wykorzystuje się do tego spójne

4:27kolory teł dla tabów i ich zawartości, a także wszelkiej maści wizualne

4:32rozdzielenia, jak linie czy cienie. W tabach

4:36zawsze jedna z zakładek jest na start otwarta.

4:39W większości przypadków jest to pierwsza z nich, dlatego trzeba dobrze przemyśleć

4:43zawartość tej pierwszej oraz kolejność następnych, tak by zachować logiczny

4:48porządek, a użytkownikom będzie dużo łatwiej się w tym wszystkim połapać.