Montagem: Design Cora | Foto: Getty Images

Como melhoramos a experiência na tela touch com Haptics na Cora

Presente no Human Interface Guidelines, é utilizado pra trazer uma experiência mais imersiva ao utilizar uma tela touch

Este recurso pode ser utilizado em diversos contextos, como o sucesso de um fluxo, uma falha em uma requisição, um preenchimento incorreto de alguma informação, ao selecionar um item, ou quando uma view é substituída por outra.

Elementos padrão de UI possuem essa implementação por padrão, mas também podemos adicionar este recurso a elementos customizados que nós criamos, utilizando o UIFeedbackGenerator.

O Feedback Generator, possui 3 categorias:

• Notification: utilizado para indicar sucesso, falha, ou um aviso.
• Impact: utilizado quando queremos chamar a atenção a uma mudança na tela.
• Selection: utilizado ao selecionar algum item, como um item de tabBar, por exemplo.

Sua implementação é bem simples:

Notification

1. Criamos nosso objeto de notificação. Ele é do tipo UINotificationFeedbackGenerator. Em seguida, executamos o método prepare(). Este método é importante, pois o sistema precisa de um tempo para preparar o Taptic engine na menor latência.
2. Em seguida, executamos o método notificationOccurred, informando ao Notification Generator que uma tarefa foi concluída e fazendo com que ele execute a notificação (feedback). Note que injetamos um .success no método. Ele é um enum FeedbackType presente no UINotificationFeedbackGenerator e contém 3 tipos: .success, .warning e .error.
3. De acordo com a documentação, nós precisamos de 3 passos para executar uma notificação: preparar, executar e dealocar. Por isso, ao final da execução, “forçamos” a atribuição de nil ao objeto criado no primeiro item.

Impact

1. Criamos nosso objeto de impacto do tipo UIImpactFeedbackGenerator e em sua inicialização, injetamos um estilo de impacto .medium. Este estilo é um enum FeedbackStyle, presente no UIImpactFeedbackGenerator e possui 5 estilos (2 deles foram adicionados a partir do iOS 13): .light, .medium, .heavy, .soft e .rigid. Logo após, também solicitamos a preparação, executando o método prepare().
2. Em seguida, executamos o método impactOccurred, que vai informar ao Notification Generator que uma mudança ocorreu. Em resposta, ele vai executar o "impacto".
3. Da mesma forma que fizemos antes, vamos garantir que o objeto seja dealocado da memória.

Selection

1. Criamos nosso objeto de seleção. Este objeto é do tipo UISelectionFeedbackGenerator e possui uma inicialização simples. Em seguida, também executamos o método prepare().
2. Avisamos ao Selection Generator que algo foi selecionado. Em seguida, ele executa o feedback de seleção.
3. Da mesma forma que fizemos antes, garantimos a dealocação do objeto.

Podemos também criar algumas abstrações pra facilitar o uso em nosso projeto:

Assim, fica bem mais simples de utilizar quando necessário:

E aí? Gostou da dica? Tente utilizar em suas aplicações. Vale muito a pena.

Haptics - User Interaction - iOS - Human Interface Guidelines - Apple Developer

Que tal interagir clicando nos claps (de 1 a 50) pra mostrar que curtiu o texto? 👏

Você também pode acessar nossa Página de Carreiras pra saber mais sobre nossas vagas e acompanhar a gente no Linkedin e no Instagram de Corajosers.