Interface Web

A Konviva permite que o administrador configure elementos da interface do ambiente, como a imagem da tela de login, os menus e submenus, as cores e os botões, permitindo grande flexibilidade para adequar o layout à identidade visual da empresa.

A funcionalidade é acessada pelo caminho Configurações > Layout > Interface web. O configurador é organizado em abas: Configurações gerais, para os dados padrão do ambiente, e Configurações de interface, para a personalização da interface do aluno.

Jornada de uso

Perfis e o que cada um pode fazer

Como configurar e realizar cadastros

A configuração é feita pelo Administrador, em Configurações > Layout > Interface web. Nas telas do configurador aparecem os botões Voltar ao padrão, que restaura a configuração original da Konviva, Cancelar, que descarta as alterações ainda não salvas e restaura a configuração anterior, e Salvar. Nas Configurações de interface, o Salvar grava apenas as alterações da seção em que o administrador está trabalhando (Cabeçalho, Menu ou Configuração de nomenclatura); por isso, é necessário salvar em cada seção alterada.

Para o Administrador: configurações gerais

Em Configurações gerais é possível definir as configurações padrão do ambiente: o título da página exibido no navegador, a descrição, o ícone da página e a imagem de fundo da tela de login.

Passo 1: Acessar o configurador. Acesse o menu Configurações > Layout > Interface web e selecione a aba Configurações gerais.

Passo 2: Preencher os campos. Informe os dados abaixo.

Para trocar uma imagem, clique em Trocar Imagem ao lado do campo correspondente.

Passo 3: Salvar. Clique em Salvar para gravar as configurações.

Para o Administrador: configurações de interface

Em Configurações de interface é possível personalizar a interface do aluno: o cabeçalho, com a troca do logo; o modelo e a organização do menu; e a nomenclatura dos menus.

Passo 4: Abrir a aba e conferir a pré-visualização. Selecione a aba Configurações de interface. No início da tela, a pré-visualização mostra como o conteúdo será exibido ao aluno, tanto na interface web quanto na mobile. A pré-visualização é ilustrativa e não reflete os dados registrados no sistema.

A configuração de interface está dividida em três etapas, exibidas abaixo da pré-visualização: Cabeçalho, Menu e Configuração de nomenclatura. Clique no título de cada uma para expandi-la.

Cabeçalho

A configuração do cabeçalho se refere ao logo, às cores, que se refletem em todo o ambiente, e aos ícones de acesso rápido.

Passo 5: Configurar o cabeçalho. Expanda Cabeçalho e configure os itens abaixo.

Cores disponíveis, conforme os grupos exibidos na tela:

Menu

Passo 6: Escolher o modelo do menu. Expanda Menu. Em Modelo do menu, selecione uma das opções: horizontal, vertical ou hambúrguer. As limitações do modelo horizontal são diferentes das dos modelos vertical e hambúrguer.

Passo 7: Habilitar ícones do menu. Ative a chave Habilitar ícones de menu para utilizar ícones no menu. Os ícones podem ser customizados ou trazidos da biblioteca do Material Design, o que permite ao administrador levar a identidade visual da empresa para a plataforma.

Passo 8: Habilitar o link direto (opcional). Ative a chave Habilitar link direto, quando menu principal tem um único item. Quando um menu principal possui apenas um item configurado, ele deixa de ser exibido como submenu e passa a funcionar como link direto para a funcionalidade selecionada. Nesse comportamento:

• o nome do menu principal é substituído pelo nome configurado da funcionalidade selecionada;

• o clique no menu principal direciona diretamente para a funcionalidade, sem abrir submenu.

Passo 9: Organizar o menu. Em Organização do menu, organize os menus disponibilizados. Os itens disponíveis estão na primeira coluna da tela e podem ser arrastados para os menus principais, exibidos nas demais colunas, o que dá autonomia para organizar o menu da forma mais adequada ao ambiente. Também é possível remover um item de um menu principal, devolvendo-o aos itens disponíveis, e adicionar o item em outro menu principal.

Cada modelo de menu tem um limite de menus principais, conforme a tabela do modelo de menu: no menu horizontal, somente 3 fixos; nos menus vertical e hambúrguer, no mínimo 3 e no máximo 9.

Nos modelos vertical e hambúrguer, o botão +, no canto inferior direito da área de organização, adiciona um novo menu principal, até o máximo de 9. No modelo horizontal, os 3 menus principais são fixos e o botão + não é exibido.

O item URL externa, na lista de itens disponíveis, tem o ícone +. Pela tela, o limite de cadastro de URLs externas é de 10: ao atingir o limite, é necessário excluir uma URL para adicionar outra.

Passo 10: Editar o nome e o ícone do menu principal. Clique no ícone de edição (lápis) ao lado do nome do menu principal.

O sistema exibe uma janela, onde é possível customizar o menu principal (janela “Editar coluna”) com um nome ou um ícone diferente. Informe o Título (campo obrigatório; a tela exibe o contador de caracteres restantes) e escolha a origem do ícone:

• Padrão: o ícone é escolhido na biblioteca do Material Design, digitando o nome dele no campo Ícone ou selecionando-o na lista.

• Customizado: o administrador envia o ícone que desejar, clicando em Alterar ícone. A imagem deve ter 32 x 32 px, no formato PNG ou SVG. É importante conferir as cores da plataforma, para que os ícones tenham contraste com o fundo do menu.

Clique em Salvar para confirmar ou em Cancelar para fechar a janela sem alterações.

Configuração de nomenclatura

Pelo configurador de nomenclatura é possível alterar os nomes relacionados aos itens fixos e configuráveis dos menus e adicionar a tradução para outros idiomas.

Passo 11: Escolher o idioma. Expanda Configuração de nomenclatura. A tela lista os idiomas disponíveis: Português, Espanhol, Espanhol Colombiano, Inglês e Mandarim. Clique no idioma desejado.

Passo 12: Informar o novo nome. Ao abrir cada idioma, aparecem os menus configurados, com a coluna Título do item e o campo Novo nome, onde se insere o termo ou a tradução desejados. Os nomes dos menus principais aparecem em destaque, seguidos dos itens de cada um e dos ícones de acesso rápido. A tela exibe o contador de caracteres restantes de cada campo.

O sistema já tem a tradução nativa. Quando o aluno acessa com o idioma preferencial dele, vê o menu e todos os elementos configurados traduzidos para esse idioma. Se o administrador quiser usar outro termo no lugar da tradução nativa, basta informá-lo no campo Novo nome. Por exemplo, o termo Trilhas é traduzido nativamente para o inglês como Learning paths. A figura abaixo mostra a visão do aluno, com os termos traduzidos automaticamente. Ao inserir um novo termo no configurador, o sistema atualiza o menu com a nova terminologia no idioma correspondente.

Regras de negócio relevantes

Acesso e pré-visualização

• O acesso a Configurações > Layout > Interface web é do Administrador.

• Nas Configurações de interface, o Salvar grava somente a seção aberta (Cabeçalho, Menu ou Configuração de nomenclatura). Se houver alterações em mais de uma seção, salve em cada uma.

• Antes de salvar, o botão Cancelar descarta as alterações feitas (por exemplo, itens movidos ou cores trocadas) e restaura a configuração anterior, sem necessidade de desfazer manualmente.

• As alterações passam a valer para os alunos depois de novo login ou da atualização (refresh) da página.

• A pré-visualização é ilustrativa e não reflete os dados registrados no sistema.

Cabeçalho

• As cores configuradas se refletem em todo o ambiente.

• É permitida a seleção de no máximo 3 ícones de acesso rápido, que aparecem no canto superior direito. Os ícones são padronizados; os títulos podem ser renomeados na Configuração de nomenclatura.

• Para deixar o fundo do widget transparente, selecione a cor #000000.

Menu

• Menu horizontal: 3 menus principais fixos, nem mais nem menos. Os subitens podem ser organizados livremente e aparecem em dropdown.

• Menus vertical e hambúrguer: no mínimo 3 e no máximo 9 menus principais, sem contar os subitens.

• Nos menus vertical e hambúrguer, o botão + adiciona menus principais até o limite de 9. No horizontal, o botão + não é exibido.

• Os itens disponíveis ficam na primeira coluna e são arrastados para os menus principais.

• Com o link direto habilitado, o menu principal que tem um único item passa a ser um link direto para a funcionalidade, e o nome dele é substituído pelo nome da funcionalidade.

• O limite de cadastro de URLs externas é de 10. Ao atingir o limite, é necessário excluir uma URL para adicionar outra.

• Os ícones do menu podem ser customizados ou trazidos da biblioteca do Material Design.

Nomenclatura e idiomas

• A tradução nativa do sistema é exibida ao aluno no idioma preferencial dele. O administrador pode substituí-la por outro termo.

• Cada idioma tem a sua própria lista de nomes. Um novo termo atualiza o menu na terminologia do idioma em que foi informado.

Imagens

• As dimensões e os formatos das imagens do logo, do ícone e da imagem de fundo do login estão indicados nas tabelas da seção Como configurar e realizar cadastros.

Aplicando no negócio

Para que serve

O ambiente de aprendizagem é o lugar onde o colaborador encontra a empresa que o treina. A Interface Web serve para que esse ambiente tenha a identidade e o vocabulário da empresa e seja organizado do jeito que o público dela procura as coisas. Com ela, a empresa consegue:

• reforçar a identidade da empresa ou da universidade corporativa na tela de login, no cabeçalho, nos botões e nas abas do navegador, de modo que o aluno perceba o ambiente como da empresa e não como o de um fornecedor de software;

• organizar a navegação pela lógica da empresa, escolhendo o modelo de menu, agrupando os itens em menus principais e criando acessos diretos;

• dar acesso rápido, no cabeçalho, às funcionalidades que mais interessam ao público (até 3 ícones);

• usar o vocabulário da empresa e adaptar o menu a cada idioma, substituindo a tradução nativa quando necessário.

Referências de mercado apontam que a personalização da marca no LMS corporativo gera consistência entre os materiais e as ferramentas internas e faz o treinamento ser percebido como parte do trabalho.

Recomendações na hora de configurar:

• Modelo do menu. Quando o público acessa principalmente por computador, prefira os modelos horizontal ou vertical, em que os itens ficam sempre à vista.

• Nomes do menu. Use os termos que o público realmente procura e, depois de configurar, confirme com alguns alunos se encontram os itens sem ajuda.

• Cores. Confira o contraste entre texto e fundo (textos do menu sobre o header, texto dos botões sobre os botões, textos dos widgets). A WCAG 2.2 (critério 1.4.3, nível AA) pede razão mínima de 4,5:1 para texto normal e de 3:1 para texto grande.

• Alinhe com o time responsável pela identidade visual como o ambiente deve utilizar a marca da empresa ou a da universidade corporativa, com logo, cores, imagem de login e ícones próprios.

Caso prático: Academia Aurora, uma interface com a cara da empresa em três países

Este exemplo mostra, com uma empresa fictícia, a Academia Aurora, universidade corporativa de um grupo com operações no Brasil, na Colômbia e nos Estados Unidos, como a Interface Web apoia o negócio. Os objetivos são:

• reforçar a identidade da Aurora no ambiente de aprendizagem;

• simplificar a navegação, para que o colaborador chegue rápido ao curso que procura;

• dar acesso rápido a canais de ajuda;

• falar a língua de cada país, com o vocabulário da empresa.

Passo 1. Defina o resultado e o público. A Aurora quer que o colaborador reconheça o ambiente como da empresa e chegue ao catálogo em poucos cliques. Os públicos acessam em português, espanhol colombiano e inglês.

Passo 2. Configure as informações gerais. Em Configurações gerais, a Aurora define o título da página como “Academia Aurora”, escreve uma descrição curta, envia o símbolo da marca como ícone (18 x 18 px) e uma imagem institucional de 1920 x 1080 px como fundo da tela de login.

Passo 3. Configure o cabeçalho. A Aurora envia o logo em 240 x 86 px e define as cores conforme o Manual de Identidade da empresa, conferindo o contraste entre os textos e os fundos. Nos ícones de acesso rápido, seleciona três dos disponíveis: Correio, Fale Conosco e FAQ, para que o colaborador encontre ajuda sem procurar.

Passo 4. Escolha o menu. Como o menu da Aurora é enxuto e o acesso é principalmente por computador, ela escolhe o modelo horizontal, que mantém os itens sempre à vista e tem 3 menus principais fixos. Habilita os ícones do menu e organiza os 7 itens em 3 menus principais:

Sem o link direto, o colaborador precisaria de 2 cliques para chegar ao Catálogo (menu e item). Com ele, chega com 1 clique.

Passo 5. Adapte a nomenclatura por idioma. No grupo da Aurora, as trilhas são chamadas de jornadas. Em Configuração de nomenclatura, ela substitui o termo Trilhas em cada idioma, respeitando o contador de caracteres exibido na tela:

Passo 6. Salve e confira a visão do aluno. A Aurora salva as configurações e confere como o aluno vê o menu em cada idioma, como na Figura 17.

Como interpretar o resultado. A Interface Web não gera relatório próprio, então a leitura vem da experiência do colaborador. Na Aurora, o colaborador reconhece a marca na tela de login e no cabeçalho, chega ao Catálogo com um clique, tem Fale Conosco e FAQ sempre à mão e vê os termos no idioma do seu país. Se, ao conversar com um grupo de colaboradores de cada país, a Aurora perceber que alguém não encontra um item, ela reorganiza os menus ou ajusta o nome do item no idioma correspondente. Os ajustes valem para todos os alunos que usam aquele idioma e não exigem refazer o restante da configuração.