Como tornar seu site atraente?

Como tornar seu

site atraente?

Horácio Soares

apresentação

Horácio SoaresDesigner de Interfaces

horacio.soares@acessodigital.net 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

horacio.soares@acessodigital.nethttp://acessodigital.net

http://horacio.soares.blogspot.com

Acessibilidade Usabilidade Web StandardsAcessibilidade Usabilidade Web Standards