Поделиться через

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

  • Статья

Примечание

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

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

Проектирование для сенсорного ввода

Главное — проектировать приложение так, чтобы сенсорный ввод являлся главным методом ввода для пользователей. Если вы используете элементы управления платформой, поддержка сенсорной панели, мыши и пера не требует дополнительного программирования, так как Windows предоставляет это бесплатно.

Однако имейте в виду, что пользовательский интерфейс, оптимизированный для сенсорного ввода, не всегда будет лучше традиционного интерфейса. Оба предоставляют преимущества и недостатки, уникальные для технологии и применения. При переходе к сенсорному интерфейсу важно понимать основные различия между сенсорным вводом (включая сенсорную панель), пером, мышью и вводом с клавиатуры. Не следует принимать привычные свойства и поведение устройства ввода как должное, так как сенсорный ввод в Windows 8 делает больше, чем просто эмулирует эту функциональность.

Как вы скоро узнаете, сенсорный ввод требует другого подхода к дизайну пользовательского интерфейса.

Сравнение требований, предъявляемых к взаимодействию с сенсорным экраном

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

Фактор Взаимодействия с помощью сенсорного ввода Взаимодействие с помощью мыши, клавиатуры, пера Touchpad
Точность
 Контактная поверхность кончиков пальцев больше, чем отдельная пара координат X-Y, поэтому увеличивается вероятность случайного выполнения команд.
 Мышь и перо передают точные координаты X-Y.
 Аналогично мыши.
Форма контактной поверхности изменяется при движении.
Перемещения мыши и пера передают точные координаты X-Y. Клавиатурная фокусировка определена явно.
 Аналогично мыши.
Отсутствует указатель мыши для нацеливания.
 Указатель мыши, указатель пера и клавиатурная фокусировка позволяют выполнить нацеливание.
 Аналогично мыши.
Анатомия человека
 Движения кончиков пальцев являются неточными, так как прямолинейное перемещение одного или нескольких пальцев затруднено из-за изгиба суставов кисти и одновременного участия в движении нескольких суставов.
 Мышью или пером прямолинейное движение выполняется легче, так как кисть руки передвигается на расстояние, которое значительно короче, чем перемещение курсора на экране.
 Аналогично мыши.
Некоторые участки на поверхности сенсорного экрана могут быть труднодоступны при определенных положениях пальцев и захвате устройства пользователем.
 Указатель мыши или перо может достигать любой части экрана, и при этом любой элемент управления должен быть доступен с клавиатуры с помощью последовательности табуляции.
Проблемой может стать расположение пальцев и руки, держащей устройство.
Объекты могут заслоняться одним или несколькими пальцами или кистью руки. Это называется загораживанием экрана.
 Устройства ввода непрямого действия не вызывают загораживание экрана.
 Аналогично мыши.
Состояние объекта
 Для сенсорного ввода используется модель с двумя состояниями: сенсорная поверхность устройства с дисплеем либо касается (включена), либо не включена (отключена). Состояние при наведении, при котором может быть инициирована дополнительная визуальная обратная связь, отсутствует.
 Для мыши, пера и клавиатуры существуют три состояния: верхнее (неактивное), нижнее (активное) и при наведении (фокусное).
Состояние при наведении позволяет изучить элементы пользовательского интерфейса с помощью всплывающих подсказок. Также оно помогает понять, какие объекты доступны для взаимодействия, и выполнить нацеливание.
Аналогично мыши.
Сложное взаимодействие
 Поддерживается мультисенсорная технология: множественные точки ввода (кончиками пальцев) на поверхности сенсорного экрана.
 Поддерживается единственная точка ввода.
 Аналогично сенсорному вводу.
Поддерживается прямое манипулирование объектами с помощью таких операций, как касание, перетаскивание, скольжение, изменение размера и вращение.
 Прямая манипуляция не поддерживается, так как мышь, перо и клавиатура являются устройствами ввода непрямого действия.
 Аналогично мыши.

Примечание

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

Здесь приведены некоторые общие рекомендации по взаимодействию с пользователем, а также рекомендации по конкретным устройствам в этих разделах.

Визуальные элементы для обратной связи

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

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

Оптимизация для точности

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

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

По возможности расположите меню, всплывающие окна и всплывающие подсказки над областью контактов.

Ограничение достоверности

Избегайте или сведите к минимуму небрежные взаимодействия с помощью ограничений пользовательского интерфейса.

  • Точки прикрепления могут упростить остановку в нужных местах. Они задают логические остановки в содержимом приложения. С когнитивной точки прикрепления действуют как механизм разбиения по страницам для пользователя и свести к минимуму усталость от чрезмерного скольжения, прокрутки или поворота. С их помощью можно обрабатывать неточными входными данными пользователя и обеспечивать отображение определенного подмножества содержимого или информации ключа.
  • Направленные "направляющие", подчеркивающие ось движения (вертикальную или горизонтальную).

Избегайте временных взаимодействий

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

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

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

Примечание: Исключением является использование определенных временных взаимодействий для обучения и изучения (например, нажатие и удержание). Использование соответствующих описаний и визуальных подсказок оказывает большое влияние на использование расширенных взаимодействий.