Como Tornar Seu Site Atraente

16,931 views

Published on

Published in: Technology
5 Comments
19 Likes
Statistics
Notes
No Downloads
Views
Total views
16,931
On SlideShare
0
From Embeds
0
Number of Embeds
206
Actions
Shares
0
Downloads
631
Comments
5
Likes
19
Embeds 0
No embeds

No notes for slide
  • Como Tornar Seu Site Atraente

    1. 1. Como tornar seu site atraente? Horácio Soares
    2. 2. apresentação Horácio Soares Designer de Interfaces [email_address] http://horacio.soares.blogspot.com Acessibilidade Usabilidade Web Standards
    3. 3. Como tornar seu site atraente?
    4. 4. <ul><li>Conteúdo de qualidade </li></ul><ul><ul><li>A criação eficaz do conteúdo é um dos aspectos mais críticos de todo web design. </li></ul></ul>
    5. 5. <ul><li>O conteúdo é o REI </li></ul>
    6. 6. <ul><li>Atualizações Constantes </li></ul><ul><ul><li>Fazer com que um usuário visite seu site, é muito mais fácil do que fazer com que ele retorne. </li></ul></ul>
    7. 7. Janela Quebrada
    8. 8. <ul><li>Objetivos e mensagens claras </li></ul><ul><ul><li>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. </li></ul></ul>
    9. 9. <ul><li>Objetivos e mensagens claras </li></ul>
    10. 10. <ul><li>Tempo </li></ul>
    11. 11. <ul><li>Tempo de download mínimo </li></ul><ul><ul><li>Dez segundos é o limite para manter a atenção do usuário concentrada no diálogo. ( Jacob Nielsen ) </li></ul></ul>
    12. 13. <ul><li>Fácil de usar </li></ul><ul><li>Com simplicidade, objetividade e foco na experiência do usuário. </li></ul>
    13. 16. <ul><li>Facilidade de uso: Ta-da-list </li></ul>
    14. 17. <ul><li>Fácil de navegar Visitantes 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? </li></ul>Um poste com dezenas de setas para todos lados
    15. 18. <ul><li>Consistente </li></ul><ul><ul><li>Se o conteúdo é o Rei a consistência é a RAINHA A 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. </li></ul></ul>
    16. 19. <ul><li>Homepage da A2 Comunicação ( http://www.a2comunicacao.com.br ) </li></ul>Livro: Não me faça pensar – Autor Steve Krug ( http://sensible.com )
    17. 20. <ul><ul><ul><li>Página capturada em 2005 </li></ul></ul></ul>Marca Site Objetivo do site um pouco confuso Menu principal Quem são – canal comunicação – acesso clientes Principais Produtos Últimos Trabalhos Endereço - Telefones
    18. 21. <ul><ul><li>O mesmo site de exemplo anterior dois níveis abaixo da Homepage da A2 Comunicação http://www.a2comunicacao.com.br/websites/design.htm </li></ul></ul>
    19. 22. Item selecionado com cor diferente Título Título da página – com hierarquia que está em redundância ao breadcrumb Barra superior - todos os níveis do site Barra inferior - todos os níveis do site Localização / (migalhas de pão) Item selecionado
    20. 23. Por que seu site é visitado? <ul><li>Consistência </li></ul>
    21. 24. <ul><li>Sistema de busca </li></ul><ul><ul><li>É fundamental que os usuários tenham acesso rápido e fácil ao sistema e que ele seja abrangente e simples. </li></ul></ul>
    22. 25. <ul><li>Uma busca útil e abrangente </li></ul><ul><ul><li>Suporta erros de digitação, acentuação, “ case insensitive ”. </li></ul></ul><ul><ul><li>Utiliza sinônimos. </li></ul></ul><ul><ul><li>Prioridade para conteúdo mais importante. </li></ul></ul><ul><ul><li>Resultado relevante na maioria dos casos, a informação é encontrada rapidamente. </li></ul></ul><ul><ul><li>Cada conteúdo tem a assinatura de seu dono. </li></ul></ul>
    23. 26. <ul><li>Comunicação rápida e fácil: Fale Conosco, chat, FAQ, e-mail, telefone, etc. </li></ul>
    24. 27. <ul><li>Identidade com público-alvo (foco no cliente) </li></ul><ul><ul><li>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. </li></ul></ul>
    25. 28. <ul><li>Identidade com público-alvo (foco no cliente) </li></ul><ul><ul><li>Sony x Nintendo </li></ul></ul>
    26. 29. Design para os objetivos do usuário <ul><li>Objetivo do Site </li></ul><ul><li>Quer fazer dinheiro com a WEB </li></ul><ul><li>Quer coletar informações sobre consumidores </li></ul><ul><li>Quer vender a enorme sobra de estoque do disco da XX. </li></ul><ul><li>Objetivo do Usuário </li></ul><ul><li>Quer comprar com segurança </li></ul><ul><li>Quer manter sua privacidade </li></ul><ul><li>Quer comprar o novo lançamento da GC </li></ul> Design e Avaliação de Interfaces Humano Computador
    27. 30. <ul><li>Objetivo do Site </li></ul><ul><li>Requer que o usuário passe pela seção de descontos para que veja o disco da XX em oferta </li></ul><ul><li>Corre com o usuário para o checkout e o prende no processo de compra </li></ul><ul><li>Pergunta informações pessoais sobre preferências, hábitos de compra e renda </li></ul><ul><li>Objetivo do Usuário </li></ul><ul><li>Fica chateado de ter que passar pela seção de ofertas porque só quer comprar o novo disco da GC. </li></ul><ul><li>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 </li></ul><ul><li>Se enfurece com as perguntas pessoais. Isso não é da sua conta! </li></ul> Design e Avaliação de Interfaces Humano Computador
    28. 31. <ul><li>Design atraente </li></ul><ul><ul><li>Os três elementos fundamentais do design: </li></ul></ul><ul><ul><ul><li>Design balanceado : equilíbrio e composição entre imagens, gráficos e tipologias com o design. </li></ul></ul></ul><ul><ul><ul><li>Contraste : integração entre os elementos do design </li></ul></ul></ul><ul><ul><ul><li>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. </li></ul></ul></ul>
    29. 33. Por que seu site é visitado?
    30. 34. <ul><li>Segue os padrões Web (Web Standards) </li></ul><ul><ul><li>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. </li></ul></ul>
    31. 35. <ul><li>Segue os padrões Web (Web Standards) </li></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>Separação de conteúdo da apresentação: </li></ul></ul><ul><ul><li>Clique sobre os números 1, 2 e 3 do site: </li></ul></ul><ul><ul><li>Internativa.com.br </li></ul></ul>
    32. 40. <ul><li>Portabilidade - design líquido ( resolução 640x480) </li></ul>
    33. 41. <ul><li>Portabilidade - design líquido (resolução 1024x768) </li></ul>
    34. 42. <ul><li>Portabilidade – css para impressão </li></ul>
    35. 43. Acesso Digital: http://acessodigital.net <ul><li>Portabilidade </li></ul><ul><li>css para dispositivo móvel MOTO Q </li></ul>
    36. 44. Acesso Digital – site de testes: http://acessodigital.net Homepage <ul><li>Portabilidade </li></ul><ul><li>css dispositivo móvel (Palm) </li></ul>contatos Quem somos
    37. 45. <ul><li>Segue os padrões Web (troca de roupa com um novo estilo) </li></ul>
    38. 46. <ul><li>Segue os padrões Web (troca de roupa com um novo estilo) </li></ul>
    39. 47. Omita palavras desnecessárias <ul><li>Livre-se de metade das palavras em cada página, então, livre-se da metade que sobrou. </li></ul>Livro: Não me faça pensar – Autor Steve Krug ( http://sensible.com )
    40. 48. 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. Omita palavras desnecessárias Livro: Não me faça pensar – Autor Steve Krug ( http://sensible.com )
    41. 49. Convenções de desenho de interface <ul><ul><li>conhecer profundamente os padrões e as práticas mais utilizadas na Web. </li></ul></ul><ul><ul><li>Serve como base, na dúvida, a preferência é da convenção. </li></ul></ul>Livro: Design para a Internet – Projetando a Experiência Perfeita – Autor Felipe Memória ( http://www.fmemoria.com.br )
    42. 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/
    43. 51. Livro: Design para a Internet – Projetando a Experiência Perfeita – Autor Felipe Memória ( http://www.fmemoria.com.br ) Elemento de interface Posicionamento Pesquisador Marca da empresa Canto superior Nielsen, Adksson e Bernard Busca Parte superior Nielsen, Adksson e Bernard Navegação global Parte superior com links na horizontal Nielsen, Adksson e Krug Navegação local Coluna da esquerda Nielsen, Adksson e Bernard Breadcrumbs Parte superior, abaixo da marca da empresa Adksson, Lida e Chaparro e Krug Conteúdo global e contextual Área central Bernard Navegação de rodapé Parte inferior Nielsen, Krug, Lynch e Horton
    44. 52. <ul><ul><li>A combinação das informações levantadas por esses autores levam a um Wireframe: </li></ul></ul>Livro: Design para a Internet – Projetando a Experiência Perfeita – Autor Felipe Memória ( http://www.fmemoria.com.br ) Marca Navegação global Navegação local Breadcrumbs Conteúdo global e contextual Conteúdo relacionado buscar
    45. 53. <ul><li>É acessível </li></ul><ul><ul><li>usuários novos </li></ul></ul><ul><ul><li>leigos no uso de computadores </li></ul></ul><ul><ul><li>idosos </li></ul></ul><ul><ul><li>deficientes temporários ou permanentes </li></ul></ul><ul><ul><li>usuários de dispositivos móveis e com tamanho reduzido </li></ul></ul><ul><ul><li>diferentes resoluções </li></ul></ul>
    46. 55. <ul><li>Personaliza conteúdo, produtos e serviços </li></ul><ul><ul><li>O usuário pode personalizar a interface, escolhendo parte do conteúdo e sua apresentação. </li></ul></ul>
    47. 56. <ul><li>Personaliza conteúdo, produtos e serviços </li></ul>
    48. 57. <ul><li>Boa posição nas ferramentas de busca (SEO – Search Engine Optimization): </li></ul><ul><ul><li>A estratégia de divulgação é peça fundamental para o sucesso de qualquer negócio online. </li></ul></ul>
    49. 58. Por que seu site é visitado? <ul><li>Boa posição nas ferramentas de busca </li></ul>
    50. 59. <ul><li>Diferentes formas de chegar a informação </li></ul><ul><ul><li>Disponibiliza mais de uma forma de navegação: </li></ul></ul><ul><ul><ul><li>Mapa do site </li></ul></ul></ul><ul><ul><ul><li>A-Z Index </li></ul></ul></ul><ul><ul><ul><li>Search </li></ul></ul></ul><ul><ul><ul><li>How-tos? </li></ul></ul></ul><ul><ul><ul><li>Atalhos </li></ul></ul></ul>
    51. 60. <ul><li>Marketing viral, colaboração, Web2.0, ... </li></ul><ul><ul><li>Blogs, Feed, Mash-Ups, Wiki, social bookmarking, tagging, comments, fotolog, ... - Matérias geradas pelos próprios usuários. - Se você gostou deste site, recomende. - Grátis eu gosto. - Newsletter - novidades, promoções e descontos. - Mensagens instantâneas, Comunidades virtuais . </li></ul></ul>
    52. 61. Por que seu PORTAL é visitado? http://horaciosoares.blogspot.com
    53. 62. Por que seu PORTAL é visitado? http://www.bloglines.com/public/horaciosoares
    54. 63. Por que seu PORTAL é visitado? <ul><li>Suporta colaboração. </li></ul>DEL.ICIO.US Foi o primeiro e é o mais popular Web 2.0 Social Bookmarking. É um sistema de categorização por palavras-chave não hierarquizado (Folksonomy) http://del.icio.us/horacio
    55. 64. Por que seu PORTAL é visitado? <ul><li>Suporta colaboração. </li></ul>- Blog Corporativo - Wiki Corporativa
    56. 65. Livros: <ul><li>Projetando Websites Compatíveis (Jeffrey Zeldman) </li></ul><ul><li>Design para a Internet: Projetando a Experiência Perfeita (Felipe Memória) </li></ul>Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred)
    57. 66. <ul><li>Getting Real - disponível on-line (37signals.com) </li></ul><ul><li>Não me faça pensar (Steve Krug) </li></ul>Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred) Livros:
    58. 67. <ul><li>Information Architecture for the World Wide Web (urço polar) (Peter Morville - Louis Rosenfeld) </li></ul><ul><li>Webwriting (Bruno Rodrigues) </li></ul>Livros: Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred)
    59. 68. Obrigado! Horácio Soares Designer de Interfaces [email_address] http://acessodigital.net http://horacio.soares.blogspot.com Acessibilidade Usabilidade Web Standards

    ×