Перестаньте неправильно використовувати випадаючі списки

Форми складаються з самих різних елементів інтерфейсу. Якщо ви не знаєте, як правильно з ними поводитися, ви можете сильно ускладнити заповнення форм. Найчастіше помиляються, застосовуючи випадаючі списки (select menu).

Коли використовувати


Іноді можна зустріти випадаючі списки з 2 варіантами, іноді — з більш ніж 20. В обох випадках це неправильно. Якщо у користувача є менш 5 варіантів вибору, слід використовувати радіокнопки. Так вибір буде простіше і швидше, тому що користувачеві потрібно лише глянути на варіанти і один раз клікнути. З випадним списком йому потрібно натиснути на нього, знайти відповідний варіант і клікнути знову. Також інші варіанти не видно, поки ви не натиснете на випадаючий список. Якщо їх менше 5, краще наочно показати їх у формі у вигляді радіокнопок — користувачі зможуть швидко їх переглянути.



Якщо варіантів вибору більше 15, це теж погано. Якщо у випадаючому списку виявиться так багато варіантів, це загальмує користувача, якому доведеться прокрутити і переглянути довгий список. Буває, варіантів так багато, що їх список займає весь екран. Якщо варіантів більше 15, слід або скоротити їх кількість, або надати користувачеві текстове поле для введення своїх даних. Текстове поле позбавить користувачів від метушні з величезним списком і зробить заповнення форми більш швидким і простим.



Як називати


Як у будь-якого іншого елемента форми, у списку, що випадає повинно бути розташоване поруч назву (label). Однак, напис про те, що користувач вибирає, повинна бути і всередині елемента. Вона повинна чітко описувати набір варіантів. Користувачам з обмеженими можливостями, які використовують при заповненні форм екранних дикторів (screen readers), буде недостатньо універсального «Виберіть, будь ласка». Додавання назви і зовні, і всередині випадаючого списку дозволить будь-якому користувачеві робити вибір швидше і без будь-якої замешкі.



Коли підставляти варіант за замовчуванням


Постарайтеся не пропонувати користувачам варіант за замовчуванням. При заповненні форми користувач може ненавмисно пропустити випадаючий список з невідповідним варіантом за умовчанням. Надійніше буде повідомляти про невибрані варіанті, ніж приймати форму з некоректними даними. Підставити варіант за замовчуванням можна тільки в тому випадку, якщо ви більш ніж на 90% впевнені, що користувачі будуть вибирати саме цей варіант. Тоді це захистить більшість ваших користувачів від метушні з випадним списком.



Групування варіантів вибору


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



Використання для навігації


В основному випадаючі списки використовуються у формах, але іноді — і для навігації. На деяких сайтах випадаючі списки використовуються для фільтрації або упорядкування вмісту. Вибравши варіант, користувач направляється на нову сторінку. Для екранних дикторів це спрацює, якщо можна табом перейти до випадному списку і за допомогою кнопок зі стрілками дійти до потрібного варіанту, не йдучи на нову сторінку відразу. Випадаючий список повинен направляти на нову сторінку по натисненню клавіші вводу. ДжаваСкрипт буває вимкнений у окремих екранних дикторів. Щоб випадаючі списки служили навігації при вимкненому ДжаваСкрипт, поруч слід розмістити кнопку підтвердження. Користувачі будуть направлятися на нову сторінку після вибору варіанту і натиснення на цю кнопку.



Більше підходять для форм, а не навігації



Хоч ви і зустрінете випадаючі списки, використовувані в навігації, ми рекомендуємо використовувати їх тільки в формах. Мобільні сайти часто використовують їх як основну навігацію, щоб заощадити місце. Однак з цим рішенням пов'язані проблеми, що стосуються юзабіліті, доступності та СЕО.



На перший погляд, навігація за допомогою випадаючого списку виглядає недоречною, оскільки не поєднується з дизайном сайту. Також вона незручна, тому що натискання на випадаючий список призводить до появи обертового колеса (spinning wheel), що використовується для вибору з варіантів в мобільних формах. Користувач повинен натиснути на випадаючий список, знайти та вибрати варіант, натиснути кнопку «Готово», а це немало дій. Не кажучи вже про те, що кнопки «Попередній», «Наступний» і «Автозаповнення» у даній ситуації марні, так як ви не заповнюєте форму.

Ваш випадаючий список можна буде використовувати для навігації, якщо ДжаваСкрипт вимкнений. Це стосується користувачів деяких екранних дикторів. Доступніше буде меню, яке відкриється при переміщенні на нього табом і дозволить тим же самим табом пройтися по іншим варіантам. Це можливо тільки якщо пункти меню є справжніми посиланнями. З цієї ж причини випадають меню марні з точки зору СЕО. Якщо ви хочете, щоб ваша навігація була оптимізована для пошуковиків, не використовуйте випадаючі списки, а пропонуйте користувачам розкривні меню (dropdown menu).

Вистачить неправильно використовувати випадаючі списки



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

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.