Boas prticas de design

O Footer de um site

Basicamente, os footers precisam entregar aos usurios

as informaes que eles desejam. Por esse motivo,
informaes de contato e informaes sobre o site ou sobre
seus donos devem ser colocadas no footer.
(Smashing Magazine)

Globo.com

Benchmark Footers | Globo.com

Uso do footer para mapear o contedo

Benchmark Footers | Globo.com

Mudana do footer para indicar ao usurio a mudana de sesso.

Benchmark Footers | Globo.com

Mudana do footer para indicar ao usurio a mudana de sesso.

Behance.net

Benchmark Footers | Behance.net

Todos os canais do site esto reunidos no footer, inclusive as redes sociais.

Gerando uma outra opo de navegao.

Dribbble.com

Benchmark Footers | Dribbble.com

Assim como no Behance, todos os canais do site esto reunidos no footer,

inclusive as redes sociais. Gerando uma outra opo de navegao, porm
com uma interface mais limpa e descontrada.

11

Uol.com.br

Benchmark Footers | Uol.com.br

O portal Uol apresenta um footer com as sesses mais importantes do site."

* A navegao pelo footer aqui melhor do que pelos menus.

13

Rollingstone.com

Benchmark Footers | Rollingstone.com

O footer da revista Rolling Stone tambm apresenta uma verso com todas as
sesses do site. Possui uma rea para assinaturas e como diferencial exibe um
menu com links para as outras publicaes do grupo de mdia.

15

Billboard.com

Benchmark Footers | Billboard.com

O site da revista apresenta um footer com os canais da publicao, redes

sociais e informaes. Alm da ltima edio destacada atravs da capa
com a opo de compra da verso digital e assinatura, dando assim uma
importncia maior ao footer do site.

17

CONSIDERAES

Benchmark Footers | Consideraes

O Footer uma rea importante a ser explorada:

O bom uso do espao do footer, pode gerar um canal a mais com o usurio. Isso fica
claro no exemplo da revista Billboard, que usa o espao para a venda das edies da revista,
colocando a capa e os links para assinaturas.
Um mal uso do Footer, evidencia falhas na arquitetura do site, como vimos no UOL. Onde
a navegao pelo mesmo mais simples e assertiva do que pelos prprios menus do portal.

Um design bem resolvido, como no caso da Globo.com. Faz do footer uma ferramenta de
ajuda ao usurio, nesse caso em especfico a paleta de cores ajuda na localizao. Mas as
informaes dispostas tambm so pensadas para facilitar a navegao, sempre com a
opo de transio entre as diferentes sesses do portal, sempre com links para os canais
de negcio como assinaturas e lojas virtuais, e sempre com as opes de interao com as
redes sociais da marca.
O footer mais que o rodap! E quando tratado assim, pode trazer tantos benefcios
quanto as chamadas reas nobres da pgina.

19

BOAS PRTICAS

Benchmark Footers | Boas Prticas

Quando um usurio scrolla a pgina e no encontra o que quer, ele

acaba por recorrer uma navegao matricial e facetada no footer, com
links-chave para pontos importantes do site, que no pode ser
confundida com um mapa do site.

O rodap serve para atender o que Jesse James Garret, autor de The
Elements of User Experience, como courtesy navigation ou
navegao de cortesia, cuja finalidade atender pessoas que querem
desenvolver algum tipo de negcio com o site e/ou saber sobre o
que ou quem est por trs do site. (trabalhar no staff, ver quem
trabalha, anunciar, propor parcerias)

21

Benchmark Footers | Boas Prticas

22

Somente o necessrio

Evitar o uso excessivo de links no footer, deve-se lembrar que ele apoia
a navegao e que no pode substituir o menu ou fazer o papel de
mapa do site .

O Dribbble.com um bom exemplo de footer. Apesar de possuir mais de

15 links, os mesmos tem alta relevncia e promovem o acesso do usurio
a reas importantes como contato e oportunidades.

Benchmark Footers | Boas Prticas

23

Footer no menu

O Dribbble.com um bom exemplo de footer. Apesar de possuir mais de

15 links, os mesmos tem alta relevncia e promovem o acesso do usurio
a reas importantes como contato e oportunidades.

Benchmark Footers | Boas Prticas

24

Footer no menu

Fica claro nesse exemplo que no ouve uma curadoria em relao aos
links que seriam inseridos no footer, nesse caso o portal deixou de prover
ao usurio uma navegao de cortesia e entregou um espao com
todos os links do menu em uma lista. O uso incorreto dos links em
quantidade e relevncia o principal ponto a ser observado, assim como
os links do menu, os do footer precisam ser bem pensados.

Benchmark Footers | Boas Prticas

25

Navegao de cortesia, a escolha do usurio!

O Site da revista Vogue oferece um footer reduzido, apenas com links
principais, e uma opo para expandir o contedo do footer direita.

Com o contedo expandido, o usurio tem acesso a outros links da revista,

como publicaes em outros pases ou mesmo outros ttulos da editora.
Porm a escolha por visualizar ou no esses links do usurio.

NOSSA RECOMENDAO

Benchmark Footers | Nossa Recomendao

Navegao de cortesia o caminho

Evitar o excesso de links no Footer das pginas, uma escolha cuidadosa

do contedo que ser inserido privilegia a navegao e torna a experincia
mais agradvel aos usurios do site.

Usar o espao do Footer para informar o usurio, informaes sobre o

site, as pessoas envolvidas, contato etc, so sempre pertinentes.

Criar conexes que levem o usurio outras pginas, servios e produtos

Abril.

No transformar o Footer em um mapa do site ou segundo menu, por

mais que ele contenha links em comum, a navegao que o Footer promove
deve ser direcionada e mais restrita que a do menu.

27

Obrigado!
Equipe UXD | DPD