UXD103 · Arquitetura de informação e wireframes
Sobre o curso
Organize o conteúdo para que as pessoas encontrem o que precisam, valide a estrutura com card sorting e tree testing, mapeie fluxos de usuário e transforme tudo em wireframes claros e anotados no Figma.
Para quem é
Alunos que já entendem os fundamentos de UX e querem estruturar sites e apps antes de passar ao design visual.
Pré-requisitos
UXD101 e UXD102, ou experiência equivalente com princípios de UX e pesquisa com usuários.
O que você será capaz de fazer
- Construir um mapa do site com esquemas de organização adequados e rótulos claros
- Conduzir um card sorting e um tree testing e usar os resultados para revisar a navegação
- Desenhar fluxos de usuário que cubram o caminho feliz e os principais casos de exceção
- Produzir wireframes mobile-first anotados, sobre um grid consistente no Figma
Aulas
- Aula 1 · Organizar a informação para ser encontrada
- Aula 2 · Validar a estrutura e mapear fluxos
- Aula 3 · Wireframes sobre um grid
- Aula 4 · Laboratório e atividade
Laboratório: Estrutura e wireframes para o site de uma clínica veterinária
Você reestrutura o site de uma clínica veterinária de bairro. Conduz um card sorting aberto com cinco pessoas no FigJam, constrói um mapa do site, valida-o com um tree testing simples feito no Google Formulários e depois desenha no Figma os wireframes mobile dos três fluxos mais importantes.
Ferramentas gratuitas: FigJam e Figma no plano gratuito, Google Formulários (gratuito)
Atividade avaliada
Entregue os resultados do card sorting, o mapa do site revisado, os resultados do tree testing com taxa de sucesso por tarefa, os fluxos de usuário para agendar uma consulta e mais duas tarefas importantes, e pelo menos seis wireframes mobile anotados. Explique em uma página quais mudanças fez na estrutura com base nas evidências e por quê. As anotações devem descrever comportamento, regras de conteúdo e estados como vazio, carregando e erro.
| Critério | Peso | Como é um trabalho excelente |
|---|---|---|
| Arquitetura de informação | 30% | O mapa usa esquemas de organização adequados, os rótulos estão na linguagem dos usuários e as mudanças são justificadas pelos dados de card sorting e tree testing. |
| Fluxos de usuário | 20% | Os fluxos são completos, usam notação consistente e incluem decisões, erros e exceções, e não só o caminho feliz. |
| Qualidade dos wireframes | 30% | Os wireframes seguem um grid consistente, mostram hierarquia clara, priorizam as ações principais e são mobile-first. |
| Anotações e justificativa | 20% | As anotações explicam comportamento e estados com precisão, e a justificativa liga as decisões às evidências. |
Peça de portfólio
Um mapa do site, fluxos de usuário e um conjunto de wireframes anotados que mostram seu processo de design estrutural, da pesquisa ao layout.
Próximo passo
Continue com UXD104 · Design visual e sistemas de interface · 6 horas · R$ 60,00
Conteúdo do curso
UXD103 · Arquitetura de informação e wireframes (6 h)
-
Aula 1 · Organizar a informação para ser encontrada
-
Aula 2 · Validar a estrutura e mapear fluxos
-
Aula 3 · Wireframes sobre um grid
-
Aula 4 · Laboratório e atividade
-
UXD103 Avaliação · Arquitetura de informação e wireframes