Интерфейс для сенсорного экрана: что не так с мобильными гайдами

Интерфейс для сенсорного экрана киоска или кассы нельзя собирать по мобильным гайдлайнам. 44 pt у Apple, 48 dp у Google и 24 CSS-пикселя в WCAG – это минимумы для телефона в руке, а исследования, где люди стоят перед закреплённым экраном, сходятся на кнопках около 20 мм. При этом CSS-пиксель на кассовом мониторе может быть и 0,17 мм, и 0,30 мм, поэтому одна и та же «кнопка 44 px» на разных терминалах получается от 7,5 до 13 мм. Ниже разбор, откуда взялись популярные цифры, что про них говорят первоисточники и какие технические приёмы в браузере и Electron нужны стационарному экрану.

Чем стационарный сенсорный экран отличается от телефона

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

• Рука на весу. Телефон и палец двигаются вместе, у киоска опоры нет. Исследование Chourasia и соавторов 2013 года показало, что стоя люди чаще промахиваются и сильнее давят на экран, чем сидя, и разница заметна именно на кнопках меньше 20 мм.
• Угол обзора и параллакс. На большом закреплённом экране человек смотрит на нижние и боковые участки под углом. В полевом эксперименте Leahy (Virginia Tech, 1990) в продуктовом магазине люди систематически попадали ниже цели, и чем ниже цель на экране, тем сильнее; к краям касания тоже смещались в сторону края.
• Нет hover. Подсказки и раскрытие меню по наведению на сенсорном экране не существуют. Обратная связь должна приходить в момент касания.
• Работа на скорость. Кассир в час пик нажимает десятки кнопок подряд, не глядя на каждую. Ошибка здесь стоит денег: неверная позиция в заказе, повторное списание, очередь.
• Влажные пальцы и перчатки. Проекционно-ёмкостный экран реагирует на проводящее касание. Капли воды могут давать ложные касания, а в перчатках экран срабатывает не всегда, лучше всего с проводящими (это описано, например, в руководстве Juniper Systems по ёмкостным экранам).

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

Какой размер кнопок нужен для сенсорного экрана: что говорят гайдлайны

Сначала сведём официальные рекомендации. Важно смотреть не только на число, но и на единицы: точки, dp, эффективные пиксели и CSS-пиксели – не миллиметры.

Разброс от 7,5 до 9 мм у платформ объясним: все они пишут для экрана, который держат в руке. WCAG вообще не про удобство, а про минимальный порог для людей с тремором и другими нарушениями моторики; в пояснении к 2.5.8 прямо сказано, что для важных элементов лучше ориентироваться на более строгий 2.5.5.

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

Откуда взялись «16–20 мм от MIT Touch Lab»

Эта цифра кочует по статьям о touch target size с 2012 года. Smashing Magazine и NN/g пишут, что исследование MIT Touch Lab показало ширину подушечки указательного пальца взрослого 16–20 мм, и выводят из неё размер кнопки. Обе статьи ссылаются на одну работу: Dandekar, Raju, Srinivasan, «3-D finite-element models of human and monkey fingertips to investigate the mechanics of tactile sense», Journal of Biomechanical Engineering, 2003.

Судя по названию и журналу, это работа о конечно-элементных моделях кончика пальца человека и обезьяны для изучения механики осязания. Сенсорных экранов и кнопок в ней нет. Сам PDF на сайте лаборатории мне открыть не удалось, поэтому проверить, в каком виде там приведены 16–20 мм, я не смог. Но в любом случае это анатомический размер пальца, а не результат эксперимента с целями касания.

Ширина пальца – плохая основа для размера кнопки. Holz и Baudisch (CHI 2010) показали, что около двух третей неточности касания, которую привыкли списывать на «толстый палец», объясняется систематическими смещениями: каждый человек и каждая поза пальца дают своё стабильное отклонение между тем, куда человек целился, и точкой, которую регистрирует экран. Палец не «накрывает» цель, он попадает в неё со сдвигом. Размер нужен, чтобы этот сдвиг укладывался в кнопку, и определять его надо экспериментом, а не линейкой.

Что измеряли в исследованиях, на которые опираются гайдлайны

Самая цитируемая работа – Parhi, Karlson и Bederson, MobileHCI 2006. Её называет NN/g как основу правила «1 см», на неё же ссылается пояснение W3C к критерию 2.5.8. Условия: одной рукой, большим пальцем, на маленьком сенсорном устройстве. Для одиночных нажатий ошибок не становилось заметно меньше при целях от 9,6 мм, для серии нажатий подряд – от 7,7 мм; итоговая рекомендация авторов – 9,2 мм и 9,6 мм соответственно.

Это хорошая работа, но про телефон. Для стационарного экрана есть свои данные.

Размер кнопок для киоска и POS-терминала: исследования стоя

Colle и Hiszem (Ergonomics, 2004) поставили 20 участников перед киоском с ёмкостным экраном и дали набирать 1, 4 или 10 цифр на экранной цифровой клавиатуре. Клавиши были 10, 15, 20 и 25 мм, промежутки 1 и 3 мм. С уменьшением клавиш росли время ввода и число ошибок, но между 20 и 25 мм значимой разницы не нашлось. Участники предпочли 20 мм всем меньшим размерам и не различали 20 и 25 мм. Промежуток в 1 или 3 мм на результат не повлиял.

Chourasia, Wiegmann, Chen, Irwin и Sesto (Human Factors, 2013) проверили то же сидя и стоя на 15 участниках с нарушениями моторики и 15 без них. Кнопки от 10 до 30 мм с шагом 5 мм, промежутки 3 и 5 мм. Стоя участники чаще промахивались и дольше вводили цифры, но только на кнопках меньше 20 мм. На больших кнопках поза почти не влияла. Ещё одна находка: стоя люди давили на экран сильнее.

В родственной работе той же группы (Chen и соавторы, Applied Ergonomics, 2013; 38 участников с нарушениями моторики и 15 без) размер промежутка между кнопками тоже не повлиял на результат.

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

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

Сколько миллиметров в CSS-пикселе на вашем терминале

Здесь начинается то, чего обычно нет в статьях про touch target size. WCAG определяет CSS-пиксель как угловой размер – около 0,0213 градуса – и опирается на эталонный пиксель из спецификации CSS: 1/96 дюйма, около 0,26 мм, при взгляде с вытянутой руки. Браузер и операционная система не знают, на каком расстоянии стоит человек, и не знают реальных размеров панели. На практике CSS-пиксель на настольном мониторе – это физический пиксель, умноженный на масштаб в настройках системы.

Поэтому «кнопка 44 px» на кассе – не размер. Я посчитал физический размер CSS-пикселя для нескольких типовых диагоналей и разрешений POS-мониторов при масштабе системы 100% (devicePixelRatio = 1): плотность – диагональ в пикселях, делённая на диагональ в дюймах, размер пикселя – 25,4 мм, делённые на плотность.

Мой расчёт, без учёта рамок и неквадратных пикселей. При масштабе системы 125% все размеры в миллиметрах умножаются на 1,25: 44 px на 15,6″ Full HD становятся 9,9 мм.

Практические следствия:

• Задавайте размер кнопок через токен, который считается от реального экрана. Если парк терминалов однородный, достаточно одного значения, проверенного линейкой на живом устройстве. Если разнородный, размер базового шага нужно привязывать к модели монитора или масштабу системы.
• Одна и та же сборка на новом мониторе может стать хуже. Замена 15-дюймового экрана 1024×768 на 15,6-дюймовый Full HD уменьшает каждую кнопку в 1,65 раза без единой строки кода.
• Мобильный минимум 44–48 px на Full HD-кассе – это 8–9 мм, то есть вдвое меньше ориентира из исследований стоя.

Единицы mm и cm в CSS не решают задачу: в спецификации они жёстко связаны с пикселем (1 дюйм = 96 px), поэтому 20mm в стилях – это те же 75,6 CSS px, а не настоящие 20 миллиметров на экране.

Технические приёмы: что включить в браузере и Electron

Задержка 300 мс и двойной тап

Мобильные браузеры раньше ждали 300–350 мс после касания, чтобы понять, не будет ли второго тапа для масштабирования. По данным команды Chrome, с Chrome 32 (2014) задержка убрана на страницах с <meta name="viewport" content="width=device-width">, позже то же сделали Firefox, Edge и Safari в iOS 9.3. Свойство touch-action: manipulation даёт тот же эффект на отдельных элементах: по MDN оно разрешает прокрутку и масштабирование щипком, но отключает нестандартные жесты вроде двойного тапа, и является сокращением для pan-x pan-y pinch-zoom.

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

touch-action: none – только там, где вы сами обрабатываете жест

touch-action: none полностью отключает прокрутку и масштабирование браузером на элементе. Это нужно для поверхностей, где жесты обрабатывает ваш код: подпись, слайдер, перетаскивание позиций. MDN предупреждает, что такое значение может лишить людей с плохим зрением возможности увеличить страницу, и советует более узкие значения, например pan-y, если нужно перехватить только горизонтальный жест. Свойство надо ставить заранее: изменение во время жеста на этот жест не действует.

Pointer Events вместо раздельных mouse и touch

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

Отдельно стоит помнить про pointercancel. По MDN браузер присылает его, когда решает, что событий от указателя больше не будет: начал прокрутку или масштабирование, сработала защита от касания ладонью, повернулся экран, касаний стало слишком много. После него приходят pointerout и pointerleave, но не pointerup. Если кнопка «нажимается» на pointerdown, а «отпускается» только по pointerup, она может навсегда застрять в нажатом состоянии. Сбрасывайте состояние и на pointercancel.

Не определяйте сенсорный экран по pointer: coarse

Медиа-запросы pointer и hover описывают только основное устройство ввода, выбранное браузером. Patrick Lauke в разборе на CSS-Tricks показывает: на ноутбуке или моноблоке с сенсорным экраном основным считается трекпад или мышь, и pointer: coarse будет ложным, хотя человек тычет пальцем в экран. Надёжнее any-pointer: coarse – он истинен, если среди устройств ввода есть хотя бы одно неточное. А для терминала, у которого сенсорный экран – единственный штатный способ ввода, проще вообще не адаптироваться по медиа-запросам и проектировать под палец всегда.

Защита от повторной отправки

Рука на весу и сильное нажатие стоя (то самое из исследования Chourasia) приводят к дребезгу: два касания вместо одного. Двойной тап на кнопке «Оплатить» или «Добавить» – это не масштабирование, а второй заказ. Минимальный набор:

• кнопка блокируется сразу после первого срабатывания и снимает блокировку по ответу сервера, а не по таймеру;
• запрос на оплату или пробитие несёт ключ идемпотентности, чтобы сервер распознал повтор, даже если клиент отправил его дважды;
• добавление одной и той же позиции два раза подряд за доли секунды – повод для явной обратной связи («×2»), а не для молчаливого дубля.

Обратная связь без hover

Раз наведения нет, состояние «меня нажали» должно появиться в момент касания и быть видно из-под пальца: изменение фона всей кнопки, а не тонкая рамка, которую палец закрывает. Действие лучше выполнять по отпусканию, чтобы человек мог сдвинуть палец с кнопки и передумать. Исключение – клавиши ввода цифр, где важна скорость и ошибку легко исправить.

Раскладка экрана: куда ставить важное

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

Ещё три правила, которые следуют из разобранного выше:

• Опасное – подальше от частого. «Отменить заказ» не должна стоять вплотную к «Добавить». Промежуток в 1–3 мм, судя по экспериментам, не помогает; помогает расстояние в размер кнопки или другой край экрана.
• Нестандартные жесты – только с дублирующей кнопкой. Свайп для удаления, долгое нажатие, жест двумя пальцами не обнаруживаются без обучения. На кассе каждая функция должна быть доступна обычным касанием.
• Мелкие элементы расширяйте невидимой областью касания. Визуально иконка может быть небольшой, но зона нажатия вокруг неё должна соответствовать вашему базовому размеру. Material и Android описывают ровно этот приём: иконка 24 dp, область касания 48 dp.

Как это выглядит в реальном терминале

Я проектировал в Figma и разрабатывал терминал бариста на Electron, который работает в 210 кофейнях сети, а для него – отдельную UI-библиотеку с дизайн-токенами на CSS-переменных и вариантами компонентов. В таком сочетании расчёт выше становится практичным: если базовый размер кнопок вынесен в токен, то при появлении другой модели монитора правится одно значение, а не сотня компонентов.

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

Коротко

• Мобильные гайдлайны (44 pt, 48 dp, 7,5 мм, WCAG 24 и 44 CSS px) – минимумы для телефона в руке. Для экрана на стойке исследования стоя указывают на клавиши около 20 мм.
• «16–20 мм по данным MIT» – ширина пальца из работы о моделях кончика пальца, а не результат эксперимента с кнопками. Неточность касания в основном даёт систематическое смещение, а не размер пальца.
• CSS-пиксель на кассовом мониторе – от 0,17 до 0,30 мм. Пересчитайте свои кнопки в миллиметры для каждого монитора в парке и задайте базовый размер одним токеном.
• В браузере и Electron: touch-action: manipulation для кнопок, touch-action: none только на поверхностях со своими жестами, Pointer Events с обработкой pointercancel, any-pointer вместо pointer.
• Блокируйте кнопку до ответа сервера и передавайте ключ идемпотентности: двойное касание стоя – обычное дело.
• Частые и опасные действия держите ближе к центру и подальше друг от друга: увеличение промежутка на пару миллиметров не помогает, помогает размер и расстояние.