Como criar instruções passo a passo usando recursos visuais

Existem alguns tutoriais que exigem mais do que texto para serem compreendidos pelos leitores. Ao criar instruções passo a passo usando recursos visuais, você pode inserir os leitores em detalhes que, de outra forma, não teriam sido comunicados. Esses recursos visuais podem ser imagens estáticas ou capturas de tela, GIFs animados, gráficos de comparação ou vídeos. Além de ajudar os leitores a entender seu conteúdo, os recursos visuais também quebram a monotonia de uma grande quantidade de texto.

No ano passado, trabalhei como redator técnico para instruções de escrita de Joyent e criando vídeos voltados para usuários de todos os níveis de habilidade. Isso requer precisão – as pessoas confiam em mim para criar instruções e guias passo a passo para uma tarefa técnica. Se eu errar um passo ou presumir que os leitores já conhecem uma informação, eles podem se afastar frustrados e nunca mais voltar ao nosso conteúdo. Por outro lado, se eu for muito detalhado, o conteúdo pode parecer excessivo e desconexo, além de exigir atualizações mais frequentes. Sem pressão.

Encontrar os lugares onde uma imagem pode substituir alguns desses detalhes excessivamente precisos me economiza tempo e energia. Além disso, os leitores vão embora sabendo o que esperam ver, o que, com sorte, torna sua vida mais fácil. Sempre que possível, siga alguns conselhos importantes de redação: mostre, não conte (tão essencial que tem sua própria página na Wikipedia).

Você não precisa ser um redator técnico para se beneficiar de uma linguagem de processo precisa. Continue lendo para obter estratégias para preparar instruções e adicionar recursos visuais a qualquer documento.

Antes de começar a visualizar, considere seu público

Antes de produzir qualquer conteúdo, você deve saber para quem está produzindo e quais são suas expectativas. Embora seja impossível prever as necessidades individuais de cada leitor, as regras que você estabelece influenciam o tom do seu conteúdo e podem ajudá-lo a tomar decisões mais tarde ao criar o esboço do seu processo.

Considere o seguinte:

• Meus leitores já são especialistas? Eles já fizeram esse processo antes, se não exatamente, em circunstâncias semelhantes?
• Meus leitores são internos ou externos? Se meus leitores estiverem na mesma empresa, que linguagem compartilhamos para ajudar a explicar melhor o processo?
• Com que humor eles virão ao meu conteúdo? Estou criando este conteúdo para alguém que está com pressa para fazer algo ou é para um aluno mais casual que está apenas esperando aprofundar sua educação em um tópico?
• O que é mais importante para meus leitores? O que é menos importante?
• Como meus leitores preferem aprender? Eu sei se um post de blog é mais bem sucedido do que um vídeo? Existem dados analíticos para apoiar essas alegações?
• Meus leitores são falantes nativos de inglês? Se eu usar uma expressão idiomática, isso prejudicará sua capacidade de aprender como concluir o processo?

Não importa o que você está criando, você está sempre criando com um leitor do outro lado. Quanto melhor você conhecer seu leitor e produzir conteúdo com ele em mente, maior a probabilidade de ele voltar para mais conteúdo.

Descreva o processo com apenas os detalhes necessários

Uma maneira de preparar um processo ou tutorial para qualquer meio é começar com uma tabela de duas colunas. A primeira coluna conterá cada etapa individual que o leitor precisa realizar para concluir uma tarefa. Essas etapas podem ser tão pequenas e precisas quanto “enviar sua inscrição” ou tão grandes e inespecíficas quanto “preencher o restante do formulário”.

A segunda coluna será sua coluna de processo visual. A princípio, isso pode não incluir nenhum visual real, mas uma descrição de quais serão os visuais. Se você estiver criando um documento escrito, não precisará ter um visual correspondente para cada etapa da coluna um. Se você estiver criando um screencast, cada caixa deve ter uma observação sobre o tipo de visual a ser incluído. Deve haver pouco ou nenhum tempo de tela vazio em um vídeo.

Um exemplo desta tabela está abaixo em “Exemplo de esboço”, mas primeiro você precisa saber mais sobre os tipos de recursos visuais.

Tipos de recursos visuais e quando usá-los

Cada processo pode se beneficiar de diferentes tipos de recursos visuais. O meio mudará dependendo de sua finalidade.

• Imagens estáticas – este é o meio perfeito ao tentar visualizar um produto físico, seja uma pessoa ou objeto específico como um tipo de panela. Podem ser fotografias de banco de imagens ou fotos que você tirou.
• Captura de tela – uma imagem estática de sua tela é ótima quando se fala de produtos que são vistos em seu computador, como um site ou outro software. Eles são super fáceis de tirar e editar, especialmente graças ao Snagit.
• GIF – imagens animadas são perfeitas para explicar processos curtos (menos de 8 segundos) que podem não ser tão facilmente articulados.
• Gráfico – gráficos de barras, gráficos de pizza, gráficos de linhas, tantos tipos de gráficos! Um gráfico é a melhor escolha quando se fala e compara um conjunto de números.
• Vídeo – o visual definitivo, um vídeo é ótimo para explicar um processo. Como fazer um ótimo vídeo técnico é uma forma de arte que certamente pode ser ajudada por esse processo, mas requer muito mais planejamento. (Para sua sorte, aprendi muito com a TechSmith, e eles têm muito mais a dizer sobre o assunto).

Sinta-se à vontade para usar uma mistura de mídias com sua escrita. Cada um atenderá a diferentes necessidades para diferentes etapas.

Esboço de exemplo

As receitas são um dos melhores exemplos de um processo que muitas vezes exige precisão em que os recursos visuais podem fazer uma enorme diferença. Digamos que eu queira delinear as instruções para fazer um bolo:

tabela {

colapso da fronteira: colapso;

}

mesa, td, th {

borda: 1px sólido #404040;

preenchimento: 4px;

}

Se cada passo tivesse uma imagem, isso seria um pouco… gratuito.

Escolha seu visual

As imagens que selecionei são úteis para articular miniprocessos dentro de um processo maior. Em particular, a imagem na etapa 7 da mistura agitada até agora é uma peça crucial de evidência visual. Tendo feito vários bolos com esta instrução, a diferença entre o certo e o misturado demais… Eu gostaria de ter sempre uma foto. Poderia haver um manual de instruções escrito apenas sobre os meandros de quanto tempo misturar - cada página teria que ser uma imagem.

Depois de delinear quais recursos visuais você precisa, você deve coletar as mercadorias. Para este exemplo, seria melhor tirar fotos do seu processo de assar um bolo. Para outros processos, talvez você não precise tirar fotos personalizadas. Há uma variedade de sites de fotografia gratuitos e premium que possuem vídeos, GIFs e fotos para serem usadas a seu critério.

Testes com seu público-alvo

Nenhum texto está completo até que tenha sido lido por alguém do seu público-alvo e recebido um selo de aprovação. A contribuição deles demonstrará onde você perdeu uma etapa em seu processo ou onde são necessários mais recursos visuais.

A maneira mais fácil de fazer isso (sem os grandes recursos de uma equipe de usabilidade) é pedir a algumas pessoas de seu público-alvo para ler seu conteúdo e tentar seguir o processo exatamente como está escrito. Jakob Nielsen é frequentemente citado dizendo que cinco é o melhor número de pessoas para capturar o maior número de problemas.

Teste não moderado

O teste não moderado é perfeito para projetos menores com recursos limitados — ou apenas quando você precisa de resultados rápidos. Existem várias ferramentas que você pode usar para obter resultados mais precisos, mas se você estiver apenas procurando feedback sobre um processo menor, poderá se safar apenas enviando o documento para seus testadores com um conjunto de perguntas que deseja respondidas.

Peça aos seus testadores para fazer anotações sempre que tiverem dúvidas, verem algo que possa estar faltando, encontrarem obstáculos no processo ou desejarem receber instruções mais detalhadas. Espero que eles consigam terminar a tarefa antes de lhe dar feedback.

Teste moderado

O maior benefício dos testes moderados é que você pode realmente assistir seu testador executar o processo e ver onde eles estão confusos, em vez de confiar neles para notar essa confusão para você. É ainda melhor se você gravar a sessão para não precisar depender exclusivamente das anotações feitas durante a sessão.

Faça perguntas ao longo do caminho. Por exemplo:

• Você entendeu qual tarefa você estava sendo solicitado a realizar? Essa tarefa fazia sentido?
• O que teria tornado esse processo mais fácil de concluir?
• Se houvesse um visual com uma etapa, o visual o ajudou a entender o que fazer?
• Você gostaria que houvesse mais recursos visuais?

Empacotando

Agora você sabe por que deve adicionar recursos visuais a instruções passo a passo e tem um arsenal de ferramentas para ajudá-lo a criar instruções passo a passo com sucesso com a ajuda de recursos visuais. A prática leva à perfeição. Sua primeira tentativa de adicionar imagens a um processo pode não ser perfeita, mas com alguns testes de usuário para orientar seu processo de edição, você estará no caminho certo para ajudar seus usuários a entender como concluir uma tarefa.

Você tem outro método para descobrir quando adicionar recursos visuais às instruções? Compartilhe suas dicas nos comentários abaixo!

Nota do editor: Esta postagem foi publicada originalmente em novembro de 2017 e foi atualizada para precisão e abrangência.