Идеальный размер области касания

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

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

Что сказано в руководствах?

В пользовательском руководстве к Apple iPhone рекомендуется делать минимальную область касания размером 44х44 пикселя. В руководстве по дизайну пользовательского интерфейса Windows Phone указан размер области 36 пикселей, а минимальное значение – 26 пикселей. Руководство для разработчиков компании Nokia предлагает делать область касания не менее 1х1см или 28х28 пикселей.

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

Чем меньше область – тем больше проблем

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

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

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

Ширина среднестатистического указательного пальца в пикселях

В результате исследования в MIT Touch Lab было обнаружено, что средняя ширина указательного пальца составляет 1,6-2,0 см (16-20 мм). В пикселях это составляет 45-57px, то есть значительно больше, чем рекомендуется в большинстве руководств к разработке мобильных устройств.

Если размер области касания составляет 45-57 пикселей, это обеспечивает точное размещение указательного пальца внутри области. Когда пользователь нажимает на объект, его границы видны из-под пальца. Это дает пользователю четкое понимание, что он нажимает на нужный ему объект. Также, благодаря размерам области, пользователи могут проще и быстрее перемещаться между объектами и выбирать необходимые. Это объясняется Законом Фиттса, согласно которому чем меньше цель, тем больше времени уходит на то, чтобы по ней попасть. Маленькие объекты замедляют действия пользователя, так как ему необходимо уделять больше внимания тому, чтобы точно нажать на объект. В то же время, объект, размер которого соответствует пальцу, дает пользователю достаточно места, чтобы нажимать не задумываясь о точности движений.

Ширина среднестатистического большого пальца в пикселях

Довольно много пользователей нажимают на объекты интерфейса указательным пальцем. Однако не меньшее число пользователей пользуются для этого большим пальцем. В данном контексте, главным различием между этими двумя пальцами является их ширина. Так, ширина среднестатистического большого пальца составляет 2,5 см, то есть 72 пикселя.

Для тех пользователей, кто привык пользоваться большим пальцем, 72-пиксельная область касания – это просто счастье. Человек проще и быстрее нажимает на объекты, так как большой палец точно размещается внутри области. Благодаря этому края объекта видны под любым углом. Это означает, что пользователю не нужно переворачивать палец и нажимать его кончиком, чтобы видеть, на что он нажимает. Также нет необходимости нажимать боковой частью пальца. Достаточно одного касания подушечкой.

В исследовательской работе под названием «Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices» было обнаружено, что количество ошибок, которые совершают пользователи при нажатии на объекты, снижается при увеличении размера области касания. Пользователи начинают быстрее нажимать на выбранные объекты без необходимости физически приспосабливаться для увеличения точности движений, например, им больше не приходится переворачивать палец, что снижает скорость движений.

Еще одно исследование под названием «Touch Key Design for Target Selection on a Mobile Phone» также пришло к выводу, что количество ошибок снижается при увеличении размера области касания. К тому же доказано, что чем больше размер области касания, тем выше точность и удобство нажатия.

Всегда ли практичны большие области касания?

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

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

Область касания большими пальцами в играх

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

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

Это перевод статьи под названием “Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes” от Anthony T. Перевели в компании UXDepot с одобрением издания Smashing Magazine.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂