Проектирование экранной клавиатуры для промышленного интерфейса «Инспектор»

Меня зовут Лена Плинер. Я занимаюсь UX/UI-дизайном CRM, ERP, SaaS‑платформ и сервисов, веб‑ и мобильных приложений. Сотрудничаю с заказчиками и командами как попроектный дизайнер.

В этой статье

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

Контекст

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

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

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

Почему выбор раскладки оказался отдельной задачей

Интерфейс проектировался под 15-дюймовый экран с разрешением 1920 × 1080. Вариант уменьшения клавиатуры за счёт размера клавиш я не рассматривала, потому что оператор при работе в перчатках нажимает их пальцем. Клавиши должны были оставаться крупными, а расстояние между ними достаточным для уверенного попадания.

Для 15-дюймового экрана я зафиксировала размер клавиши 90 × 90 px, а расстояние между клавишами 32 px. На реальном экране это соответствует физическому размеру кнопки примерно 15,5 × 15,5 мм и межклавишному интервалу около 5,5 мм. Это необходимый минимум по промышленным стандартам: меньшие клавиши и интервалы увеличивали бы риск случайно задеть соседнюю букву при вводе в перчатках.

Из-за таких физических размеров полноразмерная клавиатура занимала бы значительную часть рабочей области и перекрывала бы часть списка с результатами поиска.

Первым вопросом стал выбор буквенной раскладки. Я рассматривала два варианта: алфавитную и ЙЦУКЕН.

ЙЦУКЕН сильнее привязана к привычному расположению рядов. Её сложнее подстроить под свободное место, и на экране она занимает большую площадь.

Но оператор пользуется интерфейсом регулярно, поэтому знакомое расположение букв было важнее возможности компактнее разместить клавиатуру. Сначала я сомневалась в этом решении: ведь ЙЦУКЕН создавалась под десятипальцевый слепой ввод, а на сенсорном экране моторная память почти не работает, так как человек всё равно ищет буквы глазами. Казалось, что для ввода коротких поисковых запросов в 3–5 букв алфавитный порядок будет понятнее.

Однако доступные профильные исследования поведения пользователей на сенсорных терминалах показывают, что дело вовсе не в моторной памяти. Алфавитная раскладка создает лишнюю когнитивную нагрузку: чтобы найти нужную букву, человеку приходится мысленно прокручивать алфавитный ряд, что замедляет процесс. Поэтому, для буквенного ввода я выбрала упрощённую ЙЦУКЕН.

Как я адаптировала ЙЦУКЕН к поиску по справочнику

После выбора ЙЦУКЕН оставалась исходная проблема: клавиатура всё ещё закрывала часть списка, а уменьшать клавиши было нельзя. Нужно было помочь оператору продолжать поиск, даже если он видит не все результаты. Для этого я использовала контекстные подсказки прямо на клавиатуре.

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

Например, оператор вводит «М». В справочнике есть «Молоко», поэтому клавиша «О» становится заметнее. Если значений, начинающихся с «МА», нет, клавиша «А» остаётся доступной, но не получает акцента.

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

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

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

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

Клавиши я спроектировала объёмными: в обычном состоянии они выглядят выпуклыми, а при касании визуально «продавливаются» внутрь, имитируя работу с физической кнопкой.

Кроме того, в толстой перчатке палец может слегка дрожать или задерживаться на стекле. Чтобы предотвратить фантомные нажатия, когда вместо одной 1 случайно вводится 111, в логику взаимодействия я заложила паузу, которая игнорирует случайные микроповторы.

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

Как эта логика работает в других полях

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

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

Полная раскладка открывается только для свободного ввода, когда заранее ограничить набор символов нельзя.

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

Зачем контекстной клавиатуре полный режим

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

Однако в реальном производстве система может столкнуться с нестандартной ситуацией:

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

• Ошибка в настройке поля. Поле в коде случайно настроили как строго цифровое, а оператору нужно ввести буквенный индекс.

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

Для этого в служебный ряд клавиатуры я добавила переключатель режима. По умолчанию клавиатура открывается в сокращённом режиме, только с допустимыми для конкретного поля символами. Если оператор понимает, что стандартного набора не хватает, он одним нажатием переключает клавиатуру в полный режим и получает доступ ко всем символам системы.

Элементы управления и быстрые действия

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

• Очистка в одно нажатие. Внутри строки ввода добавлен крестик. Оператору не нужно удерживать Backspace, чтобы удалить введённое значение: поле очищается сразу.

• Безопасный выход: в нижней части клавиатуры четко разделены целевые действия. Кнопка «Применить» сохраняет значение, а «Закрыть» сбрасывает ввод. Это защищает от случайного сохранения неполных параметров.

• Быстрый шаг (для числовых полей): В цифровой раскладке рядом с Numpad предусмотрены кнопки инкремента (+1, 1, +10), чтобы менять параметры рецепта в пару касаний, не набирая число заново.

Позиционирование и управление окном

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

Чтобы сохранить полный контроль над экраном, я спроектировала клавиатуру как гибкий интерфейсный элемент:

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

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

• Защита от наслоения: единый фокус. В интерфейсе одновременно может работать только одна клавиатура. При переходе к другому полю текущее окно не дублируется, а трансформируется под новый тип данных, сохраняя понятный контекст ввода.

Адаптация под разные типы экранов

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

• Дублирование ввода спецсимволов. На ёмкостном экране ввести “№” или “%” проще всего через длительное удержание клавиши в цифровом ряду, что сокращает количество нажатий. Однако на резистивном экране удерживать кнопку, особенно в рабочей перчатке, неудобно: контакт может прерваться. Поэтому для ёмкостных экранов осталось длительное удержание, а в качестве универсальной альтернативы была добавлена кнопка 123 #, которая открывает всю сетку спецсимволов одним обычным нажатием.

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

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

Заключение

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

Спасибо за внимание!