Você sabe que apps móveis conectados trazem desafios de design que apps comuns não têm. Reunimos o que aprendemos em um vídeo curto: cinco perguntas que toda tela deve responder, mais algumas regras para telas de celular. Aqui vai o resumo. O vídeo mostra cada uma delas em um app real.
Assista ao passo a passo completo. São menos de seis minutos, com cada dica funcionando em um app real.
Comece pelas decisões, não pelos dados
Sensores enviam um fluxo de valores, mas seu usuário não quer uma lista de leituras. Ele quer tomar uma decisão, como agir ou não. Construa cada tela em torno desse momento e mostre só o que ajuda o usuário a decidir.
Cinco perguntas que toda tela deve responder
Uma boa tela de produto conectado permite decidir com um olhar, respondendo a cinco perguntas, nesta ordem.
- Está tudo bem? Status primeiro, contagem ao lado, problemas no topo. Se tudo estiver bem, a tela deve parecer entediante.
- Posso confiar nisso? Um número sem horário ao lado é um palpite. Coloque data e hora em cada valor e deixe em cinza os desatualizados.
- O que mudou? Uma notificação por problema, não uma por leitura, cada uma dizendo a qual ativo se refere.
- O que devo fazer? Coloque a ação logo ao lado do problema, a um toque de distância, e peça confirmação para tudo o que não dá para desfazer.
- Deu certo? Um comando leva tempo para chegar ao dispositivo, então mostre pendente, depois confirmado ou com falha, e quando.
Um celular não é um desktop pequeno
Um dashboard feito para um monitor grande vira uma parede de números minúsculos no celular, onde as pessoas estão de pé, usam um polegar e olham por poucos segundos. Seis regras mantêm a tela legível:
- Um número por bloco, com sua unidade e sua idade.
- Tabelas viram cards, um valor por linha, o que importa no topo.
- Um gráfico, uma série; um único intervalo, detalhes ao tocar.
- Cor precisa de uma palavra, já que nem todo mundo enxerga cores da mesma forma.
- Mapas só quando a localização é o ponto; nos outros casos, uma lista é mais rápida.
- Dois toques, não dez; deixe assistentes de configuração e edições em massa no navegador.
Nada disso depende de como você constrói. Nativo, React ou outro framework, essas são decisões sobre o que o usuário precisa ver e fazer. Acerte as cinco perguntas e seus usuários vão sentir a diferença.
