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

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

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

Клиент

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

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

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

Бриф

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

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

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

Улучшение панели оператора

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

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

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

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

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

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

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

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

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

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

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

Разработка панели управления клиентами с нуля

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

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

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

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

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

Создание библиотеки компонентов в Figma

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

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

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

Исследование пользователей имеет значение

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

Дальнейшее чтение в блоге Toptal:

• Дизайн приборной панели — рекомендации и передовой опыт
• Последовательность — это ключ — как создать дизайн-систему Figma
• Методы исследования UX и их применение
• Ценность исследования пользователей
• Истинная окупаемость UX: убедить руководителей высшего звена