Parece que ultimamente os desenvolvedores tem se preocupado muito com o login e nada com o logout. Resolvi escrever este post pois duas vezes esta semana, me vi perdido, procurando o botão para encerrar minha sessão de algum serviço.
Por que encerrar uma sessão (ou fazer logout) é tão importante? Alguns motivos são óbvios, como se você estiver em uma máquina que será utilizada por mais de uma pessoa, então você corre sérios riscos se não fizer logout… outros não tão óbvios para alguns, mas não fazer logout pode abrir um série de possíveis problemas de segurança.
Por exemplo, um ataque possível caso você não faça logout (trecho copiado do guia de segurança do Ruby On Rails):
- Bob navega por um fórum de discussão e visualiza uma mensagem criada por um hacker onde existe um elemento HTML de imagem forjado. O elemento referencia um comando na aplicação de gerenciamento de projetos de Bob, ao invés de um arquivo de imagem.
- <img src="http://www.webapp.com/project/1/destroy"/>
- A sessão de Bob em www.webapp.com ainda está ativa, porque ele não fez seu logout alguns minutos atrás.
- Por acessar a mensagem, o navegador encontra uma tag de imagem. Ele tenta carregar a imagem suspeita a partir de www.webapp.com. Como explicado anteriormente, ele também enviará o cookie com id de sessão válido.
- A aplicação web em www.webapp.com verifica a informação do usuário no respectivo hash de sessão e destroy o projeto com ID 1. Ele então retorna a página com o resultado da operação, o que é um resultado inesperado para o navegador, logo ele não irá exibir a imagem.
- Bob não percebe o ataque — Mas alguns dias mais tarde ele percebe que o projeto número um se foi.”
Existem várias formas de atacar um usuário se ele ainda estiver logado e se o sistema (website) não prover formas de segurança para ataques neste estilo. Para desenvolvedores Rails, por padrão já estaremos protegidos do ataque acima por causa da linha protect_from_forgery :secret => “123456789012345678901234567890…” no ApplicationController.
Mas como vou ter certeza que todos os sistemas adotam este tipo de proteção?! Não vou saber, então, como usuário, sempre faço logout. E estes motivos e vários outros me parecem uma boa justificativa para botões de logout mais visíveis.
Veja alguns exemplos abaixo:

Primeiro temos o registro.br, que o link de finalizar sessão está misturado com uma série de outros links e todos da mesma cor. Você dificilmente conseguirá encontrar o link com uma rápida “passada de olhos”. Pior, se você estiver em uma outra página vai ter que voltar para a página inicial pois o link de finalizar sessão não está disponível em todas as páginas.

O segundo exemplo é o site das Americanas, se você não quiser deixar seu usuário exposto, vai ter que navegar para página meu cadastro e só depois vai ter que procurar pela frase “Olá fulano (se você for outra pessoa, Clique Aqui!)” . Em momento algum você acha a palavra sair ou encerrar e para complicar mais ainda a frase está toda escrita da mesma cor como se Clique Aqui! não fosse um link.

E para fechar os exemplos, o site da Magazine Luiza. Se você efetuar login e esquecer marcado o checkbox de lembrar usuário, prepare-se para a caça ao tesouro. Voltando a página inicial você verá seu nome no topo direito, bacana, é o local normal para botões de sair mas você só encontra uma frase bem vindo. Não existe nenhuma palavra tipo sair, encerrar ou até mesmo o “troque de usuário”, então você tem que ser mágico para saber que o seu nome de usuário é um link e ao clicar nele abrirá um pop-up que vai te explicar porque você não consegue “deslogar” e dentro deste pop-up tem um botão de logout (é, em inglês mesmo) que parece que foi esquecido por ali.
Estes são apenas alguns do exemplos que encontro todos os dias, mas para nós (desenvolvedores e designers) isto é um agravante em nossos produtos e devemos sempre tomar cuidado com este tipo de situação. Não deixe seus usuários suscetíveis a erros banais ou até um ataque malicioso.
Se você acha que um botão vermelho e grande vai atrapalhar o layout então ao menos coloque um link disponível em todas as páginas no topo direito (que é o local já convencionado para esta ação) e utilize palavras como SAIR ou FECHAR SESSÃO.
6 Comentários to “Botões de Logout”
Silva Developer diz:
05/05/2009 em 10:44 AM
Belo post.
Muito util, também faz parte dos conceitos de usabilidade, que muitas empresas omitem ou nao sabem como introduzir em suas aplicaçoes.
Abraço,
Silva Developer silva.developer@gmail.com
Carlos A. da Silva diz:
05/05/2009 em 12:39 PM
Olá Daniel,
parabéns pelo Post. Já sofri também um bocado com opções de logout, o site do submarino é outro exemplo que acho interessante (será algum tipo de padrão desses sites de compras?!? depois que você entra não consegue mais sair? rs)
Bom.. como meu xará Silva Developer comentou, é um dos conceitos de usabilidade que muitas vezes é esquecido pelos desenvolvedores..
Abraços Carlos. ps.: na última imagem faltou borrar o seu nome no final, em negrito…. =) abraço
Ronaldo C. Schork Jr diz:
05/05/2009 em 01:02 PM
Muito bom o post. Realmente muitos destes grandes sites não são muito intuitivos nessa questão, até porque, acredito que grande parte dos usuários não se preocupa com isso, ou não sabe da importância disso.
Mas acho a questão importante e a dica é muito boa.
Abraço
Vieirovisk diz:
12/05/2009 em 10:08 PM
Olá Daniel,
Rapaz você esta de parabens, é um sofrimento mesmo navegar nesses sites, sem contar com a exposição que o usuário fica.
Nos meus Sistemas sempre faço isso, mas é bom sempre evidenciar essa prática.
Por falar em prárica, estou com um problemão no Flex, não consigo tirar um módulo da memória para carregar ele denovo. Se souber como fazer me mande ou post uma dica. grande abraço.
Vieirovisk Belo Horizonte-MG
daniel lopes diz:
13/05/2009 em 09:47 PM
@Vieiovisk use o ModuleManager que você tem mais controle sobre os módulos, leia o developer guide da adobe sobre módulos que tem muita coisa boa lá.
Leonardo diz:
12/03/2010 em 07:00 AM
Olá, sobre o site da americanas.com (mesmo com o link clique aqui) o site não faz o logaut do seu login! Brincadeira!!!!!
Comentário
CATEGORIAS
HomeDesign
SEO
Empreendimento
Cifras
Ruby e Rails
Flex
Photoshop
Flash
XHTML/CSS
JavaScript
Variados
Database
Firefox
Projetos
3D
Projetos
TextMate
Smalltalk
Mac
Livros
ARQUIVO
06/2010 (4)05/2010 (4)
04/2010 (4)
03/2010 (5)
02/2010 (7)
01/2009 (4)
12/2009 (7)
11/2009 (4)
10/2009 (10)
09/2009 (7)
08/2009 (6)
07/2009 (12)
06/2009 (5)
05/2009 (6)
04/2009 (9)
03/2009 (14)
02/2009 (18)
01/2009 (14)
12/2008 (20)
11/2008 (18)
10/2008 (9)
09/2008 (12)
08/2008 (6)
07/2008 (12)
06/2008 (10)
05/2008 (15)
04/2008 (19)




Me retirando do projeto de tradução dos guias
comentado por Diego Matos
Curso de Rails 3.0
comentado por @MarceloCajueiro
Validators em Flex3
comentado por LRCASUAL
IMPORTANTE: Proteste rápido, Microsoft insiste em nos tapear
comentado por João Cabral
Minitest e Ruby 1.9
comentado por Daniel Lopes