Referência:
https://www.gov.br/ds/padroes/design/ajuda
O recurso de ajuda é uma maneira de fornecer respostas às dúvidas ou anseios dos usuários, visando esclarecer os meios pelos quais estes poderão concluir suas tarefas, ou acessar algum conteúdo. Já o recurso de comunicação possibilita o envio de Feedback do usuário, como dúvidas, caso o usuário não encontre a informação desejada no conteúdo de ajuda, além de ter a possibilidade de enviar sugestões, comentários ou relatar bugs.
Quando usar ajuda e comunicação para o usuário:
Sempre utilize o recurso de ajuda.
Para usuários novatos, experientes ou especialistas, se possível ofereça ajuda direcionada a cada tipo de usuário em seus diferentes níveis de experiência;
Dentro do imaginário coletivo dos usuários de sistemas, aplicativos, e sítios web, já existe uma forte referência iconográfica que representa um contexto de ajuda, a representação iconográfica do símbolo de interrogação, por exemplo: question
ou question-circle
. Evite utilizar outras simbologias que trazem dúvidas ao usuário com relação a informação semântica.
Utilize o question
ou question-circle
como iconografia padrão de ajuda
Importante: Em situações de ajuda contextual pode-se usar o ícone de informação info
ou info-circle
como uma alternativa, pois além de ser uma prática bastante comum neste tipo de situação, faz parte do padrão estabelecido na documentação de Formulários.
Utilize info
ou info-circle
como padrão alternativo para ícone de ajuda contextual
Ajuda global compreende todo conteúdo de ajuda disponível para o usuário em um sistema. Tem o objetivo de auxiliar o usuário em todos os aspectos e deve oferecer desde instruções básicas até as mais avançadas, abordando todas as questões de uso do produto. Abaixo seguem algumas formas de como estruturar este conteúdo:
Disponibilize uma seção de ajuda: O conteúdo deve ser estruturado em uma tela ou seção do sistema. Deve ficar claro para o usuário onde encontrar o conteúdo de ajuda.
A ajuda contextual é uma forma de apresentar ao usuário um fragmento do conteúdo de ajuda relacionado ao conteúdo, elementos ou telas com os quais o usuário está interagindo. É bastante útil, pois evita que o usuário perca tempo procurando um tópico de ajuda específico dentro do conteúdo de ajuda global.
1. Utilize um acionador Dropdown ou Collapse: Recomenda-se seguir o padrão Dropdown ou Collapse para exibir ou ocultar o conteúdo de ajuda contextual;
2. Posicionamento: Posicione o ícone padrão de ajuda próximo ao elemento referência da ajuda.
3. Escrita: Apresente um texto curto, direto e contextual a respeito da ajuda solicitada;
Os componentes Modal e Tooltip são os mais adequados para exibição do conteúdo de ajuda contextual, pois são elementos flutuantes na interface e facilitam a apresentação ou ocultação deste. Dependendo do formato ou riqueza de detalhes apresentado na ajuda contextual, pode-se optar pelo uso do Tooltip ou Modal. Veja as diferenças a seguir:
Quando a necessidade exigir um conteúdo de ajuda contextual mais elaborado, contendo texto com formatação, imagens, vídeos etc, faz-se necessário usar o componente Modal, pois este permite maior espaço, além de oferecer rolagem interna.
Para situações que exijam um conteúdo textual simples, com número de caracteres reduzidos, é recomendado o uso de Tooltips. Neste caso, evite utilizar um texto muito grande ou uso de imagens. É muito usado para oferecer pequenas dicas ao usuário ou auxiliar no preenchimento de campos de formulário.
O padrão Dropdown ocorre quando uma superfície flutuante surge sobre a tela, de forma temporária, a partir de um elemento acionador. Esta superfície pode conter informações adicionais com características voltadas para coleta de dados, seleção de opções ou apenas texto informativo.
Caso seja necessário fazer uma referência a algum conteúdo relacionado ou um detalhamento maior da ajuda, pode-se usar um hiperlink de acesso ao conteúdo de ajuda global. Este deve estar localizado dentro do Tooltip ou Modal ao final do conteúdo de ajuda contextual.
Este recurso é bastante útil quando o usuário interage com o sistema pela primeira vez ou quando o sistema traz alguma novidade decorrente de novas atualizações. Geralmente é exibido em forma de passo a passo, utilizando recursos textuais ou apontando detalhes na interface onde estão presentes as novidades. O Padrão Onboarding detalha este tipo de situação de forma mais completa.
De forma geral, os recursos de comunicação são a principal forma pela qual o usuário poderá fornecer um feedback do uso do sistema. Este feedback pode ser qualquer tipo de comentário que expresse um sentimento do usuário em relação ao sistema no qual ele interage.
Com relação à semântica do ícone de envio de feedback, pode-se usar a representação de um balão de comentário como padrão, como comment
ou comment-alt
, fazendo referência ao ato de se comunicar unilateralmente. Porém, evite o uso do balão duplo, como comments-alt
ou comments
, pois remetem a uma ideia de bate-papo, que não é o caso aqui.
Utilize comment
ou comment-alt
como iconografia padrão para Envio de Feedback
O sentimento ou comentário do usuário pode se enquadrar em um dos determinados tipos abaixo:
A coleta de feedback do usuário é de suma importância para análise da qualidade do produto desenvolvido. Abaixo seguem algumas formas para coleta dessas informações.
Consiste em oferecer ao usuário a possibilidade de alternar entre uma característica nova ou antiga do sistema ou da interface. Desta forma o sistema coleta automaticamente informações a respeito dos usuários optantes, tanto em número como em opção, e fornece insumos para avaliar a preferência do público-alvo no uso desta nova característica.
Por exemplo, pode-se usar o componente Switch ou Checkbox no menu de opções para avaliar o lançamento de um novo dashboard no sistema
Consiste em oferecer ao usuário uma caixa de texto onde ele possa preencher e enviar suas dúvidas, sugestões ou críticas. Esta forma de coleta de dados pode ser exibida em uma tela específica, em uma janela ou painel flutuante.
Neste formato é importante que seja oferecido ao usuário um combo de seleção onde ele possa definir o motivo de seu contato. Também é interessante solicitar, de forma opcional, o email deste usuário caso seja possível um contato mais personalizado.
Consiste em disponibilizar um questionário mais amplo e detalhado, com questões mais específicas a respeito das características do produto. Este formato exige mais tempo dos usuários, sendo portanto mais difícil obter grande adesão destes. Apesar disso, é bastante útil para se obter um feedback mais rico em detalhes.
É uma forma mais rápida ou pontual para se obter o nível de satisfação do usuário com relação a algum aspecto da interface ou características funcionais. Consiste numa escala visual, com indicadores de satisfação que variam em gradações entre “Muito Insatisfeito” e “Muito Satisfeito”. Pode ser posicionada juntamente com a nova característica a ser avaliada e utilizada de várias formas, como nos exemplos abaixo.
O acesso ao conteúdo de ajuda deve estar localizado em uma região de fácil visualização na interface e que seja acessível a partir de qualquer tela de sua aplicação. Geralmente os locais mais apropriados para o acesso a este tipo de conteúdo são Cabeçalhos, Rodapés ou Menus de navegação.
Em aplicações mobile, os recursos de ajuda e envio de feedback poderão ser acessados a partir de um menu flutuante.
Após acionar o botão de ajuda, é importante que o usuário seja conduzido imediatamente ao conteúdo de ajuda. Evite exibir um conteúdo intermediário, como menus de opções que trazem tópicos não relacionados à ajuda.
Help & Feedback - Material Design
Contextual Help on Demand User Assistance - Oracle Alta UI Patterns
Contextual Help - OpenShift Design
Como coletar feedback e capturar usuários para pesquisas sobre o produto - UX Collective