Akordeon

Ostatnia aktualizacja: 04.09.2011

Akordeon (ang. accordion) to sposób prezentowania informacji przy użyciu chowających się paneli ułożonych pionowo lub poziomo. Najczęściej wyświetlona może być w danym momencie zawartość jedynie jednego panelu. Kliknięcie w nagłówek panelu powoduje jego pokazanie się lub schowanie. Gdy przy użyciu tego wzorca tworzone jest menu to bywa nazywane accordion menu (czyli menu akordeon).

Kiedy używać?

Akordeon jest używany do porządkowania treści lub tworzenia nawigacji. Stworzenie menu w formie akordeonu jest szczególnie zasadne w następujących sytuacjach:

Gdy na nawigację przeznaczono niewiele przestrzeni.
Gdy jednoczesne wyświetlenie zawartości wszystkich paneli zaburzyłoby przejrzystość serwisu.
Gdy serwis ma być podzielony na kilka obszarów, które powinny mocno wyróżniać się od siebie.
Gdy w architekturze informacji serwisu nie przewidziano stron głównych dla kluczowych działów.

Odpowiednik akordeonu, ale bez możliwości dowolnej zmiany paneli, bywa wykorzystywany także w innych sytuacjach. Np. w trakcie procesu zakupowego w oprogramowaniu sklepowym RedCart lub podczas rejestracji konta w Alior Banku.

Dlaczego używać?

Akordeon zapewnia prosty do zrozumienia i przejrzysty sposób prezentowania większej liczby informacji. Pomaga optymalizować wykorzystanie przestrzeni tak, aby użytkownik posiadał szybki dostęp do ukrytych informacji.

Jak używać?

Wykorzystując akordeon warto zwrócić uwagę na poniższe rady:

W akordeonie umieść opcje tworzące logiczną grupę.
W przypadku użycia akordeonu do budowy głównej nawigacji panelami powinny być opcje najwyższego poziomu w hierarchii serwisu, a ich zawartość powinny tworzyć opcje niższego poziomu.
Unikaj tworzenia akordeonów wewnątrz innych akordeonów. Byłoby to rozwiązanie trudne w użyciu.
Najważniejszy panel akordeonu może być domyślnie otwarty.
Kliknięcie w nagłówek panelu (w zależności od projektu cały graficzny obszar nagłówka albo tylko tekst) powinno spowodować wyświetlenie jego zawartości.
Najczęściej otwarty jednocześnie jest tylko jeden panel. Niektórzy decydują się jednak na umożliwienie wyświetlenia jednocześnie zawartości wielu paneli.
Zmiana otwartego panelu nie powinna powodować odświeżenia strony, a raczej być oparta o JavaScript.
Najlepiej, aby otwarcie i zamknięcie panelu było połączone z animacją.
Niekiedy poszczególne panele mogą się otwierać po wskazaniu kursorem przez użytkownika. Szczególnie w dynamicznych serwisach o charakterze rozrywkowym.