Жесты в UX/UI-дизайне

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

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

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

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

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

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

1. Повышение вовлеченности пользователей

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

2. Меньше беспорядка

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

3. Удобство

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

4. Больше потенциала

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

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

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

6. Доступность и инклюзивность

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

7. Новизна

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

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

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

Ниже перечислены наиболее распространенные в интерфейсах жесты, с которыми знакомы почти все пользователи — пусть и неосознанно.

Тап (нажатие)

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

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

Двойной тап

Двойной тап или двойное нажатие — это нажатие на экран два раза подряд в близкой последовательности.

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

Свайп

Свайп — это движение пальцем по экрану в одном направлении, касание с одной стороны и поднятие пальца с другой.

Такой жест часто используется для прокрутки или переключения между страницами. В Tinder свайп вправо используется для мэтча, а свайп влево — для пропуска.

Свайп несколькими пальцами

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

Перетаскивание

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

Пролистывание

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

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

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

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

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

Щипок

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

Раскрытие или раздвижение

Раскрытие или раздвижения — это жест, противоположный щипку.

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

Вращение

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

Особенности внедрения жестов

Процесс внедрения жестов в интерфейс проходит в несколько этапов.

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

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

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

• Создайте серию задач, для выполнения которых необходимо использовать новый жест.
• Предложите тестируемому пользователю выполнить задание, используя при этом экранный рекордер и программу сбора данных для отслеживания касаний, смахиваний и других жестов.
• После записи спросите пользователя, что он думает о жесте. Легко ли было его выполнять? Интуитивно понятным? Приятно?

1. Во-первых

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

2. Во-вторых

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

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

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

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

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

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

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