Jak nie pogubić się na stronie

Czy znacie już projekt i jednocześnie kanał youtube kodu.je? Grupa programistów z firmy Functionite, w tym Damian Wielgosik, o który wspominałam przy nauce kodowania, przygotowuje materiały dla początkujących programistów. Polecam zarówno ich krótkie tutoriale, jak i dłuższe webinary. W tym tygodniu, w serii „Znaczniki HTML” zajęli się navbarem. I zainspirowali mnie do poruszenia tego tematu.

Navbar i ogólnie pojęta nawigacja na stronie, to jedna z najistotniejszych rzeczy. Dobrze zrobiona jest intuicyjna i może nawet wydawać się niewidoczna. Jednak małe niedociągnięcia sprawiają, że nasz użytkownik będzie się męczył, nie znajdzie tego co potrzebuje i prawdopodobnie szybko opuści naszą stronę.

Jak więc zorganizować nawigację strony? Jakich błędów nie popełniać? I co zrobić, żeby przy tym wszystkim jeszcze się wyróżnić?

1. Never-ending navbar

Z pewnością jedną z rzeczy, które powinniśmy unikać jak ognia, jest zbyt długie menu. Niekończąca się lista podstron nie zachęci użytkownika do sprawdzenia ich treści. Sama ilość będzie przytłaczać, bez względu na jakoś tego, co mamy do zaoferowania. Jeżeli nasz navbar ma więcej niż 7 pozycji (dokładnie tyle informacji jest w stanie przechować nasza pamięć krótkotrwała), warto ponownie przemyśleć jego strukturę i spróbować np. posegregować podstrony w kategorie. Wtedy każda z kategorii będzie mogła otrzymać swoją własną nawigację, znajdującą się np. pod głównym paskiem.

2. Who am I?

Założę się, że nie raz szukaliście czegoś na jakiejś stronie www i przeskakiwaliście między podstronami bez rezultatów. Okazuje się, że nie sama struktura i wygląd mogę sprawić problemy naszym użytkownikom. To jak nazwiemy nasze zakładki będzie decydowało o tym, jak szybko i łatwo będzie można znaleźć dane informacje. Pomoże też przeglądarkom widzieć naszą stronę, jako ważną przy wyszukiwaniu konkretnych haseł. Zwróćcie więc uwagę, czy nazwa podstrony nie jest zbyt ogólna (np. „Produkty”) i czy faktycznie mówi o tym, co się na niej znajduje.

3. Overdoing it

Znudzony paskiem nawigacji w górnej części strony? Lub listą po lewej stronie? Ktoś mógłby posądzić programistów o rutynę i brak kreatywności. Okazuje się jednak, że nasze przyzwyczajenia mogą być mocną stroną. Menu u góry lub po lewej stronie jest bardziej intuicyjne dla użytkownika. Wie gdzie je znaleźć, wie do czego służy. Navbar ukryty z prawej strony, wysuwający się z kosmiczną animacją po przyciśnięciu niejasnej ikony raczej przegoni naszego użytkownika, niż wyciągnie z jego ust entuzjastyczne „wow”. Gdzie więc przebiega magiczna granica? O tym musisz zdecydować osoba projektująca stronę. Z pewnością należy pamiętać jakie są oczekiwania i cele klienta. Poza tym, kim jest potencjalny użytkownik i czego szuka na tej witrynie czego szuka. Skomplikowane i efektowne wersje nawigacji warto zarezerwować dla branży kreatywnej, a w celach informacyjnych postawić na prostotę i przejrzystość.

4. Just perfect

Jak więc pogodzić ze sobą funkcjonalność i kreatywność? Jak się wyróżnić? Polecam zaparzenie świeżej kawy i przejrzenie tej strony: freefrontend.com*. Znajdziecie mnóstwo pomysłów na różnego rodzaju rozwiązania – od tradycyjnych, po mniej standardowe. Trochę czarów w CSSie, odrobina szlifu od JS i gotowe. Pamiętajcie tylko, żeby animacje i efekty nie trwały zbyt długo w czasie. My ludzie mamy tendencję do frustrowania się, gdy nie możemy kliknąć i otworzyć tego co chcemy w więcej niż ~250ms.


  • Freefrontend.com to generalnie strona warta polecenia. Mnóstwo ciekawych przykładów różnych elementów stron www. Wszystkie zilustrowane i z kodem do ściągnięcia. Skarb dla samouków. Nic tylko przeglądać, grzebać w kodzie i testować rozwiązania. 🙂
Reklamy

2 uwagi do wpisu “Jak nie pogubić się na stronie

  1. Dzięki!
    Myślę, że menu na całą stronę są bardzo fajnym rozwiązaniem, jeśli chodzi o czytelność. Dużo łatwiej jest się zorientować na stronie, gdy mamy przed sobą jedynie listę na czytelnym tle. Standardowe nawigacje często są za małe dla użytkowników, a zawartość strony działa na nich rozpraszająco. Oczywiście jest grupa ludzi twierdząca, że to kiepskie rozwiązanie ze względu na UX, bo wymaga dodatkowej interakcji (kliknięcie triggera). Ale wydaje mi się, że czytelność wygrywa z jednym kliknięciem (choć specjalistką od UX nie jestem). Tym bardziej, że jesteśmy przyzwyczajeni do dotykowych urządzeń, gdzie i tak musimy wykonać ten dodatkowy ruch.
    Dodatkowo tworząc nawigację typu full screen możemy trochę poszaleć pod względem grafiki i efektów, nie wpływając negatywnie na faktyczną treść i czytelność strony (która jest i tak przysłonięta). 🙂

    W sumie, możliwe, że rozważę taką opcję dla mojego konkursowego projektu 🙂 Myślę, że dobrze się wpisze w grupę wiekową moich odbiorców. Dzięki! 🙂

    Polubienie

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s