Material Design на русском. Часть 49 — Распознавание объектов с камеры устройства

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

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

Для чего используется

Просмотр с камеры в реальном времени может быть использован для распознавания объектов. Используя режим «стриминга» API ML Kit для обнаружения и отслеживания объектов, камера может распознавать объекты и использовать их в качестве входных данных для выполнения визуального поиска — это поисковый запрос, который использует изображение в качестве ввода данных вместо текста.

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

Все рекомендации затрагивают распознавание только одного объекта.

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

Принципы

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

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

Вместо ввода поискового запроса текстом, используется камера устройства в качестве “пульта управления” для поиска визуального контента.

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

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

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

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

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

Большинство элементов намеренно расположены вдоль верхнего и нижнего краев экрана, чтобы максимально увеличить видимость объекта.

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

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

Состояния ошибок надо:

Указывать, используя какие-нибудь визуальные сигналы (например, компоненты и анимацию).
Объяснять, чтобы пользователи понимали как лучше использовать поиск.

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

Компоненты

Функция распознавания объектов с помощью камеры использует как существующие компоненты Material дизайна, так и новые элементы, характерные для взаимодействия с камерой. Примеры кода и демо-версии новых элементов (таких как прицельная сетка) можно найти в исходном коде приложений ML Kit Material Design для Android и iOS.

Ключевые элементы на всех этапах визуального поиска с помощью живой камеры:

Верхняя панель приложений
Прицельная сетка
Маркер объекта
Всплывающая подсказка
Обнаруженное изображение
Модальный нижний список

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

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

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

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

Прицельная сетка

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

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

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

Состояния:

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

Маркер объекта

API распознавания и трекинга объектов ML Kit содержит опцию распознавания “видимого объекта”.” Эта опция распознает и трекает самый большой объект близ центра камеры. После распознавания вы должны пометить объект непрерывной прямоугольной границей.

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

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

Подсказка

Тултипы (всплывающие подсказки) отображают информативный текст для пользователей. Они выражают два состояния (например, сообщение с надписью “Поиск…”) и заодно побуждают пользователя к следующему шагу (например, сообщение с надписью “Наведите камеру на растение”).

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

Неправильно: не используй глаголы в тултипах. Например, “Нажмите для поиска”, поскольку тултипы — это не действия, это подсказка.

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

Распознавание изображений

При обнаружении объекта API ML Kit создает миниатюрную версию картинки, которая используется для визуального поиска с использованием модели классификации изображений.

Миниатюра изображения отображается, чтобы:

Подтвердить факту обнаружения объекта
Сравнить с результатами поиска
Объяснить ошибки, связанные с изображением (например, если оно низкого качества или содержит несколько объектов)

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

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

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

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

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

Опыт

Визуальный поиск с камеры происходит в три этапа:

Смысл: используй камеру для поиска
Распознавание: обнаружение и идентификация объекта
Коммуникация: если объект найден, сообщи об этом пользователю.

Определение

Обнаружение объектов начинается с открытия функции визуального поиска. Трактовка “Определение” относится к камере, которая ищет объекты в реальном времени. На этом этапе приложение должно:

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

Рассказать о том, как работает эта функция

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

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

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

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

Сообщить о действиях приложения (системы)

Пока камера ищет, прицельная сетка пульсирует, сообщая, что камера как бы “смотрит”. В то же время, всплывающая подсказка предлагает пользователю направить камеру на объекты.

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

Руководство по исправлению

Иногда условия окружающей среды затрудняют обнаружение объекта, например места:

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

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

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

Распознавание

Когда объект был обнаружен камерой, приложение должно:

Отметить обнаруженный объект
Отобразить сообщение для пользователя, чтобы начать поиск
Показать прогресс поиска

Идентификация обнаруженного объекта

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

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

Запрос на поиск

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

Подтвердить намерение выполнить поиск (пользователи держат камеру устройства неподвижно)
Отменить поиск (пользователи уводят камеру от объекта)
Ты можешь настроить время подобной задержки.

Задержка позволяет пользователям отменить поиск, если это необходимо.

Покажи прогресс поиска

Как только начинается поиск, обнаружение объекта прекращается, и использование камеры останавливается. Это останавливает новые поиски (и позволяет пользователю перемещать устройство в любое другое положение).

Прогресс поиска обозначается индикатором прогресса и сообщением во всплывающей подсказке.

Несколько сигналов (движение, затемнение и текст) используются для указания на то, что поиск начался и пользователи должны ждать загрузки результатов.

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

На этапе распознавания две проблемы могут повлиять на качество результатов поиска:

Маленький размер изображения: то есть если обнаруженный объект находится слишком далеко от камеры (рамки минимального изображения определяешь ты).

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

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

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

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

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

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

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

Показать результаты
Показать обнаруженный объекта
Предоставить быструю навигацию

У приложения должен быть порог для отображения результатов визуального поиска. “Уверенность” относится к оценке модели ML и к тому насколько точен прогноз. Для визуального поиска уровень достоверности каждого результата показывает, насколько модель считает его похожим на сфотографированное изображение.

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

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

Отображение обнаруженного объекта

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

Отображение обнаруженного объекта нужно для сравнения с результатами поиска.

Обеспечь быструю навигацию

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

Чтобы вернуться к камере, пользователи могут нажать на затемненный фон или заголовок модального нижнего списка.
Чтобы выйти из режима камеры, пользователь может взаимодействовать с результатом, уйти в другом место в приложении или закрыть камеру и вернуться в приложение, нажав кнопку “X”.

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

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

Оценка результатов поиска

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

Результатов нет

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

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

Баннер нужен для объяснения и передачи ссылки на справочный контент, если результатов поиска отсутствуют.

Неточные результаты

Если поиск показывает результаты с низким уровнем достоверности, ты можете попросить пользователя выполнить поиск снова (предоставив советы по улучшению поиска).

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

Темизация

Тема Shrine

Визуальный поиск с помощью камеры используется в юзерфлоу покупок в приложении Shrine.

Угловые формы, используемые в Shrine, применяются к ключевым элементам, таким как прицельная сетка.

Цветовые и шрифтовые стили Shrine применяются к результатам поиска, чтобы они соответствовали остальной части приложения.

Тема Reticle

В этом приложение прицельная сетка показана в виде ромба.

1 — Логотип. 2 — Кнопка. 3 — Прицельная сетка.

Всплывающая подсказка Shrine использует цвет, типографику и позиционирование бренда.

1 — Подсказка по умолчанию обычно имеет низки акцент. 2 — Пример кастомизации подсказки в Shrine

Как следить за обновлениями гайдлайна и переводом?

Структуированный документ в Notion
Официальные обновления Google на странице what’s new