Ficha 02 · Protótipo de alta fidelidade, responsividade, acessibilidade e testes

Exercício 1 · Sistema de design e consistência

Um protótipo de alta fidelidade tem três ecrãs diferentes, cada um com um botão de "Confirmar" numa cor diferente (verde, azul e roxo). Explica porque isto é um problema e como um sistema de design evita esta situação.

Exercício 2 · Estados de um botão

Desenha (descreve por escrito) os quatro estados principais de um botão "Adicionar ao carrinho": normal, hover, ativo e desativado. Explica em que situação real o botão apareceria em cada estado.

Exercício 3 · Prototipar um fluxo com estado de erro

Descreve, passo a passo, o protótipo de interação de um formulário de registo com os campos "email" e "palavra-passe", incluindo o caminho de sucesso e pelo menos um caminho de erro (ex.: email já registado).

Exercício 4 · Design responsivo: reorganizar um menu

Um site institucional tem um menu de topo em desktop com 7 itens (Início, Sobre, Serviços, Projetos, Blog, Equipa, Contactos). Explica como adaptarias esse menu para um ecrã de telemóvel (largura inferior a 480px), aplicando o princípio de prioridade de conteúdo.

Exercício 5 · Corrigir problemas de acessibilidade (WCAG)

Um ecrã de checkout tem os seguintes problemas: (a) os campos obrigatórios só têm a borda a vermelho, sem texto; (b) o texto do corpo está a um contraste de 2.8:1 sobre o fundo; (c) o botão "Finalizar compra" só é acessível por rato, não por teclado. Para cada problema, identifica o princípio WCAG (POUR) violado e propõe a correção.

Exercício 6 · Planear um teste de usabilidade

Estás a testar o protótipo de uma app de marcação de consultas. Define: (a) uma tarefa concreta para os participantes cumprirem; (b) o número recomendado de participantes; (c) duas métricas a registar durante o teste.

Exercício 7 · Think aloud e viés do facilitador

Durante um teste de usabilidade, o participante hesita ao tentar encontrar o botão de "Confirmar marcação" e o facilitador, sem querer, aponta para o botão. Explica porque este comportamento invalida parte do teste, e o que o facilitador deveria ter feito.

Exercício 8 · Design inclusivo numa app de saúde

Uma app de acompanhamento de saúde usa, nas suas ilustrações e exemplos, apenas pessoas jovens e sem qualquer referência a limitações físicas. Aponta dois problemas de design inclusivo nesta escolha e propõe uma correção para cada um.