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 quatro 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 e-mail, e colar no seu client de e-mail para entrar em contato. Quando não desejamos ter um formulário direto na página, podemos utilizar mailto para que o client de e-mail 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 e-mail (Gmail ou outro). No desktop isso pode ser desagradável, pois muitas vezes a ordem do computador é abrir o 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 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 Whatsapp

“Ah, mas o contato poderia ser mais fácil do que mandar um e-mail ou ligar” Sim, pode!

O Whatsapp disponibiliza um link para abrir uma conversa, seja na versão Web (desktop) ou 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 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 antigo e funciona em todos os browsers 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!