Visão geral do Appearance Studio
O que há nesta página
Visão geral do Appearance Studio
O Appearance Studio é um novo editor visual para criar a visual de usuário das suas interceptores digitais. Ele permite que você crie layouts responsivos, aplique o estilo da marca e configure opções de acessibilidade e tradução sem precisar escrever código CSS personalizado.
Qdica: No momento, você só pode usar o novo Appearance Studio para criativos novos e para criativos existentes cuja aparência tenha sido excluída. Haverá um plano de migração para os criativos existentes em uma data posterior. Selecione “Excluir aparência” para excluir as configurações de aparência de um anúncio já existente. Observe que as participações excluídas não podem ser recuperadas!
Acessando o Appearance Studio
Você pode usar o Appearance Studio para personalizar interceptores guiadas.
Qdica: No momento, o Appearance Studio não está disponível para criativos de aplicativos móveis.
Na sua interceptor guiada, clique em “Abrir editor de aparência”.
Você pode escolher um dos layouts pré-configurados como ponto de partida ou clicar em “Começar do zero” para iniciar com um layout vazio.
Em seguida, você pode navegar pelas diferentes seções do Appearance Studio:
- Construção: Construa e personalize os componentes do seu sistema reativo.
- Animação: Defina uma animação para determinar como a interceptor aparecerá na tela.
- Acessibilidade: Certifique-se de que sua interceptor seja acessível a tecnologias assistivas.
- Traduções: Adicione traduções e defina como o idioma do visitante será determinado.
Guia “Compilação”
A aba “Build” é onde você cria o layout do seu anúncio e personaliza os diferentes elementos. Para obter instruções detalhadas, consulte “Criação de layouts de aparência”.
Guia “Animação”
Na aba “Animação”, você pode personalizar a forma como sua interceptor aparece na tela e por quanto tempo ela permanece visível para os visitantes.
Ative a animação “In clude” para animar sua interceptor.
Qdica: Quando desativado, a interceptor simplesmente aparecerá na página.
Determine o atraso (em segundos) antes que a interceptor apareça após o carregamento da página.
Se desejar, ative a opção “Definir limite” para fechar a caixa de diálogo. Quando ativado, especifique um número de segundos após o qual a janela interceptor se fecha automaticamente.
Escolha o tipo de transição:
- Nenhuma: Sem transição. A interceptor aparecerá repentinamente na página.
- Fade: A interceptor fica opaca gradualmente.
- Slide: A interceptor aparece na tela.
Dependendo do tipo de transição selecionado, você terá opções adicionais para configurar:
Fade: Escolha o fundo do Fade (entre claro, médio e escuro). Essa configuração escurece o site que fica por trás da interceptor.
Slide: Selecione a direção do slide (de baixo, de cima, da esquerda ou da direita). Opcionalmente, você pode escolher um fundo com efeito de desvanecimento ao usar uma animação de slide.
Clique em “Visualizar animação” para testar a animação na janela de visualização.
Quando terminar, clique em “Salvar aparência”.
Acessibilidade
Qualtrics oferece as ferramentas necessárias para garantir que suas interceptores sejam inclusivas e estejam em conformidade com os padrões de acessibilidade da web. Tecnologias assistivas, como leitores de tela, dependem de rótulos de texto ocultos para explicar o conteúdo visual aos usuários. Existem dois rótulos diferentes usados pelas interceptores Qualtrics que serão lidos pela tecnologia assistiva:
- Texto alternativo (texto alt): O texto alternativo é uma descrição breve e clara do que uma imagem mostra.
- Rótulos ARIA: os rótulos ARIA são atributos adicionados a elementos interativos (como botões) para fornecer contexto adicional sobre a ação que o elemento realiza.
Você pode verificar os elementos compatíveis com rótulos de acessibilidade na guia “Acessibilidade” do Appearance Studio.
A partir daqui, você pode personalizar qualquer elemento que utilize texto alternativo. Isso inclui:
- Ícone de fechar (“X”)
- Ícone de minimizar (quando usado com um botão de feedback)
- Gráficos
- Conexão integrada
Qdica: Os elementos que utilizam rótulos ARIA, como botões padrão e o botão de feedback, não podem ser personalizados separadamente. O texto exibido no botão é usado como rótulo ARIA, e esse comportamento não pode ser alterado. Como o rótulo é derivado do texto do botão, o rótulo ARIA pode ser traduzido quando o anúncio for traduzido. Esses elementos continuarão aparecendo na guia “Acessibilidade” do , mas estarão apenas para leitura. Elas podem ser alteradas editando-se o elemento (ou suas traduções) diretamente.
Traduções
Se você implementar interceptores para um público global, poderá traduzir todo o texto interceptor diretamente na seção “Traduções ” do Appearance Studio.
Na guia “Tradução” , clique em “Adicionar idioma”.
Selecione o Idioma base, que é determinado automaticamente a partir do texto que você inseriu originalmente na guia “Compilação”. Quaisquer campos não traduzidos exibirão o texto idioma base.
Qdica: Precisa alterar o idioma base, mas não encontra o idioma desejado entre as opções? Adicione o idioma como uma tradução e, em seguida, salve as alterações. Depois, você pode reabrir esse menu e selecionar o idioma como seu idioma base.
Escolha o(s) idioma(s) traduzido(s) que você gostaria de adicionar à sua interceptor.
Clique em Confirmar.
Para traduzir manualmente um idioma, clique nele na lista de idiomas disponíveis.
Você será direcionado para um editor de Build, onde poderá traduzir cada elemento da sua interceptor. Clique em um elemento para editá-lo diretamente ou use o painel de participantes lateral para navegar entre os elementos traduzíveis. Consulte “Personalização de elementos de texto” para obter orientações sobre como formatar o texto.
Qdica: O conteúdo de uma pesquisa incorporada é traduzido dentro da própria pesquisa, e não no Appearance Studio.
Para gerenciar traduções em lote, clique em “Baixar arquivo de tradução”.
Qdica: O envio de um arquivo CSV substituirá todas as traduções adicionadas anteriormente, exceto os campos que estiverem totalmente em branco no arquivo.
Abra o arquivo em um editor de planilhas (como Microsoft Excel) e adicione as traduções nas colunas de idiomas. Certifique-se de salvar seu arquivo no formato CSV.
Clique em “Carregar arquivo de tradução” e selecione o arquivo salvo no seu computador.
Qdica: Consulte “Problemas com o upload de arquivos CSV e TSV” para obter dicas de solução de problemas.
Na seção “Opções avançadas”, escolha como você deseja que Qualtrics detecte o idioma a ser exibido aos visitantes do site:
- Idioma do navegador: Use o idioma do navegador do visitante para determinar qual idioma exibir.
- Variável global de JavaScript: Se o seu site armazena o idioma do visitante em uma variável de JavaScript, forneça essa variável para determinar qual idioma deve ser exibido. Os valores das variáveis devem conter o código do idioma correspondente.
Verifique novamente cada tradução clicando nela e revisando o interceptor no editor.
Cada tradução deve ser ativada alterando a opção “Visível ” para “Sim”.
Clique em “Salvar aparência”.
Isso é ótimo! Obrigado pelo seu feedback!
Obrigado pelo seu feedback!