Crédito da foto: António Nunes

As pessoas tem anseios que desejam realizar, seja fazer uma compra, encontrar uma receita, ou aprender algo novo.

Inerentes a muitos designs de páginas web são, portanto, informações para ajudar o usuário a executar uma ação.

Em poucas palavras... Este tipo de sinais visuais devem normalmente fornecer instruções para ajudar os usuários a saber o que fazer.

Estas instruções guia os olhos e as mentes das pessoas para fazer suas buscas no lugar certo e tomar as medidas adequadas para o que precisam.

Neste artigo, Connie Malamed identifica e explica quais são os aspectos mais críticos aos quais prestar atenção no esforço de acrescentar ou reforçar as mensagens de navegação do usuário e as instruções para ajudar os leitores a encontrarem o que precisam ou iniciar uma ação específica online.

Em particular, algumas das principais questões destacadas neste relatório mostram a importância de diversos fatores únicos em projetar instruções de navegação eficazes para o usuário:

• Maximização da segmentação do público
• Controle de informação em excesso
• Estilo de redação
• Melhora na acessibilidade
• Teste de relevância

Não deixar nada ao acaso ou à própria sorte, mas planejar como oferecer uma navegação eficiente para os leitores e clientes que procuram completar uma tarefa específica no seu site é um investimento valioso no qual qualquer editor de conteúdo web profissional, não apenas de um blog, que oferece outros produtos e serviços online deve prestar muita atenção.

Aqui está o artigo completo em detalhes:

A Letra Miúda: Redação De Instruções Para A Interface Do Usuario

por Connie Malamed

Instruções Para A Interface Do Usuário: O Que E Para Que

O comportamento de uma pessoa na internet é muito focado em seus objetivos.

As pessoas tem coisas que querem realizar, seja fazer uma compra, encontrar uma receita, ou aprender algo novo.

Inerentes ao design de muitas páginas web são, portanto, as informações para ajudar o usuário a executar uma ação.

Por exemplo, se você deseja criar um botão clicável para alcançar um objetivo desejado (por exemplo, colocar um item em um carrinho de compras), sombrear o botão faz com que ele apareça em destaque e ajuda o público a entender que aquilo é um objeto clicável .

Este tipo de sinal visual normalmente instrui os usuários a saberem o que fazer a seguir.

Tais instruções guiam os olhos e as mentes das pessoas para fazerem suas buscas no lugar certo e tomarem as medidas adequadas de acordo com o que precisam.

A Importância Dos Modelos Mentais

Projetar e redigir as instruções que fazem parte da interface do usuário é uma arte e uma ciência, que envolve elaboração e habilidades de design e uma compreensão de como as pessoas usam os modelos mentais.

Um modelo mental é uma representação interna de como as coisas funcionam. É um conceito amplo de ações, causas e seus efeitos.

As pessoas aplicam seus modelos mentais a novas situações, assim não precisam reaprender tudo do zero. Isso nos ajuda cognitivamente.

Através da experiência, os usuários desenvolvem modelos mentais de como os diferentes tipos de sites funcionam.

Sabem os tipos de ações a serem tomadas em um site de comércio eletrônico em relação aos tipos de ações que operam em um site de fotografia.

As pessoas aplicam os seus modelos mentais com novos desenvolvimentos, para que não precisem reaprender tudo do zero. Isto significa que elas aplicam o seu estereótipo ou modelo mental de sites similares ao seu quando navegam por ele.

Por Que É Importante Ter Instruções Claras Na Interface Do Usuário

Esta é uma das principais razões pelas quais as instruções na interface do usuário são tão importantes.

As pessoas tem uma experiência desagradável quando seus modelos mentais são imprecisos ou incorretos. Isso causa:

• frustração,
• erros do usuário and
• equívocos na hora de alcanzar uma meta.

Um usuário frustrado pode procurar para outro site que seja mais fácil de usar.

Uma escrita fácil de compreender, as instruções e uma apresentação estética podem evitar esses problemas.

Uma boa instrução guia os visitantes do seu site, mesmo que os seus modelos mentais sejam imprecisos ou enganosos.

Portanto, aqui estão algumas diretrizes de como redigir instruções na interface do usuário que organizei ao longo dos anos de aprendizagem sobre projetos online, jóias da pesquisa de usabilidade.

Conheça O Seu Público Antes

Quando você conhece as características do seu público, pode imaginá-los e dirigir suas palavras a eles.

A menos que seus convidados sejam um grupo inteligente e homogêneo, o melhor é supor que vão precisar de alguma orientação para atingir seus objetivos.

Você deve pensar além das características óbvias de uma audiência e considerar as sutilezas de como seus leitores podem perceber e reagir as suas palavras.

• Eles vão entender as gírias?
• E o seu sendo de humor?

Observe o exemplo anterior.

As instruções divertidas sobre CAPTCHA só poderiam ser compreendidas por um público sofisticado e experiente.

Usuários inexperientes e sem conhecimento de inglês não tem idéia de que "Comprove que você é humano" significa escrever os caracteres alfanuméricos no campo pedido.

Combater A Informação Excessiva

Encontrar o equilíbrio é sempre um problema.

Ao redigir as instruções de interface de usuário, tente incluir detalhes suficientes para que os usuários saibam exatamente o que fazer, mas não com tantos detalhes que se torne difícil processar informações.

As pessoas só pegam pequenas quantidades de informação por vez.

Você pode dar uma mão a essa situação redigindo instruções em linguagem simples, que ajudarão os visitantes a realizar suas tarefas com eficiência e rapidez.

Tente usar frases curtas quando possível.

Por exemplo, essa frase poderia ser facilmente dividida em duas: "Clique no botão Adicionar ao carrinho e, em seguida, clique em Check-out na parte superior da tela.

O presente artigo pretende fornecer dicas de como ser breve, como no exemplo acima, mas muitas vezes é melhor fazer isso quando o processo de redação já está concluído.

No final, você olha para o que escreveu a partir de uma perspectiva diferente. É mais fácil ver as informações que são irrelevantes, porque acrescentam confusão à razão.

Remover detalhes estranhos e supérfluos reforça a cópia final.

No exemplo a seguir, a comunicação poderia ser mais eficaz com menos palavras.

Não há necessidade de sacrificar a sua personalidade em benefício da clareza. Com equilíbrio, você pode ter ambas.

Redija As Suas Instruções De Modo Efetivo

A tarefa de escrever com precisão implica uma discriminação sutil entre as palavras com significados semelhantes.

A pesquisa sobre usabilidade mostra que as pessoas escaneiam uma página web, em vez de lê-la. Portanto, o texto deve comunicar de forma eficaz, se alguém está na página por acaso e quase sem prestar atenção.

• Use palabras que promovam clareza. "Selecione uma data" está bem, mas "Clique na data" fica mais preciso.
• Evite a dupla negativa, como "Não quero cancelar o meu registro." E também,
• Evite usar gírias e expressões idiomáticas que algumas pessoas não entenderão, como siglas e termos técnicos.

Falando de precisão na escolha das palavras, quando você olha no menu abaixo, entende a diferença entre a procura e a navegação?

[Nota: Existe um debate sobre qual é o termo mais adequado entre "selecionar" ou "clicar" para as pessoas que usam tecnologia.]

Voz Ativa Vs. Voz Passiva

A voz ativa é nítida e limpa e fará as pessoas passarem para a ação.

A voz passiva faz bocejar os leitores.

Compare essa frase em duas vozes:

• Activa - "Clique no link para procurar um artigo de jornal. "
• Pasiva - "O link do jornal deve ser clicado quando você quiser procurar um artigo."

Como Dar Instruções Claras No Design Da Navegação

O design das instruções na interface do usuário pode ser um desafio.

Você deve determinar qual é o lugar de cada elemento, visualmente e de acordo com a hierarquia da informação. Mesmo tendo que ser identificados pelos usuários, não devem dominar a página. E como um elemento de design, devem se encaixar perfeitamente com o ambiente circundante.

Resumindo: Planeje o texto de instruções durantes as fases iniciais do design.

1) O Espaçamento Vertical

Se as instruções tem mais de uma linha, é importante que os leitores saibam que devem vir juntas.

O leading (ou espaçamento vertical) entre as frases relacionadas deve ser grande o suficiente para permitir a legibilidade, mas pequeno o suficiente para mostrar as frases associadas.

Quando há várias etapas, é preciso manter cada uma delas separada para aumentar o espaçamento entre as linhas. O número de instruções complexas ou é percebido como tal.

2) Tipo De Letra

Considere o tipo, um elemento de design.

Use uma fonte e um estilo consistente com o resto do design do site.

Considere o tamanho da fonte. As instruções devem ser lidas por pessoas de todas as idades.

Evite texto em bitmap sempre que possível, de modo que os usuários possam ampliá-lo, se necessário.

3) Gráficos

Sim, às vezes é quase impossível dizer alguma coisa com palavras.

Um gráfico fornece suporte e torna compreensível o texto, como esta explicação de como encontrar o número de conta em uma revista.

4) Estilo De Texto

Não tem problema agregar um pouco de personalidade nas instruções de interface do usuário e mensagens do sistema. Pode ajudar os visitantes a ter uma experiência agradável e bem-humorada.

Apenas certifique-se de que sua mensagem nas entrelinhas não seja interpretada como uma forma de desprezo.

Por exemplo, as instruções abaixo ajudam os visitantes a se sentirem melhor. Após a leitura da mensagem, não se sentem chateados por não guardar suas senhas onde não possam ser encontradas.

5) Acessibilidade

É importante que as instruções tenham letra pequena, mas que ainda possam ser lidas por pessoas que tem dificuldade com letras pequenas e / ou dispositivos utilizados para ler a tela do computador.

Aqui estão algumas diretrizes de acessibilidade básicas para redigir instruções para a interface do usuário:

• Evite o uso de texto gráfico para que possa ser ampliado (como visto no ponto 2 acima);
• ofrece alternativas de texto para contenido gráfico para que pueda ser traducido a otras formas, como el Braille, y
• Separe claramente as instruções do fundo da página para que possam ser vistas facilmente.

Além disso, usar hiperlinks contextuais não faz sentido se você não puder ver a tela.

Por exemplo, um link que diz "instruções para usar este formulário" é melhor do que com um "clique aqui."

6) Teste

Teste as instruções com membros do público, pessoas fora do seu escritório e sem conhecimento prévio de que estão fazendo.

1. Observe uma ou mais pessoas realizando a tarefa para a qual você redigiu aquelas instruções específicas.
2. Note qualquer dificuldade que tenham e revise as instruções.
3. Repita o processo até que as pessoas cumpram a tarefa sem problemas.

Conclusão

Você pode sesurpreender com o tempo e esforço necessários para redigir instruções eficazes para a interface do usuário. No entanto, pode ser um dos investimentos mais importantes a considerar na concepção de uma interface de usuário bem-sucedida.

Através da simplicidade de instruções compreensíveis, você pode conseguir por si só - a assistência aos usuários, o tom certo e manter a sua personalidade, o que mostra que você se importa com seus leitores.

Sobre Connie Malamed

Connie Malamed é a autora de Visual Language For Designers: Creating Graphics That People Understand. Ela escreve regularmente para Understanding Graphics e é diretora de Connie Malamed Consulting. Connie dá consultorias, apresentações e escreve sobre a interseção da psicologia cognitiva, comunicação visual e aprendizagem.

Créditos das fotos:
A Importância Dos Modelos Mentais - Ktsdesign
Instruções Para O Design Da Interface Do Usuário: Conheça O Seu Público Antes - SiliconValleyWatcher
Instruções Para O Design Da Interface Do Usuário: Voz Ativa Vs. Voz Passiva - Ronen
Instruções Para O Design Da Interface Do Usuário - Jesper Noer
Tipo De Letra - Wichita State University
Exemplos - Connie Malamed
Demais Imagens - Clipart

Por que? Principalmente, por duas razões:

1. O Google agora define o seu posicionamento nas pesquisas de acordo com o tempo de carregamento das suas páginas dentro de um navegador.
2. O tempo de resposta do seu site determina se os leitores online vão mergulhar direto no seu conteúdo ou se vão ficar frustrados esperando até que ele carregue, a ponto de sair do site antes mesmo de tê-lo visto. .

Crédito da foto: Clipart

Embora os dados dessa pesquisa já estejam por aí há algum tempo, os editores online tendem a esquecer que esperar mais que cinco segundos faz que o leitor fique impaciente e com mais de dez, ele provavelmente irá decidir ir para outro lugar.

"A lentidão tem tanto impacto que pode tornar-se uma marca com a qual os clientes associam o site".

Um site que responde bem e é rápido de carregar faz o usuário sentir poderes e no controle, enquanto que tempos de carregamento da página muito fazer leitores impacientes, frustrados e cada vez mais resistentes à sua marca ou proposição.

Estas são as principais razões pelas quais qualquer editor online com pretensões sérias deva dedicar tempo e recursos para controlar, verificar, testar e otimizar o desempenho, velocidade e capacidade de resposta do seu site, não importa qual seja o formato.

Para apreciar em profundidade e detalhe o impacto e as consequências que o tempo de carregamento das páginas web causam em seus leitores, o especialista em usabilidade Jakob Nielsen concedeu à MasterNewMedia permissão oficial para compartilhar na íntegra a atualização de sua mais recente pesquisa sobre este tema.

Aqui está:

Tempo De Resposta De Sites

por Jakob Nielsen

Velocidade Do Site E Tempo De Carregamento: Antes / Depois

Ter uma página que carrega devagar hoje é causado de modo típíco por atrasos no servidor ou por excesso de elementos supérfluos, como widgets, e não pelo uso de imagens grandes.

Os usuários detestam sites lentos e não hesitam em dizer-nos.

Os usuários realmente se preocupam com a velocidade do design de interação.

Há 13 anos, escrevi uma coluna chamada " A necessidade de velocidade,", apontando o quanto usuários odiavam páginas de carregamento lento. Naquela época, as imagens grandes foram a principal causa dos atrasos de resposta, e nossa orientação era de que você usasse imagens pequenas.

Hoje, a maioria das pessoas possui banda larga, então você pode pensar que o tempo de download já não é mais um problema de usabilidade.

E sim, fazer o download de uma imagem raramente é um problema para os usuários de telefonia fixa hoje em dia (embora as imagens ainda podem causar atrasos em dispositivos móveis).

Ainda assim, os tempos de resposta são tão relevantes como antes. Isso porque a resposta é uma regra básica de design interface do usuário que é ditada por necessidades humanas, não pelas tecnologias individuais.

Em um estudo de usabilidade do cliente que acabamos de concluir, por exemplo, os usuários se queixaram de que o site "ainda está um pouco lento."

Por Que A Velocidade Do Site E O Tempo De Carregamento Da Página São Importantes

A capacidade de resposta é importante por dois motivos:

1. As limitações humanas, especialmente nas áreas onde a memória e a atenção (como discutido no nosso seminário sobre usabilidade e a mente humana).

   Nós simplesmente não executamos bem quando temos que esperar e sofrer uma queda inevitável da informação armazenada na memória de curto prazo.





2. As aspirações humanas. Nós gostamos de nos sentirmos no controle de nosso destino e não subjugados aos caprichos de um computador.

   Além disso, quando as empresas nos fazem esperar, em vez de prestar um serviço ágil, nos dão a impressão de serem tanto arrogantes ou incompetentes.

Uma experiência do usuário rápida supera uma experiência de glamour, pela simples razão de que as pessoas se envolvem mais com um site quando podem se movimentar livremente e se concentrar no conteúdo em vez de ficar esperando que o site carregue.

Em um recente estudo para o nosso seminário sobre a marca como experiência, pedimos aos usuários o que eles pensassem sobre vários sites que usaram no passado.

Assim, suas respostas não foram baseados no uso imediato (como em estudos de usabilidade normal), mas sobre o que as experiências passadas tinham deixado de marca em suas memórias. Nestas condições, foi impressionante ouvir reclamações de usuários sobre a lentidão de alguns sites.

A lentidão (ou velocidade) tem esse impacto que pode tornar-se um dos valores que os clientes associam a um site.

(Obviamente, "lentidão" não é uma característica com a qual sonha um profissional de marketing, mas a experiência real do uso de um site é mais importante do que os slogans ou a publicidade na formação de impressões que um cliente faz de uma marca.)

Na verdade, nós temos resultados relacionados para a velocidade de um site quase todas as vezes que executamos um estudo.

Quando os sites tiram uma quantidade mínima de atraso como 0,1 segundo do tempo de resposta, o resultado é uma elevação suculenta nas taxas de conversão.

Hoje ou há 17 anos? A mesma coisa.

Como Os Leitores Online Reagem Ao Tempo De Carregamento De Um Site

Os três limites para resposta de um site continuam sendo os mesmos hoje que aqueles sobre os quais escrevi em 1993 (baseados em uma pesquisa que já tem 40 anos conduzida pelos pioneiros no estudo dos fatores humanos):

1. 0,1 segundo dá uma sensação de resposta instantânea - isto é, o resultado parece que foi causado pelo usuário, não pelo computador.

   Este nível de resposta é essencial para apoiar a sensação de manipulação direta (manipulação direta é uma das principais técnicas de GUI para aumentar o envolvimento e controle dos usuários - para mais informações, consulte o nosso seminário sobre princípios do design de interface design).





2. 0,1 segundo mantém o fluxo de pensamento do usuário do pensamento ininterrupto.

   Os usuários podem perceber um atraso e, portanto, sabem que o computador está gerando um resultado, mas eles ainda se sentem no controle da experiência no geral e eles estão se movendo livremente em vez de esperar no computador.

   Este grau de resposta é necessário para uma boa navegação.





3. Dez segundos continua prendendo a atenção do usuário.

   De um a dez segundos, os usuários certamente se sentirá à mercê do computador e gostaria que fosse mais rápido, mas conseguem lidar com isso.

   Depois de dez segundos, eles começam a pensar em outras coisas, tornando mais difícil conseguir que os seus cérebros fiquem na trilha, uma vez que o computador não responde, finalmente.

Mais de dez segundos, muitas vezes faz com que os usuários deixem um site imediatamente. E mesmo se ficarem, é difícil que entendam o que está acontecendo, o que torna menos provável que conseguirão desempenhar as tarefas difíceis.

Até mesmo o atraso de alguns segundos é suficiente para criar uma experiência de usuário desagradável.

Os usuários não estarão mais em controle, e eles se sentiraõa conscientemente irritados por ter que esperar pelo computador.

Assim, com pequenos atrasos repetidos, os usuários vão desistir a menos que estejam extremamente empenhados em concluir a tarefa. O resultado?

Você pode facilmente perder metade das suas vendas (para os clientes menos comprometidos) simplesmente porque o site demora alguns segundos para cada página.

Como Os Widgets Afetam A Velocidade De Um Site: Um Exemplo

No lugar das imagens grandes, os grandes pecadores de hoje são o tempo de resposta por causa de dados muito complexos para o processamento no servidor ou elementos excessivamente extravagantes na página, como widgets (além de muitos elementos fantasiosos).

Aqui está um exemplo de um estudo recente que fizemos para gerar um novo material para o nosso seminário sobre orientações fundamentais para usabilidade web.

As seguintes imagens mostram o comportamento do olhar de dois usuários diferentes na mesma página, que continha um widget slideshow na caixa superior amarela que exigiu oito segundos para download:

Imagens do olhar de dois usuários diferentes: Os pontos azuis indicam onde os usuários olharam (uma olhada por ponto).

• O participante do teste olhou a parte de cima algumas vezes dentro do bloco grande vazio antes de o conteúdo ser baixado, depois passaram o restante do tempo olhando para o resto da página. O primeiro usuário nunca olhou para o grande espaço promocional depois de sua exibição.
• O segundo usuário (olhar na parte de baixo) passou desviando o olhar pela tela depois dos oito segundos enquanto o conteúdo promocional se abria. Assim, a primeira vez que ele olhou para a página, viu como se pretendia, a área promocional completa.

A apresentação ocupa 23% da página, sem contar um rodapé que não é mostrado aqui.

O usuário que teve que suportar o atraso do download gastou apenas 1% do seu tempo total na visualização neste espaço.

Em contraste, o usuário que de fato recebeu renderização da página de forma instantânea (porque ele não a viu, até que estivesse completa), passou 20% do seu tempo de exibição na área do slideshow.

Embora oito segundos pode não parecer um grande atraso, é o suficiente para matar a exibição dessa grande promoção, cuja equipe da empresa, provavelmente, precisou de semanas para a concepção. Se tivessem alocado o espaço para algo que demorasse um segundo para aparecer, em vez de oito, teriam alcançado resultados muito melhores.

A Velocidade Do Site É Mais Importante Para Você Do Que Para Os Seus Leitores

O tempo de resposta tem a ver com a experiência do usuário: Quanto tempo demora para que o computador esteja pronto para servir ao usuário?

As razões por trás dos atrasos não importa para os usuários. Tudo o que sei é que eles estão recebendo o serviço pobre, o que é irritante.

Imagens grandes em 1997. Servidores lentos ou muitos widgets desnecessários em 2010. O mesmo efeito.

Torne o seu site rápido, e você terá uma grande vantagem sobre a concorrência e seus sites lentos.

Recursos Adicionais Sobre Velocidade De Sites E Tempo De Carregamento

Capacidade de resposta, fluxo, e uso responsável de widgets no design são todos tópicos discutidos nos seminários de um dia da Conferência Anual da Semana da Usabilidade:

• Design de Aplicação Um: Elementos Para Design a Nível da Página
• Usabilidade da Aplicação Dois: Diálogo e Fluxo Do Trabalho no Design

Para mais informações sobre como acelerar o desempenho do seu site, verifique estes guias abrangentes da MasterNewMedia:

• Como Acelerar O Seu Site - Parte 1
• Como Acelerar O Seu Site - Parte 2

Originally written by Jakob Nielsen for Useit, and first published on June 21st, 2010 as Website Response Times.

Sobre Jakob Nielsen

Jakob Nielsen, Ph.D., é um defensor do usuário e diretor da Nielsen Norman Group da qual é co-fundador com o Dr. Donald A. Norman (ex-VP de pesquisas da Apple Computer). Até 1998, Jakob foi um distinto engenheiro da Sun Microsystems. Dr. Nielsen fundou a "engenharia da usabilidade de desconto", um movimento para uma rápida e barata melhora nas interfaces do usuário e inventou vários métodos de usabilidade, incluindo o avaliação heurística.

Créditos das fotos:
Velocidade Do Site E Tempo De Carregamento: Antes / Depois - Facebook I-Skey-Piz-Uhm and ZCars
Recursos Adicionais Sobre Velocidade De Sites E Tempo De Carregamento - Erkin Sahin
Como Os Widgets Afetam A Velocidade De Um Site: Um Exemplo - Mipan
Por Que A Velocidade Do Site E O Tempo De Carregamento Da Página São Importantes - Pubmatic
Outras Imagens - Clipart

Crédito da foto: Villedieu Cristophe

Neste guia da MasterNewMedia, você vai encontrar uma seleção bem feita de guias, tutoriais e amostras visuais que podem ajudar muito a compreender melhor o que faz um projeto ser bom, e como distinguir um design que funciona de um projeto barato, cheio de parafernália que promete, mas não cumpre.

O que é importante compreender de fato é que os princípios do web design e suas melhores práticas não servem apenas para blogs, mas também e ainda mais para qualquer tipo de conteúdo feito para sites que você pense em construir.

Por exemplo, alguns itens críticos que a maioria dos novos sites tem que levar em consideração são:

• Acima da dobra: As pessoas devem se sentir em casa imediatamente quando entram no seu site. Não devem precisar rolar a barra para saber onde estão, quem você é e o que tem para oferecer.
• Legibilidade da página: Não pense que você é Monet. É difícil encontrar virtuosismo em web design, mas também não é algo que se espera. O que conta mesmo é se a sua página consegue comunicar de forma clara o que você tem a oferecer em questão de segundos.
• Velocidade de carregamento: Cada componente do projeto que você adicionar em suas páginas web (widgets, plugins, elementos Flash, etc), contribui para retardar o tempo de carga total de seu conteúdo. Lembre-se de que a velocidade é agora um dos fatores de ranking que o Google usa para classificar o seu site dentro das pesquisas.
• Simplicidade: Mantenha-se simples. Não exiba muito conteúdo e ações apelativas nas páginas do seu site. Comece por concentrar o design do seu layout em alguns itens de conteúdo valioso e, em seguida, guie o leitor gradualmente no sentido de descobrir mais do mesmo.

Se era isto o que você estava procurando, está aqui um breve resumo dos principais temas que você encontrará dentro deste guia:

• Wireframes e protótipos para sites
• Padrões para web design
• Templates para sites
• Design da navegação de um site
• Design do layout de um site

Quer você esteja apenas dando os primeiros passos na concepção de um novo site ou à procura de bons exemplos e boas práticas para aperfeiçoar seu trabalho de design, este guia MasterNewMedia é um recurso abrangente, que cobre todas as bases, princípios e práticas que talvez precise melhorar no seu trabalho de web design.

Aqui está o novo Guia De Web Design da MasterNewMedia:

Antes De Pensar Em Web Design: Wireframe E Prototipagem De Sites

Estratégias Para Prototipagem De Websites

Quando você inicia um projeto de web design, seja a partir de um site já existente, ou ou de um wireframe com o mapa do site, o primeiro passo ideal é colocar todas as informações coletadas até o momento em um protótipo clicável, baseado em uma tela cinza. E então, a partir daí, você faz o mapa do seu site ou wireframe. Mas, como se faz isso? Neste guia, Eric Holter mostra quais são os principais passos a tomar para fazer a prototipagem do seu site.

por Eric Holter - Newfangled

O Processo Do Web Design: Do Rascunho Ao Protótipo

Como é o processo de elaboração do design de um site? Neste guia, preparado por Steven Wilson, você pode aprender as fases fundamentais do processo do design, dos quais ele pega uma ideia básica e a transfere do rascunho para o protótipo, mostrando como proceder para desenhar um portfólio pequeno para a web (ou seja, um site dedicado à exibição dos seus melhores trabalhos - como os designers fazem).

por Steven Wilson - D79

Wireframes E Protótipos De Websites: As Melhores Ferramentas Para O Design Do Seu Site

A prototitpagem de site e os serviços para wireframes podem ajudá-lo a delinear o projeto e arquitetura global do seu site sem a necessidade de contratar um web designer para isso. Por esta razão, o wireframing é o primeiro passo que se deve considerar ao projetar um novo site. Neste guia, você encontrará as melhores ferramentas disponíveis no mercado para wireframes e protótipos para sites.

por Robin Good e Daniele Bazzano - MasterNewMedia

Wireframes E Protótipos De Websites: Melhores Ferramentas Para O Design Do Seu Site Por Menos De $150

Os serviços para prototipagem de sites e wireframes permitem que você tenha controle total da arquitetura do seu site sem ter que contratar um web designer para o trabalho. Você pode construir um projeto fiel ao layout do seu site na aparência, sem detalhamento de cores, gráficos e elementos de design específicos. Neste guia da MasterNewMedia, você vai encontrar os melhores serviços para wireframes e prototipagem por menos de $150 para começar a esboçar o seu site imediatamente.

por Robin Good e Daniele Bazzano - MasterNewMedia

Ótimos Exemplos De Wireframes E Maquetes UI

Quer você esteja fazendo o design da interface do usuário de um site ou um aplicativo para o iPhone, é sempre bom começar fazendo um wireframe. Henry Jones reuniu 18 grandes exemplos de wireframes e maquetes. Muitos destes são tão bons que você pode usá-los de inspiração para esboçar o seu próximo projeto.

por Henry Jones - Web Design Ledger

Kits Para Interface Do Usuário E Web Design De Wireframes

Encontre tudo o que você sempre quis saber sobre serviços de wireframes e aplicativos autônomos, assim como outros recursos úteis e amostras que você pode precisar para construir o seu próprio wireframe.

por Paul Andrew - Smashing Magazine

Padrões De Web Design

O Que É Um Padrão De Web Design

Padrões de design interativos são uma forma de capturar os problemas comuns nas melhores soluções de usabilidade e acessibilidade dentro de um contexto específico. Eles documentam modelos de interação que tornam mais fácil para os usuários entender uma interface e realizar suas tarefas.

Em outras palavras, o padrão de um projeto é uma solução geral reutilizável para um problema que comumente ocorre. Um padrão de design não é um projeto acabado que pode ser transformado diretamente em uma interface pronta para o uso. É antes uma descrição ou modelo de como resolver um problema que pode ser usadoaem muitas situações diferentes.

pelos Editores da Wikipédia - Wikipedia

Por Que Você Precisa De Padrões De Web Design

O que são "padrões de design" e onde se originam? Saiba quais são as vantagens específicas do uso de padrões de projetos e as razões pelas quais você deve incorporá-los em seu trabalho de web design.

por James Maioriello - Developer.com

Biblioteca de Padrões de Design Yahoo!

A Biblioteca de Padrões de Design Yahoo é uma coleção de padrões de interface de usuário que tantos web designers como desenvolvedores web podem usar como inspiração para a criação de novas páginas web. Nesta Biblioteca Yahoo você pode encontrar um grande número de padrões de web design úteis e componentes típicos agrupados sob um conjunto útil de categorias que inclui layout, navegação, seleção, interação rica e elementos sociais.

pela Rede Para Desenvoldores Yahoo!

Web Design: Biblioteca De Padrões

Uma grande coleção de padrões de web design, preparada e organizada pela interação do consultor de design Martijn van Welie.

por Welie

Loja De Web Design: Pattern Tap

Pattern Tap é uma loja onlineque oferece padrões de web design prontos para o uso organizados dentro de coleções segmentadas por nichos (navegação, botões, design, formulários, etc.).

por Pattern Tap

Templates Para Sites

Como Escolher Um Template Ou Tema Eficiente

Como escolher o tema mais adequado para o seu blog? O desafio de qualquer proprietário de site é que esta não é uma decisão fácil de tomar, uma vez que requer um equilíbrio entre as necessidades de conteúdo, função e design ("look and feel"). Saiba como escolher um web design eficaz neste modelo de análise de qualidade extraído das pesquisas de JD Meier sobre blogs de sucesso.

por J.D. Meier - J.D. Meier's Blog

Templates Para E-Commerce De Qualidade

Templates comerciais de sucesso reunidos e selecionados pelos editores da Smashing Magazine. Nesta coleção, você encontrará templates especificamente preparados para WordPress, Prestashop, osCommerce, Magento, Zen Cart, CubeCart, e CRE Loaded, assim como uma boa quantidade de templates gerais para e-commerce.

por Steven Snell - Smashing Magazine

Templates Para Sites Gratuitos

As melhores coleções grátis de templates disponíveis no mercado.

por Robin Good - MasterNewMedia

Templates Comerciais Premium

Os melhores templates comerciais premium para o design de sites do mercado.

por Robin Good - MasterNewMedia

Design Da Navegação De Sites

Estratégias Para O Design Da Navegação De Sites

Quais são os pontos mais importantes a levar em consideração quando fizer o design da navegação de um site? Veja neste guia os passos básicos para projetar o sistema de navegação do seu site.

por M Editors - Mardiros

Dez Princípios Para Um Design Navegacional Eficiente

Se o conteúdo é o coração de um site, a navegação é o seu cérebro e um pilar fundamental do projeto de arquitetura da informação. Ao lidar com grandes quantidades de conteúdo, a importância fundamental da prestação de navegação de alta qualidade não pode ser subestimada. Conteúdo não encontrado é conteúdo não lido.

por Charlotte - Onextrapixel

Ótimos Exemplos De Menus Criativos Para O Design Da Navegação De Um Site

Precisando de inspiração? Ideias? Exemplos de excelentes designs para navegação? Descubra tudo aqui.

por Tehseen - Pro Blog Design

Ideias Para O Design De Menus De Navegação

Mais ideias para a concepção de sistemas de navegação web que realmente funcionam. Saiba como ultrapassar seus limites criativos para construir uma solução de navegação web que é simultaneamente notável e proeminente.

por SR Editors - Six Revision

Design Do Layout De Sites

Design Da Interface: Exemplos E Melhores Práticas

Utilize este conjunto de exemplos úteis de interface para ajudar no desenvolvimento e design de interfaces de usuário melhores e mais eficazes. O foco específico é a simplicidade e legibilidade das páginas web que devem ser a maior prioridade, a mais crítica para a compatibilidade de qualquer web designe.

por WSG Editors - Web Style Guide

Exemplos De Soluções Para O Layout Para Melhorar O Web Design

Quais são as soluções e técnicas para layout mais eficazes que você pode usar para criar um layout limpo e organizado? Descubra neste guia preparado por Matt Cronin oito técnicas de para interfaces de usuário que incluem a explicação de como usar controles deslizantes, divisórias, layouts progressivos, redes estruturadas, janelas modais, elementos de rolagem e mega menus drop-down.

por Matt Cronin - Smashing Magazine

Exempos De Excelentes Layouts Para Web Design

Como você usa grades, colunas e blocos para conceber e organizar um novo design de interface? Giselle Muller mostra uma excelente gama de bons exemplos você pode usar e consultar.

por Gisele Muller - Web Design Ledger

Jeet Design Do: A Fórmula Ninja Para Web Designers

Os pontos fundamentais por trás da minha própria estratégia de web design na MasterNewMedia estão nestas questões principais. Vejam quais são.

por Robin Good - MasterNewMedia

Créditos das fotos:
Estratégias Para Prototipagem De Websites - Helder Almeida
O Processo Do Web Design: Do Rascunho Ao Protótipo - Marja Flick
Wireframes E Protótipos De Websites: As Melhores Ferramentas Para O Design Do Seu Site - WebDesigner Depot
Kits Para Interface Do Usuário E Web Design De Wireframes - Venus Worldwide
O Que É Um Padrão De Web Design - Biblioteca de Padrões de Design Yahoo!
Por Que Você Precisa De Padrões De Web Design - Alastor
Como Escolher Um Template Ou Tema Eficiente - Robert Kneschke
Templates Para E-Commerce De Qualidade - Brian Morgan
Dez Princípios Para Um Design Navegacional Eficiente - Liz Van Steenburgh
Ideias Para O Design De Menus De Navegação - Brian Jackson
Interface Design: Exemplos E Melhores Práticas - Jefferson Han
Exemplos De Excelentes Layouts De Web Design - James Steidl
Exemplos De Soluções Para O Layout Para Melhorar O Web Design - Derek Mack

Crédito da foto: Designer Break

Os wireframes tem a vantagem de fornecer uma saída visual imediata de como serão a navegação, o layout do site e a organização dos conteúdos. Sem gastar tempo e recursos preciosos para projetar cada detalhe de sua interface, você pode produzir um protótipo visual totalmente funcional para se comunicar suas ideias com seus clientes e membros da equipe e também destacar as ambiguidades e os perigos potenciais do design.

Embora a MasterNewMedia já tenha publicado dois guias em profundidade sobre serviços gratuitos para wireframes e soluções comerciais de prototipagem de sites, este terceiro destaca e se concentra exclusivamente nas ferramentas para wireframes e design de maquetes web profissionais.

Portanto, o que define os serviços de prototipagem de sites profissionais dos comerciais e dos gratuitos?

• Computação potencializada: Todas as ferramentas de wireframing profissionais estão disponíveis apenas como software para download. Nenhuma delas é oferecida como opção baseada na web.
• Abrangência: Na maioria dos serviços deste guia, a capacidade de criar wireframes é apenas uma das opções que você tem a sua disposição. Também pode desenhar fluxogramas, diagramas de Venn, mapas mentais, planos de paisagem e outros tipos de projetos visuais que ajudam a comunicar mais eficazmente a sua ideia, quando associada a um wireframe.
• Sistema de biblioteca GUI: Todas as ferramentas de wireframe profissionais tem uma impressionante biblioteca de widgets prontos para o uso e elementos de design que você pode arrastar e soltar. Ter componentes do projeto prontamente disponíveis para construir as suas maquetes não significa apenas uma grande economia de tempo, mas também permite que você desenhe seus protótipos com precisão clínica e consiga um efeito altamente realista.
• Anotações no design: Os serviços de wireframes profissionais permitem criar anotações e comentários para adicionar nos seus projetos. Usando anotações, você pode facilmente compartilhar feedback, ideias, sugestões e revisões, sem ter que depender de outro serviço de comunicação, colaboração.

Para ajudá-lo a selecionar e identificar a melhor solução profissional para wireframes para suas necessidades, relacionei todas as melhores ferramentas disponíveis do mercado, e através de um mindmap interativo, um conjunto de tabelas comparativas e mini-resenhas, tentei tornar a sua análise e avaliação o mais eficazes possível.

Aqui os critérios usados para essa comparação:

• OS suportado: Sistema operacional necessário para instalar o software de wireframe.
• Wireframes interativos: Maquetes clicáveis que simulam a navegação entre as páginas web.
• Design móvel: Simulação de wireframes para sites em celulares e aplicações web.
• Colaboração: Interação com os clientes e colaboradores para receber feedback ao vivo.
• Formatos de exportação: Os formatos suportados para exportar os projetos em wireframes.
• Preço: Custo da ferramenta para wireframes e prototipagem de sites.

Aqui está o guia completo em detalhes:

Serviços Profissionais Para Wireframes E Protótipos De Sites - Tabelas De Comparação

Serviços Profissionais Para Wireframes E Protótipos De Sites

1. Axure RP

   

   Axure RP é uma ferramenta profissional de prototipagem para sites que permite que você crie um wireframe para a pré-concepção do seu website. Axure RP está disponível para plataformas Windows e Mac. Você pode desenhar wireframes estáticos e interativos que simulam uma experiência de navegação real do usuário. A biblioteca GUI de sistema global também está disponível para lhe fornecer elementos web e widgets prontamente disponíveis, como barras de menus, barras de rolagem, cabeçalhos que você pode incluir dentro das maquetes do seu site. O recurso de colaboração permite que você compartilhe suas maquetes com outras pessoas e receba feedback e comentários em tempo real sobre seu trabalho. Você pode salvar / exportar seus wireframes para HTML, JPEG, PNG, BMP e GIF. Axure RP custa $ 589. Nenhum projeto para celulares é suportado.
   http://www.axure.com/









2. Justinmind Prototyper

   

   Justinmind Prototyper é uma ferramenta profissional para protótipos de websites, softwares e aplicativos para celulares. Justinmind Prototyper está disponível apenas para Windows. Ao desenhar maquetes interativas utilizando wireframes você pode traçar o seu novo projeto web e também simular a navegação do usuário para evitar armadilhas e equívocos em seu design. Uma extensa biblioteca de símbolos GUI permite que você adicione objetos de design prontamente disponíveis e os elementos para as suas maquetes web. Você também pode trabalhar em cooperação para trocar seus wireframes para obter feedback e comentários em tempo real. Quando terminar, pode exportar os wireframes em HTML e formatos de arquivo JS. Justinmind Prototyper custa $ 459.
   http://www.justinmind.com/









3. ConceptDraw PRO

   

   ConceptDraw PRO é uma ferramenta técnica de diagramação para Windows e Mac que você pode usar para criar protótipos de sites e aplicações de software. ConceptDraw PRO tem uma biblioteca de elementos GUI grande pré-desenhados e objetos de design que facilitam o design de wireframes. A funcionalidade de exportação permite que você salve seus protótipos acabados para vários formatos como: PDF, JPG, EMF, SVG, PPT e muitos mais. A facilidade de apresentação integrada permite apresentar seus projetos visuais sem a necessidade de um software ou aplicação externo. ConceptDraw PRO está fixado em $ 199. Não traz recursos para design para celulares, nem de colaboração, nem suporta wireframes interativos.
   http://www.conceptdraw.com/en/









4. Lucid Spec

   

   Lucid Spec é uma ferramenta profissional para wireframes para o Windows. Lucid Spec permite criar protótipos para websites e fornecer aos seus clientes especificações claras sobre os elementos GUI incorporados direto no seu protótipo. Você pode esboçar wireframes estáticos e interativos que simulam o fluxo de navegação entre páginas web. Para desenhar o wireframe, você pode acessar um vasto conjunto de widgets pré-estabelecido e elementos de design que pode arrastar e soltar nas maquetes. Quando o protótipo estiver pronto, você pode exportá-lo para o formato RTF. Lucid Spec custa $ 499. Não disponibiliza design para celulares, nem recursos de colaboração.
   http://www.elegancetech.com/ls/ls.aspx









5. Adobe Illustrator CS5

   

   Illustrator CS5 é a versão mais recente do software de design gráfico e ilustração da Adobe, disponível para Windows e Mac. Entre suas várias características de design, Illustrator CS5 permite desenhar wireframes estáticos e interativos do seu site. Os wireframes interativos permitem simular a navegação entre páginas web (mas requerem a instalação do Adobe Flash Catalyst na sua máquina). Uma extensa biblioteca de símbolos GUI permite que você adicione objetos de design prontamente disponíveis e widgets para as maquetes do seu website. Você também pode colaborar com outras pessoas para receber feedback em tempo real e comentários sobre o seu trabalho desde a interface do Illustrator CS5. Quando terminar, pode exportar seus wireframes a uma pletora de diferentes formatos de arquivos como SVG, JPEG, GIF, PDF e muito mais. Illustrator CS5 custa $ 599. Não suporta projetos para celuluares.
   http://www.adobe.com/products/illustrator/









6. Visio Professional 2010

   

   Visio Professional 2010 é a última atualização do software de diagramação da suíte Office da Microsoft. Visio 2010 está disponível apenas para máquinas Windows. Com o Visio Professional 2010, você pode criar diversos tipos de projetos visuais, como fluxogramas, diagramas de Venn, mapas e também maquetes de sites (standard e para celulares), bem como protótipos de aplicações de software. Visio Professional 2010 oferece também a capacidade de colaborar em projetos de design para receber feedback e comentários enquanto você trabalha. Uma vez terminado, seus projetos podem ser exportados para diversos formatos de arquivo como SVG, EMF, GIF, JPEG, PNG e muito mais. Visio Professional 2010 é fixado ao preço de $ 559,99 e você pode comprar Visio independentemente de outros componentes do Office.
   http://office.microsoft.com/en-us/visio/









7. SmartDraw

   

   SmartDraw é um aplicativo desktop profissional para Windows que permite comunicar visualmente suas ideias. Você pode usar o SmartDraw para desenhar mapas mentais, fluxogramas, wireframes, gráficos, mapas, cenas de crime, e muito mais. SmartDraw é totalmente integrado com o Microsoft Office e tem uma grande biblioteca de símbolos GUI com botões prontos para usar, barras de rolagem e outros objetos de que você pode dispor para adicionar elementos de design para o seu projeto visual. O recurso de colaboração também permite que você compartilhe cada projeto que criar e receber feedback em tempo real. Quando terminar, pode exportar seu projeto visual de HTML, JPEG, EMF, SVG e muitos outros formatos de arquivo. SmartDraw é fixado ao preço de $ 279. Não disponibiliza design para celulares, nem wireframes interativos.
   http://www.smartdraw.com/










8. iRise Professional

   

   iRise Professional é um software de alto nível para designers de wireframes e desenvolvedores web pro. Disponível somente para máquinas com Windows, iRise Professional permite que você crie qualquer tipo de wireframes para o seu site e simule todos os aspectos da experiência do usuário como a navegação entre páginas, cliques do mouse, roll-overs e muito mais. Um conjunto completo de widgets e objetos de design que você pode arrastar e soltar diretamente em seu protótipo permite que você personalize o projeto. Para trocar os seus projetos com os outros, você pode exportar seus wireframes para PDF, XML e formatos de arquivo HTML. iRise Professional custa $ 6.995 . Não há novas funcionalidades de colaboração disponíveis.
   http://www.irise.com/

Crédito da foto: Yasuhisa Hasegawa

A Wikipédia define um wireframe para sites assim:

Um wireframe de site é um guia básico visual utilizado no design da interface do site para sugerir a estrutura de um website e as relações entre suas páginas. Um wireframe é uma ilustração similar a um layout, com os elementos fundamentais da interface.

Wireframes são um importante passo para a simplificação do design do seu site, porque uma maquete permite reduzir o tempo e a produção do design de uma só vez, deixando tempo livre para você se concentrar no que é realmente importante ter em seu site.

Outra vantagem indiscutível de usar serviços para wireframes e protótipos de sites é que eles também estão disponíveis em preços e formas diferentes para se adaptar totalmente ao seu orçamento.

Você pode encontrar um guia já publicado na MasterNewMedia sobre serviços para wireframes gratuitos e brevemente publicaremos outro sobre alguns softwares para wireframes top de linha.

O guia de hoje é muito dedicado a todos os editores que querem tirar as mãos do bolso e investir um pouco em wireframes, por um preço razoável. Na verdade, aqui você vai encontrar uma seleção de ferramentas para a prototipagem de sites que custam menos de $ 150 dólares por mês (bem abaixo, na maioria dos casos).

Para ajudá-lo a selecionar e identificar a melhor solução para suas necessidades específicas, aqui está, comparada e revisada, uma série de ferramentas web e aplicativos baseados em software para a criação de wireframes e protótipos de sites.

Abaixo, você encontrará um mapa mental interativo, e um conjunto de tabelas e mini-revisões para tornar a sua avaliação a mais simples possível.

Estes são os critérios utilizados para essa comparação:

• Tipo de software: Download / ferramenta baseada na web (se for baixado, o sistema operacional aceito é especificado).
• Biblioteca de símbolos GUI: Gratuita, botões prontamente disponíveis, barras de rolagem, menus e outros objetos para desenhar wireframes
• Wireframes interativos: Maquetes clicáveis que simulam a navegação entre as páginas web.
• Colaboração em tempo real: Interação com os clientes e colaboradores para receber feedback ao vivo.
• Formatos para exportação: Os formatos suportados para exportar os projetos em wireframes.
• Preço inicial: Primeiro nível de preços disponível.

NB: A presente seleção de serviços para wireframes e protótipos de sites por menos de $ 150 ainda está incompleta. Fazemos um convite para que você favorite esta página (basta pressionar CTRL + D no seu teclado Windows ou CMD + D no seu teclado Mac), já que adicionaremos mais serviços nas próximas semanas.

Aqui está o guia completo em detalhes:

Wireframes E Protótipos De Websites Por Menos De $150 - Tabelas De Comparação

Wireframes E Protótipos De Websites Por Menos De $150

1. Gliffy

   

   Gliffy é uma ferramenta para wireframe baseada na web que permite traçar um protótipo de seu site, você pode criar wireframes estáticos ou interativos para simular a navegação entre as páginas web e tirar proveito de uma extensa biblioteca de símbolos GUI. Também é possível colaborar com outras pessoas para receber feedback em tempo real e comentários sobre seu trabalho. Quando terminar, você pode exportar seus wireframes para SVG, arquivos Gliffy em XML, JPG ou PNG. A conta premium de Gliffy custa $ 5/mês e permite desenhar um número ilimitado de wireframes.
   
   http://www.gliffy.com/
   
   
   
   
   
   
   

2. Creately

   

   Creately é uma ferramenta para wireframes baseada no navegador. Creately é projetada especificamente para fins de colaboração online, para que você possa esboçar uma maquete de um site para mostrar a seus clientes a obter feedback imediato, sem utilização de anexos de email. As maquetes também são interativas, de modo que você pode simular a navegação entre páginas web diferentes. Além disso, você tem uma grande biblioteca de símbolos com os objetos GUI prontamente disponíveis para construir seus wireframes. Para exportar as suas maquetes, você pode escolher entre os formatos PDF, JPG ou PNG. O preço inicial está fixado em $ 4.95/mês.
   
   http://www.creately.com/
   
   
   
   
   
   
   

3. ProtoShare

   

   ProtoShare é uma ferramenta colaborativa, baseada na web para a criação de protótipos. Você pode desenhar maquetes interativas para o seu site que simulam a navegação entre páginas web, compartilhá-las com seus clientes e colaboradores para obter comentários e também exportar seus protótipos em HTML, CSS, JavaScript e formatos MS Word. Uma extensa biblioteca GUI de símbolos, elementos da Web e objetos de desenho também estão disponíveis para ajudá-lo a desenhar os wireframes do seu site. Os preços de ProtoShare começam em $ 29/mês para um único usuário.
   
   http://www.protoshare.com/
   
   
   
   
   
   
   

4. HotGloo

   

   HotGloo é uma aplicação baseada na web para a criação de wireframes. Com HotGloo, você pode desenhar protótipos interativos do seu site, aproveitando-se de uma lista de objetos GUI facilmente disponíveis, além de outras formas e elementos da web. A função de chat permite que você receba um feedback imediato sobre o seu trabalho de clientes e colaboradores. Para exportar as suas maquetes finalizadas, você pode escolher entre os formatos PDF e PNG. A linha de preços do HotGloo começa em $ 7/mês, mas com o plano inicial, você fica limitado a construir um projeto só.
   
   http://www.hotgloo.com/
   
   
   
   
   
   
   

5. Pidoco°

   

   Pidoco° é uma ferramenta de desenho online GUI que permite que você crie wireframes e protótipo clicáveis interativos para websites e interfaces de usuário. Os wireframes podem ser exportados em HTML ou para um formato compatível com o MS Word. A biblioteca GUI de sistema global também está disponível para fornecer elementos web facilmente disponíveis como barras de menus, barras de rolagem e outros objetos para desenhar interfaces ricas para o usuário. Os preços do serviço começam em $ 9/mês, mas para tirar proveito dos recursos de colaboração em tempo real, você deve fazer o upgrade para o plano de $ 29/mês ou superior. Não há novas funcionalidades de colaboração disponíveis.
   
   http://www.pidoco.com/
   
   
   
   
   
   
   

6. Mockup Screens

   

   Mockup Screens é uma ferramenta de software para computadores com Windows que lhe permite construir protótipos e maquetes do seu site. Os wireframes são estáticos, portanto você não pode hyperlinkar páginas diferentes para simular a navegação do usuário. A biblioteca de símbolos GUI está disponível para utilizar os objetos prontos e elementos de desenho dentro da maquetes e o recurso de exportação permite converter seus wireframes para XML, HTML ou arquivos PDF para leitura offline. MockupScreens custa 99,95 dólares para uma licença de usuário único.
   
   http://www.mockupscreens.com/
   
   
   
   
   
   
   

7. WireframeSketcher

   

   WireframeSketcher é uma ferramenta de software que permite desenhar maquetes para o seu site. WireframeSketcher é baseado no Eclipse IDE e está disponível para Windows, Mac e Linux. Todos os protótipos que você pode construir são estáticos, sem interação entre páginas web diferentes. A biblioteca de símbolos GUI está disponível para utilizar objetos de design prontamente e outros elementos dentro das maquetes. Você também pode exportar suas wireframes em arquivos PDF e PNG. WireframeSketcher custa $ 75 para uma licença de usuário único.
   
   http://www.wireframesketcher.com/
   
   
   
   
   
   
   

8. FlairBuilder

   

   FlairBuilder é uma ferramenta baseada na Web que permite fazer protótipos para sites e aplicativos do iPhone. Suas maquetes são interativas, o que significa que você pode simular a experiência de navegação do usuário entre as diferentes páginas do seu site ou aplicativo. Você também pode usar a biblioteca GUI para encontrar os elementos prontos que pode adicionar aos seus wireframes. Para comprar FlairBuilder você pode pagar $ 24/mês ou $ 99/ano. Não disponibiliza recursos de colaboração, nem de exportação de arquivos.
   
   http://www.flairbuilder.com/
   
   
   
   
   
   
   

9. OmniGraffle

   

   OmniGraffle é uma ferramenta para wireframes disponível para Mac e IPAD que você pode usar para esboçar wireframes interativos para o seu site. Um sistema de biblioteca GUI está à sua disposição para pegar elementos web prontos e adicionar estilo a sua wireframe. As possibilidades de exportação incluem arquivos em PICT, PDF, EPS para os formatos MS Word e PowerPoint compatíveis com o MS. OmniGraffle custa 99,95 dólares para uma licença de usuário único. Não há funcionalidades de colaboração.
   
   http://www.omnigroup.com/products/omnigraffle/
   
   
   
   
   
   
   

10. Balsamiq Mockups

    

    Balsamiq Mockups é uma ferramenta para wireframes que permite que você faça um protótipo para o seu site interativo. Balsamiq Mockups está disponível como aplicativo baseado na web e como software pode ser baixado para Windows, Mac e Linux. O serviço tem uma biblioteca grande de símbolos GUI com botões, barras de rolagem e outros objetos que você pode usar para desenhar suas maquetes. Os recursos de colaboração também permitem que você compartilhe seu projeto para receber, em tempo real, feedback e comentários. Quando terminar, pode exportar seu wireframe em arquivos XML, PDF, PNG. A Balsamiq Mockups Desktop App custa $ 79 para uma licença de usuário único.
    
    http://www.balsamiq.com/products/mockups

Crédito da foto: WebDesigner Depot

De modo geral, um wireframe deve ser um protótipo visual em rascunho de design da interface para esboçar a arquitetura de um website e as relações entre suas páginas, tudo isso sem precisar se preocupar com as especificidades do seu projeto gráfico. É por isso que é chamado de "wireframe", porque descreve apenas as áreas-chave e componentes do futuro site, sem detalhamento de cores, elementos gráficos e detalhes específicos.

No entanto, historicamente, o wireframing se origina no mundo da computação gráfica, onde o termo descreve um módulo de representação de objetos 3D, dispondo apenas a wireframe, a fim de ter uma exibição rápida de imagens mais complexas sem muita demora.

Mas os wireframes não são apenas simplificadores excelentes da complexidade do design e poupadores de tempo, mas seus benefícios vão muito além da redução na exibição do design e tempo de produção.

Aqui estão algumas outras vantagens práticas da utilização de wireframes e protótipos para o design do seu site:

• Consistência: Ferramentas de wireframing tornam mais fácil testar e experimentar diversas variações de uma solução de design sem exigir muito tempo e recursos. É fácil de experimentar designs e layouts diferentes sem ir à falência.
• Planejamento: Fazer o design de sites usando wireframes também é extremamente útil quando se tem a necessidade de comunicar ideias no projeto inicial, com colegas, clientes e desenvolvedores. O protótipo de um site pode funcionar como uma base sólida sobre a qual considerar melhorias e aperfeiçoamentos para o projeto, bem como a estrutura do conteúdo, layout geral, posicionamento dos elementos-chave, e outros requisitos.
• Facilidade de navegação: Um wireframe ajuda o designer a planejar o posicionamento de elementos de navegação para fornecer uma melhor experiência aos visitantes do site. Através do desenvolvimento de wireframes e da impressão das páginas do protótipo pode-se facilmente fazer um pré-teste e analisar com antecedência quais os tipos de soluções mais apropriadas a adotar.
• Undo infinito: Os serviços para protótipos de sites permitem reverter e rastrear o histórico completo das alterações do projeto anterior e voltar a qualquer um deles.
• Realismo: As maquetes podem ser criadas para ser usadas em testes iniciais com usuários e que se parecem a um site web normal.
• Colaboração e compartilhamento: Qualquer um pode se envolver. Engajar a outros designers ou colegas para obter feedback. Você pode compartilhar seu projeto em wireframe facilmente com clientes e consumidores para ilustrar o andamento do trabalho de design.
• De graça: Economize dinheiro. Sim: você não precisa pagar nada para utilizar estes serviços para protótipos de sites gratuitos listados neste guia.

Para ajudá-lo a selecionar e identificar o serviço de wireframing gratuito ou prototipagem de websites, aqui estão selecionados e organizados todos os dados relevantes para você comparar e selecionar o serviço online mais adequado para suas necessidades.

Aqui abaixo, você encontrará um mindmap interativo, um quadro comparativo e um conjunto de mini-resenhas para tornar sua avaliação tão eficaz quanto possível.

Estes são os critérios usados para essa comparação:

• Tipo de software: Download / ferramenta baseada na web (se baixado, o sistema operacional aceito é especificado).
• Biblioteca de símbolos GUI: Gratuita, botões prontamente disponíveis, barras de rolagem, menus e outros objetos para desenhar wireframes.
• Wireframes interativas: Maquetes clicáveis que simulam a navegação entre páginas web.
• Colaboração em tempo real: Interação com os clientes e colaboradores para receber feedback ao vivo.
• Formatos de exportação: Os formatos suportados para exportar projetos em wireframes.
• Limitações de contas: Restrições dentro de conta gratuita (se houver), como tempo de uso, número de wireframes que você pode criar, etc

NB: O presente artigo de ferramentas para wireframing gratuitas ainda está incompleto. Você pode querer favoritar esta página (basta pressionar CTRL + D no seu teclado Windows ou CMD + D no Mac), conforme novos serviços forem adicionados nas próximas semanas.

Aqui está o guia completo em detalhes:

Ferramentas Para Wireframing E Prototipagem De Sites - Tabela De Comparação

Ferramentas Para Wireframing E Prototipagem De Sites

1. Gliffy

   

   Gliffy é uma ferramenta de wireframing web-based que permite traçar um protótipo para o seu site, você pode criar wireframes estáticos e interativos para simular a navegação entre páginas web e tirar proveito de uma extensa biblioteca de símbolos GUI. Você também pode colaborar com outras pessoas para receber feedback em tempo real e comentários sobre seu trabalho. Quando terminar, pode exportar seus wireframes para arquivos SVG, Gliffy XML, ou formatos de imagem JPG ou PNG. A conta gratuita do Gliffy permite tirar até cinco wireframes sem criptografia, mas suporta anúncios.
   
   http://www.gliffy.com/
   
   
   
   
   
   
   

2. Jumpchart

   

   Jumpchart é um aplicativo de planejamento baseado em navegador que permite desenhar um wireframe para o seu site. Você pode criar wireframes estáticos e interativos para simular a navegação entre as páginas web de sua maquete. Jumpchart também permite que você compartilhe seus projetos de wireframing com os clientes para receber feedback e comentários sobre o seu trabalho sem a utilização de anexos de email. Se precisar, você pode exportar seus wireframes em arquivos CSS / XHTML ou em um formato compatível com o WordPress. Jumpchart é gratuito para até dois wireframes com um máximo de dois colaboradores para o compartilhamento. Não disponibiliza biblioteca de símbolos GUI.
   
   http://jumpchart.com/
   
   
   
   
   
   
   

3. MockFlow

   

   MockFlow é um serviço para protótipos de sites, disponível como aplicativo baseado na web e como software para Windows e Mac. Os wireframes criado com MockFlow são interativos e simulam a navegação do usuário através de páginas web. Para desenhar os seus wireframes, você pode usar a grande biblioteca de símbolos GUI. A colaboração na partilha de wireframes também é totalmente suportada. Quando terminar, você pode exportar seus projetos para PPT, PDF ou PNG. Observe que, com a conta gratuita, todos os seus arquivos exportados serão filigranas. As contas gratuitas de MockFlow permitem construir um wireframe com até quatro páginas, e até dois colaboradores para o compartilhamento.
   
   http://www.mockflow.com/
   
   
   
   
   
   
   

4. iPlotz

   

   iPlotz é uma ferramenta de wireframing que permite criar protótipos navegáveis de sites e aplicações de software. iPlotz está disponível como serviço web-based e como software pode ser baixado para Windows e Mac. O serviço tem uma biblioteca grande de símbolos GUI que fornece botões prontos para o uso, barras de rolagem, barras de menus e outros objetos que você pode usar para desenhar suas maquetes. Você também pode compartilhar o seu projeto em tempo real e receber feedback ao vivo, além de comentários. Quando terminar, você pode exportar seu wireframe para PDF, PNG, JPG e arquivos HTML. A conta gratuita de iPlotz permite que você crie um wireframe com até cinco páginas navegáveis.
   
   http://www.iplotz.com/
   
   
   
   
   
   
   

5. Mocklinkr

   

   Mocklinkr é um serviço baseado na web para criar protótipos para o seu site, desenhando wireframes interativos que você pode navegar como se fosse em um site de verdade. Você também pode compartilhar seu wireframing com outros colaboradores que possam fornecer feedback diretamente usando Mocklinkr. A conta gratuita permite desenhar até dez wireframes, sem limite de páginas. Nenhum recurso de exportação, nem biblioteca para símbolos GUI estão disponíveis.
   
   http://www.mocklinkr.com/
   
   
   
   
   
   
   

6. Pencil Project

   

   The Pencil Project é um add-on de código aberto livre do Firefox que permite a você criar wireframes e protótipos dentro do Firefox. Você pode criar um wireframe interativo que simula a navegação na web e também usar a biblioteca de símbolos GUI para adicionar objetos, botões, barras de rolagem e outros dispositivos para tornar seu wireframe mais realista. Todos os wireframes que você criar podem ser exportados para HTML, PDF, PNG ou MS Word e formatos compatíveis de arquivos OpenOffice.org. Não há novas funcionalidades de colaboração disponíveis.
   
   http://www.evolus.vn/Pencil/Home.html
   
   
   
   
   
   
   

7. Lumzy

   

   Lumzy é uma ferramenta de criação livre baseada em maquete que permite que você desenhe o protótipo do seu site. Uma extensa biblioteca de símbolos GUI está disponível para adicionar elementos gráficos para o seu protótipo, a fim de adicionar mais realismo ao seu projeto. Além disso, você pode convidar outras pessoas para colaborar em seu projeto de maquete e receber feedback. Os formatos de exportação disponíveis são: PDF, PNG, JPG. Maquetes interativas não são suportadas.
   
   http://www.lumzy.com/
   
   
   
   
   
   
   

8. Mockingbird

   

   Mockingbird é uma ferramenta de wireframing gratuita baseada na web que permite criar protótipos interativos do seu site. Você pode criar seu site direto dentro do seu navegador, aproveitando-se de uma grande biblioteca GUI com vários objetos para personalizar a sua maquete. Assim que o trabalho estiver pronto, você pode compartilhar seu projeto com outros colaboradores ou exportar o wireframe para PDF e formatos de arquivo JPG.
   
   http://gomockingbird.com/
   
   
   
   
   
   
   

9. FluidIA

   

   FluidIA é uma ferramenta de wireframing baseada na Web para sites e prototipagem de interfaces de usuário. Ainda numa fase inicial de desenvolvimento, FluidIA funciona corretamente apenas usando o Firefox 2.5. Os recursos de colaboração estão disponíveis no FluidIA, assim você pode compartilhar e interagir com outras pessoas em sua maquete. Nenhuma biblioteca GUIestá disponíveis, nem a exportação de recursos ou wireframes interativos são suportados.
   
   http://www.fluidia.org/
   
   
   
   
   
   
   

10. Balsamiq Mockups

    

    Balsamiq Mockups é uma ferramenta de wireframing que permite que você desenhe protótipos e wireframes interativos. Balsamiq Mockups está disponível como aplicativo baseado na web e como software pode ser baixado para Windows, Mac e Linux. O serviço tem uma biblioteca grande de símbolos GUI com botões prontos para o uso, as barras de rolagem e outros objetos que você pode usar para desenhar suas maquetes. Os recursos de colaboração também permitem que você compartilhe seu projeto para receber feedback e comentários em tempo real. Quando terminar, você pode exportar seu wireframe para arquivos XML, PDF, PNG. A conta gratuita permite criar wireframes ilimitados durante sete dias.
    
    http://www.balsamiq.com/products/mockups

Mapa de calor da homepage do Google

Em um nível muito básico, os testes de usabilidade não requerem qualquer equipamento especial ou software . Na verdade, você só precisa de alguém (um amigo ou mesmo um usuário aleatório) que gentilmente fique alguns minutos no seu site e tente realizar uma tarefa específica atribuída. Durante a navegação, você deve acompanhá-lo e gravar os seus comentários e o que gosta / não gosta em seu design.

Seu objetivo é descobrir todos esses elementos no design do seu site que sejam ambíguos e confusos que diminuem o desempenho típico do leitor ou, na pior das hipóteses, permitam que você execute ações críticas específicas, tais como a compra de um produto, um download de um arquivo ou localizar de documentos específicos.

Se você está construindo um novo site a partir do zero, ou está pensando em redesenhar o seu design, os testes de usabilidade são uma maneira muito eficaz de obter informações úteis sobre a melhor forma de organizar o conteúdo e o design da navegação para os seus leitores.

Mas quando isso já funciona bem, você só precisa melhorar o design do seu site ou têm pouco tempo para gastar com testes de usabilidade, se você tiver intenções sérias para melhor o design ou criar conversões de verdade, precisará decididamente de soluções mais profissionais e confiáveis para testar a usabilidade do seu site.

Felizmente para você, agora já existe uma série de ferramentas profissionais de testes de usabilidade que vêm em todos os sabores e tamanhos de bolso.

Dependendo das características que precisa e do tipo de ferramenta que está procurando (ou software web-based), há uma ampla gama de preços, entre $ 1500 e $ 9/mês, onde você pode encontrar a ferramenta ideal para testes de usabilidade no seu website.

As ferramentas profissionais para website usability testing funcionam todas da mesma maneira: gravam a tela do seu usuário em potencial e destacam para você todas as operações realizadas em suas páginas, movimentos do mouse, cliques, dados do formulário, deslocamento da página, experiência do usuário, gravação de vídeo para que você possa ver em seu próprio ritmo e fazer anotações.

Para ajudá-lo a identificar e selecionar o instrumento mais adequado para para testar a usabilidade do seu site, você encontrará neste guia uma série de resenhas individuais, gráficos de comparação e um mindmap, com todas as ferramentas disponível no mercado.

Abaixo, estão os critérios de seleção específicos usados para comparar todas as ferramentas de testes de usabilidade, indicadas neste guia:

• Gravação da tela: A captura de telas de computador de quem vai fazer o teste em seu site, remotamente ou em uma rede local.
• Intercâmbio de tela: Compartilhamento em tempo real e exibição de uma ou várias equipes de testadores.
• Voz: Gravação da voz de quem está fazendo o teste.
• Gravação da webcam: A gravação de fluxo de vídeo da webcam dos testadores.
• Comportamento visual do usuário: exibe em um mapa de calor os elementos de design do seu site onde os usuários clicam ou buscam e qual o caminho seguem para executar tarefas específicas.
• Google Analytics: Relatórios analíticos que permitem avaliar a qualidade do web design e a interface do usuário.
• Centro de usabilidade: Relatório destacando os principais elementos de design de suas páginas que ajudam o usuário, ou que sejam difíceis de usar.
• Codificação necessária para instalação: Código HTML ou JavaScript obrigatório para ser colado nas suas páginas para que você possa gravar os usuários.
• Testes gratuitos: Período para teste gratuito antes da compra.
• Preço : Preços iniciais de utilização dos serviços.

No entanto, se você não estiver disposto a gastar dinheiro em uma ferramenta para testes de usabilidade, pode querer consultar o guia MasterNewMedia sobre ferramentas gratuitas para website usability testing.

Ferramentas Profissionais Para Testes De Usabilidade - Tabelas Comparativas

Ferramentas Profissionais Para Testes De Usabilidade

1. Morae

   

   TechSmith Morae é uma suite profissional para Windows que pode ser usada para realizar sessões de testes de usabilidade tanto remotos como locais. Morae é constituído por três componentes de software que também podem ser adquiridos separadamente: gravador (para captura de áudio / vídeo), observador (para compartilhamento de tela remota) e diretor (para análise e relatório). Morae não requer qualquer conhecimento de codificação para começar, mas o software deve ser instalado em todas as máquinas que participam da sessão de testes de usabilidade. A gravação de voz e webcam são totalmente compatíveis, mas os mapas de calor não estão disponíveis. Mora custa $ 1.495,00 e você pode experimentar o software por 30 dias antes da compra.
   
   http://www.techsmith.com/morae.asp
   
   
   
   
   
   
   

2. UserVue

   

   UserVue é um software profissional de testes de usabilidade que você pode usar para monitorar remotamente o comportamento de seus clientes e melhorar o design do seu website. O serviço registra a tela de seus clientes em potencial e sua própria voz para informações sobre como criar seu site e a experiência do usuário. UserVue está disponível atualmente apenas nos E.U.A e Canadá, e apenas para sistemas Windows. Não traz nenhuma funcionalidade de compartilhamento de tela, gravação a partir de uma webcam ou mapas de calor compatíveis. Relatórios sobre a usabilidade e análise de informações não estão disponíveis tampouco. Nenhum conhecimento de codificação é necessário para instalar UserVue. O serviço custa $ 149/mês e você pode experimentá-lo por 14 dias antes da compra.
   
   http://www.techsmith.com/uservue.asp
   
   
   
   
   
   
   

3. Userfly

   

   Userfly é uma ferramenta online profissional para realizar testes de usabilidade em seu site. Userfly registra a tela de seus clientes e rastreia os movimentos do mouse (mas não sua voz ou webcam) para ajudá-lo a descobrir as ambiguidades ou problemas no design da interface do seu site. Não compartilha a tela, não estão disponíveis mapas de calor. Relatórios sobre a usabilidade e análise de informações não estão disponíveis tampouco. Para habilitar o rastreamento do Userfly, você precisa colar algumas linhas de código em suas páginas web. Userfly custa 10 dólares por mês e um período de teste de 30 dias está disponível para você avaliar antes da compra.
   
   http://userfly.com/
   
   
   
   
   
   
   

4. UserTesting

   

   UserTesting é uma ferramenta web profissional que ajuda a avaliar a usabilidade do seu site. Com UserTesting, você pode gravar remotamente a tela e a voz de seus clientes e os movimentos do seu mouse. No final de cada teste, você recebe um resumo detalhado por escrito, que analisa o que os usuários gostaram / não gostaram e também todas as questões em seu design que são confusas ou espantam os usuários. Não disponibiliza mapas de calor, compartilhamento de tela, webcam ou análise de dados. Nenhum conhecimento de codificação é necessário para executar o UserTesting. O serviço custa 39 dólares por usuário. Não oferece período gratuito de testes.
   
   http://www.usertesting.com/
   
   
   
   
   
   
   

5. Silverback

   

   Silverback é um software profissional para testes de usabilidade exclusivamente para computadores Mac e permite que você grave, de modo remoto, a tela, voz e até mesmo a webcam de seus potenciais utilizadores, enquanto realiza tarefas através de seu website. Depois de analisar a gravação da sessão de usabilidade, você vai entender quais os elementos do design das páginas são mais difíceis de gerenciar e que podem levar a baixas taxas de conversão. Não disponibiliza compartilhamento de tela, mapas de calor, relatórios de usabilidade, nem informação ou análise disponíveis. Para usar Silverback, há necessidade de colar um código no seu site. Silverback custa $ 49,95 e permite uma experimentação livre de 30 dias.
   
   http://silverbackapp.com/
   
   
   
   
   
   
   

6. OpenHallway

   

   OpenHallway é uma ferramenta comercial online para testes de usabilidade que pode ser usada para melhorar o design do seu website. OpenHallway lhe permite criar quantas sessões remotas como local quiser, com gravações da tela e da voz de seus clientes e os movimentos do mouse. Nenhum mapa de calor ou compartilhamento de tela, gravação ou webcam compatível. Além disso, também disponibiliza relatórios de análise de informações. Para gravar a tela do seu cliente, não necessita qualquer conhecimento de codificação. OpenHallway custa US $ 19/mês e você pode executar a primeira sessão de testes de usabilidade de forma gratuita.
   
   http://www.openhallway.com/
   
   
   
   
   
   
   

7. CrazyEgg

   

   CrazyEgg é um website profissional para testes de usabilidade que permite que você visualize o comportamento de seus usuários enquanto navegam em suas páginas. Não há necessidade de baixar nada no seu computador, e apenas adicionando uma linha de código ao seu site, CrazyEgg rastreia todos os movimentos do mouse em suas páginas e, em seguida destaca as áreas que recebem mais cliques em um mapa calor. O serviço também fornece uma análise detalhada para monitorar todo o tráfego de dados do seu site. Nenhuma voz e gravação de webcam, compartilhamento de tela, ou a utilidade dos relatórios estão disponíveis. CrazyEgg custa $ 9/mês. Não disponibiliza períodos de teste trial.
   
   http://crazyegg.com/
   
   
   
   
   
   
   

8. ClickTale

   

   ClickTake é uma ferramenta profissional para testes de usabilidade on-line que você pode usar para monitorar o comportamento do usuário em seu site. Não há necessidade de baixar nada no seu computador, e apenas colando um pequeno pedaço de código em suas páginas web, o serviço rastreia todos os movimentos e cliques do mouse, enquanto destaca as áreas que recebem mais cliques. ClickTale também gera relatórios detalhados que contêm informações úteis e análises para a usabilidade do seu website. Não disponibiliza a gravação de voz, nem webcam ou a funcionalidade de compartilhamento de tela. ClickTale custa US $ 99/mês. Você pode experimentar o serviço em um site de graça para até 400 page views por mês.
   
   http://www.clicktale.com/
   
   
   
   
   
   
   

9. Clixpy

   

   Clixpy é um site para testes profissionais de usabilidade remotos. Ao colar algumas linhas de código em suas páginas, você pode gravar todos os movimentos do mouse, rolagem da barra, cliques e entradas em formulários e, em seguida, retornar a um vídeo que mostra todas as ações executadas pelos usuários de seu site. Nenhum mapas de calor, nem compartilhamento da sua tela ou webcam ou gravador de voz são compatíveis. Além disso, não disponibiliza relatórios de usabilidade ou análise de informações. Clixpy custa $ 5 para cada 100 sessões. Não disponibiliza período trial gratuito.
   
   http://www.clixpy.com/
   
   
   
   
   
   
   

10. Userzoom

    

    Userzoom é uma ferramenta profissional que o ajuda a verificar a usabilidade do seu site. Com UserZoom, você pode gravar remotamente a tela de seus clientes sem precisar instalar nada em sua máquina e sem o conhecimento de codificação. No final de cada teste de usabilidade, UserZoom gera um relatório sobre usabilidade e análise de dados que irá fornecer informações úteis para avaliar a qualidade do design e interface do seu site. Não são possíveis o compartilhamento de tela, gravação de webcam, gravador de voz, ou mapas de calor. Para obter detalhes de preços, você precisa entrar em contato com o departamento de vendas do UserZoom. Nenhum teste trial disponível.
    
    http://www.userzoom.com/

Crédito da foto: Hilary Quinn

O engraçado é que, conforme eu espalhava minhas ideias pela internet, eu não achava que o site fosse se tornar popular, subindo de posição nos motores de busca, muito menos que encontraria clientes na internet. A idéia básica era ajudar as pessoas. Antes de mais nada, ajudar a mim, mas também compartilhar o meu trabalho com pessoas que pudessem precisar de vez em quando. E, essencialmente, foi exatamente esta atitude que proporcionou e proporciona centenas de milhares de visitantes na minha página - por semana.

Já há alguns anos desenvolvendo websites, descobri alguns conceitos e ideias interessantes que me ajudaram a melhorar a qualidade do design web e das informações que apresento em minhas páginas.

Além disso, eu percebi alguns detalhes inteligentes nos quais não tinha prestado atenção antes. Adquiri uma visão do que significa a criação de websites e o que significa para fazer isso bem. Já que esta informação pode ser de interesse público, gostaria de compartilhá-la com você, apresentando os pontos principais na lista abaixo.

Crédito da foto: Brandon Seidel

Bom, basicamente, as “20 Regras Para Um Desenvolvimento Web Inteligente De Sucesso" é o meu modo pessoal de selecionar as principais ideias e conceitos, que possam melhorar a qualidade e a popularidade do seu site e fornecer uma boa base para um desenvolvimento bem sucedido no futuro.

20 Regras Para Um Desenvolvimento Web Inteligente De Sucesso

• 1. Respeite seus visitantes. Não tente forçá-los a ler o conteúdo das suas páginas. Deixe-os escolher e decidir o que querem ler. Se tiver algo a dizer, certamente encontrará quem te ouça. Falando com franqueza, você é tão bom como todo o mundo. Qual seria sua reação se entrasse em um site com uma dúzia de pop-ups e blocos de anúncios voando por todas as partes? É isso o que eu quero dizer.
• 2. Anúncio ruim não é legal. Blocos de anúncios intrusivos podem melhorar os seus ganhos por um tempo, mas a longo prazo, não vão tornar o seu web site bem-sucedido. Na verdade, você não ganhará respeito e nem poderá explorar o potencial dos seus projetos assim. No entanto, se os anúncios combinam perfeitamente com o conteúdo principal e estão bem colocados na estrutura do site (devblog.de) não se preocupe. Além disso, assegure-se de que a sua reputação e os pontos de receita publicitária estejam garantidos. Denny Carl, do Devblog.de colocou anúncios do Adsense em blocos de texto na coluna da direita. Não dá nem para vê-los à primeira vista. E eles se encaixam perfeitamente com a estrutura do site.
• 3. Informe e ensine os seus visitantes. Divida os seus pensamentos, ideias, experiências e conhecimentos com aqueles que necessitam ou talvez precisem do seu conselho. Assim que tiver consciência disso, você terá um instrumento poderoso para chamar a atenção do público para o seu trabalho, interesses e serviços. Além disso, se você compartilha conhecimentos valiosos com outros usuários, será respeitado e considerado como uma pessoa que sabe o que está falando.
• 4. Desenvolva seu próprio estilo. Desenvolva suas próprias ideias. Deixe-se inspirar, mas não copie. É muito mais interessante descobrir que você é capaz de fazer aquilo que as outras pessoas também podem fazer. Explore a sua imaginação e curiosidade. Ideias velhas renovadas ou melhoradas são mais susceptíveis de atrair os usuáros do que ideias antigas copiadas.
• 5. Respeite as normas. Pense nas pessoas. Não ignorar os os padrões da web o ajudará a poupar muito trabalho no futuro. Em pouco tempo, os padrões da web se tornarão um padrão na web e como criamos sites para as pessoas, é razoável passar algumas horas extra verificando o código e ajustá-lo às normas - no caso de não estar em conformidade com elas. Depois de fazer isso, você não precisará mais se preocupar com novas versões de browsers. Porque terá feito bem o seu trabalho. Legibilidade, acessibilidade, usabilidade. Se você os respeitar, estará respeitando os seus visitantes.
• 6. Seja claro. Use marcadores. Não tenha medo de dizer o que você quer dizer. Ambigüidade cria uma distância desnecessária entre você e seus visitantes. Dizer precisamente, o que você quer discutir ou apresentar inicia um diálogo ativo com os seus leitores. Além disso, se você especificar o que está dizendo, terá mais provavelmente um feedback ou uma resposta para a pergunta que você tiver feito.
• 7. Odeie o Internet Explorer o quanto quiser, mas não ignore os seus usuários. Não desenvolva o código do seu site para alguns navegadores em especial ou resoluções especiais. Pelo contrário, ajuste o código para o Internet Explorer como o faz para os demais navegadores. E embora eu, pessoalmente, tento evitar os hacks, às vezes, não é possível -, no entanto,fazer cortes para um navegador deve ser a última opção. Pode ser que o Internet Explorer não seja o melhor navegador do mercado, mas ainda é usado por mais de 85% dos usuários da web. Veja regra # 1.
• 8. Preocupe-se com o seu conteúdo. Ao desenvolver um site, tente torná-lo informativo, interessante e bem apresentado. Não se esqueça de que os visitantes se lembrarão de tudo. Se oferecer um link redirecionando para uma página web inadequada, sem a devida descrição do que está escondido por trás dele, nunca mais os verá novamente. Código é poesia, o seu conteúdo é prosa.
• 9. Não se preocupe com os web crawlers e com a otimização do SEO. Não pense em palavras-chave - muito mais importante é o que o seu web-site tem para oferecer. Melhorar a sua posição nos motores de pesquisa levará muito mais tempo do que escrever um artigo útil no seu blog. Além disso, se você se considera especialista em SEO, você sabe que terá que otimizar o seu site na Web o tempo todo a fim de obter melhores resultados nos motores de busca. Por outro lado, se você publicar um artigo, ele (espero) estará disponível, desde que seu site exista. Portanto, você só terá que escrevê-lo uma única vez.
• 9a. Evite práticas mal feitas de SEO e PR. Otimização mal feita de SEO (troca de links com todos os sites possíveis na rede, colocando o link em link farms, etc), mais cedo ou mais tarde, levam o seu site a ser proibido pelos principais motores de busca. Os algoritmos que os motores de busca usam estão melhorando o tempo todo, portanto, seus esforços terão sido em vão e você correrá o risco de se deparar com um Pagerank 0, acima de todos os resultados possíveis com os quais você nunca poderia competir. Além disso, se a sua reputação estiver em baixa, será extremamente difícil conseguir uma boa posição no topo da comunidade dos desenvolvedores da web.
• 10. Faça contato, mas não faça spam. Deixe que quem estiver interessado no seu conteúdo, esteja ciente dele. Defina primeiro o seu objetivo e clientela em potencial. Depois, veja com atenção quem pode se interessar pelo seu serviço. Pense nos sites que valem a pena visitar. Entre em contato apenas entre em contato com os autores destes sites, descrevendo as vantagens dos seus serviços. No entanto, tenha em mente que você não está escrevendo para um web crawler, mas para um ser humano, que pode decidir se quer compartilhar isso com seus leitores ou não, ou - mais importante - visitar o seu site ou não. Seja discreto, não não envie um link, envie um convite com uma boa descrição do que torna o seu web-site diferente de projetos similares. Certifique-se que a pessoa para quem você está escrevendo percebe que pode ser útil para os visitantes do seu site. Mas, novamente: Lembre-se que você não faz isso por dinheiro, mas para as pessoas. Não faça spam, não anuncie, ofereça um conteúdo útil.
• 11. Escreva, publique, fique à vontade para perguntar. Há sempre vários desenvolvedores web que fizeram, fazem ou farão a mesma pergunta que você agora. Não hesite em perguntar, não hesite em descobrir. Quanto mais inteligente a sua pergunta, mais chances terá de ser respondida, de modo que mais pessoas irão encontrar seu site através dos motores de busca.
• 12. Responda seus e-mails imediatamente. Faça contato com seus clientes em potencial o mais rapidamente possível - não deixe um e-mail ficar na sua caixa de entrada por mais de 12 horas. Não envie mensagens de auto-resposta. A pessoa que escreveu para você sabe que te escreveu. Portanto, não faça outras pessoas perderem o seu tempo do mesmo jeito que você não quer que aconteça com voce. Em vez disso, tente causar uma boa impressão na pessoa que entrou em contato com você. Responda com confiança, de forma profissional, amigável e aberta, não faça promessas, mas - de novo - não hesite em perguntar.
• 13. Use as vantagens da Web Semântica. Pratique o Tagging, o máximo que puder. Não tenha medo de mencionar o seu site em redes sociais, como o diHITT, Ocioso e centenas de outros gestores de bookmark social. No entanto, escolha as etiquetas com cuidado. Os visitantes virão. E se as etiquetas forem escolhidas racionalmente, mais visitantes virão. Você pode também incentivar os visitantes a marcarem seus artigos em serviços de bookmarks social.
• 14. Faça conexões. Desenvolvedores web criativos sempre estão respaldados por CSS, galerias e blogs de programadores. Alguns deles são mencionados aqui.
• 15. Pense em termos globais. O conteúdo do seu site pode não ser atraente regionalmente, mas as fronteiras da Web são vagas e pouco visíveis (se é que existem), então por que não enviar a sua mensagem do mundo? Não há necessidade de procurar um nicho novo perto de você, se você tem possibilidades quase ilimitadas em todo o mundo.
• 16. Nunca comprometa seus princípios. Discuta a forma como um site deve ser apresentado ou desenvolvido, respeite seus clientes e seus pontos de vista. Mas tenha em mente que você é realmente a pessoa que desenvolve o site. Não faça apenas o que lhe dizem para fazer. Corrija os erros se perceber que seu cliente está errado. Seja profissional - no final o seu objetivo é criar um site para os usuários, e não para seus clientes.
• 17. Fique em contato. Mantenha-se informado sobre o que está acontecendo na rede. A web está se desenvolvendo rapidamente e novas ideias são compartilhadas imediatamente. A melhor maneira de ficar "sintonizado" - é claro - é usando um feed RSSs de blogs populares em desenvolvimento. No entanto, revistas de design gráfico e desenvolvimento web, como AListApart, BoxesAndArrows, Digital Web Magazine, Poynter, Layers Magazine, Graphics.com também merecem leitura diária.
• 18. Aprenda a lidar com a criatividade. Se procura alguma ideia nova, tente navegar por fóruns de desenvolvimento, centrando a sua atenção no que outras pessoas estão procurando. Por exemplo, o Sitepoint.com é um recurso, que é visitado por milhares de desenvolvedores web todos os dias. Outra opção é ... bom, fazer uma pausa.
• 19. Torne a web mais bonita. Ter um CSS, claro, legível e design inteligente é lindo. Como você pode resistir a isso? Faça parte de concursos abertos, tais como CSS Table Gallery, CSS Zen Garden, Comment Design Showcase, Form Assembly Garden, sIFR Beauty Showcase. Assim, você torna a vida dos outros desenvolvedores mais fácil, mostrando o seu estilo e experiência.
• 20. Esteja ciente do poder da web. Vocês estão criando a web, portanto, tem a palavra. Apoie projetos, o que parece ser importante para você e tem que ser apoiado, porque vale a pena lutar pelos seus objetivos. Makepovertyhistory.org é um grande exemplo disso.

Crédito da foto: Sun Jeng Tan

As regras mencionadas acima não trarão sucesso algum para você, se não acreditar no que faz e explorar a sua criatividade.

Toda idéia pode ser o única.

Vitaly Friedman é um jovem web designer muito talentoso e especialista em desenvolvimento web. Vitaly escreve e pesquisa desde os 14 anos e hoje seus sites e artigos são um testemunho vivo da qualidade e ética de seu trabalho. Saiba mais sobre Vitaly através do seu CV e bio.

Crédito da foto: Jesper Noer e modificada por Robin Good

Quer você goste ou não, outras pessoas não vêem o seu site da mesma forma que você.

Você pode pensar que tem um site perfeitamente inteligível, enquanto os seus leitores lutam para encontrar a informação que procuram.

O engraçado é que você e eu não somos diferentes das pessoas que visitam nossos sites. Na verdade, quando você e eu passeamos pela web, fazemos exatamente o mesmo: ir direto para o conteúdo, queremos que todas as informações estejam à mão, e muitas vezes não nos preocupamos com a leitura de todas as coisas extra em torno do artigo, e assim por diante.

Isso é porque você pode aprender muito com o comportamento do usuário. Ele ajuda a perceber coisas erradas no site que você normalmente talvez não veja por si mesmo.

Neste relatório você encontrará uma lista de alguns dos comportamentos mais típicos de usuários que acontecem durante uma visita a um website, e embora muitos não sejam uma surpresa para você, estar consciente deles pode ajudar muito a identificar quais itens priorizar quando tiver tempo e recursos para fazer algumas melhorias no seu design e navegação.

10 Tipos De Comportamentos Do Usuário Inesperados Com Que Tomar Cuidado

por Alistair Gray

Introdução

Quando se projeta um site, há comportamentos fundamentais do usuário que devem ser considerados. Mas, para levá-los em conta, é preciso conhecê-los.

Abaixo estão 10 dos mais interessantes e menos conhecidos tipos de comportamento que ocorrem regularmente em testes com usuários.

As Pessoas Tem "Banner Blindness"

As pessoas não percebem os banners.

Estudos, rastreando o olhar das pessoas, descobriram que, literalmente, elas evitam pousar sobre qualquer área de um site que se pareça com um anúncio e que parece que tentam evitar olhar para eles. Este efeito é chamado cegueira de banner.

A banner blindness ou cegueira de banners afeta a maioria das pessoas, e tem um efeito colateral surpreendente.

Áreas úteis do site, que são concebidas de modo excessivamente gráfico (de modo a parecer um classificado) são ignoradas por usuários, como se fossem anúncios.

Uma boa maneira de evitar a cegueira de banners é o de assegurar que os banners do seu site estejam em sua maioria em texto, de modo que as pessoas os vejam como conteúdo o máximo possível.

Se você quiser potencializar o uso de anúncios no seu site até o máximo, use anúncios como os que aparecem do lado direito dos resultados de pesquisa do Google, ou no site da TFL.

As Pessoas Desenvolvem Afunilamento De Visão

Quem assiste a testes com usuários pela primeira vez fica surpreendido com como os participantes desenvolvem afunilamento de visão quando estão fazendo uma tarefa.

Um exemplo de uma recente rodada de testes com usuários: um link pedido pelos participantes foi colocado na coluna da direita, ao lado de um artigo, mas apenas dois entre oito o encontraram.

Se o link que os usuários procuram não tiver sido intitulado de modo correto ou não colocado onde esperam, eles irão, de modo surpreendentemente regular, travar diante do site.

Os participantes simplesmente não percebem as coisas na tela, a menos que esteja onde eles esperavam.

Infelizmente, não há nenhuma maneira clara de evitar este problema.

O melhor método de garantir que você ajude os usuários que tiverem desenvolvido o afunilamento da visão (ou visão em túnel) é realizar testes com usuários em tarefas-chave e ver se eles se perdem.

As Pessoas Pulam A Sua Homepage

Muitas vezes, quando alguém aterriza em um site, chega com uma tarefa específica em mente. Isto significa que sua visão em túnel já foi detonada e, portanto, esse usuário não olhará para todas as outras coisas que seu site oferece. Não efetuarão nenhum clique em momento algum.

Todo o esforço que você gastou, construindo a sua página inicial com todo o amor terá sido perdido.

As pessoas só não realizam as tarefas que você quer. Isso não pode ser ajudado, é um comportamento natural.

Leve este comportamento em conta quando conceber um site, você deve garantir que o objetivo e o seu conteúdo são claros em todas as páginas.

As Pessoas Precisam De Resposta

Se a resposta não for imediatamente visível, muita gente irá desistir, ou procurar outro lugar (há muitos outros sites no mar).

Nos testes, os participantes regularmente navegam até a página à direita, só para concluir rapidamente que estavam errados e vão embora.

As Pessoas Seguem O Padrão "F"

Embora se saiba que as pessoas tendem a olhar para os sites em "um padrão em F", não é assim tão simples.

As pessoas olham por todas as partes, quando aterrizam em uma página.

Depois de uma primeira opinião, as pessoas prestam mais atenção nas áreas que sentem que serão mais úteis para elas (normalmente, a navegação na parte superior e no lado esquerdo, o que incentiva o "padrão em F").

As Pessoas Veem, Mas Não Enxergam

Mais uma coisa a se ter em mente - Só porque uma pessoa olhou para algo em uma página não significa que tenha absorvido ou entendido o que viram.

Muitas vezes, em estudos de rastreamento ocular, foi mostrado que as pessoas viram algo, mas não o absorveram.

As Pessoas Odeiam Rolar A Página

Sempre que se perguntar, você verá as pessoas dizerem que odeiam rolar a página.

No entanto, na vida real, é menos problema do que muitos afirmam, os usuários freqüentemente rolam a página, sem sequer perceber que estão fazendo isso.

A chave é ter certeza de que as pessoas estejam conscientes de que irão encontrar mais conteúdo abaixo da dobra - não conte com a barra de rolagem na lateral da tela como pista suficiente.

Um pouco do conteúdo da página que começar acima da dobra deve continuar após isso.

Evite pontos na página onde o conteúdo parece ter terminado antes da hora e a página inicial fique curta.

As Pessoas Não Leem

Quando online, as pessoas leem de forma muito diferente do que quando leem um livro ou revista.

Na internet, as pessoas não tentam ler até que sintam que encontraram o que estão procurando, até chegar ao conteúdo que precisam. Até esse ponto, elas fazem uma varredura, procurando por palavras-chave. O que isso significa?

As pessoas não lêem um texto introdutório, ou de instrução, ou opções de navegação ... quase nada, se puderem evitá-lo. Isto deve ser tomado em consideração durante o design do site, e criação de conteúdos.

Existem várias maneiras para tentar reduzir o problema:

• Reduzir a contagem de palavras de cada página (de preferência pela metade)
• Tentar remover/minimizar o texto de instrução
• Destacar palavras-chave
• Usar listas com ítens onde possível
• Quebrar o texto em sub-posições claras
• Tentar iniciar cada página / parágrafo, com a conclusão, de modo que os usuários podem decidir se leem a página
• Usar imagens em vez de palavras, sempre que possível.

As Pessoas São Preguiçosas

As pessoas não gostam de ter que aprender novas maneiras de fazer as coisas.

Depois que os usuários encontraram uma maneira de fazer algo, mesmo que não seja a melhor, tendem a fazê-lo dessa forma, uma e outra vez. Normalmente, eles não vão se preocupar para ver se há uma maneira melhor, a menos que se frustrem.

Isso deve ser lembrado, se você for produzir uma nova versão de um sistema existente.

Faça com que as pessoas executem sua navegação da forma tradicional ou esteja preparado para irritar os usuários já existentes, conforme eles aprendem o novo jeito.

As Pessoas Querem Direções

Existe uma falácia na internet que diz que "as pessoas só estão dispostas a clicar até três vezes em um site". Isso está errado.

A verdadeira regra é que "as pessoas estão dispostas a clicar mais de três vezes em um site, desde que sintam estão fazendo progressos em direção a sua meta".

A orientação é a chave, se o site flui, se está claro onde os usuários devem ir à continuação, eles irão clicar alegremente por vários níveis do seu site.

As pessoas não gostam de se sentir perdidas.

Se o destino para onde ir for incerto (ainda no primeiro ou segundo clique), as pessoas irão para outro lugar.

Não há nada mais eficaz na condução dos visitantes para longe de um site do que eles clicarem e terem que parar e pensar para onde ir.

Infelizmente a única maneira de saber se o seu site sofre desse problema é através de testes de usabilidade ou prestando muita atenção para as métricas do site.

Conclusão

Fazer o design de um site é suficientemente difícil pelo que é, ter que levar em conta a má surpresa dos usuários em relação à navegabilidade do site torna tudo ainda mais difícil.

Felizmente, levar em consideração o comportamento inesperado do usuário no processo do design é uma grande parte da batalha, um passo significativo no caminho para uma boa experiência do usuário.

Sobre Alistair Gray

Alistair Gray é um consultor de experiência do usuário para Webcredible desde Novembro de 2007. Antes de trabalhar para Webcredible, ele era um consultor de usabilidade para Ominor. No ano de 2006, Alistair se formou na University College de Londres, em interação humana e com o computador com a ergonomia.

Créditos das fotos:
As Pessoas Desenvolvem Afunilamento De Visão - Robin Good
As Pessoas Seguem O Padrão "F" - Robin Good
As Pessoas Veem, Mas Não Enxergam - Peter Gnuskin
Outras Imagens - Clipart

Mapa de calor da homepage da MasterNewMedia criado por Feng-GUI

Testes de usabilidade de sites (do inglês, "website usability test")são de fato um componente crítico de qualquer estratégia eficaz de publicação online. Quando utilizados corretamente, os testes de usabilidade permitem a digitalização de forma eficaz e rápida para identificar quais são as questões cruciais a serem abordadas no seu veículo de publicação online que podem melhorar a legibilidade, o tempo que os visitantes gastam no seu site ou a capacidade de transformar ofertas de produtos e serviços em conversões reais.

Na verdade, de que adianta oferecer conteúdo valioso se os leitores não conseguem descobri-lo, compartilhá-lo e dar um uso eficaz a ele?

Para fazer seu site ter "uso" imediato, deixe-me compartilhar com você primeiro um simples conjunto de tarefas básicas a seguir para começar a testar e rever a usabilidade do seu próprio site:

1. Identificar um objetivo fundamental: Provavelmente, você tem múltiplos objetivos para o seu site. O primeiro passo é focar no mais crítico. Vendas? Tráfego? Ele trata de ajudar as pessoas a encontrar algo?
2. Usar Personas: Criar perfis de usuários típicos para melhorar o foco sobre as eventuais necessidades e expectativas de um grupo-alvo. Seu site é dirigido a especialistas de uma área ou ao público geral? Você quer atrair fiéis leitores ou visitantes acidentais? De que idade / sexo / localização são os usuários?
3. Dar continuidade a tarefas críticas: Depois de identificar seus objetivos e criar (perfis de usuários típicos), você quer que seus amigos, leitores ou voluntários exerçam as funções críticas do seu site para identificar áreas de melhoria e pontos fracos. Eles estariam no processo de venda direta? Será que as pessoas conseguem baixar seu conteúdo com facilidade? É possível compartilhar seus posts facilmente em mídias sociais?
4. Coletar dados: Enquanto os usuários executam ações específicas em seu site, você precisa observar e anotar através de um relatório as áreas específicas que fazem os visitantes pararem, voltarem ou ficarem confusos em relação ao que veem. Melhor ainda, você pode usar uma ferramenta de usabilidade dedicada à coleta de dados absolutos ou relativos que podem ajudar a caracterizar o comportamento dos seus leitores.
5. Revisar a sua análise: Depois de coletar os dados, você precisa agrupá-los com etiquetas, de forma clara, (ou seja, layout, navegação, fluxo funcional, tratamento de erros, etc), para que possa facilmente rever e analisar toda essa informação e, em seguida encontrar a estratégia ideal para fazer a sua melhoria.

Agora que você sabe quais são os principais passos necessários para iniciar um teste de usabilidade no seu site, o que você realmente precisa é saber quais ferramentas ou serviços estão disponíveis no mercado, para colocá-las em prática e dar o suporte, acelerar e organizar de modo muito profissional as suas tarefas.

Mas como identificar e escolher a ferramenta mais adequada de testes de usabilidade para sites para suas necessidades, nível de competência e orçamento específicos?

Para ajudar você a começar agora mesmo, este guia fornece um conjunto de opiniões individuais, um quadro comparativo e um mapa mental abrangente para ajudá-lo a selecionar a ferramenta ideal gratuita de website usability testing.

Por favor, note que estas ferramentas gratuitas de teste de usabilidade tem uma gama limitada de recursos. Por exemplo, não permitem que você grave a tela dos testadores ou compartilhar a tela nas sessões ao contrário do que oferecem as soluções profissionais de teste de usabilidade como TechSmith Morae, que será analisados em um guia separado da MasterNewMedia.

Agora que você já sabe sobre tais limitações, veja abaixo os critérios de seleção específicos utilizados para comparar estes diferentes serviços:

• Abordagem de teste: a) Teste a usabilidade do seu site, convidando usuários específicos a compartilharem suas opiniões, b) analise os dados analíticos e estatísticos.
• Analytics : Gere dados analíticos automaticamente em cada ferramenta para teste de usabilidade, a fim de avaliar a qualidade do design e interface do usuário do seu site.
• Visualização do comportamento do usuário: Visualize o comportamento de seus visitantes, analisando em que clicam ou olham (através do rastreamento do mouse) no seu site e qual caminho seguem para exercer tarefas específicas.
• Relatório de usabilidade: Gere um relatório abrangente, que contém todos os dados coletados pela análise do teste de usabilidade.

Ferramentas De Teste De Usabilidade - Tabela Comparativa

*O Google Website Optimizer, o Google Analytics e o Yahoo! Web Analytics não são ferramentas próprias de teste de usabilidade de sites. No entanto, decidi incluir também essas ferramentas na comparação, para que você possa usá-las para coletar informações valiosas sobre o comportamento do usuário.

Ferramentas Gratuitas De Teste De Usabilidade

1. Usabilla

   

   Usabilla é uma ferramenta de testes de usabilidade gratuita que ajuda a analisar e melhorar o design do seu site. Com Usabilla, você pode acompanhar e visualizar cliques de usuários e também realizar uma análise qualitativa fazendo a usuários únicos perguntas específicas como: "Qual elemento desta página atrai mais?". Ao longo de todo o processo, seus usuários podem fornecer por escrito comentários sobre componentes específicos de qualquer conteúdo ambíguo ou o que eles acham difícil de utilizar. No final do teste, você recebe um relatório detalhado que coleta todos os dados e impressões obtidas. Usabilla está disponível em 16 idiomas diferentes.

   
   http://usabilla.com/
   
   
   
   
   
   
   

2. Loop11

   

   Loop11 é uma ferramenta de testes de usabilidade que envolve usuários reais para analisar e rever o seu site. Loop11 é gratuito para um teste de usabilidade, você só precisa fornecer uma tarefa simples para um usuário e em seguida, deixar que o Loop11 monitore e visualize a interação do usuário. No final da sessão, você pode acessar relatórios detalhados que mostram a taxa de conclusão da tarefa, o tempo gasto em cada uma e páginas, caminhos e análise detalhados mostrando o caminho percorrido pelo usuário.
   
   http://www.loop11.com/
   
   
   
   
   
   
   

3. Fivesecondstest

   

   Fivesecondstest é uma ferramenta gratuita para executar testes de usabilidade em seu site com o objetivo de que você possa identificar ambigüidades ou problemas de design de interface. É possível fazer o upload de uma imagem nas páginas da web e, em seguida, solicitar aos usuários que participem dizendo o que mais gostaram ou pedindo que eles cliquem em partes específicas do seu projeto e compartilhem suas opiniões. Você pode contar com convidados ou tornar público o seu projeto para a avaliação do usuário aleatório. Depois de terminar o teste de usabilidade, você recebe um relatório detalhado para analisar os resultados. Não permite anotação ao vivo.

   
   http://fivesecondtest.com/
   
   
   
   
   
   
   

4. Google Analytics

   

   O Google Analytics é uma solução de web analytics gratuita que você também pode usar para testar a usabilidade do seu site. Ao ganhar insights automatizados e dados sobre seus usuários e o comportamento de navegação, você pode gerar relatórios personalizados que irão ajudá-lo a avaliar se o site é realmente útil e fácil de navegar. Pode até mesmo melhorar todos os gráficos de dados e do Google Analytics utilizando notas escritas que ajudarão você a se concentrar em produtos específicos ou conjuntos de dados. O Google Analytics requer uma conta do Google.

   
   http://www.google.com/analytics/
   
   
   
   
   
   
   

5. Google Website Optimizer

   

   O Google Website Optimizer é um teste de usabilidade de site e uma ferramenta de otimização que podem ajudar a melhorar o design do seu site. O Google Website Optimizer pode ajudar você a comparar e testar diferentes layouts de site, mostrando cada um em um grupo separado dos visitantes. Dessa forma, você pode analisar quais elementos de design específicos dentro de suas páginas levam as maiores taxas de conversão e a necessidade de serem melhorados. O Google Website Optimizer requer a inscrição de uma conta do Google. Não disponibiliza analytics.

   
   http://www.google.com/websiteoptimizer/
   
   
   
   
   
   
   

6. Yahoo! Web Analytics

   

   O Yahoo! Web Analytics é um serviço online gratuito de análise que você também pode usar para fins de teste de usabilidade. Com o Yahoo! Web Analytics, você pode coletar insights sobre a demografia de seus usuários e interesses, e depois aproveitá-los para melhorar o design e interface do seu site. Você também pode medir as conversões do site através da visualização do comportamento de usuários com ações específicas realizadas em suas páginas da Web e gerar relatórios personalizados para coletar e analisar os dados. Notas interativas também podem ser adicionadas aos seus gráficos e estatísticas. O serviço requer uma conta no Yahoo!.

   
   http://web.analytics.yahoo.com/