Como Tornar Seu Site Atraente

Como tornar seu site atraente? Horácio Soares

apresentação Horácio Soares Designer de Interfaces [email_address] 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 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 página?
Um poste com dezenas 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 )

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

O mesmo site de exemplo anterior dois níveis abaixo da Homepage da A2 Comunicação http://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 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 (foco no cliente)
Sony x Nintendo

Design para os objetivos do usuário
Objetivo do Site
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
Quer comprar com segurança
Quer manter sua privacidade
Quer comprar o novo lançamento da GC
 Design e Avaliação de Interfaces Humano Computador

Objetivo do Site
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
Pergunta informações pessoais sobre preferências, hábitos de compra e renda
Objetivo do Usuário
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.

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)

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 )

Convenções de desenho de interface Fonte: http://www.pvision.com.br/blog/2007/02/14/humor-em-tempos-de-monetizacao-e-blogs-milhonarios/

Livro: Design para a Internet – Projetando a Experiência Perfeita – Autor Felipe Memória ( http://www.fmemoria.com.br ) 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

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

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

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.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 é 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 Soares Designer de Interfaces [email_address] http://acessodigital.net http://horacio.soares.blogspot.com Acessibilidade Usabilidade Web Standards

http://horaciosoares.blogspot.com	102
http://www.slideshare.net	67
http://pedacosdemimonline.blogspot.com	20
http://solbeltrame.wordpress.com	13
http://multivvwsv2.blogspot.com	8
http://forum.webly.com.br	5
http://forum.ievolutionweb.com	4
http://www.auretek.blogspot.com	4
http://www.freewebs.com	3
http://pedacosdemimonline.blogspot.pt	3
file://	2
http://tecnologia.multiplointeractive.com.br	2
http://cms.habbo-extremee.webnode.com.br	2
http://limgs.com	1
http://www.blogger.com	1
http://localhost	1
http://webcache.googleusercontent.com	1
http://noticiasamilbrasil.blogspot.com	1
http://www.newshutch.com	1
http://www.horaciosoares.blogspot.com	1
http://auretek.blogspot.com.br	1

Como Tornar Seu Site Atraente

by Horácio Soares on Sep 21, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

21 Embeds 243

Statistics

Como Tornar Seu Site Atraente — Presentation Transcript