experiência do usuário - cefet - rr

Experiência do usuário na Web

Alexandre Formagio


Alexandre Formagio

SEMINF - CEFET-RR Alexandre Formagio

Quem é Alexandre Formagio?


Informações importantes

• Não se preocupem em anotar, estes slides estarão na segunda-feira no SlideShare e no meu blog;

• Fiquem a vontade para perguntar quando surgirem dúvidas.


Mas o que é isso afinal?


Mas o que é isso afinal?


Primeiro lugar, a culpa é nossa... vamos admitir os erros?


Como são planejados os sites?


Mas como eles são usados?


Opa, mas o que fazer então?

• Acessibilidade;

• Arquitetura da Informação;

• Usabilidade;

• Experiência do usuário.

Vamos discutir e aprender mais sobre foco

no usuário, abordando os seguintes

assuntos:

AcessibilidadeTrabalhando com sites acessíveis e

inclusivos

AcessibilidadeTrabalhando com sites acessíveis e

inclusivos


O que é Acessibilidade?

Acessibilidade serve para criar sites que possam

ser usados por qualquer pessoa, inclusive com

algum tipo de deficiência, palms, celulares,

navegadores diversos e etc.


Quem precisa de Acessibilidade?


O que é Acessibilidade?

Agora que você já sabe quem precisa de

Acessibilidade, vamos imaginar o mundo ao

contrário?


Como funciona a Acessibilidade?

A Acessibilidade trabalha com 3 níveis de prioridades: • Prioridade 1 – Requisitos mínimos de acesso;

• Prioridade 2 – Requisitos recomendados;

• Prioridade 3 – Requisitos para acesso sem dificuldades;


Exemplos de má Acessibilidade


Exemplos de boa Acessibilidade


Governo e a Acessibilidade

DECRETO Nº 5.296 de 2 de Dezembro De 2004

“Art. 47. No prazo de até doze meses a contar da data de publicação deste Decreto, será obrigatória a acessibilidade nos portais e sítios eletrônicos da administração pública na rede mundial de computadores (internet), para o uso das pessoas portadoras de deficiência visual, garantindo-lhes o pleno acesso às informações disponíveis.“


Melhorando a Acessibilidade

• Conhecer as necessidade especiais;

• Seguindo os padrões web e diretrizes da WCAG;

• Testando em situações reais;


Testar a Acessibilidade?

• Testando com pessoas deficientes, em diversos navegadores, em palm’s, conexões lentas e etc.


Testar a Acessibilidade?

• Validar CSS e XHTML em sites especializados neste ramo, alguns exemplos:


Google e a Acessibilidade

Sabe quem é o maior cego na Web?

Se você cria um site acessível, você ajuda o Google ao posicionar o seu site.


Google e a Acessibilidade

Mesmo o Google sendo o maior cego, ele não é 100% acessível, ele pode ser considerado razoavelmente acessível segundo Lêda Lucia Spelta do Acesso digital.

Arquitetura da Informação

Ajudando o usuário a chegar aos seus objetivos


Ajudando o usuário a chegar aos seus objetivos


O que é Arquitetura da

Informação?A Arquitetura da Informação organiza os

sistemas de informação, para que as pessoas

possam encontrar de forma fácil o que desejam

e não se percam pelo site.



Vejamos alguns exemplos de Arquitetura da

Informação na nossa vida.


Organização de mapas


Organização de bibliotecas


Arquiteto da Informação

A maioria dos Arquitetos da Informação vem do

estudo de biblioteconomia, que vem do

estudo de como catalogar e administrar

informações, como por exemplo, em bibliotecas

de forma a auxiliar a vida das pessoas.


O que é Arquitetura da

Informação?• Fluxo de navegação fácil e lógico;

• Disposição dos elementos na melhor forma possível;

• Pontos importantes visíveis e destacados;

• Nomes de seções, campos de formulário e etc, devem ser intuitivas para qualquer pessoa;

• Texto direto, fácil e na linguagem do usuário.


Erros de Arquitetura da

Informação• Resultados de busca mal organizados;

• Nomes confusos (campos, seções);

• Página desorganizada;

• Performance lenta;

• Navegação inconsistente.


Exemplos de Arquitetura da

InformaçãoVeremos a seguir dois exemplos de reformulação de Arquitetura da Informação:

• Tecnisa;

• Sky e-commerce.


Exemplos - Tecnisa

Nova interface do site da empresa Tecnisa, mais clean e consideravelmente mais organizado.

Quer saber os resultados?


Exemplos - Tecnisa

•Aumento de 96% de visitas em 2007;

• Aumento de 81% em vendas;

• Aumento de 29% de taxa de conversão visita/chat;

• Aumento de 50% de taxa de conversão visita/cadastro


Exemplos - Sky

Após a reformulação recente, a taxa de conversão de vendas de 0,2% para 50% em 4 meses



InformaçãoVeremos a seguir alguns exemplos do que o Arquiteto da Informação, é responsável em um projeto.


Wireframes


Card-Sorting


Conferir métricas


Melhorando a Arquitetura da

InformaçãoÉ importante descobrir quais os pontos mais importantes da página e trabalhar em cima deles. Para isso existe o método “Eye-tracking”



Informação• Criar formulários fáceis e acessíveis;

• Elementos importantes devem estar destacados e bem posicionados;

• Buscas eficientes, trazendo o que o usuário quer;

• Poucos cliques para chegar ao conteúdo;

• Evitar erros de fluxo na navegação.

Notícia principal em destaque (E que notícia!)

Busca visível

E-mail visível



Informação



InformaçãoVocê deve conhecer um dos estudos relacionados a Arquitetura da Informação mais conhecido hoje, a Folksonomia...

Não sabe o que é isso?



InformaçãoComo você classificaria a imagem abaixo?



Informação



InformaçãoFolksonomia nada mais é do que a classificação de informações pelos próprios usuários.

Exemplo: Flickr, del.icio.us e YoutTube



Informação“Se o consumidor não consegue encontrar o produto, ele não poderá comprá-lo”

Jakob Nielsen (2003)

UsabilidadeFacilitando a vida do usuário

UsabilidadeFacilitando a vida do usuário


O que é Usabilidade?

Usabilidade é sinônimo de facilidade de uso, ou seja, se é fácil de usar, o usuário aprende rápido a usar, memoriza as operações, comete menos erros e chega aos seus objetivos.


O que é Usabilidade?

Usabilidade vem do estudo de Ergonomia, que busca criar que objetos, sistemas e etc sejam fáceis de serem utilizados. Por exemplo:


Princípios da Usabilidade

• Ser fácil de aprender;

• Ser eficiente na utilização;

• Ser fácil de ser recordado;

• Ter poucos erros;

• Ser agradável.

Jakob Nielsen (2003)


Princípios da Usabilidade

• É essencial uma boa usabilidade porque, diferente da TV, na web o usuário tem um comportamento ativo e interage com o site;

• O usuário nunca erra, quem erra é quem projetou o site e não pensou nas prováveis situações de uso e nos possíveis erros dos usuários;


Desafio de Usabilidade

Onde está o botão ou link de download na página a seguir? Você consegue encontrá-lo em menos de 5 segundos?



Conseguiu achar facilmente? Foi intuitivo?



Qual é mais fácil fazer o download? Este...



Ou este abaixo?



Onde posso criar um cadastro no site a seguir? Você consegue encontrá-lo em menos de 10 segundos?



Bom, vamos clicar em “Meu cadastro” e ver o que acontece.



Alguém conseguiu ver onde é possível se cadastrar?

Não?

Nem eu!



Como resolver isto? Fácil...


Efeito Las Vegas

Como se concentrar com tanta informação?


Boa Usabilidade

Links evidentes

Resultados visíveis

Busca fácil e intuitivaVocê sabe onde está


Melhorando a Usabilidade

• Conhecendo os usuários e como eles usam o site;

• Dando prioridade a estas pessoas ao invés das tecnologias;

• Seguindo os estudos e pesquisadores;

• Testando em situações reais;


Teste de Usabilidade

Veja um pequeno teste de Usabilidade em um “dispositivo móvel”.


Teste de Usabilidade

Que tal fazemos um pequeno teste em um site?

Quem se candidata?

Experiência do UsuárioEste é o próximo desafio

Experiência do UsuárioEste é o próximo desafio


Second Life


Nintendo Wii


IPhone

X


Cirque Du Soleil e Blue Man

Group


Caixa Econômica

Conhecendo o usuárioSaiba como as pessoas utilizam a

web hoje

Conhecendo o usuárioSaiba como as pessoas utilizam a

web hoje


Conhecendo o Usuário

• Texto chamam mais atenção do que gráficos;

• Olhos começam a olhar do canto esquerdo (Triangulo visual);

• Usuário olham o site como um “F”;

• Leitores ignoram banners;

• Fontes sofisticadas remetem a publicidade e muitas vezes são ignoradas.



• Gostam de números como numerais e não escrito;

• Tamanho de fonte influencia no comportamento do usuário (Pequena ele lê, grande ele “scaneia”);

• As pessoas só dão uma leve olhada na parte baixa do site;

• Listas fazem sucesso (isto é um exemplo de lista);

• Menus no topo são melhores;



• Grandes blocos de texto são ignorados;

• Imagens extremamente elaboradas não chamam tanta a atenção como foto de pessoas comuns por exemplo;

• Propaganda próximas ao melhor conteúdo da página chamam mais a atenção;

• Usuários adoram manchetes.

Mitos do foco no usuárioConheça as verdades e mentiras

desta tendência

Mitos do foco no usuárioConheça as verdades e mentiras

desta tendência


Mitos do foco no usuário

• Site fácil de usar e acessível, não é sinônimo de interfaces extremamente limpas;

• Acessibilidade não é cara, muito menos demorada e complexa para ser aplicada;

• Acessibilidade NÃO é apenas para pessoas com deficiência visual;

• Não são poucos os usuários beneficiados pela Acessibilidade;


Mitos do foco no usuário

• Nós achamos que sabemos o que é bom para nosso usuário (Isto serve para o desenvolvedor e para o cliente), mas definitivamente não sabemos;

• Usabilidade e Arquitetura da Informação não são baratos, mas trazem retorno.

• Todos os projetos necessitam focar no usuário, independente do tamanho do projeto.

O que devemos fazer?O que fazer para obter melhores

resultados

O que devemos fazer?O que fazer para obter melhores

resultados


O que devemos fazer?

Trabalhar com padrões web, mas por que?

• Fácil manutenção de código;

• Redução de até 50% de código e peso dos arquivos;

• Sites acessíveis para dispositivos móveis, deficientes, diversos navegadores e etc;

• Bom posicionamento no Google.



• Começar a entender REALMENTE seu cliente, seu mercado, seu público alvo e etc;

• Acompanhar e entender as mudanças da WEB, AJAX, métricas, RSS, Mashup, acessibilidade, design de interação e por aí vai;

• Trabalhar com planejamento e com métricas;



Trabalhar com a simplicidade, objetividade e facilidade sempre!

Quer exemplos de que isto dá certo?



Google em 1998

Quer exemplos de que isto dá certo?



Google em 2007



Altavista em 1998



Altavista em 2001



Altavista em 2007



Criar diferenciais competitivos, não adianta ser mais um no meio de tantos.

Qual a diferença entre os 2 automóveis abaixo?



Trabalhar sempre focado no usuário (Vale ressaltar!).

Quem ganha com o foco no usuário?

Por que ter este trabalho todo?

Quem ganha com o foco no usuário?

Por que ter este trabalho todo?


Quem ganha com o foco no

usuário?Nós que somos usuários, que alcançamos nossos objetivos ao navegar em um site.



usuário?Você desenvolvedor, que cria projetos bons e será reconhecido no mercado;



usuário?Sua empresa, que será reconhecida por criar projetos úteis e fáceis;



usuário?O cliente, que terá retorno de várias formas, como mais contatos, melhores posições em buscadores, aumento de seu público, maior retorno e etc;



usuário?Ou seja, todos nós ganhamos quando trabalhamos focados no usuário final.

Desafios para o futuroO que devemos esperar e buscarDesafios para o futuroO que devemos esperar e buscar


Desafios para o futuro

• Criar soluções agradáveis que sejam fáceis de usar;

• Estar bem posicionado em buscadores;

• Criar projetos que se integrem com outras soluções (Celulares, pal-m’s, TV Digital e etc);

• Acompanhar o ritmo do mercado, os próximos 5 anos mudarão mais do que os últimos 30 anos;



• Criar conteúdo realmente relevante, de preferência com poucas linhas;

• Alinhar necessidades do cliente e de seu usuário (Cliente quer dados do usuário, usuário quer manter sua privacidade, por exemplo);

• Tratar o excesso de informações da melhor forma possível;



• Criar experiências ricas, apenas ler não satisfaz mais o usuário;

• Trabalhar sempre focado no usuário (Vale ressaltar pela última vez!);


A internet mudou e você?

• As pessoas têm pouco tempo;

• A Internet agora está ao alcance de pessoas de qualquer nível social ou de conhecimento;

• A concorrência cresceu.


A internet tem que mudar?

Sim, 97% dos sites atuais no mundo todo, não são acessíveis e foram projetados em cima das necessidades dos clientes e não dos usuários.

Ou seja, nada de web 2.0, foco no usuário e etc.


Reflexão

• O que você pode fazer pelo usuário?

• Como criar experiências ricas para o usuário?

• Como vou me manter informado o bastante?


ReferênciasDesign de Interação : Além da Interação Homem-ComputadorJennifer Preece

Information ArchitectureLouis Rosenfeld e Peter Morville

Projetando website compatíveisJeffrey Zeldman

Mirando ResultadosRicardo Almeida


Referências

Projetando websites com UsabilidadeJakob Nielsen e Hoa Loranger

Design para a InternetFelipe Memória

Projetando websitesJakob Nielsen

Ergodesign e Arquitetura da InformaçãoLuiz Agner


Referências

Não me faça pensarSteve Krug

WebwritingBruno Rodrigues

Usabilidade na WebCláudia Dias

A cauda longaChris Anderson


Referências

Usabilidoido: www.usabilidoido.com.br

Luiz Agner: www.agner.com.br

Complicado: www.complicado.wordpress.com

Acesso Digital: www.acessodigital.net

FatorW: www.fatorw.com

Revolução e Etc: www.revolucao.etc.br

Tableless: www.tableless.com.br

Planta Baixa: www.plantabaixa.wordpress.com

Petitpois: www.lulileslie.com

experiência do usuário - cefet - rr

Technology