Управление в мобильной игре: дизайн для большого пальца

Сенсорное управление ломается по одной предсказуемой причине: его проектируют для указателя, которого на телефоне нет. Курсор мыши точен до пикселя, не закрывает собой то, по чему щёлкает, и работает из любой точки экрана. Большой палец не обладает ни одним из этих качеств, а исследования того, как люди на самом деле держат телефон, показывают: чаще всего игрок обходится одной рукой. Стивен Хубер пронаблюдал более 1300 пользователей в естественной обстановке — 49% управлялись с телефоном одной рукой, а если учесть и тех, кто держит его в ладони, но нажимает всё равно большим пальцем, выходит, что примерно три четверти всех касаний экрана выполняются именно большим пальцем.

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

Почему «мышление мышью» ломает сенсорное управление#

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

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

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

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

Большой палец закреплён. Мышь стартует из любой точки, а у пальца есть «домашнее» положение и ограниченная дуга. Закон Фиттса — чем дальше и меньше цель, тем дольше попадание — действует всегда, но на сенсоре расстояние диктует анатомия ещё до того, как в дело вступает вёрстка.

Как игрок на самом деле держит телефон#

Хубер наблюдал людей не в лаборатории, а в аэропортах, на автобусных станциях и в кофейнях — и получил цифры, на которые до сих пор опирается вся отрасль:

Хват	Доля пользователей	Что это значит для управления
Одной рукой	49%	Большой палец достаёт лишь до дуги в нижней части; верхние углы практически недосягаемы
В ладони	36%	Телефон держит одна рука, нажимает палец другой — и около двух третей этой группы всё равно нажимают большим пальцем
Двумя руками	15%	Печать или игра двумя большими пальцами; в этот режим игроков втягивают как раз игры

Отсюда два вывода. Первый: примерно три четверти касаний — это касания большого пальца (49% плюс две трети от 36%), значит, настоящее полотно для дизайна — дуга пальца, а не весь экран. Второй: хват меняется постоянно, поэтому любая раскладка, работающая только в одном идеальном положении рук, начнёт сбоить, как только игрок устроится поудобнее — но иначе.

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

Зона большого пальца#

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

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

• Нижняя треть — для действий. Всё, что нажимается в процессе игры — движение, прыжок, выстрел, ускорение, — живёт там, где лежит палец.
• Верхняя кромка — для чтения. Счёт, жизни, цель уровня: информацию игрок потребляет глазами, но не нажимает в азарте.
• Разрушительные действия — вне зоны. «Удалить сохранение» и подобное прячьте в верх приостановленного меню: подальше и от случайного касания, и от пальца.
• В горизонтальном режиме правило зеркалится. Оба больших пальца лежат в нижних углах, значит, углы — для управления, а верхний центр, самая дальняя от обоих пальцев точка, — вообще не для интерактива.

Размеры целей: конкретные числа#

Стандарт	Минимальная цель	Примечание
Apple, Human Interface Guidelines	44×44 pt	Область нажатия, а не видимый размер кнопки
Material Design	48×48 dp	Базовый ориентир Google для Android
WCAG 2.2, уровень AA	24×24 CSS px	Минимум доступности, а не цель дизайна
WCAG, уровень AAA	44×44 CSS px	Совпадает с ориентиром Apple

Для игр — три уточнения:

1. 48 — это пол, а не потолок. Во время игры никто не разглядывает кнопки, взгляд занят полем. Основные действия — прыжок, атака, газ — заслуживают заметно больше минимума.
2. Область нажатия может быть крупнее картинки. Невидимое поле вокруг небольшой иконки — стандартная практика, и она ничего не стоит.
3. Разносите кнопки щедро. Промах должен попадать в пустоту, а не в соседнее действие. Apple прямо рекомендует оставлять между элементами запас — тесно стоящие мелкие цели и рождают ложные нажатия.

Выбираем схему управления#

Схема	Подходит для	Сильные стороны	Слабые места
Только тапы	Головоломки, казуальные, idle	Учатся мгновенно; доступны одной рукой	Ограниченная выразительность
Виртуальный джойстик и кнопки	Платформеры, экшен	Привычны игрокам; аналоговое движение	Закрывают экран; сбоят при смещении хвата
Свайпы и перетаскивание	Раннеры, физика, карточные	Хватает одного пальца; ощущается прямым	Требуют полей, чтобы не спорить с системными жестами
Жесты несколькими пальцами	Сложный экшен	Выразительность	Двумя руками пользуются лишь 15% владельцев; требуя этого, вы отсекаете казуальные сценарии

Самая надёжная схема для небольшой команды — простейшая из тех, что выдерживает игровой дизайн: тапы и свайпы, а джойстик — только когда движение действительно обязано быть аналоговым.

Приёмы против типовых проблем#

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

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

Отклик — над пальцем. Палец закрывает точку касания, поэтому подтверждение попадания показывайте чуть выше: всплывающие очки, вспышки в игровом поле, вибрацию. Лёгкая вибрация при подборе монеты говорит «получилось», не занимая ни пикселя экрана.

Пауза — под рукой, но не под случайным касанием. Ставьте её у кромки экрана, с запасом пустого места вокруг: в углу при горизонтальной игре, подальше от кнопок действий, чтобы неудачный прыжок не завершал забег.

Одна кнопка — одно действие. Если одно место отвечает и за прыжок, и за взаимодействие, под давлением игрок будет нажимать не то. Крупные цели с единственным смыслом побивают «умные» совмещения.

Частые ошибки#

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

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

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

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

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

Проверьте сами за один вечер#

1. Прогон на один палец. Пройдите свою игру, держа в другой руке чашку кофе. Каждая заминка — отчёт об ошибке от трети вашей аудитории.
2. Аудит смен хвата. Играйте десять минут и записывайте каждое место, где пришлось перехватить телефон. Это и есть ошибки раскладки.
3. Молчаливый новичок. Дайте телефон человеку без единой инструкции и молча наблюдайте. Где он замер — там интерфейс и подводит.
4. Прогон на компактном экране. Повторите на самом маленьком поддерживаемом устройстве. «Доступно» значит доступно там, а не на вашем рабочем телефоне.
5. Тест «в метро». Поиграйте стоя, с одним прерыванием посреди уровня. Если потеря десяти секунд прогресса обидна — проблема в дизайне сессии, а не в игроке.

Чем помогает Egmatic#

Egmatic — визуальный редактор и движок 2D-игр без программирования, и эргономика касаний — как раз та задача, которую визуальный редактор делает осязаемой: вы расставляете кнопки, задаёте области нажатия и сразу видите раскладку такой, какой её увидит игрок на телефоне, вместо того чтобы воображать ввод по строчкам кода. Готовый проект одной кнопкой уходит на мобильные устройства, десктоп и веб через встроенный слой публикации — какие элементы вы проверили, такие игроки и получат. Если вы только начинаете, посмотрите материал о том, как создать первую мобильную игру, и обзор лучших движков для 2D-игр на мобильных.

Вывод#

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

Источники#

1. Стивен Хубер — How Do Users Really Hold Mobile Devices? (UX Matters, февраль 2013; наблюдения за 1333 пользователями, распределение хватов)
2. Стивен Хубер — How We Hold Our Gadgets (A List Apart; хваты, досягаемость и «зона большого пальца»)
3. Apple — Human Interface Guidelines: Buttons (минимальная область нажатия 44×44 pt); Accessibility (отступы между элементами)
4. Google — Material Design: доступный дизайн (минимальные сенсорные цели 48×48 dp)
5. W3C — WCAG 2.2: Target Size (Minimum) (24×24 CSS px, уровень AA) и WCAG 2.1: Target Size (Enhanced) (44×44 CSS px, уровень AAA)