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.

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

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.

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

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

Objetivos e mensagens claras

Tempo

Tempo

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

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.

Fácil de usar

Com simplicidade, objetividade e foco na experiência do usuário.

Facilidade de uso: Ta-da-list

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

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?

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.

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 )

Homepage da A2 Comunicação ( http://www.a2comunicacao.com.br )

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

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

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

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.

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.

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.

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)

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

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

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

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

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

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.

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

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 640x480)

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

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

Portabilidade – css para impressão

Portabilidade – css para impressão

Acesso Digital: http://acessodigital.net Portabilidade css para dispositivo móvel MOTO Q

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

Portabilidade

css dispositivo móvel (Palm)

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

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

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 )

Livre-se de metade das palavras em cada página, então, livre-se da metade que sobrou.

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 )

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.

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

A combinação das informações levantadas por esses autores levam a um Wireframe:

É 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

É 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

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

Personaliza conteúdo, produtos e serviços

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

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

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 .

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

Suporta colaboração.

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

Suporta colaboração.

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)

Projetando Websites Compatíveis (Jeffrey Zeldman)

Design para a Internet: Projetando a Experiência Perfeita (Felipe Memória)

Getting Real - disponível on-line (37signals.com) Não me faça pensar (Steve Krug) Resenhas FatorW (Walmar Andrade ) - Resenhas Usabilidoido (Fred) Livros:

Getting Real - disponível on-line (37signals.com)

Não me faça pensar (Steve Krug)

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)

Information Architecture for the World Wide Web (urço polar) (Peter Morville - Louis Rosenfeld)

Webwriting (Bruno Rodrigues)

Obrigado! Horácio Soares Designer de Interfaces [email_address] http://acessodigital.net http://horacio.soares.blogspot.com Acessibilidade Usabilidade Web Standards