O Submarino saiu na frente novamente e lançou uma versão beta para avaliação em sua rede de afiliados. Ao invés de esconder o que andam fazendo da concorrência, resolveram escancarar. Tudo bem que não há muito novidade, já que, como sempre, é um benchmark da Amazon.com, mas abrir à crítica pública é novidade nesse ramo.

Já recebi muitas propostas de programas de afiliados em meu blog, mas só aceito quando o nível de usabilidade do parceiro não impede que meus usuários comprem o produto anunciado, transformando o programa de afiliados num programa de propaganda gratuita. A loja do Submarino é uma das únicas que passou em meu teste de qualidade. Por esse comprometimento, resolvi enviar algumas pequenas observações e sugestões de melhorias sobre o novo design para a equipe do Submarino.

Quem tiver opiniões diferentes da minha, manifeste-se.

Estes screenshots anotados foram feitos com o Jing, um software gratuito muito prático para esse fim. Estão estourando o layout do blog, eu sei, mas acho que é o melhor jeito de ver.

No geral, achei excelente o novo redesign. Conseguiram ser mais elegantes do que a própria Amazon. Só falta equiparar-se em termos de persuasão que, no caso da Amazon, acontece pelos recursos de cruzamento de dados que ela faz (quem comprou este livro comprou também, recomendações pessoais, etc).

Comente este post

No fórum de discussão do Yahoo, para ver as mensagens mais antigas, você segue o link 'next' (próxima). Pior mesmo é seguir 'previous' (anterior) para voltar às mensagens mais novas. Se os links fossem invertidos, faria mais sentido, porém o ideal é a paginação do Gmail: 'recentes', 'mais recentes', 'antigas' e 'mais antigas'.

Comente este post

O leitor Giovani Moura indicou o website do Jornal do Brasil para ser avaliado. Recentemente fizeram uma mudança radical no website, que agora parece mais uma revista eletrônica misturada com vários blogs do que um portal de notícias, como anteriormente. Quais são os 7 problemas de usabilidade mais severos que vocês encontram?

Comente este post

Observe bem o anúncio do novo recurso do Orkut que permite saber quem visitou seu perfil recentemente.

O recurso causará um considerável impacto nas minhas relações sociais e, ao invés de me perguntar se eu quero esse recurso ligado, ele já liga antes mesmo deu entrar no sistema.

Pior do que isso, a mensagem me induz a mantê-lo ligado. Quem é que não quer saber quem visitou seu perfil? O aviso de que posso desligá-lo é ilógico nesse contexto, pois não há um motivo para fazê-lo.

A mensagem deveria primeiro perguntar se quero ligar esse recurso e segundo me informar de que se eu ligar, as outras pessoas também poderão saber se visitei o perfil delas. Ainda poderiam haver dicas de como isso pode impactar minhas relações sociais:

• se você visitar muitas vezes o perfil de alguém ela vai saber que você está interessada nela
• você pode visitar o perfil de alguém com quem está de mal como um sinal de que você gostaria de reestabelecer contato

Já falei anteriormente que o Orkut deveria dar mais dicas do impacto social de seus recursos. Ao invés de se travestir de imparcialidade, eles deveriam assumir que seu design induz determinados tipos de comportamento e deixar a indução clara para que os usuários possam rejeitar a indução, se assim desejarem.

Comente este post

A tela acima é para ver as linhas de ônibus da viação Gontijo, indicação do leitor João David. Depois dessa tela, o sistema retorna as cidades disponíveis para a letra escolhida e você escolhe quais delas está procurando. Com poucas tentativas se percebe que é mais fácil encontrar linhas inexistentes do que existentes.

O principal problema nem é a seleção por ordem alfabética do ínicio (que deve ter sido escolhida para não exibir muitas opções de cada vez pro usuário), o pior é que a opção de destino não é dinâmica. Se fosse dinâmica, ao escolher uma origem, só seriam exibidos os destinos em que a empresa tem linhas disponíveis, evitando que o usuário tenha que abrir uma nova página, verificar que não há linhas disponíveis para aquele roteiro, volte e comece tudo de novo.

A Cometa também tem esse problema, mas pelo menos não há aquela seleção de estado nem a de ordem alfabética. Apesar do site colorido, a Itapemirim tem um selecionador de linhas dinâmico que funciona bem melhor.

Comente este post

Esse ano, o simpósio IHC 2006 propõe uma competição de avaliação de interface para graduandos e pós-graduandos participarem. O software a ser avaliado é o Jems, que é usado para automatizar o processo de submissão e aprovação de artigos nas publicações da Sociedade Brasileira de Computação.

A primeira vez que precisei usar o Jems para submeter um artigo me senti bem desconfortável, mas entendi que isso fazia parte do jogo. Se eu não era capaz nem de operar o software de submissão, como poderia publicar um artigo num congresso sobre Computação?

Comente este post

Hoje eu só queria uma coisa simples: encontrar um gerenciador de eventos que me permitisse colocar no meu blog uma lista com os próximos 5 eventos em que eu vou.

Tentei primeiro o Google Calendar. Nada falava sobre badges (esses códigos prontos que o sistemas fornecem para colocar no seu blog) nem sobre RSS (que eu poderia incluir usando o Feeddigest). Dentro das opções encontrei o XML dos eventos, mas ao clicar não aparecia nada, pois eu não sabia que tinha que primeiro definir que meu calendário era público para depois publicar um XML (a interface não me avisou disso, só mostrou o botão). Acabei desistindo, pois o XML não exibia a data do evento e não permitia customização.

Tentei também o Planzo que era mais fácil para pegar o RSS, mas desisti pelo mesmo motivo do que o Google

Cheguei no Upcoming.org que, pela proposta, parecia ser ideal para o que eu precisava. Me cadastrei e quando terminei caí no screenshot acima. Empaquei. Onde clico agora? Onde adiciono um evento?

Eu estava procurando um link onde tivesse o verbo add, mas só encontrei join e invite. Naveguei por todas as outras páginas gerais atrás do maldito link. Nada. Voltei pra Events e tentei clicar no join in metros, mas eu não sabia o que metro significava. Veio uma lista de busca e países. Foi aí que entendi que, para postar um evento, é preciso antes entrar numa "metro", uma espécie de grupo associado a uma cidade.

Não seria muito mais fácil mostrar na página depois do cadastro um link "add event" e ao perguntar a cidade me adicionar automaticamente ao "metro" daquela cidade?

O serviço tem vários outros problemas de fluxo de tarefa incongruente para o usuário. Semiótica neles!

Comente este post

PlaydoJam é um jogo de basquete em Shockwave que reconhece seus movimentos diante de uma webcam comum. Não é um jogo muito divertido, mas chama atenção pela utilização desse novo recurso. Fico pensando nas possibilidades de usar esse dispositivo de entrada para outros tipos de softwares...

Comente este post

Cada vez que leio um documento no Acrobat e quero buscar uma palavra-chave no texto, tomo um susto. Como a experiência é similar à leitura de documentos no Word, uso o atalho Ctrl+L para fazer a busca e, ao invés de ativar a busca, ativo a visualização em tela cheia. Estou esperando que apareça uma caixa de busca e o que acontece? A tela fica preta e aparecem apenas as tarefas abertas no sistema. Parece que o computador travou e vou perder o que estava fazendo até que, alguns segundos após, a tela é completamente preenchida pela visualização do documento. Ufa!

Culpa do Word em português que usa uma série de atalhos no teclado fora do padrão da maioria dos softwares. Um amigo dizia que o Ctrl+B no Word significa, na verdade, Ctrl+Bill Gates, pois você precisa prestar respeito a ele para salvar seus documentos.

Comente este post

Digitei errado uma Url e caí nesse estacionamento de domínio. A imagem do cãozinho me cativou tanto que fiquei até curioso para ver o que tinha no site.

O olhar de um cachorrinho convence qualquer um a fazer um cafuné. Trata-se de uma comunicação afetiva instintiva, instantânea e irresistível. Além disso, o pelo do cachorro propicia o toque, pois parece macio e gostoso de passar a mão. Como incutir esse tipo de atração nos produtos que projetamos sem caracterizar golpe baixo?

Comente este post

Acabei de preencher o formulário mais sofrido de minha vida. Demorei quase 2 horas para digitar as notas dos meus alunos porque a interface do software que a Unisul usa para gerenciar as notas (PeopleSoft) é tão ruim, mas tão ruim que não consigo nem encontrar um adjetivo para descrevê-lo.

A cada vez que digitava uma linha de notas, ele reenviava o formulário, interrompendo o fluxo da tarefa. Volta-e-meia clicava sem querer nas caixa de verificação que servem para desabilitar a contagem da nota e novamente carregava tudo de novo. Quando inseria por engano algum valor que o sistema não aceita, ele dizia que o formulário expirou e eu tinha que recomeçar a digitação dos dados desde a última vez em que tinha salvo! As mensagens de erro que apareciam em caixas de diálogo diziam coisas como "Número negativo atribuído a um campo não marcado: DERIVED_LAM.LAM_ASSIGN_AVE1. (2,121) At FUNCLIB..."

Me senti como se tivesse voltado à idade da pedra da informática. A única diferença é que o fundo de tela agora é branco e não preto e o texto é preto e não verde.

Esse formulário é um bom caso para o super-Ajax.

[ nota ] Depois de escrever esse post e comemorar a vitória, voltei ao Peoplesoft e a sessão *@!~**!ª tinha expirado e meus dados não tinham sido salvos! Tive que redigitar metade dos dados de novo!

Comente este post

Nessa tela de login, a fonte escolhida para a caixa de senha do formulário é tão pequena que eu não consigo distinguir cada asterisco, ou seja, não posso verificar se digitei o número correto de caracteres para minha senha. Compare com o formulário de login do Ethnio, um software para realizar testes de usabilidade.

Comente este post

Não entendo porque o formulário de registro ao verificar que o login e a senha não existem não possam me encaminhar para uma página onde posso dar mais informações e completar meu registro ao invés de me aborrecer dessa forma. Quando abri essa tela do Riya, eu estava crente que era uma tela de registro, pois o título é "Sign in" e não "Login" e não há nenhuma opção do tipo "Register" próxima.

Desenvolveram uma tecnologia capaz de reconhecer rostos em fotos automaticamente, mas se esqueceram de fazer esse encaminhamento simples...

Comente este post

Na hora de escolher a cidade para ver a previsão do Climatempo, fiquei pensando que a pagina tava quebrada, pois ao invés de abrir uma nova página quando escolhia a cidade (o padrão para esse tipo de operação), nada acontecia.

Só depois de tentar outras cidades e que percebi que os valores na caixa da direita estavam mudando. Acredito que o movimento constante das animações de sol com nuvem do lado direito ofuscavam a mudanca de valores, visualmente menos proeminente. O ideal seria que essa caixa como um todo piscasse ao abrir uma nova cidade ou acontecesse alguma outra transição visual.

Comente este post

O Nero 7 me deixa confuso ao terminar de gravar um CD com esse diálogo. Se já
terminou de gravar, como pode haver um botão "gravar"? Ao invés de gravar um
CD, esse botão salva as informações da gravação (uma funcionalidade quase
inútil).

Comente este post

Comente este post

Você acha que eu vou desabilitar meu antivírus durante a instalação de um novo programa, o momento mais crítico para ser infectado? É ruim, hein! O mais engraçado é que a instalação não teve problema algum por isso...

Se você está procurando onde comprar o IBM ViaVoice 9 (o único em português), saiba que ele não está mais à venda no Brasil. Dê uma olhada no WordPerfect que possui as mesmas funcionalidades. Qualquer dúvida, consulte este livro sobre reconhecimento de voz.

Terminada a instalação, de novo o assistente está me dando ordens, mas dessa vez ele não me dá alternativa. Observe a empáfia:

Como estava trabalhando em outros softwares durante a instalação, tentei fechar a janela no X do canto, mas isso teve o mesmo efeito que clicar em OK. Fui obrigado a ver meus programas fechando um por um até que o computador reiniciasse, sem que eu pudesse fazer qualquer coisa...

Pra mim, parecem ridículas essas ordens, mas para o desenvolvedor do software certamente elas são importantes. Deve haver alguma razão pela qual é estritamente necessário fechar o antivírus e reiniciar o computador, mas o problema é que ela não é explicada ao usuário. Fechar o antivírus e reiniciar o computador são duas das mais importantes ações que o usuário pode fazer em seu computador, portanto, é preciso um bom motivo pra fazer isso!

Nas entrelinhas, o que o desenvolvedor está dizendo é que ele sabe o que é melhor para o usuário e o que ele julga ser importante é mais importante do que o que o usuário julga ser importante. Enfim, é um desenvolvedor autoritário.

Paradoxalmente, os demais assistentes do software não adotam esse tom autoritário. Pelo contrário, representam um dos melhores exemplos de assistentes que já vi.

Personagem Assistente

O excesso de reclamações por causa da ineficiência do clips do office fizeram a Microsoft finalmente matá-lo na próxima versão. O estigma ainda está tão vivo que muitos designers ainda têm medo de criar personagens assistentes. A equipe do ViaVoice não teve medo e utilizou bem um personagem para representar a voz sintetizada que lê textos:

Além de falar, o assistente não faz mais nada. Assim que cumpre seu papel, vai embora sem nem pedir. Não me interrompe o trabalho, não fica sugerindo tarefas irrelevantes, nem fica me olhando com cara de peixe morto, como o clips do office. O lápis não me parece muito apropriado para um assistente de voz - eu faria algo mais divertido como uma dentadura gigante ou um papagaio, mas mesmo assim ele consegue tornar a leitura mais humanizada.

Quando escutamos uma voz humana, queremos saber quem está emitindo ela. Em seguida, prestamos atenção no timbre de voz e imaginamos que tipo de pessoa teria aquela voz. Quem é que já não se frustrou ao conhecer pessoalmente um locutor que não tinha a aparência condizente com nossas expectativas?

O assistente é uma tentativa de suprir essa reação natural e, ao mesmo tempo, criar um ponto de atenção na tela para distrair os olhos. O timbre da voz sintetizada continua robótico, mas a percepção da voz se torna um pouco mais humana devido à imagem do assistente.

Assistente de configuração

Terminada a instalação, é preciso configurar uma série de fatores para poder usar o software, que depende do ajuste fino do hardware. Ao invés de deixar o usuário se virar com um bando de menus de configuração, o assistente do ViaVoice, guia o usuário de forma excepcional por todas as etapas necessárias para o uso.

Em geral, assistentes de softwares tem ilustrações inúteis e chatas e o texto usa termos que não são naturais ao usuário. Quando percebi que esse não era assim, comecei a gravar screenshots de todas as etapas. Observe o tom amistoso da redação, as ilustrações atrativas e os controles inequívocos:

Comente este post

Comente este post

O site da vez agora é o da Puc-Rio. Há mais de 4 anos sem nenhuma mudança crucial, o site me parece bastante antiquado. Quem leu meu TCC sobre websites de universidades vai entender que não me refiro só à apresentação visual (que nem é tão ruim), mas principalmente à organização do conteúdo. Seguem os screenshots sugestivos para vocês encontrarem os problemas de usabilidade:

Comente este post

Comente este post

Prepare-se, não vai ser fácil. Existem muitas opções gratuitas, mas quanto mais funcionalidades elas oferecem, maior a dificuldade de usá-las.

Um exemplo é o Netvibes, que de tanta fragância Ajax entupiu minhas narinas:

Nesse site (ou aplicação), é possível adicionar fontes de notícias, buscadores, contas de email, podcasts, comparação de preços, notas e muito mais. Usuários que não sabem que agora é possível interagir com interfaces de websites de forma parecida com aplicativos de dekstop ficarão bem perdidos, pois o site não é nada didático. Nesse caso até que faz sentido, pois o público-alvo só deve ser "programadores loucos por ver tudo que pode ser feito com Ajax".

Pior do que isso só a versão do Google:

Quando vi essa verdadeira bagunça visual, comecei a entender porque Donald Norman não concorda que o Google é o melhor exemplo de simplicidade. É fácil fazer uma home simples que tenha só um campo de busca e mais algumas poucas opções. Difícil é fazer uma homepage customizada como a do Meu Yahoo, que já existe há anos:

Concordo que a sensação inicial de desorganização chega a ser pior que o do Google, mas para customizar o conteúdo é mais fácil porque as páginas de configuração são separadas, o que permite o usuário a se concentrar na tarefa e sobra espaço para explicação. Apesar de poucos usuários do Yahoo se darem ao trabalho de usar o Meu Yahoo, ainda assim não se pode esperar que eles sejam experts no uso do computador.

Nunca usaria o Meu Yahoo como agregador porque é feio demais. Tem uns temas alternativos para escolher, mas um pior que o outro. Esse tipo de aplicação é complexa demais para deixar na mão de programadores fazerem o design de interface, como suponho que foi feito nos exemplos citados.

Por enquanto continuarei a usar o Bloglines como agregador. Ele não tem todas as funcionalidades e poder de customização que o Google e o Netvibes tem, mas é bem simples de usar e a única coisa que me incomoda no layout é o fundo cinza para leitura de posts. Também fico irritadíssimo quando clico para abrir uma pasta e, sem querer, marco como lida 1340 mensagens que nunca conseguiria ler de uma vez só... Gostaria de ter um "voltar" nessas horas.

Comente este post

O interesse no Trama Universitário em promover este concurso é atrair audiência para seu portal através dos blogueiros. Cá entre nós, essa é uma estratégia bastante arrojada de publicidade a baixo custo, cê não acha? Ao invés de espalhar banners que ninguém vê em grandes portais, espalharam selos em blogs sem concorrência visual e envolveram formadores de opinião, associando a marca ao fomento cultural.

Para que o sistema de votação seja confiável, eles exigem um cadastro para votar, mas um cadastro longo demais na minha opinião. Se você desistiu de votar neste blog só por causa do cadastro deve ser porque julgou que não valia à pena perder tempo preenchendo os dados exigidos.

Endereço

Mesmo que o cadastro lhe informasse que eles estão pedindo seu endereço completo só pra adiantar quando houverem promoções em que você possa participar, provavelmente isso não te convenceria. Melhor seria pedir isso só quando você fosse de fato participar de alguma promoção.

Data de nascimento

Não consegui imaginar como isso seria tão vantajoso pro usuário que compensasse a seguinte sequência de interação:

1. Clicar no dropdown "Dia"
2. Operar a barra de rolagem até aparecer o dia 26
3. Clicar na opção 26
4. Conferir se a seleção está correta
5. Clicar no dropdown "Mês"
6. Transferir de nome do mês (Janeiro) para número (1), já que a primeira opção é a mais comum para meses
7. Clicar na opção 01
8. Conferir se a seleção está correta
9. Clicar no dropdown "Ano"
10. Operar a barra de rolagem até aparecer o ano 1983 dentre 45 opções
11. Conferir se a seleção está correta

Nunca tinha imaginado que o inocente seletor de data de nascimento poderia dar tanto trabalho? Aplique esse tipo de análise numa interface mais complexa e você tem um modelo de previsão da perfomance de interface chamado GOMS.

No caso desse cadastro, eu usaria a entrada por teclado para a data de nascimento, ou melhor, nem pediria a data de nascimento. Mesmo para o próprio movimento Trama Universitário esse dado não seria tão relevante, já que o site é voltado para universitários, cuja variação de idade é pequena (17-25 anos).

Curso universitário

Quem é que não se sente orgulhoso de dizer que faz um curso universitário? Ainda mais dizer qual curso faz. Acredito que a maioria dos usuários responderiam essa pergunta sem titubear, vendo vantagens só na atitude de respondê-la (um carinho no ego).

Infelizmente, essa pergunta é muito mal-feita pelo cadastro, veja:

Achei estranho aquele botão embaixo do campo de texto, pois o padrão é ter botão só no final dos cadastros, mas cliquei em cima pra escrever mesmo assim. Digitei algumas letras e continuou escrito "não informado". Fiquei olhando pro botão e pensando "mas como vou buscar o curso se não posso escrevê-lo aqui?" Como não restava alternativa, cliquei no botão pra ver o que acontecia e me abriu o seguinte popup:

Clico no botão de rádio e... botão "Fechar" ou botão "Enviar"? Ambos estão em posição padrão para finalizar um formulário, mas esta é uma situação incomum, afinal, é um formulário dentro de um popup. A saída natural seria fechar a janela e voltar para o formulário que estou vendo atrás dessa janela por isso "Fechar" faria sentido. No entanto, pensei na possibilidade de estar descartando a seleção e pensei melhor no assunto. Escolhi o botão "Enviar" na esperança de que poderia haver mais uma etapa nesse formulário que perguntasse minha habilitação, afinal de contas, sou Bacharel em Comunicação Social com Habilitação em Jornalismo (existem outras habilitações como Publicidade & Propaganda, Relações Públicas, Rádio & TV, etc).

Ao contrário do que eu pensava, o popup fechou ao clicar em "Enviar" e fiquei com o seguinte resultado:

Se tivesse clicado em "Fechar", teria perdido os dados, mas pra mim esse rótulo descreve melhor o que aconteceu: o popup fechou.

Para melhorar essa sequência, poderia ser eliminado o botão "Fechar" e mudado o rótulo do "Enviar" para "Finalizar escolha" ou "Salvar e fechar".

Talvez você esteje pensando porque ao invés de toda essa romaria, o cadastro não ofereceu uma lista dropdown com os cursos sem precisar de popups. Imagino que escolheram assim porque a lista ficaria grande demais, tão grande que poderia prejudicar o carregamento da página e a interação do usuário (imagine escolher uma dentre 100 opções?).

Se não tivesse aquele campo de texto inicial até que seria uma saída razoável o seletor em popup. Se fosse possível fazer requisições dinâmicas numa página HTML, seria possível carregar apenas umas poucas opções de acordo com a entrada do usuário, instantaneamente. Opa! Isso é um trabalho para o ressucitador dos frames, o sobrevivente da ilha de Javascript, o sabotador do botão Voltar, o incrível Ajax!

Veja como esse site de reservas resolve o problema de forma muito mais elegante:

Na medida em que o usuário digita o termo de busca, ele faz a consulta no banco de dados e retorna previsões do que o usuário está procurando. Aliás, essa aplicação incorpora muitas novidades javascrípticas, vale à pena conferir. Não funcionou no Opera, mas, pelo menos, não exigiu plugin.

Pra fechar, ou melhor, finalizar a avaliação do cadastro da Trama, segue a mensagem de confirmação que me agradece pelo cadastro com uma tipografia minúscula e me adverte em negrito sobre uma tal de "validação de login" (jargão técnico). Melhor seria avisar que foi enviado um email para confirmar se o email existe mesmo contendo um link.

Comente este post

Depois de um tempo, essa medida perdeu a eficiência e o AntiSpam do UOL começou a exigir o reconhecimento de uma senha escrita torta numa imagem (captcha). Os cegos ficaram impossibilitados de mandar emails para seus amigos que tinham conta no UOL depois dessa, pois os leitores de tela não lêem imagens. Recentemente foi adicionado um link para ouvir as letras do código, mas não sei até que ponto isso é usável para o cegos.

Nessa última alteração do AntiSpam do UOL, dificultaram tanto o reconhecimento do código na imagem que além de ficar difícil para os softwares automatizados dos spammers ficou difícil para um ser-humano como eu. Veja no tira-teima, ou melhor, adiciona-teima minhas 5 tentativas pra tentar enviar um email prum amigo:

O mais impressionante é que o AntiSpam do UOL não diz se você errou ou acertou, simplesmente pergunta de novo. Pode levar o usuário a pensar, por exemplo, que ele digitou muito devagar e por isso ficaria repetindo. Ou então, ele poderia pensar que tem que reconhecer um número X de códigos como esse.

Entretanto, o problema maior dessa tela é que ela não explica por que essa tarefa é necessária. Poucas pessoas sabem que os spammers tem programas automatizados para roubar emails capazes inclusive de ler textos dentro de imagens. E, mesmo que essa tela explicasse isso, ainda assim muitos não entenderiam.

Na minha opinião, se essa tela convencesse que essa medida vai beneficiar o seu amigo seria melhor. Quem sabe até, explorando um tom mais amistoso e emocional, como os diálogos do orkut. A maioria dos emails que troco não são frios, mesmo os profissionais.

Para chegar nessa tela, é preciso clicar no link que vem no email pedindo confirmação, mas este não dá nenhuma pista do trabalho que será necessário na tarefa nem explica amigavelmente porque ela será necessária:

Olá,

Você enviou uma mensagem para *******@uol.com.br
Para que sua mensagem seja encaminhada, por favor, clique aqui

Esta confirmação é necessária porque *******@uol.com.br usa o Antispam UOL, um programa que elimina mensagens enviadas por robôs, como pornografia, propaganda e correntes.

As próximas mensagens enviadas para *******@uol.com.br não precisarão ser confirmadas*.
*Caso você receba outro pedido de confirmação, por favor, peça para *******@uol.com.br incluí-lo em sua lista de autorizados.

Atenção! Se você não conseguir clicar no atalho acima, acesse este endereço:
http://tira-teima.as.uol.com.br/challengeSender.html?data=226ltAo4taQj.

No final das contas, o AntiSpam do UOL está pendendo demais para o lado da utilidade e menos para o lado do significado, como explico nesse artigo.

No meu caso, resolvi o problema do spam com filtro de spam do Mozilla Thunderbird, uma excelente alternativa ao Outlook. Quando recebo um spam, clico num ícone de lixeira e ele é automaticamente movido para a pasta de lixo. Dessa forma, o programa aprende o que é spam e o que não é. Novos emails são comparados e, se forem parecidas com as mensagens marcadas como spam, elas são automaticamente deletadas. Isso começa a funcionar com uma precisão de mais de 90% depois de umas 100 mensagens marcadas.

Comente este post

O que mais me chamou a atenção, entretanto é a facilidade de uso do criador de estampas de camisetas. Pense bem, pode ser a primeira vez que o usuário se arrisca a desenhar algo usando o computador e, para obter um resultado interessante, é preciso manipular ferramentas mais complexas que as oferecidas pelo Microsoft Paint.

Acompanhe a sequência usando a ferramenta stencil (uma excelente metáfora trazida do mundo real):

Agora preste atenção na redução ao mínimo possível de funcionalidades. Ao invés de oferecer todos os recursos possíveis que o Flash permitiria, a seleção procura oferecer o mínimo necessário para o usuário fazer um desenho. Simplicidade, mesmo num site que oferece uma experiência alternativa.

O desenho é feito pra você mesmo imprimir sua camiseta, usando aquele papel que transfere a estampa quando pressionado contra o tecido usando um ferro de passar roupa. A animação explica isso muito mais rápido do que minha frase, no entanto, a seleção de tamanho me causa certa confusão. Veja se você percebe a incongruência:

A folha "small" (pequena) parece muito maior do que a folha "large" (grande). Da forma como foi diagramado, dá a impresssão de que na primeira opção, o desenho ocupará o espaço inteiro da folha e no último, a folha será divididade em várias partes para economizar (esse papel é bem caro).

Eu explicaria dessa forma:

Agora uma pergunta para os veteranos do webdesign: reconheceram o traço? Façam suas apostas, depois conto quem foi.

Dica: você encontra este e outros links legais na super-seleção de links do Bruno Tarmann.

Comente este post

É batata: portifólio desse tipo de designer tem pouquíssimo texto e a fonte é praticamente ilegível. No portifólio até que vai, pois o conteúdo principal são os exemplos de peças gráficas que o designer criou e não o texto. Mas, em quase todos os outros casos, uma pixel-font minúscula não é a melhor pedida.

Pablo Barros chamou a atenção na ArqHP para o site da Sapien, três vezes Top10 do Ibest na categoria Agências. Cansados das reclamaçãos com o tamanho da fonte e o baixo contraste utilizados no site, eles resolveram ironizar o usuário.

Ao invés de aumentar a fonte do site, a pequena caixa do canto abre um tutorial que ensina, pasmem, como o usuário pode mudar a resolução do seu monitor para que as fontes pareçam maiores. Abaixo segue os screenshots para você notar como ele faz o usuário se sentir um pacóvio:

É esse tipo de designer que ainda ri daquela velha piada: "Se usuário tivesse extensão, seria .FDP" Se você também ri da piada, por favor, mude de profissão. Trabalhe com impressos, vídeo, pinte quadros, mas por favor, pare de fazer sites com tipografia cursiva e metáfora de livro, como o Penduricalho da Sapien:

[ Direito de Resposta] A Sapien me enviou uma mensagem muito educada ressaltando que a intenção do tutorial não era ironizar o usuário. Eles admitem que o site, que foi feito em 2000, já não está mais adequado para as necessidades de seus clientes e planejam em breve um redesign. Eles dizem também que o site Penduricalho referido acima teve aumento de 266% acessos depois da implantação da versão acima.

Comente este post

O Simplicity Showcase é um hotsite que mostra alguns produtos da Philips que representam melhor o conceito. Se você, assim como eu, não tiver o Flash Player versão 7,019,000 (ou algo assim), ele exibe a seguinte mensagem de erro:

Essa é uma mensagem de erro simplória e não simples. Ela é pobre porque não explica o que é Flash e Javascript para o usuário. Pior, meu Javascript está ligado, o que me falta é só o player, mas essa mensagem de erro me fez entrar nas opções do navegador para verificar que estava ligado. Dificilmente um usuário ocasional iria fazer tal coisa. Na melhor das hipóteses, pensaria que Javascript é mais um desses plugins e ficaria na dúvida como instalá-lo.

Depois de atualizar o Flash player, olha só o que aparece (preste atenção no primeiro parágrafo):

Essa caixa não me parece muito simples. O texto da direita é trocado sem minha ordem, num espaço de tempo pequeno demais para que eu possa ler tudo. O menu dropdown exige dois cliques para ver outra seção e possui uma porção de nomes que não me fazem sentido algum. Se estou sendo apresentado a esses produtos, como exigir que eu saiba o nome deles? E esse menu de bolinhas, para quê serve?

É por essas e outras que Jakob Nielsen criticou tanto o Flash há anos atrás. Flash dá mais liberdade ao designer, mas aumenta a entropia (o movimento natural que tende à desorganização do universo).

Mas não é só no Flash, que o site da Philips peca. Se clicar no link Comentários abaixo do texto da direita, você é levado para uma página de suporte, que nada tem a ver com o assunto! Essa eu não entendi.

Mas vejamos, e se precisasse mesmo de suporte? Digamos que eu tenha um barbeador da Philips e tenha um problema com seu funcionamento. Eu não sei o número do modelo e estou com preguiça de levantar do PC para ver isso. Tento as categorias. "Cuidados Pessoais" soa feminino, mas é o mais provável da lista. A página que abre não é feminina e nem masculina, é robótica:

Não sei quanto a vocês, mas essa página me assusta. Pelo menos acho que não estou sozinho. Se a Philips colocou a mensagem do Fale conosco acima é porque ela sabe que isso não está funcionando. Qual o problema com ela? Excesso de informação concorrente. Melhor seria se o menu da esquerda estivesse lá embaixo da página, ou compactado no topo ou ainda nem aparecesse. O usuário precisa se concentrar nas opções desta categoria e não nas outras.

Clicando em Barbeador Elétrico Seco, eu caio numa página que exige que eu saiba o número de série do meu produto:

Meu produto seria o Philishave Quadra Action, mas eu não decorei o seu código. Vou tentar qualquer um.

Na página aberta, duas figuras de emoticons me chamam a atenção logo de cara. Eles querem saber se o site de suporte está indo bem. Apesar de ser uma boa iniciativa, essa pergunta está sendo feita no lugar errado. Note como a maioria das perguntas se refere aos serviços oferecidos pelo menu imediatamente ao lado:

Essas perguntas deveriam ser feitas dentro das opções correspondentes e não nessa etapa anterior. É como perguntar se você gostou de algo antes mesmo de provar!

Para finalizar, tentei a solução de problemas automatizada (uma excelente idéia, por sinal). Depois de passar por uma sequência de perguntas e respostas, cheguei à solução para meu problema fictício: esperar que o problema se resolva sozinho. Pior que isso, só a tradução da explicação:

Comente este post

O usuário abre o site da Mercedez Benz USA e é alvo de uma pequena introdução em Flash falando sobre a tradição da montadora e um evento de promoção de vendas. A cada nova versão da home, o design da página é cuidadosamente adaptado para manter a consistência na simetria, balanço e contraste. Pra mim, essa é uma das melhores homes que já vi.

Só não gostei muito daquele menu "Models", que causa uma autêntica cascata de submenus. Veja como a página fica desfigurada:

Submenus voadores em cascata não são nada elegantes. Tá certo que eles permitem uma navegação mais direta para quem já sabe onde quer chegar, mas acredito que poucos consumidores saberão de ante-mão a diferença entre um Sedan E350 e um E320. Melhor seria ter o submenu apenas no primeiro nível e a página de cada categoria apresentaria uma listagem mais completa, como essa:

O pior daquele submenu é que ele induz o usuário a fazer comparações entre os modelos com base apenas nas parcas informações que ele exibe no terceiro nível da hierarquia. Apesar de constar lá o botão "Compare this vehicle", ele é o último do menu e pode passar despercebido.

Aliás, o serviço de comparação me chamou a atenção. Ele permite comparar um modelo com os modelos equivalentes da concorrência. É preciso coragem pra fazer isso:

O site da Mercedes ainda possui muitas outras boas idéias. Trata-se de uma experiência muito bem projetada.

Comente este post

Na entrada do site, o usuário escolhe se quer acessar a versão E-zine ou Jornal, uma boa metáfora das versões para banda larga e banda discada. São metáforas já muito batidas, mas os detalhes de como foi implementada é que me chamaram a atenção.

O segredo para toda metáfora de interação é não ser levada ao pé-da-letra. Aproveitar as conveniências e rejeitar as incoveniências. A metáfora do E-zine deixa de lado as incoveniências do efeito de virar página e aproveita para mostrar conteúdo com diagramação artística, de nível de revista impressa. A metáfora é estendida e ao conectar um fone de ouvido com um orifício nas páginas, o usuário ouve o som da música a que a página se refere. Felicidade Instantânea pura!

No site de uma banda de música, não é preciso seguir estritamente os padrões de interação. Aliás, é até melhor que se experimente formas diferentes de interagir com o usuário, para criar experiências mais lúdicas.

Infelizmente, a versão para banda discada não teve tal cuidado. A metáfora de jornal ainda é usada pelos grandes portais, mas de forma adaptada ao meio. A versão do site implementa ela ao pé-da-letra e até os textos são quebrados em colunas. Me deu uma sensação muito ruim ler textos pulando de coluna em coluna na Web. Não combina de jeito nenhum com o tipo de leitura rápida que fazemos no monitor.

Pior do que isso só quando clico para ler mais. Um popup se abre com o texto todo pra ler. A metáfora caiu por terra. Popup não tem nada a ver com jornal. Era melhor ter um site padrão por aqui, tipo portal, do que fazer desse jeito.

Comente este post

KidPad é um aplicativo de contação de histórias para crianças desenvolvido por pesquisadores da Universidade de Maryland e mais de 100 crianças do mundo todo. Pra começar, a interface não tem texto algum. Três caixas, uma em cada canto da tela, podem ser abertas e seu conteúdo são ícones muito bem bolados.

Destaque para os ícones "duplicar objeto" (a varinha mágica com duas pontas), "agrupar" (laço) e "abrir" (o desenho com um rosto sorridente). Dentro do contexto de uso, eles são muito familiares. Se a criança não entender, tem um ícone de ajuda que quando encostado nos outros, roda o áudio de uma outra criança explicando.

O software foi desenvolvido utilizando uma metodologia de design participativo especial para crianças. Os detalhes podem ser lidos nos papers. O paper Children as Our Technology Design Partners não é específico sobre o Kidpad, mas dá muitas dicas para quem quiser fazer testes de usabilidade e etnografia com crianças (ser divertido, se abaixar enquanto conversa, usar roupas descoladas e etc).

Agora compare o Kidpad com este joguinho de colorir do site da Nestle. Pra ter acesso aos pincéis, é preciso passar o mouse sobre aquela coisa verde. Clicar nas coisas para colorir não faz nada, arrastar também não. É preciso arrastar pra cima e pra baixo várias vezes e a figura vai aos poucos ficando mais saturada. É um caso de metáfora ao pé-da-letra que provavelmente não agradará as crianças.

Comente este post

Isso facilita a tarefa de manutenção do blog, pois condiz com o modelo mental que o usuário tem do próprio blog. Ele pensa em posts e já pensa no local onde esses posts aparecem na página. O significado da palavra "post" vem depois disso.

Porém, como se trata de um modo de navegação incomum, à primeira vista, o usuário pode pensar que é apenas um preview do blog e não um menu. Melhor seria que a interface explicitasse que aquilo é um menu de navegação com um rótulo acima ou aumentasse a clicabilidade dos botões (mais proeminentes).

Mais detalhes deste genial design de interação, no site do Javiér Cañada.

Comente este post

Veja como terminam os posts dele, um porrilhão de links. Tem anúncio que não tem nada a ver com o texto, links de outras matérias com títulos nada descritivos, banner de livro, palavras-chave que linkam para uma busca com o termo, dois formulários e aff, perdi o ar e não disse tudo...

Parece que está desesperado por mais um clique! Deve ter visto as estatísticas e ficado maluco quando viu que os usuários passam menos de 1 minuto no site em média. Aí colocou esse monte de coisa aí, mas no final das contas o tiro pode sair pela culatra. Quando o usuário se defronta com tal quantidade de informação sem semelhança, ele pode desistir de começar a ver o que significa e simplesmente ir embora.

Não vou nem comentar o layout horrível! Combinação de quatro cores de matizes opostos. É um absurdo!

Comente este post

Ah, já sei! Ela deve estar rindo do fato de que eu tive que trocar de navegador porque a Fiat não considera o Opera 8 um navegador moderno. Pior, depois disso, ainda tive que passar por mais duas páginas pra selecionar o estado e a cidade onde moro. Tudo para ver uma homepage que nada tem a ver com a região onde moro. Era melhor fazer essa pergunta somente quando o usuário vai entrar numa seção com preços, o principal afetado pela diferença entre regiões.

A foto da modelo está ruim porque não está visualmente conectada com nada. O olhar de uma pessoa numa foto em geral causa o impulso de procurar o que essa pessoa está olhando. É a mesma curiosidade que nos faz olhar pro alto quando estamos passando na rua e alguém está olhando pra cima. É instintivo. No site da Fiat, entretanto, essa é apenas uma das fotos que aparecem naquele lugar. Cada vez que atualiza o site ela muda e as outras são melhores.

Comente este post

Uma falta de consistêncicia desse tipo não chega a prejudicar a eficácia do site, mas com certeza, compromete sua comunicabilidade. O usuário já sente de cara que o site não tem um discurso consistente. Navegando pelo site, você percebe que essa inconsistência permeia toda a experiência. Lamentável.

Comente este post

Comente este post

E não é só gente pequena que comete esse erro. O antigo site da Coca Cola Light, feito pela Agência Click, apresenta o mesmo problema e pior, o menu fica girando sem parar. O site ganhou tanto prêmio de criatividade que, infelizmente, teve que sair do ar.

Comente este post

Comente este post