Аккордеоны в веб-дизайне

Аккордеоны являются довольно популярным элементом, который используется в современном веб-дизайне. Здесь воплощен принцип одноименного музыкального инструмента, который сжимается и разжимается во время игры. На сайтах или в приложениях аккордеон — это функциональный элемент, при нажатии на который ниже появляется кусок скрытого ранее контента.

Использование аккордеонов как функциональных элементов на сайтах и приложениях

Влияние аккордеонов на юзабилити пока еще не изучено до конца. В частности, существует мнение, что на десктопах пользователи не открывают аккордеоны, поэтому лучше не использовать такой способ представления контента на сайте. С другой стороны, это отличная возможность следовать постулатам минимализма и не перегружать посетителей сайта второстепенной информацией, к которой тем не менее остается мгновенный доступ в один клик. На главной странице нашего сайта тоже используется система из 4 аккордеонов, проблем с юзабилити которой мы пока не замечали. В ближайшем будущем мы планируем посвятить этому отдельную статью, а пока сфокусируемся на особенностях использования аккордеонов на мобильных устройствах.

Для мобильных устройств аккордеоны являются очень удобным инструментом навигации. Основное преимущество заключается в том, что они позволяют сориентироваться на новой странице, увидев общую картину, а затем углубляться в нужные разделы. На мобильном девайсе пользователь видит только часть страницы, прокручивает немного и, не найдя ответа на свой вопрос, растроенный покидает его, не докрутив до нужных элементов. На странице с аккордеонами изначально можно увидеть то, о чем она, а после переходить к дальнейшему взаимодействию с сайтом. Важно отметить, что использование аккордеонов актуально не только на обычных страницах, но и формах оформления заказа или регистрации (оформив каждый элемент формы отдельным аккордеоном).

Аккордеон в веб дизайне. Пример.

Изображение: nngroup.com. Слева — мобильная версия сайта без аккордеона. Пользователь может попросту уйти с сайта, не увидев ничего полезного на первом экране или не докрутив страницу. В версии страницы справа аккордеоны помогают сориентироватться в общей структуре контента и перейти к интересующему разделу. 

Аккордеоны могут создавать некоторые трудности на мобильных устройствах. Во-первых, пользователь может немного потерять ориентацию на странице при открытии-закрытии аккордеонов. Во-вторых, если контент под одним из аккордеонов слишком длинный, посетителю придется очень долго скроллить и искать как закрыть его или другой элемент. Тем не менее, эти изъяны легко устранить, если попросту расширить функционал кнопки «Назад» в браузере так, чтобы при нажатии сперва закрывался аккордеон, а уже потом происходил переход на предыдущую страницу.

Подведем итоги: Аккордеоны в веб-дизайне являются крутым элементом для навигации пользователей по странице (особенно на мобильных устройствах). Однако, если контент под аккордеоном слишком длинный, рекомендуем расширить на уровне кода сайта функционал кнопки «Назад» в браузере так, чтобы она закрывала аккордеон. И конечно, не забывайте, что лучший способ узнать свой сайт  — протестировать его на реальных пользователях!