Como tornar seu site atraente?
-
Upload
gualtier-meegan -
Category
Documents
-
view
29 -
download
6
description
Transcript of Como tornar seu site atraente?
Como tornar seu
site atraente?
Horácio Soares
apresentação
Horácio SoaresDesigner de Interfaces
[email protected] http://
horacio.soares.blogspot.com
Acessibilidade Usabilidade Web StandardsAcessibilidade Usabilidade Web Standards
Como tornar seu site atraente?
Conteúdo de qualidade
A criação eficaz do conteúdo é um dos aspectos mais críticos de todo web design.
O conteúdo é o REI
Atualizações Constantes
Fazer com que um usuário visite seu site,
é muito mais fácil do que fazer com que
ele retorne.
Janela Quebrada
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.
Objetivos e mensagens claras
Tempo
Tempo de download mínimo
Dez segundos é o
limite para manter
a atenção do
usuário
concentrada no
diálogo.
(Jacob Nielsen)
Fácil de usar Com simplicidade,
objetividade e foco
na experiência do
usuário.
Facilidade de uso: Ta-da-list
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
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.
Homepage da A2 Comunicação(http://www.a2comunicacao.com.br)
Livro: Não me faça pensar – Autor Steve Krug ( http://sensible.com )
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
O mesmo site de exemplo anterior dois níveis abaixo da Homepage da A2 Comunicaçãohttp://www.a2comunicacao.com.br/websites/design.htm
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
Por que seu site é visitado?Consistência
Sistema de busca
É fundamental que os usuários tenham
acesso rápido e fácil ao sistema e que
ele
seja abrangente e simples.
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.
• 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.
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.
Identidade com público-alvo (foco no
cliente)
Sony x Nintendo
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
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
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.
Por que seu site é visitado?
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.
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
Portabilidade - design líquido ( resolução 640x480)
Portabilidade - design líquido (resolução 1024x768)
Portabilidade – css para impressão
Acesso Digital: http://acessodigital.net
• Portabilidade css para dispositivo móvel
MOTO Q
Acesso Digital – site de testes: http://acessodigital.net
Homepage
Portabilidade css dispositivo móvel (Palm)
contatos
Quem somos
Segue os padrões Web (troca de roupa com um novo
estilo)
Segue os padrões Web (troca de roupa com um novo
estilo)
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 )
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 )
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 )
Fonte: http://www.pvision.com.br/blog/2007/02/14/humor-em-tempos-de-monetizacao-e-blogs-milhonarios/
Convenções de desenho de interface
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 )
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 )
É 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
Personaliza conteúdo, produtos e serviços
O usuário pode personalizar a interface, escolhendo parte do conteúdo e sua apresentação.
Personaliza conteúdo, produtos e serviços
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.
Por que seu site é visitado?Boa posição nas ferramentas de busca
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
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.
Por que seu PORTAL é visitado?
http://horaciosoares.blogspot.com
Por que seu PORTAL é visitado?
http://www.bloglines.com/public/horaciosoares
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
Por que seu PORTAL é visitado?Suporta colaboração.
- Blog Corporativo- Wiki Corporativa
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)
Getting Real - disponível on-line
(37signals.com)
Não me faça pensar (Steve Krug)
Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred)
Livros:
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)
Obrigado!
Horácio SoaresDesigner de Interfaces
[email protected]://acessodigital.net
http://horacio.soares.blogspot.com
Acessibilidade Usabilidade Web StandardsAcessibilidade Usabilidade Web Standards