Especialistas explicam o que faz a diferença entre uma página de internet boa e uma ruim (e-mail que recebi do Jociel)

http://oglobo.globo.com/tecnologia/mat/2009/02/16/especialistas-explicam-que-faz-diferenca-entre-uma-pagina-de-internet-boa-uma-ruim-754426453.asp

Publicada em 16/02/2009 às 08h41m
Eduardo Almeida

RIO – Os sites da World Wide Web são baseados numa linguagem de programação chamada HTML (sigla em inglês para Linguagem de Marcação de Hipertexto). O problema é que o HTML é muito simples e fácil de aprender. Isso deu origem a uma figura odiada pelos webdesigners profissionais: o “sobrinho” que gosta de “programar”.

Muitas empresas que querem estar na internet mas não estão a fim de gastar muito dinheiro com isso, contratam profissionais desatualizados ou curiosos que não conhecem todas as sutilezas do design. Isso quando o dono não pede para o “sobrinho” fazer o site.

A usabilidade tem que estar presente. Aprenda e aplique testes. Steve Jobs ouve cem usuários quando está criando um novo produto.
Acontece que, desde a década de 90, o HTML evoluiu muito e outras linguagens apareceram para incrementar o visual e a funcionalidade dos sites, entre elas o CSS, Javascript, Ajax etc.

Essa evolução só é acompanhada por quem trabalha com o assunto no dia-a-dia. Para dar uma idéia de todas as possibilidades de interação que existem num site da internet, pedimos que profissionais da área comentassem exemplos de boas utilizações dos principais conceitos de webdesign. Confira nestas páginas as palavras da webdesigner Barbara Veloso e do professor Bechara, especialista em usabilidade e acessibilidade.

Barbara afirma que, para começar, um site precisa ser visualmente agradável. Ou pelo menos visualmente coerente. É importante manter o visual escolhido de colunagem, apresentação dos itens, posição de botões, etc. Uma dica é aprender mais sobre a proporção áurea, um método matemático, presente na vida de todos nós e até em nossos corpos: http://www.designinabox.nu/featured-articles/proporcao-aurea/ .

Bechara defende ardorosamente duas nobres causas: a acessibilidade e o uso de padrões web. A primeira permite que seu site seja visualizado em diversos dispositivos, desde os browser tradicionais até aparelhos celulares. Além disso, torna mais fácil a vida de pessoas com deficiências visuais, entre outras, que visitarem sua página.

Já os padrões web garantem que o projeto seja exibido da mesma forma em todos os navegadores, desde o Explorer até o novato Chrome, passando pelo Firefox e Opera. Saiba mais em www.w3c.br .

- A usabilidade tem que estar presente – diz Bechara – Aprenda e aplique testes. Steve Jobs ouve cem usuários quando está criando um novo produto. Testes de usabilidade podem ser mais baratos do que você imagina.

E, se você se perder, procure sempre pelo Mapa do Site. Muitos oferecem esse recurso que mostra em uma só páginas todas as áreas navegáveis.
Confira abaixo as dicas de Barbara Veloso e do professor Bechara.

ARQUITETURA DA INFORMAÇÃO: Seu usuário é um especialista no assunto do seu site? Não? Então qual é a linguagem dele? Nem sempre o seu site será visitado por um expert no assunto. Tente criar uma arquitetura de acordo com o perfil do seu usuário. Descubra o seu público-alvo, o que ele realmente procura e de que forma quer pesquisar. Facilite a vida dele e, como diz Steve Krug em sua primeira lei, “Não me faça pensar”. Veja um bom exemplo em www.bestcellars.com

NICHOS: Que tal ter um nicho de mercado só para você? Ao invés de brigar para ser o melhor em um espaço disputado, porque não pensar em um segmento único? Deixe os outros brigarem pois você está nadando em um oceano azul. Para saber mais recomendo o livro de W. Chan Kim e Renée Mauborgner, Blue Ocean Strategy. Um exemplo? O Nintendo Wii.

PADRÕES WEB: Adote padrões Web incondicionalmente. Uma boa marcação no seu código estrutural só lhe trará vantagens. Seu projeto será exibido de forma igual nos navegadores mais usados da Web. Seu conteúdo será acessado por outros dispositivos. Você poderá incrementar sua criatividade, pois existem coisas que só o CSS pode fazer por você. Criará seus sites mais rapidamente, assim como, sua manutenção será mais simples. Escreverá menos e assim seu site ficará mais rápido para ser carregado. Além disso o Google compreenderá muito melhor o seu código e assim posicionará melhor o seu site. Pode ter certeza, você agradará seus usuários. Veja mais em http://www.w3c.br

XML: Podemos fazer mais em nossos sites. Além de usarmos CSS e XHTML, use também outras tecnologias XML para extrair ao máximo o potencial da Web. Imagine você usar um ilustração vetorial de fato em seu site. Softwares como Adobe Illustrator e o free Gimp já criam ilustrações em SVG. Vantagem? Estes arquivos se adaptam perfeitamente ao dispositivo que estiver sendo usado. Tela, papel ou um outdoor com a mesma qualidade. Quer jogar um tetris em SVG? Anote: http://www.croczilla.com/svg/samples/svgtetris

PÁGINA NÃO-ENCONTRADA: Nada mais frustrante do que clicar em um link e receber um erro de volta. Estes links mortos, ou dead links, devem ser evitados a qualquer custo. Mas nos casos não previstos, vai aparecere a famosa página 404 – aquela “não encontrada” – e ela deve ajudar a encontrar o caminho de volta à origem ou a algum lugar no site. Para esta página vale pensar numa navegação com busca evidente, link para a home ou mapa do site e layout bem minimalista – fora a clássica mensagem de “alguma coisa deu errado”. Valide os links do seu site em http://www.dead-links.com/ e veja um ótimo exemplo de página 404 em http://cutandtaste.com/naoencontrada

ACESSIBILIDADE: Que tal seu site ser acessado por todas as pessoas? Que tal ele ser visualizado em todos os dispositivos? É um sonho? Claro que não!. Aprenda a construir acessibilidade na Web pois a acessibilidade não é só para deficientes, é para todos. Desde os celulares que irão exibir seu site nos celulares mais simples até em sofisticadas cadeiras de avião, o importante é aparecer bem para todos. Quer saber mais como criar sites acessíveis? Leia o WCAG 1.0

FORMULÁRIOS: Você acessa uma loja de livros virtual e quer ler a crítica de um deles. No primeiro clique é levado a uma página de cadastro – ou uma tela de login. É bem possível que você desista de navegar por ali. As duas telas devem ser exibidas no momento em que sejam realmente necessárias – e no momento mais estratégico. Assim, você não vai se incomodar de preencher algumas (poucas, por favor) informações para prosseguir. Dica: os links de login e sign-up devem estar sempre bastante visíveis, mantendo a mesma posição no site inteiro. Saiba mais sobre as polêmicas dos formulários de cadastro.

MENUS: Menu vertical? Horizontal? Infelizmente não há resposta certa para todos os casos. Mas a navegação deve estar sempre em evidência, pois o usuário não pode e não vai criar um mapa mental elaborado sobre o seu site. O menu deve ser um bloco de peso no layout, para ser identificado e aprendido. Cuidado com a quantidade de itens do menu. Subdivida os links em áreas e permita que alguns deles não apareçam necessariamente em todo o site. Saiba priorizar o que é realmente importante e merece destaque.

Dica: evite os menus em drop-down. É muito comum que o menu feche antes do usuário conseguir clicar. Além disso, parte da navegação fica escondida, neste caso. Quer testar a usabilidade do seu menu? Use o http://teste.testeusabilidade.com.br/

CONTROLE AO USUÁRIO: Não quer irritar o seu usuário? Então nada de links que abram obrigatoriamente em nova janela. E nada de pop-ups. Não redimensione a janela do navegador ou transforme o browser em fullscreen sem aviso e necessidade. Lembre-se: o controle está nas mãos de quem segura o mouse (ou teclado, ou afins) para navegar. Dica: dê cada vez mais controle. Crie botões para aumentar ou diminuir tamanho de texto e ver a página em versão para daltônicos, como no site do MEC, disponível em http://portal.mec.gov.br/index.php

BREADCRUMBS: Da velha história de João e Maria veio a inspiração para a trilha do pão. Este recurso pouco utilizado é a forma mais simples de localização em um site. Em geral, a posição do breadcrumb é perto do título do site, e classicamente é representado com o símbolo de “maior que”, para hierarquizar o caminho. Algo como: Home > Produtos > Eletrônicos.

MASHUPS: Por que trabalhar dobrado se alguém já fez o que você precisa? Use Mashups. Podemos usar em nossos sites aplicativos de terceiros ou mesmo criar ferramentas através da união de vários serviços já prontos na Web. Que tal se, em seu site, você unisse o Flickr com o Google Earth? Quer uma amostra muito interessante? http://flickrvision.com/maps/show_3d

MAPA DO SITE: Existem dois tipos de mapas do site, ou sitemaps. Aqueles que você disponibiliza no seu site, para linearizar e facilitar a navegação, como um desenho da hierarquia das páginas, ou aqueles criados apenas para informar os buscadores, como o Google, sobre as áreas do seu site. Não há problema algum em criar os dois, porque facilitar a navegação nunca é demais. Dica: o http://sitemaps.org/ documenta o protocolo usado pelos buscadores. Teste o gerador de sitemaps online: http://www.xml-sitemaps.com/

Links que dão segmento ao assunto:

http://www.tuxresources.org/blog (vale separar um tempo para ver o site todo)

Parte 1: A importância da Identidade Visual
http://www.tuxresources.org/blog/archives/443

Parte 2: O processo de construção de um nome (marca)
http://www.tuxresources.org/blog/archives/458

Parte 3: A fórmula da beleza…
http://www.tuxresources.org/blog/archives/468

Entrevista com LedStyle
http://geniuslife.wordpress.com/2008/04/17/entrevista-ledstyle/

wikipedia:
http://pt.wikipedia.org/wiki/Propor%C3%A7%C3%A3o_%C3%A1urea