Como Tornar Seu Site Atraente

Slide 1: Como tornar seu site atraente? Horácio Soares

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

Slide 3: Como tornar seu site atraente?

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

Slide 5: O conteúdo é o REI

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

Slide 7: Janela Quebrada

Slide 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.

Slide 9: Objetivos e mensagens claras

Slide 10: Tempo

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

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

Slide 16: Facilidade de uso: Ta-da-list

Slide 17:  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 Um poste com dezenas página? de setas para todos lados

Slide 18: Consistente 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.

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

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

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

Slide 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

Slide 23: Por que seu site é visitado? Consistência

Slide 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.

Slide 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.

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

Slide 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.

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

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

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

Slide 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.

Slide 33: Por que seu site é visitado?

Slide 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.

Slide 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

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

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

Slide 42: Portabilidade – css para impressão

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

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

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

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

Slide 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 )

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

Slide 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 )

Slide 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/

Slide 51: 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 Nielsen, Adksson e Krug na horizontal Navegação local Coluna da esquerda Nielsen, Adksson e Bernard Breadcrumbs Parte superior, abaixo da Adksson, Lida e Chaparro marca da empresa e Krug Conteúdo global e Área central Bernard contextual Navegação de rodapé Parte inferior Nielsen, Krug, Lynch e Horton Livro: Design para a Internet – Projetando a Experiência Perfeita – Autor Felipe Memória ( http://www.fmemoria.com.br )

Slide 52: A combinação das informações levantadas por esses autores levam a um Wireframe: buscar Marca Navegação global Breadcrumbs Navegação local Conteúdo global Conteúdo e contextual relacionado Livro: Design para a Internet – Projetando a Experiência Perfeita – Autor Felipe Memória ( http://www.fmemoria.com.br )

Slide 53: É acessível usuários novos leigos no uso de computadores idosos deficientes temporários ou permanentes usuários de dispositivos móveis e com tamanho reduzido diferentes resoluções

Slide 55: Personaliza conteúdo, produtos e serviços O usuário pode personalizar a interface, escolhendo parte do conteúdo e sua apresentação.

Slide 56: Personaliza conteúdo, produtos e serviços

Slide 57: Boa posição nas ferramentas de busca (SEO – Search Engine Optimization): A estratégia de divulgação é peça fundamental para o sucesso de qualquer negócio online.

Slide 58: Por que seu site é visitado? Boa posição nas ferramentas de busca

Slide 59: Diferentes formas de chegar a informação Disponibiliza mais de uma forma de navegação: Mapa do site A-Z Index Search How-tos? Atalhos

Slide 60: Marketing viral, colaboração, Web2.0, ... 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.

Slide 61: Por que seu PORTAL é visitado? http://horaciosoares.blogspot.com

Slide 62: Por que seu PORTAL é visitado? http://www.bloglines.com/public/horaciosoares

Slide 63: Por que seu PORTAL é visitado? Suporta colaboração. 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

Slide 64: Por que seu PORTAL é visitado? Suporta colaboração. - Blog Corporativo - Wiki Corporativa

Slide 65: Livros: Projetando Websites Compatíveis (Jeffrey Zeldman) Design para a Internet: Projetando a Experiência Perfei (Felipe Memória) Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred)

Slide 66: Livros: Getting Real - disponível on-line (37signals.com) Não me faça pensar (Steve Krug) Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred)

Slide 67: Livros: Information Architecture for the World Wide Web (urço (Peter Morville - Louis Rosenfeld) Webwriting (Bruno Rodrigues) Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred)

Slide 68: Obrigado! Horácio Soares Designer de Interfaces horacio.soares@acessodigital.net http://acessodigital.net http://horacio.soares.blogspot.com Acessibilidade Usabilidade Web Standards