Заблуждения о сенсорном управлении

44 пиксела – это не физический размер… Мы даже не можем перевести 44 пиксела, или точки, в физические единицы размера.

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

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

Вы не можете полагаться на области нажатия размером в 44 пиксела

Даже принимая во внимание, что iOS однозначно находится на втором месте после Android, стандартный размер областей нажатия компании Apple кажется более подходящим, однако размер области нажатия в 44 пиксела не является физическим размером. А с учетом присутствия на рынке нескольких операционных систем, работающих на различных устройствах – и компании Apple, которая конвертирует пикселы в не зависящие от устройства единицы измерения, которые они называют точками – мы даже не можем перевести эти 44 пиксела, или точки, в нормальный действительный размер.

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

Кроме того, множество рекомендаций для операционных систем и OEM (Original Equipment Manufacturers, изготовители комплексного оборудования) определяют сенсорные области нажатия меньшими, чем того рекомендует подавляющее большинство исследований, как правильное. К примеру, компания Nokia зачастую настаивает на том, что 7 миллиметров – это оптимальный размер для областей нажатия, подобную точку зрения разделяют в компании Microsoft – вроде бы – однако они также добавляют, что между областями нажатия должны быть промежутки размером в 2 мм. В прочих же рекомендациях царит полный хаос и мракобесие. ANSI/HFES 100-2007 рекомендует размер кнопок не менее 9,5 миллиметров.

При построении дизайна в сенсорных пользовательских интерфейсах мы не можем ни определить их, используя единое количество пикселов, ни рассматривать их размер относительно лишь одной оси координат.

Неужели различные размеры пальцев имеют такое значение?

Из-за того, что наши пальцы трехмерны и упруги, или мягки, контактное пятно отличается при нажатии с различным усилием и углом приложения пальца.

Рассматривая различные размеры областей нажатия по отдельности, ISO 9241-9 рекомендует размер кнопки делать равным ширине дистального сустава пальца 95го перцентиля среди мужчин, которая составляет приблизительно 22 миллиметра! Однако многие люди касаются экранов своих мобильных устройств большими пальцами.

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

Рисунок 1. Только часть большого пальца пользователя прижимается к экрану.

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

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

Рисунок 2. Центроид контактного пятна на области нажатия.

К счастью, люди обычно знают свои руки довольно хорошо и могут точно попасть центром пятна касания на цель, так что они, в общем-то, могут поместить центроид контактного пятна туда, куда им нужно. На рисунке 2 контактное пятно перекрывает пункты меню Поблизости (Nearby) и События (Events), однако центроид однозначно расположен на пункте Поблизости (Nearby), так что цель захвачена.

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

Чем больше кнопки – тем удобнее в использовании – все хорошо в меру

Если кнопки становятся слишком большими, у пользователей начинаются трудности с восприятием их в качестве интерактивных кнопок – вплоть до невосприятия их как отдельных элементов.

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

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

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

Разработка дизайна интерактивных элементов

Вообще, есть три вещи относительно интерактивных элементов, которые мы должны понимать и учитывать при разработке дизайна для сенсорных интерфейсов:

• Дизайн визуальных объектов
• Дизайн сенсорных областей
• Предотвращение ошибок, связанных с наложением

Разработка дизайна визуальных элементов

Визуальный объект – это текстовая ссылка, пиктограмма или другой графический элемент, который дает возможность взаимодействия. Визуальные объекты должны быть достаточно велики и достаточно понятны …

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

• Они привлекали внимание пользователя.
• Пользователь понимал, что это интерактивные элементы.
• Они были читаемы, и пользователь понимал, какое действие он выполняет.
• Пользователь видел, что он может легко попасть по такому элементу.

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

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

Для человеческого зрения наибольшее значение имеет не размер шрифта, а угол зрения, который называется угловым разрешением. На рисунке 3 узкий конус показывает минимальный размер шрифта для разборчивого текста, больший конус показывает область высокого разрешения, на которой фокусируются глаза пользователя. Устройства, которые пользователь наблюдает с большего расстояния, требуют большего размера текста.

Рисунок 3. Углы зрения. Или угловое разрешение

Минимальный размер шрифта должен отвечать трем критериям: текст должен быть читабелен, разборчив и с легкостью интерактивен. Расчет углового разрешения и расстояния, как показано на рисунке 3, показывает, что шрифт высотой 6 точек (пт) или 2,1 миллиметра (мм) – обычно наименьший шрифт, который позволяет читать. Пиктограммы должны быть размером не менее 8 точек, или 2,8 миллиметров, если они не являются дополнительными элементами текста – например, указатель на то, что ссылка открывает страницу в новом окне. Люди со слабым зрением нуждаются в тексте большего размера.

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

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

---

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

---

Разработка дизайна сенсорных областей

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

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

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

Так как сенсорные экраны определяют только центроид, или геометрический центр контактного пятна, контактное пятно пальца пользователя не так важно при определении областей нажатия, как вы могли бы подумать. Для того, чтобы определить, насколько мала может быть область нажатия без ущерба для юзабилити, я перерыл множество литературы и произвел кое-какие математические расчеты в отношении так называемого кругового отклонения вероятности (КОВ).

Любой объект имеет некоторую неизбежную неточность. Реальные касания пользователя на желаемую область экрана не всегда регистрируются действительно в той же точке; они распределены вокруг целевой точки. Их распределение не является случайным, оно сконцентрировано вокруг визуального объекта. Измерив такую погрешность, вы можете определить КОВ как определенный процент попаданий и определить, попадают ли пользователи по объекту с приемлемой степенью вероятности.
При превышении значения точности в 95%, наблюдается тенденция к снижению зависимости точности от размера – увеличение размера элемента уже не приносит такого увеличения точности – так что я использовал КОВ=R95 для определения необходимых размеров.

Текстовые ссылки слишком малы, чтобы точно попадать по ним. Некоторые современные операционные системы и браузеры, например, Google Chrome пытаются решить данную проблему путем масштабирования небольших сомнительных элементов для получения больших интерактивных областей.

Рисунок 4: Chrome делает слишком мелкие ссылки ссылками более удобного размера.

Впрочем, визуальный элемент не должен быть сенсорной областью. А в большинстве случаев даже должен не быть ею. К примеру, скажем, мобильный сайт должен иметь текстовую ссылку, выполненную шрифтом размером 6 точек, на дисклеймер или полную версию сайта. Текст должен быть маленьким, потому, что вы не хотите, чтобы она бросалась людям в глаза, но из-за того, что он мал, по ней может быть довольно трудно перейти.

Никаких проблем. Во-первых, чувствительным может быть не только текст ссылки, но и невидимая область вокруг нее. (Вы можете увидеть границы области нажатия, проведя пальцем по тексту для его выделения.)

Если ссылка выполнена в Helvetica высотой 6 точек, поле, соответствующее области нажатия вокруг текста, будет высотой 7,68 точек, или 2,7 миллиметров, высотой. Однако же это все еще очень, очень маленькая область для легкого попадания. Пользователи могут столкнуться с ошибками с вероятностью не менее 50% при таком мелком размере области нажатия.
Абсолютный минимум размера надежной области нажатия составляет 6 миллиметров, однако это справедливо лишь при условии, что пользователь находится в положении покоя. Если пользователи движутся, либо отвлечены чем-нибудь, следует использовать восьмимиллиметровые области нажатия. Более мелкие объекты могут заставить пользователя снизить темп, что может быть неприемлемо для вашего пользовательского интерфейса. Однако ни в коем случае не следует превышать размер объекта в 15 миллиметров.

В зависимости от методов измерения центроида области касания, иногда может оказаться, что центроид стремится быть ниже центральной линии видимого объекта. Несмотря на то, что это технически верно, расчеты более полезных интерпретаций КОВ (D2RMS или R95) не дают сделать такого вывода. Нет статистически значимой разницы между измерением количества равноудаленных от центральной линии нажатий в верхней полуобласти и в нижней полуобласти вблизи от центра. Я просто добавлю этот феномен в копилку мифов мобильного дизайна, потому что это на упомянутый дизайн совершенно не влияет.

Предотвращение ошибок, связанных с наложением

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

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

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

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

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

Либо на реальном экране, либо на увеличенном скриншоте поместите круг на каждый из интерактивных элементов для того, чтобы проверить отсутствие наложения, как показано на рисунке 5. В этом случае внешний круг должен быть размером 10 миллиметров, в то время, как внутренний круг – 8 миллиметров. Списки, изображенные на обоих скриншотах – минимально допустимые. Однако слишком узкая панель вкладок на левом скриншоте может послужить причиной наложения, так как пользователи могут случайно нажать как на пиктограммы действий сверху от панели, так и на пункты списка снизу от нее.

Рисунок 5: Проведение измерений для предотвращения ошибок, связанных с наложением.

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

Никогда не располагайте кнопки, вызывающие необратимые последствия, – или даже такие, результат нажатия которых очень трудно отменить – возле кнопок, вызывающих простые обратимые действия. К примеру, в интерфейсе, позволяющем пользователю отправлять сообщения электронной почтой, кнопки Отправить и Удалить должны быть размещены подальше друг от друга, а также на достаточном расстоянии от кнопок функций форматирования текста. Случайное нажатие кнопки «Полужирный текст» может быть легко исправлено повторным нажатием соответствующей кнопки. Однако не существует способов отозвать назад отправленное письмо, а восстановить удаленное потребует долгого копания в корзине, если это вообще будет возможно.

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

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

Разработка дизайна для жестов и движений

Жестовые команды требуют простых, но немного других рекомендаций.

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

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

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

Краткий обзор рекомендаций по разработке дизайна для сенсорных экранов

Оцените возможность появления проблем вследствие наложения элементов. Если мелкие элементы расположены слишком близко, измените их размер или интервал между ними.

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

1. Определите размер каждого визуального элемента.
2. Определите размер каждого интерактивного объекта – и определите такие размеры в своей спецификации.
3. Оцените возможность появления проблем вследствие наложения элементов. Если мелкие элементы расположены слишком близко, измените их размер или интервал между ними.
4. Определите последствия случайного нажатия на соседний объект. Если последствия серьезные, следует оградить пользователя путем изменения порядка размещения областей нажатия или просто раздвижением их подальше.

Краткий обзор рекомендаций по размерам

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

Таблица 1. Минимальные размеры визуальных объектов для устройств с различным размером экрана.

Область нажатия:

• Минимальное значение – 17 пт / 6 мм
• Рекомендуемое значение – 23 пт / 8 мм
• Максимальное значение – 43 пт / 15 мм

Интервалы между объектами, позволяющие избежать ошибок, связанных с наложением, межцентровое расстояние:

• Минимальное значение – 23 пт / 8 мм
• Рекомендуемое значение – 28 пт / 10 мм

Это перевод статьи под названием “Common Misconceptions About Touch” от Steven Hoober. Перевели в компании UXDepot с одобрением издания UXMatters.

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