Partilhar: WhatsApp
aulify
UC UC04376 · T. Produção de Conteúdos I

Ficha 01 · Utilizador, arquitetura da informação e wireframes

Personas, análise da concorrência, sitemap, fluxos de navegação e wireframes de baixa fidelidade
Versão · Aluno
Tempo · 90 minutos
Cotação · 100 pontos
Aluno(a)
Turma
Data
Objectivos da ficha

Exercício 1 · Construir uma persona

Uma câmara municipal quer uma app para reportar problemas na via pública (buracos, iluminação avariada, lixo). A pesquisa revela que grande parte dos utilizadores tem entre 35 e 60 anos, usa o telemóvel no dia a dia mas não tem grande à-vontade com apps complexas, e normalmente reporta o problema no momento em que o vê, na rua. Constrói uma persona (nome, idade, necessidade principal, frustração, contexto de uso) e indica duas decisões de design concretas que essa persona justifica.

Exercício 2 · Análise da concorrência

Escolhe duas apps ou sites que já conheças, do mesmo tipo de produto (ex.: duas apps de encomendas de comida, ou dois sites de reserva de viagens). Para cada uma, identifica: (a) onde fica o botão de ação principal; (b) como está organizado o menu principal; (c) um ponto forte e um ponto fraco de navegação.

Exercício 3 · Sitemap de uma app de biblioteca municipal

Desenha (em texto, formato de árvore) o sitemap de uma app de biblioteca municipal, com pelo menos 5 secções de topo e 2 níveis de profundidade em pelo menos uma delas.

Exercício 4 · Sitemap vs user flow

Explica a diferença entre um sitemap e um user flow, e desenha o user flow da tarefa "reservar um livro" na app de biblioteca do exercício anterior, incluindo pelo menos um cenário de erro.

Exercício 5 · Requisitos funcionais e não funcionais

Classifica cada requisito como funcional ou não funcional: (a) "o utilizador tem de conseguir filtrar produtos por preço"; (b) "a app tem de carregar em menos de 2 segundos"; (c) "é possível adicionar um produto ao carrinho a partir da lista"; (d) "o design tem de funcionar em telemóvel e desktop".

Exercício 6 · Desenhar um wireframe de baixa fidelidade

Desenha (em texto, com caixas) o wireframe de baixa fidelidade do ecrã "Ficha do livro" da app de biblioteca, incluindo pelo menos: título, autor, disponibilidade, botão de ação principal e navegação. Não uses cor nem conteúdo real, só estrutura.

Exercício 7 · Card sorting

Explica o que é a técnica de card sorting e em que fase do processo de design de interfaces deve ser usada. Porque é preferível a decidir a arquitetura da informação "de cabeça", só com a opinião da equipa?

Exercício 8 · Aplicar hierarquia visual num wireframe

No wireframe do exercício 6, identifica qual elemento deveria ter a maior hierarquia visual (maior destaque) e explica, com um princípio de composição visual, porque essa escolha faz sentido.