- Início
- Marca e design
- Design de interface
Design de interface · telas de sistema e aplicativo
Faça a tarefa duas vezes. Conte os seus passos.
O mesmo sistema de uma oficina de bicicletas, em duas telas. Abra a ordem de serviço da Ana nas duas e veja a conta dos seus passos. É isso que o design de interface muda.
A tarefa A Ana Prado trouxe a bicicleta: o freio traseiro está travando. Abra a ordem de serviço dela, nas duas telas.
A Tela de hoje
Preencha os campos marcados com *.
OS-R ordem rápida · OS-E ordem de estoque · BALC balcão · REV revisão · GAR garantia · ORÇ orçamento
Cadastros · ordem de código
- Seus toques aparecem aqui, um por um.
B Tela redesenhada
-
Basta o começo do nome.
-
Cliente: —
O que a bicicleta precisa?
-
Confira e abra
- Seus toques aparecem aqui, um por um.
A · Tela de hoje
0passos
0campos
0tropeços
B · Tela redesenhada
0passos
0campos
0tropeços
Faça a ordem nas duas telas. A conta aparece aqui, com os seus números.
Como esta conta é feita
Cada botão que você toca conta um passo. Cada campo que você preenche ou escolhe conta um campo. Cada vez que a tela barra você, conta um tropeço. A conta é do seu toque, feita no seu aparelho: nenhuma média nossa, nada enviado e nada guardado.
As duas telas foram montadas pela Feitaz para esta demonstração. Não são o sistema de nenhuma empresa.
-
Sigla antes do nome. A tela de hoje pergunta sigla, classe e registro, e avisa no alto, sem dizer qual campo faltou.
-
Quem, o quê, confirmar. A busca acha o cliente pelo começo do nome, o serviço vem escrito em palavra de balcão e a ordem abre em três toques.
-
A conta é sua. Com a página interativa, os números são os do seu toque. Sem a interação, a diferença aparece no próprio desenho: uma tela pergunta tudo de uma vez, a outra uma coisa por vez.
01 — O que mudou
Três decisões encurtaram o caminho.
Não foi a cor. Foi a ordem das perguntas, a palavra que o balcão usa e o recado na hora certa. Você acabou de sentir as três.
-
A primeira decisão
A ordem
antessigla, classe, registro, previsão e uma lista de nomes, tudo de uma vez
depoisquem trouxe a bicicleta? Só depois, o que ela precisa
A tela de hoje pergunta o que só o sistema sabe. A redesenhada começa pelo que o balcão tem na frente.
-
A segunda decisão
A palavra
antesTipo atend.: OS-R · Classe: B
depoisO que a bicicleta precisa? Freio traseiro
A mesma informação, na palavra de quem atende. A sigla continua existindo por dentro, no relatório, e some da frente de quem está com a bicicleta no suporte.
-
A terceira decisão
O recado
antesno alto da tela: “Preencha os campos com *”
depoisno campo que falta: “Escolha o serviço”
O erro diz o que fazer e onde. Quando o aviso aparece longe do campo, a pessoa procura o problema em vez de resolver, e o cliente espera no balcão.
02 — As peças e as regras
Mude uma cor. O sistema acompanha.
É o que mantém a tela quarenta parecida com a primeira: botão, campo, aviso, cartão e tabela leem os mesmos valores. Gire os controles e veja.
Os valores do sistema
- Cor de destaque
- hsl(16 100% 56%)
- Canto das peças
- 24px
- Altura dos botões
- 52px
- Tamanho do texto
- 100%
Medido agora, no que está desenhado
- Texto do botão sobre a cor—passa
- Rótulo em destaque sobre o branco—passa
- Tamanho do botão para o toque—passa
Esta combinação reprova no mínimo de leitura.
Mínimos de leitura (4,5 para 1) e de toque (44 px) das regras de acessibilidade da web.
Ordem 118 aberta hoje
Oficina Raio Doze · balcão
Cadastro 2490
| Item | Prazo | Valor |
|---|---|---|
| Ajuste do freio | hoje | R$ 40 |
| Pastilha | hoje | R$ 80 |
- normal
- ponteiro em cima
- foco do teclado
- ocupado
- indisponível, com o motivo
- Abrir a ordempadrão
- Abrir a ordemoutra cor, canto reto
- Abrir a ordembotão pequeno, abaixo do mínimo
- Vira peçao que se repete em três telas ou mais: botão, campo, aviso, cartão, tabela. Cada uma com nome e estados.
- Fica na telao que só existe uma vez: um gráfico, um passo a passo, uma arte.
- Vira regra escritao que já deu errado uma vez: o botão que sumia no celular, o recado que ninguém entendia.
03 — O que você recebe
Fluxos, telas e versão clicável.
O suficiente para programar, conferir e continuar depois sem adivinhar. Aqui, o que a tarefa da Ana entregaria.
-
Fluxos
O caminho de cada tarefa
A · tela de hoje
- Nova OS
- Tipo
- Classe
- Registro
- Tomador
- Lista
- Gravar
B · tela redesenhada
- Cliente
- Serviço
- Abrir
O mapa da tarefa, com o que a pessoa vê em cada parada e o que pode dar errado no meio.
-
Telas em alta
Cada tela, com as medidas
Captura da tela B desta página. Negócio de exemplo. A tela como será programada: alvo de toque no tamanho certo, texto com medida de leitura e o estado de cada peça.
-
Versão clicável
Tocar antes de programar
- clienteAnaAna PradoAna Paula Reis
- serviçoFreio traseiroRevisão geralPneu
- confirmarAna Prado · Freio traseiroAbrir a ordem
As telas ligadas pelos toques, para o seu time percorrer e opinar antes de uma linha de código.
Perguntas reais
O que perguntam antes de desenhar a primeira tela.
Isso é só deixar bonito?
Não. O trabalho começa na ordem das perguntas, na palavra que a pessoa entende e no recado na hora certa, exatamente o que você sentiu nas duas telas. Cor, letra e espaço vêm depois, com regra e medida, como nos medidores acima.
Quem programa as telas depois?
Se o sistema for construído pela Feitaz, as telas e as peças já nascem no mesmo lugar em que o código é escrito. Se quem programa for outra pessoa ou empresa, ela recebe as telas com as medidas, os estados de cada peça e a regra escrita.
Meu sistema é antigo. Preciso jogar fora?
Não é a primeira opção. Em geral começamos pela tela que mais dói no dia a dia e pelas tarefas em que a equipe mais erra; o resto continua como está até fazer sentido mexer. Se a base do sistema não aceitar a mudança, dizemos isso antes de você decidir.
Funciona no celular e para quem enxerga mal?
Sim. O celular costuma mandar no desenho, porque é nele que o balcão, o motorista e o vendedor estão. Contraste medido na cor desenhada, alvo de toque no tamanho certo, foco visível no teclado e nada dito só por cor. É o que os medidores desta página mostram ao vivo.
Quanto tempo leva?
As telas são feitas sob medida. Você recebe o escopo, o preço e o prazo na proposta por escrito antes de começar. O prazo conta em dias corridos a partir do dia em que recebemos os materiais e acessos combinados, e a data de entrega fica escrita na proposta. Quanto mais prazo, menor o preço. Cada serviço tem os prazos possíveis para o seu escopo, e o projeto oferece os que valem para todos os itens escolhidos. Se algo do seu lado atrasar uma etapa, avisamos na hora o impacto e a nova data; correção de falha nossa nunca suspende o prazo. Entregas em 7 dias e em 1 a 3 dias dependem de vaga na agenda.
E se não ficar pronto no prazo?
Se não entregarmos o escopo contratado no prazo acordado por motivo atribuível à Feitaz, devolvemos integralmente o valor pago pelo projeto. Escopo, datas e dependências ficam definidos antes da contratação. A garantia não limita os direitos previstos em lei. “Pronto” é o combinado por escrito antes de começar: as telas listadas na proposta, com os estados e as regras, aprovadas por você.
Dá para começar por uma tela só?
Dá, e costuma ser o melhor começo: uma tela, uma tarefa, a que mais dói. As peças e as regras vêm depois, quando as telas já provaram o padrão. É mais barato organizar um sistema com exemplos reais na mão do que no papel.
Como contratar
Proposta com preço fechado antes de começar
Cada projeto deste tipo é desenhado para o seu caso. Você recebe por escrito o escopo, o prazo e o preço antes de começar, e só começa se estiver de acordo.
Seu próximo grande feito
Mande a tela que mais dói hoje.
Conte como a sua equipe usa o sistema e onde ela erra. A proposta chega por escrito, com escopo, prazo e preço. Durante o projeto, você fala direto com o programador pelo WhatsApp.