Ficha 01 · Utilizador, arquitetura da informação e wireframes
- Definir uma persona a partir de necessidades reais
- Estruturar a arquitetura da informação de um produto
- Distinguir sitemap de user flow
- Desenhar wireframes de baixa fidelidade coerentes
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.