Nawigacja w kartach: kiedy jej używać i jak ją zoptymalizować

Jeden z moich ulubionych cytatów dotyczących UX pochodzi od Chikezie Ejiasi, Head of Studio and Design Systems w Google.

Napisał: „Życie to rozmowa. Projektowanie stron internetowych powinno wyglądać tak samo. W sieci rozmawiasz z kimś, kogo prawdopodobnie nigdy nie spotkałeś — dlatego ważne jest, aby wyrażać się jasno i precyzyjnie. W ten sposób dobrze zorganizowana nawigacja i organizacja treści idzie w parze z dobrą rozmową”.

Czy nawigacja w kartach może być przejrzysta i precyzyjna? Oczywiście, że tak, co sprawia, że ​​jest to ważna forma nawigacji i organizacji treści.

Liczy się, podobnie jak w przypadku większości rzeczy związanych z UX, to, jak go zaimplementujesz i jak zoptymalizujesz.

Co to jest nawigacja w kartach?

Nawigacja z kartami to styl nawigacji i interfejsu użytkownika, w którym informacje są zorganizowane w kartach, które dzielą zawartość na różne sekcje.

Ogólnie rzecz biorąc, patrząc na nawigację na kartach, można zauważyć kilka wspólnych cech:

1. Zaokrąglone rogi zakładek;
2. Separacja tabulatorów, czy to spacja, czy pojedyncza linia;
3. Efekty najechania kursorem na karty;
4. Gradient, aby dodać głębię i wymiar do zakładek.

Nawigacja po kartach oparta jest na metaforze folderów, którą powinien znać każdy, kto pracuje w biurze lub ogląda telewizję. Tak jak wyjaśnia Mifsud z UsabilityGeek…

Justin Mifsud, Geek użyteczności :

„W terminologii interfejsu użytkownika metafory to idee lub obiekty używane w celu ułatwienia znajomości między użytkownikiem a aplikacją.

Użycie zakładek w interfejsie użytkownika jest doskonałą metaforą, ponieważ wyglądają one jak rzeczywiste przekładki w plikach lub zakładki w folderach w szufladzie plików.

Dzięki temu użytkownicy wiedzą bardziej intuicyjnie, że te zakładki dzielą zawartość na sekcje i tak jak w prawdziwym życiu, sięgnięcie po zakładkę (emulowaną w sieci przez kliknięcie zakładki) wyświetli odpowiednią treść”. (przez UsabilityGeek)

Ponieważ metafora jest tak powszechna, ważne jest, aby uważać na jej implementację. Nawigacje z kartami mają solidny prototyp, więc muszą wyglądać i działać dokładnie tak, jak powinny.

Jak każdy dobry system nawigacyjny, zakładki umożliwiają:

• Rozsądnie podziel zawartość na różne sekcje;
• Pokaż ludziom, jakie treści są dla nich dostępne i jak mogą do nich dotrzeć;
• Pokaż użytkownikom wizualnie, gdzie się znajdują w Twojej witrynie.

Kiedy warto korzystać z nawigacji w kartach?

Ogólnie rzecz biorąc, dobrym pomysłem jest korzystanie z nawigacji w kartach, gdy…

• Masz od dwóch do dziewięciu różnych kategorii treści.
• Nazwy kategorii są stosunkowo krótkie i przewidywalne, zarówno pod względem pozycji, jak i kopii (tj. pasują do pierwowzoru).
• Jest mało prawdopodobne, aby liczba kategorii zmieniała się regularnie.
• Kategorie mają podobny charakter; logiczne jest, że są one ze sobą połączone.
• Kategorie mieszczą się w jednym rzędzie.

Jak wyjaśnia Jakob Nielsen z Nielsen Norman Group, kiedy nawigacja z kartami staje się tak złożona, że ​​wymaga wielu wierszy, zaczynają pojawiać się problemy…

Jakob Nielsen, Nielsen Norman Group :

„Wiele wierszy tworzy przeskakujące elementy interfejsu użytkownika, które niszczą pamięć przestrzenną, a tym samym uniemożliwiają użytkownikom zapamiętanie, które karty już odwiedzili.

Ponadto wiele rzędów jest pewnym objawem nadmiernej złożoności: jeśli potrzebujesz więcej zakładek, niż mieści się w jednym rzędzie, musisz uprościć swój projekt”. (przez NN/g)

Wiele wierszy powoduje również problemy z hierarchią wizualną. Gdy jest drugi wiersz, może to zasygnalizować użytkownikowi, że zakładki w drugim rzędzie są podkategoriami lub przynajmniej mniej ważne niż zakładki w pierwszym rzędzie.

Ogólnie rzecz biorąc, korzystanie z nawigacji w kartach nie jest dobrym pomysłem, gdy:

• Chcesz, aby ludzie porównywali treści jednocześnie. To obciąża pamięć i znacznie zwiększa obciążenie poznawcze.
• Zastanawiasz się nad dodaniem linku w stylu „Więcej…”.

Oczywiście to tylko podstawowe wskazówki. Możesz dopasować wszystkie zasady „powinieneś tego używać” i stwierdzić, że to nie działa dla twoich odbiorców. Ostatecznie jest to coś, co musisz przetestować.

Pamiętaj, że możesz użyć analityki cyfrowej, aby dowiedzieć się, czy nawigacja z kartami stwarza problemy dla odwiedzających. Stamtąd możesz wprowadzić zmiany w celu rozwiązania problemów lub poeksperymentować z nowym typem nawigacji.

Kontrowersja

Podczas gdy nowoczesne praktyki projektowe mają wiele witryn wyglądających tak…

…niektórzy używają nawigacji w kartach jako głównej nawigacji.

Jak przed laty opisał Łukasz Wróblewski z Google, Amazon naprawdę był pionierem tego trendu…

Łukasz Wróblewski, Google :

„W 1998 r. witryna miała dwie kategorie najwyższego poziomu: książki i muzykę.

Wraz z dodaniem dodatkowych kategorii (takich jak wideo i prezenty), poziomy system zakładek skalował się dość dobrze i stworzył niezłą okazję do zróżnicowania kategorii produktów na podstawie koloru”. (przez LukeW)

Oto spojrzenie na to, jak Amazon korzystał z nawigacji w kartach we wcześniejszych dniach…

Wraz ze wzrostem popularności witryny wzrosła również liczba zakładek potrzebnych Amazonowi…

W 1999 roku Jakob nazwał to „złym projektem i nadużyciem metafory zakładki”:

Twierdzę, że zakładki byłyby lepiej używane do przełączania między alternatywnymi (ale powiązanymi) widokami niż do nawigacji do niepowiązanych lokalizacji.

Powinieneś używać kart do przełączania widoków w tym samym kontekście, a nie do przechodzenia do różnych obszarów. To jest najważniejszy punkt, ponieważ pozostawanie w miejscu podczas naprzemiennego widoku jest powodem, dla którego mamy przede wszystkim zakładki

Jakuba Nielsena

Mimo to wiele witryn poszło w ślady Amazona, a definicja nawigacji w kartach zaczęła się zmieniać od „przełączania się między alternatywnymi widokami” Nielsena.

Chociaż korzystanie z nawigacji w kartach jako głównego systemu nawigacji wyszło nieco z mody, może działać. Tak jak w przypadku większości rzeczy, Twoim głównym zmartwieniem nie powinno być to, co Nielsen mówi o nawigacji w kartach, ale to, co mówią Twoi odbiorcy.

Czy uważają, że korzystanie z nich jest trudne? Czy poruszają się po Twojej witrynie prawidłowo? Czy uda im się znaleźć najważniejsze elementy Twojej witryny? Przeprowadź testy użyteczności, aby mieć pewność.

Jak zaimplementować nawigację w kartach

Air Canada, podobnie jak większość głównych linii lotniczych, dobrze korzysta z nawigacji z kartami…

Podczas samodzielnego wdrażania nawigacji w kartach (na dowolnym poziomie) należy pamiętać o kilku rzeczach:

• Najpierw zaprojektuj architekturę informacji (IA) swojej witryny, aby móc podejmować mądrzejsze decyzje związane z kartami.
• Cała karta powinna być klikalna, a nie tylko nazwa kategorii (tekst).
• Nie używaj karty „Strona główna”, nawet jeśli używasz nawigacji w kartach dla całej witryny. Zamiast tego niech Twoje logo przeniesie odwiedzających na stronę główną.
• Karta powinna być połączona z kontrolowanym przez nią obszarem zawartości, aby jej zakres był przejrzysty.
• Nazwy kategorii powinny mieć długość jednego lub dwóch słów i być napisane prostym angielskim. Unikaj używania wielkich liter, ponieważ utrudnia to czytanie zakładek.
• Nie układaj wielu rzędów zakładek. Jeśli musisz, zamiast tego użyj podkategorii (tj. drugiego poziomego paska pod zakładkami). Jeśli korzystasz z podkategorii, upewnij się, że istnieje wizualne połączenie między wybraną kartą a paskiem podkategorii poniżej. Upewnij się, że liczba używanych podkategorii nie jest przytłaczająca; skondensować i uprościć.
• Wybrana karta powinna być wyraźnie zaznaczona, aby wskazać bieżącą lokalizację. Niewybrane karty nie powinny być jednak tak wyciszone, aby zostały zapomniane lub przeoczone.
• Na każdej stronie należy zachować spójną kolejność zakładek, aby użytkownik w pełni zrozumiał, w jaki sposób zakładki są ze sobą powiązane.

Jakob wyjaśnia, dlaczego ten rodzaj spójności jest ważny…

1. Rozpoznawalność. Kiedy coś zawsze wygląda tak samo, wiesz, czego szukać i wiesz, co to jest, kiedy to znajdziesz.

2. Przewidywalność. Kiedy coś zawsze działa w ten sam sposób, wiesz, co się stanie, gdy zaczniesz działać.

3. Wzmocnienie. Kiedy możesz polegać na swojej wcześniejszej znajomości wszystkich dostępnych funkcji, możesz łatwo skomponować zestaw działań, aby osiągnąć swój cel.

4. Wydajność. Nie ma potrzeby poświęcać czasu na naukę czegoś nowego lub martwienie się o wpływ niespójnych funkcji.

Jakuba Nielsena

Przykłady prawidłowo wykonanej nawigacji w kartach

Najlepszym sposobem zrozumienia nawigacji w kartach, zwłaszcza że można jej używać na tak wiele różnych sposobów, jest przyjrzenie się kilku przykładom.

1. Kolekcja okładek albumów

Album Art Collection to dość popularny przykład nawigacji w kartach…

Interesujące są tutaj dwie rzeczy…

1. Nawigacja jest pionowa, a nie pozioma.
2. Nawigacja zawiera ikony.

Zazwyczaj nawigacje z kartami są wyświetlane poziomo. Wynika to po części z prototypów projektowych. Ponieważ jest to powszechne, ludzie szukają nawigacji w poziomej przestrzeni pod logo.

Oczywiście nie oznacza to, że jesteś ograniczony do korzystania z tej przestrzeni do nawigacji. Pamiętaj tylko, aby korzystać z testów użytkowników. Nie chcesz, aby zmiana nawigacji ze względów stylistycznych wpłynęła na łatwość korzystania z witryny.

Należy pamiętać, że chociaż Album Art Collection używa ikon nawigacyjnych, nie rezygnuje z opisów tekstowych. Testowanie użyteczności ikon to osobny artykuł, ale najczęściej opisy tekstowe są bardziej użyteczne niż same ikony. Jacob Gube z Six Revisions wyjaśnia…

Jacob Gube, Sześć poprawek :

„Unikaj używania ikon w celu zastąpienia tekstu kontrolki karty, ponieważ symbole mogą oznaczać różne rzeczy dla różnych osób — najbezpieczniejszym rozwiązaniem jest użycie zwykłego tekstu do opisania informacji w okienku”. (za pośrednictwem Smashing Magazine)

2. Maszyna do fakturowania

Maszyna do fakturowania to podstawowa nawigacja z kartami jako główny przykład nawigacji…

Zawierają jednak zakładkę „Strona główna”, która jest zbędna. Zwróć uwagę, jak wybrana karta jest przesuwana do przodu, a karty są połączone z obszarem zawartości.

3. Bufor

Buffer był jednym z moich ulubionych przykładów nawigacji z kartami. W przeszłości mieli ofertę dla osób prywatnych i ofertę dla firm, więc używają zakładek do oddzielania treści w części widocznej na ekranie.

Oto początek treści dla osób indywidualnych…

I tu był początek treści dla firm…

Pozwoliło im to przemawiać do dwóch różnych odbiorców bez tworzenia całkowicie oddzielnej witryny lub doświadczenia.

Później strona produktu Buffer przeszła głębokie zmiany, z publikacją, odpowiedzią i analizą wśród innych ofert (wszystkie dość oczywiste). Oto nawigacja po kartach, której używali na swoich stronach:

Oprócz różnych planów cenowych, te zakładki oparte na produktach wyświetlały różne referencje, odpowiednie dla produktu na karcie:

Jak wyjaśnia David Leggett z UX Booth, nawigacja na kartach jest istotna poza podstawowym i dodatkowym poziomem nawigacji. Można ich używać nawet pod fałdą, jak w przypadku Buffera…

David Leggett, stoisko UX :

„Zakładki nie muszą ograniczać się do podstawowego i dodatkowego poziomu nawigacji. Jeśli zapewniają użytkownikowi możliwość przełączania się między obszarami tej samej treści, mogą okazać się całkiem przydatne.

W połączeniu z technologią, która zmienia zawartość bez ponownego ładowania strony, może wywołać namacalne wrażenie dla użytkownika końcowego poruszającego się po stronie”. (przez stoisko UX)

3 najlepsze praktyki do zapamiętania

Zanim poeksperymentujesz z nawigacją na kartach lub zdecydujesz, że to nie działa, weź pod uwagę trzy czynniki: dostępność, fragmentację i szybkość.

1. Dostępność ma znaczenie

Chcesz, aby Twoja witryna była dostępna dla osób niepełnosprawnych lub z ograniczeniami. Aby to zrobić za pomocą nawigacji z kartami, musisz…

• Zezwalaj użytkownikom na poruszanie się po kartach za pomocą klawisza „Tab” na klawiaturze.
• Pozwól ludziom wybrać kartę za pomocą klawisza „Enter” na klawiaturze.
• Wskaż, która karta jest wybrana przy użyciu metody alternatywnej. Na przykład możesz dołączyć atrybut tytułu ze słowem „aktywny”.

Ułatwienie korzystania z witryny większej liczbie osób nigdy nie zaszkodzi konwersji.

2. Podział ma znaczenie

W przypadku nawigacji z kartami sposób, w jaki zdecydujesz się zorganizować i podzielić zawartość, jest niezwykle ważny. Dlatego moja pierwsza rekomendacja dotycząca implementacji była związana z architekturą informacji w Twojej witrynie.

Justin wyjaśnia, dlaczego właściwa organizacja jest tak ważna…

Justin Mifsud, Geek użyteczności :

„Zakładki dzielą zawartość na znaczące sekcje, które zajmują mniej miejsca na ekranie. W związku z tym użytkownicy mogą łatwo uzyskać dostęp do treści, które ich interesują (zamiast umieszczać całą treść w akapitach).” (przez UsabilityGeek)

Rozważ wszystkie treści, które chcesz umieścić w swojej witrynie. Następnie pogrupuj tę zawartość w cztery do pięciu wiader. Prawdopodobnie będziesz w stanie powtórzyć to ćwiczenie i skończyć z dwoma lub trzema różnymi wiadrami. To dobrze. Przeprowadź testy użytkowników, aby zobaczyć, które osoby reagują i lepiej nawigują.

Przede wszystkim będziesz chciał zapewnić…

1. Twoje treści są podzielone w sposób logiczny, oczekiwany i jasny dla odwiedzających.
2. Kolejność zakładek jest znacząca i logiczna.
3. Twoje karty podążają za istniejącymi prototypami. Na przykład witryny SaaS są często podzielone na części w określony sposób, podczas gdy witryny e-commerce są często podzielone na części w inny sposób.

3. Szybkość ma znaczenie

Wielokrotnie pisaliśmy o znaczeniu szybkości. Nie powinno więc dziwić, że szybkość odgrywa również rolę w skuteczności nawigacji w kartach.

Jakub dobrze to wyjaśnia…

Jacob Gube, Sześć poprawek :

„Celem stosowania zakładek modułów jest umożliwienie szybkiej i interaktywnej prezentacji treści. W tym celu należy spróbować umieścić zawartość nieaktywnego panelu w dokumencie HTML, a następnie użyć CSS i JavaScript do stylizowania i wizualnego ukrycia panelu, co jest szybsze niż wymaganie przeładowania strony lub żądanie danych ze zdalnego źródła.

Unikaj ponownego ładowania strony podczas przełączania między panelami, ponieważ znacznie opóźnia to nawigację między panelami. Zdalnie ładowana zawartość za pomocą Ajax może być opcją dla dynamicznych i zdalnie zlokalizowanych informacji w okienku, ale stanowi wyzwanie dla użytkowników czytników ekranu, którzy mogą nie być świadomi asynchronicznie wstawianych węzłów DOM w drzewie dokumentu. (za pośrednictwem Smashing Magazine)

Ta rada nie dotyczy tych, którzy używają nawigacji z kartami jako głównej nawigacji, ale powinni wziąć to pod uwagę ci, którzy używają nawigacji z kartami, tak jak Air Canada i Buffer.

Wniosek

Nawigacja z kartami może absolutnie zaowocować „dobrą rozmową” z odwiedzającymi. Jeśli zostanie prawidłowo zaimplementowany, będzie wystarczająco jasny i precyzyjny, aby poinformować odwiedzających: dokładnie, gdzie się znajdują, dokładnie, co jest dla nich dostępne i dokładnie, jak mogą uzyskać dostęp do tego, co jest dla nich dostępne.

Dzięki testom użyteczności i optymalizacji konwersacja poprawia się jeszcze bardziej.

Jednak tak jak w przypadku wszystkiego, należy przeprowadzić badania (w tym przypadku badania architektury informacji) i testować, testować, testować.

W podsumowaniu…

1. Nawigacja z kartami może być używana jako główny system nawigacji, a także poza podstawowymi lub dodatkowymi poziomami nawigacji.
2. Wypróbuj nawigację na kartach, gdy masz od dwóch do dziewięciu solidnych, podobnych kategorii z krótkimi nazwami, które mieszczą się w jednym wierszu.
3. Nie próbuj nawigacji w kartach, jeśli chcesz, aby ludzie porównywali treści lub zastanawiasz się nad dodaniem łącza „Więcej…”.
4. Możesz podążać za najlepszymi praktykami wdrożeniowymi, ale…
5. Ważne są Twoje dane. Czy Twoi goście mają trudności z poruszaniem się po Twojej witrynie za pomocą nawigacji z kartami? Przeprowadź testy użyteczności, aby się dowiedzieć.
6. Napraw pojawiające się problemy. Lub, jeśli istnieje wiele kosztownych problemów, rozważ inny system nawigacji.
7. Dostępność, fragmentacja i szybkość mają znaczenie, jeśli chodzi o nawigację w kartach, więc zwracaj szczególną uwagę.

Pracujesz nad czymś z tym związanym? Opublikuj komentarz w społeczności CXL !