Módulo 06: Design de Interfaces, UI/UX e Acessibilidade • Bloco 2: Arquitetura de Informação & Wireframing

🗺️ Mapa Conceitual do Capítulo

flowchart TD
    subgraph SITEMAP["Sitemaps (Estrutura Arquitetural Macro)"]
        A["Nível 0: Home / Dashboard"]
        B["Nível 1: Catálogo, Conta, Suporte, Configurações"]
        C["Nível 2: Detalhes do Produto, Faturas, Perfil"]
        A --> B --> C
    end

    subgraph FLUXOS["Modelagem Dinâmica de Interação"]
        D["Task Flow: Caminho linear estrito (Uma tarefa)"]
        E["User Flow: Caminho com bifurcações e decisões"]
        F["Wireflow: Telas visuais interligadas por setas"]
    end

    subgraph SIMBOLOGIA["Gramática Canônica de Diagramação"]
        G["Pílula / Oval: Ponto de Entrada / Saída"]
        H["Retângulo: Tela / Página / Estado de Interface"]
        I["Losango: Decisão Condicional (Sim / Não)"]
        J["Paralelogramo: Entrada de Dados do Usuário"]
    end

    SITEMAP --> FLUXOS
    FLUXOS --> SIMBOLOGIA

    style A fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style B fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style D fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style E fill:#e8f5e9,stroke:#4caf50,stroke-width:1.5px
    style F fill:#fce4ec,stroke:#e91e63,stroke-width:1.5px
    style I fill:#ffebee,stroke:#f44336,stroke-width:1.5px

🧭 1. Sitemaps: A Topologia de um Produto Digital

Um Sitemap Arquitetural é a representação visual em árvore da hierarquia de páginas ou telas de uma aplicação. Enquanto o sitemap XML serve aos indexadores de motores de busca (SEO), o sitemap de UX serve como planta estrutural para toda a equipe multidisciplinar.

Profundidade vs Amplitude (Depth vs Breadth):

  • Arquiteturas Muito Profundas (Deep Trees): Mais de 4 ou 5 níveis hierárquicos. Obrigam o usuário a descer e subir excessivamente na árvore, aumentando a probabilidade de desorientação espacial (“Onde estou agora?”).
  • Arquiteturas Muito Rasas (Flat Trees): Poucos níveis, mas com centenas de categorias no mesmo patamar. Sobrecarregam menus de navegação e aumentam a carga cognitiva extrínseca (Lei de Hick).
  • A Regra dos Três Cliques: Historicamente acreditava-se que todo conteúdo deveria ser acessível em no máximo 3 cliques. Pesquisas modernas do NN/g revelaram que o número de cliques é secundário: o usuário não se importa de clicar mais vezes, desde que cada clique transmita um “aroma de informação” (Information Scent) claro e inequívoco.

🔀 2. Task Flows, User Flows e Wireflows

A navegação real de um usuário nunca é estática; ela se desenrola através de decisões, erros, validações e retornos:

1. Task Flow (Fluxo de Tarefa)

Mapeia um trajeto único, linear e ideal (Happy Path) percorrido por todos os usuários para realizar uma tarefa atômica sem variações ou bifurcações (ex: pagar uma conta via leitor de código de barras).

2. User Flow (Fluxo do Usuário)

Mapeia o caminho completo de uma persona específica tentando cumprir um objetivo amplo dentro da aplicação, contemplando:

  • O ponto de partida (Trigger / Entry Point - anúncio, notificação push, busca orgânica).
  • Os nós de decisão lógica (ex: “Usuário já possui conta cadastrada?”).
  • As ramificações de erro (Unhappy Paths - cartão recusado, e-mail já existente).
  • O ponto de sucesso final (End Goal).

3. Wireflows (Wireframes + Flows)

Introduzidos pela indústria para preencher a lacuna entre fluxogramas abstratos de caixas e protótipos de alta fidelidade:

  • Cada nó do diagrama contém um mini-wireframe visual da tela ou componente.
  • Setas direcionadas saem exatamente do botão ou link disparador e apontam para a tela resultante.

📐 3. A Gramática Canônica da Diagramação de Fluxos

Para evitar ruídos de comunicação entre designers e engenheiros de software, utiliza-se uma gramática visual universal baseada em símbolos gráficos padronizados:

Símbolo Significado em UX Exemplo no Fluxo
Pílula / Elipse Ponto de Início ou Término “Abre aplicativo” ou “Compra Concluída”
Retângulo Tela, Página ou Estado de Interface “Tela de Carrinho de Compras”
Losango Decisão / Bifurcação Condicional “Saldo em conta é suficiente?” (Sim / Não)
Retângulo Arredondado Ação Concreta do Usuário “Clica no botão ‘Pagar com PIX’”
Retângulo com Listra Processo Automático do Sistema / API “Validação de Antifraude em Segundo Plano”

📊 4. Matriz Comparativa: Família de Diagramas de UX

Artefato Foco Principal Representação Visual Momento de Criação
Sitemap Estrutura hierárquica e categorização Caixas de páginas organizadas em árvore Início da Arquitetura de Informação
Task Flow Caminho linear de uma única ação Sequência simples de caixas em linha reta Modelagem de tarefas atômicas
User Flow Jornada completa com decisões e erros Grafo direcionado com nós de decisão (losangos) Planejamento de fluxos complexos
Wireflow Telas reais conectadas por navegação Mini-telas com botões e layouts ilustrados Preparação para a prototipagem no Figma

💻 5. Artefato Prático: User Flow Completo de Autenticação e Checkout

flowchart TD
    START(["Início: Carrinho com Itens"]) --> BTN_CHECKOUT["Clica em 'Finalizar Compra'"]
    BTN_CHECKOUT --> DEC_AUTH{"Usuário Autenticado?"}

    DEC_AUTH -->|Não| TELA_LOGIN["Tela de Login / Cadastro"]
    TELA_LOGIN --> BTN_ENTRAR["Preenche Credenciais e Clica em 'Entrar'"]
    BTN_ENTRAR --> DEC_LOGIN_OK{"Credenciais Válidas?"}
    
    DEC_LOGIN_OK -->|Não| MSG_ERRO["Exibe Alerta: 'E-mail ou senha incorretos'"]
    MSG_ERRO --> TELA_LOGIN
    
    DEC_LOGIN_OK -->|Sim| SET_SESSION["Sistema: Inicia Sessão Segura"]
    DEC_AUTH -->|Sim| TELA_PAGAMENTO["Tela de Seleção de Pagamento"]
    SET_SESSION --> TELA_PAGAMENTO

    TELA_PAGAMENTO --> SEL_METODO{"Escolhe Meio de Pagamento"}
    SEL_METODO -->|PIX| GERA_PIX["Gera QR Code e Código Copia-e-Cola"]
    SEL_METODO -->|Cartão| FORM_CARTAO["Preenche Dados do Cartão"]

    FORM_CARTAO --> BTN_PAGAR["Clica em 'Confirmar Pagamento'"]
    BTN_PAGAR --> PROC_GATEWAY["Sistema: Processamento com Gateway"]
    PROC_GATEWAY --> DEC_APROVADO{"Transação Aprovada?"}

    DEC_APROVADO -->|Não| FALHA_PGTO["Exibe Motivo: 'Limite Insuficiente'"]
    FALHA_PGTO --> TELA_PAGAMENTO

    DEC_APROVADO -->|Sim| SUCESSO(["Tela de Sucesso: Pedido Confirmado!"])
    GERA_PIX --> WAIT_WEBHOOK["Aguardando Confirmação Bacen"]
    WAIT_WEBHOOK --> SUCESSO

    style START fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style SUCESSO fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px
    style DEC_AUTH fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style DEC_LOGIN_OK fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style DEC_APROVADO fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px
    style MSG_ERRO fill:#ffebee,stroke:#f44336,stroke-width:1.5px
    style FALHA_PGTO fill:#ffebee,stroke:#f44336,stroke-width:1.5px