Projektowanie UI: Zadanie domowe - Taby i zakładki

0:00No dobra, przyszedł czas na kilka zasad.

0:02Na koniec, w ramach przypomnienia.

0:04Wykorzystując taby horyzontalne, czyli

0:07poziome, unikajmy umieszczania ich w dwóch wierszach.

0:11Będą mniej czytelne, a także związek

0:13między tabem a treścią poniżej może się zgubić.

0:17Zamiast tego wykorzystać lepiej taby

0:20wertykalne, czyli pionowe lub taby ze swipem.

0:24Pasek zakładek do przeklikania umieszczamy

0:27raczej nad treścią, którą chcemy przewijać.

0:30Wyjątek mogą stanowić rozwiązania mobilne,

0:32które zakładają, że pasek przypięty jest do dolnej części ekranu.

0:37W przypadku stron internetowych jest to dużo rzadziej spotykane rozwiązanie.

0:41Dlatego nie warto ryzykować, że użytkownicy go nie zrozumieją.

0:46Ryzyko jest jeszcze inne.

0:48Jeżeli cały pasek zakładek, łącznie z

0:50treścią jest dość wysoki, a te zakładki będą znajdować się poniżej.

0:55Jest szansa, że na niektórych ekranach

0:57przeskakując się między zakładkami, będziemy musieli najpierw zescrollować w

1:01dół, żeby skorzystać z zakładki, by później znowu doskrollować do góry.

1:06Żeby zacząć czytać tekst, który pojawi się

1:09po prostu poza zasięgiem tego ekranu, więc można popełnić tutaj trochę błędów.

1:15Jeżeli nie za bardzo jeszcze wiemy, co

1:16robimy, ale dopiero uczymy się projektować interfejsy, to zdecydowanie lepiej po

1:22prostu korzystać z tych wzorców, które są bardziej znane użytkownikom.

1:27I my też popełnimy wtedy mniej błędów.

1:29W tym przykładzie pokażę Wam typową nawigację, czyli pokazane zakładki czy

1:36też zakładkowość w zwykłej nawigacji, czyli ten komponent, po którym będą teraz

1:40klikać, nie działa jak klasyczne zakładki, ale trochę tak wygląda.

1:44Niemniej mam nadzieję, że uda mi się przekazać to, co chciałabym Wam pokazać.

1:48Zobaczcie, kiedy przeklikujemy się między tymi stronami.

1:52Te strony pod spodem wyglądają dość

1:54podobnie, ale kiedy wejdziemy do strony numer 1 to nagle zmienia nam się trochę

1:58wygląd tego, tej podstrony i możemy być zaskoczeni tym,

2:04kiedy pierwszy raz korzystamy z tej strony, że coś się dziwnego stało.

2:08Jak to się ma do zakładek?

2:10Mając kilka zakładek upewnijmy się, że

2:13działają w podobny sposób, to znaczy przeładowują jakiś zakres treści.

2:17Nie powinniśmy mieszać zakładek, które

2:20wyglądają tak samo i przerzucają użytkownika do innej części serwisu.

2:25To zachowanie po prostu, którego się nie

2:27spodziewamy, jeśli klikaliśmy po innych zakładkach wcześniej.

2:30Nie powinniśmy również zmieniać miejsca tych zakładek.

2:33Użytkownik raczej spodziewa się, że one będą w jednym miejscu, a tylko treść,

2:38którą przeklikują pod spodem będzie się zmieniać.

2:43I tam ta długość tej treści może być inna.

2:45Formatowanie w ramach tej podstrony może być inne, ale same zakładki

2:49raczej nie powinny zmieniać swojego miejsca.

2:52Zakładki pozwalają nam zaoszczędzić trochę

2:54miejsca, ale nie przesadzajmy z ich wielkością.

2:57Jeśli będą zbyt małe, użytkownicy będą

3:00musieli włożyć więcej energii w trafienie w te, na której im zależy,

3:04powiększając je i dając odpowiednie marginesy zewnętrzne i wewnętrzne.

3:08Zadbamy o szybsze poruszanie się po naszym interfejsie.

3:12Teksty w zakładkach nie powinny być też zbyt długie.

3:15Stawiamy na krótkie, jedno, maksymalnie 2 wyrazowe frazy.

3:20Jeżeli tekst będzie za długi, jest ryzyko, że nie zmieści się w zaprojektowanej

3:24zakładce i nie tylko nie będzie czytelny, ale również sprawi, że od estetycznej

3:28strony proporcje zakładek nie będą wyglądały zbyt atrakcyjnie.

3:33Niezbyt dobrze wyglądają też zakładki, które umieszczone są w jednej linii, np.

3:37jedna z zakładek zawija się, to znaczy

3:40zamiast jednego wiersza tekstu są dwa wiersze i wtedy widać, że ona się wyróżnia

3:45wizualnie spośród tych zakładek, które mamy obok.

3:48Rolą zakładek jest oszczędność miejsca, ale nie przesadzajmy w drugą stronę.

3:53Jeśli wiemy, że w zakładce znajdzie się co

3:56najwyżej jedno czy dwa zdania, być może nie będzie to najlepsze rozwiązanie

4:00i lepiej będzie sformatować te teksty w inny sposób.

4:04Użytkownik będzie zirytowany, że musi się tyle na klikać, żeby odkryć np.

4:08dwa wyrazy w zakładce.