Your browser (Internet Explorer 7 or lower) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.
X

Apture: Dê Vida Aos Seus Links

Janeiro 23, 2010 Dinheiro, Projetos 0 Comentários

Ultimamente uma das minhas aventuras, foi descobrir qual seria a melhor forma de tornar os links de um determinado website, mais dinâmicos, interativos e interessantes.

O Apture é uma aplicação cujo objetivo principal é acrescentar vários tipos de “media” a um determinado artigo. O sistema é genial, o Apture foi concebido para funcionar em praticamente qualquer tipo de website e trabalhar com ele é tão fácil que até parece mentira. Eu instalei o plugin – wordpress – no meu blogue pessoal para que todos possam ver como funciona:

1º- Integrar texto, imagens, vídeos, mapas músicas etc…

A grande vantagem deste plugin é o facto de virtualmente não ter limites, ou seja, nós podemos colocar os conteúdos mais diversos. Veja este exemplo:  eu posso colocar um link para a homepage do Apture, seguido de um link para um vídeo, para um artigo e até mostrar quem fala do Apture no Twitter, tudo isto sem ser necessário o leitor sair da página para aceder à informação.

2º- Fazer Embed de Vários Conteúdos

É também uma funcionalidade interessante, pois nós podemos não só tornar os links mais interactivos, como também fazer “embed” de vários tipos de média. Veja o exemplo dos links colocados em cima, mas embutidos no próprio artigo:

Como se pode ver, em destaque temos um vídeo e em baixo outros conteúdos relacionados com esse vídeo.

3º- Ganhar Dinheiro Com o Apture

Outro aspeto interessante neste plugin, é o facto de podermos ganhar dinheiro com ele. Para tal basta ter uma conta na plataforma de afiliados da Amazon e depois começar a sugerir produtos que os seus visitantes ou leitores podem estar interessados em comprar. Vamos supor por exemplo que este artigo era sobre cinema e eu mencionava o filme “Hangover“. A sugestão poderia ser dada de duas formas, ou linkava a palavra “Hangover” desta forma, ou fazia embed.

A partir deste momento, por cada compra eu iria ganhar uma determinada quantia. O segredo reside em sugerir aos leitores bons produtos de acordo com os temas abordados, o que quer dizer que em websites ligados à música ou ao cinema, esta pode ser uma boa forma de ganhar dinheiro.

4º- Manter Os Leitores No Website

Já foi referido nos outros pontos, mas aqui fica novamente reforçada a grande vantagem desta aplicação. Não só é possível manter os leitores no nosso website, como podemos apresentar vários conteúdos relevantes à distância de um clique. Isto faz com que a experiência de ler um artigo seja completamente diferente e muito mais divertida que a convencional. A Apture possui também parcerias com os “colossos” da Web atual o que facilita ainda mais a colocação de um link, um vídeo, uma imagem etc…

5º- O Media Hub

O “Media Hub” onde basicamente trabalhamos com esta aplicação é também extraordinário. Podemos por lá pesquisar diretamente conteúdos, desde imagens (onde podemos escolher as que têm licenças grátis), vídeos, documentos e por aí fora. Também podemos fazer upload de qualquer tipo de ficheiro que não seja superior a 5MB e algo que achei particularmente útil são as imagens do Flickr que caso tenham licença, o sistema do Apture aplica-a automaticamente de forma a que os devidos créditos sejam dados. É tudo muito instintivo, tão simples que a partir do momento que você o começar a utilizar não vai querer outra coisa.

Resumindo:

  • 1º- O Apture modifica totalmente a experiência de ler um artigo, com conteúdos relacionados, relevantes e literalmente à distância de um clique;
  • 3º- Links para vídeos que podem ser vistos directamente no website graças ao sistema de janelas do Apture;
  • 4º- Possibilidade de fazer embed de praticamente todo o tipo de media;
  • 5º- Fazer upload de qualquer tipo de ficheiro;
  • 6º- Ganhar dinheiro com a Amazon;
  • 7º- Uma “Media Hub” onde é possível pesquisar informação de diversas fontes.
Temas: , , , , ,

Twitter: As Melhores Práticas

Janeiro 15, 2010 Projetos, Usabilidade 2 Comments

O Twitter é a rede social do momento, tem vindo a acumular utilizadores e é hoje uma ferramenta de comunicação muito eficaz. Os webmasters já perceberam a sua força e agora não existe projecto que não tenha o seu próprio twitter, até eu tenho um. Mas quais são as melhores práticas? Qual é a melhor forma de utilizar o Twitter como uma ferramenta eficaz de comunicação e divulgação para os nossos websites?

1º- Coloque Um Link Atrativo “Above The Fold”

Se quer utilizar o Twitter como ferramenta de comunicação para o seu projeto, é obrigatória a colocação de um link sempre “above the fold” que para quem não sabe é a parte superior da página, aquela em que vemos assim que entramos no website sem necessitarmos de fazer scroll.

Este primeiro exemplo é do meu próprio website. Repare que apesar de na homepage os links para as redes sociais não serem muito visíveis, na visão de artigo individual eles aparecem bem destacados. E lá está o botão para o Twitter!

No Mais Tráfego precisamente a mesma técnica, o link para o Twitter “above the fold” bem visível.

Agora o exemplo do Dementia, o link para o Twitter aparece destacado também.

Não é por acaso que nos exemplos apresentados, o link para o Twitter é sempre acompanhado por uma imagem atractiva. De facto ela chama muito mais a atenção do leitor do que um simples link de texto e é portanto uma boa forma de atrair novos seguidores que estejam interessados em acompanhar o projecto de perto.

2º- Coloque o Último Tweet “Above The Fold”

E que tal colocar o último tweet “above the fold”? Muitos projectos recorrem a esta técnica estilo “teaser“. Tal como no primeiro ponto o que se quer é chamar a atenção do leitor e esperar que ele se interesse ao ponto de clicar e tornar-se um dos nossos “followers“. Eu apliquei essa funcionalidade no meu próprio website para que a veja com maior detalhe:

No meu caso está colocado no header e é impossível que passe despercebida! Um efeito visual bonito também pode ajudar, repare como o último tweet no meu website está no interior de um balão e o texto e é acompanhado por uma imagem atractiva.

3º- Colocar Os Últimos Tweets Na Sidebar

Esta é uma técnica bastante utilizada para se conseguir mais followers. Consiste na colocação de uma aplicação na sidebar onde se mostra os últimos tweets, é na maior parte das vezes colocada “below the fold” e direccionada especialmente para aqueles utilizadores/leitores que visitam o website mas ainda não tiveram curiosidade de visitar o Twitter.

Como podem ver na imagem, é algo relativamente simples mas que pode ser muito eficaz. É importante também que se tenha cuidado na colocação, não convém colocar demasiado “below the fold” pois corre-se o risco de não ser visto pela maior parte dos utilizadores. Caso tenha um link “above the fold” para o Twitter (como no primeiro ou segundo ponto) e tenha intenção de aplicar também esta técnica, dê algum espaço entre os dois para evitar uma repetição desnecessária.

4º- Coloque Um Contador No Seu Website

Alguns websites optam pela colocação de um contador que apresenta o número de seguidores do Twitter. Certamente já viu algo deste género num dos websites que visita:

É importante também que tenha em conta, que para utilizar este tipo de estratégia, é importante que o projecto já tenha um número considerável de seguidores. Há quem defenda que ele só deve ser colocado a partir dos 3 dígitos mas eu pessoalmente acho que só a partir dos 4 dígitos é que se torna mesmo eficaz. O botão pode servir também para conferir mais credibilidade ao Website, transmitindo a ideia de que se tantos já o seguem, faz todo o sentido que o leitor faça o mesmo.

Este contador costuma ser sempre colocado “above the fold” para que capte a atenção dos visitantes.

5º- O Botão De Retweet Nos Artigos é Obrigatório

Se desejam que os artigos sejam “twittados” com maior frequência, então a colocação de um botão que faça isso nos artigos é absolutamente obrigatória. Existem plugins e várias formas de permitir ao utilizador “twittar” com facilidade. Vamos ver algumas:

O primeiro exemplo é o do meu website pessoal. Neste caso em particular, o botão para “twittar” está no final do artigo, ou seja, quando o leitor acaba de ler se quiser partilhar no Twitter o artigo, pode fazê-lo com um clique. Hoje é praticamente obrigatório existir este botão no final dos artigos, o que quer dizer que se ainda não o colocou no seu projecto, deve tratar disso.

Agora vamos a outras localizações para além do botão no final dos artigos que é obrigatório. Na imagem de cima vemos um exemplo onde foi colocado um botão de “retweet” no principio do artigo. À partida parece fazer pouco sentido um botão naquela zona, afinal de contas o leitor ainda não leu o artigo e nem sequer decidiu se quer ou não twittar. Bom, na realidade não é bem assim, este é um botão também muito útil especialmente para os visitantes mais assíduos. Por vezes nós lemos artigos mas não o twittamos, quanto se trata de um website que visitamos frequentemente, nós podemos voltar a esse mesmo artigo e sentir a necessidade de o partilhar, neste caso o botão “above the fold” é uma forma fácil de twittar sem haver necessidade de se fazer scroll.

No Dementia também foi colocado um botão de retweet “above the fold” a diferença é que se trata de uma versão mais compacta.

O botão de retweet “above the fold” é obrigatório, especialmente quando se tem já um grande número de leitores assíduos.

6º- Utilize Uma Aplicação Para Twittar A Partir Do Desktop

A melhor forma de você se manter actualizado e ir “twitando” com regularidade é instalar uma daquelas aplicações que permite aceder ao twitter do ambiente de trabalho. Eu recomendo o:

É provavelmente a melhor aplicação que anda por aí, permite ao utilizador controlar até várias contas no Twitter bem como de outras redes sociais. Acima de tudo este tipo de aplicações facilitam o “tweet” e permitem que controlemos melhor o que se vai passando.

7º- Personalize A Página Do Seu Twitter

Se você está mesmo interessado em optimizar o seu Twitter, então personalizar a página é muito importante. Mais uma vez o que se procura aqui é algum impacto visual, tentar garantir que quem visita o seu twitter, vai acabar por o seguir:

Como pode pode ver na imagem, do lado esquerdo temos um conjunto de informações relevantes para o leitor, bem como o logótipo do projecto e alguns contactos. É claro que o design adapta-se ao tipo de projecto e neste caso como se trata de um website de entretenimento, o design está montado de uma forma muito mais alegre e irreverente. Não existem regras de design, mas talvez o logótipo e um ou outro contacto sejam uma boa ideia.

8º- Crie Um Artigo Com Os Tweets Da Semana ou Do Mês

Esta é uma técnica que eu nunca utilizei, mas aparentemente é capaz de fazer maravilhas. A ideia é mostrar aos leitores que estamos atentos a determinado twitter e acima de tudo, atentos ao que os “followers” têm para dizer. A beleza desta estratégia é que com o tempo vai motivar os seus seguidores a responderem mais aos seus “tweets” e consequentemente aumentarem a visibilidade do seu twitter.

9º- Converse Com Os Seus Seguidores

Tire algum tempo para conversar com todas aquelas pessoas que o seguem. Partilhe informação interessante, faça retweets e dê alguma vida ao seu Twitter.

10º- Não ao SPAM!

O Spam é algo que não combina com o Twitter. Não envie 5 ou 10 “tweets” seguidos, não vale a pena e só vai acabar por irritar os seus seguidores ao ponto em que eles deixem de o seguir. Qualidade é a palavra de ordem para um bom Twitter, se começarmos a spammar indiscriminadamente então nem vale a pena começar a utilizar esta ferramenta.

Resumindo:

  • 1º- A colocação de um link atractivo “Above The Fold” é muito importante;
  • 2º- Coloque o último tweet “above the fold” esta técnica “teaser” também produz resultados;
  • 3º- Apresente os últimos tweets na sidebar;
  • 4º- Coloque um contador no seu website caso o número de followers seja considerável;
  • 5º- Um botão de retweet no final dos artigos é obrigatório e caso já tenha muitos leitores assíduos, coloque também no principio do artigo;
  • 6º- Toca a twittar e conversar com os seus followers;
  • 7º- Crie um artigo semanal ou mensal com os melhores tweets. Esta medida a longo prazo pode aumentar muito o número de seguidores e contribuir para aumentar a reputação do seu website;
  • 8º- Nada de Spam, utilize o twitter de forma inteligente.

Finalmente tenha iniciativa, procure novas formas de integrar o Twitter no seu projecto. Não se esqueça que ele pode ser uma ferramenta muito importante para comunicar com os leitores e fazer passar a palavra sobre o seu projecto.

Temas: , , , ,

Zoológico De Copenhaga

Janeiro 9, 2010 Inspiração 1 Comment

Hoje em dia discute-se muito em publicidade as melhores formas de transmitir a mensagem para o público alvo. Fazem-se estudos para compreender o cérebro humano, testam-se ideias, elaboram-se estratégias e gasta-se dinheiro para se tentar ganhar ainda mais dinheiro. No final  de todo este trabalho só quando as campanhas arrancam é que nós percebemos se a ideia foi ou não boa.

A imagem de baixo fez parte de uma campanha publicitária para o Jardim Zoológico de Copenhaga. Da autoria do pessoal da agência Bates Y&R, esta campanha é a prova de que a criatividade nunca se esgota e que mesmo no competitivo mundo da publicidade se pode criar algo que é original e simultaneamente espetacular!

Inspirem-se meus amigos e não se esqueçam que mais cedo ou mais tarde os vossos websites podem precisar de muita criatividade.

Zoológico De Copenhaga

Temas: , , , ,

9 Dicas Importantes Para Um Website De Sucesso

Janeiro 7, 2010 Projetos, Usabilidade 2 Comments

Como sabem, ter um website com um design espetacular hoje em dia não chega. É preciso que ele seja bonito e também funcional, sob pena de não estarmos a explorar todo o potencial do nosso projeto. No passado já dei 10 dicas muito importantes sobre usabilidade. Hoje regresso às bases e revelo alguns dos princípios a ter em conta quando se deseja criar um website de sucesso.

Estes princípios não são novidade nenhuma, talvez sejam demasiado óbvios. Mesmo assim são muitos os websites na Internet que os ignoram sistematicamente. Porquê que isso acontece? Eu acho que acontece primeiro porque alguns webmasters não possuem os conhecimentos necessários e porque existe uma tendência natural para colocar de parte o óbvio, talvez porque é tão óbvio que muitos julgam não ser necessário perder muito tempo a pensar nisso.

1º- O Princípio Da Clareza

É um dos aspetos mais importantes e qualquer website que ambicione algum tipo de sucesso deve ser fácil de compreender. A clareza é fundamental em praticamente tudo na vida e assim sendo, não existe razão para que não o seja também em websites. Este primeiro ponto prende-se principalmente com a facilidade de compreensão, ou seja, o utilizador/leitor deve olhar para um determinado local e perceber imediatamente do que se trata e como funciona. Numa questão de segundos ele assimilou a mensagem e compreendeu-a na perfeição. Vamos olhar para alguns exemplos:

Sapo Exemplo 1

Esta primeira imagem é do portal da SAPO, reparem nesta secção, é tão simples que o complicado é não perceber do que se trata. É muito claro, não há que enganar, até as cores, o tamanho e estilo de letra são os ideais. O utilizador também percebe imediatamente como funciona o sistema, tem várias tabs onde clica e aparecem diferentes notícias, é fácil de navegar e encontrarmos o que procuramos.

Parece fácil não é? Na realidade este é um conceito utilizado em vários websites, faz todo o sentido aplicarmos nos nossos não é? Não é bem assim, o exemplo do Sapo está realmente muito bem conseguido, mas vamos ver o mesmo exemplo noutros websites:

Clix exemplo 1

Agora temos o Clix, precisamente o mesmo exemplo, mas desta vez muito menos conseguido. Apesar de se perceber e não ser propriamente um grande desafio, não é tão claro como o do Sapo. Experimente visitar o SAPO e a CLIX e depois diga-me qual dos dois é “abençoado” pela clareza.

Outro exemplo, desta vez o portal da AEIOU, é mais ou menos o mesmo sistema, mas novamente perde em clareza. Aliás se aproveitarem para visitar o portal, vão verificar que é infinitamente mais confuso que o da SAPO e até que o da Clix. Isto prova que nem sempre é fácil respeitar este principio. Também fica a informação de que o SAPO mudou recentemente o design e que os outros dois exemplos ainda não o fizeram, logo têm oportunidade para fazer melhor.

2º- O Princípio Da Familiaridade

O leitor/utilizador, espera um sistema a que já esteja habituado. Não vale a pena complicar-lhe a vida e aqui pode-se pegar um pouco na usabilidade, ou seja, coloque a informação onde o leitor a espera encontrar, o funcionamento dos menus da forma mais comum, tente jogar de forma inteligente e nessa familiaridade integrar um ou outro elemento inovador.

Bloco Sapo

Repare nesta barra também do SAPO, não há que enganar, até os símbolos são familiares demais para que o leitor não os compreenda. E onde é que ela se encontra? No canto superior direito, precisamente a zona onde o leitor está habituado a ver este tipo de blocos.

Bloco Dementia

Vejam também o exemplo do Dementia, no mesmo local pode encontrar o bloco “Acompanhe a dementia“. A ideia é a mesma, o design muda um pouco devido à natureza do projeto mas o principio é o mesmo, colocar informação relevante num local onde o leitor está à espera que ela esteja.

Bloco Mais Tráfego

Este exemplo é do Mais Tráfego, a mesma barra com a disposição da informação diferente e também localizada na mesma posição que as anteriores, no canto superior direito.

Bloco Jerson Wanderley

Finalmente o exemplo do meu blogue, a posição do bloco é exactamente a mesma que nos exemplos anteriores. Não possui um texto descritivo, mas também não necessita, pois as imagens são grandes e o leitor já as viu em vários locais, ele conhece-as muito bem.

3º- O Princípio Da Objetividade

Vá direto ao assunto! Este ponto é óbvio, coloque o conteúdo mais importante “na cara” do utilizador sempre “above the fold“, não encha por exemplo a sua homepage com informação desnecessária porque não é essa a que o utilizador procura. Visite o SAPO e o AEIOU e decida qual é o mais objetivo. Não há que enganar, o SAPO não só nos oferece de imediato a informação mais relevante como é fácil encontrá-la enquanto que no AEIOU é muito mais difícil.

4º- O Princípio Da Rapidez

É mais outro ponto muito importante, até porque ninguém gosta de websites que demoram anos a carregar. A rapidez é importante e hoje existem mecanismos e profissionais especializados que podem melhorar os tempos de carregamentos de páginas num determinado website. Um bom servidor é também importante, bem como ter um sistema de cache eficaz instalado no seu projeto.

PS: Para quem usa wordpress o plugin WP Super Cache é sempre obrigatório!

5º- O Princípio Da Beleza

No artigo sobre usabilidade já foi referido que um website com um bom design torna-se mais credível ao olhar do leitor/utilizador. Isto é uma realidade, um bom impacto visual é meio caminho andado para que o leitor fique um pouco mais curioso. Ninguém gosta de ver um website feio, pois transmite a imagem de que os responsáveis não cuidam bem dele.

6º- O Princípio Da Consistência

Sem consistência não se pode chegar a lado nenhum neste mundo e nos projetos online a conversa é a mesma. Um projeto consistente é também um projeto equilibrado, nós não podemos por exemplo criar o “header” mais fantástico do mundo e depois o resto do website ser uma nódoa, não faz qualquer sentido!

7º- O Princípio Da Organização

O mais importante neste ponto é a organização na disposição de informação, não exagerar no conteúdo, colocar a informação mais relevante acessível ao leitor e rejeitar a confusão (que já tinha sido mencionada no primeiro ponto). Vejam este exemplo:

SAPO VS AEIOU

Mais uma vez pode-se ver claramente que o novo design do SAPO privilegiou a organização e deixou para trás qualquer tipo de confusão que pudesse existir. Por outro lado se observarmos o AEIOU é uma confusão tremenda com demasiada informação para ser processada na homepage. Visitando os dois websites consegue-me perceber muito bem os benefícios de uma boa organização.

8º- O Princípio Da Simplicidade

Juntem todos os pontos referidos anteriormente e adicionem-lhe simplicidade. Este vem na sequência da organização, pois o segredo está em conseguir um website organizado mas que também seja simples. Pode ser muito difícil conseguir respeitar este princípio, principalmente quando se lida com um projeto que possui “toneladas” de informação, mas é possível:

CNN

Veja-se o exemplo do website da CNN que também mudou recentemente. Eles possuem uma enorme quantidade de informação, na versão anterior do website isso era visível, no entanto esta nova versão é muito mais simples que a anterior. Eles trabalharam para reduzir a quantidade de informação que não era relevante e conseguiram transformar totalmente o projeto.

Acima de tudo tente controlar-se, não exagere nas opções e funcionalidades. Lembre-se sempre da célebre frase “Less is more” pois pode ajudá-lo a travar esse ímpeto para a complexidade.

9º- O Princípio Da Diferenciação

Finalmente o seu projeto necessita de se distinguir, seja no design, seja no conteúdo, seja nas funcionalidades, arranje uma forma de tornar o seu projeto único! Se é mais programador do que designer então trabalhe nas funcionalidades; se é um excelente designer então aplique-se a fundo na componente estética do website; se por acaso não percebe nada de design ou programação e não tem dinheiro para contratar profissionais, trabalhe o conteúdo incansavelmente.

Caso esteja inserido num mercado em que a concorrência é forte e já existem grandes projetos sobre esse mesmo tema, então deve levar este ponto muito a sério. Estude os outros, descubra as suas falhas, pois o mais certo é alguns deles terem descurado um ou outro princípio da usabilidade e acessibilidade. Existe sempre uma forma diferente de fazermos as coisas, só precisamos de a descobrir.

Agora vamos resumir toda a informação aqui colocada:

  • 1º- Respeite o princípio da clareza, o leitor/utilizador deve perceber imediatamente o quê está à sua frente e deve compreender como funciona o sistema antes mesmo de interagir com ele;

 

  • 2º- Os leitores estão mais familiarizados com determinados sistemas e  formas de disposição da informação. Este facto não deve ser ignorado;
  • 3º- Vá direto ao assunto, seja objectivo e transmita a mensagem mais importante assim que o leitor entrar na sua página;
  • 4º- Caso o seu website possua muita informação ou imagens, utilize um sistema de cache, verifique como pode diminuir o tempo de carregamento das páginas;
  • 5º- Um website com um bom aspeto transmite uma mensagem de dedicação e faz com que os leitores confiem mais no projeto;
  • 6º- Seja consistente em todos os aspetos, no design, na organização, nas funcionalidades etc…
  • 7º- Um projeto organizado é muito mais apetecível, ninguém gosta de confusão;
  • 8º- Seja simples, não exagere e recorde-se de que “Less is more”;
  • 9º- Descubra como pode ser diferente, se por acaso está a entrar num mercado onde a concorrência é forte então este ponto é muito importante.
Temas: , , ,

Clique VS Scroll

Janeiro 2, 2010 Usabilidade 0 Comentários

Aqui está um dilema muito importante com que se deparam vários webmasters. O “clique” ou o “scroll”, qual deles é melhor e que fatores devemos ter em conta para tomarmos uma decisão? A resposta é tudo menos simples, mas neste artigo vou tentar abordar o tema de uma forma mais lógica e recorrendo a dados e experiências pessoais.

Primeiro é importante deixar claro que este dilema pode referir-se a diversos tipos de projectos, ou seja, pode referir-se a um website de vendas, um grande website de informação ou um simples blogue e por aí fora. Esta é de resto uma das questões a que devemos prestar mais atenção antes de lançarmos um projeto, sendo certo que temos que fazer uma escolha.

Mas qual é o melhor, será o Clique ou o Scroll?

A resposta óbvia é que depende dos nossos objetivos e do tipo de utilizadores/leitores do projeto em questão. Apesar disso, o primeiro grande facto é que:

1º- Cerca de 77% dos novos visitantes de um website não fazem scroll!

Esta foi a conclusão de um estudo realizado por Jacob Nielsen que está no seu livro (Prioritizing Web Usability). Isto quer dizer que a maior parte dos novos visitantes apenas irá ver uma parte do seu website, a chamada zona “above the fold“. Se nunca ouviu falar da “fold” fica a saber que basicamente se trata de uma linha imaginária que divide a zona mais vista de um website (naturalmente a parte mais superior) da menos vista (parte inferior). Aqui fica uma pequena imagem para que perceba melhor o que acabou de ler:

Agora tome mais atenção à parte que vai até aos 94%, como pode ver dali para baixo a imagem escurece, o que significa que é menos vista. Não há dúvidas que todos os novos visitantes num primeiro contacto com o website vão ver primeiro o conteúdo “above the fold“. Agora se juntarmos a isso o facto da maior parte deles nem sequer chegar a fazer scroll, a resposta só pode ser uma: “Scroll não!”.

É fundamental colocar o conteúdo mais importante de um website “above the fold“! Neste ponto específico o clique ganha a batalha, pois toda a informação relevante estaria num local visível e literalmente à distância de um clique. Num website de venda de produtos por exemplo, também faz mais sentido dar mais prioridade ao clique do que ao scroll, pois isso pode significar mais vendas.

Mas é sempre assim tão fácil?

Não, nem sempre é assim tão fácil tomar uma decisão. Vamos “pegar” na questão e adaptá-la a um blogue, neste caso vamos “agarrar” no exemplo do Dementia que se trata de um blogue de entretenimento que vive muito de artigos com imagens. Nos meus primeiros tempos de gestão do projecto, deparei-me precisamente com esta questão.

Desde o seu nascimento o Dementia foi um projecto que deu primazia ao clique, isso é óbvio quando o visitamos, mas quando se tratava nos artigos de imagens, para além do conteúdo textual óbvio, era necessário colocar as imagens que no fundo eram o mais importante do artigo. Nesse caso os utilizadores eram obrigados a fazer scroll, ou seja, o leitor necessitava de fazer scroll para ir vendo a imagem uma a uma. Aqui fica um pequeno exemplo:

Confesso que a mim esta disposição das imagens nunca me agradou e foi algo que sempre tive intenção de alterar. O problema é que desta vez eu tinha as estatísticas contra mim! Por mais que eu não goste do scroll, a realidade é que a maior parte dos utilizadores está familiarizado com ele e quando acede a um artigo que possui imagens o gesto de fazer scroll é quase instintivo. Como os webmasters sabem e muito bem, não se deve lutar contra o instinto e não vale a pena complicar o que é simples.

Mesmo assim eu nunca fiquei satisfeito e uma das minhas missões foi encontrar um sistema baseado em cliques que fosse tão ou mais eficaz que o scroll. A galeria de imagens era portanto a solução mais óbvia e logo a seguir ao texto o leitor tem a galeria, depois basta clicar na imagem que deseja ver:

Parece simples não é? De facto visualmente tem melhor aspecto mas o problema é que a maior parte das galerias não acrescenta um ponto positivo à usabilidade de um website. Algumas não trabalham muito bem, outras possuem botões pequenos demais e a sua navegação é tudo menos instintiva.

Depois de questionar alguns leitores do Dementia, fiquei convencido de que uma galeria só poderia ser aplicada se a sua navegabilidade fosse tão ou mais fácil do que o scroll, esta seria a única forma! Decidi então aplicar o melhor plugin de galerias para wordpress existente, o NextGEN Gallery e investiguei a melhor forma de tornar a navegabilidade o mais simples e instintiva possível.

A conclusão foi esclarecedora, o sistema de galeria com um estilo de navegação simples com o efeito “lightbox” (como podem ver na imagem de baixo) agradou muito mais os leitores que o convencional scroll. O “truque” reside em diversos aspectos: na posição da galeria no website; no tamanho dos “thumbnails”; no tamanho dos botões de navegação e por aí fora.

Este sistema não só permitia que os utilizadores observassem uma imagem com mais atenção como tornava a tarefa de visualizar um conjunto de 20 ou 30 imagens, muito mais fácil para os leitores.

Apesar do sucesso da decisão, o caso do Dementia é claramente uma excepção devido ao grande número de imagens que temos neste tipo de artigos. É que fazer “scroll” a 20 ou 30 imagens acaba por ser um processo cansativo e maçador, eram simplesmente demasiadas imagens.

Resumindo:

  • 1º- Todos os casos são diferentes e necessitam obrigatoriamente de análises distintas. Na batalha Clique VS Scroll qualquer um pode sair vencedor e irá depender de muitos fatores;
  • 2º- O scroll é um método com o qual os leitores estão mais familiarizados;
  • 3º- Cerca de 77% dos novos visitantes de um website não fazem scroll;
  • 4º- Coloquem a informação mais importante de um website “above the fold” pois só assim garantem que os novos visitantes a possam ver e que os habituais prestem mais atenção a ela;
  • 5º- O Scroll em excesso pode tornar-se cansativo e até um pouco irritante;
  • 6º- Mudar de clique para scroll não deve apresentar grandes problemas, no entanto mudar de scroll para clique é uma decisão mais delicada e como podem ver no exemplo do Dementia deve que ser muito bem pensada;
  • 6º- O melhor é tomar esta decisão antes de lançarmos um website para não modificarmos a estratégia a meio. É uma má ideia obrigar leitores já habituados ao scroll a clicar!

Não se esqueçam também que existem vários factores que pesam na tomada de decisão, porventura poderá ser necessária uma reestruturação da disposição de informação, alterações de design e outro tipo de trabalhos para que se possa dar primazia ao clique e se obtenha bons resultados.

Não se esqueçam de deixar os vossos comentários e partilhem também as vossas experiências.

Cumprimentos

Temas: , , , ,

Ano Novo, Vida Nova

Janeiro 1, 2010 Vídeos 0 Comentários

Já estamos em 2010, um novo ano e com toda a certeza que muitos webmasters já têm planos para ele. Eu pessoalmente espero que este ano seja melhor na web nacional, que sejam criados mais websites de qualidade e acima de tudo que se trabalhe com honestidade. O que falta nesta web são pessoas sérias e com capacidade e espero que 2010 seja um ano muito melhor do que 2009.

Temas: , , , , , ,