Melhorando a UX de digitação no mobile

Introdução

Quando construímos formulários com HTML, é importante se preocupar com o fluxo de preenchimento. Isso implica em conhecer, além da linguagem, também os recursos oferecidos pelos navegadores e dispositivos que serão usados pelo seu usuário.

Um bom uso da linguagem HTML somado ao conhecimento das plataformas que a executam, torna a experiência de preenchimento de um formulário muito mais produtiva e pode aumentar os índices de conversão.

Teclado nos dispositivos móveis

Está com pressa?

<input inputmode="numeric" type="text" />

Sabe quando você está preenchendo um formulário pelo celular e ao chegar a um campo cujo o valor será exclusivamente numérico (ex.: telefone, cpf, cep, cartão de crédito...) mas o teclado invocado é aquele tradicional alfanumérico?

Temos de convir que a experiência é horrível. Nós, como desenvolvedores certamente devemos evitar essa situação. Mas como?

A primeira coisa que normalmente pensamos, é no atributo type da tag input, ele pode ser definido de forma a dar uma melhor experiência tanto de validação, quanto de usabilidade.
Quando definimos o atributo type como 'numeric', o teclado apresentado ao usuário será o numérico, o que já eleva muito a experiência de preenchimento.

Pronto! Agora tudo está perfeito né? Bem, nem tudo. O problema é que quando alteramos o type do input o teclado que surge muda, mas o tipo do dado colhido muda também. Existem validações específicas que o navegador faz para cada type, antão alterar de text para number não é apenas uma alteração de usabilidade, isso tem um efeito também na validação dos inputs.

E ai temos a questão semântica dos dados. Nem tudo que é composto por números, deve ser tratado como número. Se você não precisa realizar cálculos, não tem por que armazenar um dado como numérico. Na verdade, tratando como string, você evita problemas como zero-trailing, por exemplo.
O CEP é um caso de informação que sofre com esse problema, se você coloca um type=number para colher o cep, não vai conseguir preencher um zero à esquerda, 'proibindo' todos os ceps da cidade de São Paulo.
Outro exemplo, o número de um cartão de crédito é composto exclusivamente por números (🤯), mas você nunca vai precisar realizar alguma operação matemática com ele.

Por fim, o input numeric tem um visual específico, que pode mais atrapalhar do que ajudar. Ele traz botões que permitem incrementar ou decrementar seu valor, e isso não é o que esperamos em um campo de CEP ou do cartão de crédito, por exemplo.

Mas então como resolvemos isso? Deixamos a usabilidade de lado e mantemos a semântica dos tipos de dados? Ou ignoramos a semântica e preservamos a usabilidade?

Conheça o inputmode

Aqui está o pulo do gato. Com o atributo inputmode dos inputs, você consegue pedir para o navegador que abra um teclado específico, que atenda melhor sua necessidade. Ou até mesmo para não abrir nenhum teclado, caso sua aplicação implemente um customizado.

<input inputmode="numeric" type="text" />

Note que toda a problemática desenvolvida anteriormente, nasce da confusão entre o tipo dos dados e o formato deles. E essa confusão não é culpa minha nem sua, na verdade isso é um ótimo exemplo, de como precisamos conhecer tanto a linguagem, quanto as plataformas que a executam. Esse problema não existiria se não existissem navegadores em dispositivos móveis.
Se você usa um computador com um teclado físico para preencher um formulário, o inputmode não tem nenhum significado. Você não precisa dele! Mas o cenário muda quando olhamos para dispositivos móveis com seus teclados virtuais.

Os valores possíveis para o inputmode são:

none
Não abre o teclado padrão do sistema operacional.

text (padrão)
Abre o teclado padrão, baseado nas configurações do usuário.

decimal
Abre o teclado numérico com os sepradores de decimal do idioma do usuário (normalmente o ponto ou a vírgula). Alguns dispositivos podem exibir também o símbolo de negativo (-), mas isso não é um padrão.

numeric
Na maioria dos casos, vai abrir o mesmo teclado do decimal, mas pode ser que não traga a tecla de separador decimal. Alguns dispositivos podem exibir também o símbolo de negativo (-), mas isso não é um padrão.

tel
Abre um teclado numérico (0-9) e pelo menos mais dois botões, o asterisco (*) e a cerquilha (#).

search
Um teclado virtualmente otimizado para buscas. Em muitos casos, será identico ao teclaod text (padrão do sistema), mas podes ser que o navegador use essa informação para alterar o 'submit key' (falamos sobre isso em outro artigo). instead.

email
Abre um teclado textual, mas com teclas para @ e . mais acessíveis (sem que o usuário tenha que procurar nos símbolos).

url
Abre um teclado textual, com com teclas comuns em urls, como barra, ponto, dois pontos entre outras possibilidades.

Conclusão

Pensar nos detalhes durante a criação de uma aplicação pode ser o diferencial para o seu sucesso. Aqui estamos falando de um atributo que não tem efeitos colaterais, você adiciona ela ao seu input e ele não muda estilo nem validação, mas trás um benefício gigante para quem usa seu site.

REFERÊNCIAS:
inputmode - HTML: HyperText Markup Language | MDN (mozilla.org)
HTML Standard, Edition for Web Developers (whatwg.org)