Aumentando a imersão do seu App com Haptic Feedback
Comunicação é a chave para muitas coisas. Seja em uma conversa com amigos para combinar algo, na reunião de trabalho para estabelecer entregas, ou até mesmo em Apps, para comunicar ao usuário o que está acontecendo.
Existem diversas formas de trazer este retorno ao usuário, como alertas sonoros ou uma boa tela apresentando visualmente a confirmação de uma ação. Mas você já se deparou com Apps que aparentam responder fisicamente através de uma simples vibração? Este recurso se chama Haptic Feedback.
Haptic Feedback
Haptic Feedback é o recurso que possibilita trazer um retorno físico (e as vezes até sonoro) ao usuário, para comunicar determinado acontecimento no App de acordo com a ação estabelecida.
Exemplos
Ao baixar um aplicativo na App Store, é possível utilizar o FaceID ou a biometria para realizar uma aquisição. Perceba que existem 2 momentos.
- Quando o FaceID/Biometria é requisitado:
2. Momento de confirmação destes dados:
Ao aparecer “OK”, uma breve vibração acontece, parecendo que o próprio celular disse “OK”. Isso aumenta a imersão do usuário e deixa mais claro que algo de fato aconteceu.
Como utilizar?
Certo, muito legal tudo isso de imersão, mas como aplicar isso em seu projeto? Por incrível que pareça, é muito simples! Primeiramente, é preciso saber qual feedback passar para o usuário. Para isso, confira o HIG a respeito de Haptics, disponibilizado pela Apple. Após escolher, com poucas linhas de código já teremos resultado. Para facilitar a criação de botões, criei um projeto utilizando Storyboard.
Agora iremos para o passo-a-passo. Adicione um botão na tela do Storyboard utilizando o atalho Command + Shift + L em seu Xcode:
No canto direito da tela, abra o Attributes Inspector e troque o Background do botão (apenas para facilitar a visualização mesmo). Caso queira, logo abaixo de Background há o Tint, para mudar a cor do texto.
Agora que temos nosso botão na tela, precisamos inseri-lo no código. Para isso, clique Add Editor on Right. Dessa forma, poderemos ver o Storyboard e o código ao mesmo tempo. “Add Editor on Right” é o botão no canto superior direito do Xcode, abaixo do “+”:
Excelente! Agora… temos 2 Storyboards na tela?! Ok, basta clicarmos no Arquivo ao qual nossa View Controller está atrelada. Após isso, teremos 2 ambientes de trabalho:
É muito importante que tenha selecionado o arquivo correto. Mas, como saber qual é o arquivo correto? Basta ver a qual classe a tela do Storyboard está ligada, e onde essa classe se encontra. Veja clicando no botão de View Controller do Storyboard, acima da tela que você está configurando, e em seguida veja a classe na área de Custom Class do Show the Identity Inspector.
Para atrelar o botão criado ao código, clique e segure no botão criado utilizando também a tecla Control e arraste para o código.
Logo em seguida, aparecerá o campo de informações deste botão. Deixei o nome de FeedbackButton para facilitar a interpretação. É muito importante que deixe Connection como Action, Object sendo View Controller, Type Any e Arguments Sender. Por fim, clique em Connect para finalizar essa conexão.
Excelente! Agora podemos mexer em nosso botão através do código. Nossa classe ViewController agora possui uma @IBAction func do nosso botão:
class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() // Do any additional setup after loading the view. } //Botão do Storyboard @IBAction func FeedbackButton(_ sender: Any) { }}
Agora, tudo irá depender de qual feedback deseja passar. Existe o Notification Feedback, Impact Feedback e Selection Feedback. Lembre-se do HIG dito anteriormente. Farei com as 3 possibilidades. De qualquer forma, já podemos fechar a aba do Storyboard, pois iremos trabalhar apenas com código.
Notification Feedback
Crie uma let que seja igual a UINotificationFeedbackGenerator, para que seja possível atribuir a ela qual tipo de notificação ocorreu, podendo ser (.success), (.error) ou (.warning).
@IBAction func FeedbackButton(_ sender: Any) { //criar let do tipo UINotificationFeedbackGenerator let generator = UINotificationFeedbackGenerator()
//atribuir qual tipo de notificação será apresentada generator.notificationOccurred(.success) //.success, .error ou .warning}
Impact Feedback
Crie uma let igual a UIImpactFeedbackGenerator e diga qual o estilo do impacto esperado, podendo ser .heavy, .medium e .light. Em seguida, é preciso realizar um prepare, preparando nossa let para acionar o impacto. Por fim, acione o feedback com impactOcurred.
@IBAction func FeedbackButton(_ sender: Any) { //criar let do tipo UINotificationFeedbackGenerator let generator = UIImpactFeedbackGenerator(style: .heavy) //.heavy, .medium ou .light
//preparar para dar o feedback generator.prepare()
//acionar o impacto desejado generator.impactOccurred()}
Selection Changed
Crie uma let igual a UISelectionFeedbackGenerator e em seguida, atribua o selectionChanged para acionar o Feedback de mudança de seleção.
@IBAction func FeedbackButton(_ sender: Any) {
//criar nossa let do tipo UISelectionFeedbackGenerator let generator = UISelectionFeedbackGenerator()
//aciona feedback de seleção generator.selectionChanged()}
Vale lembrar que este recurso não funciona no simulador do Xcode. Teste em seu dispositivo físico.
Simples e rápido! Particularmente, este é um dos recursos que mais utilizo no desenvolvimento de Apps, pois é muito tranquilo de implementar, e traz um diferencial enorme para experiência do usuário!
Referências
https://developer.apple.com/design/human-interface-guidelines/patterns/playing-haptics/
