Você pode se perguntar como otimizar a interface do usuário e a experiência do usuário das campanhas. Este artigo ensinará sobre o posicionamento ideal do elemento e o estilo da campanha.

WYSIWYG novo e melhorado (WalkMe Mobile SDK v1.13.1+)

Compreensão dos elementos

Cada item em OBJETOS no novo WYSIWYG corresponde a um objeto que atualmente está na tela do dispositivo de visualização:

Você pode selecionar um desses objetos para posicionamento e personalização clicando nele na árvore OBJETOS ou na tela de visualização do dispositivo.

Você pode mover todos os elementos na tela juntos clicando em Canvas na árvore OBJETOS e arrastando a seção destacada pela tela do dispositivo de visualização.

Além disso, você pode mover qualquer objeto (incluindo a tela) selecionando-o de uma das formas mencionadas acima e usando as teclas de seta para cima/para baixo/esquerda/direita no teclado.

Dicas e truques de design de campanha

Movendo elementos para frente e para trás

Alguns objetos podem ser movidos para frente e para trás em relação a outros elementos na tela (semelhante ao z-index no HTML). Você pode fazer isso de uma das duas maneiras:

1. Navegue até a guia TAMANHO e POSIÇÃO do objeto e clique em um dos ícones à direita da seção Reordenar:
   
   • Em ordem de aparição, os ícones significam 1) passar para a camada mais frontal, 2) avançar uma camada, 3) recuar uma camada, e 4) passar para a camada mais remota.
2. Clique com o botão direito do mouse no objeto ou clique na aba azul na tela de visualização do dispositivo e selecione uma das opções de ordenação de camadas:
   

Criando vários objetos com o mesmo design

Basta usar a opção "duplicar" que aparece à direita do objeto na árvore OBJETOS ou quando você clica com o botão direito do mouse em um objeto na tela de visualização do dispositivo.

Zoom para obter maior precisão

O zoom é útil ao trabalhar em designs grandes ou pequenos. Se você quiser fazer adições perfeitas ao seu conteúdo, faça zoom na tela:

Se você estiver trabalhando em dispositivos de tela grande, como tablets ou iPads, reduza o zoom para obter uma perspectiva diferente:

Visualização de conteúdo em dispositivos de usuário final

Uma parte importante da construção do conteúdo da campanha é garantir que sua campanha forneça uma interface do usuário agradável, independentemente do sistema operacional e tamanho do dispositivo.

A Pré-visualização , localizada no novo WYSIWYG, permite simular a aparência da campanha em dispositivos Android e iOS pequenos, médios e grandes, nas orientações retrato e paisagem:

Para alternar entre as orientações retrato e paisagem, clique no botão de alternância localizado na tela de visualização do dispositivo:

Menu de contexto

Ações rápidas e comuns estão disponíveis clicando com o botão direito do mouse em um objeto ou clicando na tag de borda azul:

Disposição de objetos na tela

Criar campanhas bonitas com design preciso é mais fácil do que nunca usando os dois recursos de organização de objetos:

1. Alinhamento de objetos: alinhar vários objetos entre si horizontal ou verticalmente; e
2. Distribuição de objetos: crie espaçamento igual entre objetos distribuindo-os horizontal ou verticalmente.

Para selecionar os objetos que deseja alinhar ou distribuir uns com os outros, segure a tecla Command (Mac) ou Ctrl (PC) e clique no(s) objeto(s) com o mouse:

Além disso, ao destacar dois ou mais objetos, você verá botões na seção PROPRIEDADES do WYSIWYG, permitindo organizar os objetos:

Desfazer e refazer

Não precisa hesitar antes de fazer alterações nos designs das suas campanhas! Qualquer alteração feita durante a edição pode ser desfeita clicando no botão Botão Desfazer ou digitando Command + Z (Mac) ou Ctrl + Z (PC).

Se você se arrepender de ter desfeito algo, você pode refazê-lo clicando em Refazer ou digitando Shift + Command + Z (Mac) ou Shift + Ctrl + Z (PC).

Atalhos de teclado e ações

Agora você pode usar as teclas de seta do teclado para mover a tela e os objetos dentro dela com mais sensibilidade do que quando você usa o mouse.

Além disso, você pode usar todos esses atalhos de teclado para economizar tempo:

Preferências salvas para o dispositivo de visualização

A seleção do dispositivo em que visualizar a campanha no WYSIWYG será preservada para a próxima vez que você abrir a mesma campanha. Isso só funciona se você abrir a campanha no mesmo computador.

Criando campanhas com uma tela de 0% de opacidade

Se você quiser criar uma campanha transparente que impeça os usuários de interagir com determinados elementos da interface do usuário e ainda permita que os usuários vejam o aplicativo por trás disso, defina a opacidade da tela como 0%:

Criando sombra

Se você quiser simular um efeito de sombra em um dos objetos da campanha, siga estas etapas:

1. Crie uma forma preta com as mesmas propriedades de tamanho e posição que o objeto:
   
   
2. Organize a forma preta para ficar atrás do objeto;
3. Mova a forma preta ligeiramente na direção onde deseja que a sombra apareça;
4. Altere a opacidade da forma preta de acordo com a cor da sombra que você gostaria de criar.
5. E aqui está o produto final!
   

Criando uma imagem clicável

Se quiser adicionar uma imagem à campanha que execute uma ação quando clicada, siga estas etapas:

1. Arraste um objeto botão para a tela ou clique em um objeto botão que já está lá;
2. Ativar um ícone para o botão;
3. Atribua uma imagem ao ícone:
   
   
4. Na seção FORMATO, selecione a ação adequada e redimensione o botão para que a imagem cubra toda a área:
   
   

Criando um botão "x" com um design não padrão

Siga as etapas na seção Criando uma imagem clicável acima e use como imagem o "x" que deseja que apareça na campanha.

Tamanho/posição absoluto, relativo e personalizado

Os casos de uso para dimensionamento absoluto incluem o seguinte:

1. Criar um botão que permanecerá do mesmo tamanho em todos os dispositivos (por exemplo, um botão "x");
2. Adicionar uma imagem à campanha que, de outra forma, seria deslocada no modo paisagem ou em telas de dispositivos maiores;
3. Ao adicionar texto (geralmente sempre Absoluto);
4. Para objetos de lista, pois o texto dentro do objeto de lista também é Absoluto.

Os casos de uso para dimensionamento relativo incluem o seguinte:

1. Permitir que a tela e os objetos da campanha mudem de tamanho dependendo da orientação do dispositivo e/ou do tamanho da tela do dispositivo;
2. Criando uma experiência de usuário melhor ao usar o widget Carousel em uma campanha;
3. Dimensionar os objetos da campanha em proporção aos objetos nativos do aplicativo.

Os casos de uso para dimensionamento personalizado incluem o seguinte:

O dimensionamento personalizado é ideal ao combinar dimensionamento relativo e absoluto, pois isso permite escolher entre esses modos em cada eixo. Por exemplo, se quiser que um botão permaneça da mesma altura, mas mude de largura (por exemplo, para o modo paisagem), escolha Relativo para larguraAbsoluto para a altura.

Dica profissional: alternar entre as opções de posição Absoluta, Relativa e Personalizada altera a maneira como o objeto está localizado na tela. Use as opções Visualização e Paisagem em conjunto para ver como as alterações posicionais serão refletidas em qualquer dispositivo.

Compreendendo a relação de aspecto do objeto

Quando a proporção de uma imagem está bloqueada, isso significa que a proporção da imagem afetada permanecerá a mesma, independentemente de quão pequena ou grande ela se torne em resposta a alterações no tamanho da tela. Para conseguir isso, um dos eixos da imagem é bloqueado no modo Absoluto ou Relativo (conforme a preferência) e o tamanho da imagem ao longo do outro eixo é ajustado automaticamente para preservar a proporção dos eixos.

Para escolher qual eixo está bloqueado, clique na palavra "Auto" no campo de entrada do eixo desejado.

Ao adicionar uma nova imagem à tela, a proporção da imagem será automaticamente "bloqueada".

Trabalhando com a árvore OBJETOS

Renomear objetos

Agora você pode renomear objetos na árvore OBJETOS para dar a eles nomes significativos que facilitarão sua identificação:

Passe o mouse sobre os objetos na árvore

Ao passar o mouse sobre os objetos na árvore de objetos, eles serão destacados no WYSIWYG, facilitando assim a localização de cada objeto:

Práticas recomendadas de design de campanha (Legado e Novo WYSIWYG)

Ao criar campanhas no Assistente de Campanha, siga estas práticas recomendadas, quando aplicável:

• Modele sua campanha com o(s) menor(es) dispositivo(s) que os usuários finais usarão em mente;
  • Se houver espaço insuficiente no dispositivo do usuário final, o conteúdo do WalkMe pode não estar totalmente visível;
  • Considere segmentar os usuários finais das campanhas por tamanho de dispositivo.
• O posicionamento mais intuitivo e menos propenso a erros para campanhas nas telas dos dispositivos do usuário final é alinhado ao centro ou ancorado para um lado;
  • Se quiser que uma campanha abranja toda a largura ou altura da tela do dispositivo do usuário final, estique-a no editor WYSIWYG até que o tamanho do Elemento Canvas seja 100% ao longo do eixo em que você está esticando-o.
• Se você precisar suportar o modo paisagem (além do modo retrato), realize Controle de Qualidade (QA) com frequência ao projetar, dimensionar e posicionar seus elementos de forma criativa com esse objetivo em mente.
• Lembre-se de atribuir uma ação ao objeto Sobreposição da campanha:
  
  • Alguns casos de uso comuns para atribuir ações a sobreposições e alcançá-las incluem o seguinte:
    • Se quiser que o usuário final apenas descarte uma campanha clicando em um objeto de campanha, escolha a ação "Nenhuma", o que altera a sobreposição de tela para não ser clicável;
    • Se você estiver usando um modelo de menu ou outro ShoutOut e quiser permitir que os usuários toquem na sobreposição de tela para fechar o ShoutOut para aumentar a usabilidade, defina a ação de sobreposição de tela como "Fechar".
    • Se você quiser apresentar uma pesquisa de feedback a todos os usuários que descartaram uma mensagem ShoutOut, defina a ação de sobreposição de tela como "Campanha" e selecione a pesquisa desejada;
    • Leia mais sobre ações aqui.
• Ao adicionar imagens às campanhas, carregue imagens com o menor tamanho possível para acelerar o processo de download da campanha.

WYSIWYG legado (WalkMe Mobile SDK v1.13.0 e anterior)

Compreensão dos elementos

Cada item em ELEMENTOS DA CAMPANHA no WYSIWYG corresponde a um elemento que está atualmente na tela do aplicativo:

Você pode selecionar um desses elementos para colocação e personalização clicando nele na seção ELEMENTOS DA CAMPANHA ou na própria tela do aplicativo.

Você pode mover todos os elementos na tela clicando em CANVAS em ELEMENTOS DA CAMPANHA e arrastando a seção destacada pela tela do aplicativo.

Dicas e truques de design de campanha

Movendo elementos para frente e para trás

Alguns elementos podem ser movidos para frente e para trás em relação a outros elementos na tela (semelhante ao z-index no HTML). Você pode fazer isso de uma das duas maneiras:

1. Clique no menu suspenso à direita do elemento e selecione Avançar ou Retrás; ou
2. Clique com o botão direito do mouse na imagem na tela do aplicativo e selecione Avançar ou Retrás:

Isso é útil em situações em que você atribui um acionador de CTA a um elemento que fica no mesmo local na tela do aplicativo que outro elemento (por exemplo, uma forma na parte superior de uma imagem).

Escalando e encaixando a tela

Você pode redimensionar a maioria dos elementos à vontade, usando os campos de tamanho do painel de configurações ou clicando na borda do elemento na tela do aplicativo e arrastando o redimensionamento manualmente.

Ao projetar para vários dispositivos e tamanhos de dispositivos, você deve localizar e definir o tamanho dos elementos com isso em mente. Use as linhas de orientação vermelhas na tela do aplicativo para entender quando os elementos estão centrados e/ou ancorados nas laterais da tela do aplicativo.

Por exemplo, quando um elemento (na imagem a seguir, o elemento CANVAS) é centralizado vertical e horizontalmente, você verá duas linhas de orientação vermelhas que se cruzam:

Se um elemento estiver centralizado vertical e horizontalmente, ele aparecerá no centro da tela do aplicativo, independentemente do dispositivo selecionado no painel DISPOSITIVO DE VISUALIZAÇÃO, mas poderá ser interrompido se o tamanho do conteúdo for muito grande para caber na tela de um determinado dispositivo.

Visualização de conteúdo em dispositivos de usuário final

Uma parte importante da construção do conteúdo da campanha é garantir que sua campanha forneça uma interface do usuário agradável, independentemente do sistema operacional e tamanho do dispositivo.

O DISPOSITIVO DE VISUALIZAÇÃO permite simular a aparência da campanha em dispositivos Android e iOS pequenos, médios e grandes, nas versões retrato e paisagem:

Personalizando a contracapa da campanha

Com o Mobile SDK versão 1.7.0 e superior, você pode personalizar a capa traseira da campanha (ou a área atrás da campanha enquanto a campanha é exibida).

Você pode designar a cor da contracapa, a opacidade e o CTA associado (este último apenas para ShoutOuts):

Os valores padrão são os seguintes:

• Cor: preto;
• Opacidade: 0,7;
• CTA: TALVEZ.