Como tornar seu site atraente?

1. Como tornar seu site atraente? Horácio Soares

2. apresentação Horácio Soares Designer de Interfaces horacio.soares@acessodigital.net http://horacio.soares.blogspot.com Acessibilidade Usabilidade Web Standards

3. Como tornar seu site atraente?

4. Conteúdo de qualidade • A criação eficaz do conteúdo é um dos aspectos mais críticos de todo web design.

5. O conteúdo é o REI

6. Atualizações Constantes • Fazer com que um usuário visite seu site, é muito mais fácil do que fazer com que ele retorne.

7. JanelaQuebrada

8. Objetivos e mensagens claras • Informe em um piscar de olhos, onde o usuário se encontra, o que a sua empresa faz e o que os usuários podem fazer em seu site.

9. Objetivos e mensagens claras

10. Tempo

11. Tempo de download mínimo • Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. (Jacob Nielsen)

13. Fácil de usar • Com simplicidade, objetividade e foco na experiência do usuário.

16. Facilidade de uso: Ta-da-list

17. Fácil de navegarVisitantes não devem perder tempo pensando e tentando descobrir:- Onde está? - Onde posso ir? - Por onde devo começar? - Onde eles colocaram? - Quais são as coisas mais importantes nesta página? Um poste com dezenasde setasparatodoslados

18. Consistente • Se o conteúdo é o Rei a consistência é a RAINHAA consistência de design, identidade visual e de elementos entre as áreas e serviços de um mesmo site, auxilia a sua boa utilização em todo site e facilita a sua localização.

19. Homepage da A2 Comunicação(http://www.a2comunicacao.com.br) Livro: Não me faça pensar – Autor Steve Krug (http://sensible.com )

20. Marca Site Quem são – canal comunicação – acesso clientes Menu principal Objetivo do site um pouco confuso Principais Produtos ÚltimosTrabalhos Endereço - Telefones • Página capturada em 2005

21. O mesmo site de exemplo anterior dois níveis abaixo da Homepage daA2 Comunicaçãohttp://www.a2comunicacao.com.br/websites/design.htm

22. Título da página – com hierarquia que está em redundância ao breadcrumb Barra superior - todos os níveis do site Item selecionado com cor diferente Localização / (migalhas de pão) Título Item selecionado Barra inferior - todos os níveis do site

23. Por que seu site é visitado? • Consistência

24. Sistema de busca • É fundamental que os usuários tenham acesso rápido e fácil ao sistema e que ele seja abrangente e simples.

25. Uma busca útil e abrangente • Suporta erros de digitação, acentuação, “case insensitive”. • Utiliza sinônimos. • Prioridade para conteúdo mais importante. • Resultado relevante na maioria dos casos, a informação é encontrada rapidamente. • Cada conteúdo tem a assinatura de seu dono.

26. Comunicação rápida e fácil: Fale Conosco, chat, FAQ, e-mail, telefone, etc.

27. Identidade com público-alvo (foco no cliente) • Um sistema web focado em seu público alvo, deve levar em conta seu perfil, analisar seu histórico, valorizar links mais acessados, conteúdos e arquivos mais procurados e realizar testes de usabilidade e de satisfação com seus usuários freqüentemente.

28. Identidade com público-alvo (foco no cliente) • Sony x Nintendo

29. Objetivo do Site Quer fazer dinheiro com a WEB Quer coletar informações sobre consumidores Quer vender a enorme sobra de estoque do disco da XX. Objetivo do Usuário Quer comprar com segurança Quer manter sua privacidade Quer comprar o novo lançamento da GC Design para os objetivos do usuário  Design e Avaliação de Interfaces Humano Computador

30. Objetivo do Site Requer que o usuário passe pela seção de descontos para que veja o disco da XX em oferta Corre com o usuário para o checkout e o prende no processo de compra Pergunta informações pessoais sobre preferências, hábitos de compra e renda Objetivo do Usuário Fica chateado de ter que passar pela seção de ofertas porque só quer comprar o novo disco da GC. Fica em pânico ao entrar na seção de checkout porque suas questões sobre segurança ainda não foram respondidas e não existe um modo simples de mudar de idéia Se enfurece com as perguntas pessoais. Isso não é da sua conta!  Design e Avaliação de Interfaces Humano Computador

31. Design atraente • Os três elementos fundamentais do design: • Design balanceado: equilíbrio e composição entre imagens, gráficos e tipologias com o design. • Contraste: integração entre os elementos do design • Linhas invisíveis: são áreas criadas entre diferentes partes de um design. Proporção de 70% para conteúdo e 30% para espaços em branco.

33. Por que seu site é visitado?

34. Segue os padrões Web (Web Standards) • Segue os padrões sugeridos pelo W3C, separando o conteúdo em HTML da apresentação em CSS e mantém compatibilidade e portabilidade com navegadores, dispositivos, sistemas, plataformas, etc.

35. Segue os padrões Web (Web Standards) • Segue os padrões sugeridos pelo W3C, separando o conteúdo em HTML da apresentação em CSS e mantém compatibilidade e portabilidade com navegadores, dispositivos, sistemas, plataformas, etc. • Separação de conteúdo da apresentação: • Clique sobre os números 1, 2 e 3 do site: • Internativa.com.br

40. Portabilidade - design líquido ( resolução 640x480)

41. Portabilidade - design líquido (resolução 1024x768)

42. Portabilidade – css para impressão

43. Portabilidade • css para dispositivo móvelMOTO Q Acesso Digital:http://acessodigital.net

44. Portabilidade • css dispositivo móvel (Palm) Homepage Quem somos contatos Acesso Digital – site de testes:http://acessodigital.net

45. Segue os padrões Web (troca de roupa com um novo estilo)

46. Segue os padrões Web (troca de roupa com um novo estilo)

47. Omita palavras desnecessárias • Livre-se de metade das palavras em cada página, então, livre-se da metade que sobrou. Livro: Não me faça pensar – Autor Steve Krug (http://sensible.com )

48. Omita palavras desnecessárias 104 PALAVRAS:O questionário a seguir é destinado a colher informações que nos ajudarão a melhorar o site e adequá-lo às suas necessidades. Por favor, selecione suas respostas nos menus suspensos e nos botões de rádio abaixo. Você levará dois ou três minutos para preencher o questionário. No fim deste formulário, você pode optar por deixar seu nome, endereço, e número de telefone. Se você deixar seu nome e número, poderá ser contatado para participar de um estudo destinado a nos ajudar a melhorar este site. Se você tiver comentários ou interesses que precisem de resposta, por favor, contate o Serviço de Atendimento ao Cliente. 47 PALAVRAS:Por favor, ajude-nos a melhorar este site, respondendo a estas questões. Levará apenas 2 ou 3 minutos para completar esta avaliação. Nota: Se você tiver comentários ou interesses que necessitem de uma resposta, não use este formulário. Em vez disso, contate o Atendimento ao Cliente. Livro: Não me faça pensar – Autor Steve Krug (http://sensible.com )

49. Convenções de desenho de interface • conhecer profundamente os padrões e as práticas mais utilizadas na Web. • Serve como base, na dúvida, a preferência é da convenção. Livro: Design para a Internet – Projetando a Experiência Perfeita – Autor Felipe Memória (http://www.fmemoria.com.br )

50. Convenções de desenho de interface Fonte: http://www.pvision.com.br/blog/2007/02/14/humor-em-tempos-de-monetizacao-e-blogs-milhonarios/