Material Design на русском. Часть 51 — Сканирование штрихкода

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

На момент перевода эта часть гайда находилась в Beta версии.

Использование машинного обучения помогает считывать данные с камеры, которые могут быть зашифрованны в большинстве стандартных форматов штрихкодов

Использование

Штрихкоды — это простой и удобный способ передачи сложных или структурированных данных из реального мира на устройство. API сканирования штрихкодов ML Kit позволяет приложению считывать большинство стандартных форматов штрихкодов без необходимости переключения пользователей на отдельное приложение для их считывания.

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

Эти рекомендации по проектированию касаются сканирования штрихкодов с помощью камеры.

Сканирование штрихкодов — это альтернатива ручному поиску информации о продукте или вводу данных.

Принципы

Дизайн этой функции основан на следующих принципах:

Навигация с помощью камеры устройства

Вместо ввода поискового запроса камера устройства используется для сканирования штрихкодов.

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

Короткий анимированный онбординг, который описывает то, как использовать камеру для сканирования штрихкода

Держите камеру четкой и разборчивой

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

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

Обеспечь обратную связь

Использование камеры для сканирования штрихкодов имеет некоторые особенности. Качество изображения должно быть адекватным, и пользователи должны понимать то, как исправить проблемы с изображением, вызванные освещением или слишком большим расстоянием от камеры до штрихкода.

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

Рамка для сканирования штрихкода и всплывающая подсказка помогают пользователю понять как улучшить поиск по штрихкоду.

Компоненты

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

Ключевые элементы на всех этапах сканирования штрихкодов:

Верхняя панель приложений
Рамка штрих-кода
Всплывающая подсказка
Модальный нижний списрк

Верхняя панель приложения

Верхняя панель приложений должна иметь следующие элементы:

Кнопка для выхода из режима поиска
Переключатель для улучшения яркости (с помощью вспышки камеры)
Раздел справки для устранения неполадок поиска

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

Рамка штрихкода

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

Рамка служит трем целям:

Подтверждение: Форма рамки соответствует размеру под один штрихкод, поэтому всем сразу ясно то, что одновременно можно сканировать только один штрихкод за раз.
Разборчивость: В то время как простые форматы штрихкодов можно считывать на расстоянии, сложные форматы штрихкодов (такие как PDF417) могут нуждаться в более качественном изображении для точного считывания. Размещая камеру телефона над штрихкодом, интерфейс может сообщить, что пользователь должен приблизиться.
Активность: Граница кадра пульсирует во время фазы «распознавания», указывая на то, что приложение ищет штрихкоды для сканирования.

Рамка штрихкода — это анимаированное представление, которое показывает: где должен быть отсканирован штрих-код, когда он должен быть приближен, и текущее состояние сканирования.

Состояния рамки штрих кода:

Сканирование — это пульсирующая анимация, чтобы сообщить, что приложение ищет штрихкоды
Частично заполненная обводка рамки (+ надпись) указывает пользователю на то, что он должен приблизить камеру к штрихкоду
Поиск отображается путем анимации обводки, чтобы показать прогресс поиска штрихкода
Если возникает ошибка, то обводка станет пунктирной

Всплывающая подсказка

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

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

Неправильно: Не начинай с глагола в подсказках, потому что подсказка это не действие.

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

Модальный нижний список

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

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

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

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

Опыт

Сканирование штрих-кодов с помощью камеры происходит в три этапа:

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

Сканирование

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

На этом этапе приложение должно:

Рассказать о том, как работает эта функция
Сообщить о состоянии приложения
Подсказать пользователю как скорректировать поиск, если что-то пошло не так

Правильно: Объясни как работать с функциональностью с помощью короткого онбординга.

Правильно: Сообщай пользователю о состоянии сканирования.

Внесение изменений

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

Раздел со справкой поможет пользователям решить возникшие проблемы.

Распознавание штрихкода

Когда камера обнаружила штрихкод, приложение должно:

Перестать искать штрихкоды
Немедленно показать значение, если это структурированные данные
Если данные не структурированы, то надо доставать их из базы и показывать индикатор прогресса загрузки

На этом этапе штрихкод считался в камере и продолжает считываться, но уже только на стороне API.

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

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

Правильно: Если приложение нужно время на отображение данных, то покажи подсказку и индикатор прогресса загрузки

Внесение изменений

Функция сканирования штрикода не гарантирует, что приложение выдаст какие-либо результаты. Могут возникнуть следующие проблемы:

Отсутствие релевантных результатов: Штрихкод, который успешно сканируется, может не содержать информацию, которая относится к твоему приложению или юзкейсу, например сканирование штрихкода другой компании и прочее.
Потеряна связь с Интернетом: Если контент штрихкода подразумевает загрузк из Интернета , то запрос может увенчаться неудачей.
Маленкьий размер штрихкода: В то время как простые форматы штрихкодов могут быть прочитаны на расстоянии, сложные форматы штрихкодов (такие как PDF417) могут потребовать более близкого и качественного изображения для считывания камерой.

Правильно: Используй баннер, если ничего не было обнаружено. Снабжай баннер кнопкой, которая ведет в справочный раздел.

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

Коммуникация

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

Когда камера открыта (в модальном нижнем списке или в диалоге)
При выходе из функции сканирования на отдельном экране

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

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

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

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

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

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