Formulários Mobile

TADS
Usabilidade e Acessibilidade
Multimídia
Aula 7 – Segundo Bimestre
Abordagens Práticas Para
Melhorar a Interação com Sites

Objetivos
• Entender quais são as principais
falhas na elaboração de bons
formulários para dispositivos
móveis.
Anselmo Battisti - anselmo@webgenium.com.br 2

Formulários de novo?
• Sim, formulários em geral são o
ponto final da jornada no usuário no
site, hoje a abordagem é no mobile!

Regra #1
• O formulário deve ser compatível
com a forma como o usuário insere
os dados!

Regra #2
• Minimize o número de campos
• Diminua o esforço que o usuário
fará para preencher os dados.

According to
marketingtechblog.com, your
conversion rate may be 50% higher
if you stick to 2-3 form fields. This
ultimately means that you are losing
out on half of your potential sales
just because your form is too long.
Can you afford to lose 50% of your
annual revenue? Probably not.

Regra #2.1
• Defina de
maneira
inteligente os
valores padrões
dos campos;

Regra #2.2
• Use radio group
para opções
exclusivas;
• De preferência para
posicionamentos
horizontais.

Regra #2.3
• Use sliders para
intervalo de preços;
• Mantenha visível o
valor mesmo
durante o uso do
slider.

Regra #3
• Labels ou são acima ou são
fluentes à esquerda!

Regra #3.1 placeholder
1. Perda de
contexto;
2. Usuário assume
que o texto dentro
do campo é um
valor padrão.

Regra #3.2 esquerda
• Largura da tela!

Regra #3.2 topo
• O usuário sempre saberá o que ele
está preenchendo;
• Campo sempre poderá usar o tamanho
máximo da tela;
• Tamanho mínimo da fonte 16px! (pelo
amor de deus)

Regra #3.2 topo
• Como ponto negativo temos o
aumento da altura do formulário,
mas no mobile é normal rolar a tela
verticalmente então .... De boa!

Regra #3.3 Flutuante
• Troca do placeholder pelo label!

Regra #4
• Validação em tempo real!

Regra #5
• Combine o teclado com o tipo de
entrada de dado!

Regra #6
• Sempre que NECESSÁRIO providencie informações
extra sobre o contexto!
• Se for um campo de intervalo de dada disponibilize um
calendário!
• Após o preenchimento dos campos informe quantos
dias ele selecionou no intervalo!
• Evite mais do que 100 caracteres de explicação, se
muito necessário coloque um link para um popup!

Regra #7
• Evite o uso de campo múltiplos
quando necessário formatação
específica, por exemplo, data,
número de cartão de crédito!

• Pense globalmente,
em algumas culturas
as pessoas não tem
sobrenome!
(MYANMAR)
• Em outras culturas
primeiro se escreve o
sobrenome depois o
nome! (Asia)

Regra #8
• Se for impossível minimizar o
número de campos separe eles em
etapas!

https://www.autoglass.co.uk/ideal/?no_cache=1
• O que poderia ser
melhorado nesse
formulário?

Regra #9
• Evite listas e caixas de seleção!
• No lugar use caixas de texto com
autocompletar ou campos de
radiobuton!

Regra #10
• A última etapa do formulário é o botão!
• Centralizado;
• Cor adequada;
• Evite termos genéricos do tipo “Enviar”
no lugar use “Finalizar Cadastro”,
“Processar Compra”

Regra #11
• Sempre que possível persista os
dados do usuário para caso ele
volte a usar aquele formulário os
dados padrões (e-mail, telefone,
etc) já estejam preenchidos.

Regra #12
• Não use campos do
tipo password!

Regra #12

Check List
•https://www.nngroup.com/articles/m
obile-input-checklist/

Referência
• https://uxplanet.org/mobile-form-usability-
2279f672917d
•http://www.uxmatters.com/mt/archives/2017/02/
8-best-practices-for-mobile-form-design.php
•https://speckyboy.com/10-methods-for-
optimizing-your-forms-for-mobile-devices/

Formulários Mobile

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Anselmo Battisti

Mais de Anselmo Battisti (6)

Formulários Mobile