Notas de UI generativas | Truques CSS

Estou realmente interessado nesta ideia emergente de que o futuro do web design é Design de IU generativo. Já vemos indícios disso em produtos, como Sites Figmaque apregoa a possibilidade de criar sites dinamicamente com prompts.

Deixando de lado as claras desvantagens de enviando tecnologia incompleta como um produto pronto para produção (o que é difícil de fazer), o ângulo que estou analisando particularmente é a pesquisa que visa usar IA generativa (ou GenAI) para gerar interfaces personalizadas. É incrível porque muda completamente a maneira como pensamos sobre o design da interface do usuário. Em vez de antecipar as necessidades do usuário e projetar em torno delas, a GenAI vê as necessidades do usuário e produz uma interface personalizada sob medida para elas. De certa forma, um site se torna um floco de neve onde não há duas experiências iguais.

Novamente, é selvagem. Não estou aqui para especular, opinar ou pregar sobre Design Generativo de UI (vamos chamá-lo de GenUI por enquanto). Apenas notas soltas que atualizarei à medida que continuar aprendendo sobre isso.

Definindo GenUI

Pesquisa do Google (PDF):

UI generativa é uma nova modalidade onde o modelo de IA gera não apenas conteúdo, mas toda a experiência do usuário. Isso resulta em experiências interativas personalizadas, incluindo formatação avançada, imagens, mapas, áudio e até mesmo simulações e jogos, em resposta a qualquer solicitação (em vez das amplamente adotadas “paredes de texto”).

NN/Grupo:

UM IU generativa (genUI) é uma interface de usuário gerada dinamicamente em tempo real por inteligência artificial para fornecer uma experiência personalizada para atender às necessidades e ao contexto do usuário.

Coletivo UX:

Uma interface de usuário generativa (GenUI) é uma interface que se adapta ou processa contextos como entradas, instruções, comportamentos e preferências por meio do uso de modelos generativos de IA (por exemplo, LLMs) para aprimorar a experiência do usuário.

Simplificando, uma interface GenUI exibe diferentes componentes, informações, layouts ou estilos, com base em quem a está usando e no que precisa naquele momento.

IA generativa vs. IA preditiva

É fácil despejar “IA” em um grande balde, mas muitas vezes ela é distinguida em dois tipos diferentes: preditivo e generativo.

Então, quando falamos sobre GenAI, estamos falando sobre a capacidade de criar novos materiais treinados em materiais existentes. E quando falamos especificamente sobre GenUI, trata-se gerando uma interface de usuário com base no que a IA sabe sobre o usuário.

Acessibilidade

E devo observar que o que estou falando aqui não é estritamente GenUI na forma como o definimos até agora como saída de UI que se adapta às experiências individuais do usuário, mas sim “desenvolvendo” interfaces geradas. Esses chamados construtores de sites de IA não se adaptam ao usuário individual, mas é fácil ver que estão caminhando nessa direção.

O que mais me interessa — francamente, me preocupa — é até que ponto o GenUI pode de forma confiável experiências de produção que atendem todos usuários, independentemente da deficiência, seja ela auditiva, visual, física, etc. Há muitas informações diferentes a serem consideradas aqui, e vimos quão terríveis foram os primeiros resultados.

Esse último link é uma grande cutucada no Figma Sites. Eles são fáceis de cutucar porque fizeram o maior impulso comercial no desenvolvimento web baseado em GenUI. Para seu crédito (talvez?), eles receberam uma forte resistência e decidiram fazer algo a respeito, anunciando atualizações e publicando um guia para melhorar a acessibilidade em sites gerados pelo Figma. Mas mesmo aqueles têm suas limitações que fazem com que o esforço e os conselhos pareçam menos úteis e mais para salvar a face.

De qualquer forma. Existem muitos outros jogadores para entrar no jogo, principalmente WordPressmas também outros como Vercel, Espaço quadrado, Wix, Vai Papai, Adorávele Pronto.

Algumas pessoas estão mais otimistas do que outras de que o GenUI não só é capaz de produzir experiências acessíveis, mas também substituirá totalmente os profissionais de acessibilidade à medida que a tecnologia evolui. Jakob Nielsen fez essa afirmação notoriamente em 2024 qual atraiu feroz crítica de o comunidade. Nielsen voltei atrás um ano depoismas não muito.

Não estou nem remotamente qualificado para oferecer melhores práticas, opinar sobre o futuro das práticas de acessibilidade ou especular sobre desenvolvimentos e capacidades futuras. Mas enquanto eu olho Guia Pessoas + IA do Googlenão vejo nenhuma menção à acessibilidade, apesar de conter princípios de design “centrados no ser humano”.

A acessibilidade é uma consideração atrasada em relação ao hype, pelo menos para mim. Isso tem que mudar se o GenUI for realmente o “futuro” do design e desenvolvimento web.

Exemplos e recursos

O Google tem um repositório de exemplos mostrando como a entrada do usuário pode ser usada para renderizar uma variedade de interfaces. Dar um passo adiante é o objetivo do Google Gênio do Projeto que se autodenomina a criação de “mundos interativos” que são “gerados em tempo real”. Não consegui um convite para experimentar, mas talvez você consiga.

Além disso, O Google tem um SDK GenUI projetado para integração em aplicativos Flutter. Então, sim. Conecte-se ao seu provedor de LLM e deixe-o criar interfaces adaptáveis.

Teses é outro no espaço GenUI adaptativo. Co-pilototambém.

Referências