За последнее время много слов было сказано на тему юзабилити интерфейсов мобильных приложений. Тема, действительно, актуальная, учитывая насколько плотно смартфоны вошли в нашу жизнь. Наличие сенсорного экрана предлагает пользователю (предполагает) совершенно иной способ взаимодействия с устройством. В данной статье представлена подборка возможных жестов пользователя (touch-событий) и ответные реакции интерфейса на них.
Вы узнаете:
Что такое multi-touch, и какие преимущества получает пользователь;
Какие платформы поддерживают технологию multi-touch;
Какие команды можно реализовать с помощью жестов;
Без чего жестовое управление бесполезно;
Включать жестовые команды в мобильное приложение или нет.
Одним движением
Представьте себе не обычный почтовик, как Outlook, например, а нечто новое, в котором можно удалять или архивировать письма при помощи проведения пальцем вправо-влево, отмечать письма зажатием и встряхиванием, отвечать, пересылать, или отмечать как прочитанные письма и много другое с помощью не кнопок, а жестов. Это реальность для мобильных устройств и тенденция в разработке интерфейсов многих современных приложений.
 |
Таких приложений сейчас уже довольно много. В этой статье упомянем несколько самых ярких.
Управление посредством прикосновений (или, говоря техническим языком, touch-событий) имеет свои особенности. Реакция интерфейса на жесты пользователей достаточно разнообразна и зависит от 2-х факторов: от характера движения и от количества точек контакта. Коснулись пальцем экрана один раз и запустили приложение, провели пальцем по эрану вверх или вниз - прокрутили страницу (это действие носит название «скролл»), смахнули пальцем вправо или влево и перелистнули страницу («свайп»). Приведенные примеры прекрасно иллюстрируют вариант управления с помощью одного пальца (одной точки контакта). Подобные touch-события поддерживаются большинством мобильных платформ и браузеров.
Для описания ситуации, когда точек контакта несколько, используется достаточно популярный благодаря компании Apple термин multi-touch. Использование трекпадов с поддержкой multi-touch технологии в ноутбуках компании произвело революцию в сознании многих пользователей. Кроме того, тактильное взаимодействие носит эмоциональную окраску, что доказывает преимущества touch-управления перед кнопочным или управлением посредством стилуса.
Жестами принято называть объединенные в одну команду multi-touch события. Например, «сжимание» изображения с целью изменения его масштаба. При этом среди мобильных платформ распространены multi-touch события для ситуаций, когда точек контакта не более двух, то есть в управлении задействовано всего два пальца..
Поддержка
Технология multi-touch может быть использована только в нативных приложениях. Ниже представлен список мобильных платформ, поддерживающих multi-touch и жесты на 2013 год:
Windows Mobile 6.5 и более поздние, включая приложения с Flash Player 10.1 и Adobe AIR 2;
. Apple iOS;
. Nokia Symbian 3 OS на флагманских моделях Nokia N8, Nokia C6-01, Nokia C7, Nokia E7, Nokia X7;
. Google Android;
. Samsung Bada;
. Palm webOS;
. Microsoft Windows Phone 7, 8;
. BlackBerry OS 6.0;
. Neprash Technology’s N-Touch Platform.
Варианты прикосновений
Варианты прикосновений прекрасно описаны в Touch Gesture Reference Guide (авторы Craig Villamor, Dan Willis, Luke Wroblewski). Я предлагаю Вашему вниманию выжимку. Полную версию можно скачать с сайта авторов :
|
Изображение |
Описание |
Варианты реакции |
|---|---|---|
 |
Коротко коснуться одним пальцем экрана |
Выбрать, в процессе прокрутки страницы - ускорить |
|
Дважды быстро коснуться одним пальцем экрана |
Открыть, изменить масштаб контента на экране |
|
 |
Провести одним пальцем по экрану вправо, не разрывая контакта. |
Переместить, влево - удалить |
 |
Одним пальцем легко смахнуть по экрану вниз (движение напоминает мазок кистью по холсту) |
Прокрутить страницу |
 |
Легко одним пальцем смахнуть вправо (движение напоминает мазок кистью по холсту) |
Перелистнуть страницу, развернуть боковое меню |
 |
Коснуться экрана двумя слегка разведенными пальцами и соединить их |
Уменьшить |
 |
Обратный жест: коснуться экрана двумя соединенными пальцами и развести их |
Увеличить |
|
Коснуться экрана одним пальцем и зафиксировать это действие на несколько секунд (словно, нажать на экран). |
Изменить состояние, выделить |
|
|
Коснуться экрана одним пальцем, зафиксировать (нажать) и в тот же момент быстро коснуться экрана другим пальцем |
Переместить, открыть контекстное меню |
|
 |
Нажать на экран одним пальцем и одновременно с этим другим пальцем провести по экрану, не теряя контакта вправо либо вверх/вниз |
Регулировать, перемещать |
 |
Коснуться экрана двумя разведенными пальцами и совершить вращательное движение по часовой стрелке (четверти оборота достаточно); Нажать на экран одним пальцем, одновременно другим пальцем очертить полукруг по часовой стрелке; Коснуться двумя сведенными вместе пальцами экрана и очертить полукруг по часовой стрелке, не разрывая контакта |
Повернуть контент |
В качестве примеров предлагаю посмотреть три приложения, в которых управление реализовано только с помощью жестов.
 |
Первый в своем роде жестовый калькулятор, созданный для iPhone. Минимальный дизайн и максимальная функциональность - создатели решили не перегружать экран различными кнопками, поэтому управление реализовано с помощью интуитивно понятных жестов. Все, что нужно помнить, что свайп вправо - это "+", влево - "-". Чтобы увидеть результат ("=") достаточно смахнуть пальцем вверх, а чтобы очистить экран (“C”) достаточно провести двумя пальцами в любом направлении.
Особенности:
- Жестовое управление для + / - / = / Очистить
- Скрытые действия для х / ÷ / ± / √ / % / Удалить
По мнению разработчиков такой жестовый калькулятор может быть на 200% более эффективным.
|
Простой планировщик дел, преимущественно для домашнего использования. Основная фишка: минималистический интерфейс и интуитивно понятное жестовое управление:
Чтобы добавить элемент достаточно потянуть список вниз
Для удаления или внесения отметки о выполнении задачи нужно провести пальцем вправо/влево
Чтобы вставить новый пункт в список между двумя другими необходиммо использовать жест, применяемый для увеличения
Чтобы закрыть текущий список и показать все списки нужно потянуть список чуть сильнее
Повторное движение позволит перейти к экрану настроек
 |
Приложение Будильник, которое, разумеется, управляется жестами:
Чтобы настроить время достаточно потянуть
Функция Включить/выключить реализована свайпом
Чтобы отключить звонящий будильник при заблокированном экране необходимо потрясти телефон
Несмотря на очевидные преимущества реализации touch-управления в интерфейсах, которые обеспечивают более полное взаимодействие с пользователем за счёт тактильных ощущений, использование только жестового управления не всегда оправдано. Ниже приведены рекомендации разработчику:
Используемые жестовые команды должны быть простыми и интуитивно понятными пользователю, реакция на жесты должна быть ожидаемой. Например: жесты «зачеркивание» и «листание».
При использовании более сложных жестовых моделей управления, которые не могут быть обнаружены пользователем самостоятельно, необходимо предусмотреть процесс обучения пользователя и реализовать подсказки. При этом рекомендуется обучать пользователя не только при первом знакомстве с приложением. Но и в процессе использования..
Выводы
Изменению восприятия смартфона в сознании пользователей, несомненно, дает и новые возможности разработчикам. Уже наметилась определенная тенденция обновления интерфейса в сторону упрощения взаимодействия с пользователем, что подтверждает недавний релиз концептуально новой для Apple операционной системы iOS 7. На мой взгляд, iOS 7 будит желание прикасаться к экрану телефона снова и снова.
А насколько полно Вы используете возможности touch-экрана в повседневной жизни?
В устройствах Samsung Galaxy S есть поддержка жестов. В частности, пользователям очень пригодятся такие фичи как:
1. Функция «мгновенный обзор», которая позволяет пролистывать фотографии в галерее и переключать треки с помощью жеста ладони.
2. Функция «бесконтактное принятие вызова». Она позволяет принимать звонки с помощью жеста и автоматически включает громкую связь. Это чертовски удобно, когда у вас грязные или мокрые руки и вы не хотите брать смартфон и даже дотрагиваться до экрана: на кухне, во время ремонта и т.д.
Включение пролистывания и ответа на звонок с помощью жестов
1. Откройте панель уведомлений.
2. Нажмите на иконку Параметры :
3. Перейдите на вкладку Мое устройство .
4. В области Ввод и управление выберите Движения и жесты :
5. Нажмите на переключатель справа для включения режима Управление жестами .
6. Нажмите на левую часть той же строки для входа в настройки жестов:
7. Включите функции Мгновенный обзор
8. Если нужно, включите Бесконтактное принятие вызова :
К слову, функция Быстрый взгляд
позволяет просмотреть время и узнать, есть ли пропущенные звонки и новые SMS-сообщения.
Для того, чтобы глобально включить или отключить управление жестами в смартфоне, вы можете воспользоваться соответствующим выключателем на панели уведомлений:
С помощью жестов TalkBack вы можете легко управлять устройством Android.
Они делятся на три типа: основные, жесты перехода и угловые. Их необходимо выполнять одним движением, с постоянной скоростью, равномерно надавливая на экран.
Основные жесты
Жесты перехода
Угловые жесты
Эти жесты состоят из двух линий, формирующих прямой угол. Например, чтобы перейти на главный экран, нужно сначала провести вверх, потом резко влево под углом 90 градусов (этот жест установлен по умолчанию).
Примечание . Жест, открывающий панель уведомлений (вправо, затем вниз), поддерживается не во всех версиях TalkBack. Если он не сработал на вашем устройстве, проведите двумя пальцами от верхнего края экрана вниз.
Жесты двумя пальцами
Все жесты TalkBack выполняются одним пальцем. Пока вы касаетесь экрана одним пальцем, ваши жесты отправляются только в TalkBack.
Однако при использовании двух или более пальцев ваше прикосновение или жест распознается непосредственно приложением, а не TalkBack. Например, вы можете прокручивать страницы двумя пальцами.
Некоторые приложения позволяют увеличивать и уменьшать изображение, поместив два пальца на экран и сдвигая или раздвигая их. TalkBack не препятствует распознаванию этих жестов.
Настройка жестов TalkBack
Все вышеперечисленные жесты установлены по умолчанию. При желании вы можете изменить их назначение.
Жесты в мобильных приложениях
Некоторые критики считают такой способ управления, как жесты, сложным для понимания - и потому бесполезным. Вместе с тем, освоение жестовых технологий идет стремительными темпами, в мире UI тактильные решения поставлены на поток. Но все же главная сложность - это новизна. Жесты как способ управления электронным устройством появились еще в начале 80-х, а с начала нулевых они распространились повсеместно. Дизайнеры пытаются сделать жесты интуитивно понятными - но этот процесс все еще на стадии бета-тестирования.
Общие жесты
Это жесты, которые реализованы на многих платформах и привычные для большинства.
Исследование Дэна Моуни показывает, что ожидания пользователей относительно нюансов работы интерфейсов во многом сходятся. В рамках исследования участников из девяти стран просили составить список 28 жестов для UI. И результаты оказались очень похожими.
Например, чтобы удалить иконку, необходимо перетащить ее с экрана.
Стандартный набор жестов для большинства приложений:
- Клик (или тап)
- Дабл-тап
- Перетаскивание
- Щипок
- Стягивание
- Растягивание
- Нажатие
- Нажать и зажать
- Нажать и перетащить
- Вращение экрана
О том, что эти жесты присутствуют, не всегда можно догадаться без подсказки -по крайней мере, так считают участники исследования. Отсюда вопрос: насколько жестовые интерфейсы интуитивно понятны? В чем их плюсы и минусы?
Важно ясно представлять, какой принцип действия или концепт делает жестовый UI эффективным. В противном случае пострадает юзабилити таких разработок.
Преимущества жестов
Популярность жестов объясняется двумя причинами:
- Стремительное распространение сенсорных устройств и
- Фильм «Особое мнение».
Последнее можно назвать причиной с большой натяжкой. Экран с приборной панелью из этого фильма - слишком уж футуристический пример, метафора в разговорах о сенсорных интерфейсах. Но еще очень далеки те времена, когда взаимодействие с голографическими проекциями станет частью повседневности.
Но все же гаджеты Тома Круза предвосхищают не столь далекое будущее - и демонстрируют . Здесь важны два нюанса: их удобство и, опять же, интуитивная понятность.
Жесты легко освоить
Тачскринные интерфейсы лишь тогда кажутся простыми и понятными, когда взаимодействие с цифровыми элементами приближено к физическому действию. Тактильный фидбек и манипуляции на экране должны быть соответствующими.
Опытный пользователь без лишних усилий разберется в самом непродуманном интерфейсе. Владельцы устройств зачастую пропускают инструкции к приложениям - и за несколько мгновений опытным путем осваивают управление. Однако без тонких инструкций со стороны дизайнера приложение будет меньше радовать своего пользователя. Так как же научить людей и не отвлечь от практических действий в приложении?
Один из самых эффективных методов - поэтапное раскрытие: жесты и другое управление становятся доступны по мере знакомства с интерфейсом. Для начала показываются самые важные средства управления - с помощью визуальных подсказок, либо вводного инструктажа. Первое выглядит предпочтительнее, поскольку большинство пользователей сразу переходят к делу и не тратит время на инструкции.
Могут быть уместны визуальные подсказки и анимация, которые реагируют на касание экрана. Как пример, функция «slide to unlock», которая раньше присутствовала в устройствах Apple.
Slide to unlock
Словесная подсказка; стрелка указывает направление; анимация выполняет функцию обратной связи.
Поэтапное раскрытие и инструкции - это, в сущности, полезные советы. В первом случае разработчик проявляет к пользователю чуть больше уважения, поскольку предполагается, что он (пользователь) сможет самостоятельно разобраться в устройстве программы.
Люди выполняют определенные действия при минимальном вмешательстве со стороны разработчика. Дизайн упрощает взаимодействие с приложением. Таким образом, формируется привычка. Так пользователь учится справляться с более сложными операциями в приложении.
Процесс формирования привычки включает три этапа:
- Триггер
- Действие
- Фидбек
Триггер побуждает к действию. Пример: уведомления напоминают о чем-либо. Затем следует действие: пользователь получает подсказку о том, как достичь определенной цели. Фидбек - нечто вроде вознаграждения за работу.
Процесс формирования привычки - разновидность (привлечение новых пользователей). Еще это способ удостовериться, что новые пользователи разобрались с тем, как все устроено. А также возможность превратить случайных пользователей в восторженных поклонников. Это наглядно иллюстрирует приложение Lumosity (в особенности шаг #3).
Lumosity - игровое приложение, которое тренирует память и внимание. Пользователи могут устанавливать собственные триггеры. В дальнейшем следует переход к действиям, и, собственно, играм. В основе этих игр жесты, к каждому прилагаются простые инструкции.
Благодаря этим стимулам пользователи получают удовольствие от программного продукта и быстрее запоминают, как и что нужно делать. Жестовое управление - это такой же навык, как и любой другой. За счет развлекательного элемента кривая удержания клиентов ползет вверх.
Простота освоения - очевидный преимущество жестовых интерфейсов, еще один плюс - минималистская эстетика.
Пространство на экране
Пространство на экране устройства ограничено - его нужно использовать рационально, особенно когда приложение изобилует опциями. Именно поэтому во многих интерфейсах элементы навигации спрятаны в «гамбургерах».
Меню гамбургер скрывает навигационные элементы
Жесты в качестве навигации по веб-сайту порой ухудшают юзабилити, но в приложении жесты выглядят очень даже уместно. Приложение Solar разработано в очень минималистском стиле, содержит полезные подсказки.
У пользователя больше свободы действий - он без посторонней помощи поймет, что делать. Тактильный фидбек вызывает ощущение завершенности, успешного взаимодействия. Так, в устройствах на iOS и Android вибрация подтверждает, что звук отключен.
Вовлечение происходит за счет тактильного эффекта. Разработчики Disney активно используют такой подход .
Это мало исследованная территория - целый , которые дизайнеры могут воплотить в жизнь.
Принципами юзабилити и лучшими практиками не стоит пренебрегать, но все же порой есть смысл выйти за привычные рамками - оживить дизайн, внести новые краски. Не каждая разработка становится революционной, но небольшие эксперименты никогда не помешают.
Минусы
Как ни странно, но в дизайнерском мире есть довольно большой лагерь тех, кто считает жесты отступлением от канонов юзабилити, каким бы футуристическим ни был этот способ управления.
Бессмысленная жестикуляция
Во многом причина в том, что дизайнеры зачастую игнорируют стандартные предостережения о UX и юзабилити. Дизайнеры склонны к конформизму. Они читают тысячи статей о «лучших практиках» и применяют одни и те же техники и паттерны практически для всех разновидностей приложений и интерфейсов, даже когда это противоречит здравому смыслу.
Проблемы, связанные с юзабилити, дублируются во многих разработках. Даже в популярных жестовых интерфейсах. К примеру, в системах Google и Facebook можно видеть, что иконкам отдается предпочтение перед текстовыми ссылками. Для экономии места дизайнеры используют изображения вместо текста. Однако проблема в том, что изображения люди воспринимают по-разному. Интерпретаций множество. И полагать, что люди без труда поймут предназначение конкретной иконки - это игра в орлянку. Пример - Bloom.fm.
Что означает в виде капли? Снежинка слева - предупреждение о плохой погоде? Зачем эта нота поверх «гамбургера» в правом углу?
Конечно, часть пользователей методом проб и ошибок разберется в этом беспорядке. Но суть в том, что ни одна иконка приложения не служит наглядной подсказкой. Такой интерфейс никак не назовешь интуитивно понятным.
Дизайнерам Bloom.fm не помешает устранить всю эту диссонирующую символику. А опции - что бы они ни означали - поместить в скрытое меню. В конце концов, нужно ли в музыкальном плеере что-то еще кроме основных кнопок: плей, пауза, перемотка, повтор.
Незнакомое вызывает недовольство
Все это истоки еще одной проблемы жестовых интерфейсов: их функционал и средства управления всегда скрыты. зависимы от того, насколько аудитория знакома с основами жестового управления.
Это значит, что любое отклонение от правила будет неудобным, непривычным, тем, что вне компетенции пользователя. Сложностей добавляет и то, что нет единого стандарта жестовых интерфейсов. Это как Дикий запад, только больше кликов и меньше стрельбы. Двойное нажатие в разных приложениях выполняет разные функции. Иногда предназначение жестов меняется с выходом обновления. В приложении фотохостинга Imgur дабл-тап раньше был нужен для зума, сейчас он выполняет upvote (повышает популярность поста).
Кривая обучения, в зависимости от внимания к нюансам юзабилити, может быть достаточно резкой.
С одной стороны, понять функцию жеста несложно, с другой - открывается широкое поле для исследования и реализации новых дизайнерских паттернов. То есть что сенсорные UI могут сильно отличаться. Отсюда их непредсказуемость, что, в свою очередь, отдаляет от главной цели - интуитивной понятности.
Хорошие интерфейсы выдержаны в определенных рамках, в их основе визуальная информация (анимация) и в ряде случаев словесные подсказки - чтобы в сознании пользователя закрепилась связь между жестом и функцией.
Итог
При всех недостатках, касание как способ управления интерфейсом - это технология будущего. Плавная кривая обучаемости (как минимум, для основных функций) это доказывает. Понадобится лишь сделать его чуть более функциональным. Любые эксперименты должны быть в рамках разумного, не стоит слишком уж отклоняться от привычного. В интересах дизайнера выбрать подходящее время и место, чтобы показать новые средства управления, и не стать примером в чьей-то статье об ошибках юзабилити.
Система будет адаптироваться под пользователя и поможет пользоваться смартфоном реже.
В закладки
Google показала бета-версию операционной системы Android P, которая должна выйти осенью 2018 года. Презентация прошла во время конференции Google I/O, также представители компании рассказали о системе изданию The Verge.
Контроль за использованием смартфона
В Android P появится панель с информацией об использовании устройства - в ней будет показано, сколько времени в день пользователь тратит на различные приложения, как много оповещений он получает и так далее. В Google объяснили, что это должно помочь избавиться от привычки постоянно держать телефон в руках, опасаясь что-то пропустить.
Android позволит устанавливать лимит на использование определённых приложений - после того, как он будет достигнут, значок сервиса станет чёрно-белым, а при попытке запустить сервис появится оповещение о том, что он на «паузе». Чтобы вновь им воспользоваться, нужно будет снять ограничение в панели с информацией об использовании - кнопка «снять с паузы» может появиться позднее, но пока Google хочет узнать, как пользователи отнесутся к новому сервису.
Кроме того, пользователь сможет установить время, предназначенное для сна, и в этот период весь интерфейс системы станет чёрно-белым, а телефон автоматически перейдёт в режим «не беспокоить».
Если оповещения от определённого приложения часто отклоняются, то система предложит на время отключить их. Также появится функция Shush - если телефон лежит на столе экраном вверх, а пользователь перевернёт его экраном вниз, то автоматически включится режим «не беспокоить».
Управление жестами
В Android P появится управление жестами, похожее на iPhone X. На главном экране вместо трёх кнопок останется только одна. Она будет использоваться для управления. Кнопка «назад» появится только в меню и приложениях.
При коротком свайпе вверх по кнопке «домой» появится список открытых приложений. По нему можно передвигаться свайпами вправо и влево. При длинном свайпе вверх откроется меню с приложениями.
Общий список жестов с кнопкой «домой» на Android P:
- Нажатие - возвращение на главный экран.
- Долгое нажатие - запуск помощника Google Assistant.
- Короткий свайп вверх - переход к последним открытым приложениям. В них можно выделять текст, не заходя в само приложение. В этом режиме появляется список предлагаемых к запуску сервисов.
- Длинный свайп вверх - запуск списка приложенией.
- Свайп вправо - список недавно использованных приложений, раньше он запускался по отдельной кнопке.
Кроме того, Android будет показывать кнопки поворота экрана, когда это уместно (например, при запуске видео на полный экран, когда ориентация экрана зафиксирована вертикально). При съёмке скриншотов можно будет рисовать прямо на них перед сохранением изображения.
Адаптация под пользователя
В Android P будут активнее использоваться системы машинного обучения, пообещали в Google. Одна из таких систем будет следить за использованием аккумулятора - например, адаптировать яркость и выключать приложения, которые вряд ли будут использоваться в ближайшее время. Для подстройки этих систем Google будет использовать данные о том, как пользователь регулирует яркость и пользуется приложениями.
В списке приложений появятся «Действия» - функции, которые можно сразу запустить в разных приложениях. Google показывает их на основе данных о том, что пользователь делает чаще всего в течение дня и какие из сервисов подходят ему прямо сейчас.
«Действия» - можно позвонить подруге или начать тренировку.
Также в Android P появятся Slices - предложения функций в нужных приложениях. Например, когда пользователь ищет приложение Lyft, он сможет сразу вызвать машину по своему адресу, а не переходить в приложение и делать это вручную.
В Google заметили, что разработчикам придётся дорабатывать свои приложения для «Действий» и Slices - это нужно для того, чтобы система не просто общалась с сервисом по API, а «понимала», какие действия можно выполнить. Подробности нужных доработок пока не опубликованы.
Кроме того, Google анонсировала фреймворк MLKit, который позволит использовать машинное обучение в сервисы, а затем использовать его как напрямую на смартфонах Android и iOS, так и при действиях в облаке.
Где доступна бета-версия Android P
В Google пообещали, что Android P будет появляться на устройствах разных производителей намного быстрее, чем это происходило с предыдущими версиями. Для этого используется система Treble, которая в Android Oreo и позволяет при обновлениях менять только нужные части системы, не затрагивая её целиком.
The Verge отмечает, что даже Treble вряд ли позволит обновлять Android-устройства так же быстро, как iPhone, но может ускорить этот процесс. Однако в компании Essental сказали, что смогли выпустить бета-версию для своего смартфона на Oreo всего через неделю после того, как получили тестовую сборку P.
Тестовая сборка очередной версии Android впервые будет опубликована не только для устройств от самой Google. Она будет выпущена для следующих смартфонов:
- Google Pixel
- Google Pixel 2
- Sony Xperia XZ2
- Xiaomi Mi Mix 2S
- Nokia 7 Plus
- Oppo R15 Pro
- Vivo X21
- OnePlus 6
- Essential PH-1
