Category Archive

Usabilidade, páginas leves, direção de arte, arquitetura de informação… tudo isso é importante, claro, mas nada se comprara à relevância de um site ou serviço web.

Estão aí os net-banks que não me deixam mentir. São feios, pesados, confusos…e todo mundo acessa. Quer outro exemplo? Orkut. Feio, lento, dá pau direto e tá todo mundo lá. Relevância é a chave da questão e isso me parece mais do que óbvio há alguns bons anos. Quebre a cabeça até encontrar algo relevante. Depois, tente deixar a coisa o mais “usável”  e bonita que puder. O caminho inverso costuma ser desastroso.

Abri meu e-mail hoje e encontrei uma mensagem recomendando o populy.com. Trata-se de mais um site buscando espaço junto a redes sociais. O problema é esse. O populy.com é… mais um.

A seguir, os “diferenciais” (usei o próprio texto disponível no site) comentados:

* Envie seus vídeos preferidos
No populy é possível enviar vídeos, disponibilizar eles para seus amigos e ainda criar uma seleção dos melhores vídeos postados.

[comentário] Acho que vai ser difícil competir com o YouTube.

* Mais 100 de fotos no perfil
Esqueça as famosas montagens de fotos por falta de espaço, aqui há espaço de sobra para postar fotos em alta resolução e no tamanho que desejar.

[comentário] Alguém vai abandonar o Flickr/Fotolog e migrar pra lá?

* Perfil com cores personalizadas
Aqui o usuário escolhe a cor que deseja para seu perfil.

[comentário] Cores personalizadas? Ah, tá…

* Privacidade total no perfil
Só o populy tem um exclusivo filtro anti-curiosos onde os dados confidenciais são guardados a sete chaves com permissões definidas pelo dono do perfil.

[comentário] Essa é a melhor! Privacidade (relativa, ok) há em qualquer lugar…. Basta não colocar o que você não quer que os outros saibam, oras! =D

* Bate papo
Converse e conheça novas pessoas, ou reúna os amigos que estão online em salas temáticas, usando a foto do perfil.

[comentário] Quem gosta de chat vai no UOL, oras! E, além disso, tem os MSNs, Gtalks e Skypes da vida.

* Crie seu blog
Exponha suas idéias para o mundo inteiro! Aqui no populy é possível criar um blog escolhendo os templates, posts e tudo mais.

[comentário] Blogger, WordPress, Uol Blog… isso tá me cansando já.

* Busca inteligente por dados
Encontre quem quiser onde quiser! Com a busca do Populy, você pode encontrar pessoas por qualquer informação da escola que estudo ao time do coração.

[comentário] Não. Você encontra só quem estiver lá dentro. O que determina o sucesso de qualquer rede social não são as features. É quem está lá.

* Sem propaganda
Navegue tranquilo sem propagandas indesejadas.

[comentário] Propaganda é sempre chata, mas não chega a incomodar tanto se o conteúdo for relevante. Não parece ser o caso aqui.

Tags: orkut, populy, redes sociais, relevancia, web2.0

O Quintura (www.quintura.com) é uma ferramenta de buscas que sugere tags relacionadas ao termo que você está buscando.

Além de divertido, é bem útil por sugerir termos que talvez não lhe ocorressem. Recomendo.

Tags: buscas, tag cloud, tags, web2.0

Colocamos no ar (em versão beta) o DicaSP. Trata-se de um serviço desenvolvido pela iDeal junto com a revista Veja SP e que possibilita, usando o BD da revista, a criação de listas de lugares na cidade de São Paulo.

Essas listas ficam públicas para consulta e é possível colecionar listas de outras pessoas numa espécie de “favoritos”. O projeto parte do princípio de que, se você e outra pessoa freqüentam o mesmo lugar, você possivelmente encontrará outros lugares de que goste na lista dessa pessoa.

A inspiração foi o Del.icio.us, mas acho que tá ficando bem interessante e, à medida em que as participações aumentarem ;-D, creio que a ferramenta se tornará bem relevante pra quem mora em sampa e gosta de sair de casa.

É bom esclarecer que antes mesmo dessa primeira versão ir ao ar, já tínhamos (temos) uma lista grande de alterações em desenvolvimento. Entretanto, acreditamos (e nisso agradecemos muito ao cliente, pela coragem e senso prático) que é melhor colocar logo no ar pra sentir a reação das pessoas do que passar meses desenvolvendo a “versão final”
do projeto.

Bem, o convite tá feito: http://www.dicasp.com.br.

Tags: dicasp, ideal, veja, web2.0

O Poupa Tempo (não me refiro ao site e sim ao mundo real) é um um case de de Web 2.0! Tô falando sério. Olha só:

Recentemente precisei do recibo do IPVA 2006 e descobri que não tinha o documento. Um amigo, sabendo que eu tinha uma reunião em Santo Amaro, me recomendou o Poupa Tempo de lá. Cheio de receio, resolvi encarar a parada e tive uma experiência fantástica. O negócio funciona bem pacas. Tudo rápido, fácil… perfeito. Enquanto estava lá, me vieram à mente essas infindáveis discussões sobre nossa amiga Web 2.0 e comecei a traçar alguns paralelos. A seguir, minhas divagações:

Ponto 1: Relevância. Aplicações e serviços com foco no usuário

Você foi assaltado, roubado, ou, como eu, é um desastre ao administrar sua vida pessoal e perdeu o recibo do IPVA 2006? Não importa. O Poupa Tempo está lá pra permitir que você se torne novamente um cidadão sem ter de passar pela burocracia infernal d´outros tempos. Tudo lá é prático, funciona mesmo.

Ponto 2: Usabilidade

Ao chegar à porta do Poupa Tempo, uma moça simpática me abordou:

- Boa tarde, o que o sr. procura?

- Preciso do recibo do meu IPVA 2006.

- Pois não. Basta seguir a faixa verde.

Olhei pro chão e vi várias faixas de cores diferentes que seguiam pelo chão do enorme galpão. Fui andando, sempre seguindo a faixa verde. Uma curva, duas, três, levantei os olhos do chão e havia uma mesa com um senhor bonachão sentado nela.

- Preciso do recibo do IPVA 2006.

- Pois não, senhor, é aqui mesmo.

Não me contive. Bati palmas, juro. Sensacional.

Ponto 3: Arquitetura de informação

São inúmeros serviços sendo prestados num mesmo local. Humanamente impossível alguém ser capaz de informar aos outros sobre tudo. O que eles fizeram? Dividiram em setores. Por exemplo, qualquer coisa relacionada a carros, fica num setor fisicamente separado. Há ali, pessoas que ajudam esclarecendo dúvidas sobre esse assunto específico. Se você quiser um CPF novo, é encaminhado a outro setor.

Ponto 4: Colaboração

Algo curioso acontece quando ajudamos outras pessoas. De alguma forma, nos sentimos bem e essa alegria é facilmente percebida por quem está ao redor.

As pessoas que vão ao Poupa Tempo o fazem por causa de algo que não foi agradável (roubo, assalto, perda…). Entretanto, os funcionários que lá trabalham, sentem-se bem em ajudar e, por isso, há um clima de boa vontade, de felicidade, que toma conta do ambiente. É contagiante a gentileza de todos ali.

Ponto 5: Agilidade

Em 15 minutos, entrei, pedi, paguei, peguei e saí. Precisei apenas do documento do carro. Não preenchi nenhum formulário. Não fui maltratado. Não fiquei em filas inúteis. Perfeito.

Semana que vem, tô pensando em perder meu RG.

Tags: ai, poupa tempo, usabilidade, web2.0

Tags: usabilidade

Flash é uma ferramenta sensacional, capaz de proporcionar experiências ímpares. Exatamente por isso, fico puto com o seu mau uso. O problema é que, pra muita gente, não há vida além do flash. E convenhamos, muitas vezes ele não é a melhor opção. Vou citar aqui 3 casos de uso de flash, um ruim e dois ótimos, na minha opinião, claro ;-)

1) www.alistanegra.com.br
Definitivamente, uma má escolha. O site se presta a conscientizar eleitores quanto ao comportamento dos políticos. Portanto, seria desejável que mecanismos de busca o encontrassem facilmente, já que muitos eleitores podem estar em busca desse tipo de informação. Acontece que Google, Yahoo! e companhia acham HTML de forma muito mais eficiente. Um outro ponto é que posso querer mandar para alguém a página com informações de determinado larápio dos cofres públicos. Se a coisa fosse em HTML, eu poderia simplesmente enviar a URL da página. Em flash, tenho que mandar o endereço do site e meu amigo terá de navegar pra encontrar o que quer.

2) www.leoburnett.ca
Sensacional! O site da agência gringa se justifica pela experiência que proporciona ao usuário. A navegação é anárquica e é fácil “se perder” entre os itens, ok, mas um site de agência de publicidade pode se dar ao luxo de ser menos cartesiano. Acho a execução primorosa e a experiência sensacional. Foda!

3) http://www.jonathanyuen.com
Site genial do designer Jonathan Yuen. O cara propõe uma navegação linear, um pouco incomum na web (e completamente oposta à do site da Leo Burnett), mas muito bacana. Basicamente, ele conduz o usuário através de um enredo recheado de estímulos aos sentidos. Bonito pacas e muito eficiente. Aula de bom gosto.

Tags: design, experiência, flash, navegação

Todo estudo de usabilidade aponta a ilegibilidade do texto como um dos problemas mais graves em websites.

Entenda-se por ilegibilidade:

• Fontes minúsculas
• Fontes artísticas usadas em textos
• Grandes blocos de texto sem formatação adeqüada
• Linhas enoooooormes (tipo, acima de 70 caracteres)
• Pouco contraste entre o texto e o fundo da página

Vejam bem, amigos, não se trata da minha opinião. Há pessoas que estudam isso. Profissionais sérios que fazem testes com usuários reais pra constatar essas coisas.

Usabilidade serve para favorecer as pessoas para quem nós projetamos sites: os usuários.

Mas então, por que não ouvi-los? Por que simplesmente ignorar o tempo e o trabalho de alguém que estudou a fundo determinado assunto?

Ora, quer saber? Guardadas as devidas proporções (lá vem neguinho me chamar de xiita), agir dessa forma é o mesmo que desprezar algo comprovado, como sei lá…  os benefícios de uma vacina ou um filtro solar.

Ora, colega, se você não concorda com algo, é justo que argumente e lute por suas idéias: estude, teste e prove o contrário. Mas, pelamordedeus, não ignore pura e simplemente.

A propósito, já tiveste caxumba, né, Camarão?

Tags: fontes, usabilidade

Dentre os websites que você usa diariamente e adora, tem algum que seja lindo?
Provavelmente não.

Isso te incomoda?
Provavelmente não.

Quantas vezes você voltou a um website simplesmente porque ele era bonito?
Eu arrisco: a menos que você seja um profissional da área, aposto que nunca.

Sabe por quê? Simplesmente porque, na real, usuário nenhum se importa com isso. Experimente fazer uma lista dos sites que você efetivamente usa e lhe são muito úteis. Me diga quantos deles são bonitos. Provavelmente nenhum.

Eis a minha lista (sem pensar muito): Google, Gmail, Del.icio.us, Flickr, Writely, No mínimo, Uol, YouTube, Orkut, Wasabi, Use it, Blue Bus, blogs diversos…
Nenhum deles pode ser considerado uma obra de arte, mas todos são bem relevantes pro que se propõe.

É isso. Relevância é a palavra. Na ordem de prioridades que definem o sucesso de um projeto online, arrisco um ranking:

1. Relevância e qualidade do conteúdo;
2. Usabilidade;
3. SEO (otimização pra sistemas de busca);
4. Agilidade de navegação (páginas leves, pelamordedeus);
5. Estética.

O fato da estética estar em quinto lugar não significa que ela não seja importante ou que deva ser deixada de lado. Apenas não me agrada que ela prejudique os outros quesitos.

Que fique claro: Isto não é um manifesto em favor das interfaces feias. É apenas um alerta a respeito da obsessão que algumas pessoas têm pela beleza de uma aplicação em detrimento de sua funcionalidade e relevância.

Resumindo: design e conteúdo precisam jogar no mesmo time!

Tags: Sem tags desta vez

Devido a problemas técnicos (meu computador morreu e deve reencarnar só lá pro fim da semana que vem) somados ao tempo escasso e à habitual preguiça, ando sumido dessas bandas.

Pra não deixar esse espaço abandonado, vou colocar aqui um check-list que montei devido aos vários testes de usabilidade que me têm aparecido nesses últimos tempos.

Antes de testar uma interface junto a usuários reais, é preciso fazer uma análise heurística do site para saber que pontos devem ser abordados no teste.

Fiz o check-list abaixo em 15 minutos e sem grandes pretensões estéticas, uma vez que ele será usado internamente e servirá apenas de guia.

Certamente haverá mudanças, mas acho que já dá pra começar a brincar.

Check-list para elaboração de Análise Heurística

1. Qual o perfil do público-alvo (idade, classe econômica, familiaridade com computadores e internet, interesses gerais e específicos)?
2. O que se pode concluir a partir da análise das métricas disponíveis (page-views, unique-visitors, caminhos feitos no site, taxas de conversão, etc)?
3. Faça um benchmark e identifique os erros e os acertos da concorrência.
4. Olhando a home-page consigo saber do que se trata o site?
5. Quais os plug-ins necessários para a visualização do site? No caso do site ser em flash, qual a versão utilizada?
6. Quais as principais tarefas a serem realizadas no site? Sua realização é fácil e intuitiva? Há muitos passos para sua realização?
7. Terminologia usada obedece aos padrões normalmente empregados?
8. Terminologia é adequada ao público-alvo?
9. Navegação (menus, sub-menus – vertical, horizontal) é intuitiva?
10. A arquitetura de informação faz sentido? Deve ser horizontal ou vertical?
11. Usuário consegue se localizar facilmente a partir de qualquer ponto do site?
12. Os títulos das páginas estão alinhados com os títulos dos links e menus?
13. Os títulos da janela estão escritos corretamente?
14. O peso das páginas condiz com a finalidade do site/público-alvo?
15. O código está bem escrito? (tableless, semântico, organizado…)
16. Todos os links e botões parecem clicáveis?
17. Há link para a home nas páginas internas? Além do link, logomarca nas páginas internas deve levar à home.
18. O site é de fácil leitura? (tamanho das fontes, contrastes, blocos de texto, adequação do texto, extensão das linhas de texto – máx. 70 caracteres)
19. Texto dos links é relevante? (evitar “veja mais”, “clique aqui”, etc)
20. Todas as seções são relevantes para o público-alvo?
21. Imagens possuem ALT TEXT?
22. Checar codificação das páginas e meta tags.
23. URL, nomes de diretórios e de arquivos são intuitivos?
24. Oportunidades de crossed-links são bem aproveitadas?
25. Etapas de processos (cadastros, compras…) são bem sinalizadas?
26. No caso de sites em ASP/PHP/JSP, há muitos reloads? Dá pra usar AJAX?
27. Há um mapa completo do site? Sempre que possível, incluir uma mapa (ainda que simplificado) em html no rodapé da home.
28. A busca do site funciona bem? Está bem localizada? É fácil de usar?
29. Todos os campos dos formulários são necessários? É possível reduzi-los?
30. Em todas as páginas há uma forma de entrar em contato com empresa?
31. Testar pelo menos em 3 browsers: IE, Firefox e Safari (Já que testou nos 3, testa no Opera também, vai…).

Tags: Sem tags desta vez

Você sabe o que é taxonomia? Trata-se de dividir um assunto em categorias para facilitar sua compreensão. Um exemplo simples é dividir um site em itens que ficam disponíveis em um menu.

Digamos, por exemplo, que criemos um website para uma lanchonete imaginária. Nossa taxonomia poderia ficar da seguinte forma:

Esse sistema funciona quando é bem pensado e aplicado em sites pequenos voltados para a comunicação unilateral. Em outras palavras, um site de lanchonete falando com seu público.

Uma vez que tenhamos uma comunicação multilateral, a coisa pode complicar muito, pois há muitas pessoas no mesmo ambiente produzindo conteúdo que pode ser classificado de diversas formas.

Entra em campo a folksonomia (não adianta procurar no Aurélio). A palavra vem de folksonomy, corruptela de taxonomy acrescida do prefixo folks - gente em inglês. A idéia é que cada usuário, ao produzir seu conteúdo, atribua a ele categorias que o classifiquem. No jargão da web 2.0, essas categorias são chamadas de tags.

Uma das principais vantagens da Folksonomia é que pode-se atribuir várias tags a um mesmo conteúdo, aumentando as chances de que outro usuário encontre o que procura.

Pense num artigo sobre sanduíches. Usando a taxonomia, poderíamos incluir esse conteúdo na seção ARTIGOS > SANDUÍCHES. Usando a folksonomia, poderíamos atribuir ao mesmo artigo tags como:

sanduíche, hamburger, cheeseburger, x-burguer, “cheese tudo”, x-tudo, pão, ketchup, mostarda, maionese, gergelim, alface, fome, lanche, almoço, carne, queijo, beirute, rosbife, ovo, “pão com ovo”, hotdog, “cachorro quente”, happy-hour, madrugada

Como você pode perceber, incluí variações dos mesmos termos ( cheese burguer / x-burguer ) e tags relacionadas a palavras que estão no suposto artigo. Dessa forma, num painel de tags (há um na coluna da direita deste blog), usuários que clicarem em “pão com ovo” serão remetidos a todos os conteúdos que foram classificados com essa tag.

As vantagens desse sistema num ambiente colaborativo vão da abrangência de termos à facilidade de busca do conteúdo alheio. Outro benefício é que no meu artigo sobre sanduíches, posso ter usado um ou dois parágrafos para dar dicas para quem gosta de sanduíches mas se preocupa com a balança. Nesse caso, eu poderia também incluir tags como:

light, diet, dieta, regime, “sanduíche vegetariano”, “baixas calorias”

Dessa forma, estaríamos facilitando o acesso de pessoas que provavelmente não clicariam no item SANDUÍCHES do menu.

A folksomia não representa o fim da taxonomia. Mas seu caráter democrático e abrangente tem tudo a ver com uma nova forma de pensar a web de forma mais humana, útil, relevante e divertida. Bem-vindo à web 2.0.

Tags: Sem tags desta vez

Sempre que descubro algum novo serviço na web vou lá fuçar, me cadastro, uso um pouco, às vezes com interesse real, outras por motivos profissionais… só pra ficar conhecendo mesmo, saber o que está acontecendo por aí.

Quando houve o bum do Orkut e começaram a surgir seus clones, me cadastrei em vários deles. Usei durante alguns dias e deixei de lado (com exceção do Orkut). Acontece que, de umas semanas pra cá tenho recebido vários e-mails do Multiply (um saco por sinal essa saraivada de e-mails, ainda que num dia longínquo tenha rolado um opt-in qualquer) convidando-me para voltar às atividades por lá.

Hoje estava à toa e cedi. Cedi e fiquei impressionado com a qualidade do site. O Multiply, tecnicamente falando, é muito superior ao Orkut. Muito mais serviços, interface melhor, mas bonita, ótima usabilidade, rápido… Adorei.

Único problema do Multiply: Ninguém está lá. Estão todos no Orkut. E, como você deve saber, o que faz uma comunidade são as pessoas. O que nos leva à pergunta:

Mas… Por que todos estão no Orkut?

O Orkut veio antes, ok, mas isso, por si, só não justifica o sucesso. Até porque nos EUA, o MySpace veio depois e alcançou um sucesso infinitamente maior que o “pioneiro”.

Num projeto como esse (Orkut) há algo de imprevisível. Um fator imponderável que vai além de qualquer explicação que se possa tentar encontrar. É como se o universo conspirasse para o sucesso estrondoso daquilo e ponto. Foi assim com os Beatles, com o Windows, com o Orkut. O momento certo. Engraçado isso.

Tags: Sem tags desta vez

O site inglês do novo Honda Civic é 100% em Flash, cheio de animações, vídeos, áudio e de tudo o que, às vezes, me acusam de ser contra.

Quer saber do que mais? Usabilidade (quase) perfeita, super leve (há que se considerar o público alvo, claro, que tem uma conexão melhor que a nossa), conteúdo altamente relevante, bonito pacas, eficiente ao extremo.

Um dos melhores que vi ultimamente. Uma aula de webdesign.

Tags: Sem tags desta vez

A Microsoft lançou uma atualização para o Internet Explorer que, entre outras coisas, evita que peças em flash sejam mostradas sem que o usuário clique em cima da peça para “ativá-la”.

http://support.microsoft.com/kb/912945

Trecho retirado do link acima:

“After you install this update, you cannot interact with ActiveX controls from certain Web pages until these controls are enabled. To enable an ActiveX control, manually click the control. There are also techniques that Web developers can use to update their Web pages.”

Esse é o tipo de coisa que pode causar uma revolução. Teremos um grande problema com peças e sites em flash. O CTR das campanhas, com certeza, será bastante afetado, afinal, pouquíssima gente vai clicar pra ver um banner de publicidade.

Um ponto importante é que isso não afeta o Firefox, Ópera e outros browsers.

Tags: Sem tags desta vez

Estava num bar conversando com um amigo que já me ensinou muita coisa nessa profissão. Discutíamos questões referentes a design e usabilidade. Falávamos de tendências e de nossas experiências com pessoas que projetam interfaces. Até que ele disse:

- Fico doido porque tem uns caras que não entendem… Designer tem que fazer sapato, não quadro!

- Explica melhor isso aí…

- É simples. O sapato… você usa! Ele tem que ser confortável, resistente, ter um solado que não escorregue e, além disso tudo, deve ser bonito também. Algumas vezes, o sapato é responsável pela impressão que se tem de uma pessoa. Já o quadro, tem que ser bonito, ter estilo, decorar. Mas as pessoas não precisam, necessariamente, entender o quadro. Sabe, adoro arte, o problema é que tem gente que acha que as pessoas gostam de calçar um quadro em cada pé e sair andando por aí.

Genial. Adorei.

Tags: Sem tags desta vez

Wireframes são uma parte fundamental na construção de qualquer site. Eles dão ao designer a dimensão do site, a hierarquia de importância de seus elementos e dizem o que acontece em cada situação. Além disso, dão ao cliente uma boa noção de como ficará o site depois de pronto. Ou seja, além de auxiliar a designers e clientes, o wire resguarda a ambos.

Pois bem… há várias formas de se fazer um wireframe. Sem querer entrar no certo ou errado, vou falar do jeito de que mais gosto.

Um wireframe deve, além de apresentar as telas, dar uma boa idéia da interatividade e da experiência que o usuário terá ao usar o site. Por isso, gosto dos interativos em vez de slides ou PDFs. De preferência em HTML e sem tabelas (tableless), de forma que, uma vez aprovado, o designer possa trabalhar em cima do wire, mexendo apenas no CSS pra layoutar o site.

Juntamente com os arquivos HTML, gosto de ter a árvore do site à mão pra ver o todo e poder me situar. Essa árvore pode ser, simplesmente um TXT com indicações de todos os níveis de navegação.

Outra coisa que ajuda muito é usar conteúdo real ao invés do famoso Lorem Ipsum. Conteúdo fictício é conveniente na hora do lay-out porque cada coisa “cabe” exatamente onde o designer quer. Claro. Ele é quem está decidindo o tamanho de tudo. O problema é que quase sempre, na hora de produzir o site, são necessárias mudanças e adaptações.

Essa é apenas a forma como eu vejo a coisa, mas trabalhar assim, pelo menos pra mim, é bem simples e ajuda pacas.

Tags: Sem tags desta vez