Por que você deve evitar oferecer recursos interativos “escondidos”

A segunda parte da série sobre os 5 erros de design mais comuns no Qlik Sense, falamos sobre uma falha que literalmente pode passar despercebida, tanto para você quanto para o seu usuário.

Essa falta de atenção certamente tem um impacto negativo na experiência do usuário final do seu dashboard.

Continue lendo para saber mais sobre a importância de sinalizar recursos interativos para uma boa usabilidade.

 

Erro nº 2: Oferecer recursos interativos “escondidos”

A maioria dos dashboards de BI é interativa, ou seja, oferece aos usuários a possibilidade de realizar ações por meio da interação com elementos na tela.

Esses elementos podem ser botões, abas, filtros, menus, etc.

Para que um recurso interativo cumpra bem sua função, é muito importante que sua aparência ajude o usuário a entender seu propósito.

Por exemplo, quando você vê um botão, entende que, ao clicar nele, uma ação é acionada.

Isso acontece porque qualquer pessoa familiarizada com o ambiente digital já tem uma ideia de como é um botão e qual é sua função.

Ao identificar um elemento visualmente semelhante, associamos rapidamente à função conhecida.

Quando oferecemos algum recurso interativo que não deixa clara sua função por meio de sua forma, dificultamos ou até impossibilitamos seu uso.

Vamos ilustrar com um exemplo. Abaixo temos um dashboard que oferece algumas possibilidades de interação. Você consegue identificar quais são apenas olhando para a tela?

 

Alguns elementos interativos nos dão pistas sobre qual é sua função, como o menu, os “Filtros de Tempo” e os links “Visualização de Marca >>”.


Mas uma das principais opções de interação que essa página oferece está escondida à primeira vista.

Há poucas pistas visuais que ajudam o usuário a descobrir que é possível realizar essa ação.

Observe que há uma área com fundo azul claro que indica que alguns dados estão relacionados entre si.

A partir do agrupamento visual, entendemos que os dados de “Contribuição por Especialidade” se referem à marca “ProtoQlik”.

O que fica mais difícil de perceber é que, ao clicar no bloco com fundo cinza, selecionamos a marca “Qlikatan” e os dados abaixo passam a se relacionar a esse conjunto de dados.


Não há texto, link ou mudança visual quando o mouse passa sobre o bloco clicável que sinalize essa interação.

Isso torna muito improvável que um usuário realmente encontre e entenda essa informação. E muitos dados importantes podem não chegar ao seu destino final como resultado dessa escolha de design ruim.

 

A solução: Sinalize claramente seus recursos interativos

 

Se o seu dashboard oferece algum tipo de recurso interativo, um bom exercício é observar cada uma dessas interações e se perguntar quão clara será a comunicação de sua função para alguém que nunca viu seu dashboard antes.

Não se esqueça de que o que é óbvio para você pode não ser óbvio para alguém que não está familiarizado com aquela visualização.

Por isso, é ainda melhor se você conseguir observar seus usuários usando o dashboard ou até pedir que eles realizem algumas ações nele.

Algumas perguntas importantes a considerar:

A aparência do meu elemento interativo diz algo sobre sua função? Um link se parece com o que é comumente conhecido como link? Eu uso texto que explica a ação esperada? Meu ícone clicável tem um rótulo que ajuda a entender seu significado? Quando coloco o cursor do mouse sobre algum elemento interativo, ocorre alguma mudança visual? Meu botão muda de cor? O cursor muda? Eu sempre identifico elementos com a mesma função da mesma forma? Sempre que mostro um botão, ele tem a mesma cor e estilo em todo o painel?

Abaixo trazemos um exemplo para mostrar boas práticas quando se trata de comunicar recursos interativos de forma eficaz.


Este é o Cluster App, o gerador automatizado de mashups da Cluster, projetado para proporcionar uma ótima experiência de usuário em contextos desktop e mobile, sem exigir esforço de implementação.

Ele funciona dentro do NewHub, nosso centralizador e organizador de aplicativos Qlik Sense. Saiba mais sobre nossos produtos no site.

A primeira dica é usar mudanças visuais e de cursor ao passar o mouse sobre elementos interativos.

Esse recurso é bem conhecido e, portanto, facilmente associado à possibilidade de ação.

Além disso, qualquer movimento ou mudança visual é uma das formas mais eficazes de chamar a atenção do usuário (anúncios piscando são bem irritantes, mas temos que concordar que é quase impossível não vê-los).


Observe que, além da sutil mudança na cor de fundo dos botões, o ícone do cursor muda de um padrão de seta para uma mão indicando o clique.

Outra boa prática é usar texto dentro dos elementos clicáveis sempre que possível, como você pode ver no exemplo em “Filtros favoritos” e “Todos os filtros”.

Ícones são ótimos aliados para tornar seu painel mais atraente, mas nada substitui um rótulo claro para transmitir a informação com precisão.

Quando o espaço é muito restrito e não é possível adicionar texto, um recurso útil que você sempre terá são os tooltips: são pequenos balões com informações que aparecem apenas quando você para o mouse sobre um elemento.

Abaixo você pode ver exemplos de como os tooltips podem ser usados para dar mais clareza aos elementos interativos.


Outro aspecto muito importante para reduzir o esforço do usuário é a consistência.

Isso significa que tudo que tem funções semelhantes deve ser exibido da mesma forma em todo o seu dashboard.

Ser consistente ajuda a usabilidade porque reduz a necessidade de o usuário aprender novas convenções.

Uma vez que você entende a função de um elemento, não precisará aprendê-la novamente ao ver um elemento semelhante em outro espaço.

Observe no exemplo abaixo como os botões mantêm o mesmo estilo em diferentes contextos do dashboard.


Lições aprendidas

 

Certifique-se de marcar todos os recursos interativos de alguma forma; use padrões conhecidos para elementos interativos — um botão deve parecer um botão, uma aba deve parecer uma aba; sempre que possível, use texto para reforçar ações, seja de forma aparente ou com auxílio de tooltips; use recursos como mudanças visuais e de cursor ao passar o mouse sobre elementos interativos; seja consistente no uso de padrões visuais em todo o seu dashboard; teste seu dashboard com seus usuários para validar que a comunicação pretendida está clara.

Não tenha medo de ser redundante e lembre-se: o que é óbvio para mim nem sempre é óbvio para você.

Dedique bastante esforço para sinalizar os elementos interativos do seu dashboard e ajude seu analista a realizar todas as ações que ele precisa.

Texto escrito por Silvia Cardoso Pereira, UI/UX Designer na Cluster

Conteúdo relacionado