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

Quicou uma bola nova no campo e os futebolistas de plantão correm como loucos pra ver quem será o primeiro a chutá-la. E chuta pra cá e chuta pra lá, não querem nem saber se é de basquete ou pingue-pongue, o negócio é experimentar. De vez em quando, de tão afoitos, chutam na torcida. O gol fica lá, criando teia.

A torcida vaia, mas eles não ouvem. Perguntar se eles estão gostando? "Imagina, claro que estão! Se eu estou gostando, eles também estão," dizem para si mesmos os jogadores.

Bizarro?

Foi mais ou menos assim que começou o futebol, mais de um século atrás. O mercado Web está começando agora, mas ao invés de aprender com o passado, só quer saber do futuro.

Volta e meia, começa uma nova onda tecnológica e surgem fóruns, sites, livros e etc. Ou você vai atrás, ou é considerado atrasado. Estou escrevendo esse post porque fui pressionado pelos meus leitores: "e aí, não vai comentar o tal de Ajax?"

A última é a onda que ainda não atingiu o apogeu no Brasil é o tableless, que conta inclusive com uma tendência de design, já comentada aqui antes. Se continuar como sempre, seguindo os estadunidenses com dois anos de atraso, o Ajax deve bombar no Brasil só depois de 2007, quando os estadunidenses já tiverem descobrido que o Ajax também tem suas desvantagens e não só vantagens, como vêem agora. Então, devemos ter um Ajax maduro aqui lá por 2009.

Não precisamos esperar tanto. Se desde o início, formos críticos diante de tecnologias como o Ajax, estaremos inclusive na frente dos estadunidenses que, pelo fato de serem os criadores dessas tecnologias, ficam ainda mais enfeitiçados.

A Isabel já falou sobre as vantagens que o Ajax pode trazer para a usabilidade de um website, porém, como tudo na vida, sempre há as contra-indicações.

Todos os problemas do Ajax decorrem do fato de que páginas são páginas, não ambientes de desenvolvimento. Navegadores não foram feitos para rodar aplicações, muito menos para debugá-las. Javascript é uma linguagem feita às pressas e é interpretada diferentemente por cada navegador. Usuários estão acostumados a navegar por páginas dentro de um navegador e não se sentem muito à vontade para operar uma aplicação ali dentro.

Vejamos alguns exemplos de novidades com Ajax. Detalhe importante: meu navegador é o Opera 8, o navegador mais inovador do mercado. Se Ajax é moderno, então tem que funcionar nele.

Tabtastic é um experimento de abas dinâmicas, que mudam seu conteúdo sem carregar novas páginas. É como se ao clicar num item de menu, a nova página abrisse instantaneamente.

Vantagem: não precisa esperar carregar uma nova página

Desvantagens:

• botão voltar do navegador não funciona
• posição de rolagem inconsistente em cada página, causando desorientação

Yahoo Mindset é uma busca que permite ordernar os resultados de acordo com seu objetivo: comprar ou pesquisar. Claro que o usuário pode ter muito mais objetivos do que esses dois, mas trata-se apenas de um experimento do laboratório do Yahoo que pesquisa como ensinar algoritmos a serem mais inteligentes.

Vantagem: o usuário pode filtrar o que interessa mais rapidamente do que se tivesse que refinar a busca ou passar de página em página

Desvantagens:

• a bolinha de controle não pode ser arrastada como em outros controles deslizantes (sliders) só porque os desenvolvedores acharam melhor usar uma animação suavizando o movimento (e mostrando como eles são bons nisso)
• no screenshot fiz uma busca pelo último nome do compositor clássico Bach e defini que meu objetivo é pesquisa e ainda assim aparecem os links patrocinados que tentam me vender algo
• se escolho meu objetivo antes de começar uma nova busca (uma ação bastante lógica), o marcador volta pro meio

Já me peguei diversas vezes no Google digitando uma palavra-chave e só depois clicando na aba de busca por imagens. Antigamente, na nova página que abria não constava o que já tinha digitado, agora pelo menos o termo continua. No Yahoo quando se clica na aba, ela muda instantaneamente.

Vantagens:

• a mudança drástica de cor avisa o usuário que algo aconteceu depois que ele clicou na aba, pois ele esperava que abrisse uma nova página
• permite que o usuário acesse

Desvantagens:

• links levam à novas páginas, botões realizam ações instantâneas. Esse problema seria resolvido se as abas tivessem relevo e fossem ativadas só passando o mouse por cima, como faz o portal Verdes Mares

No Yahoo News, ao clicar num hiperlink no corpo do texto, abre-se imediatamente uma caixa dentro do próprio texto que retorna notícias que contenham a palavra hiperlinkada. Na captura acima, cliquei no hiperlink CIA. Depois dessa tela, apareceram os resultados:

Vantagens

• não sai do contexto
• o usuário pode criticar a funcionalidade clicando em "Got feedback?"
• permite fazer busca por imagens ou pela Web

Desvantagens

• surprende o usuário acostumado a clicar em links e ir pra outras páginas, podendo causar desorientação
• difícil voltar ao estado anterior ao clique
• não tem uma borda em volta delimitando o que faz parte da busca e o que é a continuação da matéria
• nem sempre os resultados da busca são relevantes

Neste blog, coloquei na busca um script que faz sugestões de termos, de forma parecida com o Google Suggest. Os termos que são sugeridos são as palavras-chave dos posts definidas pelo autor e pelos leitores (veja no fim do post).

Vantagens:

• previne o usuário contra erros de digitação e informa os termos preferidos antes mesmo dele buscar
• economiza digitar

Desvantagens:

• não permite usar as setas pra cima e pra baixo do teclado, como outros campos com intellisense do navegador (o nome desse padrão)
• retorna uma lista de itens com baixa relevância quando o número de letras é pequeno
• não faz sugestões de termos com duas palavras

Alguns amigos abandonaram o Outlook para usar o Gmail porque ele é mais rápido e prático de usar. Em geral aplicações Web são mais lentas que de desktop, mas realmente não é o caso do Gmail. Uso o Gmail só para receber as listas de email e funciona extremamente bem, melhor do que num cliente de email desktop. Porém, ainda prefiro o Thunderbird para gerenciar minhas contas principais.

Vantagens

• maior velocidade de carregamento
• funcionalidades que agilizam a manipulação dos emails

Desvantagens

• não funcionava no Opera até alguns meses atrás
• demora mais pra carregar no início

Na imagem acima, vemos fotos tirada por satélite da cidade de São Paulo e mostradas pelo Google Maps. Você digita o endereço e ele mostra o local, seja num mapa, seja na foto.

Vantagens

• permite navegação fluida, sem sair da tela
• permite salvar as imagens do mapa

Desvantagens

• demora muito para atualizar uma tela nova
• mensagens de erro que não avisam se a localidade não está disponível no sistema

Mais exemplos de Ajax, você encontra no Ajax Patterns.

Conclusão

O que todos esses exemplos tem em comum? Todos tentam melhorar a experiência do usuário diminuindo o tempo de resposta do sistema. Clicou, abriu. Alguns deles abre sem nem precisar clicar. O problema é que o usuário está acostumado a esperar pelo carregamento de uma nova página a cada vez que dá um clique. Então, se não houver uma dica visual de que algo está acontecendo ou já aconteceu, a resposta pode passar desapercebida e o usuário pode ficar se perguntando porque nada aconteceu. Luke Wroblewski dá algumas dicas de como fazer isso.

E o Flash? Onde entra nessa história toda? Bem, até antes de surgir o Ajax, o Flash era a ferramenta mais indicada para dar esse tempo de resposta instantâneo. Porém, com Ajax não dá pra fazer tudo que o Flash faz. Em 2003, escrevi um artigo pro Webinsider anunciando as Rich Internet Applications e levantei algumas vantagens que serão usadas na tabela comparativa abaixo:

Vantagens pro usuário

Vantagens pro desenvolvedor

E então Ajax vai ou não vai desinfetar o Flash? Não já já, mas se a Adobe bobear, é possível. A grande vantagem do Ajax é que ele atende aos padrões da W3C e, consequentemente, oferece maior acessibilidade e indexabilidade do que o Flash. A grande desvantagem a meu ver, é a falta de ferramentas de produção como tem o Flash, mas isso é uma questão de tempo para surgir.

Porém, mesmo que o Ajax vença o Flash na disputa pelas Rich Internet Applications, este não vai desaparecer. No seu nicho original, experiências multimídia na Web, ele ainda é imbatível.

Livros

Comente este post

Thais Mattoso abriu o tópico:

A I-group (http://www.i-group.com.br), recentemente se tornou uma agência de marketing digital da Macromedia aqui em São Paulo.

(...)

Eu já tive a oportunidade de trabalhar com essa tecnologia, fazendo um anteprojeto visando a reestruturação de um "carrinho de compras" de um site de e-commerce e achei muito legal. O grande lance agora, é nos especializarmos e divulgarmos isso entre nossos clientes deixando claro de que o flash deixou de ser algo estético para se tornar muito funcional. No site Macrocenter vcs irão encontrar detalhes sobre essa
tecnologia, alguns cases interessantes e cursos de formação na área.

Irapuan Martinez criticou:

Dizem que o Flash é rico. Seria o conteúdo em HTML pobre?

Flash tem essa característica: Você está restrito ao que o desenvolvedor criou. Se os links abrem na janela corrente ou em novas janelas, não está na mão controlar isso, quem controla é o web designer. Deep links? Selecionar textos? Bookmarkear uma página? Zoom font? Chavear estilos? Boormarklets? Barras de rolagens movidas ao scrollwheel do mouse? Conteúdo acessível a qualquer resolução de vídeo? Style media types? Separação de informação da formatação? Acessiiblidade? Indexabilidade?

Nada disso é suportado - salvo se o desenvolvedor do Flash gastou horas de produção desenvolvendo estas interações. No HTML, essas coisas podem ser consideradas inerentes ao formato.

Oh, claro, o HTML não tem texto voando, intermináveis transições e nem som. Dado o tempo que isso nos despediça, abençoado HTML.

Diante de tantas restrições que o Flash imputa ao usuário, ele merece ser chamado de "rico"?

Restrict Internet Applications, isso sim.

Eu apoiei

Flash é útil, mas não da forma como está sendo divulgada pelo
Macrocenter. Estão vendendo RIA como se fosse o santo graal da Web, que pudesse como num passe de mágicas enriquecer a experiência do usuário. Nenhuma tecnologia pode fazer isso, quem faz isso é quem proporciona a experiência, ou seja, a equipe de design do produto.

(...)

Se vocês entrarem num dos cases recomendados pelo Macrocenter, a loja virtual www.penatrilha.com.br, notarão algumas falhas que, provavelmente, passaram desapercebidas aos desenvolvedores, que foram até bem cuidadosos.

Será que valeu à pena perder a capacidade de um produto ser encontrado à partir de um buscador como o Google? Ou tratar mal usuários que possuem computadores desprovidos de placas aceleradoras 3D? Ou, bem, acho que vocês entenderam que esse não é o tipo de case que gosto de mostrar.

Amazon é uma excelente loja virtual sem Flash, ou melhor, agora estão usando Flash para exibir vídeos com merchandising subliminar, uma tacada de mestre, na minha opinião.

O segredo do Flash é usá-lo apenas para aquilo que só ele pode fazer. Site institucional em Flash não recomendo nem mesmo para o site do Macrocenter (o site da Macromedia, por exemplo, não é 100% Flash).

Maycom Souza defendeu:

De fato, é inegável que existe uma certa curva de aprendizado para se conseguir trabalhar em Flash programável e tudo mais. Penamos muito ara aprender e só agora estamos começando a dominar o processo de produção.

Por outro lado, a diferença de resultados entre um site normal e um site em RIA foi algo que eu só acreditei depois de ler e reler os relatórios dos clientes diversas vezes. Estamos falando de aumentos de 200, 300% nas vendas; de diminuição imensa no abandono de carrinhos de compra e de um usuário muito mais "preso" à navegação.

Daniel A. Gartner apoiou Maycom

É isso aí Maycon. Foco no resultado, e não na aplicação.

A empresa X pode até ter usado somente uma minoria do que o RIA pode proporcionar, mas se este pouco já fez diferença no negócio do cliente, então valeu a pena.

E mais, daqui pra frente a banda larga é caminho que as empresas estão trilhando. Ficar pensando como desenvolvedor de 56k, é no mínimo ficar míope para os avanços que a internet está proporcionando.

Caio Cesar corrigiu

Não; meus caros. o foco não é no resultado e nem na aplicação. o foco é no usuário. lembra dele? é ele quem usa a aplicação para executar um processo, visando um certo objetivo. o foco, portanto, deve ser ele. ponto final.

Não é uma caça às bruxas, há espaço a todos os formatos e todas as soluções, desde que, claro, bem aplicadas.

Irapuan Martinez retrucou:

Mas reduzir a burocracia da compra não é virtude do Flash, mas da usabilidade. Se pegar uma loja virtual "em HTML" e reduzir as etapas (promovendo a usabilidade), irá reduzir o abandono do carrinho também.

A Amazon patenteou um recurso de "compra em apenas um clique". Quer mais usabilidade que isto?

Falando nela, posso ir na Amazon e pegar uma URL precisa de um determinado produto e publicar em algum lugar, citar numa lista de discussão, repassar por mensagem instantânea. Flash, não tem como.

Salvo, claro, se o desenvolvedor se matou em alguns dias a mais de produção, tentanto imitar no Flash o que o HTML já tem embutido.

Tentar fazer o Flash usável e acessível é tentá-lo aproximar da experiência do HTML. Daí pergunto: Pra quê Flash então?

Ricardo Almeida defendeu o Flash

Nós já testamos o conceito enquanto empresa de planejamento Web, já colhemos os resultados e já fizemos as mais diversas análises - e se tem uma coisa que ninguém pode contestar é um relatório de retorno financeiro. Que, aliás, foi surpreendentemente alto. Somando isso a índices de satisfação de usuário altíssimos e a feedbacks sempre positivos, o que mais se pode esperar/desejar?

Irapuan Martinez manteve sua posição:

Flash, assim como banners, agrada olhos novatos. Com o tempo, começa a gerar resistência. Ninguém mais tem paciência para "Eye4U", por mais deslumbrados que ficamos quando acessamos a primeira vez.

Gabocorp relançou seu site dia desses. O pioneiro no Flash vez um trabalho que considerei lastimável. Flash cria resistência.

RIA quer provar que o Flash pode ser usado em e-comm e multimídia. Mas eles ainda não resolveram os diversos problemas que o player ainda tem hoje em dia. Então, aonde está a novidade?

Eu apoiei:

Exatamente. Se começarmos a exaltar tecnologias que trazem retorno a curto prazo sem segurança do retorno a médio e longo prazo, podemos cair numa nova bolha. Números como aumento de 300% nas vendas, assim, de uma hora pra outra, costumam sinalizar uma queda vindoura.

Precisamos de análises a médio e longo prazo. O case do Broadmoor Hotel já é bem antigo e pelo que li parece que deu certo. Considero uma RIA muito bem feita.

Ricardo Almeida concordou:

Serei bem franco: é claro que não existe nenhum caso que sustente crescimentos mensais de 200, 300%. Se fosse assim, a empresa dominaria o mundo em um punhado de anos! Mas eu tb tenho acompanhado o caso de alguns clientes que se estabilizaram em patamares muito altos. Não é pela tecnologia, é pela facilidade e experiência que proporciona aos usuários.

Agora, o fato de trazerem um retorno grande a curto prazo, obviamente, não significa que elas trarão prejuízo a médio prazo. Novamente, entra aí o planejamento e a gestão com base em métricas. que é importante para qualquer tipo de projeto, seja RIA ou não...

e Fernando Salvi fechou com classe:

Visitei hoje o penatrilha.com.br tendo em mente a discussão aqui na lista (muito boa, diga-se de passagem) e tô achando muito interessante os aspectos levantados por todos até agora...

Antes de mais nada, minha opinião se baseia exclusivamente na observação e uma avaliação heurística muito simples, digamos: "informal"...

Entendo que o uso de RIA tem potencial, mas não necessariamente, por si só, melhora a experiência do usuário. Acho que todos que comentaram aqui tmb pensam
assim. Independente da tecnologia (fugindo de "discussões religiosas", como citou o Ricardo), é preciso fazer o "arroz com feijão" muito bem feito pra se obter resultados excepcionais. "Arroz com feijão" leia-se: análise estratégica, focus groups, AI, análise de tarefas, protótipos, testes de usabilidade e mais um monte de técnicas e ferramentas usadas no projeto como um todo. E, acima de tudo, foco no usuário.

Bom, por que não então examinarmos o site como uma experiência online, deixando de lado o fato de ser uma RIA ou não? Seguem aí minhas singelas observações:

1) Busca: busquei por "calça". Tive que clicar no botão OK pois o enter não funcionou. Nos resultados, nenhum produto encontrado, mesmo apesar de existir até uma subcategoria "Calças" dentro do menu "Vestuário". Tentei novamente, agora sem cedilha (calca) e finalmente encontrei 63 produtos, entre eles: meias, tênis, sandálias, mochilas e bonés. Ah, sim, e algumas calças também.

- Possível problema: o cliente não encontra o que procura e deixa de comprar determinado produto.
- Possível benefício caso o problema fosse resolvido: aumento de vendas e faturamento.
- Complexidade para a solução do problema: mínima.

2) Ao visualizar um produto, não existe nele um link para a categoria na qual está localizado, impedindo que eu veja produtos similares.

- Possível problema: o cliente pode achar que não existem mais produtos como
aquele que ele está vendo.
- Possível benefício caso o problema fosse resolvido: aumento do faturamento (e
até mesmo aumento de ticket médio)
- Complexidade para a solução do problema: mínima

3) Na lista de produtos, não é exibido o nome do produto em si (ex: calça) e sim apenas o nome do fabricante e o modelo (ex: Solo Moment). Isso exige que o usuário clique em produto por produto para saber mais detalhes. E quando abre a janela de detalhes, essa informação existe mas fica escondida. Um exemplo: na seção de jaquetas: "abrigo de chuva", "parka" e "jaqueta" são fisicamente muito parecidos e inclusive exibidos na mesma categoria. Entretanto, cada produto desses podem ter aplicações muito diferentes (neve, frio, chuva, etc). Se o usuário procura por uma parka, então deve clicar em um por um dos produtos pra saber o que é cada um.

- Possível problema: irritação do cliente causado pela sobrecarga de cliques e vai-e-volta; cliente pode não encontrar o produto apesar de ele existir
- Possível benefício caso o problema fosse resolvido: aumento nas vendas e
satisfação do cliente.
- Complexidade para a solução do problema: mínima

4) O link para "próxima página" quando são exibidos mais de 15 resultados está localizado numa posição não convencional (acima, à direita), mas isso, claro, não quer dizer que não poderia estar lá. Entretanto, soma-se a esse detalhe o
fato dos botão que levam para as outras páginas (1, 2, 3, etc) são bem pequenos e de pouco contraste. Possível problema: pode-se perder clientes e vendas pois alguns usuários não perceberam que haviam mais produtos em outras páginas. Só por curiosidade, pedi pra duas pessoas entrarem na mesma página e de cara os dois tiveram o mesmo comportamento que eu: moveram o mouse até a parte de baixo da tela, onde supostamente deveria o link para outras páginas se houvesse. Na dúvida, clicaram em Back do browser. Nessa, volta-se ao "Loading..." da home e começa tudo de novo.

- Possível problema: abandono do site causado pelo Back; cliente pode achar que
loja não tem variedade e pode deixar de comprar produtos
- Possível benefício caso o problema fosse resolvido: aumento nas vendas,
satisfação do cliente e taxa de conversão.
- Complexidade para a solução do problema: mínima

5) "Cadastre-se": se eu bem entendi, posso me cadastrar para receber informações por e-mail (possivelmente lançamentos, promoções, etc). Entretanto, não tenho idéia do teor dos emails e da freqüência com que o site deve enviá-los portanto evito preencher com medo de receber mais spam. E, se
decidisse preencher, por que teria que informar RG e CPF? No meu ponto de vista, a única exigência desses dados seria se fizesse meu cadastro como cliente que vai efetivamente comprar pelo site (inclusive definindo senha de acesso e tal), mas esse cadastro não me pareceu ser o caso.

6) Processo de compra/pagamento: aqui esperava encontrar um fluxo bem mais simplificado, se comparado com o existente em sites convencionais (aka HTML), mas sinceramente não vi nada de diferente, ou melhor, nada que não pudesse ser feito com HTML, etc. O número de telas e cliques me pareceu o mesmo (apesar de que não me cadastrei e não vi o processo até o fim; meu comentário aqui é bem questionável). Do que vi, algumas mensagens de erro também poderiam aliviar o usuário (parecem apenas dizer o erro mas não sugerem possíveis soluções). E o botão "Continuar comprando" em amarelo no topo é mais saliente que o "Finalizar" em cinza, na parte de baixo.

- Possível problema: abandono do carrinho; confusão na tela de login, irritação
com msgs de erro não eficientes
- Possível benefício caso o problema fosse resolvido: aumento nas vendas e taxa
de conversão.
- Complexidade para a solução do problema: mínima

Fora isso, pra ser só um pouco mais chato (rs): texto muito pequeno em locais críticos (campos de input no processo de compra, msgs de erro). E também não posso aumentá-lo via browser.

Outra coisa que acho relevante discutir aqui é o impacto da "falta de estado" que me parece inerente a RIA. Como explicar... Vejamos: a sensação que tive ao navegar pelo site é de que estive sempre na home desde a hora que entrei no site... Isso se deveu ao fato de clicar num link e não existir uma transição clara do que ocorreu ou da mudança de uma página para outra. Então fiquei, em certos momento, sem perceber se meu clique "funcionou" ou em que área do site eu estava. Me pareceu uma mudança de um padrão de interação com o qual estamos acostumados e não sei se isso é bom ou ruim. De qualquer forma, não tenho dados nem conhecimento sobre este fator na usabilidade e experiência do usuário em RIA. Aliás, alguém tem algum dado desse tipo por aí?

De tudo isso, concluo algo muito parecido com o que o Irapuan já postou aqui (Ira, corrija-me se estiver errado :o): muita atenção e esforço em cima da RIA não resolve e não resolverá questões de usabilidade, AI, e etc. Faltou um detalhe que está acima das camadas de apresentação, tecnologia, etc: o cliente/usuário. Entendo que a RIA só pode ser realmente rich com um alicerce sólido de UCD.

Podemos usar a tecnologia que for, do fabricante que for, com a linguagem que for. Mas de uma coisa não podemos escapar: teste, teste e reteste com os usuários. Vale em paper, html, site no ar, whatever... Teste. Sempre.

RIA não é UX. É mais um (dentre os vários caminhos possíveis) pra se oferecer uma ótima UX.

Comente este post

O Flash User Group São Paulo adiou a conclusão do ciclo de palestras Heavy para os dia 10 e 11 de novembro de noite. Eles marcaram anteriormente palestras nos sábados, mas a Macromedia esqueceu de avisar que nesse dia o servidor do Breeze entra em manutenção.

Na quarta-feira teremos palestras sobre Actionscript com Maxwell Dayvson, Neto Leal e Gabriel Laet. Na quinta, teremos mais Actionscript com o Laet e em seguida, minha palestra intitulada A Vocação do Flash: Ria, Hotsites e Infográficos, cujo resumo segue abaixo:

Para quê o Flash realmente serve? Para trazer maior usabilidade para aplicações, mais emoção para a publicidade e ensinar conceitos complexos através da hipermídia. Isso é o que ele faz de melhor e sem concorrência. Usá-lo para substituir HTML e criar introduções animadas é desperdício e equívoco. Entenda os prós e contras do Flash e os conceitos que ele permite por em prática.

Quem não puder estar online no momento da palestra, fique frio. Elas serão gravadas do mesmo jeito que essa palestra sobre Flash na publicidade online, do Fabiano Cruz. Outras palestras gravadas, vejam no site deles.

Comente este post

O mais fantástico é o esforço para criar uma experiência sensitiva rica usando belas imagens e textos adjetivados.Sou um cara completamente anti-vaidade, mas tenho a certeza de quem gosta disso vai se sentir muito próximo do produto. Talvez até mais do que com ele na mão numa loja real.

Eles tem até a coragem de vender uma colônia personalizada através de um meio completamente inodoro. Primeiro, eles fazem algumas perguntas com relação ao estilo e uso pretendido. Depois é que começa o show. Você passa por várias telas de imagens que descrevem os seu tipo psicológico. Você escolhe as imagens que mais se atrai. Numa tela, por exemplo, você pode escolher entre:

• Oceano agitado (onda quebrando)
• Desabrochar da manhã (flores)
• Madeiras suaves (bosque de outono)

Porém, às vezes a magia se quebra. Toda a sensação de controle que você tem por estar fazendo um shampoo personalizado vai por água abaixo se você não quizer responder um formulário com 30 drop-downs sobre seu tipo de cabelo. No total, são pelo menos 60 cliques. Eu disse 60 cliques?! Meu Deus!

Se tirassem os drop-downs e colocassem uns radio-buttons, esse recorde digno do Guiness cairia pela metade. Se construíssem uma Rich Internet Applications, chuto que poderia ser reduzido a uns 5 cliques, caso fosse usado o pattern de afunilamento interativo (interactive narrowing). Basicamente, a interface vai fazendo perguntas cada vez mais específicas e as opções são determinadas pelas escolhas já feitas.

Feito em Flash, a interface poderia ser mais visual tal como o simulador de tinturas pra cabelo da Seda. O tamanho de algumas telas (que chega a 200 Kb) poderia ser reduzido pela metade. As transições e os preloaders diminuiriam a taxa de abandono, caso fossem usados para distorcer a noção de tempo.

Se você não clicou em nenhum link acima, pode estar pensando: "ué, pensei que tinha sido no Flash mesmo..." Não... foi feito todo em Javascript. Na realidade sem Javascript você não faz nada lá. Nem os links normais funcionam.

Comente este post

Só para começar, você é obrigado a ver uma introdução que dura minutos explicando como usar a bagaça. Existe uma opção de pular, mas ela está tão escondida que aposto como poucos vão usar. Instruções de navegação só são aceitáveis se forem muito breves e se aterem a explicar a metáfora de navegação. No caso do site das cortes, parece que os designers pensa que todo usuário é igual ao Seu Batista, da escolinha do professor, que não entendia nada se não fosse "tudo explicadinho, nos mínimos detalhes" (era ele quem falava isso né, gente?).

Mais uma lição de usabilidade: projetar pensando no usuário não significa partir do princípio de que os usuários são burros e precisam de ajuda. Pelo contrário, quando uma interface precisa ser explicada, ela é que é burra. Interface boa é auto-explicativa, ou quase. Na Web, mais ainda.

Anota aí: quando você sentir necessidade de colocar alguma ajuda de como interagir com algo, tente refazer seu trabalho, algo deve estar errado. No caso do site das cortes o problema foi o seguinte: na tentativa de criar uma "experiência engajante", os designers resolveram quebrar com o máximo possível de padrões das interfaces que estamos acostumados. Apesar de fazer isso em certa medida incentive a exploração, o tiro sai pela culatra se o comportamento dos objetos for diferente do esperado pelos usuários. O botão verde, por exemplo está grafado como um botão Play [ > ], mas na verdade seu comportamento é de "Fast-forward" [ >> ].

Não tenho certeza se os designers tentaram conscientemente usar a metáfora de televisão/vídeo K7 nesse site. O fato é que os botões do lado direito e a foto no centro, com certeza remetem à isso. Agora ela não é consistente, porque lá em cima há uma penca de botões que não tem nada a ver com a metáfora, fora o formato redondo. Por isso, no final das contas o usuário não se beneficia de uma metáfora coesa que abraça a interface.

Se a Macromedia continuar a vender RIA desse jeito, vai acabar por perder mercado, porque elas vão falhar do mesmo jeito e até pior que as versões em HTML. Aliás, até que a versão em HTML do site das cortes não é tão ruim assim né? Pelo menos é mais rápida.

Comente este post

• contrastes suficientes para criar um clima, não dói o olho
• sem imagens inúteis
• textos curtos e em fonte grande
• iconografia muito precisa e com personalidade
• identidade visual consistente ao longo das páginas
• navegação visual (através de imagens hiperlinkadas)

Agora a parte que mais nos interessa: eles tem uma versão em RIA, feita em Java. Se fosse Flash, poderia ter evitado de travar minha máquina e provavelmente o download seria muito menor, mas talvez assim seja mais fácil de encontrar programadores habilitados.

A interface da aplicação não desanima. É ainda mais visual que o website e pode ser facilmente operada por uma criança ávida por leitura. Tem um modo de leitura que eu achei particularmente instigante, o modo de espiral, veja nesse adorável livro árabe.

Só fico com um certo receio da saúde ocular das crianças do futuro próximo... precisamos de monitores melhores urgente! E de preferência em laptops.

Comente este post

Note que o cara que identificou esse pattern especificou o problema que ela resolve, quando usar, como fazer, porquê e ilustrou com belos exemplos. Webdesigner que se preze tem que reservar um tempinho vago e dar uma olhada em simplesmente todos os patterns de webdesign identificados pelo Martijn van Welie. Quem ainda não está de inglês afiado, se manifeste que montamos uma força-tarefa para traduzir tudo e quem sabe, identificar novos patterns.

Outro conjunto de patterns bem interessante é o da Jenifer Tidwell. Os delas se referem a softwares, mas todos esses conceitos podem ser adaptados para interfaces de websites e aplicativos web. Material valiosíssimo para constituir o framework de soluções de um design de interface. Aliás, gostaria de ter isso impresso para consultar mais facilmente. Alguém já viu algum livro que tem isso?

Comente este post

O Flash, como disse numa entrevista para o Comunique-se, está forçando uma evolução mais rápida das interfaces gráficas, por facilitar e muito a experimentação. Antes dele surgir, para criar interfaces mais avançadas, era preciso manjar de Director, ou senão Delphi, Visual Basic e similares. Agora, qualquer fuçador consegue mexer nele e fazer coisas impressionantes.

Comente este post

Anteriormente, esse louco por Flash havia participado de um experimento em que era possível dirigir um carrinho de controle remoto através de Flash Communicator lá no Japão (eu testei e funcionou).

Comente este post

Livros indicados

Se você está procurando um bom guia para tornar seu cabelo mais atraente, veja esses livros:

Comente este post

Para Palm, existem ainda algumas soluções não-oficiais, mas que podem servir em casos urgentes. Porém, acredito que ele deve ocupar espaço grande demais no aparelho. Essas máquinas costumam ter de 8 a 64MB de memória, cada mega é precioso. Por isso, às vezes um simples XHTML pode ser uma solução ao alcance de qualquer webdesigner. Quem usa Palm, em geral, instala alguma navegador de HTML.

Quem quiser saber mais sobre Flash fora do PC, tem um livro legal que eu resenhei, mas que já tá defasado (2002).

Comente este post

Comente este post

Comente este post

É uma prova de que usabilidade não significa website feio. Ele é bonito, atrativo e extremamente funcional. A começar pelo aproveitamento de streaming (fluxo de dados - mostrar conteúdo na medida em que carrega) e a velocidade de download. Estava numa conexão discada e ele foi tão ou mais rápido do que um website similar usando HTML. A versão do Flash que ele pede é a 5, a mesma que eu uso nos meus projetos. A execução técnica é tão perfeita que estou até mais receptivo com relação ao uso de frames.

Fora o aspecto técnico, eles exploraram bem a vantagem visual do Flash e há imagens estouradas de fundo, textos curtos e até um (pasme) infográfico interativo na seção About Amstel > Pouring Tips. Na história da cerveja, tem pseudo-vídeos com a técnica de recorte de imagens, pouco conhecida e muito interessante. O menu tem uma leve mudança de cor imperceptível ao olhar desavisado, mas com uma influência terrível sobre a motivação do usuário em clicar mais.

Comente este post