Antes do anúncio tão aguardado deste mês, o Google acidentalmente publicou uma postagem de blog detalhando o pensamento e a pesquisa por trás do Material 3 Expressive Design, a mais recente direção de design da empresa.
O artigo completo foi arquivado no blog por Wayback Machine (Com imagens não mostradas na versão arquivada mostrada abaixo.) Aqui estão os pontos principais:
O Material 3 Expressive representa o que o Google chama de "uma nova direção ousada para o design" e é "a atualização mais procurada do sistema de design do Google de todos os tempos". O Google quer que os aplicativos vão além de designs “limpos” e “chatos” para criar interfaces que se conectem com as pessoas em um nível emocional. Além do nome completo, ele também é conhecido como “M3 Expressive” ou simplesmente “design expressivo”.
O Material 3 Expressive nasceu de uma pesquisa — não no estilo 41 Shades of Blue, que delegava decisões de design aos dados, mas em uma investigação colaborativa envolvendo pesquisa, design e engenharia.
Em 2022, a equipe de Material Design começou a se perguntar: "Por que todos esses aplicativos são tão parecidos? Tão sem graça? Não havia espaço para mais experiência?"
Nos últimos três anos, exploramos as implicações desse diálogo, iterando por dezenas de rodadas de design e pesquisa para encontrar a próxima evolução do Material Design. Por meio de 46 estudos de pesquisa separados com centenas de designs e mais de 18000 participantes do mundo todo, aperfeiçoamos um sistema bonito e altamente utilizável. Os princípios do Material 3 Expressive são baseados em pesquisas sólidas e desenvolvidos com base em práticas recomendadas de usabilidade estabelecidas, para que os designers possam usar esses novos componentes e princípios com confiança, sabendo que estão criando algo fácil de usar e com o qual as pessoas podem se conectar.
Esses estudos de pesquisa incluíram:
- Rastreamento ocular: Analise onde os usuários concentram sua atenção. O rastreamento ocular é uma ferramenta poderosa para entender o comportamento do usuário e identificar áreas para melhoria de design.
- Pesquisas e grupos focais: medindo respostas emocionais a diferentes designs. Esses métodos ajudam a entender como os usuários percebem os designs em um nível emocional.
- Experimentos: Colete sentimentos e preferências. Os experimentos são essenciais para determinar quais designs os usuários preferem e para avaliar o impacto de diferentes elementos na experiência do usuário.
- Fácil de usar: Descubra a rapidez com que os participantes entendem e usam a interface. Usabilidade é uma medida crítica do sucesso de qualquer design, determinando com que facilidade e eficiência os usuários podem atingir seus objetivos.
O Google diz: “As partes essenciais do design expressivo são o uso de cor, forma, escala, movimento e contenção”. Além disso: “O Material 3 Expressive apresenta uso ousado de forma e cor, criando experiências encantadoras para o usuário.” O uso de cores e formas ousadas é uma parte fundamental do Material Design 3 Expressive, cujo objetivo é criar experiências de usuário envolventes e memoráveis.
Esses aspectos de design também são essenciais para tornar o produto mais fácil de usar, direcionando a atenção para elementos importantes da interface, como destacar ações importantes e agrupar elementos semelhantes. Isso melhora a experiência do usuário e a torna mais suave e eficiente.
A barra de ferramentas flutuante é um componente gerado pelo Material 3 Expressive. Em designs conceituais, vemos uma barra inferior em forma de pílula que não abrange toda a largura da tela. Como resultado, vemos uma pequena parte do fundo, com os designs de ponta a ponta se tornando mais proeminentes. É semelhante ao que está disponível no Google Chat hoje.
Uma pesquisa do Google mostra que “designs expressivos são mais fáceis de usar” e ajudam os usuários a “descobrir rapidamente a ação principal em cada tela e navegar mais rapidamente”.
…Os participantes conseguiram identificar os principais elementos da interface do usuário até 4 vezes mais rápido, demonstrando que esses designs direcionam a atenção do usuário para a parte mais importante da tela. Vimos muitos aplicativos atingirem esses níveis de melhoria, e isso vai além do tempo de fixação dos olhos. Também observamos uma redução de segundos no tempo necessário para clicar em ações importantes em diferentes designs que testamos.
Mais uma vez, é importante enfatizar que esses são apenas designs conceituais e não refletem produtos reais. (Para algo mais definitivo, vazou. Redesenho do Relógio do Google (No fim de semana.) No entanto, o exemplo “antes” abaixo é claramente a interface de usuário atual do Gmail.
Quando olhamos para designs específicos, como as telas de um estudo de caso de aplicativo de e-mail mostrado abaixo, podemos ver os benefícios dos princípios de design expressivo em primeira mão. Por exemplo, o botão Enviar no novo design é maior, posicionado diretamente acima do teclado e usa uma cor secundária para chamar a atenção. Podemos comparar isso ao design não expressivo, que coloca um pequeno botão “Enviar” na barra de ferramentas na parte superior da tela, junto com outros controles, como anexar um arquivo. Quando os participantes foram solicitados a “enviar o e-mail” no aplicativo, seus olhos viram o botão 4 vezes mais rápido no design do emoji. Isso reflete a importância do “design expressivo” na melhoria da experiência do usuário.
Outros designs conceituais mostram um aplicativo de relógio, entrada de voz, editor de fotos, pagamentos e uma carteira:
O sucesso ou fracasso da adoção da nova interface depende da facilidade de implementação e da facilidade de atualização do M3. O Jetpack Compose parece estar em uma posição muito melhor atualmente, então estou cautelosamente otimista.
Enquanto isso, pesquisas e testes com usuários revelaram que “design expressivo bem implementado é fortemente preferido por pessoas de todas as idades em vez de design não expressivo que segue as Diretrizes de Interface Humana do iOS”.
O Google descobriu que “designs expressivos são ótimos”, especialmente para o apelo da marca: “Nossa pesquisa mostrou que usar o design M3 Expressive aumentou o quão “legal” um produto era para as pessoas”.
- …Encontramos um aumento de 32% na percepção da subcultura, sugerindo que o design expressivo faz com que uma marca pareça mais relevante e “por dentro”.
- …34% de aumento no frescor, fazendo com que a marca pareça nova e inovadora.
- …um aumento de 30% na rebelião, indicando que o design expressivo posiciona a marca como uma líder ousada e inovadora, pronta para romper com o padrão.
Comentários estão fechados.