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

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

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

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

Указатель

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

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

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

Если браузер сообщает о значении 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 тем, что он сообщает, прошло ли какое-либо указательное устройство тест.

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

Значение 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 будет истинным, если любой из доступных механизмов ввода способен наводить курсор на элементы.

Если вы решили изменить логику из предыдущего примера, вы можете сделать стили наведения по умолчанию, а затем удалить их, если значение 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">

Режимы ввода

Поддержка браузера

• 66
• 79
• 95
• 12.1

Источник

Атрибут 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()

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

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

Это устарело в Media Queries 4.

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

Любой указатель включает в себя такие вещи, как ваш палец в качестве указателя.

Указатель уже включает сенсорный ввод в качестве типа ввода.

Указатели не включают в себя такие вещи, как мышь.

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

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

any-pointer запрашивает все типы ввода устройства на предмет любого совпадения.

Какие типы ввода представляют собой более подходящую виртуальную клавиатуру для пользователей?

type="url"

На клавиатуре появятся кнопки для поддержки ввода URL-адресов.

type="tel"

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

type="number"

На клавиатуре будут кнопки для ввода только цифр.

type="email"

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