Ajudando a IA a ver claramente: um estudo de caso de design de painel

A inteligência artificial (IA) está trabalhando duro em muitos setores hoje. Ele ajuda os varejistas a gerenciar o estoque e prever a demanda, torna mais fácil para os médicos identificarem o câncer em exames de pulmão e permite que os carros se dirijam sozinhos.

Mas a automação baseada em IA continua a evoluir e ainda requer intervenção humana. Neste estudo de caso de design de painel, detalho como desenvolvi UIs que ajudam os operadores humanos a melhorar os processos de reconhecimento de IA.

O cliente

O cliente era uma startup americana que ajuda seus clientes a resolver erros de reconhecimento de imagem de IA para vários setores em tempo real. As soluções que oferece melhoram os sistemas automatizados que permitem mapeamento de terreno, classificação de plantas, identificação de produtos de varejo, leitura de código de barras e muito mais.

Os sistemas de reconhecimento de imagem de IA são treinados para reconhecer e interpretar a entrada visual e tomar decisões com base no que “vêem”. Mas, às vezes, esses sistemas encontram exceções — imagens que não conseguem processar porque o objeto tem uma aparência inesperada. Uma exceção pode fazer com que um sistema de IA falhe em identificar informações cruciais ou identificar erroneamente o que vê. Por exemplo, um scanner de produtos de mercearia pode não reconhecer uma caixa de suco de laranja porque o recipiente mudou ou um robô agrícola autônomo pode ficar confuso com um obstáculo. Problemas como esses podem causar atrasos ou interrupções nas operações de uma empresa.

Para resolver esses problemas, o software do cliente se integra aos sistemas de IA de seus clientes, permitindo que operadores humanos analisem e resolvam problemas de reconhecimento em tempo real. Mas os operadores fazem mais do que resolver exceções: eles também ensinam aos sistemas de IA o que fazer na próxima vez que encontrarem algo semelhante. Isso resulta em sistemas de IA mais bem equipados para identificar uma gama mais ampla de imagens.

O breve

Ao longo de dois meses, trabalhei com o cliente para entregar projetos para um painel do operador e um painel do cliente. Também preparei uma biblioteca de componentes e um guia de estilo que acompanhava essas entregas.

Minha abordagem segue o processo de design thinking, que envolve pesquisa, brainstorming, prototipagem de baixa fidelidade, prototipagem de alta fidelidade e testes de usuário. Sempre adapto esse processo com base na disponibilidade de tempo, capital e pessoas.

Durante o projeto, trabalhei em estreita colaboração com a equipe fundadora do cliente e o desenvolvedor front-end, compartilhando atualizações diárias que ajudaram todos a se manterem informados sobre meu progresso. Também colaborei com dois operadores que forneceram informações valiosas sobre seu trabalho diário.

Melhorando o Painel do Operador

No centro do produto do cliente está o painel do operador – a interface que seus especialistas em IA usam para resolver problemas de reconhecimento de imagem. Quando um sistema de IA tem problemas para identificar uma imagem, essa imagem é enviada para o painel de um operador. O operador rotula manualmente a imagem marcando cada objeto e classificando-o com base em rótulos predeterminados, como “humano”, “árvore” ou “grande obstáculo”.

Quando entrevistei os operadores do cliente, eles me mostraram o estado atual do software que estavam usando e me permitiram observá-los fazendo seu trabalho. A partir dessa pesquisa inicial, coletei insights, pontos problemáticos e oportunidades de melhoria que informariam meus projetos.

Descobri que faltavam funcionalidades importantes e que certas tarefas eram desnecessariamente complicadas, o que tornava a interface difícil de usar. Por exemplo, para rotular uma imagem, o operador precisava alternar entre a barra de ferramentas e a imagem a cada vez para selecionar, rotular, revisar e enviar. Da mesma forma, a capacidade de desfazer ou refazer uma ação também estava faltando, o que significava que os operadores tinham que repetir tarefas ou tomar medidas extras quando cometiam um erro.

Outra preocupação era que a interface não tinha uma aparência unificada, pois dependia principalmente de uma mistura de componentes prontos. Essas inconsistências tornaram certos elementos e funções difíceis de encontrar ou usar.

Com essas oportunidades de melhoria em mente, fiz um brainstorming de conceitos iniciais e criei wireframes, que compartilhei com os dois operadores. Todos os dias, ao longo de uma semana, apresentei wireframes aos operadores e discuti suas impressões iniciais por meio de sessões virtuais de feedback. As sessões foram altamente colaborativas e me ajudaram a compilar ideias para refinar o painel.

Um ponto interessante que surgiu durante a sessão de feedback foi a quantidade de informações mostradas na barra de ferramentas do lado direito, onde os operadores selecionavam suas ações. Meu projeto original sugeria uma solução muito minimalista - uma barra de ferramentas que poderia ser reduzida em um painel estreito mostrando apenas ícones. Isso, eu acreditava, permitiria que o foco ficasse na imagem central.

No entanto, os operadores não gostaram da ideia porque era difícil entender de relance o que os ícones significavam e quais eram as principais ações. Com esse insight importante, percebi que mais simples nem sempre é melhor. Nesse caso, deixar mais informações visíveis ajudou os operadores a trabalhar com mais eficiência.

Depois de melhorar e refinar os wireframes iniciais, criei um protótipo interativo e de baixa fidelidade no Figma e enviei para os operadores e stakeholders para que pudessem testá-lo. Assim que recebi o feedback deles, iterei o design até que todos estivessem satisfeitos.

Como mencionei, o painel original foi criado usando uma mistura de componentes de interface do usuário prontos e a experiência no produto não era consistente.

No entanto, no interesse do tempo e do orçamento, as partes interessadas queriam manter os componentes prontos sempre que possível. Então, trabalhando com o desenvolvedor front-end, personalizei os componentes existentes, que incluíam botões, formulários e campos e outros elementos da interface do usuário, para combinar com a aparência dos novos painéis. Esses ajustes afetaram cores, tipos de letra, espaçamento e outros detalhes. Nos casos em que era impossível atualizar os componentes existentes, como as animações de progresso da visualização ao vivo, criamos novos. A maior parte do painel do operador foi construída do zero dessa maneira.

Em seguida, produzi um protótipo navegável e de alta fidelidade que incorporava cores e os tipos de fotos que os operadores normalmente veriam no software. Também incluí ferramentas de seleção, como retângulos, lápis e polígonos, e adicionei um painel na parte inferior da tela onde os operadores podiam fazer aprimoramentos de imagem. Por fim, enviei o protótipo, juntamente com especificações para microinterações animadas no After Effects, para o desenvolvedor front-end para que ele pudesse construir o painel.

Projetando um painel do cliente do zero

A segunda fase do projeto foi um painel do cliente que permite que os proprietários dos sistemas de IA observem o progresso de seus problemas sendo resolvidos. O cliente queria melhorar essa experiência antes de lançar o produto para mais clientes.

Originalmente, os clientes do cliente precisavam solicitar relatórios de progresso por e-mail. Cada relatório era um arquivo PDF ou CSV que indicava quais exceções foram resolvidas ou ainda em andamento. O cliente precisava de uma maneira para que os clientes verificassem o status de cada exceção rapidamente.

Com o painel que desenhei, os clientes podem fazer login e monitorar o andamento de cada exceção em tempo real. Eles podem ver as imagens que chegaram, as que estão sendo revisadas e as exceções que já foram resolvidas. Eles também podem visualizar os detalhes de cada solução para entender melhor como o problema foi resolvido.

O painel apresenta gráficos e visualizações para ajudar os clientes a compreender melhor os dados resumidos, como o total de engajamentos e o total de resoluções. Os clientes também podem acessar e gerenciar facilmente os aspectos comerciais de suas contas, incluindo métodos de pagamento e informações de login.

Para o protótipo do painel do cliente, criei animações no After Effects para demonstrar como certos elementos da interface do usuário se comportariam. Por exemplo, criei uma animação de progresso para mostrar uma exceção em revisão, que se torna uma marca de seleção quando a exceção é resolvida. Também desenhei um ponto pulsante para mostrar quando um projeto está ativo.

Construindo uma biblioteca de componentes no Figma

Um aspecto importante do design de produtos escaláveis ​​e fáceis de manter é criar uma biblioteca de componentes e um guia de estilo. Ter componentes de design padronizados e reutilizáveis ​​garante consistência e velocidade ao dimensionar e adicionar recursos a um produto digital.

Escolhi hospedar a biblioteca do cliente no Figma porque facilita a modificação de componentes e a atualização deles onde quer que apareçam em um design. Todos os componentes e estilos foram documentados usando uma grade de oito pontos. A biblioteca incluía componentes principais, como menus, barras laterais, guias, ícones de entrada e botões, enquanto o guia de estilo cobria elementos como tipografia, cores, ícones, espaçamento e grades.

No futuro, a biblioteca de componentes pode evoluir para um sistema de design completo. Mas, por enquanto, serve como base para o crescimento do produto e como referência para futuros designers, sejam eles funcionários internos, freelancers ou profissionais de agências.

Questões de pesquisa do usuário

Este projeto foi gratificante porque me deu a oportunidade de refinar um produto digital que está aprimorando sistemas automatizados em vários setores e moldando a maneira como a IA interpreta o mundo. Também reforçou a importância da pesquisa do usuário e da observação direta. Poder observar os operadores fazendo seu trabalho e fazer perguntas foi essencial para fornecer painéis que lhes permitissem trabalhar com mais eficiência e eficácia. Um designer não pode melhorar a maneira como alguém trabalha até que entenda sua experiência em primeiro lugar.

Leitura adicional no Blog Toptal:

• Design do painel - Considerações e práticas recomendadas
• Consistência é a chave - Como construir um sistema de design Figma
• Técnicas de pesquisa de UX e suas aplicações
• O valor da pesquisa do usuário
• O verdadeiro ROI do UX: convencendo a suíte executiva