Padrões em projetos de UX: alinhando a comunicação e

aumentando a produtividade

Paulo Floriano (texto publicado no site www.paulofloriano.com.br)

Como   normalmente   lidamos   com   cronogramas   bem  apertados,  às  vezes  passamos  batido  por  uma  etapa  que  é   super   importante   em   todo   projeto   de   UX/design   de  interação:  a  definição  de  padrões.  

Não   vou   entrar   aqui   na   questão   protótipos   de   alta  fidelidade   vs.   protótipos   de   baixa   fidelidade   vs.   rapid  prototyping.   Por   mais   ágil   que   seja   a   sua   abordagem,  você  precisa  de  padrões  para  manter   a   consistência  da  experiência  do  usuário  com  o  produto.  

Já   vi   equipes   desprezando   esta   etapa   para   ganhar  tempo,   e   por   considerá-­‐la   um   pouco   “burocrática”.   No  fim   das   contas,   acabaram   tendo   muito   retrabalho   e   o  tempo  que  deveria   ter  sido  economizado  acabou  sendo  gasto  com  refações  e  discussões  tardias  de  questões  que  deveriam  ter  sido  abordadas  no  início  do  projeto.  

O  ideal  é  ter  uma  discussão  profunda  sobre  quais  são  os  direcionamentos  gerais  para  produção  dos  protótipos  e  que   padrões   devem   ser   adotados,   antes   da   equipe  colocar  a  mão  na  massa.  Esses  direcionamentos  devem  ser   consolidados   em   um   documento   (ou   em   vários  documentos,  ou  em  um  site  ou  wiki)  e  compartilhado(s)  com  a  equipe.  Os  padrões  devem  ser  transformados  em  uma  biblioteca   templates,   com  guidelines  de  utilização.  Se  você  fizer  tudo  isso  BEM  direitinho,  o  resultado  final  deve  ficar  assim,  assim,assim,  assim  ou  assim.  

Como  nem   sempre   essa   discussão   profunda   é   possível,  ao  menos   a   equipe   deve   conversar   sobre   quais   são   os  principais   padrões   a   serem   adotados,   e   ir   ao   longo   do  processo   desenvolvendo   e   comunicando   novos  guidelines.   Essa   abordagem   exige   um   pouco   mais   de  atenção   para   o   surgimento   de   novos   padrões,   e  comprometimento  para  que  eles  sejam  consolidados  na  biblioteca.  

Independente   da   abordagem,   seguem   algumas   dicas  para  uma  boa  definição  de  padrões  de  projeto:  

1.   Analise   toda   a   documentação   existente.   Não   deixe  para   analisar   os   documentos   conforme   o  desenvolvimento  do  trabalho  for  realizado.  

2.  Se   for  um  redesenho,  dê  uma  olhada  no  estado  atual  do  produto.  Ele  pode  dar  algumas  dicas  de  padrões  que  a   definição   será   necessária,   mesmo   que   possam   ser  alterados  depois.  Antecipe  a  discussão.  

3.  É  importante  definir  qual  o  grid  mais  adequado  desde  o  início  do  projeto.  É  com  base  nele  que  todos  os  demais  elementos  serão  construídos.  

4.   Comece   olhando   para   as   áreas   mais   comuns   do  produto.   Por   exemplo,   em   um   site,   comece   definindo  padrões   para   os   elementos   do   cabeçalho   e   rodapé.  Outras  seções  comuns  são  contato,  mapa  do  site  e  busca.  

5.  Pense  também  em  elementos  reutilizáveis  ao  longo  do  projeto.  Alguns  mais  comuns  são:  estilos  de  texto  (texto  normal,   títulos,   subtítulos,   etc.),   estilos   de   link,   botões  (ações   primárias,   secundárias,   terciárias),   estilo   de  parágrafo   (entrelinhas,   indentação,   etc.),   tabelas,   boxes  de   apoio,   modais/lightboxes/pop-­‐ups,   breadcrumbs,  etc.  

6.  Se  o  produto  contém  formulários,  é  importante  gastar  um   tempo   pensando   em   quais   as   abordagens   de  construção.   Deve-­‐se   definir   desde   questões   como   tipo,  estilo   e   tamanho   de   campos,   alinhamento   (labels   à  esquerda,   alinhados   à   direita   ou   acima   dos   campos),  inline  help  e  tooltips,  campos  obrigatórios,  alinhamento  de   botões,   até   questões   como   adoção   de   progressive  disclosure,  passo-­‐a-­‐passo  e  mensagens  de  erro/sucesso.  

7.   Se   o   produto   possui   interações   do   tipo   transição,   é  importante   definir   quais   serão   os   padrões   (fade,   slide,  expansão,  etc.)  e  quando  devem  ser  utilizados.  

8.   Um  dos   itens  mais   importantes   em   todo   projeto   é   a  questão   dos   rótulos.   É   imprescindível   criar   um  

vocabulário  comum  para  call  to  action,  nomes  de  seções  e  outros  elementos  utilizados  ao  longo  da  construção  do  produto.  Dentro  desse  vocabulário,  também  vale  a  pena  criar  uma  seção  para  ícones  –  quais  são,  o  que  significam  e  em  que  situações  devem  ser  utilizados.  

Independente   de   como   esse   processo   é   realizado   ou  entregue,   o   que   importa   mesmo   é   que   essas   regras   e  boas   práticas   sejam   amplamente   comunicadas   e  corroboradas  por  toda  a  equipe.  Ela  tem  um  papel  super  importante  nisso  tudo,  que  é  o  de  validar  e  melhorar  os  padrões   existentes   e   sugerir   novos   sempre   que  necessário.  

*  *  *