Capítulo 19: Interface Unificada (UI): Menu Principal Interativo e Painel Geral de Navegação

🎯 Objetivo da Aula

Nesta aula, você aprenderá como aplicar os princípios de Ergonomia de Software, Usabilidade e Design de Interface (UI/UX) para consolidar todos os módulos do SIG FastLog Enterprise. No laboratório de informática, você transformará a aba inicial em um Hub Central de Navegação Executiva, criando botões tridimensionais interativos, hiperlinks internos de salto instantâneo e ancoragens de retorno ("Home") em todas as telas operacionais do sistema.

Ao final desta aula, o seu SIG deixará definitivamente de parecer uma planilha solta e passará a operar visualmente como um Software de Gestão Integrada (ERP) comercial de alto padrão.

🏢 Cenário Prático (FastLog S.A.)

Empresa: FastLog Transportes & Logística Integrada S.A.
Problema: O arquivo do SIG FastLog cresceu e agora conta com mais de 10 abas operacionais especializadas (Cadastros, CRM, Almoxarifado, Auditoria, Etiquetas, SAC, E-Commerce, Finanças e Segurança). Novos assistentes contratados nas filiais passavam o dia perdidos, rolando as abas no rodapé do Excel de um lado para o outro sem saber onde clicar. Atrasavam o registro de fretes e interrompiam os supervisores constantemente com perguntas do tipo: “Em qual aba fica a cotação de compras?” ou “Como volto para a tela de etiquetas?”. A lentidão na navegação reduziu a produtividade das filiais em 20%.
Sua Missão: Como técnico de TI e Gestão, você reformulará a aba Home_Operador, transformando-a no Menu Principal Interativo do SIG. Você organizará os acessos em 4 grandes centros departamentais acionados por hiperlinks e instalará botões de retorno rápido em todas as áreas do sistema.

🧠 Fundamentos: A Teoria Traduzida

1. Ergonomia e a “Regra dos 3 Cliques” em UI/UX

Na Engenharia de Usabilidade (User Experience - UX), sistemas eficientes seguem a Regra dos Três Cliques: o operador deve ser capaz de localizar e abrir qualquer relatório ou formulário vital da empresa com no máximo 3 cliques do mouse a partir da tela inicial.

flowchart TD
    HOME["🏠 HUB CENTRAL DO SIG (Home_Operador)<br/>Menu Principal com Cartões Executivos"] --> D1["💼 1. Módulo Comercial<br/>• CRM Oportunidades<br/>• Dashboard BI 1.0"]
    HOME --> D2["📦 2. Suprimentos & Frota<br/>• Almoxarifado Peças<br/>• Cotação e-Procurement"]
    HOME --> D3["🚚 3. Operação & Suporte<br/>• Central Notificações<br/>• Etiquetas QR Code<br/>• SAC & Helpdesk"]
    HOME --> D4["💵 4. Gestão & Finanças<br/>• E-Commerce Web<br/>• Fluxo de Caixa Real<br/>• Auditoria & RBAC"]

    D1 -. "Botão Voltar ao Menu" .-> HOME
    D2 -. "Botão Voltar ao Menu" .-> HOME
    D3 -. "Botão Voltar ao Menu" .-> HOME
    D4 -. "Botão Voltar ao Menu" .-> HOME

    style HOME fill:#003366,stroke:#fff,stroke-width:2px,color:#fff
    style D1 fill:#2980b9,stroke:#fff,stroke-width:2px,color:#fff
    style D2 fill:#e67e22,stroke:#fff,stroke-width:2px,color:#fff
    style D3 fill:#27ae60,stroke:#fff,stroke-width:2px,color:#fff
    style D4 fill:#8e44ad,stroke:#fff,stroke-width:2px,color:#fff

2. A Sintaxe de Hiperlink Interno em Planilhas

Para navegar instantaneamente entre diferentes abas sem que o operador precise procurar o rodapé, utilizamos a fórmula do Hiperlink Interno com o caractere cerquilha (#):

$$\text{=HIPERLINK("#‘Nome_Aba’!A1"; “Rótulo Amigável do Botão”)}$$

• O símbolo # informa ao motor da planilha que o destino é um local interno dentro da própria pasta de trabalho atual.

📖 Exemplo Guiado: Passo a Passo no Laboratório

Abra seu arquivo central SIG_FastLog_Apresentacao.xlsx na pasta 01_Apresentacao_Planilhas.

Passo 1: Limpeza e Preparação da Aba Home_Operador

1. Clique na primeira aba: Home_Operador.
2. Certifique-se de que a opção Linhas de Grade está desmarcada na guia Exibir.
3. Construa o cabeçalho executivo unificado nas linhas 1 a 3:
   • Mescle o intervalo A1:H3, preencha com fundo Azul Petróleo Escuro (#003366).
   • Digite em letras brancas, 18pt, Negrito: FASTLOG ENTERPRISE — PORTAL CENTRAL DE NAVEGAÇÃO CORPORATIVA.
   • Na linha 4, mescle A4:H4, pinte com Cinza Claro (#ECEFF1), texto em cinza escuro, 10pt: Selecione abaixo o módulo departamental desejado para acessar os formulários operacionais e painéis BI.

🛠️ Prática Obrigatória 1: Construção dos 4 Cartões Departamentais de Navegação

Agora você estruturará os 4 blocos de botões correspondentes às divisões estratégicas da FastLog.

Passo a Passo no Computador:

1. Cartão 1 — Divisão Comercial & CRM (Colunas A e B):

   • Células A6:B6 (Mescladas): Fundo Azul Médio (#2980B9), Texto Branco, 12pt, Negrito: 💼 1. COMERCIAL & VENDAS.
   • Célula A8:B8 (Mesclada): Insira a fórmula do botão para o funil:

     1	=HIPERLINK("#'CRM_Oportunidades'!A1"; "👉 Acessar Funil de Vendas & CRM")

   • Célula A10:B10 (Mesclada): Insira a fórmula do botão para o BI:

     1	=HIPERLINK("#'Dashboard_Comercial'!A1"; "📊 Acessar Dashboard BI 1.0")

   • Formate os botões com fundo Cinza Suave (#F2F4F7), Borda elegante ao redor, texto azul escuro e negrito.

2. Cartão 2 — Suprimentos, Almoxarifado & Compras (Colunas C e D):

   • Células C6:D6 (Mescladas): Fundo Laranja Corporativo (#D35400), Texto Branco, 12pt, Negrito: 📦 2. SUPRIMENTOS & COMPRAS.
   • Célula C8:D8 (Mesclada):

     1	=HIPERLINK("#'Almoxarifado_Estoque'!A1"; "👉 Controle de Peças & Curva ABC")

   • Célula C10:D10 (Mesclada):

     1	=HIPERLINK("#'Compras_Cotacoes'!A1"; "🛒 Mapa de Cotação B2B (e-Procurement)")

   • Formate com borda fina e fundo cinza suave.

3. Cartão 3 — Operação, Rastreio & Suporte SAC (Colunas E e F):

   • Células E6:F6 (Mescladas): Fundo Verde Escuro (#27AE60), Texto Branco, 12pt, Negrito: 🚚 3. LOGÍSTICA & SUPORTE.
   • Célula E8:F8 (Mesclada):

     1	=HIPERLINK("#'Expedicao_Etiquetas'!A1"; "📱 Gerador de Etiquetas com QR Code")

   • Célula E10:F10 (Mesclada):

     1	=HIPERLINK("#'SAC_Helpdesk'!A1"; "🎧 Central de Chamados & SLAs")

4. Cartão 4 — E-Commerce, Finanças & Governança (Colunas G e H):

   • Células G6:H6 (Mescladas): Fundo Roxo Corporativo (#8E44AD), Texto Branco, 12pt, Negrito: 💵 4. FINANÇAS & CONTROLE.
   • Célula G8:H8 (Mesclada):

     1	=HIPERLINK("#'Financeiro_FluxoCaixa'!A1"; "💵 Fluxo de Caixa & Taxas MDR")

   • Célula G10:H10 (Mesclada):

     1	=HIPERLINK("#'Seguranca_ControleAcesso'!A1"; "🔒 Segurança & Auditoria LGPD")

✅ Resultado Esperado (Prática 1):

A tela inicial exibe um menu executivo perfeitamente alinhado e dividido em quatro áreas funcionais. Ao clicar em qualquer um dos 8 botões, o cursor salta instantaneamente para a aba correspondente sem precisar caçar no rodapé.

🛠️ Prática Obrigatória 2: Instalação do Botão Padronizado de Retorno (“Home”)

Para que a experiência seja profissional, o operador precisa conseguir voltar ao menu com um clique a partir de qualquer aba.

Passo a Passo no Computador:

1. Acesse a aba CRM_Oportunidades.
2. No canto superior direito da tabela (exemplo: célula I2:J2, mescladas), crie o botão de retorno com a fórmula:

   1	=HIPERLINK("#'Home_Operador'!A1"; "🏠 VOLTAR AO MENU PRINCIPAL")

3. Formate o botão: Fundo Azul Petróleo (#003366), Texto Branco Negrito, Borda suave.
4. Selecione a célula do botão recém-criado e pressione Ctrl + C.
5. Cole o botão com Ctrl + V na mesma posição do cabeçalho das outras abas operacionais do sistema:
   • Dashboard_Comercial
   • Almoxarifado_Estoque
   • Compras_Cotacoes
   • Expedicao_Etiquetas
   • SAC_Helpdesk
   • Financeiro_FluxoCaixa
   • Seguranca_ControleAcesso
6. Teste de Circuito Completo: Clique no botão da aba inicial para abrir o Almoxarifado; em seguida, clique em 🏠 VOLTAR AO MENU PRINCIPAL e comprove o retorno imediato à tela central!

✅ Resultado Esperado (Prática 2):

A navegação do sistema torna-se um circuito fechado e intuitivo, eliminando qualquer risco de o usuário se perder entre as planilhas da transportadora.

📤 Instruções de Entrega (Microsoft Teams)

1. Salve o arquivo com Ctrl + B.
2. Salve uma versão com seu nome na pasta 01_Apresentacao_Planilhas: Atividade_19_SIG_SeuNome_SeuSobrenome.xlsx.
3. Acesse o Microsoft Teams na equipe da disciplina.
4. Abra a tarefa: “TI Aplicada - Cap 19: Interface Unificada (UI) e Hub Central”.
5. Anexe o arquivo .xlsx e clique em Entregar (Turn In).

💡 Checkpoint de Gestão & TI

A facilidade de uso de um sistema corporativo determina sua Taxa de Adoção pelos Usuários. O sistema de gestão mais avançado do mundo será abandonado pelos colaboradores se sua interface for confusa e frustrante. Ao desenhar um Hub Central ergonômico, você reduziu os custos de treinamento de pessoal e eliminou horas de retrabalho na rotina da transportadora.

🔥 Desafio de Fixação: Cartão de Status do Almoxarifado em Tempo Real no Menu

Adicione um indicador dinâmico dentro do Cartão de Suprimentos na tela inicial:

1. Na célula C12:D12 (abaixo do botão de cotações), mescle e digite a fórmula que busca o status do estoque de peças críticas:

   1	="Status Almoxarifado: " & Almoxarifado_Estoque!J2

2. Aplique formatação condicional: se contiver COMPRAR, exiba o texto em Vermelho Negrito.
3. Se contiver OK, exiba em Verde Negrito.
4. Agora a diretoria monitora o almoxarifado sem precisar sair da tela inicial do sistema!

📝 Atividade Extra: Questionário de Fixação (Caderno)

Instruções: Responda no caderno, de próprio punho, as 10 perguntas abaixo com base no que você estudou neste capítulo. Ao concluir, apresente o caderno ao professor para visto.

1. O que representa o conceito de UI/UX no desenvolvimento de sistemas de informação corporativos?
2. No Cenário Prático da FastLog, qual foi o impacto negativo na produtividade das filiais causado pela falta de um menu principal estruturado?
3. O que afirma a “Regra dos Três Cliques” na engenharia de usabilidade de software?
4. Qual caractere especial deve ser inserido antes do nome da aba na função HIPERLINK para indicar que o salto é interno à planilha atual?
5. Quais foram as 4 divisões funcionais representadas nos cartões de navegação construídos na tela inicial?
6. Por que o botão de retorno 🏠 VOLTAR AO MENU PRINCIPAL foi instalado em todas as abas operacionais do sistema?
7. Qual cor corporativa padrão em código hexadecimal foi utilizada nos cabeçalhos e botões principais do sistema?
8. Na Prática Obrigatória 1, para qual aba o botão da célula A10:B10 direciona o operador ao ser clicado?
9. De acordo com o Checkpoint de Gestão & TI, como a qualidade da interface gráfica afeta a Taxa de Adoção de um novo sistema pelos colaboradores?
10. No Desafio de Fixação, como foi estruturada a fórmula da célula C12:D12 para exibir o status em tempo real do almoxarifado no menu principal?