Проектирование для интерактивных экранов

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

Особенности проектирования интерфейсов для интерактивных экранов

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

Хорошим началом для создания интерфейса для интерактивного экрана будет точное понимание его размеров. Идеальный вариант — иметь физический доступ к устройству.

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

Учитывайте расположение экрана

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

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

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

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

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

Учитывайте физический опыт

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

Рекомендации:

• Снижайте затраты на взаимодействие. Минимизируйте количество нажатий, ручного ввода текста и других действий, требующих высокой точности.
• Используйте естественные движения. На больших экранах удобнее работать всей рукой или несколькими пальцами, а не только кончиком одного пальца.
• Размещайте элементы в доступных зонах. Не располагайте интерактивные элементы слишком высоко или по всей поверхности экрана — это затрудняет взаимодействие.
• Избегайте утомительных действий. Долгая прокрутка, частое перетаскивание объектов и другие сложные действия будут быстро вызывать усталость.

Учитывайте поле зрения

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

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

Рекомендации:

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

Учитывайте особенности интерфейса

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

Рекомендации:

• Обеспечьте масштабируемость интерфейса. Проверьте, что элементы адаптируются к размеру экрана, а шрифты и кнопки остаются читаемыми и удобными на типичном расстоянии (40–80 см).
• Делайте навигацию простой. Интерактивный экран — не энциклопедия, его цель — решать конкретные задачи. Четко определите, какую информацию он должен предоставлять, и не перегружайте интерфейс. Больше — не значит лучше!
• Разделяйте контент и навигацию. Лучше сделать макеты упрощенными и обеспечить различимость интерактивных элементов.
• Используйте анимацию и движение, чтобы привлечь внимание пользователя к определенным элементам.
• Обеспечьте заметный отклик системы. Простые анимации помогут пользователю понимать, что система реагирует на его действия.
• Сделайте экранную клавиатуру подвижной. Пусть пользователь сможет перемещать ее в удобное место на экране (особенно важно для пользователей разного роста).
• Оптимизируйте перетаскивание объектов. Регулируйте ускорение и замедление элементов, чтобы они были удобны в управлении.
• Увеличивайте активные зоны. Кликабельная зона должна быть больше самого элемента, особенно если пользователь смотрит на него под углом.

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

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

Рекомендация:

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

Учитывайте особенность сценариев

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

Рекомендации:

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

Заключение

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

Проектирование для интерактивных экранов was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.