“Neumorfismo” é um novo termo de gíria nos círculos de design  de Equipamentos para Embalagens – co-criado por Michal Malewicz – que basicamente cruza as palavras “novo” e “skeuomorfismo”.

Essencialmente, é uma maneira nova e mínima de projetar Flow pack com uma aparência plástica macia e extrudada. É quase como se a interface tivesse sido formada a vácuo.

Eu, pessoalmente, adoro o visual e acho que ele traz um novo desafio aos designers de interface do usuário e desenvolvedores de front-end em todos os lugares.

Equipamentos para Embalagens Flow pack Embaladora  Empacotadora Automação de embalagem

Um desses desafios, é claro, é a acessibilidade.

Os botões convencionais da Embaladora tendem a se destacar muito bem, com bordas claramente definidas e um estado focado diferente o suficiente do desfocado para ser suficiente para que o usuário saiba que executou uma ação.

No entanto, se olharmos para os botões neumórficos, podemos encontrar um problema.

As bordas não são fáceis de ver e se misturam ao fundo. Embora isso faça parte do charme do neumorfismo, também torna mais difícil o uso.

Outra questão é o que mostrar quando o botão é pressionado. O efeito recuado pode não ser suficiente por si só e pode deixar os usuários imaginando qual estado está ativado ou desativado.

Equipamentos para Embalagens Flow pack Embaladora  Empacotadora Automação de embalagem

Esses problemas podem ter soluções bastante elegantes.

Em primeiro lugar, com a borda da Empacotadora, poderíamos introduzir um “lábio”, como nos botões reais, com uma borda levemente levantada ao redor. Isso dá ao botão uma aresta mais definida, sem tirar o charme neumórfico. Isso deve facilitar para as pessoas julgarem onde o botão começa e termina.

Os botões com uma borda leve agora têm suas bordas mais claramente definidas

Para permanecer na fronteira, precisamos garantir que as pessoas saibam quando ela está passando o mouse ou quando está sendo focada. Por exemplo, com leitores de tela, os usuários tabularão os elementos e o conteúdo normalmente será destacado por um esboço. No neumorfismo, esses contornos não existem necessariamente, mas poderíamos adicionar alguns sutis que indicam a navegação de um usuário sem interferir com a estética do design de maneira massiva.

Uma ligeira alteração de borda ao passar o cursor / foco permite que o usuário saiba que o botão está selecionado
A cor dessa borda em relação ao plano de fundo atinge a WCAG AA para objetos gráficos e componentes da interface do usuário.

Equipamentos para Embalagens Flow pack Embaladora  Empacotadora Automação de embalagem

Em seguida, temos o estado pressionado. Pessoalmente, acho que é quando podemos fazer um trabalho realmente agradável para fazer com que o botão mude claramente de estado.
O neumorfismo sugere que o botão apareça recuado quando pressionado. Podemos fazer isso, e deve ser um bom indicador visual do estado, mas podemos fazer ainda mais. Poderíamos alterar a cor ou o ícone (ou ambos) em uso para garantir que o usuário saiba que algo está ativo. Também podemos adicionar algum tipo de indicador de que o botão está ativo, como, por exemplo, uma luz LED quando você usa alguns botões na vida real.

Um botão de reprodução na Automação de embalagem  (extrudado) ao lado de um botão de reprodução aleatória (recuado)
Por fim, obviamente, queremos garantir que as necessidades de acessibilidade padrão sejam atendidas, para que possamos adicionar etiquetas de ária aos botões para garantir que um leitor de tela os anuncie adequadamente ao usuário. Não precisamos definir o índice de tabulação para permitir a navegação com guias, como se usássemos um botão HTML, ele deve funcionar automaticamente. Você deve sempre tentar usar elementos HTML padrão primeiro antes de criar seu próprio elemento personalizado para algo como um botão.

Aqui, você pode ver um exemplo de código que criei com HTML, CSS e JavaScript. Brinque com os botões e estados diferentes para ver o que pensa.
Concluindo, acho que o neumorfismo é uma ótima e divertida tendência de interface do usuário, e espero vê-lo em alguns produtos reais em breve. No entanto, como em qualquer tendência, precisamos garantir que não estamos excluindo ninguém de aproveitá-la e, se isso significa trabalhar 10% mais para torná-la perfeita para todos, considere isso.

Referência