Як обрати іконки для акордеонів: практичний гайд за підходом Віталія Фрідмана

У матеріалі розбирається підхід Віталія Фрідмана (Smashing Magazine) до вибору іконок для акордеонів та меню-навігації, зі спиранням на дослідження Nielsen Norman Group (NN/g). Нижче — концентрований практичний розбір для дизайнерів та фронтенд-розробників.

1. Базове правило: що означає відсутність іконки

Коли біля пункту немає жодної іконки, користувачі зазвичай очікують, що натискання відкриє нову сторінку, а не розгорне прихований контент.

Пункт меню без іконки → сприймається як звичайне посилання.
Кастомні (нестандартні) іконки → часто не читаються як «акордеон», навіть якщо так задумано.
Люди часто натискають як на текст, так і на іконку приблизно однаково — і текст, і іконка сприймаються як одна інтерактивна зона.

Практичний висновок: якщо елемент веде на окрему сторінку, надійний спосіб — зробити його звичайним лінком з підкресленням. Без жодних стрілок, трикутників чи інших додаткових позначок.

Коли іконка зайва

У меню, де кожен пункт — це окрема сторінка, без вкладених рівнів.
У текстовому контенті (наприклад, у статті), де посилання вбудовані в абзаци.
У простих списках дій (наприклад, «Змінити», «Видалити», «Подивитися»), якщо і так очевидно, що це дії-посилання.

Така «нудна» класика працює стабільно: очікування користувачів збігаються з реальною поведінкою інтерфейсу.

2. Чому split-меню збивають з пантелику

Окрема частина підходу стосується так званих split-меню: коли текст пункту веде на сторінку, а іконка праворуч відкриває акордеон з підрозділами.

Автор описує кілька проблем із таким патерном:

Користувачі не завжди розуміють, що текст і іконка — це дві різні взаємодії.
Люди часто натискають туди, де їм зручно, а не туди, де «правильно» за задумом дизайнера.
Якщо людина очікує нову сторінку, а натискає на іконку і отримує лише розгортання меню — це відчувається як помилка.

Альтернатива split-меню

Замість поділу на дві зони для одного пункту, автор радить використовувати більш передбачувану поведінку:

Натискання по головній категорії завжди розгортає акордеон (показує підпункти).
Якщо все ж потрібно перейти на «глобальну» сторінку категорії, додати окреме посилання всередині акордеону, наприклад «Огляд» / «Overview».

Таке рішення показано на прикладі навігації DHL (посилання на сторінку: DHL.de): розгортання розкриває підпункти та окремий пункт-лінк «Overview» без зайвих стрілок і без поділу клікабельної зони.

3. Плюси, стрілки, кастомні іконки: де вони ламаються

Для позначення стану «згорнуто/розгорнуто» в акордеонах часто використовують +/− або стрілки вгору/вниз. NN/g у своєму дослідженні показує, що ці варіанти в цілому зрозумілі, але легко породжують хибні очікування.

Плюс і мінус

+ може означати «додати до кошика», «зберегти», «збільшити», «створити нове» тощо.
У багаторівневих меню з великою кількістю відкритих гілок плюс/мінус може втрачати чіткий звʼязок із конкретною дією.
У складних інтерфейсах +/− часто перевантажені значеннями, тому користувач не завжди одразу читає їх як «розгорнути/згорнути блок».

Стрілки вгору/вниз

Стрілка вниз не обовʼязково сприймається як акордеон. Вона може означати прокрутку, перехід до наступного результату, переміщення елемента тощо.
Стрілка вгору так само може інтерпретуватися як «прокрутити вгору», «перейти вище» або «перейти на інший крок».

Висновок із підходу автора: і плюс/мінус, і стрілки можна використовувати, але треба памʼятати, що це знаки з багатьма конкуруючими смислами. Чим складніший інтерфейс, тим вищий ризик плутанини.

4. Чому карет (трикутник) — найбезпечніший вибір

Згідно з описаним кейсом та посиланнями на NN/g, найкраще як індикатор акордеона працює карет/трикутник, що вказує вниз у згорнутому стані.

Як люди взаємодіють з каретом

У дослідженні, на яке посилається автор, було помітно, що:

Для більшості іконок користувачі однаково часто натискають на текст і на іконку.
Для карету частіше натискають саме на іконку, ніби сприймаючи її як основний елемент керування розгортанням.

Це означає, що карет добре сприймається як «сенсорна зона для розгортання», без конкуренції зі значенням «перейти на сторінку».

5. Практичні рекомендації для ваших інтерфейсів

На основі підходу Віталія Фрідмана та посилань на NN/g можна сформулювати кілька прикладних правил для продуктового дизайну й верстки.

1) Лінки — підкреслювати, без зайвих іконок

Якщо елемент відкриває нову сторінку, поводьтеся як класична веб-сторінка: підкреслений текст, стандартизований ховер/фокус.
Не додавайте стрілку лише для «красоти», якщо вона не несе додаткового змісту.

2) Акордеони — робити «однозначними»

Використовуйте карет вниз ▼ як дефолтну іконку акордеона.
На клік по елементу (текст + іконка) завжди виконується одна й та сама дія — розгорнути/згорнути.
Уникайте ситуацій, коли частина того самого елементу веде на сторінку, а інша частина — розгортає меню.

3) Потрібна і сторінка, і акордеон?

Якщо для категорії потрібен і список підпунктів, і окрема сторінка, безпечніші патерни такі:

Клік по категорії розгортає підменю.
Всередині акордеона є пункт «Огляд» / «Усі товари», який веде на сторінку.
Або ж поряд із назвою категорії є окреме текстове посилання (наприклад, «Перейти до розділу»), чітко відділене візуально.

4) Плюс/мінус і стрілки — вживати обережно

Використовуйте +/−, якщо в інтерфейсі немає інших «плюсів» зі значенням «додати».
Переконайтеся, що стрілки вгору/вниз не конфліктують із патернами прокрутки або переміщення списків.
Якщо в системі вже є кілька варіантів інтерпретацій, краще перейти на карети, а не додавати ще одну двозначність.

6. Спрощення як стратегія

Загальний мотив підходу автора — прибирати зайву складність у поведінці меню та акордеонів:

Не перевантажувати один і той самий елемент різними діями.
Не додавати зайві іконки, якщо вони не привносять чіткого сенсу.
Дотримуватися принципу «одна кнопка — одна дія».

У підсумку виходить проста схема:

Потрібна сторінка → робимо це посиланням із підкресленням, без іконок навігації.
Потрібен акордеон → використовуємо карет ▼ як основний індикатор, текст і іконка відкривають/закривають блок.
Потрібно і те, й інше → робимо розгортання за кліком по елементу, а всередині — явний текстовий лінк на сторінку.

На практиці така спрощена логіка знижує кількість помилкових кліків і наближає поведінку інтерфейсу до інтуїтивних очікувань користувача, що й демонструють згадані автором дослідження NN/g.

Джерело: Vitaly Friedman — Smashing Magazine