Наука о касании — часть третья
Итоговые рекомендации от дизайнера Стивена Хоубера о том, как разработать удобный интерфейс для сенсорных экранов.
Разные устройства для разных людей
- Создавайте дизайн для каждого пользователя — то есть для телефонов любых типов и размеров.
- Учитывайте все варианты взаимодействия с устройством.
- Отбросьте свои предубеждения. Не думайте, что у каждого такой же телефон, как у вас, и все используют его так же, как и вы.
Люди нажимают на центр экрана
- Располагайте ключевые элементы взаимодействия в центральной трети экрана. Пользователи предпочитают нажимать на эту область вне зависимости от того, есть ли у них выбор.
- Помещайте опции и клавиши, открывающие доступ к второстепенным экранам, в верхней и нижней частях страницы.
Люди смотрят в центр экрана
- Убедитесь, что самый важный контент находится в центре страницы, независимо от того, требует ли он нажатия или просто просмотра.
- Добавьте дополнительное пространство в нижней части страницы. У пользователя всегда должна быть возможность прокрутить контент до середины экрана.
Пальцы только мешают
- Убедитесь, что пальцы не перекрывают контент. Пользователи должны видеть, на что нажимают.
- Увеличьте элементы выбора, чтобы смена их состояния была видна. Экспериментируйте с таким контентом, чтобы выбрать оптимальный вариант. Функциональные клавиши должны призывать к значимому взаимодействию.
- Оставьте между блоками контента и по краям экрана достаточно пространства для жестов прокрутки, чтобы пользователи не боялись задеть кликабельные элементы.
Тип взаимодействия зависит от вида устройства
- Поддерживайте все способы ввода (особенно при создании адаптивного дизайна или приложения для планшетов и смартфонов).
- Постарайтесь собрать данные о том, как пользователи взаимодействуют с устройствами в комфортных для себя условиях. Правильный размер шрифта можно выбрать исходя из класса устройства и модели его использования.
- Подгоняйте размеры элементов так, чтобы их было видно с привычного для пользователя расстояния. Учитывайте класс устройства, чтобы улучшить читаемость.
Нажатие может быть неточным
Пользователи никогда не нажимают точно туда, куда хотят. В этом процессе всегда есть место неточности. Это нормально, потому что вы можете учитывать это при разработке дизайна.
Зная, что все нажатия неточны, перестаньте размышлять об ошибках и сосредоточьтесь на решении. Создайте большие элементы для нажатия. Вместо того, чтобы просто закодировать слово или иконку в качестве ссылки, используйте естественные границы символа.
Сделайте поля, кнопки и целые строки удобными для нажатия, чтобы даже если пользователь немного промахнулся, он всё равно попал в цель. Это несложно реализовать. Дизайнерам нужно обязательно указывать это в своих разработках. А разработчики в свою очередь должны предполагать, что цель — это вся область вокруг элемента. Разве что нет конкретного указания не делать её доступной для нажатия.
Выводы:
- Помните, что пользователи взаимодействуют с сенсорным интерфейсом в реальном мире, и учитывайте это при разработке дизайна.
- Сделайте элементы для нажатия максимально крупными. Причём речь идёт не только о значках и словах, но и о полях с кнопками.
- Адаптируйте проекты на уровне сетки и шаблона, обеспечьте достаточное пространство и правильный вид интерактивности.
Основные рекомендации по улучшению мобильного дизайна
Неточность никак не связана с возрастом пользователя, его образованием, уровнем владения сенсорным экраном или чем-либо ещё. Имейте это в виду, тестируя юзабилити.
Анализ миллионов нажатий на различных сенсорных экранах телефонов и планшетов на каждой операционной системе показывает, что взаимодействие с элементами происходит быстрее, точнее и увереннее, если они расположены ближе к центру.
Точность варьируется от 7 мм для центра экрана и до 12 мм для областей по углам. Поразмышляйте обо всём контексте в целом. Убедитесь, что для опций или значков, расположенных по краям экрана, строки имеют высоту не менее 9-10 мм.
Однако, несмотря на все соблюденные условия, некоторые люди по-прежнему будут промахиваться. Если промах по какому-либо элементу всё-таки возможен, создайте такой дизайн, который не приведёт к катастрофическим последствиям.
Например, никогда не размещайте элементы редактирования письма в электронной почте рядом с кнопкой «Отправить». «Отправить» — это необратимое действие. Убедитесь, что кнопки с необратимыми действиями не находятся рядом со стандартными и на них нельзя нажать случайно.
Кнопки второстепенных действий стоит размещать вдоль верхнего или нижнего края экрана. Вкладки, расположенные по верхнему или нижнему краю области контента, позволяют пользователям переключать вид или менять секции. Кнопки действий дают возможность создавать контент или активировать по нему поиск. Прячьте функции третьего порядка за кнопками меню, которые, как правило, располагаются в одном из углов.
Постоянно анализируйте, понятно ли пользователям, как взаимодействовать со специфическими частями экрана. В пределах каждой зоны на экране используйте определённые размеры для каждого типа устройств, обеспечивая достаточное расстояние между элементами для предотвращения промахов.
Строки и сетки содержимого в середине экрана могут быть довольно плотными, в то время как вкладки или действия в верхней или нижней частях экрана должны содержать минимальное количество элементов.
Выводы
- Создавайте дизайн, ориентируясь на зоны и расстояние между элементами. Размещайте кликабельные объекты в зависимости от того, насколько точно пользователи могут касаться определённых частей экрана.
- Нажатия по краям экрана менее точные, чем касания в центре. Поэтому избегайте размещения кнопок удаления или выбора с левого и правого края. Либо сделайте каждый элемент достаточно заметным.
- Если вы размещаете элементы управления вдоль верхней или нижней части экрана, оставьте там как можно меньше объектов и сохраните больше свободного пространства. Например, расстояние между кнопками действий на Android слишком плотное. А размещение более четырёх элементов в панели меню на устройствах iOS уже вызывает проблемы.
- Прогнозируйте промахи и размещайте элементы, которые вызывают необратимые действия, вдали от часто используемых кнопок.
Пользователи нажимают только на то, что видят
Начните разработку с самых простых элементов управления, которые работают ожидаемо. Наиболее ожидаемые элементы управления — это те, которые хорошо видны и понятны. Убедитесь, что необходимые кнопки очевидны для нажатия. Потому что если элемент не выглядит кликабельным, пользователи будут его игнорировать.
Подчёркивание — проверенное решение для встроенных ссылок внутри контента на веб-страницах. Однако в случае с приложениями кликабельные элементы стоит выделять более отчётливо. Например, при помощи рамки.
Кликабельные элементы должны очевидно демонстрировать не только то, что на них можно нажать, но и то, что это можно делать постоянно. Не выделяйте объекты на странице без веской причины. Если кнопки вызывают похожие действия, то они должны быть одинаково стилизованы.
Существует три типа выделений для различных действий:
- Стрелки вправо: переводят на новую страницу или раскрывают более подробную информацию.
- Подчёркнутый текст: загружают дополнительную полезную информацию.
- Кнопки: передают данные или изменяют состояние.
Разумеется, есть и много других интерактивных элементов, таких как медиаконтроллеры (кнопки управления в плеере) и формы для ввода данных. Однако эти три охватывают около 95% всех взаимодействий.
Выводы
Визуальные элементы — текст, значки, фигуры или любой виджет пользовательского интерфейса — должны делать следующее:
- Привлекать взгляд пользователя.
- Представлять себя визуально, чтобы пользователь понимал, что они кликабельны.
- Быть очевидными, чтобы пользователь догадывался, что именно последует за их нажатием.
- Быть достаточно большими и понятными.
Телефоны не плоские
Пользователи по-разному держат свои устройства и нажимают кнопки в зависимости от условий. Например, они могут изменять способ удержания телефона в руке, когда:
- Открывают дверь.
- Несут продукты.
- Держат ребёнка.
- Идут по улице.
- Пробираются сквозь толпу или сходят с бордюра.
- Едут в поезде или на автобусе (особенно стоя)
- Находятся в опасных ситуациях (в условиях сильного ветра, на воде и так далее).
Если человек несёт сумку в одной руке и использует телефон другой, то его точность нажатия в самом дальнем углу экрана может снизиться более чем на 30 мм.
Это колоссальная разница. Имейте её в виду, чтобы учитывать последствия промаха пользователя. Не забывайте также, что в действительности телефоны не плоские. Выступы на некоторых устройствах затрудняют нажатие по краям экрана. Телефоны с плавными, закруглёнными краями вызывают почти такой же эффект.
Например, Samsung применил такой дизайн смартфонов к своей основной линейке продуктов, поэтому их экраны словно немного отклоняются от глаз пользователя. В результате многие фактически не могут добраться до самого края экрана.
Выводы
- Не размещайте элементы слишком близко друг к другу.
- Имейте в виду, что люди пользуются телефонами в различных, порой совершенно нестандартных условиях.
- Можете размещать элементы по краям экрана. Но сначала убедитесь, что на них легко нажать на устройствах с изогнутыми или поднятыми краями.
Работа в человеческом масштабе
Лучший способ установить оптимальный размер элементов на мобильном устройстве — это во время всего процесса постоянно держать его в руках. Создавая эскиз на бумаге, используйте трафареты в масштабе реальных телефонов и планшетов.
Выберите какие-нибудь из своих работ в OmniGraffle, Visio, Axure, Photoshop, InDesign и откройте их на телефоне. Если вы делаете эскиз, рисуете с высокой точностью или используете инструмент прототипирования, просмотрите свои проекты в фотогалерее или другом мобильном приложении. Нет лучшего способа понять дизайн, чем увидеть его своими глазами.
Смоделируйте реальные условия, чтобы проверить, работают ли пользовательские интерфейсы. Магазины, больницы, мастерские и сады совсем не похожи на ваш рабочий кабинет. Выйдите на улицу и посмотрите, как воспринимается дизайн на солнце или во время прогулки. Передайте телефон другим людям. Для согласования дизайна недостаточно презентации в PowerPoint — вместо этого предложите всем взглянуть на проекты на телефоне, который вы принесёте на встречу.
Создатели операционных систем для мобильных телефонов пытались упростить всё для разработчиков и объединили разрешения экрана в небольшой набор стандартных категорий. Но из-за вариативности устройств есть риск получить не тот размер, что вы ожидаете. Поэтому когда придёт время измерить и утвердить размер текста или иконки, не просто считайте числа. Вместо этого протестируйте элементы на самом устройстве, чтобы убедиться, что они работают правильно.
Выводы
- Выключите компьютер и оцените дизайн в реальных условиях.
- В ходе презентации и согласования используйте не PowerPoint, а экраны телефонов.
- Учитывайте недостаточное масштабирование, плохие условия и несовершенство зрения пользователей.
Итоговые рекомендации
- Помещайте основной контент в центр экрана.
- Создавайте дизайн, учитывая то, как пользователи нажимают пальцами на кнопки.
- Увеличивайте элементы по краям и в углах экрана.
- Разместите элементы касания так, чтобы не допустить неприятных последствий, если у пользователя есть риск промахнуться.
- Сохраняйте единообразие пользовательских интерфейсов и элементов взаимодействия.
- Учитывайте вариативность устройств и контекст, в котором пользователи могут их использовать.
- Создавайте дизайн мобильных интерфейсов в соответствии с фактическими размерами телефонов.
- Тестируйте проекты на реальных телефонах.