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

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

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

Интерфейс банкомата это не мобильное приложение

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

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

• Спешка и стресс. Человек стоит в очереди, торопится на самолет, беспокоится о безопасности своих финансовых данных.

• Внешние отвлекающие факторы. Шум, толпа, погодные условия (если терминал стоит на улице).

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

• Физическое взаимодействие. Это не легкое касание, а часто нажатие «всем телом», особенно если экран не отзывчивый или расположен неудобно.

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

Особенности проектирования UI/UX для публичных сенсорных экранов

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

Учет размера и расстояния

Самая частая и критичная ошибка это недооценка размера интерактивных элементов. Палец это не курсор мыши. Его средняя подушечка имеет диаметр около 10-14 мм. Исходя из этого, формируются базовые принципы.

Рекомендуемые минимальные размеры кнопок и кликабельных зон:

• Для банкоматов и критичных интерфейсов. 15×15 ммэто абсолютный минимум. Я в своей практике стараюсь придерживаться 20×20 мм. Такой размер позволяет confidently попасть по кнопке даже дрожащей рукой или в перчатках.

• Расстояние между элементами. Не менее 2-3 мм. Это предотвращает случайные нажатия соседних кнопок.

• Высота текста. Основной текст должен быть не менее 5-6 мм (примерно 22-24 pt на стандартном разрешении). Заголовки еще крупнее.

Я помню, как мы проводили юзабилити-тестирование прототипа платежного терминала. Один из участников, мужчина лет пятидесяти с крупными рабочими руками, постоянно промахивался по кнопке «Оплатить», которая была размером 12×12 мм. Он разозлился и сказал: «Да я бы лучше монетой платил, чем это тыкать!». Эта фраза стала для нас приговором и лучшим мотиватором для изменений.

Жесты

Забудьте о свайпах, пинч-ту-зуму, долгом нажатии и прочих прелестях мобильных ОС. В публичном интерфейсе допустим только один, самый базовый жест, это короткое и четкое касание (тап).

Почему?

• Предсказуемость. Пользователь ожидает, что нажатие на кнопку приведет к действию. Сложные жесты неочевидны.

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

• Доступность. Люди с ограниченной моторикой рук могут быть не в состоянии совершить сложный жест.

Вся навигация должна строиться на последовательности таких тапов. «Назад», «Главное меню», «Отмена». Эти кнопки должны быть всегда на виду и в предсказуемых местах.

Доступность

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

Ключевые принципы доступности:

1. Контрастность. Текст и значимые элементы (иконки, разделители) должны максимально контрастировать с фоном. Я всегда проверяю контраст по стандарту WCAG (Web Content Accessibility Guidelines). Минимальное соотношение для крупного текста 3:1, для обычного 4.5:1.

   • Пример плохого контраста: серый текст на белом фоне.

   • Пример хорошего контраста: черный текст на желтом фоне или белый на темно-синем.

2. Цвет не должен быть единственным носителем информации. Например, если вы показываете статус операции «Успешно» зеленым цветом, обязательно добавьте текстовую подпись или понятную иконку (галочку). Помните о дальтониках.

3. Типографика. Используйте простые, легкочитаемые шрифты без засечек (гротески). Избегайте курсива, декоративных шрифтов и текста, набранного капсом (заглавными буквами), так как читать сложнее.

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

5. Время на реакцию. Если в интерфейсе есть таймер (например, «Введите пин-код»), он должен давать пользователю достаточно времени на осмысление и действие. Предусмотрите кнопку «Продлить время».

Структура информации и навигация

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

Как этого добиться:

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

• Прогресс-бар. Для многошаговых процессов (оформление заказа, регистрация) обязательно показывайте индикатор прогресса. Человек должен понимать, на каком он этапе и сколько еще осталось.

• Четкие и понятные формулировки. Вместо «Инициировать процедуру снятия наличных» пишите «Снять деньги». Говорите на языке пользователя.

• Визуальная иерархия. Самый важный элемент на экране должен быть самым заметным. Используйте размер, цвет и расположение для управления вниманием.

Давайте рассмотрим пример плохой и хорошей структуры на примере гипотетического терминала оплаты услуг ЖКХ.

Разница, как вы видите, колоссальная.

Процесс проектирования

Создание эффективного интерфейса это дисциплинированный процесс.

1. Исследование и анализ аудитории. Кто будет пользоваться устройством? Где оно будет стоять? Какие у людей могут быть физические ограничения в этой ситуации?

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

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

4. Юзабилити-тестирование. Это самый важный этап. Нужно показать прототип реальным людям из вашей целевой аудитории. Не подсказывайте им! Смотрите, где они спотыкаются, где возникают вопросы. Лучше провести 5 тестов с разными людьми, чем ни одного.

Однажды мы тестировали интерфейс для инфокиоска в музее. В прототипе была кнопка с тремя точками (многоточие), означавшая «Дополнительная информация». Из 10 тестируемых 8 ее проигнорировали, а двое подумали, что это загрузка. Мы заменили ее на текст «Подробнее» и проблема исчезла. Мелочь? Нет. Именно из таких мелочей и складывается положительный пользовательский опыт.

Будущее интерфейсов публичных устройств

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

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

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