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

Demo: Teste De Usabilidade

Outubro 2, 2010 Usabilidade, Vídeos 1 Comment

Se você já estudou alguma vez usabilidade, então Steve Krug deve ser um nome bem familiar. O autor do aclamado livro “Don’t Make Me Think” e do mais recente “Rocket Surgery Made Easy” é um especialista nestas matérias e oferece-nos perspectivas bem interessantes.

Em Portugal a usabilidade ainda é ignorada pela maioria dos webmasters, é verdade que alguns até pensam nela e têm algum cuidado com os seus projectos, mas a realidade é que existem poucos websites em que seja notório um esforço sério nesse plano. É verdade que nem todos se podem dar ao luxo de investir balúrdios nos seus projectos, no entanto o que vão poder perceber neste vídeo é que os testes de usabilidade não têm que ser necessariamente mega-complexos, pelo contrário eles até podem ser muito simples.

O Steve Krug disponibilizou há uns tempos um pequeno vídeo de demonstração com cerca de 20 minutos, sobre como se processa um teste de usabilidade. Apesar de ser apenas um exemplo, é uma boa oportunidade para observamos uma pessoa a interagir com um website e compreendermos como uma boa usabilidade pode ser determinante.

Temas: , , , ,

Less Is More: Livre-se Dos Excessos

Março 25, 2010 Projetos, Usabilidade 0 Comentários

Less Is More

Já todos ouvimos a célebre expressão “less is more” e os gestores de projetos online devem conhecê-la melhor do que ninguém. A sua lógica inegável defende que o excesso é prejudicial e que tudo está relacionado com um equilíbrio organizacional que se traduz em simplicidade. Mas equilibrar a balança não é uma tarefa fácil, implica um constante trabalho de reavaliação e um conhecimento profundo das necessidades do leitor.

A melhor forma de fazer evoluir um projecto, é através de constantes reavaliações. Neste mundo online não existe o website perfeito e se procurarmos bem existe sempre algo que podemos melhorar. É neste processo que inevitavelmente vamos “dar de caras” com uma das tarefas mais importantes para qualquer gestor de projectos online, a de retirar os excessos.

A brilhante expressão “less is more” para a maior parte de nós não é uma novidade, a frase do século XVIII retirada de um poema do dramaturgo inglês Robert Browning, reflete na perfeição a importância da simplicidade e como por vezes menos é literalmente mais. Quando criamos um projeto, quando montamos um website existem diversos elementos que queremos inserir no mesmo, o problema é que nós temos uma tendência natural para exagerar e este pode ser um erro fatal.

Tal como em todas as minhas outras abordagens, vou dividir também esta em diversos pontos que considero fundamentais e podem auxiliar qualquer webmaster nesta tarefa muito importante que é a remoção eficaz de excessos. Por favor tenha também em consideração que para cada website existe um conjunto de processos e metodologias específicas, que irão depender de muitos factores, entre eles a temática, o target e por aí fora. Ou seja, esta abordagem irá focar aspectos importantes e dela você poderá retirar informação para posteriormente realizar o seu trabalho.

1º- Estética E Organização

Este primeiro ponto é mais introdutório e com ele eu pretendo dar relevância a dois aspectos extremamente importantes e que não podem ser ignorados. Não hajam dúvidas que hoje em dia com os recursos e ferramentas à nossa disposição, não existem razões que justifiquem um website esteticamente péssimo. Para WordPress por exemplo, existem themes grátis ou até pagas que já estão devidamente preparadas,  que são criadas tendo em conta a simplicidade e a funcionalidade, que são apelativas ao olhar sem serem demasiado exuberantes. Portanto se por acaso tem em mente um projecto em WordPress, não se esqueça disto.

O outro aspecto importantíssimo é a organização, ou seja, “arrumar” tudo no seu devido lugar. Uma organização correcta, tendo em conta aspectos como a usabilidade ou acessibilidade, é como se costuma dizer “meio caminho andado” e facilita também trabalhos futuros. Porquê que a organização é tão importante? A resposta é simples, porque quanto mais organizado esteja o website, menor será a sensação de excesso:

Deixe-me explicar-lhe esta última frase com um exemplo:

- Quando viajo durante uma semana para fora do país, preparo um conjunto de roupas e arrumo-os na mala. Infelizmente eu não tenho muito jeito para organizar a roupa na mala e no final parece que estou a levar roupa a mais e não consigo fechar a maldita mala. O que costumo fazer é recorrer à minha tia que é uma perita nestas coisas. Surpreendentemente quando é ela a fazer o trabalho, eu não só consigo fechar a mala, como podia levar ainda mais coisas. No final parece que estou a levar menos roupa, quando na realidade é exatamente a mesma quantidade, só que desta vez bem organizada.

De certeza que compreende este exemplo que se aplica totalmente em projectos online. Vamos dividir esta parte em dois pontos importantes:

  • 1.1 – Uma boa organização permite analisar com eficácia quais os excessos de um website;
  • 1.2 – Uma boa organização pode “mascarar” um pouco o excesso de informação/conteúdo/elementos;

No primeiro significa que só faz sentido reavaliar um projecto para verificar a existência de excessos, após uma reorganização do mesmo. Ou seja, por vezes podemos julgar que um determinado website está demasiado preenchido, mas após uma reorganização verificamos que afinal estávamos errados. No segundo é fulcral compreender que mesmo existindo um excesso, ele pode ser um pouco “mascarado” com uma boa organização, sendo óbvio que neste caso estamos mais perante um “remendo” do que uma solução permanente.

2º- Um “Não” ao Ruído Visual

Um grande problema nos websites modernos é o chamado “ruído visual” que acontece sempre que são adicionados elementos, imagens ou cores desnecessárias que contribuem para dispersar a atenção do leitor e prejudicam em muito a experiência de navegação. É um erro comum, cometido especialmente por muitos aspirantes a webmasters que com o tempo vão adicionando mais um elemento, mais outro elemento e mais outro até que de repente o seu website parece uma feira virtual.

Por vezes vejo projectos simples como blogues, cujos autores decidem incorporar demasiados elementos e preencher todos os espaços e mais alguns, até já cheguei a ver projectos de excelentes designers com um aspecto incrível, mas que também pecam por alguns excessos desnecessários.

O gestor deve observar o projecto da perspectiva do leitor e nunca de acordo com os seus gostos pessoais, até porque um designer poderá exagerar na componente visual, um programador na complexidade das aplicações e o resultado final pode ser um projecto desequilibrado. Não é isso que queremos, a complexidade deve ser evitada, quanto mais simples melhor, quanto menos obrigarmos o leitor a pensar mais lhe facilitamos a vida.

 

3º- Reduza O Número De Blocos Publicitários

Na sequência do ponto anterior, aqui fica um conselho extremamente importante, não exagere na publicidade. A máxima “less is more” também serve para a publicidade que em alguns projectos é exagerada. Vários estudos provam que websites com menos espaços publicitários são mais rentáveis do que websites com mais espaços publicitários. Faz todo o sentido, porque quanto mais publicidade colocamos num website, mais ruído visual acrescentamos ao projecto, mais se dissipa a atenção do leitor e consequentemente menos atenção ele dará à publicidade.

Uma prática errada muito comum é a da rodear o conteúdo com publicidade, aqui fica um pequeno exemplo exagerado:

É claro que este exemplo é claramente um exagero, no entanto ele demonstra na perfeição o que acontece em muitos websites. Neste ponto existe uma lição importante:

  • 3.1 – Nunca se deve colocar blocos publicitários muito perto uns dos outros.

Como já disse em cima, não só não será tão rentável, como irá acrescentar mais ruído visual desnecessário e claro, dá um ar “cheesy” ao projecto e prejudica a sua imagem perante os visitantes. Dê algum espaço entre eles, coloque-a de uma forma não invasiva, um bloco “above the fold” é o recomendado, mais do que isso deve ser muito bem pensado. O resto da publicidade coloque-a “below the fold” em pontos estratégicos, mas não exagere.

4º- Less Is More E é Muito Melhor

Retirar excessos, simplificar, colocar de parte a complexidade e tornar um website numa ferramenta eficaz de comunicação não é uma tarefa fácil, mas quando o trabalho é bem feito o resultado costuma ser geralmente muito bom. Vamos a um exemplo:

clique nas imagens para ver uma versão ampliada das mesmas

Sapo (Versão Anterior)

Todos se devem recordar para a versão antiga do portal da Sapo. Não me interpretem mal, a versão antiga não estava nada mal, aliás o Sapo era e continua a ser, no que a portais diz respeito, uma referência e um local onde podemos aprender muito. Mas com o passar dos anos, com o aparecimento de novas práticas surgiram novas tendências e um portal necessita de se actualizar.

Sapo (Nova Versão)

Apesar da nova versão não ter sido propriamente surpreendente ou super-inovadora, uma coisa é certa, ficou consideravelmente melhor do que a anterior. A reorganização de alguns elementos e remoção de outros, a atenção a questões como a usabilidade é óbvia e o resultado final é muito bom. Observando com atenção as duas imagens podemos verificar algumas das mudanças e como por vezes o mesmo elemento trabalhado de uma forma diferente pode ficar muito melhor.

5º- Não Desvie a Atenção Do Visitante Para Zonas Desnecessárias

Este quinto ponto é talvez o mais importante de todos, quando um visitante entra em contacto com um website, a última coisa que queremos é desviar a sua atenção para zonas de importância menor, pois corremos o risco de não transmitirmos a mensagem com eficácia. Vamos a alguns exemplos:

Nos dois exemplos de cima, existe claramente um foco principal seguido de outros adicionais. Repare que eu coloquei sempre o foco mais importante do lado esquerdo e isto prende-se com o facto do visitante ler da esquerda para a direita, logo faz todo o sentido usar esta posição. A ideia passa pela introdução de poucos blocos, ou seja o visitante não tem assim tantos lugares para olhar e como tal aumenta a probabilidade para que olhe primeiro para os locais onde queremos que ele olhe. Não se esqueça também que são apenas exemplos e existem inúmeras formas de trabalhar.

O segredo neste exemplo é utilizar os focos de forma inteligente, utilizando-os para imediatamente transmitir a sua mensagem. Coloque pouca informação, de forma a que o visitante a possa “digerir” numa questão de segundos. Agora veja um exemplo de algo que não se deve fazer:

A primeira falha óbvia é a inexistência de um foco principal e a segunda é o excesso de blocos. Existem muitos projetos por aí que cometem este erro e que prejudicam a vida ao visitante que tem dificuldades em processar tanta informação. Se é possível trabalhar com este modelo? Sim é possível, mas o melhor seria retirar alguns blocos e reorganizar tudo. Vamos agora olhar para o mesmo modelo mas trabalhado de outra forma:

Na imagem de cima alguns blocos foram retirados e imediatamente fica tudo muito mais simples e acessível. Eu pessoalmente gosto do foco principal do lado esquerdo, no entanto também é possível fazê-lo funcionar ao centro. Se olharmos para os dois exemplos, podemos perceber que um número maior de blocos dispersa mais a atenção do visitante, enquanto um número menor de blocos – tal como já foi dito -  irá concentrar muito mais a atenção do visitante.

Se num website você quer que o visitante olhe primeiro para uma determinada secção, então o melhor é não lhe dar demasiadas alternativas e destacar correctamente essa mesma secção.

6º- Elimine Funcionalidades e Elementos Desnecessários

Corte com funcionalidades ou elementos desnecessários, aqueles que na maior parte das vezes passam ao lado dos utilizadores e ninguém sequer lhes dá uso. Livre-se deles, se ninguém lhes liga nenhuma é porque não fazem falta e só ocupam espaço. Mas atenção, isto não significa que deve abdicar de tudo e mais alguma coisa, nada disso, o que é importante compreender é que só devem ser mantidas funcionalidades ou elementos que sejam realmente úteis.

Por vezes podemos ficar surpreendidos com a quantidade de funcionalidades ou elementos desnecessários um website pode ter.

7º- No Retirar É Que Está O Ganho

Seguindo a máxima do “less is more“, nós podemos melhorar consideravelmente um website. Aliás encare este como o principal desafio do seu trabalho, recorra à simplicidade para comunicar com rapidez e eficácia, porque um website deve ser acima de tudo, uma potente ferramenta de comunicação.

Procure novas formas de fazer o mesmo mas com muito menos, não se esqueça que este mundo está em constante evolução e todos os dias surgem novas ideias, novas técnicas que podem ser uma ajuda preciosa para o seu trabalho. Uma dica muito importante – e tenha atenção agora porque esta é mesmo importante – foi algo que já mencionei no Desmistificando o “Above The Fold” e que tem a ver com as respostas para o que eu chamo de “perguntas naturais“:

  • 1º- Quem é?
  • 2º- O que é?
  • 3º- Para que serve?
  • 4º- Como utilizar?
  • 5º- Porquê que devo utilizar?

Com que rapidez você responde às perguntas naturais?

Na realidade a rapidez com que você responde a este tipo de perguntas determina se você está ou não a fazer um bom trabalho.

Resumindo:

  • 1º- Dê primazia a um design de qualidade (sem excessos) que respeite princípios como a usabilidade e acessibilidade;
  • 2º- A organização é fundamental, ela beneficia a compreensão e pode até mascarar algum excesso;
  • 3º- O “ruído visual” é um grande problema nos websites modernos, tenha cuidado e mantenha o equilíbrio;
  • 4º- Não é necessário exagerar nos blocos publicitários, primeiro porque a quantidade não garante mais rendimentos, segundo porque os leitores odeiam muita publicidade e finalmente porque fica muito mal. Dê espaço entre os blocos publicitários, não rodeie o conteúdo com publicidade de forma grosseira, é uma técnica de um amadorismo desconcertante;
  • 5º- Retire excessos, simplifique, livre-se da complexidade;
  • 6º- Não desvie a atenção do visitante para secções pouco importantes;
  • 7º- A remoção de excessos é um trabalho complexo, não se esqueça que um website é uma ferramentas de comunicação;
  • 8º- Assim que o visitante entra em contato com um website ele imediatamente começa a formular aquilo que eu chamo de “perguntas naturais”, quanto mais rápido fornecermos as repostas, menos ele terá que pensar e melhor transmitiremos a mensagem.

Finalmente:

A frase “less is more” deve estar sempre presente em tudo o que fazemos, especialmente se queremos comunicar melhor com os nossos leitores.

 

 

Temas: , , ,

Desmistificando O “Above The Fold”

Março 6, 2010 Projetos, Usabilidade 2 Comments

Above The Fold

Como sabem eu tenho utilizado em alguns dos meus artigos a expressão “Above the Fold”, especialmente quando me refiro a um determinado aspecto de um website que necessita de ganhar o devido destaque. Para a maior parte dos webmasters a expressão “Above The Fold” não é novidade nenhuma, apesar disso conhecer a expressão não significa necessariamente compreendê-la.

Primeiro é importante esclarecer que “Above The Fold” ou como alguns gostam de chamar “Acima Da Dobra“, não é de todo uma novidade, muito pelo contrário é uma expressão utilizada na imprensa há muito tempo, muito antes de haver Internet. Ela nasceu com os jornais porque como vocês sabem, eles são colocados nas bancas geralmente dobrados, sendo que uma parte da dobra fica visível e outra não. Logo no inicio os jornais compreenderam que aqueles que colocavam as notícias mais importantes na parte superior da primeira página – que era precisamente aquela que ficava visível depois da dobra – eram vendidos com mais facilidade.

Com a Internet e os websites, a expressão foi sendo sempre utilizada e hoje é um dos aspectos mais importantes a ter conta num website. Hoje “Above The Fold” continua a ser o nome que se dá à parte superior da página, aquela em que vemos assim que entramos no website sem necessitarmos de fazer scroll e tendo em conta que  cerca de 70% dos novos visitantes de um website não fazem scroll, pode-se dizer que é uma parte muito importante.

Este meu artigo tem como objectivo desmistificar um pouco o conceito, determinar realmente qual é a sua real importância e talvez romper com algumas ideias e estereótipos que se formaram ao longo do tempo. Mais uma vez a minha abordagem será simples, dividida em pontos – pois permite-me organizar melhor as ideias e impede que me perca em divagações sem sentido – e acessível até ao mais leigo.

1º- Preocupe-se Com o “Above The Fold”

Isto não é uma brincadeira, o “Above The Fold” é uma realidade, trata-se de uma das secções mais importantes de qualquer website e deve ser cuidadosamente planeada. Tal como já referi em cima, não se esqueça que a maior parte dos novos visitantes nem sequer chega a fazer scroll, o que significa que é “Above The Fold” que você pode captar com eficácia a atenção deles.

Vamos olhar para um exemplo:

Como pode ver na imagem de cima, a área assinalada é importante, é através dela que você estabelece o primeiro contacto com o seu visitante, não existindo dúvidas de que como em tudo na vida, a primeira impressão tem um enorme peso.

2º- Não Coloque Demasiados Elementos “Above The Fold”

Alguns webmasters conhecendo perfeitamente a importância desta secção num website, por vezes optam por colocar demasiados elementos “Above The Fold” o que é um enorme erro. É verdade que os novos visitantes vão estar particularmente sensíveis a toda esta área, mas isso não significa que você a deve encher de demasiados elementos, pois quantos mais elementos você coloca, mais dispersada ficará a atenção do visitante.

De certeza que já ouviu dizer dizer que “less is more” e esta máxima aplica-se em todos os aspectos de um website, é preciso pensar e estudar bem todas as opções, é preciso garantir que se oferece aos visitantes apenas o que é relevante para eles e nada mais do que isso. Mas não julgue que esta é uma tarefa fácil, na maior parte das vezes quando acreditamos que estamos a fazer tudo bem é quando estamos redondamente  enganados. É isso que vou demonstrar no próximo ponto.

3º- Um Above The Fold Espectacular Pode Ser Prejudicial

Aqui está, é a partir deste terceiro ponto que eu começo desde já a romper com algumas ideias. É óbvio que o “Above The Fold” é extremamente importante, mas ao contrário do que muitos pensam isso não significa que o devemos trabalhar até à exaustão para que fique demasiado espectacular! Captar a atenção do visitante é uma coisa, deixá-lo completamente maravilhado apresentando todos os pontos fortes de um projeto above the fold, é outra.

Há quem diga: “Mas se o leitor pode ficar maravilhado com o trabalho assim que entra, então ainda melhor!“, mas estão errados! O processo de navegação num website é um processo de exploração, o visitante pretende descobrir mais e ir ficando gradualmente mais interessado. Isto significa que caso os pontos mais fortes do projecto sejam todos colocados “Above The Fold” e o resto não esteja à altura, o visitante vai ficando gradualmente mais desiludido com o que encontra.

Queremos chamar a atenção do visitante, mas os nossos pontos verdadeiramente mais fortes não devem estar “above” mas “below the fold”. Mais uma vez não se esqueça, aquele que navega na Internet é um explorador, o seu website deve permitir que ele possa ir explorando até que finalmente encontre o tão ambicionado “tesouro” que é no fundo a mais valia do seu projecto. Vamos ver um exemplo gráfico:

Como pode ver pela imagem:

1º- No lado esquerdo demonstro o perigo de se revelar demasiado acima da dobra, prejudicando assim o ato de exploração e gerando alguma perda de interesse ou até desilusão;

2º- Já do lado direito temos a forma correta, ou seja, captamos a atenção do visitante e despertamos o interesse, depois vamos construindo mais interesse até que ele encontre o “tesouro”, que são os pontos fortes do projecto. O ato de exploração não é prejudicado e o seu projecto é apresentado ao visitante da forma correta.

Mas atenção, não deturpe o que eu estou aqui a dizer. Isto não significa que o footer do website é o mais importante, nem significa que o “above the fold” é pouco importante. Neste ponto é fundamental compreender que chamar a atenção do visitante não significa necessariamente que se deve criar uma secção acima da dobra espectacular, revelando o que de melhor o projeto tem.

Compreenda que tal como nos jornais, também nos websites o importante é despertar a curiosidade, levar o visitante a explorá-lo e a ficar satisfeito com o que encontra. Inverter o processo é um erro porque contraria o principio da exploração.

4º- Os Visitantes Esperam Fazer Scroll

Porquê que o “above the fold” deve conter apenas a informação necessária para captar com eficácia a atenção do visitante? Porque na realidade os visitantes esperam fazer scroll! De facto qualquer pessoa que navegue na Internet está muito familiarizada com o scroll e isto é importante, pois significa que assim que o website capte a sua atenção, o que ela vai fazer a seguir é o “scroll”.

Alguns podem dizer: Mas qual é a importância disto se cerca de 70% dos novos visitantes nem sequer fazem scroll? Mas é preciso compreender este valor, porque quando estamos a falar de um visitante cuja atenção foi captada com eficácia, as coisas mudam de figura. A estatísticas servem como aviso, obviamente que num website de qualidade e bem pensado, esta percentagem desce dramaticamente.

O objectivo principal acima da dobra é o de captar a atenção do visitante com eficácia, sem distracções e sem exageros. Depois não se preocupe que o leitor faz o resto, se ele estiver mesmo interessado ele vai fazer scroll, o que significa que vai aceder a mais informação relevante. A partir deste momento você ganhou um visitante curioso e estes são os que se podem transformar em visitantes assíduos.

5º- Não Tenha Receio De Quebrar As Regras

Existem exemplos práticos de boas estratégias aplicadas “above the fold” com resultados muito bons, no entanto também existem exemplos de websites que não se preocupam tanto com essa secção mas continuam a ter resultados bons. Dito isto, a verdade é que hoje em dia é cada vez mais complicado compreender o que irá resultar, ou seja, o que resultou para X pode não resultar para Y e assim sucessivamente.

Eu costumo dizer que para cada website existem estratégias e práticas diferentes e os webmasters não podem ter receio de quebrar as regras. É assim que se inova e por vezes se cria tendências. O visitante moderno está em constante mutação, numa questão de meses tudo pode mudar e o que funcionava pode deixar de funcionar. É importante que conheça a regras, mas também que esteja disposto a quebrá-las sempre que seja necessário.

A secção “above the fold” é apenas mais um aspecto de um projecto que você deve ter em conta, porém existem muitos mais.

6º- Conheça e Compreenda A Secção “Above The Fold” Do Website

Cada website tem as suas particularidades e todos são diferentes. Isto significa que a secção acima da dobra e a sua importância irá depender de inúmeros factores. Naturalmente que o website de uma Service Provider, ou uma loja online têm objectivos e estruturas completamente diferentes. Cabe ao webmaster analisar cada caso e certificar-se que conhece a secção “above the fold” de um website melhor do que ninguém.

Mas cuidado, não julgue que por ter “descodificado” os segredos desta zona num dos seus projectos, que o mesmo se aplica para os restantes. Nada disso, para cada novo projecto você terá forçosamente que realizar novos estudos:

Exemplos:

Conhecer a secção “above the fold” de um determinado website não significa saber onde ela está, mas sim saber qual a melhor forma de disposição da informação e quais são elementos que conseguirão chamar a atenção do visitante com maior eficácia. Todos sabemos qual é a zona acima da dobra, mas percebê-la, compreendê-la e tirar o maior partido dela não é uma tarefa fácil.

7º- Responda Às Perguntas Naturais

Este último ponto da minha abordagem é mais em estilo de dica importante. O que quero eu dizer com “respostas às perguntas naturais”? É muito simples, imagine que está na vida real a visitar uma loja ou uma empresa, assim que você entra pela porta principal você irá ter uma primeira impressão desse local, certo?

O mesmo acontece com um visitante de um website, no sentido em que também ele quando visita uma página, tem na secção acima da dobra a primeira impressão desse local. E curiosos como nós somos, a realidade é que num primeiro contacto gostamos sempre de ter algumas respostas ao que eu chamo de perguntas naturais como por exemplo:

  • 1º- Quem és?
  • 2º- Onde estou eu?
  • 3º- Para onde posso ir?
  • 5º- Porquê devo eu ir para ali?

Estas são apenas algumas das muitas perguntas que fazemos sempre que entramos em contacto com algo novo. É óbvio que elas variam e podem ser diferentes dependendo daquilo com que estamos a interagir. Mas ao responder a perguntas básicas como estas, você está a facilitar a vida ao visitante, porque não o obriga a pensar!

Uma excelente visita é precisamente aquela em que o visitante se sente confortável, na qual num primeiro contacto ele recebe as respostas às suas perguntas naturais e em apenas alguns segundos compreende perfeitamente todo o website. É acima da dobra que nós podemos dar uma ajuda ao visitante, captamos a atenção, respondemos a perguntas e incentivamos a exploração numa questão de segundos e isto sim é eficácia.

Resumo:

  • 1º- Preocupe-se Com o “Above The Fold” não tenha dúvidas que é uma das zonas mais importantes do seu website e um conceito que deve obrigatoriamente conhecer;
  • 2º- Não coloque demasiados elementos acima da dobra, vai dispersar a atenção do visitante;
  • 3º- Não faça o “above the fold” mais espectacular e revelador que existe sob pena do visitante ficar desiludido com o resto do website. Utilize a zona para chamar a atenção, faça-o quase de uma forma “teaser” e incentive a exploração;
  • 4º- Os internautas estão habituados a fazer scroll, eles esperam fazer scroll;
  • 5º- Não tenha receio de quebrar as regras;
  • 6º- Estude, conheça e compreenda a secção “above the fold”, não chega saber que ela existe;
  • 7º- Responda a perguntas naturais “above the fold” e não obrigue o visitante a pensar.

Finalmente:

Utilize este artigo e outros semelhantes para conhecer opiniões sobre este tema. A realidade é que cada um tem a sua e nem todos defendem o mesmo. Eu pessoalmente acho que se deve dar importância à zona “above the fold” mas é fundamental que sejamos inteligentes na sua utilização.

Até à próxima.

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: , , , ,

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: , , , ,

10 Dicas Sobre Usabilidade

Dezembro 29, 2009 Usabilidade 5 Comments

Não é fácil ser-se simples e quando se trata de projetos online, a simplicidade pode ser a chave para o sucesso. O objetivo é não obrigar os utilizadores a pensar, tornar tudo acessível, simples e eficaz.

O design mais bonito nem sempre é o mais eficaz, um webdesigner pode não ser o maior mestre em usabilidade. Para retirarem conclusões devem reavaliar projetos, questionar os utilizadores/leitores e possuir uma capacidade para se colocaram no lugar deles. Pensar de forma simples, este é o segredo…

Aqui fica uma lista de 10 dicas de usabilidade que por vezes muitos webmasters ignoram:

1º- Um Design De Qualidade Torna o Projeto mais credível

Consciente ou inconscientemente, um leitor/utilizador julga um website pela sua imagem. O design, as cores, o tipo de letra são elementos muito importantes. Caso ele se depare com o website desagradável, o mais provável é que nunca mais volte e fique com uma má imagem do projeto.

Outros fatores que também tornam o projeto mais credível são: a qualidade do conteúdo, os erros de ortografia e a organização dos elementos.

2º- Azul é a Melhor Cor Para Os Links

Deixem-se de invenções, não há melhor cor que o azul para links. Isto acontece porque durante anos esta cor sempre foi a mais utilizada e os utilizadores (mesmo os inexperientes) fazem imediatamente a associação.Para além disso até os browsers utilizam a cor azul para os links por definição e como tal as pessoas esperam encontrá-la. De acordo com vários testes realizados, um utilizador deteta muito mais rapidamente uma hiperligação azul do que qualquer outra.

3º- Espaços Brancos Beneficiam A Compreensão

A cor branca é a ideal para fundos e especialmente para websites que vivem do seu conteúdo. Por exemplo os leitores lêem com mais facilidade um texto convencional com letras pretas num fundo branco.

Este principio também defende bons espaços entre os parágrafos (o normal deve chegar, não vamos entrar em loucuras) e entre as margens. Como devem saber o texto que não esteja justificado também se lê com mais facilidade, mas neste aspecto eu vou um pouco contra os princípios da usabilidade e apesar de não ter o texto justificado no meu blogue pessoal, gosto muito mais de o utilizar. Na minha opinião transmite uma ideia de organização que a mim pessoalmente me agrada.

4º- Zonas Clicáveis Não Podem Ser Minúsculas

São zonas que por definição existem para os utilizadores clicarem nelas, quando são pequenas ao ponto de dificultar o clique é óbvio que estamos a prejudicar a experiência ao utilizador. Acho que esta é óbvia!

5º- Nunca Usar Paginação No Conteúdo

Se o conteúdo é grande demais tentem reduzir, caso não o consigam, dividam-no em partes, mas no sentido em que cada parte é um artigo separado. Nunca separem o mesmo artigo em diferentes páginas

6º- Tornem o search acessível

Como já repararam o meu blogue pessoal não tem sequer a pesquisa. É um erro (que brevemente irei resolver) porque alguns utilizadores vão querer pesquisar e esta é uma funcionalidade obrigatória praticamente em todos os websites.

Outro problema é quando o search existe, mas é difícil de encontrar. Ou seja temos que pesquisar para encontrar o search, algo que não faz muito sentido.

7º- Demasiadas Aplicações que Necessitam de Registo

Obrigar o leitor a registar-se apenas para colocar um comentário ou realizar uma votação é uma má prática. Tudo deve ser simples e acessível e ninguém gosta de se registar para ter que fazer coisas que duram poucos segundos.

Existem grandes websites que fazem isso, mas como é óbvio eu não me estou a referir a projetos com grandes grupos de investimento por trás.

8º- Formulários Devem Ser Simples

Já é uma chatice suficiente um tipo ter que se registar, ele não necessita de “levar” com um formulário enorme onde é obrigado a colocar toda a sua informação e mais alguma. Mais uma vez, quanto mais simples melhor, quanto menos dados pedirem maior são as probabilidades para que os se leitores se registem. Tem tudo a ver com simplicidade.

9º- Links De Registo No Canto Superior Direito

É de acordo com os estudos o melhor local para colocarem o link para o registo ou o campo de registo. Qualquer utilizador que esteja interessado em registar-se, vai olhar para lá primeiro.

10º- Utilizem Poucas Cores

Esta dica é tão óbvia que todos a devem conhecer. Nada de festivais de cores nos projetos, o importante do ponto de vista da usabilidade é que seja simples, agradável e fácil de utilizar. Eliminem o “ruído” desnecessário pois só faz o leitor ficar atento a locais em que à partida não devia ficar.

Finalmente não se esqueçam que este é um processo contínuo, ou seja, vocês precisam de estar constantemente a analisar os vossos projetos, têm que se colocar na pele dos leitores e se possível pedir a sua opinião. Eu pessoalmente nunca estou muito satisfeito, acho que há sempre algo que se pode fazer melhor, que se pode tornar mais simples e agradável.

Usabilidade é no fundo um equilíbrio entre um bom design, uma boa disposição da informação e facilidade em aceder e utilizar essa mesma informação. É satisfazer a necessidade dos leitores/utilizadores e tentar tornar tudo muito mais instintivo.

Temas: , , ,