Взаимодействие

Устройства с небольшим экраном, такие как мобильные телефоны, часто оснащены сенсорными экранами. Устройства с большим экраном, такие как ноутбуки и настольные компьютеры, часто комплектуются аппаратными средствами, такими как мышь или тачпад. Возникает соблазн приравнять маленькие экраны к сенсорному управлению, а большие — к указателям.

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

Вместо того чтобы пытаться определить механизм ввода по размеру экрана, используйте медиатеги в CSS.

Указатель

С помощью функции pointer носителя можно проверить три возможных значения: none , coarse и fine .

Если браузер сообщает о значении pointer , равном none , это может означать, что пользователь использует клавиатуру для взаимодействия с вашим веб-сайтом.

Если браузер сообщает значение pointer как coarse это означает, что основной механизм ввода не очень точен. Палец на сенсорном экране — это грубый указатель.

Если браузер сообщает значение pointer как fine это означает, что основной механизм ввода способен к точному управлению. Мышь или стилус — это указатель с высокой точностью.

Вы можете настроить размер элементов интерфейса в соответствии со значением pointer . Попробуйте посетить этот демонстрационный сайт на разных устройствах, чтобы увидеть, как интерфейс адаптируется.

В этом примере кнопки увеличены для более грубого управления указателями:

button {
  padding: 0.5em 1em;
}
@media (pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

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

Не

@media (pointer: fine) {
  button {
    padding: 0.25em 0.5em;
  }
}

Даже если у пользователя есть основной механизм ввода, способный к точному управлению, стоит дважды подумать, прежде чем уменьшать размер интерактивных элементов. Закон Фиттса по-прежнему действует. Меньшая цель требует большей концентрации, даже при использовании точного указателя. Большая целевая область выгодна всем, независимо от устройства ввода.

Любые подсказки

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

any-pointer отличается от функции pointer Media тем, что она сообщает, прошло ли проверку какое-либо указывающее устройство.

Значение any-pointer равное none , означает, что ни одно указательное устройство недоступно.

Значение параметра coarse any-pointer означает, что по крайней мере одно из устройств ввода не очень точное. Но это может быть не основной механизм ввода.

Значение параметра fine any-pointer означает, что по крайней мере одно указательное устройство способно к точному управлению. Но опять же, это может быть не основной механизм ввода.

Поскольку медиазапрос any-pointer выдаст положительный результат, если хотя бы один из механизмов ввода пройдет проверку, браузер может выдать результат для any-pointer: fine и одновременно результат для any-pointer: coarse . В этом случае порядок ваших медиазапросов имеет значение. Последний будет иметь приоритет.

В этом примере, если устройство имеет как механизм точного, так и грубого ввода, применяются грубые настройки.

@media (any-pointer: fine) {
  button {
    padding: 0.5em 1em;
  }
}
@media (any-pointer: coarse) {
  button {
    padding: 1em 2em;
  }
}

Ховер

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

В отличие от функции ввода с помощью pointer , которая различает точные и грубые указатели, функция наведения hover является бинарной. Если основное устройство ввода способно наводить курсор на элементы, оно сообщит значение hover . В противном случае значение будет none .

В этом примере при наведении курсора появляется дополнительная иконка, но только если основное устройство ввода способно наводить курсор на элемент.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:hover .extra {
    visibility: visible;
  }
}

Если вы наведете курсор мыши на эту кнопку, значок появится. Но если вы используете клавиатуру для перехода к кнопке, значок останется невидимым. При использовании клавиатуры вы фокусируетесь, а не наводите курсор. Настольное устройство с подключенной мышью сообщит, что основной механизм ввода поддерживает наведение курсора, что соответствует действительности. Но любой, кто использует клавиатуру при подключенной мыши, не получит преимуществ от стилей :hover . Поэтому целесообразно комбинировать стили :hover и :focus для охвата обоих типов взаимодействия.

button .extra {
  visibility: visible;
}
@media (hover: hover) {
  button .extra {
    visibility: hidden;
  }
  button:is(:hover, :focus) .extra {
    visibility: visible;
  }
}

Даже если основное устройство ввода позволяет наводить курсор на элементы, будьте осторожны, скрывая информацию за эффектом наведения. Информация становится менее доступной для обнаружения. Не используйте наведение курсора для сокрытия важной информации или важного элемента интерфейса.

Любой наведение

При hover запрос мультимедиа сообщает только об основном механизме ввода. Некоторые устройства имеют несколько механизмов ввода: сенсорный экран, мышь, клавиатура, трекпад.

Подобно тому, как any-pointer сообщает о любом из механизмов ввода, any-hover будет иметь значение true, если хотя бы один из доступных механизмов ввода способен наводить курсор на элементы.

Если бы вы решили изменить логику в предыдущем примере, вы могли бы сделать стили при наведении курсора значениями по умолчанию, а затем удалять их, если значение параметра any-hover равно none .

button .extra {
  visibility: hidden;
}
button:hover .extra,
button:focus .extra {
  visibility: visible;
}
@media (any-hover: none) {
  button .extra {
    visibility: visible;
  }
}

На устройстве, не имеющем механизма ввода с возможностью наведения курсора, дополнительная иконка всегда видна.

Виртуальные клавиатуры

Люди используют курсоры и пальцы для исследования интерфейсов, но когда дело доходит до ввода информации, им нужна клавиатура. Это удобно, если к устройству подключена физическая клавиатура, но если используется устройство с сенсорным экраном, ситуация несколько усложняется. Такие устройства предоставляют виртуальные экранные клавиатуры.

Типы ввода

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

Типы полей ввода HTML5 — отличный способ описания элементов input . Атрибут type принимает такие значения, как email , number , tel , url и другие.

  <label for="email">Email</label>
  <input type="email" id="email">

  <label for="number">Number</label>
  <input type="number" id="number">

  <label for="tel">Tel</label>
  <input type="tel" id="tel">

  <label for="url">URL</label>
  <input type="url" id="url">

Режимы ввода

Browser Support

• 66
• 79
• 95
• 12.1

Source

Атрибут inputmode позволяет точно управлять виртуальными клавиатурами. Например, если существует один type input со значением number , вы можете использовать атрибут inputmode для различения целых чисел и десятичных дробей.

Если вам нужно целое число, например, возраст, используйте inputmode="numeric" .

<label for="age">Age</label>
<input type="number" id="age" inputmode="numeric">

Если вы запрашиваете число, содержащее десятичные знаки, например, цену, используйте inputmode="decimal" .

<label for="price">Price</label>
<input type="number" id="price" inputmode="decimal">

Автозаполнение

Никто не любит заполнять формы. Как дизайнер, вы можете улучшить пользовательский опыт, предоставив пользователям возможность автоматически заполнять поля форм. Атрибут autocomplete предоставляет множество возможностей для улучшения контактных форм, форм входа в систему и форм оформления заказа.

<label for="name">Name</label>
<input type="text" id="name" autocomplete="name">

<label for="country">Country</label>
<input type="text" id="country" autocomplete="country">

<label for="email">Email</label>
<input type="email" id="email" autocomplete="email">

Эти HTML-атрибуты type , inputmode и autocomplete — являются небольшими дополнениями к полям вашей формы, но они могут существенно улучшить пользовательский опыт. Предвидя и учитывая возможности устройства пользователя, вы расширяете его возможности. Для получения более подробной информации существует курс, посвященный изучению форм .

Далее в этом курсе мы рассмотрим некоторые распространенные шаблоны интерфейса .

Проверьте свое понимание

Проверьте свои знания об взаимодействиях.

Какую функцию следует использовать вместо попытки определить тип ввода пользователя по размеру экрана?

CSS медиа-функции

Как @media (pointer: coarse) или @media (-any-pointer: coarse)

Запросить у пользователя информацию с помощью prompt() в JavaScript.

Нецелесообразно спрашивать напрямую.

Тип носителя CSS: handheld

В версии Media Queries 4 эта функция устарела.

В чём разница между @media (pointer) и @media (any-pointer) ?

К указателям относится, например, ваш палец.

В интерфейсе Pointer уже есть функция касания.

К указателям не относятся, например, курсоры мыши.

В качестве устройства ввода указатели могут использовать мышь.

Любой указатель выдаст сообщение «истина», если дополнительные, не основные входные сигналы, такие как стилус, пройдут проверку.

Функция any-pointer запрашивает все типы входных данных устройства на предмет совпадения.

Для каких типов ввода пользователям будет удобнее использовать виртуальную клавиатуру?

type="url"

Клавиатура будет предлагать кнопки для ввода URL-адресов.

type="tel"

Клавиатура будет предлагать кнопки для ввода телефонных номеров.

type="number"

Клавиатура будет оснащена кнопками для ввода только цифр.

type="email"

Клавиатура будет предлагать кнопки для ввода адресов электронной почты.