Posts Tagged ‘webdesign’
Quando se pensa em web design a primeira coisa que nos vem a mente é a parte visual: imagens, gráficos, cores… mas web design é mais do isso. O web design deve considerar, de forma geral, a facilidade com que o usuário realiza as ações que desejamos nas páginas do web site. Por exemplo: um site de e-commerce deve propiciar ao usuário a concretização da compra de forma fácil e rápida, ao percorrer as etapas necessárias à compra com o mínimo possível de atrito.
Um web site que apresenta um bom design deve possuir as seguintes características.
Texto de fácil leitura
Facilidade de leitura significa que você deve dar uma atenção especial à escolha das cores da fonte e do fundo das páginas. Não utilize uma cor de fundo que prejudique a leitura do texto, evite cores escuras, de forma que se confundam com o texto e tornem cansativa a leitura.
Fonte de texto escura sobre um fundo claro é mais fácil de ser lida do que o oposto: um texto em cor clara sobre um fundo escuro.Também não é boa idéia usar um texto muito pequeno ou grande demais. Lembre-se que texto escrito todo em maiúsculas, VAI PARECER QUE VOCÊ ESTÁ GRITANDO COM SEUS USUÁRIOS!!!!.
Alinhando o texto. Texto centralizado fica bem para títulos. O seu usuário deve se sentir à vontade ao ler o conteúdo do seu site; portanto, use o alinhamento que é padrão no mundo ocidental onde se costuma ler da esquerda para a direita.
clique em More para conhecer as outras dicas!
Um pesquisador chamado Paul Fitts fez uma descoberta óbvia nos anos 50: “A dificuldade para atingir um alvo é uma função da distância do alvo e de seu tamanho”. Por isso, quanto maior o alvo e mais perto da origem do movimento, mais fácil é de acertar. Dãããã… essa você já sabia desde criança. Pois é, mas continua praticamente inexplorada pelos designers de interação até hoje.
É comum encontrar botões grandes nas interfaces? Não. A navegação secundária está sempre o mais perto possível da navegação principal? Não. Os cantos do monitor são usados como alvo? Não.
Talvez a facilidade motora não seja importante para a maioria dos projetos de interface, mas acredito que se essa Lei fosse mais conhecida, seria melhor aproveitada. Numa sociedade que valoriza mais a dimensão semântica (significado) do que a pragmática (uso) das interfaces, isso é compreensível.
Botões grandes
Botões grandes são mais fáceis de acertar, mas são difíceis de encaixar nos layouts porque dificultam a hierarquia visual. Se o botão não é usado na tarefa, ele chama a atenção desnecessariamente. Se o botão é grande, também é maior a ênfase persuasiva na opção.
Uma dica simples é que a área de ação do botão tenha, pelo menos, 12px de largura e 24px de altura, que é o tamanho do cursor padrão do mouse. Assim não resta dúvida se o cursor está dentro ou fora do botão. Além disso, pode-se estender a área de ação para fora do desenho do botão, o que dá uma margem de erro para a pontaria do cursor. Na Web, o cursor muda automaticamente quando está sobre a área de ação do botão.
Cantos da tela
Melhor do que botão grande, só posicionando o botão no canto da tela. Por mais que o usuário arremesse seu mouse para o lado, não há como passar além do limite da tela. É como se o botão tivesse altura e largura infinitas. Para um destro, o canto inferior direito é o mais rápido de acessar, seguidos do canto superior esquerdo, superior direito e inferior esquerdo. Mexa o mouse e deixe que seus músculos lhe provem isso. Os pontos das bordas entre os cantos também são poderosos, mas possuem apenas uma das dimensões infinitas: ou largura ou altura.
O Mac OSX faz bom uso da Lei de Fitts. Os menus dos softwares estão posicionados sempre no topo absoluto da tela, o que os torna muito mais rápidos de acessar do que os menus no Windows, posicionados ligeiramente abaixo do topo da tela, quando a janela está maximizada. Quando trabalhava na Apple, Bruce Tognazzini verificou que a performance dessa disposição era muito melhor do que outro computador com dois monitores, um em cima do outro, com o menu no topo do monitor de baixo, o que eliminava a altura infinita do menu.
O Dock, a metáfora de barra de programas do OSX, além de estar grudada num dos cantos da tela, amplia os ícones na medida em que o mouse se aproxima.
O OSX peca, entretanto, na barra de rolagem. Quando se maximiza uma janela, ela não encosta no canto direito da tela.
Proximidade do mouse
Entretanto, a Lei de Fitts não deve ser prioridade absoluta em todas as ocasiões no Design de Interação. Bruce Tognazzini sugeriu certa vez que os menus contextuais (acionados com o botão direito do mouse) deveriam se alinhar centralizadamente ao ponteiro do mouse, deixando as opções mais próximas do ponteiro. Isso de fato facilitaria o acesso a algumas opções do menu, mas complicaria a compreensão do contexto.
No buscador de músicas Songza, criado pelo filho de Jeff Raskin, quando se clica num item da lista, o menu aparece em círculo ao redor do cursor.
Comparando com o menu contextual do iTunes, é possível perceber a intenção de priorizar as opções mais comuns, bem como uma ordem lógica.
(Fonte: Frederick van Amstel http://imasters.uol.com.br/artigo/9801/usabilidade/lei_de_fitts/)
1. Menos é mais. Faça o site leve e rápido
Se você esta vendendo um produto ou serviço na Internet, não se deixe levar pelos ‘artistas’ da rede. Mantenha o foco em sua mensagem. Ninguém quer ver um layout cheio de animações e gravuras que nunca terminam de baixar.
Tenha em mente que se não ajuda a vender não serve. Não faça nada só porque os outros estão fazendo. Construa um site para agradar ao cliente, não ao chefe.
Lembre-se que “a imagem seduz, mas é o texto que vende”. Se
você quiser passar sua mensagem não deve esconde-la. Use um layout limpo e elegante, clean. Simples, mas não simplório.
Você tem apenas alguns segundos para conquistar a atenção do Internauta. Mantenha as páginas leves, use poucas imagens, bem colocadas e comprimidas. O texto deve ser direto e objetivo. Especialmente na página inicial.
2. Padrão
Todos nós temos uma “zona de conforto”. Gostamos de nos sentir acomodados e seguros. Imagine chegar em casa todos os dias e a cor das paredes estar diferente? No começo pode ser um “barato”, mas depois de algum tempo, você começa a ficar ansioso e inseguro.
Da mesma forma, mudar a cara de cada página, torna as pessoas confusas e impacientes. Elas podem pensar que estão em outro site e quando você menos espera, estarão mesmo.
Mantenha o mesmo padrão em todas as páginas. É fácil, basta:
• Usar as mesmas cores, molduras, botões, fontes e demais elementos em todas as páginas;
• Deixar a logomarca da empresa sempre na mesma posição.
• Se o menu está à esquerda, deixe-o lá o tempo todo, se estiver à direita, idem.
Além de tudo, mantendo um layout padronizado você passa uma impressão mais profissional.
Pense no Mac Donald´s: uma franquia com centenas de lojas em todo o mundo, todas iguais. Você sabe que em todas elas vai encontrar o mesmo serviço e a mesma satisfação.
3. Navegação
A palavra chave é simplicidade. A Internet já é um labirinto de informações. Conheço diversas pessoas que ficam loucas quando têm que achar alguma coisa. Então não complique, torne a navegação em seu site simples e direta.
Todas as páginas devem estar a dois, no máximo, três clicks de distância umas das outras. Você pode conseguir isto colocando menus para as áreas principais do site em todas as páginas.
Uma forma de testar a navegação do site é chamar alguém, de preferência, sem muito conhecimento. Peça a ele que encontre alguma coisa que VOCÊ sabe que está lá, só não diga como.
Outra forma é imaginar-se um iniciante na Internet e verificar se seria difícil encontrar alguma informação.
4. Fale conosco
Já tentou entrar em contato com a empresa e se perdeu no labirinto de links e páginas sem encontrar o email ou telefone da mesma? Eu já e aquela empresa perdeu um possível cliente.
Para evitar este problema, coloque seu email em todas as páginas. Se necessário faça um formulário de contato com poucos campos para o usuário preencher. Apenas o nome, email, telefone (caso haja algum problema com o email) e um espaço para a mensagem são necessários. Você poderá pedir as outras informações mais tarde. O importante agora é fazer contato.
5. Logos e Imagens
Já disse que ninguém quer esperar dois minutos para ver uma gravura que nunca termina de carregar. Mantenha suas imagens a um mínimo possível. Se você tem que usar muitas imagens para passar sua mensagem, uma palavra: compressão.
Imagens são uma parte importante do site, mas podem torna-lo muito pesado. Para evitar ou pelo menos minimizar este problema, use compressores de imagens. Existem diversos disponíveis no mercado, inclusive alguns gratuitos.
6. Fontes (famílias de tipos de letra)
Use apenas uma fonte em todo o site. Se quiser usar mais de uma fonte, use apenas para destaques, citações e títulos. Mantendo a variação de tipos de letras ao mínimo, você garante um visual mais padronizado e limpo. É muito mais profissional.
Outra razão é que há poucas “fontes padrão” na Internet. Arial, Verdana, Courier e Times New Roman são algumas delas. Se você usar alguma fonte fora dos padrões, pode ser que os usuários não vejam as páginas como foram criadas. Mantenha o padrão.
7. Espaço em branco
Tão importante quanto as notas de uma canção são as pausas. Pergunte a qualquer músico.
O mesmo ocorre no design de qualquer peça publicitária. Deixe que as palavras saltem da tela, colocando bastante espaço entre elas. Deixe o texto ‘respirar’. Use margens à esquerda e a direita.
Seguindo estas sugestões, o visual ficará muito mais limpo, agradável e profissional.
8. Becos sem saída
Um beco sem saída é uma página aonde não existem links para sair dela.
Pense no site de uma forma que não precise dos botões do browser para navegar, ou seja, se precisar clicar no botão voltar, tem alguma coisa errada.
Você pode colocar um link <voltar> nas páginas, mas esta não deve ser a única forma de sair da página.
9. Links Mortos
Links mortos são aqueles que estão no menu, mas ainda não foram criadas as páginas correspondentes ou, pior ainda, levam a uma “página em construção”.
Se a página não existe ou não está completa, não coloque indicações para ela, no futuro você poderá colocar os links e destacar que a página é nova, tornando o conjunto mais dinâmico e trazendo maior impacto. Além de tudo, links mortos dão um ar de falta de profissionalismo.
Páginas com a mensagem “em construção” causam uma frustração enorme ao internauta, afinal ele espera encontrar a informação, mas ela não está lá.
Veja que um site de verdade, estará sempre em construção. A construção só termina com o fim do site ou da empresa.
10. Links Quebrados
Teste todos os links em todas as páginas, sempre. Links quebrados, ou seja, os que levam a páginas de erro ou não existentes, são outro fator de frustração e falta de profissionalismo.
Se você tem muitos links externos (para outros sites), teste-os de vez em quando para manter a integridade do site.
Esse assunto gera muita polêmica entre os artistas gráficos e outros profissionais envolvidos no desenvolvimento de websites. Se você quiser expressar a sua opinião, ela será muito bem-vinda e, se permitir, ela será publicada no site. Envie para artigos@promofor.com.br.
Pode ser que estas dicas não salvem seu site do fracasso, mas tenha certeza que elas ajudam. Além de um bom design você vai precisar de um bom produto, tráfego, atendimento de qualidade e ferramentas de analise, mas isto é assunto pra outro dia. Até lá.
© 2001 Renato Fridschtein – Todos os direitos reservados
——————————————————————————–
Nota de Autoria: Renato Fridschtein é autor de artigos e ebooks sobre marketing na internet. Você pode encontrá-nos no site www.promofor.com.br/meio. Suas idéias vão muito além de home pages e mostram como ter um empreendimento de sucesso na Internet. Entre em contato pelo info@promofor.com.br
Você pode usar este artigo em sua página ou informativo, desde que mantenha o texto intacto e inclua esta nota de autoria, inclusive os links e esta sentença. Avise-nos quando o artigo for publicado
Sobre
Blog do Evonline para tirar dúvidas e incrementar seu site Evonline.