Leonardo Faria

Pego o controle da TV e vejo uma infinidade de botões. Não consigo entender o por que de tantos deles. Botões para mudar o perfil da TV (otimizada para filme, show, esportes), botões com teclas numéricas, botões aqui, botões ali, botões acolá. As coisas seriam bem mais simples se as TVs tivessem um menu, algo parecido com o Frontrow. E para substituir os cruéis controles-remoto, algo parecido com o Apple Remote. É, alguém vai precisar promover uma revolução. E será televisionada.

Ontem fui acessar o site do Banco do Brasil e me deparei com o Banco do Bruno. Fiquei assustado. Será que invadiram o site? Não, é apenas uma campanha de marketing, que afirma que o banco é seu. Peraí, se o banco é meu não é Banco do Bruno e sim Banco do Leonardo (:

A repercussão foi imediata. Linhas do teleatendimento hiperlotadas, confusão e medo. Eu mesmo liguei para saber o que aconteceu. Depois fui a uma agência e constatei: Banco da Renata, Banco da Ana (mas nada de Banco do Leonardo).

Nesse primeiro dia, o acesso ao site do banco, que girava em torno de 800 mil saltou para 3 milhões. Talvez isso explique a lentidão do site. Apesar de todo esse impacto negativo, o diretor de Marketing e Comunicação do Banco afirma que houve uma boa repercussão entre os clientes.

Na década passada, travou-se uma guerra entre browsers. Netscape lançada recurso para seu browser, Microsoft fazia o mesmo. Manter a compatibilidade era algo impossível. Hoje em dia, manter a compatibilidade entre vários browsers é algo que ainda tira o sono de muitos desenvolvedores, entretanto está mais fácil. O que não entendo ainda é como existem tantos sites que ainda trazem o flamigerado "Melhor visualizado no Internet Explorer". É a vida...

Usar Ajax desenfreamente por aí pode causar dependência química. O Ajaxonline é um portal sobre o assunto e apresenta uma séria falha, que muitos sites que também usam XMLHttpRequest também apresentam: links obstrusivos.

A 'agilidade' do uso do Ajax está em re-aproveitar camadas e iframes para substituição de conteúdo, requisitando URLs e enviando formulários, enfim, interagindo com o usuário. O problema está na hora de chamar essas requisições. Ao chamar uma dessa funções pelo atributo href da tag a do HTML (ou simplesmente setando o valor desse atributo para '#'), o desenvolvedor esquece que os usuários possuem diferentes formas de interação com o sites.

Eu, por exemplo, ao me deparar com um site com vários links interessantes, saio clicando nesses links com a tecla command selecionada. Isso, no meu navegador, vai fazer com que os links simplesmente se abram em novas abas. No Ajaxonline eu não consigo fazer isso, pois na nova aba, ao invés de encontrar o conteúdo da página com um assunto do link, me deparo com a home do site, novamente.

Escrevi esse post para lembrar que links não-obstrusivos são muito importantes no desenvolvimento de qualquer aplicação web. Sabem por que? Porque eu não sei prever a interação do usuário com o meu projeto!

Todo desenvolvedor, projetista ou designer de interfaces deveria usar Mac OS. Bem, isso não é uma propaganda para a Apple, mas sim uma crítica a procedimentação e burocratização da tecnologia.

Dizem que a informática veio para resolver os problemas que apareceram depois que ela surgiu. Bem, não é bem assim. Com base no que vivo no meu dia-a-dia e no meu trabalho no serviço público, posso dizer que a informatização de processos manuais só trouxe agilidade (aliás, acho que todo mundo pensa assim). Só que o que devo pontuar é que nem sempre essa informatização vem de forma didática.

É aí que vejo um case de sucesso. O Mac OS é simples e cumpre o que promete. Sem muitas perguntas, sem muitos botões e tudo isso de forma bem clean, o que não deixa o usuário em dúvida na utilização do sistema.

É dessa água que os desenvolvedores devem beber: a água da simplicidade. Levando isso para a web, basta observamos o Google. A mesma boa experiência usuário-máquina ocorre com os sites da turma da Larry Page. Formulários com poucos campos (o orkut é uma excessão, risos), telas simplificadads e uma boa integração entre sistemas.

Da observação desses cases, percebemos que poucas coisas permitem uma melhora significativa nessa interação entre homem e máquina. Botões de enviar destacados, formulários bem arquitetados (e onde o TAB funciona) e telas de erro mais amigas podem garantir o sucesso de sua aplicação!

Minha experiência com o Bradesco é péssima. Primeiro pelas agências. Sempre lotadas, com ar-condicionado estragado, caixas eletrônicos que não funcionam. Enfim, ir ao banco é pior do que ir para uma guerra.

Então, penso: Vou usar o Internet Banking. Vamos lá:
No meu Mac, Internet Banking do Bradesco não funciona. Segundo o site, para Mac, requer Netscape. Mas, o que é Netscape?

Vou para o PC, com Windows (Não vou ser louco de tentar acessar pelo Linux). No Firefox, o site carregaria, senão fosse um applet Java para o teclado virtual. Instalo o Java.

Aparentemente agora funciona. Mas antes de tudo, eu tenho que adivinhar qual o formato do número da minha conta. Oras, o formato da Conta Corrente deles é assim: 12345-0, mas para a Internet você tem que enfiar alguns zeros antes, ficando assim: 0012345-0. Tudo bem.

Passada a frustação de tudo isso, vou para a parte da senha. Digito minha senha usando o teclado virtual em Java deles e aí o sistema me faz uma pergunta secreta, cuja resposta é uma frase de, no mínimo, 12 caracteres. O problema é que sempre esqueço a maldita resposta. Mas isso pode ser contornado. Basta eu usar meu CPF como resposta, ao invez da frase. Mas, além de usar meu CPF, tenho que confirmar minha data de nascimento e o nome do meu pai (ou da minha mãe, é aleatório). Se não bastasse, depois de tudo isso, ainda tenho que criar uma resposta novamente, pois eles insistem em usar a maldita frase.

Depois de uns 15 minutos perdidos, finalmente consigo ter acesso a minha conta. Numa popup minúscula para não estragar o layout deles, é claro.

Dicas para complicar a navegação
1) Campos de formulário sem explicação
2) Applets Java que poderiam ser substituidos por JS (vide o Banco Real)
3) Popups minúsculos

[update] Recebi uma resposta do Bradesco. Eles não mostraram a menor boa vontade em melhorar o sistema. Provavelmente, minhas críticas pararam no setor de comunicação.

Algo importante visto no livro de Jacob Nielsen e Marie Tamir.
INFORMANDO O OBJETIVO DO SITE

1. Exibir o nome e / ou logotipo, em um tamanho razoável e em um lugar de destaque.
2. Incluir um slogan resumindo explicitamente o que o site ou a empresa faz. Deve ser explicativo e pequeno.

TRANSMITINDO INFORMAÇÕES SOBRE SUA EMPRESA

3. Incluir um link "Sobre Nós" que apresente aos usuários em visão geral da empresa e link para todos detalhes relevantes como produtos, serviços, valores da empresa, proposta de negócios e equipe. O nome indicado do link deve ser: Sobre .
4. Incluir um link "Fale Conosco" na homepage, que acessa um página com todas as informações de contato da empresa.

CRIAÇÃO DO CONTEÚDO

5. Evitar conteúdo redundante. Repetir na homepage links idênticos congestionam a página. Coloque o link em uma área nitidamente em local específico.
6. Não utilizar frases eruditas que fazem com que as pessoas tenham um trabalhão para descobrir o que é.
7. Evitar as categorias e as listas de marcadores de um único item.
Usar somente o discurso imperativo, como em "Insira uma cidade ou CEP" nas tarefas obrigatórias ou qualificar a declaração adequadamente. Por exemplo, você poderia dizer "Para saber o tempo local, insira uma cidade ou CEP". As pessoas acompanham naturalmente o texto que informa o que devemos fazer em um site, principalmente se estiver em algo conhecido, como uma caixa de entrada ou em menu drop-down, e com certeza seguem as instruções porque acham que devem fazer o que as instruções indicam.
8. Evitar pontos de exclamação. Eles não fazem parte da grafia profissional e não têm nada a ver com Homepages.
9. Empregar raramente todas as letras maiúsculas e nunca como estilo de formatação. As palavras com todas as letras maiúsculas não são tão fáceis de ler.
10. Evitar usar inadequadamente espaços e pontuações. A pontuação incomum reduz a legibilidade.

LINKS

11. Diferenciar os links e torná-los fácil de visualizar. Inicie o link com a palavra que transmite a informação, porque geralmente os usuários "batem os olhos" em uma ou duas palavras dos links para compará-los. Não inclua informações obvias ou redundantes em todo link.
12. Não usar instruções genéricas, como "Clique Aqui" como nome de link. Em vez disto use um texto significativo nos nomes de link para informar aos usuários o que obterão quando clicarem. Por exemplo, em vez de dizer "Clique aqui para obter os itens da Layette", basta dizer "Itens da Layette".
13. Não use também link genéricos , como "Mais".
14. Se um link não fizer nada mais do que ir para outra página da Web, como vincular a um arquivo PDF ou acionar um equipamento de áudio e vídeo, aplicativo de mensagens de e-mail ou outro aplicativo, certificar-se de que o link indique explicitamente o que acontecerá. É interessante o uso de ícones para fazer tal explicação.

NAVEGAÇÃO

15. Agrupar itens na área de navegação, de modo que os itens semelhantes fiquem próximos de si.
16. Não disponibilizar diversa áreas de navegação para o mesmo tipo de links. Grupos muito semelhantes podem fragmentar e complicar a interface.
17. Não inclui um link ativo para a homepage na homepage.
18. Não inventar termos para as opções de navegação de categorias. As categorias devem ser diferenciáveis entre si. Se os usuários não entenderem sua terminologia inventada, não conseguirão distinguir as categorias.
19. Usar ícones de navegação somente se ajudarem aos usuários a reconhecer imediatamente uma classe de itens, como novos itens, itens em liquidação ou conteúdo do vídeo.

PESQUISA
20. Disponibilizar para os usuários uma caixa de entrada na homepage para inserir consultas de pesquisa, em vez de oferecer apenas um link para uma página de pesquisa.
21. As caixas de entrada devem ser suficientemente grandes para os usuários verem e editares consulta padrão no site. Coloque, pelo menos, entre 25 e 30 caracteres.
22. Não rotular a área de pesquisa com um título, em vez disso, usar um botão "Search" (Busca/Pesquisa), à direita da caixa. Coloque na área superior direita, fora da área dos banners.
23. Não oferecer o recurso "Pesquisar na Web". Para isso, os usuários irão utilizar seu buscador predileto.

FERRAMENTAS E ATALHOS PARA TAREFAS

24. Oferecer aos usuários acesso direto às áreas de alta prioridade na homepage.
25. Não incluir ferramentas que não estejam relacionadas com as tarefas que os usuários costumam fazer no site. Por exemplo, não coloque previsão do tempo em um site que não tem nada a ver com notícias de meteorologia.
26. Não oferecer ferramentas que reproduzem funções do navegador.

GRÁFICOS E ANIMAÇÂO

27. Usar gráficos para apresentar o conteúdo real, não somente para decorar a homepage.
28. Rotular gráficos e fotos se os respectivos significados não estiverem claros no contexto da história que complementam.
29. Editar fotos e diagramas adequadamente, segundo o tamanho de exibição. As fotos e desenhos com muito detalhes não transmitem as informações e parecem superlotados.
30. Evitar gráficos de marca d'água (imagens de plano de fundo com texto sobreposto).
31. Não usar a animação para o único propósito de chamar a atenção para um item na homepage. Raramente, a animação tem um local na página porque distrai a atenção voltada para outros elementos. A animação exige a atenção do usuário e deve ser apresentada isoladamente, uma vez que a homepage tem muitos elementos que também exigem atenção
32. Jamais animar elementos críticos da página, como logotipo, slogan ou título principal.
33. Permitir que os usuários decidam se desejam ver uma introdução animada de se site - não deixar a opção de animação predefinida. Se você realmente carregar automaticamente uma animação sem a solicitação do usuário, ofereça um método fácil e destacado para desativá-la.

DESIGN GRÁFICO
34. Limitar os estilos de fonte e outros atributos de formatação de texto, como tamanhos, cores, etc. na página, porque o texto com design muito pesado pode desviar o significado das palavras.
35. Usar texto com muito contraste e cores de plano de fundo, para que os caracteres fiquem o mais legíveis possível.
36. Evitar rolagem horizontal a 800 x 600.
37. Os elementos mais críticos da página devem estar visíveis "acima da dobra" (na primeira tela de conteúdo, sem rolar).
38. Usar um layout fluido para permitir o ajuste do tamanho da homepage a diversas resoluções de tela.

COMPONENTES DA INTERFACE COM O USUÁRIO
39. Nunca utilizar componentes da interface como partes da tela que as pessoas não deverão clicar.
40. Evitar utilizar diversas caixas de texto na homepage, principalmente na parte superior da página em que as pessoas geralmente procuram o recurso de pesquisa.
41. Usar raramente menus suspensos, principalmente se os itens neles contidos não forem auto-explicativos.

TÍTULOS DE JANELA
42. Iniciar o título da janela com a palavra que resume a informação (geralmente o nome da empresa).
43. Não incluir o nome de domínio de nível superior, como ".com", no título da janela, a menos que faça realmente parte do nome da empresa, como em "Amazon.com". Sufixos como ".com" acrescentam uma palavra desnecessária ao título da janela e geram uma diferença artificial entre a presença de uma empresa na ou fora da Web. Os usuários sabem que estão na Web quando entram em um Website, de modo que não necessidade de um ".com" para dar essa informação.
44. Incluir uma descrição resumida do site no título da janela. Experimente usar o slogan do site, se existir, mas somente se for significativo e em linguagem direta.
45. Limitar os títulos das janelas a não mais do que sete ou oito palavras e a mento de 64 caracteres.

JANELAS POP-UP E PÁGINAS INTERMEDIÁRIAS
46. Conduzir os usuários à verdadeira homepage quando digitarem o URL principal ou clicarem em um link para seu site. As telas de abertura devem morrer.
47. Evitar janelas pop-up. As janelas adicionais impedem que os usuários acessem o conteúdo do site e, se essas janelas contiverem informações importantes, é provável que os usuários as ignorem, supondo que se trata de anúncios.

PUBLICIDADE
48. Manter os anúncios de empresas externas nas bordas da página.
49. Manter os anúncios de empresas diferentes da sua pequenos e mais discretos possíveis em relação ao conteúdo central da homepage
50. Se você posiciona anúncios fora da área de banner padrão, no início da página, rotule-os como publicidade.

BOAS-VINDAS
51. Não dê.