🖼️ Atividade 06: Prototipagem e Wireframes

🎯 Objetivo da Aula

Ao final desta atividade, você será capaz de:

• Criar Wireframes (protótipos de baixa fidelidade) focados na funcionalidade, não na estética.
• Projetar a Jornada do Usuário (o fluxo lógico de cliques entre as telas).
• Validar se os requisitos e casos de uso das aulas anteriores estão visíveis e acessíveis na interface (Usabilidade).

🏢 O Cenário Prático (Seu Desafio)

Na TecProExpress, você apresentou o Diagrama de Casos de Uso (Atividade 05). O Diretor de Marketing gostou, mas comentou: "Legal, mas como isso vai aparecer na mão do motorista? Vai ser fácil dele clicar com a mão suja ou usando luvas? Onde fica o botão de emergência?".

"Seu desafio como Designer de Interface (UI/UX) é desenhar o 'esqueleto' (Wireframe) das telas principais. Você não precisa de cores bonitas agora, você precisa provar que o fluxo de navegação é intuitivo o suficiente para que um motorista com pressa consiga usar o App sem treinamento."

🧠 Fundamentos: A Teoria Traduzida

A prototipagem é a ferramenta mais barata da engenharia. É muito mais fácil apagar um desenho do que refazer um banco de dados.

Wireframe vs Protótipo de Alta Fidelidade

• Wireframe (Esqueleto): Preto e branco, focado no lugar dos botões e campos de texto. Resolve a Usabilidade.
• Alta Fidelidade: Cores, logos e imagens reais. Resolve a Estética.

Jornada do Usuário

É o mapa de cliques. Se para fazer um rastreio o motorista precisa clicar em 10 telas diferentes, a sua jornada está ruim. O objetivo é o "Menor Caminho Crítico".

📊 Visualizando a Lógica

📖 Exemplo Guiado

Abaixo, veja como planejar as telas para o aplicativo da TecProExpress.

📊 Fluxo de Transição e Navegação de Telas (TecProExpress)

🛠️ Estrutura de Validação da Tela

Para cada tela desenhada, responda:

1. Qual o objetivo desta tela? (Ex: "Fazer o login").
2. Qual o elemento principal (Call to Action)? (Ex: "Botão Entrar").
3. Quais requisitos da Atividade 03 estão aqui? (Ex: "RF01 - Login").

🔍 Detalhamento do Processo:

• Note que a prototipagem expõe falhas nos requisitos. Se você desenhou um botão de "Esqueci minha senha", mas não escreveu esse requisito na Atividade 03, você acaba de descobrir uma Lacuna de Requisitos. Parabéns, você está fazendo engenharia de verdade!

🛠️ Prática Obrigatória 1: Os Wireframes

Cenário: O projeto semestral da sua equipe.

1. Defina as 3 telas principais do seu sistema.
2. Utilizando uma ferramenta (Figma, Balsamiq, Draw.io ou papel e caneta), desenhe os wireframes (esqueletos) dessas 3 telas.
   • Foque na disposição dos elementos.
   • Use retângulos para botões, "X" em caixas para imagens.
   • Proibido usar cores ou fotos nesta etapa.

🏁 Resultado Esperado (Para sua Referência)

Imagens dos 3 esqueletos (PNG/JPG) mostrando a estrutura lógica da interface.

🛠️ Prática Obrigatória 2: O Fluxo de Navegação

Cenário: Conectando os desenhos.

1. Desenhe setas entre os seus wireframes (ou faça um pequeno diagrama) mostrando como o usuário navega da Tela 1 para a Tela 2 e como ele volta.

🏁 Resultado Esperado (Para sua Referência)

Um diagrama de fluxo de telas (Storyboarding) que prove que o usuário não fica "preso" em nenhuma parte do sistema.

📤 Instruções de Entrega (Microsoft Teams)

Após validar seus desenhos:

1. Salve o arquivo de documentação com o nome Atividade_06.md e as imagens dos seus wireframes na pasta es-atv-06-prototipagem/ do seu repositório GitHub.
2. Certifique-se de fazer o commit e push para o repositório público.
3. Submeta o link do seu repositório no Microsoft Teams para avaliação do professor.

💡 Checkpoint de Lógica

📊 Rubrica Formativa de Avaliação