10/08/2015

Como evitar erros comuns de design em landing pages

Como evitar erros comuns de design em landing pages

Até agora, todo o conteúdo que vimos nos deu uma boa base de práticas eficientes que podemos levar em consideração ao desenhar um site de e-commerce consistente e que gere bons resultados para um lojista. Nesta aula nós falaremos sobre como evitar os erros mais comuns de design para landing pages.

Recordando conceitos importantes

Você deve se lembrar de que na segunda aula nós falamos sobre sete princípios que utilizamos para desenhar os Layouts Nuvem: visibilidade, feedback, restrições, mapeamento, consistência, affordance e responsiveness.

Nós nos aprofundaremos um pouco mais nos três últimos princípios.

Pense holisticamente e mantenha o design consistente

Em design de interfaces, manter a consistência significa “ter operações similares e utilizar elementos similares para alcançar tarefas semelhantes”.

Infelizmente não é muito incomum perceber que alguns sites de e-commerce cometem o erro de terem uma interface inconsistente, tanto em relação à aparência quanto em relação aos tipos de interação. Um usuário que utiliza um site assim tem a sensação de estar navegando em sites diferentes e isso tende a fazê-lo sair da página e desistir da compra.

Para manter a consistência é muito importante se forçar a pensar holisticamente. Isso significa que você manterá um esforço grande para considerar o todo e em como as partes desse todo podem se relacionar.

Um bom recurso para se focar em pensar em todos elementos visuais que uma página terá é fazer um Inventário de Interface. Ele deriva do conceito de inventário de conteúdo e basicamente “é uma coleção abrangente dos pedaços e peças que compõem a sua interface”. Você pode se aprofundar mais no assunto com o artigo escrito pelo designer Brad Frost.

Responsiveness: o futuro é agora!

Se design responsivo é uma coisa do futuro, se prepare porque o futuro é agora! Para perceber como isso é verdade, veja as pesquisas sobre fontes de acesso aos principais websites do mundo. O cenário é o mesmo: aumento de acessos por dispositivos mobile e queda de acessos por desktops.

Desenhar um site responsivo representa um grande desafio para designers de interface, já que estamos acostumados, por anos e anos de prática profissional, a desenhar telas grandes que serão acessadas por usuários em um desktop.

Para resolver isso, podemos utilizar uma infinidade de ferramentas e conceitos que nos ajudarão a resolver vários problemas de design para telas pequenas. Algumas delas são pensar em guias de estilo, Mobile First e a ferramenta Bootstrap.

Affordance, experiência do usuário acima de modismos

Para relembrar, affordance “é um termo usado para se referir a um atributo de um objeto que permite que as pessoas saibam como usá-lo”. Por exemplo, sabemos que um botão é um botão porque utilizamos a metáfora visual de um botão do mundo real (com sombra, relevo, contraste) que nos dá a pista de que algo na tela é clicável. Affordance também pode ser simplesmente algo que foi convencionado, como, por exemplo, um texto na cor azul, que quando sublinhado se torna um link.

Estamos vivendo um momento de transição na estética do design, marcada principalmente pela decisão da Apple de abandonar o estilo “Skeuomorphic” (elementos com estética extremamente realista, texturas, luminosidade, entre outros) e adotar o flat design (abundância de elementos simples com cores sólidas sem recursos realistas) como padrão.

O ponto positivo de sistemas de design mais simples como o flat design é que os elementos podem ser facilmente redimensionados sem perder a qualidade gráfica (já que não é preciso utilizar imagens).

O ponto negativo é que podemos ter problemas com a “affordance”, principalmente com botões. O Nielsen Norman Group realizou uma pesquisa sobre isso e encontrou alguns problemas com usuários que não conseguem identificar o que é clicável ou não.

Portanto, é importante pensar mais sobre o assunto e evitar o modismo pelo modismo. Inspire-se com esta galeria de botões no estilo flat design.

Para finalizar

Não podemos deixar de mencionar mais uma vez a importância de termos em mente que estamos desenhando interfaces e experiências para usuários, portanto, o conceito de empatia (ter a capacidade de se colocar no lugar do outro) é extremamente importante para que possamos entregar mais valor tanto para o usuário quanto para o lojista.

O que achou desta aula? Tem algum caso prático de como esses conceitos lhe ajudaram a resolver problemas? Acha que falta algum? Não deixe de nos dar o seu feedback.

Data da última atualização: 16/02/2018


O que você achou desse conteúdo?


Marcos Paiva

Marcos é designer e tecnólogo em gestão empresarial. É apaixonado por música e seriados da Netflix. Divide seu tempo em cuidar da familia, tentar ter uma banda, trabalhar e dormir (não necessariamente nessa ordem). De vez em quando escreve alguns tweets @marcos_paiva


como-evitar-erros-comuns-de-design-em-landing-pages