Experiência do Usuário - CEFET - RR

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?

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:

Acessibilidade Trabalhando 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 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

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ção

Veremos 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ção Veremos 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 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ção Você 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ção Como 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ção Folksonomia 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)

Usabilidade Facilitando 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 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 Bom, vamos clicar em “ Meu cadastro ” e ver o que acontece.

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 intuitiva Você 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ário Este é 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

Conhecendo o usuário Saiba 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.

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ário Conheç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

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

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 futuro O 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;

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!);

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ências Design de Interação : Além da Interação Homem-Computador Jennifer Preece Information Architecture Louis Rosenfeld e Peter Morville Projetando website compatíveis Jeffrey Zeldman Mirando Resultados Ricardo Almeida

SEMINF - CEFET-RR Alexandre Formagio Referências Projetando websites com Usabilidade Jakob Nielsen e Hoa Loranger Design para a Internet Felipe Memória Projetando websites Jakob Nielsen Ergodesign e Arquitetura da Informação Luiz Agner

SEMINF - CEFET-RR Alexandre Formagio Referências Não me faça pensar Steve Krug Webwriting Bruno Rodrigues Usabilidade na Web Cláudia Dias A cauda longa Chris 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