Skip to main content

ADR-0009 — Princípios de Interface e Experiência do Usuário

Status​

Aprovado

Contexto​

O sistema EBDbe será utilizado predominantemente em dispositivos móveis (PWA instalado no celular), conforme ADR-0000 e ADR-0001. O público é diverso em idade e familiaridade com tecnologia: professores, secretários, superintendentes e alunos.

A interface deve ser:

  • Agradável e suave ao uso
  • Prática e objetiva
  • Simples de aprender
  • Adequada ao contexto de igreja e Escola Bíblica Dominical

É necessário estabelecer princípios claros de UI/UX antes do início do desenvolvimento.

Referência de inspiração: O estilo de experiência do Airbnb (airbnb.com.br) será utilizado como referência para equilíbrio entre clareza, leveza e usabilidade prática.

Decisão​

O sistema adotará os seguintes princípios de interface e experiência do usuário:

1. Princípios Gerais​

PrincípioDescrição
Mobile-firstLayout pensado primeiro para tela pequena; adapta-se fluidamente a telas maiores
SuavidadeAnimações breves (200–400ms), transições discretas, feedback visual imediato
PraticidadeMínimo de toques para ações comuns, hierarquia visual clara
Touch-friendlyÁreas de toque mínimas de 44px, espaçamento adequado entre elementos clicáveis
ClarezaTipografia legível, contraste adequado, ícones reconhecíveis
ConsistênciaPadrões visuais e de interação uniformes em todo o app
LevezaEstética limpa, sem poluição visual
Espaço em brancoRespiro visual; evitar densidade excessiva de informação
Tom acolhedorInterface amigável e convidativa, adequada ao contexto comunitário

2. Diretrizes Mobile (inspiradas no Airbnb)​

  • Navegação por bottom bar ou drawer nas telas principais
  • Conteúdo em cards com bordas arredondadas; layout escaneável, um conceito principal por card
  • Conteúdo prioritário acima da dobra; scroll natural e fluido
  • Ações principais destacadas (botão preenchido); ações secundárias com botão outline/ghost
  • Feedback tátil (HapticFeedback) em ações de confirmação
  • Skeleton loaders em carregamento de listas/cards (evitar spinners genéricos)
  • Bottom sheet para filtros e opções em vez de modal de tela cheia quando possível

3. Referência Visual (estilo inspirado no Airbnb)​

  • Material Design 3 como base do design system
  • Layout inspirado no Airbnb: cards com bordas arredondadas, muito espaço em branco, hierarquia visual por imagem/conteúdo em destaque
  • Bordas generosamente arredondadas (8–16px); botões com cantos pill quando apropriado
  • Sombras sutis e discretas; profundidade sem peso visual
  • Paleta suave com cor de acento cálida e convidativa
  • Tipografia limpa, hierarquia clara entre títulos e corpo

4. Animações​

  • Duração: 200–400ms para transições de tela e microinterações
  • Evitar animações longas (> 500ms)
  • Usar curvas suaves (ease-in-out)
  • Animações devem ter propósito, não decorativas

5. O Que Evitar​

  • Animações excessivas ou chamativas
  • Muitos níveis de navegação aninhados
  • Texto em tamanho menor que 14sp para conteúdo principal
  • Elementos clicáveis pequenos ou muito próximos
  • Cores que dificultem leitura ou acessibilidade

6. Acessibilidade​

  • Contraste mínimo conforme WCAG 2.1 nível AA
  • Suporte a ampliação de texto do sistema
  • Labels e descrições para leitores de tela

7. Estado Logado e Conta​

  • Após login, o header/topo deve exibir foto/avatar do usuário no lugar da ação "Entrar"
  • A foto pode vir do provedor OAuth ou ser customizada no perfil do usuário
  • Clique no avatar deve abrir popup/menu de conta com informações básicas e ação "Sair"
  • Regras detalhadas de perfil e ciclo de vida: ADR-0013

8. Seleção e cópia de texto​

  • Em todas as páginas da solução, o texto exibido na interface deve permitir seleção, cópia e cola quando fizer sentido (conteúdo legível pelo usuário).
  • Campos de entrada (inputs) já permitem edição e cola por padrão; não bloquear cola neles.
  • Texto somente leitura (labels informativos, mensagens, conteúdo de cards, etc.) deve ser selecionável para que o usuário possa copiar (Ctrl+C / menu de contexto / gesto longo).
  • Exceções (não devem ser selecionáveis):
    • Textos puramente decorativos ou de um único caractere (ex.: iniciais em avatar).
    • Textos que funcionam como label de controle acionável: qualquer componente que tenha comando ou ação associada ao gesto do usuário (clique, duplo clique, toque longo, etc.) não deve ter o texto selecionável, para não interferir na usabilidade do toque/clique. Inclui, entre outros: labels de botões (TextButton, FilledButton, OutlinedButton, IconButton), ChoiceChip, opções de lista ou menu clicável, itens de TabBar, links que navegam ou disparam ação, tiles clicáveis.
  • Objetivo: acessibilidade, reutilização de informações (anotações, compartilhamento) e consistência de comportamento em todo o app.

Consequências​

  • O desenvolvimento da camada presentation seguirá estes princípios.
  • Novos componentes e telas devem validar conformidade com o ADR.
  • Alterações na diretriz de UI/UX exigirão revisão deste ADR.
  • O tema Flutter será configurado conforme Material 3 e paleta definida.
Last updated on