desenvolvimento para web » usabilidade

Melhorando a interação em formulários de busca

Tárcio Zemel — Tue, 03 Aug 2010 19:44:05 +0000

Melhorar a interação do campo de busca de um site permite que as pessoas que usam tal formulário para buscar tenham uma melhor experiência de uso (leia-se: usabilidade). Com pequenos detalhes, um pouquinho de bom-senso e algumas poucas linhas de jQuery, é possível promover efeitos interessante no campo de busca.

Para ficar claro, será abordada a seguinte interação:

Campo de busca é “populado” com um termo pré-definido;
Quando o campo recebe o foco, caso tenha o termo pré-definido, é limpo para a pessoa escrever o que pretende;
Quando o campo perde o foco, se o conteúdo for o mesmo do termo pré-definido (ou em branco), este termo reaparece;
Quando o botão é pressionado, caso o valor seja termo pré-definido ou esteja em branco, o form não submete e o foco passa ao campo apropriado.

O formulário de busca

Um exemplo de um formulário simples de busca, que pode ser usado em “sites reais”, profissionalmente, pode ser do tipo:

<form method="get" action="script.php" name="form" id="form">
    <input type="text" id="form-input" name="form-input" value="Snippets ou Scripts" />
    <input type="submit" id="form-submit" name="form-submit" value="Buscar" />
</form>

Termo pré-definido

A expressão “termo pré-definido” é mais adequada, já que cada site pede um “label” de indicação diferente, conforme as especificações e necessidades deste. Algumas pessoas preferem o termo “Buscar” ou “Procurar” com um botão de label “OK” ou “Vai”; já alguns sites preferem explicitar a função da busca com algo do tipo “Produtos ou Serviços”, acompanhado de um botão com o label “Buscar” (o que é uma abordagem bem interessante).

De uma maneira ou de outra, é preciso definir que termo será esse. Para nosso exemplo, vamos supor que seja um site voltado a desenvolvimento web e o termo pré-definido será “Snippets ou Scripts“. Vamos criar uma expressão regular simples com uma parte do termo pré definido:

patt = new RegExp('Snippets ou');

E por que não colocar a expressão inteira? Também poderia ser feito, mas o “esforço” para identificar o padrão aumenta em relação ao tamanho/complexidade da mesma. Sinta-se à vontade para fazer vários testes.

Melhorando a interação do formulário de busca

A melhora da interação se de duas formas:

Interção com o campo;
Interação com o botão;

Interação com o campo

Segundo o planejamento, o que se pretende é “Quando o campo recebe o foco, caso tenha o termo pré-definido, é limpo para a pessoa escrever o que pretende”. A lógica é testar a expressão regular: caso o teste seja positivo, o campo é limpo e recebe o foco para a pessoa escrever. Ao perder o foco, “se o conteúdo for o mesmo do termo pré-definido (ou em branco), este termo reaparece”.

$('#form-input')
.focus(function(){
    if (patt.test($(this).val()))
    {
        $(this).val('');
    }
})
.blur(function(){
    if ($(this).val() == '')
    {
        $(this).val('Snippets ou Scripts');
    }
});

Interação com o botão

A interação com o botão também é importante – e, infelizmente, é um ponto esquecido por muitos desenvolvedores. A ideia é, ao se clicar no botão, testar se a expressão “bate” ou o campo está em branco e, caso seja um desses casos, dar o foco no campo.

$('#form-submit').click(function(){
    if ((patt.test($('#form-input').val())) || ($('#form-input').val() == ''))
    {
        $('#busca-bottom').focus();
        return false; // Impede que o form seja submetido
    }
});

Não é necessário dar a instrução de limpar o campo no foco porque a peça de script anterior, sobre a interação com o campo, já faz isso.

JavaScript final

Juntando os pedaços de códigos, já devidamente explicados, tem-se o seguinte:

$('#form-input')
.focus(function(){
    if (patt.test($(this).val()))
    {
        $(this).val('');
    }
})
.blur(function(){
    if ($(this).val() == '')
    {
        $(this).val('Snippets ou Scripts');
    }
});
 
$('#form-submit').click(function(){
    if ((patt.test($('#form-input').val())) || ($('#form-input').val() == ''))
    {
        $('#busca-bottom').focus();
        return false; // Impede que o form seja submetido
    }
});

Conclusão sobre a melhora da interação em formulários de busca

Certamente essas não são as únicas melhorias cabíveis para a melhoria de usabilidade e interação de um formulário de busca simples, mas, certamente, são 2 medidas muito bem-vindas para que a experiência e “agradabilidade” sejam melhoradas.

Poderia haver, por exemplo, uma tooltip com o que se pode encontrar no site e/ou fornecendo algum exemplo de termo; implementar uma solução de autocomplete; ou, ao invés de limpar o campo, apenas selecionar todo o termo para, já digitação, substituí-lo pelo o que está sendo digitado. Depende da necessidade do projeto.

E você, tem alguma dica ou solução interessante para melhorar a interação em formulários de busca?

Estratégia Web de Pirâmide: guia para uma estratégia de web equilibrada

Tárcio Zemel — Tue, 29 Jun 2010 20:16:59 +0000

Empresas de todos os portes estão investindo pesado em mídia social sem se esforçar igualmente para forjar uma base sólida, construída sobre uma experiência do usuário amigável (usabilidade) e conteúdo de qualidade.

Para entregar um site que oferece aos usuários a experiência que eles estão procurando, é preciso que este seja definido sobre uma base sólida de conteúdos, navegação eficiente e boas práticas de SEO. Com isto em mente, vamos ao que Jason Schubring chama de “A Estratégia Web de Pirâmide”.

Este é um artigo traduzido do original “The Web Strategy Pyramid: A Well-balanced Web Strategy“, do blog Six Revisions, e sofreu algumas adaptações.

Conteúdo

“O conteúdo é rei” é um cliché, mas é assim por uma razão: é verdade. Um site pode ter os melhores anúncios, milhares de seguidores do Twitter e um web design espetacular, mas nenhuma destes mantém usuários, a não ser que se tenha o conteúdo que eles estão procurando. Um conteúdo fantástico é o combustível que impulsiona todos os outros esforços. Afinal, por que alguém iria fazer um tweet sobre o seu site ou adicionar em alguma rede social se não há nada que vale a pena compartilhar?

A melhor maneira para ter um bom começo (e se manter com níveis positivos de crescimento e retorno) é através do conteúdo. Se ele é único, cativante, interessante e direcionado ao público-alvo, então uma base sólida está construída.

Alguns pontos a considerar são:

O conteúdo do site é baseado em termos que os usuários entendem ou há o uso de jargões?
O conteúdo é intencionalmente escrito para a web ou é reaproveitado a partir de material offline?
Se você é um blogueiro, seu conteúdo tem uma perspectiva e ponto de vista únicos, dignos de discussão e retweets?

Conteúdo para web é um assunto complexo, repleto de nuances, detalhes e pormenores. Essas são somente perguntas-base. Estude mais!

Usabilidade / Design

Se os visitantes não conseguem encontrar o que procuram, não importa que você tenha enchido o site com um conteúdo fantástico. Navegação complexa, má utilização de espaços em branco, gráficos ou animações que distraem e uma grande variedade de outros tropeços de UX podem acabar com a possibilidade de transformar uma visita em venda ou um seguidor em um grande fã!

Não há muito tempo, realizar um teste de usabilidade em um site ou aplicativo complexo podia custar milhares de “dinheiros” (dólares, euros, reais ou o que for). Atualmente existem muitos recursos grátis de usabilidade para recolher feedback dos usuários.

Também é possível discutir questões simples com colegas de trabalho e outras pessoas através de wireframes ou algum outro tipo de “rascunho”. As tarefas mais comuns são realizadas com facilidade? A navegação é facilmente compreendida? Essa e outras questões fundamentais são de vital importância: fazer testes “básicos” é melhor que fazer teste nenhum!

SEO

Alguns podem estar surpresos com o fato de que SEO não é um dos itens na base da pirâmide. “Se não é possível encontrar quem se importa?”. Nesse ponto, cabe uma explicação: se o seu conteúdo está bem escrito e focado nas necessidades dos visitantes, então já estão sendo feitos grandes progressos no caminho para um SEO eficaz!

Demasiadas vezes as pessoas tentam encontrar o “segredo” para uma boa classificação nos mecanismos de busca, mas nunca têm tempo para avaliar o conteúdo em seu site. Um dos verdadeiros segredos de SEO está em construir uma base sólida de conteúdos relevantes. Novamente, aqui estão alguns pontos a considerar:

Há no conteúdo as palavras-chave que seus usuários estão procurando?
Seus títulos (tags h1, h2, h3 etc) incluem palavras-chave?
O título das páginas conteêm palavras-chave e informam o tema do conteúdo?

De novo, estas são apenas algumas questões básicas. Mais informações podem ser encontradas no artigo “As melhores práticas de SEO para seu site ou blog melhorar o posicionamento nos mecanismos de busca” e na categoria SEO.

Mídia Social

Para o prosseguimento da leitura, assume-se que você tenha tido, pelo menos, um contato superficial de sites como o Facebook, Twitter e MySpace e, provavelmente/de preferência, tenha alguma experiência usando ferramentas para otimizar as atividades de mídia social (Radian6, ScoutLabs, HootSuite, etc).

Com este pressuposto em mente, o ponto mais importante é: tenha uma estratégia de longo prazo para mídias sociais!

Não são raras as empresas e/ou pessoas que iniciam participação em redes sociais sem ter um público-alvo, um propósito claro e objetivos bem definidos.Você tem uma estratégia bem definida para mídias sociais? Aqui estão alguns itens para ajudá-lo a determinar se esse é o caso:

Se você está num ambiente corporativo e alguém é designado para trabalhar em social media, esse será um trabalho focado, próprio ou é algo que só será feito quando houver tempo livre?
Sua empresa usa uma agência de publicidade para mídias sociais? Usar esse tipos de empresas normalmente é grande para o lançamento inicial e campanhas em curso, mas o que acontece em dois anos? E em quatro anos?
Quem responde às preocupações dos seus clientes no Twitter, Facebook e fóruns? Será que a escolha resiste ao teste do tempo e as expectativas dos clientes? Mais importante ainda: é rentável?

Pay-per-click (PPC)

Agora que uma estratégia de web está feita baseada em um grande conteúdo, uma interface amigável com uma excelente usabilidade, SEO e social media, é o momento do PPC.

Dependendo das necessidades de negócios, PPC pode desempenhar um papel bastante importante. Na maioria dos casos típicos, no entanto, você estará melhor servido por cuidar de todos os outros itens essenciais antes de usar o PPC. Olhe dessa maneira: por que gastar dinheiro para atrair visitantes para um site que não está bem posicionado para fazer o máximo de cada uma dessas visitas?

Considerações finais

Será que essa “Estratégia Web de Pirâmide” está, potencialmente, baseada em necessidades específicas de web e para seu negócio? Certamente que sim.

Se você é uma pequena ou média empresa e venda um produto para um pequeno nicho de mercado, SEO e PPC podem ser mais importantes; se você é um blogueiro, a mídia social é uma parte vital para sua atuação. O ponto central permanece o mesmo, independentemente de seus objetivos: cuide do básico e só siga adiante quando o básico estiver aceitável.

Seus usuários (e sua conta bancária) agradecem!

Breadcrumbs: guia completo com exemplos e melhores práticas

Tárcio Zemel — Mon, 17 May 2010 13:00:21 +0000

Em sites com muitas páginas e níveis hierárquicos, o breadcrumb pode aumentar consideravelmente a maneira como os visitantes encontram seu caminho e navegam pelo site. Em termos de usabilidade, breadcrumbs reduzem o número de ações que um visitante precisa tomar para chegar a uma página de nível superior e melhora o nível de encontrabilidade de seções e páginas. Os breadcrumbs também são uma ajuda visual eficaz que indica a localização do usuário dentro da hierarquia do site, tornando-se uma grande fonte de informação contextual.

Este é um artigo traduzido do original “Breadcrumbs In Web Design: Examples And Best Practices“, da revista virtual Smashing Magazine, e sofreu algumas adaptações.

O que é um breadcrumb?

Breadcrumb no delicious

Um breacrumb (também conhecido como “migalhas de pão” ou “trilha de migalhas de pão”, em alusão à história de João e Maria) é um tipo de esquema de navegação auxiliar que revela a localização do usuário em um site ou aplicação web. Assim como no conto, breadcrumbs do mundo real oferecem aos usuários uma maneira de “rastrear” o caminho de volta e/ou ter uma visão geral e estruturada de em que ponto se encontra dentro da hierarquia em que se encontra.

Breadcrumbs geralmente são encontrados em sites que possuem uma grande quantidade de conteúdos organizados de forma hierárquica. Também é possível vê-los em aplicações web que têm mais de uma etapa, com uma função semelhante a de uma barra de progresso. Na sua forma mais simples, é disposto horizontalmente, em links de texto separadas por um símbolo de “maior que” (>), que indica o nível daquela página relativamente aos links das outras páginas na hierarquia do site.

Quando breadcrumbs devem ser usados?

É indicado usar navegação por breadcrumb para sites grandes e sites que possuem páginas organizadas hierarquicamente. Um cenário excelente são sites de comércio eletrônico, nos quais uma grande variedade de produtos são agrupados em categorias lógicas.

Não é aconselhável usar breadcrumb em sites que não têm agrupamento ou hierarquia lógica. Uma ótima maneira de determinar se um site se beneficiará com a navegação por breadcrumbs é construir um mapa do site ou um diagrama representando sua arquitetura de navegação e analisar se o recurso melhora a capacidade do usuário de navegar dentro e entre as categorias.

Breadcrumbs devem ser considerados como um recurso extra e não deve substituir o menu principal do site ou aplicativo. É uma característica de conveniência, um regime navegação secundária que permite aos usuários determinar onde estão e é considerado e deve ser usado como uma forma alternativa ou um auxiliar de navegação.

Tipos de breadcrumbs

Existem diversos tipos e diversas classificações para os breadcrumbs. Se todos os sistemas de classificação e ordenação fossem aqui listados, este artigo ficaria imenso! Portanto, para facilitar a abordagem do tema, será considerado que existem 3 tipos de breadcrumbs.

Breadcrumb de Localização

Breadcrumbs de Localização mostram ao usuário em qual ponto se encontra dentro da hierarquia do site. Eles são normalmente utilizados para sistemas de navegação em que se tem vários níveis (normalmente mais de dois). No exemplo abaixo (retirado do site SitePoint), cada link é para uma página que está um nível superior ao da sua direita.

Breadcrumb de Atributo

Breadcrumbs de Atributo servem para exibir os atributos de uma determinada página, em particular. Por exemplo, na Newegg o breadcrumb mostrar os atributos dos itens exibidos em uma página, em especial.

Esta página exibe todos os cases de computador que têm as características de serem fabricados pela Lian Li e ter uma MicroATX Mini Tower.

Breadcrumb de Caminho

Mostram aos usuários os passos que tomaram até chegar a uma página específica. Breadcrumbs de Caminho são dinâmicos e mostram as páginas que o usuário visitou antes de chegar na página página em que se encontra atualmente.

Em relação ao Breadcrumb de Localização e ao Breadcrumb de Atributo, o Breadcrumb de Caminho não é tão “popular” e não é tão utilizado em web sites e sistemas virtuais.

Benefícios de se usar breadcrumbs

Existem diversos benefícios em se valer dos breadcrumbs como sistema auxiliar de navegação em um site, dentre os quais:

Conveniência para os visitantes. Breadcrumbs são usados principalmente para dar aos usuários um meio secundário de navegar em um web site. Ao oferecer um breadcrumb em um grande site multi-nível, os visitantes podem navegar para as categorias de nível superior com mais facilidade.
Redução de cliques. Ao invés de usar o botão “Voltar” do navegador ou a navegação principal do site para voltar à página de nível superior, os usuários podem usar o breadcrumb para realizar a mesma ação com um menor número de cliques.
Ocupam pouco espaço. Geralmente os breadcrumbs são em sentido horizontal e de estilo “clean”, portanto não ocupam muito espaço na página. A vantagem é que eles têm pouco ou nenhum impacto negativo em termos de sobrecarga de conteúdo.
Redução de Taxa de Rejeição. Breadcrumbs podem ser uma ótima maneira de atrair visitantes pela primeira vez para examinar um site depois de ter visto a página de destino . Por exemplo, digamos que um usuário chega a uma página através de uma pesquisa no Google, vendo um breadcrumb, este pode “seduzir” o visitante para as páginas de nível superior para visualizar os tópicos relacionados ao seu interesse. Isso reduz a Taxa de Rejeição (Bounce Rate) do site.

Erros na implementação de breadcrumbs

Usar breadcrumbs é uma questão bastante simples e há apenas algumas diretrizes a considerar antes de tomar a decisão de implementá-lo em um site. Vamos dar uma olhada em alguns erros comuns que devem ser evitados.

Usar breadcrumb quando não é preciso

Um erro comum é usar breadcrumbs em ocasiões em que não trazem nenhum benefício aos visitantes.

No exemplo acima, o site Slicethepie corre o risco de sobrecarregar os usuários com opções de navegação demais: (1) navegação primária; (2) breadcrumb; e (3) navegação secundária; estão muito próximas umas das outras. O breadcrumb, neste aplicativo, não acrescenta nada aos visitantes, já que a navegação secundária para as páginas de nível inferior fica logo abaixo dele. Além disso, clicando no link de segundo nível no breadcrumb (“Music”), isso leva de volta à primeira aba (“Listen”), que sugere erroneamente que a primeira guia está em um nível mais elevado do que os outros dois (“Search” and “Artist hall of fame”).

Usar breadcrumbs como navegação primária

Como já comentado anteriormente, breadcrumbs devem ser usados como elemento de navegação auxiliar.

No exemplo acima, Mefeedia não oferece um menu de navegação primário para a visualização de vídeos. Embora exista a navegação textual no rodapé, não há menu de navegação no corpo das páginas, tornando-se difícil de navegar para outras seções do site.

Se um visitante chega em uma página de vídeo diretamente – por exemplo, através de um resultado de pesquisa do Google – sua única opção de navegação é o breadcrumb. Ou já estiver navegando nas páginas do site e acessar uma página que não exiba o menu de navegação principal, é preciso usar o botão “Voltar” do navegador para acessar o menu principal.

Usar breadcrumbs quando a página tem múltiplas categorias

Breadcrumbs têm uma estrutura linear, então, usá-los vai ser difícil se as páginas do site não podem ser classificadas em categorias puras. Decidir se se deve usar breadcrumb depende de como a hierarquia do site foi projetada. Quando uma página de nível inferior é (ou pode ser colocada) em mais de uma categoria-mãe, breadcrumbs são ineficazes, imprecisos e confusos para o usuário.

Considerações sobre o design da navegação por breadcrumb

Ao projetar um sistema de navegação por breadcrumb, é preciso ter em mente várias coisas. Vamos dar uma olhada em algumas questões que podem surgir quando você está trabalhando com breadcrumbs.

O que deve ser usado para separar os links do breadcrumb?

O mais comumente aceito e reconhecido símbolo para separar links em breadcrumbs é o “maior que” (>). Normalmente, o sinal é usado para denotar hierarquia, como no formato “Categoria Mãe > Categoria Filha”.

Outros símbolos utilizados são setas apontando para a direita, as marcas de ângulo direito de citação (») e barras (/).

A escolha depende da estética do site e do tipo de breadcrumb usado. Por exemplo, para um Breadcrumb de Caminho, no qual as ligações não têm necessariamente uma relação hierárquica entre si, usar o símbolo “>” não transmite sua relação apropriadamente.

O quão grande um breadcrumb deve ser?

Você não quer que o seu breadcrumb “domine” a página. O breadcrumb tem a função de ser um auxiliar aos visitantes; seu tamanho deve transmitir esta função aos usuários e, portanto, deve, pelo menos, ser menor ou menos importante do que o menu de navegação principal.

Uma boa regra a seguir para decidir o tamanho de um breadcrumb é que ele não deve ser o primeiro item a chamar a atenção do usuário quando ele entra em uma página do site.

Onde deve ser a localização do breadcrumb?

Breadcrumbs geralmente são exibidos na metade superior da página – abaixo do menu de navegação principal se um esquema de menu horizontal é usado.

Alguns poucos sites costumam repetir o breadcrumb próximo ao rodapé, no final do conteúdo de cada página, mas isso não é muito comum.

Resumo das características de breadcrumbs

Porque usar breadcrumbs:

São excelente recurso de usabilidade
Eliminam cliques adicionais
Mostram a hierarquia para usuário
São visualmente agradáveis
Fornecem ajuda adicional
Diminuem a Taxas de Rejeição do site
Estimulam o interesse e curiosidade dos visitantes

Melhores práticas de breadcrumbs:

Usar breadcrumbs no topo da página
Usar breadcrumbs consistentemente
Estilizar (design) os breadcrumbs apropriadamente
Separar claramente cada nível do breadcrumb
Destacar (normalmente com negrito) o último item do breadcrumb (página atual)
A página atual (último item do breadcrumb) não deve ser link
Breadcrumbs não devem substituir a navegação principal

Exemplos de breadcrumbs

Muita coisa foi vista neste guia completo sobre breadcrumbs e, como não poderia deixar de ser, uma listagem com exemplos de breadcrumbs se faz necessária. Para não pesar muito o tamanho da página nem tornar o artigo muito extenso, seguem links com exemplos variados de breadcrumbs para análise, observação e inspiração:

Ferramentas para criação de wireframes

Tárcio Zemel — Mon, 19 Apr 2010 14:59:28 +0000

Ao iniciar um novo projeto web é sempre uma boa ideia para começar com um wireframe. A finalidade de um wireframe é comunicar o layout de uma página sem se ater a cores e elementos de design. Wireframes são grandes “salvadores de tempo” e ajudam todas as partes envolvidas no projeto a chegar a acordos sobre a colocação dos principais elementos de página, como cabeçalhos, áreas de conteúdo, menus de navegação e rodapés.

Este é um artigo traduzido do original “10 Excellent Tools for Creating Web Design Wireframes“, do blog Web Design Ledger, e sofreu algumas adaptações.

MockFlow

MockFlow permite que você projete, com colaboração em tempo real, mockups de user interfaces para seu software ou web sites. Ele vem com vários componentes internos e ícones.

Axure

Axure permite criar wireframes, diagramas de fluxo, protótipos e especificações para aplicações e web sites. Ele conta com uma série de widgets, incluindo botões, campos de formulário, formas e elementos dinâmicos que você pode editar e formatar. Também é possível a criação de bibliotecas de widgets personalizado.

Balsamiq Mockups

Usando Balsamiq Mockups você se sente como se estivesse desenhando, mas é digital, então você pode ajustar e reorganizar controles facilmente e o resultado final é muito mais limpo! Com 75 controles pré-definidos para escolher, você pode projetar qualquer coisa, desde uma caixa de diálogo super-simples a um aplicativo RIA completo.

Pencil Project

O Pencil é um plugin gratuito para Firefox. Algumas das características-chave incluem: built-in stencils, suporte a documentos multi-página e múltiplas opções de exportação.

HotGloo

HotGloo é totalmente baseado na web e possui muitas features que permitem interações drag&drop bem simples e fáceis de se realizar. Essa á outra ferramenta para criação de wireframes que com suporte a colaboração em tempo real.

Mockingbird

Mockingbird é outro aplicativo web com foco na colaboração. Ele permite que você faça link entre vários mockupts e os visualize de forma interativa para ter ideia do fluxo de sua aplicação.

Cacoo

Cacoo é uma ferramenta online de desenho que permite que você crie mapas de site, wireframes, diagramas UML e diagramas de rede.

ProtoShare

A ferramenta web ProtoShare é bem fácil de usar. Com foco na prototipagem e colaboração, os membros da equipe podem rever o trabalho e fornecer feedback em tempo útil, ideias e sugestões em wireframes clicáveis ou conteúdo criativo.

iPlotz

Com iPlotz é possível criar rapidamente mockups e wireframes navegáveis e clicáveis para a prototipação de sites e aplicativos, em geral.

Recursos de usabilidade grátis

Tárcio Zemel — Mon, 12 Apr 2010 17:28:55 +0000

Usabilidade deve ser prioridade para cada site! Sem usabilidade, até mesmo o mais belo web design será ineficaz. Conheça recursos, ferramentas, software, listas, artigos e mais, que irão ajudá-lo a projetar e desenvolver sites altamente utilizáveis e proporcionar uma melhor experiência para o visitante.

Este é um artigo traduzido do original “35+ Usability Resources for Web Designers“, do blog DesignM.ag, e sofreu algumas adaptações.

UsabilityTest.com

Você pode participar da comunidade UsabilityTest.com para obter opiniões sobre usabilidade e/ou fornecer feedback para outros usuários. É possível assista a vídeos de usuários utilizando seu site ou aplicativo web e obter informações valiosas de como melhorar a interface.

Oferece painel administrativo onde é possível acompanhar estatísticas de testes através de gráficos de fácil entendimento, mas, sem dúvida, sua principal feature é a possibilidade de assistir a videos dos visitantes em seu site, acompanhando cada clique do mouse que foi dado durante a sessão de navegação.

WebsiteOptimization.com

WebsiteOptimization.com permite testar o tempo de carregamento de uma página e apresenta um relatório com alguns resultados interessantes a respeito.

Seu relatório de análise provê número de requisições HTTP; tamanho (peso) dos elementos da página, como HTML, imagens, CSS e javascript; total de objetos externos; tempos de download; dentre outros, Além disso, oferece, baseado nas análises feitas, recomendações de o que pode ser feito para aprimorar o desempenho do site.

LinkChecker Firefox Add On

Essa extensão do Firefox testa, com facilidade e rapidez, os links de uma página. Depois de instalado o LinkChecker, acesse uma página e, para usar o plugin, selecione, no Firefox, Ferramentas > Check Page Links; na barra de status, à direita, você pode acompanhar o número total de links encontrados e quantos % restam para o fim da análise.

Enquanto a ferramenta varre os links da página, vai “marcando” os links encontrados durante a análise. No final do processo você pode ver quais links são válidos pela cor dada a cada um: se estiver verde, então o link é válido; se for de outra cor que não o verde, então é hora de rever aquele link…

ClickHeat

Já havia comentado sobre o ClickHeat no artigo sobre 7 ferramentas para web designs melhores, mas, devido a sua importância, vale a pena reforçar o uso da ferramenta! O ClickHeat gera mapas de calor de cliques em páginas web, mostrando zonas “quentea” e “frias”.

É uma ferramenta que deve ser baixada e instalada no servidor – o processo é simples, não se preocupe. Depois de instalada e configurada, a ferramenta faz heatmaps baseados nos movimentos do cursor do mouse e cliques dados pelos visitantes. Nos relatórios de mapa de calor é possível filtrar amostragens por data, resolução de tela, navegador usado, dentre outros. Sem dúvida, uma excelente ferramenta para análises de usabilidade na web!

Five Second Test

Teste as primeiras impressões dos seus visitantes para melhorar o layout do seu site através de testes super rápidos de 5 segundos! Num primeiro momento pode parecer bastante estranho, mas a proposta do site com seus testes de 5 segundos é bastante válida como forma de complemento aos testes de usabilidade em um site.

Uma página de um site é apresentadadurante 5 segundos. Depois, 5 inputs aparecem e você deve indicar quais os itens que você se lembra de ter visto – ou seja, aqueles que chamaram sua atenção. A análise serve para saber se aquele recurso ou call to action que você inseriu no site realmente prendeu a atenção do visitante. Experimente o Five Second Test, é até divertido!

Colour Contrast Check

Baseado na recomendação de contraste do WCAG 2, (que, apesar das controvérsias, é um documento oficial do W3C), este recurso ajudará a evitar problemas com o contraste de cores em um web design.

Para os testes na Colour Contrast Check, você deve informar 2 cores (em hexadecimal ou utilizando os sliders presentes na ferramenta) que serão analisadas e, em tempo real, é possível conferir se a combinação escolhida passa ou não em testes, como a diferença de brilho, diferença de cor, se as cores são compatíveis, e outros mais.

Colour Contrast Analyzer Firefox Extension

Este analisador de cores vai testa o plano de fundo e as combinações de cores de texto encontrados em uma folha de estilo para indicar um contraste adequado. Depois de instalar o Colour Contrast Analyzer, você tem no Firefox Ferramentas > Analisador de contraste de cores.

É possível realizar testes de Índice de Constraste de Luminosidade, testar o Algoritmo AERT para Contraste de Cores ou realizar um teste completo, que mostra um relatório com ambos os testes. O relatório é bem interessante, confira!

GrayBit

GrayBit mostra uma versão em escala de cinza de um site para ajudar com testes de contraste. Você fornece o endereço da página que quer analisar e ele mostra tudo em escala de cinza, incluindo imagens.

O propósito desse tipo de teste que o GrayBit proporciona é saber se as páginas de um site realmente possuem contraste suficiente. Neste sentido, também o Colorblind Web Page Filter é bastante interessante!

4 elementos de design para um bom call to action

Tárcio Zemel — Mon, 08 Feb 2010 12:30:09 +0000

O artigo com dicas para call to actions eficientes foi interessante, mas faltou algum detalhamento extra, algo a mais sobre a prática de se fazer chamadas à ação. Por isso, indicar os 4 elementos de design para um bom call to action vai ser de muita valia para complementar. Depois de ler este texto, você está apto a fazer melhores call to actions e vai incrementar a usabilidade de seu site.

Este é um artigo traduzido do original “4 Simple Design Elements Behind a Good Call to Action“, do blog letscountthedays, e sofreu algumas adaptações.

Tamanho

Faça a sua chamada à ação grande o suficiente para que se destaque bastante na página! É o foco principal, certo? De modo geral, quanto maior é um elemento em uma página, mais visível será, consequentemente, deve ter maior importância. Um bom call to action é grande o suficiente para que ele seja reconhecido facilmente.

Antes de fazer botões enormemente e exageradamente gigantes, bastante atenção! Se você criar uma chamada muito grande, uma call to action enorme, os visitantes podem não compreender que o elemento é clicável e você vai perder completamente o “apelo” àquela ação. A dica é criar chamadas à ação grandes em relação aos outros elementos da página, tomando o cuidado para não cair no exagero ridículo e ineficiente.

Alternativamente, se você tiver mais de uma chamada à ação, utilize o tamanho segundo sua importância. O primeiro call to action deve ser maior do que o segundo e assim por diante.

Forma

Normalmente os melhores call to actions são os que tem forma de botão, chamam bastante atenção e são instantaneamente identificados como clicáveis – experimente usar os cantos arredondados ou circulares nas extremidades de call to actions para lhes dar a forma de um botão. Cantos arredondados funcionam bem, porém alguns usuários podem interpretar mal a chamada à ação, tomando por um anúncio ou banner. Como sempre no desenvolvimento web, o que vale é o bom senso!

Na intenção de fazer os call to actions parecidos com botões, um bom passo nessa direção é usar uma fonte tipográfica única, diferente das do restante da página, de modo a reforçar o “apelo” à ação. A diferença na forma da letra a ajudará a atrair a atenção para o call to action. Mais uma vez, bom senso na escolha para não destoar completamente do estilo e identidade visual do site.

Cor

Não é possível dizer que algum dos 4 elementos para um bom call to action que estão sendo abordados tem mais importância do que os demais, no entanto, a cor de seu call to action tem muita importância. Uma das formas mais rápidas para agarrar a atenção do usuário é usando um contrastante e visualmente interessante call to action. Escolher uma cor que se destaca do resto das cores utilizadas na página irá cumprir sua função.

Escolha uma cor que é especificamente exclusiva para sua chamada à ação; uma cor que não seja usada em qualquer outro lugar da página. Por exemplo, se o texto do site é preto e todos os links e botões são azuis, você deve usar cores diferentes de azul ou preto para o seu call to action. Ao invés disso, use uma cor mais clara e contrastantes como, por exemplo, o laranja. Ao utilizar laranja, a chamada à ação não ficará despercebida com o resto do azul e preto e vai receber bastante destaque em relação aos outros elementos da página.

Também é recomendável que você pratique o uso de cores de forma apropriada. É conveniente escolher cores chamativas e contrastantes, mas certifique-se de escolher as cores que se encaixam no esquema de cores geral do site. Também tome cuidado ao usar mais de uma chamada à ação na página: se você transformar a página em um arco-íris vai “drenar” o impacto do primeiro call to action e colocar os usuários em estado “não responsivo”.

Posição

Posicionar sua call to action “instintivamente”, no caminho dos olhos dos usuários, é extremamente importante. Não importa o quão grande, de forma estranha ou brilhantemente e coloridos seja sua chamada à ação seja, os visitantes nunca o verão caso não seja colocado em uma posição intuitiva. A posição exata para a sua chamada para a ação vai depender do layout da página, mas, regra geral, o melhor é manter a chamada para ação acima da dobra, numa área de destaque e com a abundância de espaço.

Deixando uma boa quantidade de espaço em branco em torno da call to action evita que outros elementos da página interfiram com a importância necessária de estarem ali. Posicione a chamada para ação num local intuitivo, sem qualquer confusão na forma como vai angariar o maior número de conversões.

Conclusão sobre bons call to actions

O mais importante é que você não pode ignorar o design de seu call to action! 4 elementos de design descritos aqui podem não parecer muito, mas, se bem utilizados, podem fazer maravilhas em sua taxas de conversão!

Veja diversos exemplos de call to actions no artigo da Smashing Magazine sobre o assunto. Inspire-se e avalie se você está indo no caminho certo; se está acertando nos julgamentos de design e estratégia de conversões de seus projetos. Fazer revisões e aprimoramentos constantes em seus trabalhos é um grande passo para garantir sua qualidade profissional, ao mesmo tempo em que ajudará com que você seja visto como alguém confiável, que não “abandona” os jobs realizados, simplesmente.

Tem mais alguma dica, exemplo ou comentário a fazer sobre call to actions?

User Interface em dicas rápidas

Tárcio Zemel — Mon, 01 Feb 2010 12:31:29 +0000

Desenvolvedores de interfaces de sites (e pessoal de desenvolvimento web, em geral), além de serem criadores de interfaces de usuário e experiências, também são “consumidores” de interfaces. E, a cada vez que eu encontramos um site em que a experiência do usuário e usabilidade não foram bem trabalhados, queremos abandonar esse site imediatamente! Geralmente é isso que a maioria das pessoas faz ao invés de perder tempo.

A seguir, confira algumas dicas rápidas para o desenvolvimento de interfaces de sites e sistemas virtuais. Dicas essas que são alguns dos mais importantes caminhos que um designer deve abraçar ao projetar uma user interface.

Este é um artigo traduzido do original “Stop Wasting My Time – by user“, do blog Graphic Rating, e sofreu algumas adaptações.

Faça botões com “cara de botões”: call to action explícito

Muitos sites apresentam esse problema: os botões são inacessíveis ou tem baixa visibilidade, fazendo com que o call to action (“chamada para a ação”) não seja explícito. Ao criar uma página, uma interface com o usuário, a primeira coisa que você deve considerar é fazer botões call to action explícito, que seja claro e não haja dúvidas de que se trata de um botão que desencadeará uma ação específica.

Reduza o número de cliques

Como já foi abordado por diversas vezes nos artigos sobre SEO, o número de cliques não é um fator tão incômodo quando se pensava em outrora; mas, quando é preciso clicar 7-8 vezes para baixar um arquivo, isso pode se tornar um grande problema.

Alguns autores/especialistas aconselham a manter o número de cliques para “ações comuns” em, no máximo, 3 ou 4. Dessa forma você “se força” a criar não somente uma melhor experiência do usuário, mas, também, faz com que uma boa arquitetura da informação esteja presente em seu site.

Defina um objetivo

Cada site deve ter um objetivo. Ao definir um objetivo, você economiza tempo precioso tanto de si mesmo, quanto do usuário. Também, tente conduzir o visitante para o mesmo objetivo através de elementos de sua user interface. Isso só pode significar menos tempo desperdiçado por parte do usuário.

Aumente a performance de seu site

Outro fator contra a perda de tempo do usuário é ter um site rápido, com boa performance e desempenho. Isso significa que o usuário irá se concentrar em encontrar o conteúdo ao invés de esperar que o conteúdo seja carregado. Existem inúmeros recursos para melhorar sua velocidade do site, confira o artigo sobre o aumento de performance e desempenho de sites e blogs.

Conclusão sobre user interfaces eficientes

Como dito, essas são dicas rápidas para incrementar a experiência do usuário em sites e permitir a criação de user interfaces eficientes e úteis para os visitantes. Tendo essas dicas em mente – e efetivamente as colocando em prática – certamente vai fazer com que você desenvolva melhores interfaces e, consequentemente, faça com que as interações em seu ambiente online sejam melhores e a experiência final de seus visitantes seja otimizada.

10 diretrizes para a construção da credibilidade de um web site

Tárcio Zemel — Mon, 04 May 2009 17:00:23 +0000

Muitos desenvolvedores web desconhecem, mas existe um projeto destinado a pesquisas, estudos, publicações e recursos sobre o tema “Credibilidade na Web“: é o The Web Credibility Project (traduzido livremente como: Projeto de Credibilidade na Web), da Universidade Stanford, dos Estados Unidos.

No Projeto de Credibilidade na Web são realizadas ações como:

Efetuar pesquisas quantitativas sobre Credibilidade na Web;
Recolher informações sobre Credibilidade na Web (filtrando os conteúdos relevantes ao tema);
Facilitar a pesquisa e discussão sobre Credibilidade na Web;
Colaborar com grupos de acadêmicos e industriais de pesquisa;
Dentre outros.

Para quem se interessa por Usabilidade, Arquitetura da Informação, Design de Interfaces e assuntos correlatos, o The Web Credibility Project é de grande valia, com certeza que é! E um dos documentos mais importantes é “How can you boost your web site’s credibility?“, ou seja, “Como você pode aumentar a credibilidade do seu site?“. Este é um documento com 10 diretrizes para a construção da credibilidade de um web site; documento este baseado em 3 anos de estudo com a participação de mais de 4500 pessoas.

São essas diretrizes que apresento agora – com algumas pequenas adaptações.

Faça com que seja fácil checar a veracidade das informações em seu site

Você pode construir a credibilidade do site fornecendo apoio de terceiros (citações, referências, fonte de materiais) para informações que apresentar, especialmente se você fizer links para essas “provas”. Mesmo se as pessoas não seguirem esses links, você demonstrou que seu material é de confiança.

Mostre que há uma verdadeira organização por trás de seu site

Mostrando que seu site é de uma legítima organização irá aumentar a credibilidade do site. A maneira mais fácil de fazer isso é listar um endereço físico. Outras características também podem ajudar, como mostrar uma foto de seu escritório ou listando a filiação com a Câmara do Comércio.

Destaque a experiência da sua organização e no conteúdo e serviços que você fornece

Você tem especialistas em sua equipe? Seus colaboradores ou prestadores de serviçoss são autoridades? Certifique-se de dar as suas credenciais. Você está associada uma respeitada organização? Deixe isso bem claro. Inversamente, não faça link para sites que não são críveis. Seu site se torna menos crível pela associação.

Mostre que pessoas honestas e confiáveis estão por trás de seu site

A primeira parte desta diretriz refere-se à mostrar que existem pessoas reais por trás do site e na organização. Depois, encontrar uma maneira de transmitir a sua confiança através de imagens ou texto. Por exemplo, alguns sites apresentam biografias/currículos de trabalhadores que contam sobre suas família ou hobbies.

Faça com que seja fácil entrar em contato com você

Uma maneira simples de aumentar a credibilidade do seu site é deixar claras suas informações de contato: o número de telefone, endereço físico, endereço de email, etc.

Faça um design profissional para seu site (ou que seja apropriado para sua finalidade)

As pessoas avaliam rapidamente o design de um site de forma isolada (“à parte”). Ao desenvolver seu site, preste atenção ao layout, tipografia, imagens, consistência das coisas e muito mais. Evidentemente, nem todos os sites ganham credibilidade por parecer com IBM.com. A concepção visual do site deve coincidir com a finalidade.

Faça seu site fácil de usar – e útil (eficiente)

Essa é uma “dupla diretriz”. A pesquisa do The Web Credibility Project mostra que sites ganham pontos em credibilidade por serem ambos: fáceis de usar e úteis (a palavra “eficientes” também cabe). Alguns desenvolvedores (ou donos; ou mantenedores; ou diretores; etc) se esquecem dos usuários (pessoas) e preferem cuidar dos egos de suas próprias empresas ou tentam mostrar as deslumbrantes coisas que podem fazer usando a tecnologia web.

Atualize o conteúdo de seu site frequentemente (pelo menos mostre que foi revisto recentemente)

Pessoas atribuem maior credibilidade a sites que mostram que foram recentemente atualizados ou revistos.

Use com moderação qualquer conteúdo promocional (por exemplo, anúncios e ofertas)

Se possível, evite que seu site tenha anúncios. Se você tiver que colocar anúncios, diferencie claramente o conteúdo dos anúncios do seu. Evite anúncios pop-up, a menos que você não se import em irritar seus usuários e perder credibilidade. Tal como o estilo de escrita, tente ser claro, direto e sincero.

Evite erros de todos os tipos, não importando o quão pequenos eles pareçam

Erros de ortografia (e, principalmente, os de semântica) e links quebrados ferem a credibilidade de um site mais do que a maioria das pessoas imagina. Também é importante manter o seu site funcionando, garantindo que fique online e rodando.

8 características de User Interfaces (UI) de sucesso

Tárcio Zemel — Mon, 27 Apr 2009 15:00:49 +0000

Há bastantes informações na web sobre várias técnicas de design de interfaces e padrões que você pode usar quando elabora suas interfaces e web sites, soluções para problemas comuns e recomendações gerais sobre usabilidade. Seguir as dicas dos especialistas certamente levará você a desenvolver boas user interfaces (UI) – ou interfaces com o usuário (IU) – mas o que, exatamente, é uma boa interface? Quais são as características de uma boa user interface?

Aqui estão 8 características que uma boa UI precisa ser:

Clara;
Concisa;
Familiar;
Responsiva;
Consistente;
Atrativa;
Eficiente;
Capaz de “Desfazer”

Este é um artigo traduzido do original “8 Characteristics Of Successful User Interfaces“, do blog Usability Post, e a tradução foi feita com autorização do autor, Dmitry Fadeyev, e sofreu pequenas adaptações.

Clara

Clareza é o elemento mais importante para uma interface com o usuário. Na verdade, o propósito maior de uma user interface é permitir que as pessoas interajam com o sistema, comunicando significado e função. Se as pessoas não descobrirem como sua aplicação funciona ou onde ir em seu web site, elas ficarão confusas e frustradas.

O que isso faz? Passe o mouse sobre botões em WordPress e vai uma dica pop-up explicando as suas funções.

Concisa

Clareza em uma user interface é ótimo, entretanto você deve ter cuidado para não cair na armadilha do “excesso de clareza”. É fácil acrescentar definições e explicações, mas cada vez que você faz isso você “incha” o sistema; sua interface cresce. Incremente sua interface com muitas explicações e os usuários terão de gastar muito tempo para ler tudo.

Mantenhas as coisas claras, mas, também, mantenha as coisas concisas. Quando você conseguir explicar uma característica em uma sentença, ao invés de três, faça isso! Quando conseguir rotular um item com uma palavra, ao invés de duas, faça isso! Economize o valioso tempo de seus usuários mantendo as coisas concisas.

Manter as coisas claras e concisas ao mesmo tempo não é fácil; leva tempo e esforço para conseguir, mas as recompensas são grandes.

O controle de volume no OS X usa pequenos ícones para mostrar cada lado da escala de baixo até alto.

Familiar

Muitos designers empenham-se para deixar suas interfaces intuitivas. Mas o que “intuitivo” realmente significa? Significa algo que, natural e instintivamente, pode ser entendido e compreendido. Mas como você pode fazer algo intuitivo? Você faz isso o tornando familiar.

“Familiar” é somente isso: algo que se aparece com alguma outra coisa que você já encontrou antes. Quando você estiver familiarizado com algo, você sabe como esse “algo” se comporta; você sabe o que esperar. Identifique as coisas que são familiares para os usuários e integre em sua user interface.

Interface com abas do GoPlan. Tabs são familiares porque imitam guias de pastas. Você “descobre” que, ao clicar sobre uma aba, você vai navegar para essa seção; e que o restante dos separadores permanecem lá para mais navegação.

Responsiva

“Responsivo” significa duas coisas. Primeiro de tudo, significa respostas rápidas. A interface, se não o software que está por trás, deve trabalhar rápido. Esperar as coisas carregarem e usar interfaces pesadas e lentas é frustrante. Vendo as coisas carregarem depressa ou, pelo menos, uma interface que carrega rapidamente (mesmo se o conteúdo ainda está para aparecer) melhora a experiência do usuário.

“Responsivo” também significa a interface prover algum tipo de feedback. A interface deve comunicar ao usuário e informar o que está acontecendo. Você apertou aquele botão corretamente? Como você sabe? O botão deve ter um estado “pressionado” para dar esse feedback. Talvez o texto pudesse mudar para “Carregando…” e o botão ficar desabilitado. Será que o programa “agarrou” ou está carregando? Coloque um imagem de “Carregando” ou exiba uma barra de carregamento para manter o usuário informado.

Ao invés de carregar a página gradualmente, o Gmail mostra uma barra de progresso quando você faz login. Isto permite à toda página ser exibida instantaneamente quando tudo estiver pronto.

Consistente

Há um artigo sobre a importância do contexto (“Context Over Consistency”) e como isso deve orientar as decisões sobre o design. A adaptação a um determinado contexto é inteligente, porém existe ainda um nível de coerência que uma interface deve manter ao longo do processo.

Interfaces consistentes permitem que os utilizadores desenvolvam hábitos de uso – eles aprendem sobre os diferentes botões, abas, ícones e outros elementos da interface e os reconhecem e percebem o que eles fazem em diferentes contextos. Os utilizadores também aprendem como certas coisas funcionam e serão capazes de trabalhar a forma de operar novas funcionalidades mais rápido, com base em suas experiências anteriores.

A interface do usuário do Microsoft Office é consistente por uma razão.

Atrativa

Este pode ser um pouco controverso, mas uma boa interface deve ser atrativa. Atrativa em um sentido que torna o uso dessa interface agradável. Sim, você pode fazer a sua interface simples, fácil de usar, eficiente e ágil, e vai fazer o seu trabalho bem – mas se você pode ir para a etapa extra e torná-la mais atrativa, então você vai fazer a experiência de utilização dessa interface verdadeiramente gratificante. Quando o software é agradável de usar, os seus clientes ou funcionários não vão simplesmente usá-lo, eles ficarão ansiosos para usá-lo!

Existem, naturalmente, muitos tipos diferentes de software e web sites, todos produzidos para diferentes mercados e públicos. O que parece “bom” para qualquer audiência, em particular, varia. Isso significa que você deve projetar/desenvolver a aparência de sua interface para o seu público. Além disso, a estética deve ser utilizado com moderação e reforçar a função. Acrescentar um nível de “sofisticação” à interface é diferente de abarrotá-la com supérfluos.

Google é conhecido por suas interfaces minimalista que se concentram em função em detrimento da forma, mas, como pode ser visto no Chrome, eles também se importam com elementos como botões e ícones, como fica evidente pelos detalhes de degradê e “ajustes finos”, em geral.

Eficiente

Uma user interface é o veículo que faz você chegar aos lugares. Esses “lugares” são as diferentes funções de um software ou web site. Uma boa interface deve permitir desempenhar essas funções mais rapidamente e com menos esforço. Agora, “eficiente” soa como um atributo bastante vago – se você combinar todas as outras características de user interfaces de sucesso dessa lista, certamente que a interface vai ser eficiente? Quase, mas não é bem assim.

O que você realmente precisamos fazer para tornar uma interface eficiente é descobrir exatamente o que o usuário está tentando alcançar e, depois, deixá-lo fazer exatamente isso sem maiores complicações. Você tem que identificar o modo como a sua aplicação deve “trabalhar” – quais funcionalidades precisam existir, quais os objetivos que você está tentando alcançar? Implemente uma interface que permita que as pessoas facilmente consigam o que querem ao invés de simplesmente prover acesso uma lista de características/funções.

Apple identificou as três principais coisas que as pessoas querem fazer com fotos em seu iPhone e forneceu botões para realizar cada uma delas no Controle de Fotos.

Capaz de “Desfazer”

Ninguém é perfeito, e as pessoas estão sujeitas a cometer erros enquanto usam seu software ou web site. O quão bem você lida com esses erros é um importante indicador sobre a qualidade de seu software. Não “castigue” o usuário – construa uma interface que tenha a capacidade de desfazer os erros que possam surgir, isso é, que tenha a função “Desfazer”.

A função “Desfazer” numa interface pode salvar seus usuários de erros graves. Por exemplo, se alguém deleta uma informação importante, o quão fácil é para reaver essa informação ou desfazer a ação de deletar? Quando alguém vai para uma página quebrada ou inexistente em seu site, o que eles veem? Eles veem simplesmente um aviso de erro ou lhes é apresentada uma lista com destinos alternativos?

Enviou uma mensagem para a lixeira por engano? Gmail permite que você rapidamente desfaça a última ação.

Para concluir…

Trabalhar com essas características de uma boa user interface pode fazer com elas entrem em conflito umas com as outras. Por exemplo, ao tentar fazer uma interface limpa, você pode adicionar muitas descrições e explicações, o que acaba fazendo a coisa toda grande e volumosa. “Cortar” as coisas com o objetivo de tornar uma interface concisa pode ter o efeito oposto e tornar as coisas ambíguas. Atingir um equilíbrio perfeito exige habilidade e tempo, e cada solução dependerá de uma análise caso a caso.

Como criar sumários dinamicamente com o TOC (Table of Contents) jQuery plugin

Tárcio Zemel — Wed, 15 Apr 2009 15:00:12 +0000

Determinados tipos de sites (ou somente algumas páginas de sites) às vezes precisam de um sumário para que o conteúdo fique bem organizado e para oferecer uma visão geral sobre o conteúdo. Um sumário em páginas de web também é muito útil em relação á usabilidade, dado que facilita a experiência do visitante ter um “apanhado geral” sobre o que vai encontrar.

Agora imagine como seria bom se houvesse uma maneira de criar sumários dinamicamente para as páginas de seu site! “Seria”, não; é! É possível criar sumários de forma dinâmica através do plugin TOC (Table of Contents) jQuery plugin (jquery.toc) para jQuery!

Sobre o TOC jQuery Plugin

Na página oficial do TOC jQuery Plugin é possível encontrar informações importantes sobre o funcionamento do plugin, histórico de atualizações, exemplo de funcionamento, dentre outros. Mas, para você que está lendo este artigo diretamente no desenvolvimento para web, é possível ver em todos os artigos o plugin em ação, já que implementei a criação dinâmica de sumários oficialmente aqui no blog! Desabilite o javascript que você vai ver, ou melhor, não vai ver o Sumário! ;-)

O funcionamento do plugin é em cima das tags de títulos e subtítulos presentes nas páginas do site. Através da análise destes o plugin:

Gera um Sumário (“Table of Contents”) dinamicamente (através de tags de lista);
Adiciona automaticamente numeração ao Sumário e aos correspondentes títulos e subtítulos da página.

E, seguindo a “filosofia” do jQuery, tudo é feito de forma bastante automática e simplificada, bastando somente algumas pouquíssimas linhas de código para colocar a extensão em funcionamento!

Funcionamento do jquery.toc

A primeira coisa a se fazer, logicamente, é baixar o query.toc. Lembrando que é sempre aconselhável baixar a última versão disponível – na data de publicação deste artigo é a v1.0.2. Em relação a seu tamanho, também não há nada com o que se preocupar: sua versão “normal” tem 5.3KB e a versão compactada tem 2.4KB. Depois disso, basta fazer a “chamada” do script (abaixo da chamada ao jQuery, claro) e começar a codificar.

Lembrando que é conveniente fazer a chamada de todos javascripts e codificar na linguagem ao final do documento, preferencialmente antes de “”.

Codificando

Primeiro é importante escolher em qual lugar vai aparecer o sumário dinâmico. É bom dedicar uma DIV especialmente para isso para evitar erros/conflitos. Para facilitar, neste exemplo a DIV terá o ID “toc”.

1	<div id="toc"></div>

Uma das condições para o correto funcionamento do TOC jQuery Plugin é que cada título/subtítulo que se queira incluir no sumário tenha o atributo id para ser referenciado e que será usado nos links de âncora do Sumário criado. Falando claramente: todos seus títulos/subtítulos têm que ter id.

Logicamente que criar manualmente um id para cada título/subtítulo a fim de gerar dinamicamente o Sumário seria um trabalho extra e, diga-se de passagem, desnecessário, já que é possível fazer isso via javascript/jQuery. Vamos por partes.

O primeiro objetivo é “pegar” todos título/subtítulos da página (no trecho em que se queira incluir no Sumário dinâmico) e acrescentar um id para cada um. O id pode ser qualquer nome que seja diferente para cada título/subtítulo; afinal, trata-se de um id (mais informações a respeito, leia o artigo sobre diferenças entre IDs e Classes):

(function ($) {
    $("#content :header").each(function(){ // http://tinyurl.com/celarh
        // fazer qualquer coisa com cada título/subtítulo dentro de #content (nome-alvo fictício)
    });
})(jQuery);

No caso da geração automática de Sumário de conteúdos com o plugin TOC jQuery, nosso objetivo, como já explicado, é dar um id para cada título/subtítulo. Poderíamos criar um nome genérico e fazer um contador para marcar com números (o resultaria seria “#id1″, “#id2″, “#id3″…); mas acho mais “elegante” manter o texto do título e, para enfeitar mais um pouco, inserir “_” no lugar de cada espaço (dado que nomes de IDs não podem conter white spaces).

Vamos gerar um ID para cada título/subtítulo baseados nas seguintes premissas:

Nome será o texto do título/subtítulo;
Todos caracteres minúsculos;
Eliminação de qualquer caractere que não seja letra ou número (incluindo caracteres especiais);
Substituição de espaços por underscore (“_”).

Então, estamos assim, por enquanto:

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_'); // http://tinyurl.com/dl9z35
        $(this).attr('id', id); //  http://tinyurl.com/68cxmw
    });
})(jQuery);

Depois disso, já temos todos os títulos e subtítulos “alvo” com um ID. Agora é o momento de mandar o jquery.toc entrar em ação:

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_');
        $(this).attr('id', id);
    });
 
    $('#toc').toc(); // #toc é o "container" do Sumário, definido anteriormente
})(jQuery);

O “grosso” da coisa é isso! Pode fazer seus testes e ver que o Sumário foi criado automaticamente e está funcional, com todas as âncoras apontando para seus respectivos títulos/subtítulos.

“Refinando” o Sumário dinâmico

Para obter um resultado mais “fino” ainda falta codificar alguns detalhes.

Por exemplo: vamos supor que, por algum motivo, você queira que alguns títulos/subtítulos não entrem na listagem do Sumário. Consultando a documentação oficial do TOC jQuery Plugin é possível identificar que isso é possível através da opção exclude. Vamos supor que não queremos que os títulos primários e o título secundário de id “apresentacao” entrem na listagem; então o trecho ficaria:

1	$('#toc').toc({exclude: 'h1, h2#apresentacao'});

Em conversa com o desenvolvedor do plugin, fiquei sabendo que existe uma limitação quanto ao número de elementos possíveis no exclude. Então, caso tenha bastantes elementos que não gostaria que estivesse listados no Sumário, uma boa dica é criar uma classe qualquer (por exemplo “toc-exclude”) e marcar os elementos indesejáveis com ela. Então, ficaria algo como:

1	$('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'});

Aproveitando que estamos querendo fazer um trabalho bem-feito e que jQuery nos permite isso com muita facilidade, não nos custa indicar ao visitante que aquela listagem é um Sumário, inserindo, via jQuery, um subtítulo antes da DIV “toc”:

1	$('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'}).prepend(' Sumário '); // http://tinyurl.com/bjlr42

O script final de nosso exemplo – que serve de “base” para a implementação do jquery.toc em qualquer site – fica assim:

(function ($) {
    $("#content :header").each(function(){
        var id = ($(this).text()).toLowerCase().replace(/[^a-zA-Z 0-9]+/g,'').replace(/\s/g, '_');
        $(this).attr('id', id);
    });
 
    $('#toc').toc({exclude: 'h1, h2#apresentacao, .toc-exclude'}).prepend('Sumário
');
})(jQuery);

Conclusões sobre o Table of Contents jQuery plugin

Como foi demonstrado, criar um sumário automático-dinâmico com jQuery utilizando o plugin jquery.toc é algo bastante simples. E ele pode ser usado em qualquer tipo de site, inclusive os que utilizam CMSs, como os desenvolvidos em WordPress – vejam que este blog é WordPress e o recurso está presente.

Como “desafio”, no site em que for implementar o jquery.toc faça o seguinte: gere a DIV #toc através de jQuery ao invés de deixá-la na marcação (X)HTML. Coloque o link para o site nos comentários! ;-)

Pergunte-se a si mesmo: questões para desenvolver um bom site

Tárcio Zemel — Wed, 18 Mar 2009 15:01:29 +0000

O desenvolvimento web às vezes é encarado como algo extremamente complexo, um verdadeiro “Bicho de Sete Cabeças”! Realmente não é a coisa mais simples do mundo; entretanto, pessoalmente creio que, por exemplo, operar uma pessoa ou planejar uma casa são coisas bem mais difíceis! Pode ser devido à minha afinidade com o desenvolvimento web, mas esta é minha opinião.

Na maioria das vezes fazer perguntas a si mesmo (depois de realizar um bom briefing para desenvolvimento de web sites, claro) é a melhor forma de identificar/complementar as principais necessidades de um projeto; é o meio excelente de saber o que pode ser feito, o que não pode, o que deve, o que não deve, como fazer, qual tecnologia escolher e o que mais for preciso saber, pelo menos num segundo momento (o “primeiro momento” é o briefing do site) é a coisa acertada e mais sensata a se fazer.

Perguntar-se a si mesmo (ou, quando trata-se de uma equipe, fazer perguntas mútuas) algumas questões nada complexas a respeito do projeto em vista é uma boa maneira de saber como começar e como seguir com o desenvolvimento do projeto web; e isso com a preparação e precaução necessárias para evitar um monte de surpresas que inevitavelmente ocorrem em projetos desta natureza.

Para ajudar você a elaborar suas “auto-perguntas”, segue uma série de considerações a respeito do desenvolvimento web. Pergunte-se! ;-)

Conteúdo

Sem sombra de dúvidas o conteúdo é o fator-chave de sucesso para os web sites e projetos online, em geral. Levando em consideração alguns pontos importantes, pode-se caminhar à consecução do objetivo de alcançar a qualidade deste e, consequentemente, a qualidade e satisfação para quem acessa.

Textos. Em sites/blogs “normais” os textos podem ser considerados como conteúdo de maior relevância e procura. Deve-se ter cuidado com a maneira de escrever (mais formal, mais coloquial, em terceira pessoa, em primeira pessoa, etc), a extensão dos textos, o tamanho das fontes, o espaço entre as linhas, a distância entre os parágrafos, apresentação de títulos e subtítulos, cores. Se ainda não sabe, veja como usar qualquer fonte tipográfica em blogs Wordpress e sites, em geral.
Imagens. As mensagens transmitidas através de imagens também são bastante relevantes e, igualmente, merecem atenção especial. Mais à frente a questão das imagens será abordada com mais detalhes.
Áudio. Muitos sites utilizam áudio como forma de comunicação, o que é perfeitamente possível e conveniente se o bom-sendo for usado. Por exemplo, não é nada interessante colocar para tocar uma música em um site sem que o visitante tenha solicitado; o ideal é deixar um player à vista para que ele saiba que o recurso existe. Deve-se atentar também ao tamanho dos arquivos, em si, e ao tempo de duração, seja o áudio uma “música ambiente”, palavras de responsáveis pela empresa/produto/serviço, podcast, ou o que quer que seja.
Vídeo. Excetuando-se os sites voltados especialmente aos vídeos, para os utilizar nos sites um “mix” deve ser feito e levados em consideração fatores como tamanho em pixels, tempo de duração, qualidade das imagens, controle (barra de tempo, botões pausar e continuar, volume, etc), adequação ao tema e, muito importante, decidir se os vídeos serão hospedados em sites de terceiros e anexados ao conteúdo ou se vão ficar diretamente no servidor do site e executados através de scripts de players.

Navegabilidade

A navegabilidade, sem dúvidas, é uma das coisas mais importantes de seu site. A facilidade que o visitante tem para navegar entre/nos conteúdos do site é fator determinante para o sucesso ou fracasso de seu espaço online. Perceba em conversas com amigos, colegas e mesmo observando seu próprio comportamento, que quando se entra em um site confuso, “embaraçado”, sem uma boa estrutura navegacional, que a atitude é logo de irritabilidade e a primeira frase que vem à cabeça é “Droga, que site confuso! Vou embora…”.

Menus. Os menus do site devem estar bem claros e ser bem fácil de identificar o que é menu e o que não é. É através dos menus de navegação que os visitantes exploram a grande maioria dos sites e, se não está explícito em qual lugar o(s) menu(s) está(ão), como isso poderá ser feito?
Links. O mesmo vale em relação aos links, quer dizer, se não está bem claro e evidente que determinada palavra ou frase é, na verdade, um link, é fácil não se surpreender caso ninguém clique. É muito importante que os links do site sejam evidentes e diferenciados do restante do “texto normal”. Igualmente importante é salientar, de alguma maneira, quando um link já foi visitado.
Localização. O visitante precisa saber em qual ponto do site ele se encontra. A web é ampla, muito ampla, e as pessoas facilmente se perdem nos sites. Por isso, use e abuse de elementos que sirvam para identificar em qual lugar do site o visitante está atualmente como, para citar alguns, destaque nos menus e caminhos de pão (breadcrumbs).
Busca. Especialmente sites a partir do porte médio, blogs e revistas eletrônicas necessitam de um campo de busca. O campo de busca é um dos elementos mais usados em site e, em alguns casos, é o primeiro a ser usado pelo visitante. É importante deixar o campo de busca em local de fácil acesso e que este seja bem claro e simples de ser utilizado.
Elementos Auxiliares. Além dos já elementos, utilizar elementos auxiliares de navegação e “suporte” ao visitante eleva bastante a qualidade de um site, como um todo. Alguns exemplos são as páginas Ajuda, Perguntas Frequentes e Mapa do Site.

Web Design

Que “o conteúdo é o rei” todos os desenvolvedores sabem; o que muitos ainda não sabem é dar a devida importância ao web design. A forma como os elementos visuais estão dispostos e como se apresentam influi diretamente na maneira como as pessoas percebem e intuem (do verbo “intuir”) os web sites. Conhecer alguns princípios básicos de Gestalt aplicado ao web design e dar importância a determinados elementos é de suma importância.

Identificação. Identificar qual é o site em questão é garantir que as pessoas não terão dúvidas e reforçar sua marca na mente dos visitantes. É essencial que o logotipo (com link para a página inicial) seja apresentado logo na parte superior e que não haja equívocos quanto a qual empresa o site pertence/faz parte.
Identidade visual. Estritamente ligado à Identificação, É o conjunto de elementos que identifica determinada empresa, produto, uma instituição e similares. Vejam bem, é o conjunto de elementos! Para que uma identidade visual seja formada/mantida, é preciso critério para que a consistência e a constância estejam presentes. Respeitar e “repetir” os elementos visuais (e de outros tipos) a fim de fixar o que é preciso na mente das pessoas e garantir que nenhum equívoco acontecerá.
Cores. A correta escolha de cores (de muita preferência levando em conta a Identidade Visual) deve ser feita com cuidado e seguindo critérios bem estudados/observados. É importante levar em consideração o público-alvo (idade, sexo, preferências, expectativas, e mais), o objetivo do projeto, a época em que ele é feito, dentre outros. As cores merecem estudos complementares à parte, devido à sua importância para qualquer projeto de natureza web.
Fontes tipográficas. Partindo do princípio de que o conteúdo textual é o mais importante na maioria dos web sites, a utilização de fontes tipográficas adequadas ao projeto é imprescindível. A escolha correta da família de fontes, tamanho, cores, contraste, inter-relação entre tipos, posicionamento, e outros, devem ser feitos com cautela e tendo em vista o objetivo a que se propõe o projeto.
Imagens. Dependendo de como é pensado/estruturado o site, o uso de imagens praticamente se faz desnecessário, haja vista o atual delicious. Para os casos mais “normais”, em relação às imagens deve-se levar em consideração a qualidade, o formato, o tamanho em pixels, tamanho em KB (conhecem o optiPNG?), alinhamento, a relação com os outros elementos, etc.

Outras considerações

Para finalizar, ficam considerações sobre elementos de caráter geral dos sites que, se levados em conta e bem planejados, certamente aumentam a qualidade do site.

URLs. Pode parecer que não, mas o uso correto de URLs ajuda bastante a divulgação dos sites (principalmente falando sobre os mecanismos de busca). URLs amigáveis garantem que seu site será melhor indexado nos sistemas de pesquisa e, olhando o lado humano, facilita a memorização de páginas específicas. Escolher nomes fáceis e de tamanho reduzido são diferenciais.
Idiomas. Dependendo do site é interessante que os conteúdos sejam apresentados em idiomas distintos. Existem sistemas de tradução automática que podem auxiliar um pouco, mas o ideal são traduções profissionais. Pense bem, um tradutor automático não traduz áudios e vídeos. Quando parte considerável do público-alvo for de outros países, é interessante haver, além de diferentes versões textuais do conteúdo, também diferentes versões para áudios (quando se tratar de falas, claro), vídeos (ou inserção de legandas) e, dependendo do caso, até disposição dos elementos, levando em conta o modo de leitura e costumas dos países.
Tempo de carregamento. Algumas pesquisas alegam que se algum conteúdo não for apresentado e m 5 segundos, o visitante sai do site para buscar outro. Isso é relativo, claro, mas mostra a importância que há no tempo de carregamento das páginas do site. Fique atento ao tamanho de imagens, utilização de javascripts (que devem ser inseridos antes de “” e podem ter tamanho reduzido através de um compactador de javascript) e extensão das páginas. Utilize o YSlow para Firefox como auxílio.

Tem mais algum ponto que você gostaria de citar? Tem alguma dica para complementar os tópicos do artigo? Comente!

Web sites e comunicação: 21 maneiras de os sites se comunicarem com seus visitantes

Tárcio Zemel — Thu, 20 Nov 2008 17:10:36 +0000

Uma das mais importantes responsabilidades de um web site é a comunicação com os visitantes. Independentemente de o site ser um blog, um portfolio, um site corporativo ou um e-commerce, ele existe para se comunicar com os visitantes.

A comunicação, em alguns casos, é uma “via de mão dupla” (comentários em blogs são um bom exemplo), mas na maioria dos casos o site comunica antes de os visitantes enviarem seu feedback. Para que o site comunique eficientemente, o designer e o dono do site precisam ter propósitos claros das mensagem que querem transmitir aos visitantes.

A melhoria da comunicação é um processo contínuo. Através da avaliação de diversos sites, aí estão as maneiras pelas quais os web sites se comunicam com seus visitantes.

Este é um artigo traduzido do original “21 Ways Websites Communicate with Visitors“, do blog Vandelay Design, e a tradução foi feita com autorização do autor.

Títulos

Títulos são um óbvio ponto de partida para a comunicação se dar com os leitores. Os títulos devem informar aos leitores o que vão encontrar na página ou artigo se continuarem a leitura e devem ser extraídos do conteúdo, como consequência.

Independentemente se o site é um blog, um portfolio, um e-commerce ou qualquer tipo de web site, o título é um componente-chave da comunicação online com visitantes. A qualidade de um título pode ter um incrível impacto sobre quantas pessoas continuarão lendo o conteúdo, mas muitos de nós não damos aos títulos a atenção que eles merecem.

Subtítulos

Uma das chaves para a efetiva comunicação online é “quebrar” o texto para que fique mais legível. Uma das maneiras de aumentar a legibilidade e fazer o conteúdo ficar mais “amigável” é incluir subtítulos. Os leitores terão mais facilidade em entender e lerão de forma mais fácil, assim como entenderão mais facilmente a estrutura do texto.

A maioria dos blogueiros está acostumada a utilizar subtítulo, mas eles também podem ser usados em outra situações. Em momentos em que há conteúdos divididos em parágrafos ou listas, existe a possibilidade de aumentar a legibilidade com a utilização de subtítulos. Quando usar subtítulos, use de maneira que os conteúdos fiquem melhor apresentados e para criar um interesse particular pelas “seções” do texto.

Texto na página (conteúdo)

O texto na página é obviamente uma das maiores formas de comunicação com os visitantes. “Copyrighters” prestam bastante atenção aos pormenores da escrita, mas muitos sites não fazem um trabalho efetivo com seus textos. A quantidade de texto e como ele será abordado varia muito de um tipo de site para outro.

Por exemplo, um blog vai incluir uma grande quantidade de texto e esta será a principal forma de comunicação com os leitores. Por outro lado, um e-commerce deve ter pequenas quantidades de texto, com o propósito de informar aos visitantes detalhes sobre os produtos ofertados – o conteúdo deve ser descritivo o suficiente para impulsionar e contribuir com as vendas, mas muito conteúdo pode desencorajar ou dificultar as vendas.

Taglines

Nem todos os sites usam taglines, mas alguns as utilizam de forma de forma bastante eficaz. Ela precisa comunicar rapidamente algo sobre a empresa, produto ou serviços. Taglines são ótimas para fins de branding e para ajudar a controlar a impressão que é dada aos visitantes.

Branding / Logo

Alguns sites se valerão de serviços profissionais para criação de seus logotipos, mas, muitos, não. Independentemente de um site utilizar um logotipo desenhado profissionalmente ou simplesmente um texto para o título, há uma mensagem para ser comunidade em termos de branding.

Por que as empresas estão dispostas a pagar bem por um logotipo de qualidade? Porque um logotipo bem concebido irá ajudar a empresa a comunicar algo básico com os clientes, algo que ajuda a determinar como as pessoas veem marca.

Cores

Esquemas de cores são um aspecto crítios do web design, não somente por afetar como um site é apresentado, mas, também, porque as cores são capazes de comunicar mensagens sutis aos visitantes. Em certas culturas, as cores têm transmitem mensagem e representações bem claras, mas, em outras, o impacto das cores nos visitantes é algo mais sutil nos leitores e visitantes.

Veja um “guia” muito bom sobre como encontrar a combinação de cores perfeita para seu site: “Find the Perfect Colors for Your Website“.

Imagens

Todos nós conhecemos o ditado “Uma imagem vale mais que mil palavras” e, certamente, isso pode ser aplicado ao web design. Com a impaciência da “média” de visitantes de sites, boas imagens podem ajudar a reter uma certa atenção, isso sem mencionar que as imagens simplesmente melhoram a aparência geral do site.

Ao trabalhar com imagens no web design, às vezes você se verá no dilema de usar fotos fornecidas pelo próprio cliente ou se valer de fotos mais profissionais, como as que podem ser pegar em sites de fotografia como o iStockphoto. É importante pensar sobre o propósito da imagem e o que é preciso comunicar para o visitante, já que existem ocasiões para ambos os casos.

Por exemplo, se você estiver elaborando o web design de um site de igreja você pode querer usar uma foto profissional para grandes áreas da página inicial, mas provavelmente vai querer usar fotos reais da igreja para a maioria das imagens no site (tais como fotos de eventos específicos dentro da igreja), porque estas fotos ajudam a comunicar como a igreja é de verdade.

Título da página (barra de títulos)

Os títulos das páginas (que aparecem na Barra de Títulos dos navegadores) não são importantes somente para fins de SEO, mas, também, para propósitos de comunicação com seus visitantes. Enquanto os visitantes estão no seu site, eles prestarão mais atenção para os títulos que estão nas páginas do que para o título que aparece no topo de seus navegadores. Entretanto, muitos visitantes virão através dos mecanismos de busca e, neste caso, os títulos das páginas (que aparecem na Barra de Títulos) desempenham um papel crítico em comunicar seus conteúdos.

Além dos mecanismos de busca, aqueles que chegam a seu site através de links em outros sites também estão suscetíveis de serem “afetados” pelos títulos das páginas. Em muitos casos, os sites que fizerem um link para o seu usarão o título como texto âncora, que comunica sobre o que a página trata para aqueles que considerarem clicar no link.

Layout

O layout de um site é importante por várias razões, e comunicação é uma delas. O layout pode comunicar mostrando quais partes do site ou do conteúdo são mais importantes. Normalmente o site será disposto de modo a que os conteúdos mais importantes tenham maior destaque. Isso mostra aos visitantes o que você quer que eles vejam mais.

Veja “20 Websites With Unique Layouts“.

Estilo do design

Existe um “sem-número” de diferentes estilos de design por aí, e o estilo escolhido consegue comunicar certas mensagens aos visitantes. Alguns designs criam certas “impressões ” em muitos visitantes, e isso pode auxiliar ou prejudicar o propósito da comunicação de seu site, dependendo de qual “impressão” for.

Para alguns exem, veja “25 Incredibly Artistic Websites“. Todos os sites apresentados nesta mini-galeria enviam uma mensagem para os visitantes com base no nível de criatividade do design. Você verá que muitos dos sites são de apresentação de portfolios de designers ou de alguma forma estão relacionadas com design. Obviamente, mostrando sua criatividade desta maneira, um designer mostra a potenciais clientes que tem habilidade para criar web sites únicos e atrativos, e isso mostra o quanto o estilo pode ajudar, em termos de comunicação.

Ícones

Muitos sites e blogs utilizam ícones. E esses ícones não são usados unicamente para melhorar a aparência do site. Eles também intencionam comunicar alguma coisa aos visitantes com rapidez. Por exemplo, os ícones de RSS usados nos blogs imediatamente comunicam aos visitantes que eles podem subscrever para acompanhar as novidades. Um ícone de casinha também é um ícone muito comum para propósitos de navegação.

É válido baixar ícones de alta definição e qualidade para usar no site. Uma boa montagem e estruturação do layout com ícones profissionais pode conferir uma boa taxa de aceitação/conversão.

Navegação

Os links que são fornecidos e onde são colocados também comunicam aos visitantes quais páginas são importantes e onde você quer que eles vão. Normalmente, as páginas mais importantes são colocadas na navegação principal do site e outras páginas podem ser lincadas dentro do conteúdo da página ou em uma barra lateral ou rodapé.

Web designers têm muita influência sobre qual conteúdo é enfatizado em função do sistema de navegação. Tenha certeza de que as partes mais importantes do site são fáceis de se encontrar e podem ser acessadas rapidamente a partir de qualquer lugar do site.

Vídeo

Vídeos on line certamente se tornaram muito comuns nos últimos anos, e essa tendência parece ser certa de continuar. Vídeos proporcionam uma excelente forma de comunicação com os visitantes. Os vídeos podem ser utilizados para entretenimento, blogs, demonstrações de produtos e muito mais.

Comunicações por vídeo às vezes podem ser bem fáceis. Você pode ter um nível de certeza maior de que a mensagem que foi comunicada foi devidamente recebido por quem ela estava destinada. Às vezes a comunicação com textos pode ser limitada ou pode ser interpretada de maneiras diferentes.

Áudio

Além do vídeo, o áudio é uma outra forma de adicionar mídia a um web site para propósitos de comunicação. Algumas vezes o áudio pode ajudar; algumas vezes ele pode prejudicar. Em geral, áudio que começa a tocar sem a soliticação do visitante será encarado como chato e obstrutivo.

Anúncios

Anúncios são bem aceitos em boa parte dos sites de hoje. No entanto, os produtos e serviços em questão irão enviar mensagens aos visitantes em termos de conteúdo do seu site, como você vê seus visitantes e sobre o que é realmente importante para você.

A maioria dos donos de web sites não gostaria de ter anúncios de Viagra, já que isso poderia enviar uma mensagem não intencionada a seus visitantes (leia-se: “Você é broxa!”). Se os anúncios em um site são relevantes para os visitantes, então eles se sentirão mais “em casa”, mesmo se eles não estiverem interessados em clicar ou comprar alguma coisa, porque eles sentirão com a audiência pretendida para o web site.

Os anúncios também podem comunicar baseados em onde eles estão posicionados. Pessoalmente, não sou um grande fã de anúncios juntamente com o conteúdo de um site porque eu fico com a impressão de que o anúncio é mais importante para o dono do site que o conteúdo e a experiência de seus leitores com esse conteúdo.

FAQ (Perguntas Mais Frequentes)

Páginas de FAQ (Perguntas Mais Frequentes) são usadas em muitos sites porque elas podem ajudar a comunicação com os visitantes que frequentemente tem o mesmo tipo de perguntas. Ao invés de deixar essas perguntas sem respostas ou ter que responder a cada pergunta, separadamente, uma página de FAQ pode ser uma maneira útil e conveniente de os visitantes terem suas perguntas respondidas.

Facilidade de contato

Alguns visitantes de web sites desejam contatar o dono do site por uma razão ou por outra. Quão fácil ou quão difícil é para o visitante encontrar uma maneira de entrar em contato? Se você tiver um formulário de contato que é facilmente acessível de qualquer página de seu site, você enviará a mensagem de que encoraja seus visitantes a entrarem em contato e que você está interessado em seus pensamentos e opiniões.

Por outro lado, um site que não apresenta informações de contato ou se essas informações estão “enterradas” em algum canto do site e são difíceis de serem encontradas, isso mostra aos visitantes que o dono do site não se preocupa com o que os visitantes tem a dizer e que ele não quer ser incomodado.

Depoimentos

Depoimentos são usados extensivamente em sites de vendas, bem como nos sites de prestadores de serviço. Uma declaração de um cliente satisfeito pode ser uma poderosa maneira de comunicação com os visitantes. Ao invés de somente apresentar a mensagem por si mesmo, você coloca uma outra pessoa na frente, que pode ser mais credível do que suas próprias palavras.

Links Externos

Os sites e páginas para os quais você faz link podem dizer aos visitantes sobre o que é o seu web site e o que é impotante para você. Você não faz ligações externas se não quer agregar algum valor ao seu site e a seus visitantes; então os links que você faz dizem muitas coisas sobre seu site.

Por causa dessa mensagem que está sendo enviada aos visitantes, não se esqueça de ser cuidadoso em relação aos links externos que você faz. Lincar para “más vizinhanças” pode ser algo ruim em relação aos propósitos de SEO e isso também “mancha” sua imagem aos olhos dos visitantes.

Meta Descrições

A meta tag “description”, na verdade, não comunica nada aos visitantes quando eles já estão em seu site, mas ela pode comunicar uma mensagem importante para os pesquisadores que estejam tentando encontrar algo específico. Muitos mecanismos de busca utilizam a descrição nas SERPs (páginas de resultados de busca), então isso é uma oportunidade para dizer às pessoas sobre o que é aquela página, antes mesmo de a pessoa a visitar, e isso pode ajudar a melhorar seu CTR nas SERPs.

Acessibilidade

Se um web site é inacessível para alguém, esse “alguém” fica com a impressão de que não é considerado importantes pela a empresa ou pelos criadores do site. Se fosse importante, poderia acessar o site sem dificuldades. Tenha certeza de que você considera os potenciais impactos da inacessibilidade a respeito de um projeto ou site que não será acessível a um determinado público-alvo.

O que mais?

Fique à vontade em compartilhar seus próprios pensamentos e opiniões sobre o tema da comunicação e web sites.

Componentes de um sistema de navegação

Tárcio Zemel — Sat, 11 Oct 2008 00:56:36 +0000

Acabei de receber o livro Navegação em Hipermídia: uma abordagem centrada no usuário (tão bom que se não fizer reserva no Submarino não se consegue comprar) e, como o estava aguardando ansiosamente, não pude resistir e já comecei a ler. Logo no início do livro, chamou minha atenção a definição clara e objetiva dos componentes de um sistema de navegação, quer dizer, a definição e descrição das “características elementares” que um sistema de navegação (no contexto deste blog, leia-se: web sites e sistemas web, em geral) deve possuir para ser eficiente.

Estes componentes de um sistema de navegação, segundo as autoras do livro, trabalham de forma integrada e interdependente e, portanto, seu conjunto pode ser considerado um sistema. Quer dizer, este componentes que compõem um sistema de navegação interagem mutuamente entre si para formar um “todo” maior, e proporcionam as características e peculiaridades necessárias para uma pessoa conseguir interagir com esse sistema de forma eficiente.

Os 6 componentes de um sistema de navegação genérico

Os componentes de sistemas de navegação são:

Áreas clicáveis. Estes componentes de sistemas de navegação permitem às pessoas pressionar ou selecionar elementos através de um dispositivo de apontamento (no caso, o mouse). Por exemplo: tradicionalmente e por uma questão de usabilidade, os links aparecem (pelo menos, deveriam) sublinhados.
Mecanismos para identificar áreas clicáveis. Permitem que as pessoas que usam sistemas de navegação identifiquem com mais facilidade os elementos clicáveis. Por exemplo, quando se passa o cursor do mouse sobre um botão, ele muda de cor ou fica com bordinhas serrilhadas.
Indicadores de localização. Responsáveis por indicar a quem usa o sistema de navegação sua exata localização dentro deste sistema; de informar em qual posição do “todo” ele se encontra no momento. Deve mostrar em que “nó” do sistema a pessoa está e quais as possibilidades de navegação ela tem a partir daquele ponto.
Ferramentas para auxiliar a navegação. Proveem a quem utiliza o sistema de navegação hipermidiático o acesso às informações de maneira diferenciado ao “nó-a-nó”. Caso a pessoa esteja “perdida” ou confusa quanto à sua localização atual dentro do sistema, essas são as ferramentas que a auxiliarão e a ajudarão a se reorientar e retornar à uma “rota conhecida” (ex.: menus, pesquisa, favoritos).
Ferramentas de retronavegação. Como indica o próprio nome, estas ditas ferramentas auxiliar a pessoa que usa um sistema de navegação a retornar a um ou mais nós de navegação recentes (ou não tão recentes) sem precisar acessar exatamente os links que usou para chegar à sua posição atual. Como exemplo: botão “Voltar” dos navegadores e breadcumbs (“Migalhas de pão”).
Feedback. É a característica dos sistemas de navegação de manter aqueles que os utilizam informados sobre ações, operações e andamentos que acontecem/aconteceram/acontecerão; ou, nas palavras precisas das autoras do Navegação em Hipermídia, informar sobre uma mudança de estado do sistema. Como exemplos, elas citam a mudança de cores em links visitados (embora haja exceções), barras de loading e mensagens que informam que ações foram realizadas com sucesso ou que aconteceu algum erro.

Seu projeto possui todos elementos necessários?

Na verdade, eu já conhecia esses elementos característicos a sistemas de navegação hipermidiáticos de meus estudos sobre Interação Homem-Máquina. O que me chamou a atenção foi a maneira simples e objetiva com que foram colocados no livro de Stephania Padovani e Dinara Moura.

Você, desenvolvedor, fique ligado e analise os web sites e sistemas online que você faz e/ou participa e confira se todos estes elementos estão presentes. A falta de somente um deles faz com que o “todo” fique desfalcado e a experiência da pessoa que navega seja incompleta. Analise todos seus projetos, inclusive os já concluídos, e analise se estas características de um bom sistema de navegação estão lá.

É importante para você desenvolver um sistema de qualidade e, mais importante ainda, quando se tem em mente que, na verdade, quem sai prejudicado com a falta de um destes componentes é a pessoa que está “do outro lado do sistema”, quer dizer, quem o utiliza!

Dicas para um web design minimalista e usável

Tárcio Zemel — Mon, 30 Jun 2008 18:12:54 +0000

As tendências para web design indicam que o design minimalista é uma boa pedida. Estas “tendências minimalistas”, na verdade, insinuam que o conteúdo dos sites, por ser o mais importante, deve ter ênfase e destaque, e o layout, design e elementos visuais, devem contribuir para que os que os acessem tenham uma navegação ótima, encontrando aquilo que querem e/ou precisam rapidamente, da maneira que suas visita, suas experiências, sejam as melhores possíveis.

Pessoalmente, acredito ser esta uma excelente abordagem a se adotar ao pensar em e construir um design para web. Penso que o desenvolvedor web, neste caso, só tem a ganhar “seguindo” esta tendência atual. Para tanto, conhecer algumas técnicas de desenvolvimento é de extrema importância. Técnicas essas que o capacitarão a estruturar o bom design minimalista. E a usabilidade agradece.

Ocupe de 60% a 80% da página com conteúdos (relevantes)

“O conteúdo é o rei”. Esta célebre frase – que, de tão repetida, já não se sabe mais quem a disse originalmente – é um dos pilares para se compreender e praticar a feitura de um design web minimalista. Para o “rei” devem ser feitas todas as “honrarias”; em outras palavras, os esforços do desenvolvedor web devem focar o conteúdo do web site, servindo os elementos o layout e elementos visuais como auxiliadores da consecução deste objetivo.

Não raramente é possível encontrar sites e blogs com um design lindíssimo que não tem um conteúdo digno desta beleza toda. Nestes casos, há muito capricho e dedicação em conseguir uma bela estética e o “rei” é deixado de lado: o conteúdo não é relevante e, em alguns casos, é totalmente confuso e desconexo.

Ocupar de 60% a 80% das páginas de seu site ou blog com conteúdos – conteúdos relevantes e de qualidade, quero dizer – é um enorme passo em direção ao objetivo de conseguir um bom web design minimalista. E por “conteúdos relevantes e de qualidade” menciono aqueles conteúdos que realmente sirvam para seu visitante; conteúdos que sejam realmente condizentes com o tema e função de seu site/blog e que recompensem o visitante por ter dedicado um pouco de seu tempo a fazer uma visita.

Apresente as informações mais importantes primeiro

Apresentar as informações mais importantes (mais relevantes) primeiro pode parecer algo óbvio, mas, na realidade, muitíssimos desenvolvedores não sabem e/ou não seguem este básico princípio.

Uma boa arquitetura da informação, aliada a um bom estudo sobre a usabilidade, sugere que apresentar os conteúdos mais importantes primeiro é indispensável para que a experiência dos visitantes seja melhor. Nada mais desagradável que ficar procurando por algo que já deveria estar lá. Pior ainda é quando, mesmo depois da procura, não se encontra nada…

Então, reforçando mais uma vez os esforços para se fazer um web design minimalista, é importante apresentar os conteúdos mais relevantes, aqueles conteúdos que são mais úteis e que os visitantes mais procuram, logo “de cara”.

Se algo não é relevante, simplesmente não precisa estar lá

Esta preciosa dica, se seguida, certamente aumentará o nível de qualidade e objetividade de seu site ou blog. Pense bem: se algo não é relevante ou necessário para a situação, então por que está lá?

Se o usuário já está logado, então não é mais preciso que seja mostrado o formulário de autenticação. Se determinadas opções do menu não podem ser acessadas naquela hora, então não é preciso que estejam lá.

Estes são exemplos simples de poluição visual desnecessária. Existem muitos mais casos que, seja por falta de conhecimentos ou outro motivo, muito desenvolvedores insistem em cometer.

Se algo não é relevante, simplesmente não precisa estar lá!

O background não é mais importante que a informação

É comum encontrar web sites e blogs que, na busca por uma diferenciação e inovação, acabam utilizando backgrounds, ou planos de fundo, muito extravagantes, que mais atrapalham que ajudam.

Imagens de fundo devem servir para:

Contribuir para a experiência dos visitantes, direcionando seu olhar para o conteúdo;
Servir como elemento visual que serve de “agrado” ao visitante, suavizando a “carga sensorial” e aparecendo como algo bonito de se ver;
Causar sensações planejadas e direcionadas nos visitantes, contribuindo, dessa forma, para a estratégia de divulgação geral e servindo como auxílio de melhoramento de sua experiência na visitação;

Mas o que muito se vê pela web são planos de fundo confusos e esteticamente desagradáveis; texturas fortes, que atrapalham a leitura e cansam mais rapidamente a visão; em geral, elementos que diminuem o tempo de permanência e que minam a boa sensação de fazer uma visita àquele web site.

Tendo cuidado com o uso de planos de fundo esdrúxulos e que mais atrapalham que auxiliam, o desenvolvedor web deve se valer do bom senso e estudos de design antes de optar, impensadamente, por usar uma imagem ou textura como background.

Faça um bom contraste entre plano de fundo e texto

Reforçando o tópico anterior, para um design de web minimamente usável, o ato de ler daqueles que são visitantes devem ser natural e agradável. E este objetivo não pode ser alcançado se o visitante faz esforços desnecessários para ler seu conteúdo, que está sendo ofuscado por um background mal planejado!

Repetindo: um plano de fundo não deve ser posto ao caso; muito antes pelo contrário, deve somente ser usado quando se tem absoluta certeza de que, se figurar como elemento visual do site, mais contribuirá que atrapalhará.

Fazer um bom contraste entre plano de fundo e texto usado é também uma regra básica de design que, infelizmente, é amplamente negligenciada. Conseguir um bom contraste entre estes elementos constitutivos da página é fácil: basta ser simples!

Os livros que lemos têm suas páginas com texturas fortes e pesadas, da mesma cor que o texto ou é simplesmente papel branco com tinta preta impressa? Os jornais se valem de background extravagantes para apresentar suas notícias ou é simplesmente “papel puro” e tinta?

Simplicidade é chave!

Não que não se deva nunca usar um plano de fundo nas páginas dos sites e blogs (tanto que existem muitos que se valem deste recurso muito bem); mas, se o fizer, deve-se, além de usar o bom-senso e discernimento lógico, ter em mente dicas como:

Não utilize a cor do plano de fundo próxima a cor do texto. Isso dificulta a leitura, cansa mais rapidamente o leitor e, em casos extremos, torna impraticável a leitura dos conteúdos;
Se for usar texturas, que sejam suaves. Texturas como plano de fundo, como explicado, devem ser usadas com bastante cautela. Se é para usar alguma, que seja suave e agradável; que auxilie a experiência positiva que o visitante tem ao acessar as páginas;
Backgrounds múltiplos pode ser uma boa solução. Múltiplos planos de fundo podem ser eficientes em diversos casos. Usar um plano de fundo “geral” escuro, com um plano de fundo “secundário”, mais claro, no lugar onde está o texto, é uma boa técnica para “controlar” o direcionamento do foco de visão.
Backgrounds animados não existem. Isso é um mantra, entendeu? Repita: backgrounds animados não existem!

A principal dica para fazer um bom contraste entre planos de fundo e texto é se valer do bom e velho fundo branco com texto escuro. Como mencionado, veja como são livros, jornais e revistas – a comparação com a mídia eletrônica, neste caso, é perfeitamente válida.

Não é obrigatório que o texto seja, necessariamente, preto; o que vale é o bom contraste, que possibilite uma boa leitura e dê ensejo a um bom design, que seja facilmente usável e sensorialmente útil. Fazer um bom contraste entre plano de frente e plano de fundo é, também, uma regra de acessibilidade.

Existe um software sobre análise de contraste entre cores do primeiro e segundo planos. Dê uma olhada no artigo do Maujor sobre o Analisador de Constraste de Cores.

E essas dicas de minimalismo e usabilidade funcionam mesmo?

Se estas dicas para um web design minimalista e usável forem estudadas e aplicadas de forma correta, forem sabiamente usadas e postas em prática nos momentos adequados, certamente que você conseguirá um projeto com mais qualidade e um resultado final satisfatório!

Alertando que esta são apenas algumas dicas. Estudos contínuos e atualizações constantes na área de usabilidade e obtenção de conhecimentos atuais no campos de design certamente farão com que seu trabalho seja muito melhor e que você desenvolva um senso de criação de sites mais crítico e acurado.

Novamente o convido a observar o mundo à sua volta e fazer suas próprias constatações. Veja em publicações impressas e em mídias virtuais de qualidade, como o assunto da usabilidade e minimalismo é tratado na prática. Veja como são construídos bons web designs e o que sugerem os bons desenvolvedores.

Na verdade, fazer sites e blogs minimalistas e usáveis não é complicado. As pessoas é que complicam!

E você, conhece alguma técnica para fazer web sites minimalistas? Gostaria de dar um conselho sobre usabilidade? Comente e ajude todos nós a aprendermos mais coisas!

Pirâmide de conteúdo: estrutura lógica de web sites (para pessoas)

Tárcio Zemel — Mon, 24 Mar 2008 14:49:45 +0000

Lendo um dos livros de Dan Thies, cheguei a um capítulo onde era feira uma analogia interessante: a estrutura lógica de web sites (conteúdo voltado para pessoas, e não para bots de busca) pode ser representada por um pirâmide, sendo esta dividida; cada parte representaria um aspecto importante da estrutura lógica dos sites.

O próprio Thies dá explicações a respeito de cada divisão; com minhas próprias palavras (decorrentes de como interpretei a explicação), ficaria algo mais ou menos assim:

Página inicial

De acordo com Dan Thies, a página inicial é onde a maioria dos visitantes entram (ou conhecem) na maioria dos web sites e, embora possa ser feito um trabalho (SEO) para que outras páginas tenham um bom posicionamento, com o intuito de as pessoas entrarem no site através delas (o que acontece, efetivamente), a página inicial é visitada por mais pessoas e mais freqüentemente que qualquer outra página dos sites.

A “regra de ouro” é que se as pessoas conseguirem encontrar o que elas procuram (naquele site) a partir da home page, então o desenvolvedor optou pelo caminho certo; do contrário, há bastante trabalho a ser feito.

Categorias

A segunda “parte” é referente às categorias (“roadmap pages”, como Thies chama). Esta divisão da pirâmide é relativa à estrutura de páginas (ou hierarquia de diretórios), mais especificamente à maneira como esta estrutura está organizada e, a partir desta organização, o qual fácil é para quem está no web site encontrar a informação que deseja ou realizar uma tarefa que é necessária.

Há um mito na área de usabilidade na web que apregoa: “Qualquer informação no site deve estar a, no máximo, 3 cliques”. Na verdade, não é bem assim. Como cita Dan Thies (e Jacob Nielsen, também, em seu livro “Projetando Websites com Usabilidade”), as pessoas não se importam tanto com a quantidade de cliques que têm que dar, desde que o “trajeto” seja simples e que, a cada clique dado, a proximidade do objetivo almejado seja maior.

Com esta preciosa informação em mente, é possível pensar melhor na arquitetura da informação do web site e como ela pode facilitar (ou não…) a experiência do usuário.

Por “curiosidade”, na perspectiva de SEO, a segunda parte da pirâmide é formada por qualquer página do site que consiga fazer link com a página inicial.

Conteúdo

As “Destination pages” (literalmente como consta no livro para designar o conteúdo, propriamente dito), em um site típico, são as mais importantes, na perspectiva das informações e processos de web sites. O esquema de navegação de um “visitante comum” costuma ser o seguinte:

Exemplificando com um site de e-commerce, as “roadmap pages” seriam as categorias de produtos (eletrodomésticos, livros, CDs, etc) e as “destination pages” seriam as descrições de cada produto dentro de uma dessas categorias.

Em uma perspectiva de otimização para mecanismos de busca, as “destination pages” seriam quaisquer páginas que ficam a 2 cliques da página inicial.

Conteúdo profundo

Na maioria dos web sites, ter até três níveis de conteúdo (destination pages) é o suficiente: é possível ter milhares de páginas utilizando este profundidade.

A partir deste “limite”, é preciso fazer um trabalho um pouco mais elaborado (quer dizer, diferenciado) de SEO para uma adequada indexação de páginas que ultrapassam o terceiro nível do site.

Então, segundo o que Dan Thies dá a entender, somente em casos em que realmente é preciso que devemos fazer um site com uma estrutura mais aprofundada que 3 níveis (que são mais que o suficiente).

A “Pirâmide de Conteúdo para Pessoas” tem sentido, mesmo?

Ainda não terminei de ler o livro de Dan Thies; de qualquer maneira, digo que, até o momento, li coisas sobre SEO interessantíssimas, que jamais havia lido em sites sobre o assunto.

Esta “pirâmide de conteúdo”, que representa a estrutura lógica de web sites para pessoas, realmente faz algum sentido. Somando a experiência do autor na área (anos de atuação) com as palavras e a lógica que ele se utilizou no livro, muito provavelmente esta analogia da pirâmide é correta.

Sobre link para página inicial no menu

Tárcio Zemel — Fri, 26 Oct 2007 18:57:15 +0000

Foi levantada uma questão no fatorW: o link home é necessário? Essa questão relativa a usar ou não um link explícito para a página inicial no menu sites atualmente já tem pontos de vista “consolidados”, mas devemos sempre nos perguntar os motivos.

Só de comentários para o post, são mais de 40, fora os “posts especiais” que outros blogueiros também fizeram a respeito. Então, apesar de o tema já ter sido bastante abordado e comentado, não custa nada eu informar minha opinião.

Redundância

Redundância, quando bem utilizada, é algo muito interessante e benéfico para os visitantes de um site. É bom quando “vários caminhos levam à Roma”. Pensem bem: a maioria dos programas voltados para o “usuário final” possuem redundância.

O exemplo de um editor de textos: para colocar um trecho que se digitou em negrito, pode-se clicar com o botão direito do mouse e selecionar “negrito”; pode ser através de um ícone na barra de ferramentas; através dos menus textuais; teclas de atalho; e, talvez, por algum outro caminho.

Por dedução, entendo que o mesmo princípio vale para web sites, ou seja, é um benefício quando o usuário tem diversas maneira de realizar a mesma coisa (seja navegar, fazer cadastros, enviar mensagens, etc).

“Não me faça pensar”

A alusão ao título do livro de Krug é conveniente neste momento.

Para quem não leu o livro, saiba que este é o principal “princípio de usabilidade” de Steve Krug: não me faça pensar. Basicamente, o livro trata de como aplicar esse princípio, de como fazer o usuário “não pensar” ao utilizar web sites/sistemas/softwares. Pode parecer estranho lendo, mas, depois de estudar um pouco sobre usabilidade e, principalmente, ler o livro Não me Faça Pensar, faz bastante sentido.

Certa vez li uma frase muito interessante (em um blog que não me lembro qual): “por mais que o usuário esteja acostumado, o link explícito não deixa dúvidas de sua função“. E é verdade, mesmo! Por mais que a pessoa saiba exatamente como fazer; por mais que haja elementos disponíveis para realizar as mesmas funções, um link claro, explícito, escancarado, não deixa a menor dúvida sobre o que é e para que está ali.

Conhecimentos “nielsenianos”

No livro de Nielsen e Loranger, Usabilidade na Web, é dito que já é um padrão colocar como link para a página inicial o logo do site. Devemos, obviamente, levar em conta de que o livro foi escrito por norte americanos, que vivem e basearam suas análises primordialmente em um país cujo amadurecimento da web é bem diferente da “nossa web” – contando a “generalização” de alguns aspectos.

Certamente nem todas as pessoas que acessam a web conhecem tal “padrão” e, portanto, não se pode tomá-lo por “verdade absoluta”.

Coletânea de técnicas

É muito boa essa realidade toda de a informação ser mais acessível nos “dias de hoje” e que profissionais de vários ramos compartilhem seus conhecimentos. Entretanto, deve-se tomar muito cuidado com a “coletânea de técnicas”; em outras palavras, quando se visita inúmeros site, lê-se inúmeras técnicas encontradas e, sem critérios mais específicos – isto é, sem analisar cada caso, em particular – as usa indiscriminadamente, sem atentar que as técnicas são variadas para, justamente, serem aplicadas em variados e diferentes casos.

É bastante comum que isso aconteça, principalmente com os desenvolvedores iniciantes, que ainda não tiveram a oportunidade de desenvolver os próprios pensamentos e discernimento quanto ao que se deve ou não se deve fazer em cada projeto, pensando que “site é site e é tudo igual”… Não é bem assim!

Conclusão sobre link explícito para a página inicial

Qual é minha resposta para a questão do link explícito para a página inicial? “Depende”… É, a resposta é “Depende”. Levando em consideração todos os tópicos anteriores, como já disse, cada caso é um caso.

Penso que cada projeto merece suas próprias análises, sua própria estruturação e maneira de funcionar. Portanto, a decisão deve ser tomada conforme a necessidade, viabilidade, requisitos do projeto, análise de usabilidade e outros.

É a partir da análise de cada “caso concreto” que se pode dizer que é “certo” ou “errado” colocar, ou não, no menu principal, um link para a página inicial do site.

E você, o que pensa? Um link no menu do site para a página inicial é realmente necessário?

desenvolvimento para web » usabilidade

Melhorando a interação em formulários de busca

O formulário de busca

Termo pré-definido

Melhorando a interação do formulário de busca

Interação com o campo

Interação com o botão

JavaScript final

Conclusão sobre a melhora da interação em formulários de busca

Artigos Relacionados

Estratégia Web de Pirâmide: guia para uma estratégia de web equilibrada

Conteúdo

Usabilidade / Design

SEO

Mídia Social

Pay-per-click (PPC)

Considerações finais

Artigos Relacionados

Breadcrumbs: guia completo com exemplos e melhores práticas

O que é um breadcrumb?

Quando breadcrumbs devem ser usados?

Tipos de breadcrumbs

Breadcrumb de Localização

Breadcrumb de Atributo

Breadcrumb de Caminho

Benefícios de se usar breadcrumbs

Erros na implementação de breadcrumbs

Usar breadcrumb quando não é preciso

Usar breadcrumbs como navegação primária

Usar breadcrumbs quando a página tem múltiplas categorias

Considerações sobre o design da navegação por breadcrumb

O que deve ser usado para separar os links do breadcrumb?

O quão grande um breadcrumb deve ser?

Onde deve ser a localização do breadcrumb?

Resumo das características de breadcrumbs

Exemplos de breadcrumbs

Artigos Relacionados

Ferramentas para criação de wireframes

MockFlow

Axure

Balsamiq Mockups

Pencil Project

HotGloo

Mockingbird

Cacoo

ProtoShare

iPlotz

Artigos Relacionados

Recursos de usabilidade grátis

UsabilityTest.com

WebsiteOptimization.com

LinkChecker Firefox Add On

ClickHeat

Five Second Test

Colour Contrast Check

Colour Contrast Analyzer Firefox Extension

GrayBit

Artigos Relacionados

4 elementos de design para um bom call to action

Tamanho

Forma

Cor

Posição

Conclusão sobre bons call to actions

Artigos Relacionados

User Interface em dicas rápidas

Faça botões com “cara de botões”: call to action explícito

Reduza o número de cliques

Defina um objetivo

Aumente a performance de seu site

Conclusão sobre user interfaces eficientes

Artigos Relacionados

10 diretrizes para a construção da credibilidade de um web site

Faça com que seja fácil checar a veracidade das informações em seu site

Mostre que há uma verdadeira organização por trás de seu site

Destaque a experiência da sua organização e no conteúdo e serviços que você fornece

Mostre que pessoas honestas e confiáveis estão por trás de seu site

Faça com que seja fácil entrar em contato com você

Faça um design profissional para seu site (ou que seja apropriado para sua finalidade)

Faça seu site fácil de usar – e útil (eficiente)