Layout da interface
Atividades relacionadas (ao layout do web site)
Apresentação do layout ao cliente
A apresentação de layouts de interfaces web para os clientes tem particularidades que vão além da aparência das telas. Os modelos visuais das respostas às ações dos usuários, as funcionalidades, os desdobramentos das ações, o conteúdo informacional, bem como a aparência em diversas resoluções e dispositivos, também precisam ficar claros para facilitar a aprovação.
Seguem abaixo algumas recomendações úteis para facilitar a compreensão de layouts web pelos clientes – como sempre, contribuições são sempre bem-vindas e creditadas.
■ Preparar um ou mais arquivos especialmente para a apresentação do layout, presencial ou remota. Ou, em outras palavras: é importante mostrar mais do que os simples arquivos com as principais telas do produto. ► Ver exemplo
Se necessário, incluir um resumo do briefing e uma justificativa dos conceitos aplicados no processo de criação. Caso os projetistas achem necessário desenvolver melhor a justificativa, esta pode ser enviada para o cliente pouco antes ou depois da apresentação.
Se a aplicação das cores for um elemento crítico (normalmente é), a apresentação pode incluir também uma tela com as cores principais e secundárias aplicadas, suas combinações e a justificativa do seu uso. As cores podem ser dispostas numa palheta independente dos layouts, para permitir uma visão abstrata das seleções e dos critérios para a sua seleção.
E se o uso das tipologias for passível de despertar polêmicas e discordâncias (se sair muito dos padrões dos grandes portais, por exemplo), é importante incluir também uma tela com as principais tipologias e estilos empregados. Estas configurações envolvem o detalhamento dos títulos (h1, h2, h3), subtítulos (h4, h5, h6), textos, legendas, pés de páginas, olhos, chamadas, marcadores de itens e ações (como setas), separadores, espaços.
É sempre importante enfatizar que a identificação destes elementos na apresentação do layout não tem uma regra que funcione para todas as situações, pois varia a cada situação e é mais ou menos detalhada de acordo com sua importância para o produto.
■ Mostrar diferentes status de uso dos elementos dinâmicos, para facilitar a compreensão das funcionalidades associadas às telas de animações, dos menus (quando expandidos), elementos dinâmicos em Ajax, elementos variáveis como imagens horizontais e verticais.
■ A recomendação anterior também se aplica na apresentação de processos-chave do negócio no ambiente web, como compras de produtos, participação em comunidades, usos de serviços online, ou seja, descrever o processo visualmente, com a sequência de etapas do processo. ► Ver exemplo (site do Facebook)
■ Embora seja necessário explicar o layout, as imagens das telas e as soluções visuais devem falar por si, da mesma maneira como o cliente final vai ver ver e usar as interfaces na web.
Ou seja, a argumentação técnica-conceitual e a impressão gerada pelas imagens para a defesa do layout devem reforçar uma a outra e não se valer uma sobre a outra. Ou seja, uma argumentação sobre usabilidade não deve servir de argumento para a avaliação de um layout que a maioria dos stakeholders simplesmente não gosta.
■ Defender as soluções baseadas nos problemas específicos que procuram resolver. Argumentos como “usamos este recurso no site da empresa xxxx e foi muito bem aceito” não só desviam a autoridade do autor para a autoridade comercial do outro cliente como afirmam a sua incapacidade de defender o layout com base nos problemas inerentes ao projeto em questão.
Além disso, neste caso específico, o cliente pode ficar insatisfeito com a possibilidade de o nome da sua empresa vir a ser citado para defender argumentos em outros projetos da mesma equipe.
Esta prática se aplica a aspectos de qualquer natureza, sejam técnicos, funcionais, conceituais ou visuais.
■ As telas e funcionalidades apresentadas ao cliente devem ser exatamente iguais às que serão usadas pelo cliente final. Esta recomendação se aplica especialmente aos casos em que os layouts são aprovados em formato de imagem, que são convertidos depois para XHTML e CSS. Layouts em formato de imagem são mais baratos e simples de mudar, mas os layouts em HTML permitem maior interação dos clientes com o produto e uma avaliação mais realista.
É importante também que o cliente veja como as telas aparecerão em diferentes resoluções, browsers e dispositivos móveis – especialmente se forem desenhadas soluções específicas para cada um.
■ Ordenar as telas em sequência que facilite a compreensão do cliente. A percepção do resultado pode ser prejudicada (ou pior, desvalorizada), caso seja visto em ordem aleatória. Por isto, caso seja necessário enviar diversos arquivos por email, deve-se procurar enviá-los com a indicação clara da ordem de abertura. A numeração dos arquivos indica a ordem da visualização e deve ser informada no corpo da mensagem ou, discretamente, nas próprias imagens.
■ Não mostrar um resultado que não agrade o seu autor. Esta recomendação se justifica porque muitas vezes, pressionados por limitações, especialmente de informações e de tempo, os designers apresentam soluções que eles mesmos não gostam. Se não gostam das soluções, dificilmente conseguem argumentar com um cliente insatisfeito e podem acabar atacando a própria obra.
Por isto, gostem ou não da solução, é necessário que os designers mantenham algum distanciamento em relação ao resultado, para que a defendam de modo razoavelmente isento e também para que fiquem receptivos ao retorno e às sugestões que surgirem durante a apresentação.
Já se o cliente pedir uma solução que não o agrade, o designer deve prover os argumentos para alertá-lo sobre os riscos que a solicitação implica.
■ Quando os designers sentirem muita dificuldade de transformar os briefings e documentos da conceituação do projeto em caminhos objetivos para a criação dos layouts, podem propor uma solução intermediária: apresentar ao cliente uma série de referências visuais que os ajudem a obter pistas por onde seguir.
A apresentação estruturada de telas de outros sites, palhetas de cores, folhetos e cartazes impressos, vídeos, pode ajudar as duas partes a estabelecer consenso sobre o universo visual do produto.
■ Caso sejam propostas diversas soluções diferentes para o mesmo problema, atribuir nomes ou números a cada uma, para facilitar a troca de idéias em reuniões ou mensagens.
O título “modelo com animação” ou o "layout 2" fica mais claramente identificado que “aquele layout com a tarja azul em cima do título”, que pode ser percebido de maneira diferente por cada interlocutor, especialmente em apresentações mais longas.
■ No caso de redesenho de interfaces, evidenciar as diferenças em relação ao layout antigo e as soluções propostas para os problemas diagnosticados. ► Ver exemplo (site da Tramontina)
O mesmo se aplica ao redesenho de apenas alguns elementos de uma tela (e não da tela inteira): a sinalização das mudanças, bem como das vantagens, facilita a percepção e a avaliação. Isto se aplica especialmente a detalhes de tipologias, espacejamento, marcadores, que muitas vezes passam despercebidos. ► Ver exemplo (site do browser Opera – link externo)
■ Revisar mais de uma vez os arquivos da apresentação dos layouts. Se possível, pedir a outros integrantes da equipe para fazer a revisão. O controle de qualidade neste caso se aplica tanto ao produto quanto à apresentação em si. Para verificar que nada foi esquecido, consultar os itens da lista de checagem preparada no início do projeto de layout. ► Checklist de elementos de layout (xls, 19Kb)
■ Caso seja uma etapa crítica para o projeto, ensaiar a apresentação do layout, para simular a percepção do cliente e prever respostas a perguntas mais críticas.
■ Manter uma atitude receptiva que possibilite a conversão (ou “tradução”) do retorno do cliente em melhorias para o layout, pois nem sempre os comentários e solicitações são explicitados de maneira muito clara ou explícita. Durante a apresentação, independentemente das opiniões dos stakeholders serem positivas ou negativas, sempre aparecerão sugestões construtivas que ajudarão a aperfeiçoar o produto e outras nem tanto, mais baseadas nos gostos pessoais.
-> Por exemplo: Comentários como “este tom de terra está vermelho demais” podem ser respondidos com perguntas como “você poderia dar um exemplo do tom de terra que você prefere ?”
Ou “Vocês poderiam retirar a ilustração de pé de página?” pode ser respondido com “Esta ilustração ajuda a contextualizar o site na sua atividade-fim. Podemos fazer uns estudos com outras ilustrações para vocês examinarem, antes de eliminá-la totalmente?”.
Desta forma, uma discordância pode ser resolvida de maneira produtiva para ambos os lados.
■ Procurar diferenciar adequadamente o que o cliente pede (no sentido de "exigir") para mudar e o que o cliente não gosta e pede uma mudança, ficando aberto a sugestões. Se o cliente pede objetivamente a mudança de um elemento, fica irritado quando não vê as mudanças nos layouts revisados e tende a dificultar a aprovação do produto (com toda a razão!). Já se sugere que se mude um elemento e não propõe uma solução, é porque se mantém aberto a sugestões.
■ Caso, depois da apresentação de diversas soluções rejeitadas, não houver acordo entre as parte sobre as direções a seguir para os layouts, pode ser necessário avaliar a possibilidade de desenhar soluções inteiramente novas e o seu impacto para os prazos e custos do projeto. Eventualmente as partes podem ter que fazer concessões para finalizar o produto no tempo previsto.
■ Realizar sempre que possível testes dos layouts com usuários, pois estes proveem informações úteis para a tomada de decisões independentemente das percepções das pessoas envolvidas no projeto. Afinal, são eles que vão usar o produto.
■ Mesmo que o cliente aprove verbalmente o layout depois da apresentação, um registro formal da homologação evita mal-entendidos futuros.
Texto publicado em 7.3.2010.
Assuntos relacionados
► Layout: Atividades relacionadas
► Planejamento: Comunicação e interlocução
► Cultura criativa
► Criação coletiva
► Testes : Usabilidade
► Indicadores de qualidade (planilha)
► Painel de ideias
► Especificações do produto
► Relacionamento com o cliente (projetos web)
Referências sobre apresentação do layout ao cliente
► Livro: Communicating design - Developing web site documentation for design and planning, de Dan Brown. Berkeley: Peachpit Press, 2007.
► The battlefield of design: Designers vs. clients (acesso em 18.6.2009)
► Research: First steps for designers, de Elliot Jay Stocks (SitePoint, acesso em 19.3.2009)
► The importance of effective detailed design (Human Factors International, acesso em 2.5.2005)
Mais informação sobre o assunto
► Handbook of collaborative design (little springs design, acesso em 21.3.2010)
► Cinco dicas para melhorar a apresentação de seus projetos, de Guilherme Serrano (blog O desenvolvedor, acesso em 7.3.2010)
Programas auxiliares para a apresentação do layout
► Dragon Stop Motion, para a criação de vídeos em stop motion para mostrar a funcionalidade de elementos da interface web (acesso em 9.7.2010)
► K Sketch, permite a criação e a gravação de esboços, com formas livres, como as desenhadas a mão livre (acesso em 6.4.2010)
► Concept Share, facilita a apresentação online de layouts, com espaço para os clientes publicarem ou assinalarem seus comentários (acesso em 27.4.2010)
► ProofHQ facilita a apresentação online de layouts, com espaço para os clientes publicarem ou assinalarem seus comentários, com desenhos, mensagens e mesmo discussão com outros clientes; tem controle de versões (acesso em 27.4.2010)
► Concept Feedback comunidade online de designers que provê retorno para outros designers; em troca, submete-se o próprio trabalho para avaliação (acesso em 29.4.2010)
