Everyday things in use

Biblioteka elementów interfejsu użytkownika część druga

Posted in usability, user interface design by Marcin Szuba on 7 Listopad 2007

Breadcrumbs (tłum. Ścieżki okruszków ) element nawigacyjny interfejsu WWW pokazujący aktualna pozycję użytkownika w serwisie w stosunku do hierarchii strony. Jest to drugorzędny sposób nawigacji, stanowi uzupełnienie podstawowej nawigacji.

Tłumaczone na język polski jako Ścieżki okruszków. Nazwa nawiązuje do bajki „Jaś i Małgosia” w której dzieci aby nie zabłądzić w lesie rzucały kawałki chleba na ziemię po których mogły później znaleźć drogę powrotną do domu. W książce dzieci oznaczały swoją historię podróży a nie hierarchię. Podążanie metaforą, żeby ścieżka okruszków pokazywała historię a nie hierarchię jest duplikowaniem funkcjonalności przycisku „Wstecz ” w przeglądarce. Poza tym jest taka koncepcja nie sprawdza się gdy użytkownik „przyszedł” z innej strony niż główna, czyli na landing pages.

Problem:

* Zapewnienie dodatkowej nawigacji na stronie,
* Przedstawienie aktualnej pozycji w stosunku do hierarchii strony
* Nawigacja na landing pages

Rozwiązanie:

* Breadcrumbs pokazując aktualną pozycje w serwisie pozwalają
* użytkownikowi zrozumieć hierarchie strony,
* pozwalają na dostęp do wyższego poziomu serwisu poprzez pojedyncze kliknięcie,
* zajmują mało miejsca na stronie, jest to jedna linia, oznaczona poprzez „Jesteś tutaj” i odnośniki oraz przez znak oddzielający kolejne odnośniki.

Jak stosować:

jesteś tutaj : strona główna > poziom 1 > poziom 2 > poziom 3 > aktualna strona

* Należy oznaczyć ścieżkę okruszków poprzez etykietę „jesteś tutaj”
* Oznaczenie odnośników spójnie z wyglądem odnośników w serwisie, przy czym ostatnia aktualna pozycja nie jest odnośnikiem.
* Kierunek ścieżki okruszków od lewej do prawej chyba ze strony arabskie to odwrotnie.
* Oddzielanie kolejnych odnośników znakiem większości „ > „
* Etykiety odnośników powinny odnosić się bezpośrednio do tytułu strony
* Trzymanie się konwencji mówiącej, iż należy odznaczać odwiedzone odnośniki

AKTUALIZACJA: Dyskusja o breadcrumbs na UIE

Skomentuj

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

Logo WordPress.com

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

Zdjęcie z Twittera

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: