Понимание жестов для дизайна пользовательского интерфейса

Нажатие, смахивание, перетаскивание, длительное нажатие — вот лишь некоторые из жестов, которые стали доминировать в нашем цифровом опыте. Сенсорные экраны iPhone сделали мобильные жесты популярными много лет назад, и с тех пор мы не оглядывались назад.

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

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

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

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

Что делает хороший жест

Итак, что такое жесты?

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

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

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

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

«До сих пор нам всегда приходилось приспосабливаться к ограничениям технологий и приспосабливать то, как мы работаем с компьютерами, к набору произвольных соглашений и процедур. Благодаря NUI вычислительные устройства впервые будут адаптироваться к нашим потребностям и предпочтениям, и люди начнут использовать технологии наиболее удобным и естественным для нас способом».

Преимущества технологии жестов

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

1. Более чистые интерфейсы

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

2. Простота использования

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

3. Улучшенное выполнение задач

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

Типы жестов в дизайне пользовательского интерфейса

Дизайн для сенсорного управления привел к развитию многих типов жестов, наиболее распространенными из которых являются постукивание и смахивание. Есть три категории жестов:

1. Навигационные жесты (для навигации)
2. Жесты действия (чтобы совершить действие)
3. Преобразование жестов (для управления контентом)

Ниже приведены некоторые из наиболее распространенных жестов в интерфейсах, с которыми знакомы все (или почти все) пользователи, пусть даже и неосознанно. Мы упоминаем экраны, но вы можете заменить экран тачпадом или любым другим жестовым интерфейсом.

Нажмите

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

Двойное нажатие

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

Проведите

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

Проведение несколькими пальцами

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

Тяга

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

Бросок

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

Длительное нажатие

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

Ущипнуть

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

Pinch-Open или Spread

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

Вращение

Чтобы сделать вращение, нажмите на экран двумя пальцами и вращайте их круговыми движениями. Лучший пример поворота — это когда вы переворачиваете карту на Google Maps, чтобы увидеть, что вас окружает.

Создание жестов 101

Используйте то, что люди знают

Жесты существуют уже некоторое время, поэтому для большинства жестов существуют общие рекомендации.

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

Вот несколько полезных руководств по использованию жестов и движений для интерфейсов популярных продуктов.

• Руководство по жестам Google
• Рекомендации Microsoft по жестам
• Руководство по использованию жестов Apple
• Руководство по жестам Android

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

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

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

Возьмем, к примеру, использование Instagram двойного касания, чтобы поставить лайк или отметить пост. Двойное нажатие обычно используется для увеличения, но оно хорошо работает для целей Instagram. Это также отличное исследование эффективности: нажатие на сердце под столбом требует на одно нажатие меньше, но больше цели. Альтернативный метод двойного касания позволяет пользователям прокручивать быстрее, поскольку им нужно нацелиться на все изображение, и интуитивно понятно коснуться объекта, который вам нравится.

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

Думайте вне экрана

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

Но вы по-прежнему можете проявлять творческий подход к жестам телефона, думая за пределами экрана. Устройства уже много лет используют вращение и встряхивание как методы взаимодействия. Например, Apple «Shake to Undo» дает пользователям возможность отменить действие, встряхнув телефон. И к настоящему моменту вы, вероятно, уже знакомы с поворотом экрана по горизонтали для просмотра видео в полноэкранном режиме.

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

Жесты и специальные возможности

Жесты, как и все вещи, должны быть доступны. Доступность относится к тому, чтобы сделать продукт доступным и пригодным для использования всеми людьми во всех контекстах, включая людей с ограниченными возможностями. Жесты должны соответствовать лучшим практикам доступного дизайна, чтобы способствовать созданию равноправной среды, соответствовать Закону об американцах с ограниченными возможностями (ADA) и позволять всем, кто может извлечь выгоду из вашего продукта, использовать его.

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

Не забывайте об UX

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

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

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

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

Уточнить адаптацию пользователей

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

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

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

Откройте для себя будущее жестовых интерфейсов

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

Дизайн для сенсорного управления — растущая часть области. Жесты существуют в ванных комнатах и ​​автомобилях — кто знает, что будет дальше? Прими это. Более полезный продукт — эффективный продукт.

Есть вопросы или хотите обновить UX и UI своих продуктов? Мы рады поговорить. Просто протяни руку.