106.9K+Baixar
Ir para o guia de uso
Interfaces That Feelpor owl-listener

Interfaces That Feel Skill.

Conecte texto e movimento da interface ao estado emocional do usuário.

  • Design de interação
  • Estados emocionais
Baixar OpenDesignVer guia de uso
Análise da fonte · interfaces-that-feelSKILL.md
Tarefa Conecte texto e movimento da interface ao estado emocional do usuário. Entregáveis Uma descrição do estado que o usuário provavelmente sente nos momentos selecionados. Antes de começar Traga o estado real de carregamento, erro ou conclusão, incluindo texto e timing. Inclua pesquisas de público disponíveis para separar emoções inferidas de comportamento observado.
Resumo editorial · fonte revisada em 2026-11-02 · não é um exemplo gerado

01 Funcionalidades

Conecte texto e movimento da interface ao estado emocional do usuário

Revise timing emocional, recuperação de erros e feedback e transforme estados do usuário em decisões concretas de texto e movimento.

Fluxo de trabalho baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Interfaces That Feel revisa um momento do produto pela condição da pessoa que o usa. Esperar um resultado, recuperar-se de um erro e concluir uma tarefa exigem sinais diferentes. A skill relaciona esses momentos a escolhas concretas de texto, timing, easing e comportamento de interação.

A fonte usa um processo de tradução: nomear o estado sentido, encontrar uma analogia física, extrair uma qualidade comportamental e aplicá-la à interface. Também verifica se o movimento tem razão para existir e se a experiência funciona com movimento reduzido. Isso torna a skill adequada a uma revisão pontual de interfaces que funcionam bem, mas se comunicam mal.

Entregas esperadas

  • Uma descrição do estado que o usuário provavelmente sente nos momentos selecionados.
  • Recomendações específicas de texto e timing ligadas a esses momentos.
  • Uma revisão antes/depois dos sinais emocionais e do comportamento com movimento reduzido.
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Identifique o momento

    Escolha carregamento, vazio, erro, sucesso ou onboarding. Descreva o que a pessoa pode estar vivenciando e distinga essa avaliação de evidências observadas diretamente.

  2. 02
    Traduza sentimento em comportamento

    Encontre uma analogia física útil, como resistência ou acomodação do movimento. Extraia a qualidade relevante e relacione-a a uma decisão de easing, duração, espaçamento ou texto.

  3. 03
    Revise o sinal da interface

    Torne a recuperação de erros clara e sem culpabilização, mantenha o reconhecimento de sucesso proporcional e dê ao texto de carregamento um tom com propósito. Remova movimentos que apenas preenchem tempo.

  4. 04
    Revise o resultado

    Compare a experiência antes e depois, incluindo preferências de movimento reduzido. Pergunte se o sinal emocional sobrevive à remoção de cor e imagens.

02 Quando usar

Quando usar

Traga o estado real de carregamento, erro ou conclusão, incluindo texto e timing. Inclua pesquisas de público disponíveis para separar emoções inferidas de comportamento observado.

Bom encaixe

  • Estados de feedback friosUma tela tecnicamente correta oferece pouco reconhecimento durante a espera ou a recuperação.
  • Refinamento de texto e movimentoA equipe precisa de um tratamento fundamentado dos momentos de erro, sucesso ou onboarding.

Limites a verificar

  • Interpretação exige contextoA leitura emocional da skill é uma avaliação de design, não prova do sentimento de cada usuário.
  • Movimento com moderaçãoA fonte recomenda reduzir o movimento antes de adicioná-lo e testar as preferências de movimento reduzido.
  • Orientação, não comprovação de resultadoRecomendações de timing não comprovam aumento de satisfação sem evidências dos usuários.

Traga estas entradas

  • Estados selecionadosForneça os momentos de carregamento, erro, sucesso ou outros a revisar.
  • Contexto do usuárioExplique a tarefa, sua importância e pesquisas conhecidas sobre o público.
  • Implementação existenteForneça texto, timing e comportamento de movimento atuais.

03 Decisões importantes

Decisões importantes

  1. Timing fundamentado

    Duração e easing são ligados a um sinal comportamental pretendido.

  2. Texto de recuperação útil

    Mensagens de erro podem reconhecer responsabilidade e mostrar uma próxima ação concreta.

  3. Movimento contido

    A revisão pergunta o que a animação acrescenta antes de mantê-la.

04 Exemplo de briefing

Experimente um briefing específico

O briefing de exemplo abaixo não foi testado. Verifique a configuração da skill antes de usá-lo.

Confira a fonte e a configuração

Forneça os momentos de carregamento, erro, sucesso ou outros a revisar.

Arquivo-fonte original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/interfaces-that-feel/SKILL.md

A referência abaixo abre as instruções originais. Confira a configuração do repositório antes de usá-las; não é um comando de instalação.

Comece com um entregável

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo
Use interfaces-that-feel para revisar nosso fluxo de geração de relatórios, incluindo espera, falha e conclusão. Leia o texto existente e inspecione o timing real. Comece descrevendo o provável contexto emocional do usuário e identifique suposições sem apoio de pesquisa. Proponha textos concisos e poucas mudanças de movimento, explicando o que cada uma comunica. Preserve velocidade e clareza da tarefa. Compare a experiência com movimento reduzido ativado e identifique sinais que devem continuar compreensíveis sem animação. Restrinja as recomendações a esses três estados.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

  • Cada proposta de texto ou movimento tem um propósito declarado no estado selecionado.
  • Emoções presumidas são distinguidas de achados reais de pesquisa.
  • O comportamento com movimento reduzido preserva feedback necessário e clareza da tarefa.

OpenDesign oferece um espaço de trabalho de design local para agentes de programação. Esta listagem não significa que a skill esteja incluída nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Responsável pela fonte
owl-listener
Repositório
owl-listener/designer-skills
Arquivo da skill
SKILL.md
Licença
MIT
Versão revisada
2026-11-02 · 9a6930cf84a8
Resumo editorial da fonte
Conecte texto e movimento da interface ao estado emocional do usuário.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não uso da skill nem nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

A skill apenas adiciona animação?

Não. A fonte pede reduzir o movimento primeiro e dar uma razão a cada animação restante.

Quais camadas da interface podem mudar?

A fonte discute tom do texto, timing, easing, temperatura de cor, espaçamento e duração de animação.

Inclui revisão com movimento reduzido?

Sim. Testar essa preferência faz parte da prática recomendada.

OpenDesign

Mantenha o briefing e o trabalho de design juntos.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Verifique a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/owl-listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/interaction-design/skills/interfaces-that-feel/SKILL.md