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

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

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

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

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

Як називати

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

Читайте нас також: