Melhore a experiência online de atendimento aos usuários

Há alguns anos no mundo de desenvolvimento WEB vejo muitas discussões como: React ou Vue, Sass ou Less, Grunt ou Gulp, Webpack ou Rollup, etc…

Todas essas discussões são muito relevantes. Porém, por muitas vezes sinto falta das discussões mais simples, sobre um ponto crucial por trás de toda essa discussão: a experiência do usuário.

Acredito que nosso objetivo como desenvolvedor não é utilizar a ferramenta mais nova, mais moderna, ou mais utilizada por aí. O produto final do nosso trabalho não é (exceto em cursos, open-source, etc) feito para agradar outros programadores, e sim para servir ao usuário final.

Com algumas medidas simples, podemos facilitar a navegação e interação do usuário em vários aspectos.

Pensando em meios de atendimento online, separei 4 formas simples de melhorar a experiência:

1 — Link mailto

Essa técnica é bem antiga, mas vale citar.

Nada de pedir ao usuário para copiar o email, e colar no seu client de email para entrar em contato.

Quando não desejamos ter um formulário direto na página, podemos utilizar mailto para que o client de email padrão do usuário seja aberto automaticamente.

No mobile a experiência pode ser muito boa. Ao clicar no link, será aberto o app padrão de email (Gmail ou outro).

No desktop isso pode ser desagradável, pois muitas vezes a ordem do computador é abrir Outlook(Windows) que nem é utilizado.

<a href=”mailto:nome@email.com.br”>Mande um email</a>

2 — Link tel

No mesmo formato do mailto, o tel funciona para ligações:

// Formato: código do país (+55), DDD (11), número (900000000).
<a href="tel:+5511900000000">Ligue para nós</a>

No mobile, o celular irá abrir o app padrão de ligação, aguardando apenas que o botão "ligar" seja pressionado.

No desktop, a experiência pode ou não ser boa. Se você utiliza o Skype para efetuar ligações será perfeito, caso contrário não.

3 — Link para Whatspp

Ah, mas o contato poderia ser mais fácil do que mandar um email ou ligar… Sim, pode!
O Whatsapp disponibiliza um link para abrir uma conversa, seja na versão Web (desktop) ou no direto no aplicativo (mobile).

// Formato: código do país (+55), DDD (11), número (900000000).
// Parâmetro text: Mensagem a ser enviada
<a href="https://api.whatsapp.com/send?phone=55011900000000&text=Olá, sou um usuário e quero falar com vocês!">Enviar whatsapp: </a>

Utilizando esse link, a mensagem já aparecerá no input de texto no WhatsApp, pronta para ser enviada!

4 — Link para Facebook Messenger

Quando o atendimento via Facebook Messenger também é utilizado, podemos criar o link dessa forma:

// Formato: Link / nomeDoUsuárioOuPágina
<a target="_blank" href="https://m.me/FacebookBrasil">Conversar via Facebook</a>

Assim como o link do Whatsapp, ele irá abrir via navegador na versão Web, ou pelo aplicativo instalado no celular.

Você pode ver esses exemplos nesse repositório: https://github.com/raphaguasta/improving-customer-service-experience

Compatibilidade

• O link mailto é bem antiga, e funciona em todos os browser utilizados atualmente.
• O link tel, funciona a partir do IE11. (https://caniuse.com/#search=tel)
• Os links do Facebook e Whatsapp são apenas links como qualquer outra URL! :)

Conclusão

Discussões avançadas sempre são válidas! Porém, muitas vezes a resposta para nossos problemas está nas técnicas mais básicas e simples de serem implementadas!

Gostou? Recomende, compartilhe, comente!

Obrigado! :)