Stela Laboratório de Inovação IV Aulas Aula 7
Telas no papel
Wireframes e fluxos desenhados e testados antes de programar.
Desenhar as telas e os fluxos da solução e validar com colegas.
Ter o backlog priorizado da aula 6.
Wireframes no Moodle.
Rascunho que economiza código
Fidelidade
Baixa: papel, Whiteboard, caixas e setas. Serve para testar a ideia e o fluxo. Alta: parece o produto final. Serve para testar detalhes.
Começar pela baixa é barato: apagar um retângulo custa segundos.
Wireframes e fluxos
O wireframe mostra o que tem em cada tela. O fluxo mostra o caminho entre elas: do login até a tarefa principal, no menor número de passos.
Sete cliques para reservar uma sala
No protótipo de papel do grupo fictício Sala Livre, reservar uma sala levava sete telas. No teste rápido, o colega de outro grupo desistiu na quarta.
Para discutir em grupo
- Quais telas poderiam ser juntadas?
- Qual é a tarefa principal do sistema de vocês, e quantos passos ela leva?
- Por que é melhor descobrir isso no papel?
Caso fictício, criado para a aula.
Wireframes e validação
Em grupo, no Whiteboard. O que você marcar fica salvo neste navegador.
Desenho fora da tela
Artes
Wireframe é desenho de interface: hierarquia, espaço e o olhar do usuário guiado para o que importa.
Matemática
Cada passo a mais no fluxo perde usuários. Contar os cliques é medir a facilidade.
Para estudar e praticar
Wireframes no Moodle
Na próxima aula, a sprint 1 fecha com a apresentação da prova de conceito.