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
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 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
de setas para todos lados
página?
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
Quem são – canal comunicação –
acesso clientes
Menu principal
Últimos
Trabalhos
Objetivo do site um pouco
confuso
Principais Produtos
Endereço - Telefones
Página capturada em 2005
O mesmo site de exemplo anterior dois
níveis abaixo da Homepage da
A2 Comunicação
http://www.a2comunicacao.com.br/websites/design.htm
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
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 Conosco,
chat, FAQ, e-mail, telefone, 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
Sony x Nintendo
(foco no cliente)
Design para os objetivos do usuário
Objetivo do Site
1.
2.
3.
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
1.
2.
3.
 Design e Avaliação de Interfaces Humano Computador
Quer comprar com
segurança
Quer manter sua
privacidade
Quer comprar o novo
lançamento da GC
Objetivo do Usuário
Objetivo do Site
1.
2.
3.
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
1.
2.
Pergunta informações
pessoais sobre preferências,
hábitos de compra e renda
3.
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
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.
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
• Portabilidade
css para dispositivo móvel
MOTO Q
Acesso Digital:
http://acessodigital.net
Portabilidade
css dispositivo móvel (Palm)
Homepage
Quem somos
contatos
Acesso Digital – site de testes: http://acessodigital.net
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 )
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 )
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 )
Convenções de desenho
de interface
Fonte: http://www.pvision.com.br/blog/2007/02/14/humor-em-tempos-de-monetizacao-eblogs-milhonarios/
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:
buscar
Marca
Navegação global
Navegação
local
Breadcrumbs
Conteúdo global
e contextual
Conteúdo
relacionado
Livro: Design para a Internet – Projetando a Experiência Perfeita –
Autor Felipe Memória ( http://www.fmemoria.com.br )
É 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
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 é
Suporta
colaboração.
visitado?
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
Por que seu PORTAL é
Suporta
colaboração.
visitado?
- 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)
Livros:
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)
Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred)
Obrigado!
Horácio Soares
Designer de Interfaces
[email protected]
http://acessodigital.net
http://horacio.soares.blogspot.com
Acessibilidade
Usabilidade Web Standards