Padrões de navegação para Suplementos do Office

Os suplementos do Office apresentam desafios únicos de navegação devido à largura restrita do painel de tarefas, à integração com a faixa de opções do Office e aos requisitos multiplataforma. A navegação eficaz garante que os usuários possam acessar recursos facilmente, mantendo o contexto com o documento do Office.

Este artigo aborda os padrões de navegação em painéis de tarefas e como coordenar a navegação entre a faixa de opções do Office e a IU do suplemento.

Desafios exclusivos de navegação para Suplementos do Office

Ao projetar a navegação para Suplementos do Office, considere as seguintes restrições.

• Largura do painel de tarefas estreita: os painéis de tarefas variam de 320 px (Outlook na Web) a 350 px (Excel), limitando o espaço de navegação horizontal. Para obter dimensões e variantes detalhadas do painel de tarefas, consulte Painéis de tarefas em Suplementos do Office.
• Obstrução do menu de personalidade: o menu de personalidade do Office pode bloquear elementos da interface do usuário no canto superior direito. Para dimensões e posicionamento exatos, consulte Painéis de tarefas em Suplementos do Office.
• Integração da faixa de opções: a navegação deve coordenar entre os comandos da faixa de opções e o estado do painel de tarefas. Consulte Comandos do suplemento para obter detalhes de integração da faixa de opções.
• Variações multiplataforma: a interface do usuário de navegação pode precisar se adaptar para plataformas Web, Windows, Mac e móveis.
• Contexto lado a lado: os usuários se concentram no documento, não no suplemento, portanto, a navegação deve ser imediatamente clara.
• Vários contêineres: os suplementos podem usar painéis de tarefas, caixas de diálogo e suplementos de conteúdo com diferentes modelos de navegação. Confira Elementos da interface do usuário do Office para obter uma visão geral.

Práticas recomendadas

Coordenação da faixa de opções e do painel de tarefas

Os suplementos do Office têm duas superfícies principais de interface do usuário: a faixa de opções do Office (por meio de comandos de suplemento) e o painel de tarefas. Planeje como essas superfícies funcionam juntas.

Quando usar comandos da faixa de opções versus navegação no painel de tarefas

Use comandos da faixa de opções para:

• Pontos de entrada primários - Principais recursos que os usuários acessam diretamente do Office (Inserir, Formatar, Analisar).
• Ações específicas do contexto - Comandos que atuam no conteúdo selecionado (Formatar, selecionar, inserir gráfico).
• Ações rápidas - Operações de clique único que não exigem entrada extra.
• Descoberta de recursos - Tornar os principais recursos visíveis sem abrir o painel de tarefas.

Use a navegação do painel de tarefas para:

• Fluxos de trabalho de várias etapas - Processos que exigem várias entradas ou decisões.
• Definições e configuração - Opções que não cabem em uma única caixa de diálogo.
• Navegação de conteúdo - galerias, listas ou catálogos que os usuários exploram.
• Estado persistente - Recursos que os usuários mantêm abertos enquanto trabalham em seus documentos.

Faixa de opções de coordenação e estado do painel de tarefas

Se o botão da faixa de opções simplesmente abrir o painel de tarefas para o modo de exibição padrão, configure-o como uma openPage ação (manifesto unificado para o Microsoft 365) ou ShowTaskpane (manifesto somente suplemento) no manifesto. No entanto, se você tiver vários botões da faixa de opções que devem abrir o painel de tarefas para diferentes exibições, use comandos de função com para fazer um vínculo profundo programaticamente Office.addin.showAsTaskpane() . Essa abordagem requer um tempo de execução compartilhado.

O exemplo a seguir mostra como criar um vínculo profundo para diferentes modos de exibição com base no comando da faixa de opções selecionado.

// In your async ribbon command handler (function command), set the navigation target before showing task pane.
localStorage.setItem('navigationTarget', 'settings');
await Office.addin.showAsTaskpane();

// In your task pane startup, navigate to the target view.
const target = localStorage.getItem('navigationTarget');
if (target) {
  navigateToView(target);
  localStorage.removeItem('navigationTarget');
}

Se você tiver vários comandos da faixa de opções, cada um deverá abrir o painel de tarefas para um modo de exibição específico e relevante. Evite que comandos diferentes abram a mesma exibição ou a tela inicial padrão.

Usando guias contextuais com navegação no painel de tarefas

Para os suplementos do Excel, as guias contextuais fornecem comandos da faixa de opções que aparecem somente quando condições específicas são atendidas (por exemplo, quando um gráfico é selecionado). Use guias contextuais para:

• Reduza a confusão da faixa de opções mostrando comandos somente quando relevante.
• Fornecer ações rápidas no conteúdo selecionado sem alterar o estado do painel de tarefas.
• Coordene com o painel de tarefas para disparar alterações na navegação do painel de tarefas.

Exemplo: Um suplemento de visualização de dados pode mostrar uma guia contextual quando um gráfico é selecionado, com um botão "Formatar Gráfico" que abre o painel de tarefas para as opções de formatação do gráfico.

Padrões de navegação do painel de tarefas

Os padrões a seguir funcionam dentro do espaço restrito de um painel de tarefas do Office.

Barra de comando

A barra de comandos é uma superfície na parte superior do painel de tarefas que abriga comandos e controles de navegação. Ele geralmente aparece imediatamente abaixo do nome do suplemento.

Use a barra de comandos quando:

• Seu suplemento tem quatro ou mais seções de nível superior.
• Você precisa economizar espaço horizontal em painéis de tarefas estreitos.
• Você deseja incluir a funcionalidade de pesquisa ou filtro.

Adicionar um menu hambúrguer à barra de comandos funciona bem em painéis de tarefas estreitos. Ele coloca a navegação em um menu recolhível para maximizar o espaço do conteúdo.

Use ícones reconhecíveis com dicas de ferramenta para criar comandos somente de ícone que economizam espaço. Crie alvos de toque de 44x44 px para que seu suplemento seja mais acessível.

Barra de guias

A barra de guias navega com botões que usam texto e ícones empilhados verticalmente. As guias aparecem na parte superior do painel de tarefas e alternam entre as seções principais.

Use uma barra de guias quando:

• Seu suplemento tem de duas a quatro seções principais de igual importância.
• Os usuários alternam frequentemente entre as seções.
• Cada seção tem conteúdo distinto e não sobreposto.

Como os painéis de tarefas têm uma largura estreita, crie barras de guia com as seguintes considerações.

• Largura - Limite de três a quatro guias.
  • Duas guias: ~160-185px cada.
  • Três guias: ~ 106-123px cada.
  • Quatro guias: ~80-92px cada.
• Risco de truncamento - Use rótulos de tabulação curtos (uma ou duas palavras, até doze caracteres) para evitar o truncamento.
• Ícone + texto - Empilha o ícone acima do texto para reduzir a largura. Use ícones de 20x20px.
• Comportamento responsivo – em exibições muito estreitas (Web móvel), considere alternar para uma barra de comandos.

Para acessibilidade, verifique se a guia ativa é visualmente distinta e use-a aria-current="page" na guia ativa.

Botão Voltar

O botão voltar permite que os usuários naveguem para trás por um fluxo de trabalho linear ou retornem de exibições de detalhes para exibições de lista.

Use um botão voltar quando:

• Você quer navegação detalhada, como quando o usuário seleciona um item de uma lista para ver detalhes.
• Você tem fluxos de trabalho de várias etapas, como fluxos semelhantes a assistentes com etapas sequenciais (como Configurar → Configurar → Confirmar).
• Você tem exibições de detalhes modais, como exibições temporárias das quais os usuários saem para retornar ao conteúdo principal.

Posicione o botão voltar no canto superior esquerdo, logo abaixo do nome do suplemento, na área de título/cabeçalho. Faça pelo menos 32x32px, mas 44x44px é recomendado para melhor acessibilidade ao toque. Em painéis de tarefas estreitos, mostre o local atual como texto ao lado do botão voltar, em vez de uma trilha de trilha completa. Por exemplo, [← Back] Display Options (mínimo) ou [← Back] Settings > Display Options (se o espaço permitir). Considere incluir um ícone inicial ou fechar para permitir que os usuários saiam totalmente dos fluxos de várias etapas. Inclua atalhos de teclado (Alt+Seta para a esquerda ou Esc) para acessibilidade. Torne o botão voltar visualmente distinto dos outros elementos de navegação.

Não use um botão voltar para navegação baseada em guias (as guias devem ser persistentes), operações de desfazer (use comandos de desfazer explícitos) ou histórico semelhante ao navegador (os suplementos não têm navegação baseada em página).

Assistentes e fluxos de trabalho de várias etapas

Para processos lineares de várias etapas (integração, instalação, configuração), use os seguintes padrões.

Indicador de progresso escalonado

Mostre aos usuários onde eles estão em um processo de várias etapas com um indicador visual de progresso. Esse padrão é útil para integração, assistentes de instalação e fluxos de configuração.

Use uma barra de progresso horizontal simples (20 a 40 px de altura) para economizar espaço vertical. Coloque os botões Anterior e Próximo em um rodapé fixo para que fiquem sempre acessíveis.

Limite os assistentes de três a cinco etapas. Permita que os usuários pulem etapas opcionais e forneça uma opção Cancelar ou Sair para retornar à página principal do suplemento. Salve o progresso automaticamente para que os usuários possam retomar se fecharem o painel de tarefas.

Navegação sanfonada (seções recolhíveis)

Para economizar espaço no painel de tarefas, use seções expansíveis e recolhíveis que mostrem o conteúdo no local quando selecionadas.

Use a navegação sanfonada quando:

• Você tem cinco ou mais seções de conteúdo que não precisam estar visíveis simultaneamente.
• O conteúdo dentro das seções varia em comprimento.
• Normalmente, os usuários trabalham com uma seção de cada vez.

Em painéis estreitos, permita que apenas uma seção seja aberta por vez para evitar rolagem excessiva. Use ícones claros de expansão e recolhimento (▼/ ▶ ou +/−) e lembre-se de quais seções foram expandidas quando o painel de tarefas for reaberto.

Não use a navegação sanfonada para navegação principal (use guias ou navegação vertical) ou conteúdo alternado com frequência (o que causa cliques excessivos).

Preservando o estado entre as sessões

Os usuários podem fechar e reabrir o painel de tarefas várias vezes durante uma sessão de trabalho. Preserve o estado de navegação para reduzir o atrito salvando a exibição atual, a guia selecionada ou o contexto de navegação.

Use Office.context.document.settings para armazenar o estado de navegação que deve persistir com o documento ou use localStorage para preferências específicas do usuário que se aplicam a todos os documentos.

// Save navigation state.
function navigateTo(view) {
  // Save the current view in document settings to persist with the document.
  Office.context.document.settings.set('currentView', view);
  Office.context.document.settings.saveAsync();

  // You can also use localStorage for user-specific state.
  localStorage.setItem('lastView', view);
}

// Restore the view when the task pane reopens.
Office.onReady(() => {
  const savedView = Office.context.document.settings.get('currentView')
                    || localStorage.getItem('lastView')
                    || 'home';
  navigateTo(savedView);
});

Fluxos de navegação de vários contêineres

Os suplementos do Office podem usar vários contêineres de interface do usuário. Planeje com antecedência para garantir uma navegação tranquila para o usuário.

Painel de tarefas para navegação da caixa de diálogo

Os diálogos fornecem experiências modais focadas que se sobrepõem ao documento do Office. Usar caixas de diálogo para:

• Fluxos de autenticação e entrada.
• Confirmações críticas.
• Formulários que exigem total atenção do usuário.
• Conteúdo que precisa de mais espaço do que o fornecido pelo painel de tarefas.

Ao abrir uma caixa de diálogo de um painel de tarefas, use Office.context.ui.displayDialogAsync(). Use a transmissão de mensagens para se comunicar entre a caixa de diálogo e o painel de tarefas.

Algumas práticas recomendadas para a navegação do painel de tarefas para o diálogo incluem:

• Limpar gatilhos: use botões explícitos, como "Entrar", para abrir as caixas de diálogo.
• Caminho de retorno: Sempre forneça uma maneira de fechar a caixa de diálogo e retornar ao painel de tarefas.
• Sincronização de estado: Atualize a interface do usuário do painel de tarefas quando a caixa de diálogo for fechada.
• Tratamento de erros: lidar com quando a caixa de diálogo é fechada por meio do botão X ou da tecla Esc.

Para obter detalhes completos sobre como usar caixas de diálogo, incluindo exemplos de código e referência de API, consulte Usar a API de caixa de diálogo do Office em Suplementos do Office.

Navegação do suplemento de conteúdo

Os suplementos de conteúdo são inseridos diretamente em documentos do Excel ou do PowerPoint e têm restrições de navegação diferentes dos painéis de tarefas. Toda a interface do usuário está dentro do limite de conteúdo inserido e os usuários podem redimensionar o suplemento de conteúdo. Use padrões de navegação simples, como layouts de página única ou guias mínimas.

Considerações de navegação específicas da plataforma

Office na Web

O Office na Web tem os painéis de tarefas mais estreitos. Teste sua navegação com largura de 320 px (Outlook na Web) para garantir que ela funcione na plataforma mais restrita. Os usuários podem clicar no botão Voltar do navegador, portanto, use history.pushState() para lidar com isso normalmente. Considere pontos de interrupção responsivos para telefones e tablets que acessam o Office na Web.

Office no Windows e Mac

O Office no Windows e Mac dá suporte a painéis de tarefas um pouco mais amplos, até 350 px. Teste a navegação pelo teclado usando Tab, teclas de direção e atalhos padrão (como Ctrl+F para pesquisa) para garantir que sua navegação seja acessível. Reserve o espaço de 40x40 px no canto superior direito para evitar o menu de personalidade.

Outlook em dispositivos móveis (iOS/Android)

O Outlook em dispositivos móveis tem um espaço ainda mais restrito do que o Office na Web. Para obter orientações sobre como criar suplementos para dispositivos móveis, consulte Criar suplementos para o Outlook em dispositivos móveis.

Detecção de plataforma e navegação adaptável

Detecte a plataforma e adapte sua navegação de acordo. Use Office.context.platform para determinar a plataforma atual e ajustar o layout de navegação.

// Detect platform and adapt navigation.
if (Office.context.platform === Office.PlatformType.OfficeOnline) {
  // Use more compact navigation for web.
  useCompactNavigation();
} else if (Office.context.platform === Office.PlatformType.iOS ||
           Office.context.platform === Office.PlatformType.Android) {
  // Use touch-optimized navigation.
  useMobileNavigation();
}

Acessibilidade na navegação

Toda a navegação deve ser acessível usando um teclado com Tab, teclas de direção e Enter. Forneça uma indicação visual clara de qual elemento tem foco. Use rótulos ARIA adequados, incluindo role="navigation", aria-label, e aria-current="page" para suporte ao leitor de tela. Forneça um link "Pular para o conteúdo" para usuários do leitor de tela e garanta que a navegação apareça no início da ordem de tabulação, antes do conteúdo principal.

O exemplo a seguir mostra a marcação de navegação acessível.

<nav role="navigation" aria-label="Main navigation">
  <a href="#main-content" class="skip-link">Skip to content</a>
  <ul>
    <li><a href="#home" aria-current="page">Home</a></li>
    <li><a href="#settings">Settings</a></li>
  </ul>
</nav>

Árvore de decisão: Escolhendo um padrão de navegação

Use este guia para selecionar o padrão de navegação apropriado para seu suplemento.

1. Quantas seções de nível superior seu suplemento tem?

   • Uma a duas seções: Nenhuma navegação persistente necessária; Use comandos da Faixa de Opções e conteúdo simples.
   • Duas a quatro seções: Barra de Guias (se igual a importância) ou Barra de Comandos com menu (se hierárquica).
   • Quatro a sete seções: Barra de comandos com menu de hambúrguer.
   • Oito ou mais seções: Reconsidere a arquitetura de informações e consolide.

2. Os usuários alternam frequentemente entre as seções?

   • Sim: Barra de guias (manter todas as opções visíveis).
   • Não: barra de comandos com menu (salvar espaço).

3. Seu suplemento tem fluxos de trabalho de várias etapas?

   • Sim: Use o botão voltar e o indicador de progresso para fluxos lineares.
   • Não: use a navegação direta (guias ou menu).

4. Seu suplemento tem mais de um ponto de entrada na faixa de opções?

   • Sim: use comandos de função com um runtime compartilhado para vincular profundamente a faixa de opções a exibições específicas do painel de tarefas.
   • Não: use uma ação padrão openPage (manifesto unificado para Microsoft 365) ou ShowTaskpane (manifesto somente suplemento) em seu manifesto.
   • Somente Excel: considere as guias contextuais para comandos específicos do contexto.

Confira também

• Painéis de tarefas nos suplementos do Office
• Comandos de suplemento
• Elementos da interface do usuário do Office
• Criar guias contextuais personalizadas
• Modelos de padrão de design de experiência do usuário
• IU do Fluent Componentes do React
• Persistir estado e configurações do suplemento
• Usar a API de caixa de diálogo do Office