Eurotehnik.ru

Бытовая Техника "Евротехник"
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Хватит неправильно использовать выпадающие списки

Хватит неправильно использовать выпадающие списки

Формы состоят из самых разных элементов интерфейса. Если вы не знаете, как правильно с ними обращаться, вы можете сильно усложнить заполнение форм. Чаще всего ошибаются, применяя выпадающие списки (select menu).

Когда использовать

Иногда можно встретить выпадающие списки с 2 вариантами, иногда — с более чем 20. В обоих случаях это неправильно. Если у пользователя есть менее 5 вариантов выбора, следует использовать радиокнопки. Так выбор будет проще и быстрее, потому что пользователю нужно лишь взглянуть на варианты и один раз кликнуть. С выпадающим списком ему нужно нажать на него, найти подходящий вариант и кликнуть снова. Также другие варианты не видны, пока вы не нажмёте на выпадающий список. Если их меньше 5, лучше наглядно показать их в форме в виде радиокнопок — пользователи смогут быстро их просмотреть.

Если вариантов выбора больше 15, это тоже плохо. Если в выпадающем списке окажется так много вариантов, это затормозит пользователя, которому придётся прокрутить и просмотреть длинный список. Бывает, вариантов так много, что их список занимает весь экран. Если вариантов больше 15, следует либо сократить их количество, либо предоставить пользователю текстовое поле для ввода своих данных. Текстовое поле избавит пользователей от возни с огромным списком и сделает заполнение формы более быстрым и простым.

Как называть

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

Читайте так же:
Как вернуть старый дизайн яндекс браузера

Когда подставлять вариант по умолчанию

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

Группировка вариантов выбора

Если у вариантов выбора есть иерархия, разделите их на группы, используя тег optgroup. Это позволит быстрее находить нужный вариант, просматривая названия групп, а не общий список вариантов. Названия групп должны быть недоступны для выбора. Они лишь предают списку иерархию и облегчают поиск. Пользователей с ограниченными возможностями группы не запутают, так как экранные дикторы их не зачитывают.

Использование для навигации

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

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

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

Читайте так же:
Где хранятся расширения яндекс браузера

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

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

Хватит неправильно использовать выпадающие списки

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

Форматирование маркированного и нумерованного списка

Выберите инструмент «Текст» и выделите маркированные или нумерованные абзацы, для которых необходимо изменить форматирование.

Выберите пункт «Маркеры и нумерация» в меню панели «Управление» (в режиме «Абзац») или палитры «Абзац».

Нажмите кнопку «Маркированный список» или «Нумерованный список» , удерживая клавишу «Alt» (Windows) или «Option» (Mac OS).

Измените символ маркера.

Измените параметры нумерации списка.

Читайте так же:
Можно ли изменить емайл

Выберите стиль для номеров и маркеров в списке «Стиль символов».

Выравнивает маркер или номер влево, вправо или по центру в пределах горизонтального интервала, отведенного для номеров (если он слишком мал, разница между этими тремя режимами выравнивания будет незаметна).

Задает размер отступа строк, начиная со второй.

Управляет положением маркера или номера.

Увеличьте абзацный отступ, чтобы совместить пунктуацию длинных списков. Например, чтобы совместить цифры «9.» и «10.», выберите выравнивание справа и постепенно увеличьте абзацный отступ, пока номера не будут совмещены (проверьте, что включен режим предварительного просмотра).

Для создания эффекта висячего отступа, укажите положительное число в значении параметра «Отступ слева» (например, 2p0), затем укажите такое же отрицательное число (например, -2p0) в значении параметра «Абзацный отступ».

Параметры позиционирования

Параметры «Отступ слева», «Абзацный отступ» и «Позиция табулятора» в диалоговом окне «Маркеры и нумерация» являются атрибутами абзаца. Поэтому их изменение в палитре «Абзац» влияет также и на форматирование маркированных и нумерованных списков.

Включает позицию табулятора для создания интервала между маркером или номером и началом элемента списка.

По умолчанию маркеры и номера наследуют некоторые атрибуты форматирования от первого символа абзаца, к которому они прикреплены. Если первый символ первого абзаца отличается от первого символа второго, то нумерация или символы маркеров в различных элементах списка могут утратить единообразие. Чтобы исправить эту ситуацию, создайте стиль символов для номеров или маркеров и примените его через диалоговое окно «Маркеры и нумерация».

Если на шаге 3 первое слово абзаца отформатировано курсивом, то нумерация также будет выведена курсивом, если к списку не применить стиль символов.

Теперь создадим второй выпадающий список.

Сначала присвоим Заданное имя ячейкам, которые содержат название товаров. Нам нужно Задать имя диапазону С5:С14 (Конфеты А, Конфеты Б …), D5:D14 (Печень А, Печенье Б …), Е5:Е14 (Торт А, Торт Б …). Заданные имена должны соответствовать названию столбцов из первого выпадающего списка. Заданное имя для диапазон С5:С14 (Конфеты А, Конфеты Б …) должно быть Конфеты, для диапазона D5:D14 (Печень А, Печенье Б …) – Печенье, для диапазона Е5:Е14 (Торт А, Торт Б …) – Торты.

Читайте так же:
Как в таблице excel выделить повторяющиеся значения

Теперь выбираем ячейку для второго выпадающего списка. В нашем примере это Н4. Для наглядности сделаем ячейку зеленого цвета и сверху пишем: «Название».

Вызываем функцию выпадающий список и в диалоговом окне Проверка вводимых значений вносим данные:

Тип данных. Выбираем вариант Список

Источник. Здесь, после знака равно, нужно вписать функцию ДВССЫЛ и указать адрес ячейки, в которой находиться первый выпадающий список. В скобочках.

Выглядит это вот так: =ДВССЫЛ(G4)

Связанные выпадающие списки в Excel

Связанные выпадающие списки в Excel

Нажимаем ОК. Появляется второй выпадающий список. Перечень названий, в котором будет зависеть от того, что выбрано в первом выпадающем списке. У нас получились связанные (зависимые) выпадающие списки в MS Excel.

Данный алгоритм так же будет работать, если исходные данные (Таблица №2) и выпадающие списки расположены на разных листах книги.

Общие рекомендации

  • Присваивайте источникам с данными имена. Это позволит пополнять списки новыми данными без изменения формулы в проверке данных.
  • Если в вашем отчете содержится несколько списков, выносите источники на отдельный лист. Это практично и не загромождает главную страницу отчета лишними данными.
  • Сортируйте список по удобному для вас параметру — в больших массивах это позволит быстро найти нужную позицию.
  • Не дублируйте в источниках значения выпадающего списка, иначе у вас будет несколько одинаковых значений.
  • По умолчанию в выпадающем списке отображается всего 8 первых значений. Если нужно отобразить больше или реализовать функцию быстрого поиска, используйте элементы управления VBA или ActiveX.

Весь бизнес-контент в удобном формате. Интервью, кейсы, лайфхаки корп. мира — в нашем телеграм-канале. Присоединяйтесь!

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector