O documento fornece dicas para tornar um site atraente, incluindo ter conteúdo de qualidade, atualizações constantes, objetivos e mensagens claras, tempo de download mínimo, facilidade de uso, consistência e acessibilidade.

1. Como
tornar seu
site
atraente?

2. apresentação
Suzana Mota
Designer de Interfaces
suzanasvm@hotmail.com
Acessibilidade Usabilidade Web Standards

3. Como tornar seu
site atraente?

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

5. O conteúdo é o REI

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

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

8. Objetivos e mensagens claras

9. Tempo

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

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

13. Facilite o uso

14. 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?Um poste com dezenas
de setas para todos lados

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

16. 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
Página capturada em 2005

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

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

19. Sistema de busca
É fundamental que os usuários tenham
acesso rápido e fácil ao sistema e que ele
seja abrangente e simples.

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

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

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

23. Identidade com público-alvo (foco no cliente)
Sony x Nintendo

24. Design para os objetivos do usuário
Objetivo do Site
1. 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

25. Objetivo do Site
1. 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ário
1. 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

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

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

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

33. Portabilidade - design líquido ( resolução 640x480)

34. Portabilidade - design líquido (resolução 1024x768)

35. Portabilidade – css para impressão

36. Segue os padrões Web (troca de roupa com um novo estilo)

37. 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 )

38. 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 )

39. 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 )

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

41. É 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

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

44. Personaliza conteúdo, produtos e serviços

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

46. Por que seu site é visitado?
Boa posição nas ferramentas de busca

47. Diferentes formas de
chegar a informação

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

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

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

51. Obrigada!
Suzana Mota
Designer de Interfaces
suzanasvm@hotmail.com
Acessibilidade Usabilidade Web Standards