Наука о касании
Проектировщик мобильных интерфейсов Стивен Хубер о том, как изменился образ взаимодействия со смартфонами и каковы новые стандарты разработки.
С 2013 года очень многие читали и ссылались на мою колонку «Как пользователи на самом деле держат мобильные устройства». На мой взгляд, даже слишком часто. Ведь с тех пор, как была написана та статья, я продолжал свои исследования, внедрял результаты поиска в реальные продукты, писал дополнительные статьи и не раз выступал на эту тему.
Прошли годы, и я узнал ещё больше о том, как люди держат и как взаимодействуют со своими телефонами и планшетами. Поверьте, там есть много неожиданного. В этом и заключается проблема моих старых статей: я делал предположения, которые были основаны на моих наблюдениях за использованием настольного компьютера — на стандартах более старых видов взаимодействия, на единичных случаях или искаженных данных.
Однако благодаря более поздним исследованиям и тщательному анализу теперь я готов опровергнуть ошибочные представления и открыть правду. Читатели часто используют мои устаревшие данные вместе с другой уже неактуальной информацией и на основании всего этого делают неверные выводы.
Я надеюсь, что смогу положить этому конец с помощью исправленного и дополненного обзора всего, что я знаю о взаимодействии людей с сенсорными устройствами. А также расскажу о том, как можно использовать эту информацию при создании хороших цифровых продуктов.
Доверяйте данным, а не своей интуиции
Почти наверняка у вас есть смартфон, и вы пользуетесь им для поиска в интернете, также у вас есть несколько любимых мобильных приложений, и вам кажется, что вы понимаете, как именно люди пользуются своими телефонами. Но, скорее всего, вы ошибаетесь.
У большинства дизайнеров есть всего один телефон, и, как правило, это iPhone. И это несмотря на то, что большая часть мира использует смартфоны на базе Android. Вдобавок, мы не слишком преуспели в самоанализе, а в таких областях, как когнитивная психология и физиология, вообще полно слухов и разногласий.
Променяв телефоны, в которых добраться до нужного пункта меню можно было по принципу «прокрутить и выбрать» (scroll-and-select), на смартфоны, в которых достаточно только касания, мы столкнулись с новыми проблемами взаимодействия, требующими новых решений.
Размах и глубина нашего понимания того, как работают сенсорные экраны, по-прежнему невелики. Слишком часто мы принимаем проектные решения, основываясь на байках, мнениях, необъективных предположениях, непроверенной информации и слухах.
Сенсорная технология
Прежде чем вернуться к моим наблюдениям, я хотел бы коротко обсудить технологию. Я приведу несколько базовых утверждений о том, как вообще работает сенсорный экран, и немного расскажу об истории — это поможет понять человеческое поведение, которое мы сегодня наблюдаем.
Световое перо
Сначала были ручки. Ручки, или стилусы в качестве координатно-указательного устройства для компьютера появились раньше, чем мыши — и на самом деле никуда не пропадали. Самые ранние версии стилуса назывались световым пером. Первое прикладное приложение, в котором использовался стилус, называлось Sage — это гигантская сетевая полуавтоматическая система наземной среды для ВВС США.
Оружие для охоты на уток в Nintendo задействовало тот же самый принцип: ручка была не индикатором, а считывающим устройством, которое было настолько тесно взаимосвязано и синхронизировано с дисплеем, что могло понимать, на какую часть экрана оно направлено.
В конце 60-х годов световое перо для настольных рабочих станций выглядело очень похожим на то, чем мы пользуемся сегодня. Оно и сейчас позволяет выполнять все знакомые виды взаимодействия, включая наведение, выбор, копирование, вставку и перемещение.
В наше время цифровые ручки используются всё чаще, но в них заложена уже совсем другая технология. Некоторые из таких устройств даже могут выполнять дополнительные действия — например, определять силу давления и угол наклона.
Сетка инфракрасных лучей
Одни из первых сенсорных экранов использовали сетки инфракрасных лучей, чтобы определить расположение пальца пользователя. В 80-х годах эти сенсорные экраны применялись в банковских автоматах и других устройствах общественного пользования, например, в интерактивных терминалах в музеях.
Как можно себе представить, инфракрасные лучи могли засечь в зоне экрана всё что угодно, поэтому в таких устройствах были продуманы приемы, максимально исключающие человеческий фактор. Например, к автомату была приделана широкая рамка, за счёт чего экран находился в углублении.
Инфракрасные лучи распространяются широко, поэтому они определяют весь палец пользователя. И хотя эти экраны могли засечь положение пальцев достаточно точно, тем не менее большинство из них решали, что пользователь выбрал слишком большую область.
Таким образом весь экран представлял собой простую сетку зон, доступных для выбора. Из-за этого кнопки приходилось делать большими. Но учитывая их применение, эти системы в целом работали достаточно надёжно.
Резистивный сенсорный дисплей
Сенсорный ввод получил широкое распространение, когда на рынке появились резистивные сенсорные экраны. Тогда люди начали воспринимать касание как естественную форму взаимодействия. Термин «резистивный» означает, что экран физически сопротивляется нажатию.
Поверхность экрана сделана из гибкого пластика. Когда пользователь оказывает давление с помощью ручки или пальца, сетка двужильных проводов касается другой проводящей сетки, которая расположена под первой. Такие экраны могут быть очень чувствительными и высокоточными.
Но, как и в большинстве других случаев, ради чувствительности приходилось жертвовать прочностью. Экран можно было легко поцарапать, протереть или даже порвать на нём верхний слой пластика. Высокочувствительные системы более хрупкие, а прочные — более сложны в использовании.
Для них даже мог потребоваться пассивный стилус, чтобы достаточно сильно нажимать на экран. До недавнего времени это был один из лучших сенсорных экранов для бюджетных устройств. Но спрос на более чувствительный сенсорный ввод и появление качественных материалов отправили этот тип экранов в прошлое.
Емкостный сенсорный дисплей
Теперь, когда кто-то говорит о сенсорных экранах, он имеет в виду ёмкостные экраны. Это такой вид сенсора, который можно встретить на всех мобильных телефонах, планшетах, в системах развлечений, киосках и автомобилях.
Емкостный сенсорный дисплей использует электрические свойства тела. Вот почему он не работает с любым старым стилусом, при контакте в перчатках или когда у пользователя слишком сухая кожа. Палец выступает в роли конденсатора, чье присутствие на экране измеряется узелками на сетке между дисплеем и защитной пластиковой или стеклянной поверхностью.
И несмотря на то, что детекторы с высоким разрешением существуют, они используются только для специальных устройств вроде сканера отпечатков пальцев. Большинство сенсорных экранов задействует очень грубые сетки.
Это не идеальная система. Препятствия для дальнейшего роста точности сенсоров варьируются от сложности математических расчетов и электрических помех до поиска баланса между толщиной устройства, его весом, оптической прозрачностью и стоимостью.
Если точность слишком высокая, экран может чувствовать самое слабое давление пальцев или совсем лёгкое прикосновение стилуса. Однако внешние электрические помехи перегружают устройство, из-за чего в реальном мире им становится просто невозможно пользоваться.
Несколько лет назад Motorola провела исследования на нескольких устройствах, снабдив их возможностью автоматически и очень точно контролировать давление, угол и скорость контакта. Можете сами попробовать начертить параллельные диагональные линии в программе для рисования с помощью линейки и стилуса. Линии, которые вам удастся нарисовать, скорее всего, не будут идеально ровными.
И если неравномерное распределение линий на рисунке выше — полностью моя вина (ведь я не робот), то другие проблемы демонстрируют ограничения сенсорных экранов. Разрывы линий — это сбой в точности оценки касания. Внезапное изменение направления прямой линии или пробелы по краям свидетельствуют о недостатках конструкции экранов и электрических помехах. Волны возникают там, где сбиваются расчеты между линиями сетки.
Размер, сила давления и поле контакта
Поле контакта — это область, в которой пальцы пользователя соприкасаются с ёмкостным сенсорным экраном. На рисунке ниже видно, что эта область может быть очень разной в зависимости от того, как пользователь касается экрана (например, кончиком или подушечкой пальца, сильно или слабо).
Я не буду рассказывать обо всём, что я узнал в результате своих исследований размера поля контакта для различных типов пользователей, потому что эти данные отличаются не так, как ожидалось. Да они и не имеют большого значения. Ёмкостные экраны передают только одну точку контакта в центре поля. Совсем не важно, насколько это поле большое, и нет никакой необходимости определять давление, размер или что-нибудь ещё.
В то время как множество устройств поддерживают мультитач, а некоторые даже могут определять силу нажатия — эти способности не поддерживаются одинаково везде. Поэтому если вы не создаёте какой-нибудь инструмент для рисования или игру, притворитесь (хотя бы на время), что сенсорные экраны не определяют силу нажатия.
И хотя это противоречит интуиции, очень важно признать, что размер пальца пользователя совершенно не имеет никакого отношения к точности касаний и контактному восприятию. Поскольку старые стандартны сенсорных экранов ориентировались на размер пальца, они более не актуальны.
Во времена написания ISO-стандартов системы, основанные на инфракрасных сетях, были распространены больше, чем сенсорные технологии. Поэтому эти правила гласят, что цели касания должны иметь размеры 22×22 миллиметра, чтобы в них поместились самые большие пальцы. Серьезных исследований по точности указания с тех пор не проводилось, а принятые тогда стандарты долгое время неплохо справлялись.
Однако если вы решаете соблюдать эти стандарты, то убедитесь, что понимаете основу, которая стоит за конкретными рекомендациями. Сенсорные технологии развивались, а каноны не всегда за ними успевали. Исследования, на которых построены стандарты, могут быть неправильными, устаревшими или применяться только к конкретной ситуации или технологии.
Устаревшие стандарты
ISO — это не единственная группа, продвигающая устаревшие стандарты. Каждый разработчик мобильных операционных систем и некоторые изготовители комплектного оборудования предлагают собственные параметры целей касания.
Nokia позаимствовала старую версию моих стандартов и никогда их не обновляла. Microsoft сделала кое-что получше, когда предложила оставлять пространство между целями касания, однако слишком маленький размер этих зон до сих пор доставляет неудобство.
Google и Apple пользуются другими размерами, которые основаны скорее на удобстве для платформы, чем на человеческом факторе. Любой стандарт, в котором за единицу измерения приняты пиксели, а не физические размеры, — бесполезен. Потому что даже пиксели, не зависящие от конкретных устройств, могут отличаться в зависимости от экрана. И уж точно они никак не соотносятся с принятыми у людей физическими величинами.
Но дело не только в том, что размер целей касания устарел — устарели и стандарты, которые относятся к мобильным устройствам. Обычно я ссылаюсь на стандарты «Руководства по обеспечению доступности контента» (WCAG), разработанного Консорциумом всемирной паутины (W3C), потому что они просты, понятны и универсальны.
Однако я не всегда полностью уверен в том, что поступаю правильно. Потому что эти стандарты не применяются для мобильных платформ. W3C более или менее игнорирует мобильные устройства, особенно когда речь идет о стандартах доступности.
Участники консорциума полагают, что все компьютеры — это настольные персональные устройства с клавиатурой и мышью, которые находятся недалеко от глаз пользователя. Их параметры определяют размер пикселей на основе старого стандарта 72/96 ppi (пикселей на дюйм), но никак не учитывают угол обзора, блики, расстояние или другие обстоятельства, с которыми сталкиваются пользователи мобильных устройств.
Теперь наиболее распространенное устройство — это вовсе не настольный компьютер с клавиатурой и мышью, а смартфон или планшет с сенсорным экраном. А это значит, что и технологии, и контекст использования, и потребности пользователей очень сильно отличаются от того, что было раньше.
Определяем новые стандарты
Не люблю, когда наши алгоритмы, методы решения задач и данные о юзабилити путают с мнениями и интуицией. Мы не артисты — мы UX-исследователи и дизайнеры. Как минимум, инженеры и ученые.
Пять или шесть лет назад я начал замечать данные, которые никуда не укладывались, но я никак не мог понять, что не так. Поэтому я начал исследовать первичные действия пользователей самостоятельно. Вскоре я стал наблюдать за людьми, пользующимися своими телефонами на улицах, автобусных остановках, в поездах, аэропортах, кофейнях. В общей сложности я наблюдал за более чем 1 300 людьми в разных странах мира.
Также я провел мета-анализ с помощью своего аккаунта в цифровой библиотеке Ассоциации вычислительной техники, где прочитал десятки отчетов по применению касаний и движений, упорядочил наиболее актуальные исследования и соотнёс их с собственными.
Все отчеты так или иначе согласовывались с моими находками, так что я понял, что кое-что нащупал. В одном из моих любимых исследований содержались данные о свыше 120 миллионах касаний, так что оно явно статистически достоверное.
Сотрудничая с Гильдией по электронному обучению, я зафиксировал ещё 651 случай наблюдений в школах, офисах и домах, что прибавило мне больше данных по планшетам, типам пользователей и лишь подтвердило имевшиеся у меня данные по использованию телефонов. Также я перехватывал удаленные тесты, чтобы получить информацию о том, как люди пользуются сенсорными технологиями в зависимости от типов ввода и стоящих перед ними задач.
Вся информация в этой статье основана на огромном исследовании. Мы уже многое выяснили о том, как создавать мобильные приложения для людей, для их разноплановых устройств и с учетом различных способов использования этих устройств. Теперь нам нужно задокументировать эти новые стандарты вместо того, чтобы полагаться на устаревшие образцы.
Наука о касании
Большинство дизайнеров, которые размышляют о том, как люди пользуются своими телефонами, похоже, всё ещё полагают, что все мобильные устройства — это маленькие iPhone, которые удерживаются одной рукой, а все действия на них совершаются большим пальцем.
И они всё ещё верят схемам, которые показывают, куда может дотянуться большой палец, верят, что все тапы должны располагаться в нижней части экрана и что никто не может дотянуться до верхнего левого угла экрана.
Однако когда я провожу исследования в естественных условиях, я вижу, что люди постоянно пользуются кнопкой «Назад». На самом деле это вообще наиболее часто используемая кнопка на экране, несмотря на то, что она расположена в верхнем правом углу. Так что давайте начнем с основ. Что мы знаем о человеческом пальце?
Кости большого пальца прикреплены прямо к кисти. Также суставы большого пальца, жилы и мышцы взаимодействуют с другими пальцами — особенно с указательным. Если остальные пальцы удерживают трубку телефона, то движения большого пальца ограничены определенной областью. Но если передвигать устройство пальцами, пользователь сможет изменить область, куда дотягивается большой палец.
Получается, что диапазон движения большого пальца схож с жестом смахивания — он сгибается и распрямляется, —, но не в той точке, в которой он соединяется с остальными пальцами, а в пястно-запястном суставе, который расположен намного ниже, ближе к запястью.
Другие суставы большого пальца позволяют ему сгибаться в сторону экрана, но в движении смахивания не участвуют. Возможность сгибать большой палец имеет важное значение, так как палец может двигаться в трехмерном пространстве, в то время как все экраны пока плоские. Соответственно, на карте движения большого пальца по экрану телефона отражается только часть всех возможностей движения большого пальца.
Базовые наблюдения по касанию
Большой палец — самый сильный из всей кисти, так что когда пользователь нажимает им по экрану, это значит что устройство удерживается теми пальцами, которые слабее. Люди это знают, поэтому там, где пользователю угрожает риск уронить или потерять телефон, он будет сжимать его крепче всей ладонью и подстраховывать большим пальцем.
Держат ли люди свои телефоны двумя руками? Нет. Люди по-разному обращаются со своими мобильными, часто меняют их положение в руке. Это не должно удивлять, потому что из исследований различных контекстов использования устройств мы поняли, что все люди разные. И мы должны считаться с этим разнообразием.
Но кое-что меня всё-таки сильно удивило. Мне даже пришлось пересмотреть свои методы сбора данных уже после первых десяти наблюдений.
Со временем я получил убедительные данные об использовании различных методов удержания и касания мобильных телефонов. И они вновь подтверждались существующими исследованиями. И вот что я выяснил:
- Люди держат свои телефоны по-разному. Это зависит от типа устройства, потребностей пользователя и контекста использования телефона.
- Пользователи меняют способы удержания телефона неосознанно. Это также свидетельствует о том, что люди не могут прогнозировать свое поведение.
- 75% пользователей касаются экрана только большим пальцем.
- Менее 50% пользователей держат телефон только одной рукой.
- 36% пользователей удерживают телефон обеими руками, чтобы и лучше доставать до нужной области экрана, и более надёжно фиксировать устройство.
- 10% пользователей держат свои телефоны в одной руке и тапают по экрану пальцем другой руки.
Но это всё только основы. Есть и другие способы удержания мобильных телефонов — например, с помощью дополнительных устройств. Возможно, наиболее удивительное и важное наблюдение, которое я сделал, касается того, что, пользуясь мобильным устройством, пользователи просматривают экран вовсе не с верхнего левого угла в направлении к правому нижнему, как это происходит на настольных компьютерах.
Кроме того, пользователи не касаются экранов по краям (то есть справа — снизу — слева — сверху) из-за ограничений движения большого пальца. Вместо этого они предпочитают касаться центра экрана.
Люди лучше всего воспринимают контент, когда он расположен в центре экрана, и часто прокручивают его, чтобы переместить нужный отрывок ближе к середине, насколько это только возможно. Также, поскольку пользователи обычно без труда жмут в центр, цели касания могут быть тут гораздо меньше — до 7 миллиметров, в то время как размер целей касания, расположенных по углам, должен составлять приблизительно 12 миллиметров.
Несмотря на то, что я хорошо знал об этом благодаря наблюдениям и анализу данных, мне потребовалось какое-то время для того, чтобы понять и принять эти факты. Люди никогда не нажимают точно туда, куда хотят. В этом процессе всегда есть место неточности.
Я провел много экспериментов, но ни один пользователь не попал ровно в центр иконки меню, наоборот — множество тапов были совсем далеко от цели. Некоторые пользователи вообще промахнулись. И эти промахи — ключевой момент.
Размер целей касания не может быть идеальным, промахи будут случаться постоянно, так что просто определите допустимый процент и двигайтесь дальше. Все предлагаемые мной размеры целей касания содержат только 95% всех наблюдаемых тапов.
Также следует избегать ситуаций, когда промах создаст проблему, так что примите тот факт, что провалы, ошибки и неточности существуют. Учитывайте возможность ошибки и размещайте опасные или нежелательные пункты подальше от остальных, таким образом уменьшая или исключая последствия случайного нажатия.
Информационный дизайн с адаптацией к сенсорным экранам
Со временем я открыл и доказал второстепенные эффекты такого базового человеческого поведения на сенсорных экранах мобильных телефонов. То, что пользователь смотрит в центр экрана, — главная причина, по которой мы так часто пользуемся списками и сетками. Они хорошо срабатывают, люди прекрасно концентрируются на них и отлично взаимодействуют с ними при нажатии или прокручивании.
Так что всегда помещайте главный контент в центр экрана. Подумайте о наиболее часто используемых вами приложениях. Когда вы открываете их, то видите список контента — например, текстовые сообщения, электронные письма, истории, видеоролики, фотографии или статьи — и выбираете то, что хотите посмотреть или с чем хотите дальше повзаимодействовать.
Кнопки второстепенных действий стоит размещать вдоль верхнего или нижнего края экрана. Вкладки, расположенные по верхнему или нижнему краям области контента, позволяют пользователям переключать вид или менять секции. Кнопки действий дают возможность создавать контент или активировать по нему поиск. Прячьте функции третьего порядка за кнопками меню, которые, как правило, располагаются в одном из углов.
Возможно, вы слышали, что меню «гамбургер» неправильное и что его нужно убирать из дизайна. Но это уже слишком. Как и в случае с большинством проектировочных шаблонов, которые нам рекомендовали избегать, некоторые дизайнеры высказывают такую точку зрения только потому, что иконка меню иногда используется не по назначению.
Если вам нужно, чтобы пользователи передвигались по подразделам вашего сайта, но при этом вы прячете навигацию в меню — это неудачное решение. В этом случае использование вкладок для того, чтобы перейти в подраздел, будет более эффективным. Хотя и это решение не идеально, потому что вкладки — не первичный, а вторичный контент. В идеале стоит разместить ключевой контент в центре либо вообще сконструировать приложение так, чтобы пользователю не нужно было копаться в категориях.
Я уже пару лет пользуюсь этими стандартами для создания мобильных приложений и сайтов. Также протестировал несколько продуктов, которые пользуются такой структурой, на разных типах пользователей. Те опции и функции, которые я разместил в меню, отлично себя показали — 100% участников тестирования на удобство использования нашли нужную опцию в меню в течение нескольких секунд (даже те, у кого совсем не было опыта взаимодействия с мобильными устройствами).
© vc.ru
