como tornar seu site atraente?
DESCRIPTION
Como tornar seu site atraente?. Horácio Soares. apresentação. Horácio Soares Designer de Interfaces [email protected] http://horacio.soares.blogspot.com. Acessibilidade Usabilidade Web Standards. Como tornar seu site atraente?. Conteúdo de qualidade - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/1.jpg)
Como tornar seu
site atraente?
Horácio Soares
![Page 2: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/2.jpg)
apresentação
Horácio SoaresDesigner de Interfaces
[email protected] http://
horacio.soares.blogspot.com
Acessibilidade Usabilidade Web StandardsAcessibilidade Usabilidade Web Standards
![Page 3: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/3.jpg)
Como tornar seu site atraente?
![Page 4: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/4.jpg)
Conteúdo de qualidade
A criação eficaz do conteúdo é um dos aspectos mais críticos de todo web design.
![Page 5: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/5.jpg)
O conteúdo é o REI
![Page 6: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/6.jpg)
Atualizações Constantes
Fazer com que um usuário visite seu site,
é muito mais fácil do que fazer com que
ele retorne.
![Page 7: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/7.jpg)
Janela Quebrada
![Page 8: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/8.jpg)
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.
![Page 9: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/9.jpg)
Objetivos e mensagens claras
![Page 10: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/10.jpg)
Tempo
![Page 11: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/11.jpg)
Tempo de download mínimo
Dez segundos é o
limite para manter
a atenção do
usuário
concentrada no
diálogo.
(Jacob Nielsen)
![Page 12: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/12.jpg)
![Page 13: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/13.jpg)
Fácil de usar Com simplicidade,
objetividade e foco
na experiência do
usuário.
![Page 14: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/14.jpg)
![Page 15: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/15.jpg)
![Page 16: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/16.jpg)
Facilidade de uso: Ta-da-list
![Page 17: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/17.jpg)
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 dezenas Um poste com dezenas de setas para todos lados de setas para todos lados
![Page 18: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/18.jpg)
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.
![Page 19: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/19.jpg)
Homepage da A2 Comunicação(http://www.a2comunicacao.com.br)
Livro: Não me faça pensar – Autor Steve Krug ( http://sensible.com )
![Page 20: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/20.jpg)
Marca Site
Objetivo do site um pouco confuso
Menu principal
Quem são – canal comunicação – acesso clientes
Principais ProdutosÚltimosTrabalhos
Endereço - Telefones
Página capturada em 2005
![Page 21: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/21.jpg)
O mesmo site de exemplo anterior dois níveis abaixo da Homepage da A2 Comunicaçãohttp://www.a2comunicacao.com.br/websites/design.htm
![Page 22: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/22.jpg)
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
![Page 23: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/23.jpg)
Por que seu site é visitado?Consistência
![Page 24: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/24.jpg)
Sistema de busca
É fundamental que os usuários tenham
acesso rápido e fácil ao sistema e que
ele
seja abrangente e simples.
![Page 25: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/25.jpg)
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.
![Page 26: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/26.jpg)
• Comunicação rápida e fácil: Fale Comunicação rápida e fácil: Fale Conosco, chat, FAQ, e-mail, telefone, Conosco, chat, FAQ, e-mail, telefone, etc.etc.
![Page 27: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/27.jpg)
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.
![Page 28: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/28.jpg)
Identidade com público-alvo (foco no
cliente)
Sony x Nintendo
![Page 29: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/29.jpg)
Design para os objetivos do usuário
Objetivo do Site1. Quer fazer dinheiro com
a WEB
2. Quer coletar informações sobre consumidores
3. Quer vender a enorme sobra de estoque do disco da XX.
Objetivo do Usuário
1. Quer comprar com segurança
2. Quer manter sua privacidade
3. Quer comprar o novo lançamento da GC
Design e Avaliação de Interfaces Humano Computador
![Page 30: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/30.jpg)
Objetivo do Site1. Requer que o usuário
passe pela seção de descontos para que veja o disco da XX em oferta
2. Corre com o usuário para o checkout e o prende no processo de compra
3. Pergunta informações pessoais sobre preferências, hábitos de compra e renda
Objetivo do Usuário1. Fica chateado de ter que
passar pela seção de ofertas porque só quer comprar o novo disco da GC.
2. 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
3. Se enfurece com as perguntas pessoais. Isso não é da sua conta!
Design e Avaliação de Interfaces Humano Computador
![Page 31: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/31.jpg)
Design atraenteOs 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.
![Page 32: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/32.jpg)
![Page 33: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/33.jpg)
Por que seu site é visitado?
![Page 34: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/34.jpg)
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.
![Page 35: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/35.jpg)
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
![Page 36: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/36.jpg)
![Page 37: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/37.jpg)
![Page 38: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/38.jpg)
![Page 39: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/39.jpg)
![Page 40: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/40.jpg)
Portabilidade - design líquido ( resolução 640x480)
![Page 41: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/41.jpg)
Portabilidade - design líquido (resolução 1024x768)
![Page 42: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/42.jpg)
Portabilidade – css para impressão
![Page 43: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/43.jpg)
Acesso Digital: http://acessodigital.net
• Portabilidade css para dispositivo móvel
MOTO Q
![Page 44: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/44.jpg)
Acesso Digital – site de testes: http://acessodigital.net
Homepage
Portabilidade css dispositivo móvel (Palm)
contatos
Quem somos
![Page 45: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/45.jpg)
Segue os padrões Web (troca de roupa com um novo
estilo)
![Page 46: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/46.jpg)
Segue os padrões Web (troca de roupa com um novo
estilo)
![Page 47: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/47.jpg)
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 )
![Page 48: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/48.jpg)
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 )
![Page 49: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/49.jpg)
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 )
![Page 50: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/50.jpg)
Fonte: http://www.pvision.com.br/blog/2007/02/14/humor-em-tempos-de-monetizacao-e-blogs-milhonarios/
Convenções de desenho de interface
![Page 51: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/51.jpg)
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
Livro: Design para a Internet – Projetando a Experiência Perfeita – Autor Felipe Memória ( http://www.fmemoria.com.br )
![Page 52: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/52.jpg)
A combinação das informações levantadas por esses autores levam a um Wireframe:
Marca
Navegação global
Navegação local
Breadcrumbs
Conteúdo globale contextual
Conteúdo relacionado
buscar
Livro: Design para a Internet – Projetando a Experiência Perfeita – Autor Felipe Memória ( http://www.fmemoria.com.br )
![Page 53: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/53.jpg)
É acessívelusuá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
![Page 54: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/54.jpg)
![Page 55: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/55.jpg)
Personaliza conteúdo, produtos e serviços
O usuário pode personalizar a interface, escolhendo parte do conteúdo e sua apresentação.
![Page 56: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/56.jpg)
Personaliza conteúdo, produtos e serviços
![Page 57: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/57.jpg)
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.
![Page 58: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/58.jpg)
Por que seu site é visitado?Boa posição nas ferramentas de busca
![Page 59: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/59.jpg)
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
![Page 60: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/60.jpg)
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.
![Page 61: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/61.jpg)
Por que seu PORTAL é visitado?
http://horaciosoares.blogspot.com
![Page 62: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/62.jpg)
Por que seu PORTAL é visitado?
http://www.bloglines.com/public/horaciosoares
![Page 63: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/63.jpg)
Por que seu PORTAL é visitado?Suporta colaboração.
DEL.ICIO.USFoi 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
![Page 64: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/64.jpg)
Por que seu PORTAL é visitado?Suporta colaboração.
- Blog Corporativo- Wiki Corporativa
![Page 65: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/65.jpg)
Livros:Projetando Websites Compatíveis (Jeffrey Zeldman)
Design para a Internet: Projetando a Experiência Perfeita
(Felipe Memória)
Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred)
![Page 66: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/66.jpg)
Getting Real - disponível on-line
(37signals.com)
Não me faça pensar (Steve Krug)
Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred)
Livros:
![Page 67: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/67.jpg)
Information Architecture for the World Wide Web (urço polar) (Peter Morville - Louis Rosenfeld)
Webwriting (Bruno Rodrigues)
Livros:
Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred)
![Page 68: Como tornar seu site atraente?](https://reader031.vdocuments.com.br/reader031/viewer/2022032804/56812acd550346895d8ea2b9/html5/thumbnails/68.jpg)
Obrigado!
Horácio SoaresDesigner de Interfaces
[email protected]://acessodigital.net
http://horacio.soares.blogspot.com
Acessibilidade Usabilidade Web StandardsAcessibilidade Usabilidade Web Standards