Ficha 01 · Planear, estruturar e desenhar o protótipo

Exercício 1 · Escolher o nível de fidelidade

Para cada situação, indica qual o nível de fidelidade mais adequado (esboço em papel, wireframe, maqueta ou protótipo interativo de alta fidelidade) e justifica em uma frase: (a) a equipa tem 15 minutos para gerar ideias diferentes para um novo ecrã; (b) é preciso validar se a estrutura de navegação faz sentido antes de decidir cores; (c) um cliente quer ver o aspeto final antes de aprovar o orçamento; (d) a equipa vai testar com utilizadores reais a experiência completa de compra.

Exercício 2 · De um dado de investigação a uma decisão

Em três entrevistas separadas, utilizadores diferentes dizem "nunca sei se a minha encomenda foi mesmo enviada". Identifica o padrão, propõe uma decisão de desenho concreta para o resolver, e explica a que conceito da UC essa decisão está ligada (modelo mental, estado de sucesso, ou outro).

Exercício 3 · Mapear um fluxo com caminho alternativo

Desenha, em texto (setas e caixas), o fluxo de "recuperar palavra-passe" de uma aplicação: deve incluir o caminho normal e pelo menos um caminho alternativo (erro). Explica porque o caminho alternativo não pode ser deixado para o fim, desenhado à pressa.

Exercício 4 · Estruturar um wireframe

Descreve, em texto, o wireframe de um ecrã de "lista de resultados de pesquisa" numa app de reservas: indica o que aparece no cabeçalho, no corpo e no rodapé, e explica porque um wireframe não deve ter cor nem imagens finais.

Exercício 5 · Aplicar grelha, tipografia e cor

Um ecrã tem três tamanhos de texto usados sem critério e uma paleta de sete cores diferentes espalhadas sem lógica. Propõe uma correção: quantos tamanhos de texto manterias e para quê, e como organizarias a paleta de cor em três a quatro categorias com significado.

Exercício 6 · Design UI: ícones e botões consistentes

Um protótipo mistura ícones de contorno com ícones preenchidos, e tem três estilos diferentes de botão principal em ecrãs diferentes. Explica que problema isto causa ao utilizador e como corrigirias, referindo o conceito de consistência.

Exercício 7 · Adaptar um ecrã ao design responsivo

Um ecrã de listagem mostra três cartões lado a lado em computador. Explica como o adaptarias para telemóvel: define o ponto de quebra, o que muda na disposição e o que muda no tamanho dos alvos de toque.