Arquitetura da informação e modelagem de fluxos UI/UX no app

O que é arquitetura da informação (AI) no contexto de apps

Arquitetura da informação é a forma como você organiza conteúdo, funcionalidades e caminhos de navegação para que a pessoa encontre o que precisa com o mínimo de esforço. Em apps, AI aparece como: estrutura de menus e abas, agrupamento de telas, nomes de seções, ordem de passos e regras de acesso (ex.: precisa estar logado para ver “Meus pedidos”).

Um bom sinal de AI bem feita é quando você consegue responder rapidamente: quais são as principais tarefas do app, onde cada tarefa começa e quais telas são necessárias para completar a tarefa sem “voltar e tentar outra coisa”.

Definição de metas de tela (screen goals)

Cada tela precisa ter uma meta clara, mensurável e única (ou, no máximo, uma meta principal e uma secundária). Metas vagas geram telas “colcha de retalhos”.

Como definir a meta de uma tela

• Nomeie a tela pelo que ela entrega (ex.: “Lista de tarefas”, “Detalhe do item”, “Editar item”).
• Escreva a frase de sucesso: “O usuário sai desta tela tendo…”.
• Defina a ação primária (CTA principal) e até 2 ações secundárias.
• Liste as informações mínimas para tomar a decisão e executar a ação.

Exemplos de metas bem definidas

• Login: “Entrar na conta com e-mail e senha (ou recuperar acesso)”. Ação primária: “Entrar”. Secundárias: “Esqueci a senha”, “Criar conta”.
• Lista: “Encontrar um item e acessar seu detalhe”. Ação primária: “Abrir item”. Secundárias: “Buscar/filtrar”, “Criar novo”.
• Detalhe: “Entender o item e decidir o próximo passo”. Ação primária: “Editar” ou “Executar ação do item”. Secundárias: “Excluir”, “Compartilhar”.

Agrupamento por tarefas (task-based grouping)

Organize o app por tarefas reais, não por estrutura interna do sistema. Em vez de agrupar por tabelas/entidades (“Usuários”, “Pedidos”, “Produtos”), agrupe por intenção (“Comprar”, “Acompanhar pedido”, “Gerenciar catálogo”).

Passo a passo para agrupar funcionalidades

1. Liste tarefas principais (top 3–7) que geram valor.
2. Liste subtarefas necessárias para completar cada tarefa.
3. Identifique dependências (ex.: “Precisa estar logado”).
4. Crie grupos que possam virar seções/abas do app.
5. Valide o agrupamento perguntando: “Se eu quero X, eu tocaria aqui?”

Exemplo de agrupamento para um app de itens (tarefas pessoais)

Rotulação clara: nomes que guiam decisões

Rótulos (labels) são os nomes de menus, botões, campos e títulos. Eles precisam ser específicos, consistentes e orientados à ação. Rotulação ruim cria dúvida e aumenta erros.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

Checklist de rotulação

• Use verbos para ações: “Salvar”, “Criar item”, “Enviar”.
• Use substantivos para seções: “Itens”, “Conta”, “Pedidos”.
• Evite termos internos: “Sincronizar entidade” vira “Atualizar”.
• Seja consistente: se é “Item” na lista, não vire “Registro” no detalhe.
• Prefira clareza a brevidade: “Criar item” é melhor que “Novo” quando há ambiguidade.

Exemplos de melhorias de rótulos

• “Confirmar” → “Salvar alterações” (explica o que será confirmado)
• “Enviar” → “Enviar código” / “Enviar mensagem” (especifica o objeto)
• “Gerenciar” → “Editar” (ação mais direta)

Hierarquia de navegação: mapa do app em camadas

Hierarquia de navegação é como as telas se relacionam: o que é topo (seções principais), o que é segundo nível (listas e categorias) e o que é detalhe/ação (telas profundas). Uma hierarquia simples reduz caminhos longos e evita “becos sem saída”.

Modelo prático de hierarquia (3 níveis)

• Nível 1 (seções): áreas principais do app (ex.: “Itens”, “Conta”).
• Nível 2 (coleções): listas, filtros, resultados (ex.: “Lista de itens”).
• Nível 3 (objeto/ação): detalhe e edição (ex.: “Detalhe do item”, “Editar item”).

Regras simples para manter a hierarquia saudável

• Evite mais de 3–4 toques para completar a tarefa principal.
• Não duplique caminhos sem necessidade (mesma tela acessível por vários lugares confunde).
• Garanta retorno: toda tela profunda precisa de um caminho claro de volta (voltar para lista, cancelar edição).
• Defina estados de acesso: o que muda quando está logado vs. deslogado.

Mapeamento de jornadas: happy path e caminhos alternativos

Jornada é a sequência de passos que a pessoa percorre para concluir uma tarefa. O happy path é o caminho ideal sem erros. Os caminhos alternativos cobrem exceções: validações, falhas de rede, permissões, item inexistente, sessão expirada.

Como mapear uma jornada (passo a passo)

1. Escolha uma tarefa (ex.: “Criar um item”).
2. Descreva o happy path em 5–10 passos, com telas e ações.
3. Liste pontos de decisão (ex.: “Credenciais válidas?”).
4. Para cada decisão, crie alternativas (erro, cancelamento, tentativa novamente).
5. Defina feedback (mensagem, estado vazio, loading, erro recuperável).

Exemplo de jornada: login (happy path)

• Tela Login → usuário preenche e-mail e senha
• Toque em “Entrar”
• App mostra carregamento
• Autenticação OK → navega para “Lista”

Exemplos de caminhos alternativos no login

• Senha incorreta: mostrar erro próximo ao campo + permitir tentar novamente (sem limpar e-mail).
• Campo vazio: validação local antes de enviar.
• Sem internet: mensagem com ação “Tentar novamente”.
• Esqueci a senha: fluxo para recuperação e retorno ao login.
• Sessão expirada ao abrir o app: redirecionar para login e, após sucesso, voltar para a tela pretendida (quando fizer sentido).

Como criar um diagrama de fluxo (nós e transições) em texto

Um diagrama de fluxo pode ser descrito como uma lista de nós (telas/estados) e transições (ações/condições que levam de um nó a outro). Isso ajuda a implementar navegação e a prever casos de erro.

Formato recomendado

NÓ: Nome da tela/estado (objetivo) [pré-condições] {saídas possíveis}  TRANSIÇÃO: evento/ação/condição → próximo nó

Exemplo completo (recurso comum: autenticação + CRUD simples)

Conjunto mínimo de telas para um recurso típico:

• Login
• Lista (itens)
• Detalhe (item)
• Criação/Edição (formulário)

Nós:

• N1: Splash/Inicial (decidir rota inicial) {ir para Login, ir para Lista}
• N2: Login (entrar) {sucesso, erro, recuperar senha}
• N3: Lista de Itens (encontrar e acessar item; criar novo) {abrir detalhe, criar}
• N4: Detalhe do Item (entender item; editar/excluir) {editar, voltar, excluir}
• N5: Formulário Criar/Editar (preencher e salvar) {salvar, erro validação, cancelar}
• N6: Confirmação/Feedback (opcional: toast/snackbar/modal) {voltar para Lista ou Detalhe}
• N7: Erro de Rede (estado) {tentar novamente, voltar}

Transições:

• N1 → N2: sem sessão válida
• N1 → N3: sessão válida
• N2 → N3: tocar “Entrar” + autenticação OK
• N2 → N2: autenticação falhou (mostrar erro)
• N2 → N7: falha de rede ao autenticar
• N3 → N4: tocar em um item da lista
• N3 → N5: tocar “Criar item”
• N4 → N5: tocar “Editar”
• N4 → N3: voltar
• N4 → N3: excluir item + confirmar + sucesso
• N5 → N4: salvar edição com sucesso (voltar ao detalhe atualizado)
• N5 → N3: salvar criação com sucesso (voltar à lista com novo item visível)
• N5 → N5: erro de validação (destacar campos e manter dados)
• N5 → N7: falha de rede ao salvar
• N7 → (nó anterior): “Tentar novamente”

Dicas para transformar o fluxo em implementação

• Nomeie rotas com o mesmo padrão dos nós (ex.: /login, /items, /items/:id, /items/new, /items/:id/edit).
• Defina parâmetros (ex.: id no detalhe/edição).
• Padronize retornos: após criar, voltar para lista; após editar, voltar para detalhe.
• Estados vazios na lista (sem itens) devem apontar para a ação “Criar item”.

Passo a passo: desenhando o conjunto mínimo de telas do recurso

1) Login

• Meta: autenticar e levar à lista.
• Componentes mínimos: campos e-mail/senha, botão “Entrar”, link “Esqueci a senha”.
• Regras: validação local (formato de e-mail, senha não vazia), loading ao enviar, erro claro ao falhar.

2) Lista

• Meta: permitir encontrar e abrir um item; iniciar criação.
• Componentes mínimos: lista com título e informação-chave, busca (se necessário), botão “Criar item”, estados: carregando, vazio, erro.
• Regras: tocar no item abre detalhe; estado vazio deve ter CTA “Criar item”.

3) Detalhe

• Meta: apresentar informações do item e permitir ação principal (editar/excluir).
• Componentes mínimos: título, atributos relevantes, botão “Editar”, ação “Excluir” (com confirmação).
• Regras: se item não existir (404), mostrar mensagem e voltar para lista.

4) Criação/Edição (Formulário)

• Meta: criar ou atualizar item com segurança.
• Componentes mínimos: campos essenciais, botão “Salvar”, ação “Cancelar”.
• Regras: validação por campo, manter dados ao erro, diferenciar modo criar vs. editar (título e valores preenchidos).

Exercício guiado: do requisito ao fluxo em 20 minutos

Requisito: “Usuário precisa criar e gerenciar itens pessoais (ex.: tarefas).”

1. Liste tarefas: entrar, ver itens, abrir item, criar, editar, excluir.
2. Defina metas de tela para Login/Lista/Detalhe/Formulário.
3. Escreva rótulos (seções e ações) e revise consistência (“Item” em todo lugar).
4. Desenhe hierarquia: Conta/Login → Itens (Lista) → Detalhe → Editar.
5. Mapeie happy path de “Criar item”: Lista → Criar → Salvar → Lista.
6. Adicione alternativas: erro validação, falha de rede, cancelar.
7. Escreva o diagrama em nós/transições como no modelo acima.