Excesso de escolhas pode intimidar seu usuário

25/08/2010 by Richard

Quando entramos em um site procurando um conteúdo rápido e específico não desejamos ser interrompidos com perguntas, cadastros ou ofertas inconvenientes. Todos os popups e balõezinhos indesejados que aparecem na tela são intuitivamente fechados assim que aparecem, não é verdade?

Isso é uma reação ao excesso de escolhas que um site te oferece. É de grande interesse da indústria conhecer melhor seu usuário e oferecer novas opções e ofertas, mas é necessário tomar cuidado para a navegação não jogar o usuário em um labirinto e sem saber pra onde ir.

O necessário, somente o necessário.

Em um site de operadora de celular, por exemplo, somos convidados a entrar com nossa cidade antes de acessarmos o conteúdo. É perfeitamente compreensível que ofertas e serviços da empresa sejam segmentados por região e, embora seja possível identificar o local de acesso do usuário por outros métodos, dar ao usuário esse poder de escolha parece útil para quem acessa de outros estados, por exemplo.

Esse tipo de escolha é pertinente ao usuário e não intrusiva.

Pode entrar, a casa é sua.

Quando vamos ao shopping temos o costume de entrar numa loja, analisar produtos e sair sem ao menos dar um “oi” a atendentes. A analogia aqui é perfeita: você entraria nessa loja se tivesse que pedir permissão a alguém ou preencher um formulário antes de dar uma olhada na vitrine?

Repare também nos sites e-commerce. Uma loja online nunca interrompe sua navegação com nenhuma escolha desnecessária. Você pode entrar, ver os produtos, encher sua sacola de compras e só na hora de concluir a compra ele pede seu login e senha ou dados para cadastro.

Veja como o formulário de cadastro só requer a entrada do número do CEP. Imagine se logo de cara fôssemos obrigados a preencher um cadastro com mais de 10 campos e veja como isso é imprescindível para evitar a fuga de um cliente em potencial.

O medo do desconhecido.

Se recebemos uma oferta de trilhar um novo caminho pela navegação do site, precisamos saber que voltaremos exatamente para o ponto que estávamos. Muitas escolhas seguidas e formulário com muitas páginas podem confundir o usuário e a frustração pode fazê-lo desistir de conquistar a informação que ele queria. Recursos como um menu de contexto ou breadcrumb trail ajudam muito  nestes casos.

Veja cadastro do Vimeo, por exemplo, não oferece breadcrumb ou menu, como sugeri, mas é tão divertido que dá vontade de cadastrar a família toda.

Não esqueça que seus usuários são pessoas comuns.

É fácil achar problemas de insatisfação na navegação quando vemos outras pessoas desbravando aquela interface. Faça testes de usabilidade e não tente controlar seu usuário final. Lembre-se também que o seu visitante não é um desenvolvedor e nem sempre sabe o que procura.

Repasse para seu usuário somente as decisões pertinentes e sensatas. Não o entupa de formulários e faça sua interface de fácil entendimento. Essa parece uma boa receita para mantê-lo satisfeito com a navegação. E você, o que acha?

As regras que atrapalham

10/05/2010 by Richard

Quando ainda somos crianças passamos pela fantástica fase do aprendizado, um período em que estamos descobrindo o que é possível, provável, certo ou errado nesse mundão que colocaram diante de nossos olhos, tudo na base da tentativa e erro.

Um estudante de design que ainda não tem grande embasamento teórico recorre apenas ao seu bom senso, ao gosto ou não gosto. São criativos como uma criança, mesmo que o resultado de um trabalho seja de gosto duvidoso ou kitsch na maioria das vezes.

O estudante cedo ou tarde amadurece e vira um profissional. Devora dezenas de livros, começa a tomar certas decisões de acordo com esse novo aprendizado, desenvolve seu próprio método de criação e adquire um estilo.

Esta semana me deparei com um artigo chamado Life Below 600px que me fez repensar sobre um conceito que eu encarava como uma regra (colocar informação importante numa área que precise de scroll). Uma regra que já estava tão consolidada dentro do meu estilo, que eu esqueci que ela poderia ser quebrada em algum momento.

Gostei muito, porque me fez questionar sobre todos esses conceitos, teses e regrinhas que vemos serem repetidas exaustivamente em artigos e livros por aí. Acredito que regras são importantes, mas temos que lembrar qual o objetivo de cada regra existir e saber (ou procurar) quebrá-las sempre que necessário.

Não ter medo de errar

Tudo isso está relacionado com uma dificuldade em lidar com a frustração de errar antes de acertar e se manter em uma zona de conforto. E essas regras agem como bloqueios mentais para nossa criatividade.

E aí lembramos das crianças, que não tem regras, e tentamos perceber quão densa é essa grade que limitou nossa criatividade e nos separa de nossa infância.

Será tarde demais?

Convido você a revisitar seus conceitos, assim como eu estou fazendo. Vamos errar primeiro e lembrar das regras depois, isso pode render novos e bons frutos. Que tal?

Dicas para desenvolvimento de Wireframes

26/04/2010 by Richard

No planejamento de uma interface, o profissional de arquitetura de informação precisa fazer alguns testes até chegar a um modelo estrutural para ser usado como base. Este modelo é conhecido como Wireframe.

Wireframe é um rascunho com marcações de peso e posicionamento do conteúdo de uma interface. Ele será usado posteriormente pelo designer como guia para desenvolvimento do layout final do website, sistema ou aplicativo.

Ainda vejo muitos profissionais com receio de usar wireframes e alegam que o cliente não entende ou que o trabalho demora mais, mas eu acredito que é uma etapa primordial na criação de uma interface e portanto, levantei alguns pontos que podem ajudar novos profissionais a entender ou incorporar com naturalidade o desenvolvimento desses esboços.

Nunca pule a etapa do wireframe.

Passar pela etapa de wireframe não é trabalhoso e é essencial para o progresso do projeto. Criar um esboço e pensar na navegação antes de ter um layout desenhado pode fazer com que perceba algum erro de usabilidade ou algum bloco de conteúdo que não está sendo exibido com o devido destaque. É muito melhor perceber essas coisas antes, né?

Não tenha medo.

Arquitetos de informação não são necessariamente designers, mas  não saber desenhar não significa que tenha que ter medo de criar wireframes. Supere esse medo e expresse suas ideias no esboço de alguma forma. Desenvolver wireframe é como projetar seu website em voz alta.

Papel e caneta.

Não é porque a interface é digital que todo o processo deve acontecer dentro do computador. Pegue papel e caneta e rabisque muito. Coloque todas as ideias no papel. Você pode recortar pedaços de papel ou usar post-its para reposicionar os blocos de conteúdo com maior facilidade, é uma baita mão na roda.

Teste seu wireframe.

Questione cada interação do seu wireframe. Imagine um usuário específico tentando acessar aquela interface e peça opiniões de outras pessoas da equipe que não participaram diretamente da elaboração dos esboços (por que não incluir o cliente nessa também?). Essa discussão pode levantar pontos importantes que você deixou passar em um primeiro momento.

Inspire-se.

Procure por novos wireframes, compartilhe ideias com amigos que não trabalham com você. Visite sites de referência como o I <3 Wireframes ou até o Flickr.

Existe ainda um projeto chamado Paper Browser, que é um modelo de navegador web com um canvas milimetrado para você imprimir e poder desenhar em cima facilmente. Eu recomendo!

Ferramentas.

Embora eu ainda use o Photoshop para meus wireframes, há quem use programas não muito convencionais, como o Flash. Mas existe também uma grande variedade de ferramentas para auxiliar no desenvolvimento de wireframes que você pode escolher. E a lista não é pequena:

Ferramentas para Desktop (freeware em negrito)

Ferramentas Online

E você, tem alguma dica ou experiência com desenvolvimento de wireframes para compartilhar?

Rode propriedades do CSS3 no Internet Explorer

14/04/2010 by Richard

Depois de tanto tempo de sofrimento para fazer uma sombrinha ou bordas arredondadas compatíveis com o IE no CSS, eis que encontro pela internet um arquivo HTC que promete resolver os problemas de compatibilidade do CSS3 nas versões 6, 7 e 8 do temido Internet Explorer.

HTC é sigla para HTML Components, um arquivo que aplica novos comportamentos em HTML Dinâmico dentro do Internet Explorer.

Como funciona?

Você precisa apenas adicionar uma referência ao comportamento pelo arquivo ie-css3.htc na seleção do CSS que tenha propriedades CSS3 como border-radius ou box-shadow. Veja um exemplo:

.caixa {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari e Chrome */
  border-radius: 15px; /* Opera 10.5+
e agora também para Internet Explorer 6+ com IE-CSS3.htc */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari e Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+
 e Internet Explorer 6+ com IE-CSS3.htc */

  behavior: url(ie-css3.htc); /* Avisa ao IE para mudar o
 comportamento desta classe e ela passa a entender o CSS3 */
}

Nota: O arquivo HTC precisa estar na mesma pasta do CSS.

Parece um sonho para desenvolvedores, mas é uma pena que a iniciativa não tenha vindo da própria Microsoft.

Faça download do script diretamente neste link.

Sorteio de 2 convites para o 15º EDTED no Rio de Janeiro

12/03/2010 by Richard

EDTED, outrora conhecido como EWD/ETI, é um evento da ARTECCOM que corre o Brasil durante o ano com palestras e oficinas divididas em 4 áreas: Design, Tecnologia, Oficinas e Minicurso/Desconferências e o mais legal desse Encontro de Design e Tecnologia Digital é que a programação é toda definida com sugestões do próprio público do evento.

Dentre os temas abordados este ano o Espaço de Design terá palestras conceituais sobre cores, criação e inovação com destaque para a apresentação de Luli Radfahrer, mestre de design e inovação digital que raramente aparece aqui pelo Rio de Janeiro. O framework Ruby on Rails, o e-commerce em php Magento e Realidade Aumentada os fortes assuntos que farão parte da área de Tecnologia. Ainda acontecerão Oficinas sobre cloud computing, e-mail marketing, métricas em redes sociais e pagamentos digitais e Desconferências sobre DJango, Games e outros temas.

No intervalo rola aquele networking e depois do evento a galera acaba num happyhour para esfriar a cabeça e ajudar a absorver o que rolou durante todo o dia. Então não deixa de ser uma ótima oportunidade para estudantes e profissionais trocarem experiências sobre web e design de forma geral.

O primeiro evento será realizado no sábado dia 20 de março de 2010, das 9 às 18 horas no Rio de Janeiro (veja no site as datas para os outros estados) e os valores variam de R$ 24 a R$ 74, dependendo da data de inscrição.

Como ganhar um convite?

Para ganhar um convite para o 15º EDTED do Rio de Janeiro, assim como no ano passado, você deve aderir à campanha Update Your Browser seguindo os seguintes passos:

  1. Entre no site da campanha updateyourbrowser.net
  2. Coloque um botão ou use o código javascript da barrinha em seu site/blog (é por uma causa nobre ;))
  3. Faça um comentário aqui neste post dizendo que quer participar do sorteio (na hora de comentar não esqueça da URL do seu site/blog com o botão ou barrinha).

Na segunda-feira dia 15/03/2010 serão sorteados 2 vencedores através do sistema do site random.org e eu publicarei os resultados aqui e no meu twitter @richardbarros – aproveita e me siga por lá também.

Ah! Lembre-se que os convites são para o evento do Rio de Janeiro e que passagens e hospedagem não estão incluídas nessa brincadeira.

Boa sorte e bom evento a todos!

[UPDATE]

Os vencedores são: Victor Procopio e Leo Balter. Vocês devem receber um email da organização do evento em algumas horas, fiquem atentos!

Usando WordPress para gerenciar conteúdo em qualquer linguagem de programação

03/03/2010 by Richard
super-wordpress-richardbarros1

WordPress ficou conhecido como uma ótima ferramenta para Blogs, mas com o tempo ela se mostrou uma ferramenta poderosa também para gerenciamento de conteúdo online em geral, desbancando em diversos aspectos os líderes no segmento, como Joomla ou Drupal.

Este não é um post para defender que o WordPress também pode servir como CMS porque isso todo mundo já sabe (ou deveria saber), mas para abrir sua mente, caro desenvolvedor, para as possibilidades da utilização do WordPress em outras linguagens além do PHP e do MySQL.

Antes de chegar ao ponto, preciso preparar o terreno com algumas definições que cercam o WordPress e o objetivo deste artigo.

Este post é apenas um exercício

Não estou defendendo que você deva usar esse mótodo em seus projetos. Fiz esse Post apenas para abrir os horizontes para uma nova possibilidade.

Eu já utilizei WordPress como gerenciador de conteúdo de um site em Flash uma vez e foi um desafio interessante, mas não é algo que eu acredito que deva ser feito com frequência. Então encare apenas como um exercício de programação.

O que é XML?

Para não deixar nenhum leigo boiando, a eXtensible Markup Language (XML) é uma linguagem de marcação (assim como o HTML) que agrupa conteúdo usando tags.

O XML tem sido muito útil para exportar conteúdo. Isso significa que se você tem qualquer tipo de informações, pode organizá-las e transmití-las usando um arquivo nesse formato.

O interessante é que qualquer linguagem é capaz de criar e ler XML, e desta forma, você pode exportar dados de ASP para JavaScript, por exemplo, usando o XML. Os arquivos de feed (RSS), por exemplo, são um tipo de arquivo XML. Quando você faz AJAX, o javascript geralmente está lendo um arquivo XML, e por aí vai…

Feeds no WordPress

O WordPress oferece arquivos de RSS e Atom do conteúdo do seu banco de dados sem precisar de plug-ins ou nenhuma mudança adicional após a instalação. Isso significa que qualquer Post que for criado na administração do WP pode ser disponibilizado pelo WordPress em formato XML através dos Feeds. Geralmente este conteúdo pode ser acessado no http://www.seusite.com/feed/.

Agora sim, a mágica!

Com as opções de FEEDs que o WordPress fornece, é possível acessar todos os seus posts e indexá-los em qualquer linguagem de programação. Veja os exemplos de conteúdo que é possível buscar pelo RSS:

Todo o conteúdo

http://www.site.com/?feed=rss2

Apenas a categoria “noticias”

http://www.site.com/category/noticias/feed

Apenas a tag “destaque”

http://www.site.com/?tag=destaque&feed=rss2

Se tudo o que você precisava era de uma ferramenta para gerenciar o conteúdo, o WordPress já está fazendo isso para você. E agora não importa se sua linguagem será Javascript, Flash ou COBOL, basta ler este XML que você estará acessando o banco de dados do WP.

diagrama-xml

Uma vez conectado ao XML, o conteúdo pode ser usado da maneira que preferir. Uma lista de posts, uma página de notícias, uma galeria de fotos. Basta reorganizar os posts em novas Categorias e Tags de acordo com sua necessidade e o restante fica a critério da sua criatividade.

A maioria das linguagens mais recentes já possui um XMLParser, uma ferramenta para fazer a leitura do XML. Então, independente da sua linguagem favorita, procure pela documentação do XMLParser respectivo e conseguirá acessar sem problemas esse arquivo RSS gerado pelo WordPress. Aí fica fácil, não é?

Esse post foi sugerido algum tempo atrás pelos amigos Yogodoshi e Cristianoweb, espero ter deixado as coisas um pouco mais claras.