Experiência do Usuário - CEFET - RR
-
Upload
alexandre-formagio -
Category
Technology
-
view
3.192 -
download
9
description
Transcript of Experiência do Usuário - CEFET - RR
Experiência do usuário na Web
Alexandre Formagio
Experiência do usuário na Web
Alexandre Formagio
SEMINF - CEFET-RR Alexandre Formagio
Quem é Alexandre Formagio?
SEMINF - CEFET-RR 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.
Experiência do usuário na Web
Mas o que é isso afinal?
Experiência do usuário na Web
Mas o que é isso afinal?
SEMINF - CEFET-RR Alexandre Formagio
Primeiro lugar, a culpa é nossa... vamos admitir os erros?
SEMINF - CEFET-RR Alexandre Formagio
Como são planejados os sites?
SEMINF - CEFET-RR Alexandre Formagio
Mas como eles são usados?
SEMINF - CEFET-RR Alexandre Formagio
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
SEMINF - CEFET-RR Alexandre Formagio
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.
SEMINF - CEFET-RR Alexandre Formagio
Quem precisa de Acessibilidade?
SEMINF - CEFET-RR Alexandre Formagio
O que é Acessibilidade?
Agora que você já sabe quem precisa de
Acessibilidade, vamos imaginar o mundo ao
contrário?
SEMINF - CEFET-RR Alexandre Formagio
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;
SEMINF - CEFET-RR Alexandre Formagio
Exemplos de má Acessibilidade
SEMINF - CEFET-RR Alexandre Formagio
Exemplos de boa Acessibilidade
SEMINF - CEFET-RR Alexandre Formagio
Exemplos de boa Acessibilidade
SEMINF - CEFET-RR Alexandre Formagio
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.“
SEMINF - CEFET-RR Alexandre Formagio
Melhorando a Acessibilidade
• Conhecer as necessidade especiais;
• Seguindo os padrões web e diretrizes da WCAG;
• Testando em situações reais;
SEMINF - CEFET-RR Alexandre Formagio
Testar a Acessibilidade?
• Testando com pessoas deficientes, em diversos navegadores, em palm’s, conexões lentas e etc.
SEMINF - CEFET-RR Alexandre Formagio
Testar a Acessibilidade?
• Validar CSS e XHTML em sites especializados neste ramo, alguns exemplos:
SEMINF - CEFET-RR Alexandre Formagio
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.
SEMINF - CEFET-RR Alexandre Formagio
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
Arquitetura da Informação
Ajudando o usuário a chegar aos seus objetivos
SEMINF - CEFET-RR Alexandre Formagio
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.
SEMINF - CEFET-RR Alexandre Formagio
Arquitetura da Informação
Vejamos alguns exemplos de Arquitetura da
Informação na nossa vida.
SEMINF - CEFET-RR Alexandre Formagio
Organização de mapas
SEMINF - CEFET-RR Alexandre Formagio
Organização de bibliotecas
SEMINF - CEFET-RR Alexandre Formagio
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.
SEMINF - CEFET-RR Alexandre Formagio
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.
SEMINF - CEFET-RR Alexandre Formagio
Erros de Arquitetura da
Informação• Resultados de busca mal organizados;
• Nomes confusos (campos, seções);
• Página desorganizada;
• Performance lenta;
• Navegação inconsistente.
SEMINF - CEFET-RR Alexandre Formagio
Exemplos de Arquitetura da
InformaçãoVeremos a seguir dois exemplos de reformulação de Arquitetura da Informação:
• Tecnisa;
• Sky e-commerce.
SEMINF - CEFET-RR Alexandre Formagio
Exemplos - Tecnisa
Nova interface do site da empresa Tecnisa, mais clean e consideravelmente mais organizado.
Quer saber os resultados?
SEMINF - CEFET-RR Alexandre Formagio
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
SEMINF - CEFET-RR Alexandre Formagio
Exemplos - Sky
Após a reformulação recente, a taxa de conversão de vendas de 0,2% para 50% em 4 meses
SEMINF - CEFET-RR Alexandre Formagio
Exemplos de Arquitetura da
InformaçãoVeremos a seguir alguns exemplos do que o Arquiteto da Informação, é responsável em um projeto.
SEMINF - CEFET-RR Alexandre Formagio
Wireframes
SEMINF - CEFET-RR Alexandre Formagio
Mapa do Site
SEMINF - CEFET-RR Alexandre Formagio
Card-Sorting
SEMINF - CEFET-RR Alexandre Formagio
Conferir métricas
SEMINF - CEFET-RR Alexandre Formagio
Conferir métricas
SEMINF - CEFET-RR Alexandre Formagio
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”
SEMINF - CEFET-RR Alexandre Formagio
SEMINF - CEFET-RR Alexandre Formagio
Melhorando a Arquitetura da
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
SEMINF - CEFET-RR Alexandre Formagio
Exemplos de Arquitetura da
Informação
SEMINF - CEFET-RR Alexandre Formagio
Exemplos de Arquitetura da
InformaçãoVocê deve conhecer um dos estudos relacionados a Arquitetura da Informação mais conhecido hoje, a Folksonomia...
Não sabe o que é isso?
SEMINF - CEFET-RR Alexandre Formagio
Exemplos de Arquitetura da
InformaçãoComo você classificaria a imagem abaixo?
SEMINF - CEFET-RR Alexandre Formagio
Exemplos de Arquitetura da
Informação
SEMINF - CEFET-RR Alexandre Formagio
Exemplos de Arquitetura da
InformaçãoFolksonomia nada mais é do que a classificação de informações pelos próprios usuários.
Exemplo: Flickr, del.icio.us e YoutTube
SEMINF - CEFET-RR Alexandre Formagio
Melhorando a Arquitetura da
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
SEMINF - CEFET-RR Alexandre Formagio
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.
SEMINF - CEFET-RR Alexandre Formagio
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:
SEMINF - CEFET-RR Alexandre Formagio
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)
SEMINF - CEFET-RR Alexandre Formagio
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;
SEMINF - CEFET-RR Alexandre Formagio
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?
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
Conseguiu achar facilmente? Foi intuitivo?
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
Qual é mais fácil fazer o download? Este...
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
Ou este abaixo?
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
Onde posso criar um cadastro no site a seguir? Você consegue encontrá-lo em menos de 10 segundos?
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
Bom, vamos clicar em “Meu cadastro” e ver o que acontece.
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
Alguém conseguiu ver onde é possível se cadastrar?
Não?
Nem eu!
SEMINF - CEFET-RR Alexandre Formagio
Desafio de Usabilidade
Como resolver isto? Fácil...
SEMINF - CEFET-RR Alexandre Formagio
Efeito Las Vegas
Como se concentrar com tanta informação?
SEMINF - CEFET-RR Alexandre Formagio
Boa Usabilidade
Links evidentes
Resultados visíveis
Busca fácil e intuitivaVocê sabe onde está
SEMINF - CEFET-RR Alexandre Formagio
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;
SEMINF - CEFET-RR Alexandre Formagio
Teste de Usabilidade
Veja um pequeno teste de Usabilidade em um “dispositivo móvel”.
SEMINF - CEFET-RR Alexandre Formagio
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
SEMINF - CEFET-RR Alexandre Formagio
Second Life
SEMINF - CEFET-RR Alexandre Formagio
Nintendo Wii
SEMINF - CEFET-RR Alexandre Formagio
IPhone
X
SEMINF - CEFET-RR Alexandre Formagio
Cirque Du Soleil e Blue Man
Group
SEMINF - CEFET-RR Alexandre Formagio
Caixa Econômica
SEMINF - CEFET-RR Alexandre Formagio
Caixa Econômica
SEMINF - CEFET-RR Alexandre Formagio
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
SEMINF - CEFET-RR Alexandre Formagio
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.
SEMINF - CEFET-RR Alexandre Formagio
Conhecendo o Usuário
• 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;
SEMINF - CEFET-RR Alexandre Formagio
Conhecendo o Usuário
• 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
SEMINF - CEFET-RR Alexandre Formagio
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;
SEMINF - CEFET-RR Alexandre Formagio
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
SEMINF - CEFET-RR Alexandre Formagio
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.
SEMINF - CEFET-RR Alexandre Formagio
O que devemos fazer?
• 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;
SEMINF - CEFET-RR Alexandre Formagio
O que devemos fazer?
Trabalhar com a simplicidade, objetividade e facilidade sempre!
Quer exemplos de que isto dá certo?
SEMINF - CEFET-RR Alexandre Formagio
O que devemos fazer?
Google em 1998
Quer exemplos de que isto dá certo?
SEMINF - CEFET-RR Alexandre Formagio
O que devemos fazer?
Google em 2007
SEMINF - CEFET-RR Alexandre Formagio
O que devemos fazer?
Altavista em 1998
SEMINF - CEFET-RR Alexandre Formagio
O que devemos fazer?
Altavista em 2001
SEMINF - CEFET-RR Alexandre Formagio
O que devemos fazer?
Altavista em 2007
SEMINF - CEFET-RR Alexandre Formagio
O que devemos fazer?
Criar diferenciais competitivos, não adianta ser mais um no meio de tantos.
Qual a diferença entre os 2 automóveis abaixo?
SEMINF - CEFET-RR Alexandre Formagio
O que devemos fazer?
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?
SEMINF - CEFET-RR Alexandre Formagio
Quem ganha com o foco no
usuário?Nós que somos usuários, que alcançamos nossos objetivos ao navegar em um site.
SEMINF - CEFET-RR Alexandre Formagio
Quem ganha com o foco no
usuário?Você desenvolvedor, que cria projetos bons e será reconhecido no mercado;
SEMINF - CEFET-RR Alexandre Formagio
Quem ganha com o foco no
usuário?Sua empresa, que será reconhecida por criar projetos úteis e fáceis;
SEMINF - CEFET-RR Alexandre Formagio
Quem ganha com o foco no
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;
SEMINF - CEFET-RR Alexandre Formagio
Quem ganha com o foco no
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
SEMINF - CEFET-RR Alexandre Formagio
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;
SEMINF - CEFET-RR Alexandre Formagio
Desafios para o futuro
• 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;
SEMINF - CEFET-RR Alexandre Formagio
Desafios para o futuro
• Criar experiências ricas, apenas ler não satisfaz mais o usuário;
• Trabalhar sempre focado no usuário (Vale ressaltar pela última vez!);
SEMINF - CEFET-RR Alexandre Formagio
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.
SEMINF - CEFET-RR Alexandre Formagio
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.
SEMINF - CEFET-RR Alexandre Formagio
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?
SEMINF - CEFET-RR Alexandre Formagio
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
SEMINF - CEFET-RR Alexandre Formagio
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
SEMINF - CEFET-RR Alexandre Formagio
Referências
Não me faça pensarSteve Krug
WebwritingBruno Rodrigues
Usabilidade na WebCláudia Dias
A cauda longaChris Anderson
SEMINF - CEFET-RR Alexandre Formagio
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
SEMINF - CEFET-RR Alexandre Formagio