MAPA – INTERFACE HUMANO-COMPUTADOR – 51_2026

Agora é hora de aplicar os conceitos aprendidos na disciplina em um cenário prático, vamos lá?

Cenário: 

Imagine que você foi contratado por uma clínica médica para desenvolver a interface de cadastro de pacientes no novo sistema de agendamento de consultas médicas. A tela deverá funcionar bem em dispositivos como Tablets ou iPads, priorizando usabilidade, legibilidade e acessibilidade.

O que deve ser desenvolvido:
Com base no cenário apresentado, desenvolva um protótipo com layout responsivo, simulando uma tela real do sistema voltada para dispositivos como Tablet ou iPad. Considere boas práticas de design centrado no usuário, responsividade e organização visual.

Requisitos da Tela:

Sessão: Informações do Paciente
Campos:
– Código do Paciente (Campo numérico, não editável, gerado automaticamente).
– Nome Completo (Campo de texto).
– Data de Nascimento (Campo de seleção de data).
– CPF (Campo de entrada com máscara).
– Sexo (Opções: Masculino, Feminino, Outro, Prefiro não informar).
– Telefone de Contato (Campo de entrada com máscara).
– E-mail (Campo de entrada validando formato de e-mail).

Sessão: Endereço
Campos:
– CEP (Campo de entrada com máscara para validação).
– Endereço Completo (Campo de texto).
– Número (Campo numérico).
– Complemento (Campo de texto).
– Bairro (Campo de texto).
– UF (Dropdown com estados brasileiros).
– Cidade (Dropdown dinâmico com base na UF).

Sessão: Informações Adicionais
Campos:
– Plano de Saúde (Dropdown com opções).
– Número da Carteirinha (Campo de texto).
– Data de Validade do Plano (Campo de data).
– Checkbox: “Autorizo o uso dos meus dados para fins de agendamento e atendimento médico, conforme LGPD.”

Botão:
– Salvar Cadastro (Botão para submeter o formulário).

Instruções para o Desenvolvimento:

– Use uma ferramenta de prototipação como Figma, Adobe XD, Pencil ou outra de sua preferência.
– Organize os campos de maneira limpa, lógica e responsiva, ideal para uso com toque em tablets.
– Priorize legibilidade, contraste, espaçamento adequado e feedback visual nos botões e campos.
– Para enviar, dê um print em cada tela e cole no formulário disponibilizado no material da disciplina.