Skip to main content
Product Hacks

5 dicas práticas de markdown e como isso pode melhorar a experiência do usuário

  • August 14, 2020
  • 7 replies
  • 2168 views
5 dicas práticas de markdown e como isso pode melhorar a experiência do usuário
Marina Mazetto
Pipefy Staff

5 dicas práticas de markdown e como isso pode melhorar a experiência do usuário.
 

Que a experiência do usuário é um dos fatores mais importantes na adoção de uma nova ferramenta não é novidade para ninguém, mas você sabia que o poder de melhorar essa experiência também está nas suas mãos? 

 

Isso pode ser feito por meio de markdown! O markdown nada mais é que um sistema de formatação aberto que marca alterações no texto como negrito e itálico usando símbolos do teclado. Segue então 5 dicas práticas que podem fazer com que seu processo tenha um visual muito melhor e ajudar na adoção e compreensão do Pipefy.

1- Formatação de texto 
 

Começando por uma das dicas mais simples de todas, você pode formatar seu texto dentro dos campos do Pipefy.
0p-35hU2rKEl6iOuo_aKRz0hR-8cqar1-I1pfczEsE1dy9bHdHePpPOiKNOarzdVlOvj6XD0Ac2Eh0oS4C8ZEXodndX2xXnubTeoZDbJ9uOlEVp4DukG-eQd46B_2RnjnqcwY88w
“Colocar informações em **negrito**, *itálico* ou mostrar que algo foi ~~alterado~~ por exemplo.”

  • Negrito: basta você acrescentar ** no início e no fim da palavra ou frase.
  • Itálico: basta você acrescentar * no início e fim da palavra ou frase.
  • Texto riscado: basta você acrescentar ~~ no início e fim da palavra ou frase.

 



2 - Tabelas
É possível criar tabelas dentro das suas fases. Por exemplo você tem uma lista de pessoas responsáveis pelas aprovações no seu time financeiro, é possível deixar claro para todos que acessam os cards, quem são essas pessoas e qual o papel de cada uma.

 

CpCcasQEDcP_G7WbYsXsNzxvMFCl4c2GuHCwFCuGyO5rpiKurINP_SrI7q1xu4f_GHpaLz-QfEUZQn3bS10V6kU9FRSwrDOcUTLw9NnG__PMQv8o43Bxz9Q_Cj6b-cpuTfRCU6Q_

 

Para fazer isso é bem simples, basta você criar um campo qualquer no Pipefy. Nesse caso foi o campo de responsável e na parte de descrição formatar a tabela da seguinte forma:

 

| Área|  Aprovador|

|---|---|

|RH| Bill Gates |

|Financeiro| Darth Vader |

 

  • Linha 1: deve conter os títulos sempre iniciando, terminando e sendo separados por “|”.
  • Linha 2: da mesma forma que a linha um deve iniciar com “|” e para cada uma das divisões de colunas que você deseja fazer devem haver pelo menos 3 “-”, você também pode usar os “-” caso queria que mais de uma linha receba o mesmo destaque do título.
  • Demais linhas: devem conter as informações de cada uma das colunas sendo também iniciando, terminando e separadas por “|”.

 



3 - Adicionar imagens
Mais uma opção super legal é a de você adicionar uma imagem na descrição. Para isso é necessário que a imagem tenha um final .jpeg ou .png, recomendamos usar algum site como por exemplo o https://imgur.com/ para hospeda-las. Uma vez hospedada essa imagem terá um link que poderá ser utilizado nessa configuração.


UsWmzq08BVMJRBWg2Eoc6N1xWdnkSPMie-JJFSGhc2XYyrCy-POUwit0dMiVOXmBqzrfsb7xw0nVPXcuSGhzDdi4wrL_QZY6mi5Ft9qUplNCqET6UCUla9c2H6OliWbFG4v5rM0A
 

“![Imagem balões][1]

 

[1]: https://i.imgur.com/ds9XgvK.jpg
Para isso você deve adicionar na descrição do seu campo o símbolo de “!” seguido de “[]”, o que você vai incluir nos [] não muda em nada a configuração, mas é sempre bom colocar ao que a imagem se refere para caso no futuro você precise fazer alguma alteração isso seja bem simples. Depois disso você vai identificar o número dessa imagem e colocar o link de onde ela está hospedada. É possível incluir mais de uma imagem, basta seguir o mesmo processo mais de uma vez.

 



4 - Adicionar hyperlink
Alguns campos podem precisar de instruções mais complexas ou consultas a algum tipo de site para serem preenchidos e para isso adicionar na descrição o link direto pode facilitar muito o processo.
k_PDMBIa2Gb9yBAcNaGiNTHvtdP23gA0XALjtlm7zP52mpINL2K1p1TKp4SvreYDxQcRwvgD-SCuAt04U77jwpTvMX872CcoPaEYfHBKIfv6DmN8nfABwHJUmU68dygDfr_jkTvH

Para que o link apareça corretamente você deve colocar no campo de descrição:
“[Texto que você deseja que apareça](https://www.pipefy.com/)”.
* Importante: não pode ter espaço entre o ] e o (.

 



5 -  Adicionar uma descrição em formato de lista.
Caso você queira adicionar na descrição uma lista é possível fazer isso de algumas maneiras diferentes.

1 . Lista ordenada com itens e subitens:

VwWrSj313qBY6f0wP8pRT2T8hFGO6kl9vCQP0qIke2mcF1U3BjC2FRnuuYvD0vYWGZOoFii6fXRceo9I3f8T28CSjw7ggieo8akE0cUhT3YXFy62M0dX9A0dhHqBhBQ3sasE6D8B
Para isso é necessário você usar o número seguido de ponto para os itens principais e o número seguido de espaço e ponto para os subitens, para os espaços entre eles basta apertar 2 vezes a tecla enter. Exemplo: 


“Adicionar uma lista:

 

1. Item principal A

1 . Subitem 1

2 . Subitem 2

 

2. Item principal B

1 . Subitem 3”

 

2 - Lista sem ordem:

Z-Di-fXYEd-0V3OdnTaVZtLAdFtxOZopxY8j7zOr1I074M4YLbp3x0aY95Zjr-NvcSnzD5HmVVdiXLReQDeAh5Y2SWfeaxivny1qkppYXq4zEIxWcAUqbwHte_Iefw1JqH_6SdkZ
 

Para criar uma lista sem nenhuma ordem basta você acrescentar “-” na frente de cada um dos itens. Exemplo:

 

“Adicionar uma lista:

 

- Item 1

- Item 2”

Depois dessas 5 dicas é hora de colocar a mão na massa e adicionar mais detalhes ao seu processo. Vale lembrar que as dicas são válidas também para os emails templates. Agora você já pode deixar tudo mais organizado e simples para empoderar seus usuários!

Did this topic help you find an answer to your question?

7 replies

Juliana Spinardi
Pipefy Staff
Forum|alt.badge.img+8

ótimas dicas, Mari! 
Deixa o processo mais organizado! 

 

Obrigada por compartilhar  :kissing_heart:


ivan.novofoco
Forum|alt.badge.img+10
  • Pipefy Certified Partner
  • 136 replies
  • August 14, 2020

@Janaina_Barreto@michel.novofoco e @marcos_ano_bom 

Olha que dicas legais de formatação.
As tabelas e imagens eu ainda não tinha usado.

Curti :grinning::thumbsup:


Eduardo Kano
Forum|alt.badge.img+8
  • Pipefy Legend
  • 95 replies
  • August 17, 2020

Adorei as dicas e já consigo imaginar n usos nos nossos pipes! Obrigado pelos insights, @Marina Mazetto ! :grin:


rebeca.venancio
Forum|alt.badge.img+5

Obrigada, @Marina Mazetto, pelas dicas! Irão melhorar muito nossos processos em questão de visualização. :grinning:

 

@thaiannelourenco podemos fazer os ajustes no nosso downtime em setembro! ><


thaiannelourenco

Super legal @rebeca.venancio :nerd:

Nosso processo vai ficar muito mais dinâmico para a equipe!


fernanda-silva7

SUPER DICAS que podem fazer a diferença dentro dos processos e no engajamento!

 


marcosmelo
Forum|alt.badge.img+18
  • Pipefy Legend
  • 1465 replies
  • March 13, 2023

Ótimas Dicas!!


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings