Ficha 01 · UX, pesquisa e estrutura
- Distinguir UX/UI
- Definir personas/stories
- Estruturar informação
- Fazer wireframes
Parte I · UX vs UI
Exercício 1 · Classificar (15 pts)
Indica se é UX ou UI:
a) Escolher a cor e o estilo dos botões. ___
b) Decidir o número de passos para finalizar uma compra. ___
c) Definir a tipografia do site. ___
d) Reorganizar o menu porque os utilizadores não encontram o contacto. ___
e) Desenhar o estado "hover" de um link. ___
a) UI (visual). b) UX (fluxo/estrutura). c) UI (visual). d) UX (estrutura/usabilidade). e) UI (estado visual do componente).
Exercício 2 · Relação (10 pts)
"O site está lindíssimo mas ninguém consegue comprar." Que problema descreve isto e o que ensina sobre UX/UI?
Boa UI, má UX: visualmente apelativo mas o fluxo/estrutura falha (não se cumpre o objetivo). Ensina que UI sem UX não chega — a estética está ao serviço da usabilidade; é preciso desenhar como funciona e testar, não só como aparece.
Parte II · Pesquisa
Exercício 3 · Persona (15 pts)
Cria uma persona breve para o site da biblioteca escolar (nome, idade, objetivo, contexto, frustração).
Exemplo:
Rita, 15 anos, 10.º ano. Usa quase só o telemóvel. Objetivo: ver se um livro está disponível e reservá-lo sem ir à biblioteca. Contexto: consulta nos intervalos, ligação Wi-Fi instável. Frustração: sites lentos e menus confusos; desiste se demora.
Implica: mobile-first, rápido, pesquisa simples e visível, poucos passos para reservar.
Exercício 4 · User stories (10 pts)
Escreve 2 user stories para esse site (formato "Como… quero… para…").
- Como aluno, quero pesquisar um livro por título para saber se está disponível.
- Como aluno, quero reservar um livro disponível para o levantar mais tarde sem fila.
(Outras: ver os meus empréstimos e datas de devolução; renovar um empréstimo.)
Parte III · Arquitetura de informação
Exercício 5 · Sitemap (15 pts)
Esboça o sitemap (estrutura de páginas) do site da biblioteca escolar.
Início
├── Pesquisar catálogo
│ └── Ficha do livro (disponibilidade, reservar)
├── A minha conta
│ ├── Os meus empréstimos
│ └── As minhas reservas
├── Novidades / Recomendados
├── Horário e regras
└── Contacto
Princípios: o essencial (pesquisar/reservar) a poucos cliques; navegação consistente; "a minha conta" agrupa o pessoal.
Exercício 6 · Navegação (10 pts)
Que regra prática há sobre profundidade de navegação e porque importa?
Regra prática: o conteúdo essencial deve estar a ≤ 3 cliques da página inicial. Importa porque cada nível extra aumenta o esforço e o abandono — utilizadores não "escavam". Combina-se com navegação clara, consistente e breadcrumbs em estruturas profundas para o utilizador saber sempre onde está.
Parte IV · Wireframe
Exercício 7 · Fidelidade (25 pts)
a) Ordena por fidelidade crescente: Mockup, Esboço, Protótipo, Wireframe. (8 pts)
b) Porque não se deve começar logo pelo mockup colorido? (9 pts)
c) Descreve o que incluirias no wireframe mobile da ficha de um livro. (8 pts)
a) Esboço → Wireframe → Mockup → Protótipo.
b) Porque a discussão foca-se na cor/estética antes de a estrutura estar certa; mudar um mockup detalhado é lento e caro. O wireframe (sem cor) é rápido de alterar e permite resolver primeiro o que importa: conteúdo, hierarquia, fluxo. Decidir o visual cedo "prende" decisões más.
c) Wireframe mobile da ficha do livro (estrutura): - Topo: voltar / pesquisar. - Capa (placeholder) + título + autor. - Estado de disponibilidade bem visível (disponível/emprestado). - Botão primário grande: Reservar (alvo ≥ 44 px). - Detalhes (ano, ISBN, resumo) abaixo, secundários. - Sem cor/imagens reais — só blocos e hierarquia.