Blog Metlivi

Como associar uma ação de toque a um feedback visual ou háptico claro

Para o botão de um aplicativo móvel, dê ao toque uma resposta visível imediata e, em seguida, mostre o resultado quando a ação terminar. Adicione um breve feedback háptico apenas quando ele reforçar esse mesmo evento e for condizente com a importância da ação. Essa sequência ajuda as pessoas a distinguir "o aplicativo registrou meu toque" de "a tarefa foi bem-sucedida", especialmente quando uma resposta leva tempo. As etapas abaixo se aplicam a um único botão ou controle; os detalhes da plataforma variam, portanto, use os padrões de interação do sistema operacional quando disponíveis.

15 de outubro de 20266 min de leituraPor Metlivi Editorial Team
Seção 1

Comece decidindo o que o feedback precisa comunicar

Um toque pode levar a vários eventos diferentes: um controle é pressionado, uma configuração muda, uma solicitação é iniciada ou uma solicitação é bem-sucedida ou falha. Decida qual evento cada indicador representa antes de escolher uma animação ou vibração. Um indicador de pressão confirma a entrada; um rótulo alterado ou estado selecionado confirma uma alteração de estado local; um indicador de progresso comunica que o processamento está em andamento; uma mensagem de sucesso confirma a conclusão.

Mantenha esses significados separados. Se um botão escurece brevemente ao toque, isso não é prova de que uma solicitação de rede foi concluída. Se o envio puder demorar, mantenha um estado de progresso claro até que o aplicativo saiba o resultado. A Apple recomenda mostrar um indicador de atividade em um botão quando uma ação não for concluída instantaneamente e sugere alterar o rótulo para esclarecer o que está acontecendo. Diretrizes de botões da Apple

Seção 2

Construa uma sequência de estados simples

Trate o feedback como uma sequência vinculada ao estado real do controle, e não como um efeito único reproduzido sempre que o botão recebe um toque. Uma base útil é:

  1. Pronto: mostre a ação com um rótulo ou símbolo familiar que torne seu propósito claro.
  2. Pressionado: forneça um estado visual imediato de pressionamento, como uma mudança sutil de preenchimento, escala ou destaque.
  3. Trabalhando: se a conclusão for demorada, mostre o progresso e evite envios duplicados acidentais quando apropriado para a ação.
  4. Concluído ou com falha: atualize a interface com o resultado real. Para um botão de alternância (toggle), mostre seu novo estado selecionado; para um envio, forneça um status sucinto de sucesso ou erro.

A Apple afirma que botões personalizados devem sempre ter um estado pressionado, pois, sem ele, podem parecer não responder. Suas diretrizes mais amplas de feedback recomendam adequar a forma de exibição à importância da informação e disponibilizar o status perto do item que ele descreve. Diretrizes de botões da Apple e diretrizes de feedback

Seção 3

Escolha um indicador visual que permaneça compreensível

Torne o estado pressionado visível enquanto o dedo estiver no controle. Uma pequena mudança de cor ou opacidade, uma breve alteração de escala ou um destaque podem funcionar, desde que o controle continue reconhecível e seu rótulo permaneça legível. Não use a cor como a única maneira de comunicar o resultado: associe-a a uma mudança de estado, texto, ícone ou outra distinção visual que explique o que aconteceu.

Para um botão de alternância, o estado selecionado deve persistir após o toque; apenas uma ondulação temporária não comunica se a configuração está ativada. Para uma ação única como "Salvar", o botão pode mostrar seu estado pressionado primeiro e, em seguida, o aplicativo pode exibir um estado ou status de salvo. Se uma tarefa falhar, explique a falha perto do controle correspondente e deixe clara a próxima ação disponível. A apresentação exata depende do aplicativo e da plataforma, mas o indicador deve refletir o estado que o aplicativo pode verificar.

Seção 4

Decida se um feedback háptico agrega informações úteis

O feedback háptico pode reforçar um evento discreto, como o pressionamento de um botão ou uma alteração confirmada de estado. Ele é opcional: a resposta visual ainda precisa fazer sentido caso o dispositivo esteja no modo silencioso, o feedback háptico esteja desativado ou a pessoa não sinta o efeito. As diretrizes do Android recomendam usar o feedback háptico com moderação, mantendo-o consistente para interações semelhantes e combinando-o com a experiência visual ou sonora. Também aconselham não usar feedback háptico em vez de adotar um efeito de toque com vibração incômoda. Princípios de design de feedback háptico do Android

Uma escolha prática é usar um indicador leve e breve para uma confirmação significativa quando a plataforma oferecer um efeito padrão adequado. Evite vibrar para cada toque de baixo valor, rolagens repetidas ou um evento que não tenha uma alteração visual correspondente. Se o evento for importante, certifique-se de que o status visual transmita o significado; não dependa de uma vibração para distinguir o sucesso do fracasso.

Seção 5

Faça o indicador corresponder ao momento que ele representa

Uma resposta de pressionamento pertence ao momento do toque; uma resposta de sucesso pertence ao momento após o sucesso ser conhecido. Para uma ação que é concluída imediatamente, esses momentos podem ser muito próximos. Para um salvamento ou envio remoto, eles podem ser separados por uma espera perceptível. Emitir um feedback háptico de sucesso logo ao tocar anunciaria a conclusão antes de o aplicativo tê-la confirmado.

No Android, a abordagem recomendada View.performHapticFeedback usa constantes orientadas a ações, respeita as configurações de feedback tátil do sistema e não requer a permissão VIBRATE. A plataforma oferece um comportamento alternativo (fallback) para essas constantes quando necessário. Efeitos de vibração mais personalizados têm considerações diferentes de suporte e configuração; portanto, prefira a abordagem padrão orientada a ações para controles comuns. Guia de implementação de feedback háptico do Android

Seção 6

Leve em consideração o comportamento da plataforma e a frequência

Use controles nativos onde eles já fornecem o feedback esperado. A Apple observa que controles padrão, como interruptores (switches), controles deslizantes (sliders) e seletores (pickers), podem emitir respostas hápticas do sistema em modelos de iPhone compatíveis. Adicionar um segundo efeito personalizado por cima pode duplicar o sinal, portanto, verifique o comportamento nativo do controle antes de adicionar outra camada de indicador. Diretrizes de reprodução de feedback háptico da Apple

A frequência também importa. Um padrão de feedback que parece claro para um envio ocasional de formulário pode se tornar irritante quando associado a um botão usado com frequência. Mantenha o mesmo significado consistente em ações equivalentes e reserve indicadores mais fortes ou mais perceptíveis para eventos que exijam mais atenção. O Android recomenda especificamente relacionar a intensidade háptica tanto à importância do evento quanto à frequência com que ele ocorre. Princípios de design de feedback háptico do Android

Seção 7

Verifique a interação antes de lançar

Teste a sequência completa nos dispositivos e sistemas operacionais compatíveis com o aplicativo. Toque uma vez e confirme se o estado pressionado aparece prontamente; em seguida, verifique se o progresso permanece visível durante uma espera e se o sucesso ou a falha só é mostrado após o resultado ser conhecido. Tente um segundo toque rápido e confirme se a interface não gera um feedback duplicado confuso ou ações repetidas não intencionais.

Repita a verificação com o feedback tátil do sistema desativado e com o recurso háptico do dispositivo indisponível ou sem suporte. Os estados visuais ainda devem comunicar a ação e seu resultado. Compare ações frequentes com ações ocasionais e remova efeitos que pareçam exagerados, fora de sincronia ou desconectados de uma alteração visível. Para o feedback de visualização padrão do Android, a configuração do sistema é respeitada por padrão; abordagens personalizadas podem exigir suporte adicional e verificações de fallback. Guia de feedback háptico do Android

Uma associação clara segue uma lógica simples: mostre que o toque foi registrado, comunique qualquer espera e confirme o resultado quando ele for real. Deixe que o feedback háptico reforce esse mesmo sinal quando apropriado, mantendo a interface visual completa por si só.

Seção 8

Fontes

Leituras relacionadas

Continue explorando o tema