Ficha 02 · UX, wireframes, responsividade, prototipagem e publicação

Exercício 1 · Wireframe, mockup ou protótipo

Classifica cada descrição como wireframe, mockup ou protótipo: (a) esboço a preto e branco só com retângulos e linhas a indicar onde ficam os blocos de conteúdo; (b) versão já com cores, tipografia e imagens finais, mas sem ligações clicáveis; (c) a mesma versão anterior, mas agora com ligações que permitem navegar de ecrã em ecrã.

Exercício 2 · Conhecer o utilizador

Vais desenhar a app de encomendas de uma pastelaria de bairro. Define, em três frases, as necessidades, os comportamentos e as preferências prováveis do utilizador típico desta app.

Exercício 3 · Mapa do site e arquitetura de informação

Desenha (em texto, como uma árvore) o mapa do site de uma pastelaria com as secções: Início, Menu (com Doces e Salgados), Encomendas, Sobre nós, Contactos.

Exercício 4 · Mobile-first na prática

Um colega escreveu primeiro o CSS para desktop (4 colunas) e agora está a "apertar" o layout para caber em telemóvel, com várias media queries a corrigir problemas. Explica o que é a abordagem mobile-first e reescreve o raciocínio (não o código completo) pela ordem correta.

Exercício 5 · Planear um teste de usabilidade

Vais testar o protótipo da app de encomendas com 3 utilizadores. Define: (a) uma tarefa concreta a pedir; (b) duas coisas que vais observar durante o teste; (c) o que fazes depois de identificar um problema.

Exercício 6 · Checklist antes de publicar

A app de encomendas está pronta para publicar. Preenche a checklist com o que falta confirmar antes de a colocar em produção, cobrindo pelo menos quatro critérios diferentes.

Exercício 7 · Segurança, saúde e ambiente

Explica, com um exemplo cada, o que significam nesta UC: (a) uma norma de segurança da informação; (b) uma norma de saúde no trabalho; (c) uma prática de proteção ambiental aplicada a interfaces digitais.