Usabilidade | desenvolvimento para web

Arquivo da categoria 'usabilidade'

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

Publicado em março 24, 2008 em seo e usabilidade. 1 comentário

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.

Pirâmide de conteúdo: estrutura lógica de web sites (na perspectiva das pessoas / visitantes).

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:

Esquema de navegação de pessoam que visitam web sites.

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.

Nomes de domínios com caracteres da língua portuguesa

Publicado em novembro 19, 2007 em miscelânea e usabilidade. 0 comentários

Neste artigo, revelo minha tardia descoberta a respeito do anúncio do registro.br, que regulamenta a permissão de cadastro de domínios que contenham “caracteres especiais”.

Infelizmente não tenho tanto tempo de navegar na web quanto gostaria; principalmente ler os feeds que assino, que gosto muito! Hoje de manhã, tentando “recuperar o tempo perdido”, enquanto via as últimas notícias do pixeladas aleatórias, tomei conhecimento de uma notícia muito interessante: o registro.br, através de um de seus anúncios, agora permite que a escolha dos nomes de domínios contenham caracteres da língua portuguesa, ou seja, vogais acentuadas e cedilha.

O cerne da tecnologia funciona convertendo os endereços contendo caracteres especiais para Ascii em uma codificação compatível com o sistema DNS.

Um trecho interessante do anúncio é:

Para fins de registro, estabelece-se uma equivalência (EQUI) na comparação de nomes de domínio como já era feito no caso do hífen. O mapeamento será realizado convertendo-se os caracteres acentuados e o cedilha, respectivamente, para suas versões não acentuadas e o “c”. Somente será permitido o registro de um novo domínio quando não houver equivalência a um domínio pré-existente, ou quando o solicitante for a mesma entidade detentora do domínio equivalente. Assim evita-se induzir os usuários a erro e não se cria uma corrida ao registro de nomes.

Por exemplo: alguém só poderá registrar “www.ímã.com.br” caso “www.ima.com.br” não exista ou quem queira registrar seja o detentor deste.

A título de curiosidade, este anúncio também “decretou” que, para a proteção da privacidade individual, os endereços postais e os telefones de pessoas físicas não mais serão exibidos no servidor whois.

ver o anúncio no registro.br

Prism

Publicado em novembro 17, 2007 em indicações, miscelânea e usabilidade. 0 comentários

Nesta matéria, falo sobre o Prism, aplicação que permite criar atalhos para web sites diretamente na área de trabalho - em “navegador próprio”.

Sumário

Introdução
Tecnicamente falando, como o programa funciona?
Usando o Prism
Considerações finais
Referências Internacionais

Introdução

E aí, existe ou não a “web 2″? Penso que não! O que existe é uma evolução da web da forma como a conhecíamos em outrora. Você, quando aprende algo novo ou consegue fazer alguma coisa que não conseguia, ou faz com facilidade algo que só fazia dificilmente, vai ao cartório para trocar de nome?

Mantendo-se as devidas proporções, é isso o que alguém fez ao querer “renomear” a web; e o “povo” caiu…

Há, sim, atualmente, recursos que são possíveis de se obter, técnicas que são mais facilmente executadas, tecnologias que não existiam, aplicativos que facilitam tudo isso. Não precisa de mudar o nome de nada… É só saber que, hoje, há uma maior gama de possibilidades no desenvolvimento para a web, que beneficia tanto usuários quanto desenvolvedores. Uma destas “tendências” é tentar fazer os web sites o mais próximos possível de aplicativos desktop.

Neste sentido, o Prism é uma ótima!

A explicação “oficial”, extraída (e traduzida livremente) do Mozilla Labs, é:

Prism é um aplicativo que permite que os usuários dividam aplicações web fora de seus navegadores e executem-nas diretamente em sua área de trabalho.

Tecnicamente falando, como o programa funciona?

Muito bem, agora que o conceito foi dado, vou continuar com a explicação, que é dada segundo o que eu entendi a respeito do programa.

Segundo consta no wiki da Mozilla, o “tchan” do Prism é que ele é baseado em uma tecnologia chamada “Site Specific Browsers” (SSB), que permite, através de um navegador integrado, trabalhar exclusivamente com uma única aplicação web - sem precisar de / ter menus, barra de ferramentas, barra de status, etc.

Ou seja, você instala o programa, segue alguns passos simples e tem um ícone que direciona para um web site / sistema web, e dêem especial atenção à palavra “um”, porque é literalmente o que se pode fazer: acessar o endereço que foi configurado para o atalho; nem mais, nem menos.

Usando o Prism

Primeiramente, é preciso baixar e instalar o programa (estou em ambiente Windows, no momento…). Procedimento padrão, tudo muito tranqüilo. O instalador cria o atalho para o programa conforme as opções escolhidas na instalação. No meu caso, escolhi para ter atalho no menu “Iniciar”.

Depois, deve-se simplesmente ir ao respectivo submenu e clicar no ícone do programa. Uma tela se abre.

tela do Prism

Nela, tudo o que deve ser feito é informar para qual endereço web se deseja criar o atalho e o nome que se quer dar; optar por exibir ou não barra de localização, status e atalhos de navegação; em qual(is) lugar(es) serão criados o atalho, propriamente dito.

No meu caso, vou fazer um atalho para o blogblogs, que é um sistema brasuca que acho especialmente interessante. Não quero que tenha barra de localização, de status, nem atalhos. Vou criar um atalho somente na área de trabalho.

tela do Prism com alguns dados preenchidos

E, para cada atalho que se queira, basta executar novamente o Prism. E uma dica: basicamente, o que se tem é um atalho, mais ou menos como qualquer outro; então, é possível que se altere seu ícone. Fica mais organizado, caso você tenha vários atalhos e queira encontrar um, em especial, fica mais rápido e prático e, além disso, fica mais bonito! :-)

Considerações finais

Pessoalmente, achei a intenção dos criadores muito “nobre” e, até certo ponto, bastante criativa. Penso que foi dado, sim, mais um grande passo rumo à “desktopização” dos aplicativos web.

Por fim, deixo o relato de uma experiência própria: fiquem sabendo que o Prism é especialmente útil quando se quer disponibilizar um sistema online para clientes (e amigos) leigos e/ou impacientes, quando o assunto é informática e PCs, em geral.

Na semana passada, Gevã e eu terminamos de desenvolver um sistema para a PJF; o “público alvo” de tal sistema consiste em, basicamente, usuários que não tem a mínima intimidade com a web, limitando-se a, no máximo, checar emails. Optamos por instalar o Prism, para testar. Os resultados não poderiam ter sido melhores!

Além da facilidade de utilização do sistema que os usuários finais tiveram - simplesmente clicar em um ícone na área de trabalho para começar a utilizá-lo -, nós mesmos “poupamos” tempo de desenvolvimento; dado o fato de o Prism rodar sobre Gecko e, por isso, renderizar de forma semelhante ao Firefox, nós não tivemos que nos preocupar em implementar IE hacks para garantir a correta renderização das páginas.

Valeu mesmo à pena e, como já disse, recomendo fortemente a utilização do Prism, especialmente para os casos em que os usuários finais são inexperientes e/ou se queira “poupar recursos” com o desenvolvimento, já que a renderização das páginas segue fielmente a maioria dos padrões da web.

baixar o Prism

Prism on Mozilla Labs
Artigo do Mozilla Labs que anuncia a incorporação oficial do então projeto Webranner a seu “repertório”.

Prism Prototype Now Available on Mac and Linux
Anúncio oficial que informa as agora disponíveis versões do Prism para Linux e Mac OS X.

Operator para Firefox e microformatos

Publicado em novembro 14, 2007 em firefox, indicações, microformatos e usabilidade. 0 comentários

Neste artigo, falo um pouco sobre a Operator, extensão para Firefox que identifica microformatos nas páginas e facilita a interação dos dados com alguns serviços web.

É conveniente que se tenha uma noção do que sejam microformatos.

Há cerca de 6 meses conheci os microformatos; Infelizmente, por motivos vários - sendo o principal deles a “falta de tempo” -, não pude dar continuidade aos estudos e me aprofundar no tema. Como, atualmente, estou em uma “fase de estudos” na minha vida, decidi que um dos itens de minha lista seriam os microformatos. Além do quê, é importantíssimo, para um desenvolvedor web, saber do que se trata e saber aplicá-los a seus projetos.

O fato é que conheci uma excelente extensão para Firefox, a Operator, que possibilita a seus usuários usufruir de alguns benefícios em serviços web a partir de microformatos.

É o seguinte: quando se instala a extensão, uma nova barrinha aparece no Firefox. Nela, encontramos 7 menus, que se habilitam conforme a página em que se está atualmente.

barra de funções do Operator

Ou seja, as opções são habilitadas segundo os microformatos presentes na página. Se, por exemplo, o microformato hCard estiver implementado, a opção “Contacts” fica ativa, apresentando algumas subopções que podem ser escolhidas.

barra de funções do Operator com a opção "Contacts" habilitada

E o mesmo para cada tipo de microformato implementado. Só para citar alguns exemplos, dependendo do microformato há funcionalidades para:

Ou seja, a Operator é um grande avanço para se começar, efetivamente, a explorar o potencial dos microformatos. Ela os “aproveita” para ajudar aquele que a instalou a desfrutar de mais interatividade com bons serviços web, facilitando o trabalho / diversão dos usuários.

Afinal, é para isso que os microformatos servem!

baixar o Operator

Referências Nacionais

Wiki oficial
Que tal começar pelo “oficial”?

Microformats: aprenda a descrever seus dados
Esta á uma ótima introdução sobre os microformatos.

Microformatos para leigos
Outro bom artigo introdutório sobre os microformatos.

Microformatos
Mais texto explicando o que são os microformatos.

Melhores sites sobre microformatos
Lista compilada pelo pessoal da neosite.

Referências Internacionais

microformats.org
Este é o site oficial.

Introducing Operator
Só para constar, o Operator é um projeto do Mozilla Labs. Este post explica sobre o Operator “direto da fonte”.

What are microformats?
Uma apresentação feita por Tantek Çelik para explicar o que são os microformats.

Sobre link para página inicial

Publicado em outubro 26, 2007 em miscelânea e usabilidade. 2 comentários

Nesta postagem exponho meu ponto de vista sobre a questão levantada pelo Walmar, a respeito de se usar ou não um link para a página inicial em menus principais de web sites.

O Walmar, há poucos dias atrás, levantou uma interessante questão, que está sendo bem debatida em algumas searas da blogosfera: “O link home é necessário”?

Só de respostas para o post que ele fez, são mais de 30 (no momento em que escrevo), fora os “posts especiais” que outros blogueiros fizeram a respeito, como o do Rochester, do Web Bem Feita, da Areta, e, muito provavelmente, outros.

Então, apesar de o povo já ter falado bastante a respeito, não custa nada eu informar minha opinião - que nada mais será que um pequeno aprofundamento do comentário que fiz no post da Areta.

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 em cima, selecionar algo como “formatação” e selecionar “negrito”; pode ser através de um ícone na barra de ferramentas; através dos menus textuais; 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, também feita pelo Rochester, é útil neste momento.

Para quem não leu o livro, saiba que este é o principal “princípio de usabilidade” de Steve Krug; 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 (rsrs), mas, para sanar a dúvida, basta dar uma lidinha! ;-)

Para este tópico, faço minhas as palavras de Rochester (sempre achei essa expressão estranha, mas vá lá…): Por mais que o usuário esteja acostumado, o link explícito não deixa dúvidas de sua função.

Conhecimentos “nielsenianos”

No livro de Nielsen (se não me engano), Projetando Websites, há uma parte em que ele cita que já é mais ou menos um padrão colocar como link para a página inicial, o que vai de encontro ao que o Rochester disse. De qualquer maneira, o livro foi escrito por um norte americano, que mora num país cujo amadurecimento da web é bem diferente do da “nossa web” - contando a “generalização” de alguns aspectos.

Certamente alguns usuários desconhecem tal “padrão” e, portanto, não se pode tomá-lo por “verdade absoluta”.

“Coletânea de técnicas”

É muito bom essa realidade toda de a informação ser mais acessível nos “dias de hoje”, e tudo o mais, e que profissionais de vários ramos compartilhem seus conhecimentos, mas deve-se tomar cuidado com a “coletânea de técnicas”, quer dizer, o sujeito visita tudo quanto é site, guarda todas as técnicas que encontra e as usa indiscriminadamente, sem atentar para as peculiaridades inerentes a todo e qualquer projeto…

É 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 determinada ocasião.

Conclusão

Qual é minha resposta para a questão? “Depende”… É, isso, mesmo, a resposta é “Depende”. Levando em consideração todos os tópicos anteriores, creio que - agora vem mais uma frase pronta… - “cada caso é um caso”.

Como citei, penso que cada projeto merece suas próprias análises, sua própria estruturação e maneira de funcionar - apesar de, numa primeira olhada, parecer ser “tudo a mesma coisa”. Portanto, a decisão deve ser tomada conforme a necessidade, viabilidade, conveniência, e outros.

É a partir da análise do “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.

Recapitulação

Surgiu uma discussão entre os blogueiros sobre uma questão de usabilidade: usar ou não usar, no menu principal dos web sites, um link para a página inicial?

Para responder a esta pergunta, deve-se considerar cada projeto, particularmente, a fim de saber se, nele, é conveniente que se lance mão deste recurso.