Produto
Interface
Princípios para organizar informação, ações e fluxos na experiência Agenu.
Princípio de interface
Estruture antes
de decorar.
A forma deve ajudar a compreender a tarefa antes de chamar atenção para si.
Estrutura da tela
A interface Agenu é uma ferramenta de trabalho, não uma apresentação institucional. Antes de escolher card, modal ou tabela, defina o que a pessoa precisa compreender, decidir e fazer naquele momento.
- 01Contexto
Onde estou, para quem é esta tarefa e o que mudou?
- 02Informação
O que precisa ser lido ou comparado para seguir?
- 03Ação
Qual decisão deve ser possível agora?
- 04Detalhes
O que apoia a decisão sem competir com ela?
Esta sequência orienta a leitura, não cria um template rígido. Uma tela começa pela necessidade da tarefa — não por um componente pronto.
Ideias que orientam a interface
Estrutura primeiro
Comece pelo contexto, pela informação e pela tarefa — nunca pelo componente disponível.
Hierarquia visível
Posição, escala, contraste e espaço tornam a prioridade compreensível antes da cor.
Ação no contexto
Ações ficam próximas do que afetam e recebem o peso proporcional à decisão.
Densidade adequada
A quantidade de informação acompanha a tarefa, com leitura orientada e sem ocultar o necessário.
Padrões previsíveis
Relações semelhantes preservam linguagem, comportamento e retorno reconhecíveis.
Hierarquia e ações
Em poucos segundos, a pessoa deve localizar o contexto, o conteúdo principal, a ação prioritária e as alternativas secundárias. Um título específico orienta; o subtítulo acrescenta contexto quando reduz dúvida.
Terça-feira, 18 de junho · Centro
Adicionar agendamentoNem todo cabeçalho precisa de um botão verde. Ação principal é uma decisão contextual, não uma decoração recorrente. Use os verbos definidos em Voz: salvar, confirmar, cancelar e voltar têm significados distintos.
Superfícies e navegação
Use card quando houver agrupamento, contexto ou interação.
Espaçamento e hierarquia geralmente resolvem a leitura. Evite card dentro de card; bordas e sombras devem separar, não competir.
Mostre onde a pessoa está, para onde pode ir e como retornar.
Sidebar fixa não é padrão universal. Breadcrumbs e abas entram quando explicam a relação com o contexto; o estado ativo não depende somente de cor.
Agenu Green apoia prioridade, seleção, foco ou presença de marca. Ele não significa sucesso por si só e não deve ser o único sinal de estado.
Formulários
Organize um formulário pela tarefa mental da pessoa, não pela estrutura do banco. Cada campo tem label visível; placeholder não substitui instrução. Ajuda aparece apenas quando reduz uma dúvida real, e campos obrigatórios são identificados com clareza.
Revise os campos indicados. O serviço precisa estar definido antes de confirmar o agendamento.
Agrupe e ordene campos conforme a sequência da tarefa. Mensagens de erro ficam próximas do que precisa ser corrigido, e a ação final descreve o resultado real.
Listas, tabelas, busca e filtros
Listas e tabelas são ferramentas válidas para comparar informação operacional densa. Não transforme toda tabela em cards no mobile: preserve a tarefa e reorganize apenas o que for necessário para leitura e decisão.
- Busca
- Encontra um item conhecido, como um paciente ou agendamento.
- Filtro
- Restringe o conjunto de trabalho por período, profissional, unidade ou estado.
Overlays, estados e feedback
Concentre uma decisão curta.
Modal ou drawer não são destino para um fluxo inteiro. Uma confirmação destrutiva pode pedir contenção; uma tarefa longa precisa de contexto próprio.
O cenário real também é interface.
Loading, vazio, sem resultado, sucesso, erro, bloqueio e disabled preservam a orientação e indicam o próximo passo.
Responda onde a ação aconteceu.
Feedback pode aparecer junto ao campo, registro ou fluxo. Toast é uma opção, não o nome de toda resposta do sistema.
Densidade, responsividade e consistência
Uma agenda pode precisar de horário, paciente, serviço, profissional e estado ao mesmo tempo. Remova ruído, não o contexto necessário para operar.
Mobile reorganiza a tarefa: prioriza informação, mantém a ação acessível e revela detalhes no momento adequado. Não é apenas o desktop reduzido.
Relações semelhantes usam os mesmos significados, ordem de leitura e resposta. Variações entram somente quando ajudam a tarefa.
Contraste, foco por teclado, labels, semântica, alvos de toque e conteúdo compreensível sem depender de cor são requisitos da interface desde o início.
Faça / Evite
Use títulos específicos e destaque a prioridade com mais de um sinal visual.
Não esconda contexto necessário apenas para produzir uma tela mais vazia.
Checklist antes de seguir
- A pessoa entende o contexto antes de encontrar os detalhes?
- A informação principal aparece antes de alternativas secundárias?
- A ação está próxima do que afeta e usa o verbo correto?
- Superfícies, tabela, overlay e feedback foram escolhidos pela tarefa?
- A tarefa continua compreensível em telas menores e sem depender apenas de cor?