Design de Interfaces e Usabilidade

A aprendizagem ativa funciona especialmente bem neste tópico porque os alunos precisam de vivenciar os conceitos de usabilidade na prática para os compreenderem verdadeiramente. Ao testarem designs e simularem interações, os conceitos abstratos de hierarquia e feedback tornam-se concretos e memoráveis.

• 8° Ano
• Inovação Digital e Pensamento Computacional
• 3 atividades
• 40 min–60 min

Objetivos de Aprendizagem

1. Identificar os princípios de design centrado no utilizador aplicados em websites e aplicações populares.
2. Analisar a hierarquia visual e os padrões de navegação em interfaces digitais para determinar a sua eficácia.
3. Criticar a usabilidade de um protótipo de interface digital com base em critérios de acessibilidade e experiência do utilizador.
4. Criar um wireframe de baixa fidelidade para uma aplicação simples, aplicando princípios de design de interface.
5. Explicar a importância do feedback visual nas interações homem-máquina, utilizando exemplos concretos.

Simulação de Julgamento

⏱ 40 min·Pares

Simulação de Julgamento: Teste de Usabilidade 'Cego'

Um aluno tenta 'navegar' num protótipo de papel de uma app enquanto tem os olhos vendados, sendo guiado apenas pelas descrições de outro aluno que atua como um leitor de ecrã. Isto ajuda a compreender a importância da acessibilidade e da estrutura lógica na interface.

Preparação e detalhes

Como podemos desenhar tecnologias que sejam acessíveis a pessoas com diferentes capacidades?

Sugestão de Facilitação: Durante a Simulação 'Cego', peça aos alunos para descreverem as suas ações em voz alta enquanto navegam, para que possam identificar os pontos de frustração uns dos outros.

Setup: Secretárias reorganizadas de acordo com a disposição de um tribunal

Materials: Cartões de personagem/papéis, Dossiês de provas e evidências, Formulário de veredito para os juízes

• Analisar
• Avaliar
• Criar
• Tomada de Decisão
• Consciência Social

Círculo de Investigação

⏱ 60 min·Pequenos grupos

Círculo de Investigação: Prototipagem em Papel

Em grupos, os alunos desenham os ecrãs de uma aplicação escolar em folhas de papel. Devem criar 'botões' recortados e mostrar como a interface muda quando se clica neles, recebendo feedback imediato dos colegas sobre a facilidade de uso do sistema.

Preparação e detalhes

De que forma a hierarquia visual guia a atenção do utilizador numa página?

Sugestão de Facilitação: Na Prototipagem em Papel, circule pela sala para garantir que todos os grupos incluem elementos de acessibilidade desde o início, como contraste de cores ou botões grandes.

Setup: Grupos em mesas com acesso a materiais de consulta

Materials: Coleção de fontes documentais, Ficha de trabalho do ciclo de investigação, Protocolo de formulação de perguntas, Modelo de apresentação de resultados

• Analisar
• Avaliar
• Criar
• Autogestão
• Autoconsciência

Galeria de Exposição

⏱ 45 min·Pequenos grupos

Galeria de Exposição: Auditoria de Design

Vários exemplos de interfaces (boas e más) são afixados. Os alunos usam post-its para identificar elementos de boa usabilidade (ex: botões claros) e erros comuns (ex: falta de contraste), discutindo no final como as melhorias propostas ajudariam o utilizador.

Preparação e detalhes

Por que razão o feedback visual é crucial em qualquer interação homem-máquina?

Sugestão de Facilitação: Na Auditoria de Design, incentive os alunos a tirarem fotografias dos designs que observam para discutirem depois em grupo, evitando que se foquem apenas em aspetos superficiais.

Setup: Espaço de parede ou mesas dispostas ao longo do perímetro da sala

Materials: Papel de cenário ou cartolinas, Marcadores, Notas adesivas (post-its) para feedback

• Compreender
• Aplicar
• Analisar
• Criar
• Competências Relacionais
• Consciência Social

Ensinar Este Tópico

Este tópico ensina-nos que o design de interfaces não é apenas estético, mas uma questão de comunicação entre o utilizador e a tecnologia. Evite apresentar apenas teorias; em vez disso, use atividades que simulem situações reais, como erros de navegação ou interfaces mal organizadas. A investigação mostra que os alunos retêm melhor quando experimentam diretamente as consequências de um mau design.

O Que Esperar

No final destas atividades, os alunos devem ser capazes de identificar elementos de um design funcional, justificar as suas escolhas com base em princípios de usabilidade e colaborar para melhorar interfaces existentes. A avaliação deve refletir esta capacidade de análise crítica e aplicação prática.

Atenção a estes erros comuns

Erro comum

Durante a Simulação 'Cego', alguns alunos podem pensar que uma app bonita é suficiente.

O que ensinar em alternativa

Durante a Simulação 'Cego', observem como os colegas reagem à navegação sem pistas visuais. Peça-lhes para anotarem onde sentiram mais dificuldade e discutam como um design funcional reduziria essa frustração.

Erro comum

Durante a Prototipagem em Papel, os alunos podem ignorar a acessibilidade por acreditarem que é um detalhe menor.

O que ensinar em alternativa

Durante a Prototipagem em Papel, mostre exemplos de interfaces inacessíveis e peça aos alunos para testarem os seus protótipos com os olhos vendados ou simulando limitações motoras, reforçando que a acessibilidade é um princípio fundamental.

Ideias de Avaliação

Bilhete de Saída

Após a Simulação 'Cego', distribua cartões com o nome de uma aplicação conhecida e peça aos alunos para escreverem duas características de design que tornam a aplicação fácil de usar e uma sugestão de melhoria focada na usabilidade.

Avaliação entre Pares

Durante a Prototipagem em Papel, os alunos trabalham em pares para desenhar um wireframe simples de uma nova funcionalidade. Depois, trocam os wireframes e avaliam-se mutuamente, respondendo a duas perguntas: 1. A navegação é clara? 2. Onde poderia o utilizador ficar confuso? Cada par assina o wireframe avaliado.

Verificação Rápida

Após a Auditoria de Design, apresente uma imagem de um website com uma hierarquia visual confusa e peça aos alunos para identificarem, num parágrafo curto, quais os elementos que competem pela atenção e como a sua disposição afeta a compreensão da página.

Extensões e Apoio

• Desafio: Peça aos alunos que criem um protótipo digital simples usando uma ferramenta como Figma ou Canva, aplicando os princípios aprendidos.
• Scaffolding: Para alunos com dificuldades, forneça exemplos de interfaces bem e mal desenhadas para que possam comparar antes de iniciarem as atividades.
• Exploração mais profunda: Convide um designer de UX local para uma videochamada, onde os alunos possam fazer perguntas sobre o processo de design e usabilidade na indústria.

Vocabulário-Chave

Design Centrado no Utilizador	Uma abordagem de design que prioriza as necessidades, desejos e limitações dos utilizadores finais em todas as fases do processo de desenvolvimento.
Usabilidade	A qualidade que torna uma interface fácil de usar, permitindo que os utilizadores atinjam os seus objetivos de forma eficiente, eficaz e satisfatória.
Hierarquia Visual	A organização e apresentação de elementos numa interface para guiar o olhar do utilizador e indicar a importância relativa de cada componente.
Feedback Visual	Informação apresentada ao utilizador através de elementos visuais (como mudanças de cor, ícones ou animações) para indicar o resultado de uma ação ou o estado do sistema.
Wireframe	Um esboço visual de baixa fidelidade que representa a estrutura e o layout de uma página web ou aplicação, focando-se na disposição dos elementos e na funcionalidade, sem detalhes visuais.