O documento aborda a importância da usabilidade e experiência do usuário como diferenciais competitivos em projetos digitais. São apresentados casos práticos de aplicações de usabilidade em projetos variados, incluindo corretoras de ações e serviços bancários, destacando a necessidade de foco no usuário para otimizar a navegação e a satisfação. Além disso, o texto discute a acessibilidade e a realização de testes de usabilidade para melhorar a interação do cliente com as plataformas propostas.

1. Oficina de Capacitação – 24 de janeiro de 2008 Usabilidade e Experiência do Usuário Faça da usabilidade um diferencial competitivo em seu negócio digital

2. Ricardo Lima – ricardolimaprojetos@gmail.com Gerenciando um projeto de usabilidade: como obter resultados satisfatórios Usabilidade e Experiência do Usuário

3. A Usabilidade está por todo lado Novas placas de rua em níveis diferentes Formulário de exames em hospital (médico, paciente, hospital, enfermeira) – Por que não, “Assine a linha verde?” Geladeira Torneira com sensor (IBM) / Secador de Mãos (enxugue na calça) Starbucks - bancada (leite quente, frio, açúcar refinado, granulado, orgânico, colher, vanilla, canela etc.) Poupa Tempo (utilização de corredores com cores) DVD pirata com opção de legenda AMARELA (foco no usuário) Celular: Pai e filho (usabilidade relativa) Navegação na internet (Google, o pai da usabilidade)

4. Definição de Usabilidade “ Determina se um produto, sistema ou serviço é eficaz, ou seja, se traz satisfação e se proporciona a experiência perfeita ao usuário!”

5. Profissional de Usabilidade Usabilidade Como é o produto. O que ele faz. Qual o público. Políticas Internas. Áreas envolvidas nas decisões O que o cliente espera Qual o objetivo do cliente ao consumir o produto. Empresa Produto Clientes

6. A Usabilidade e o foco no usuário Foco nos usuários (o que meu usuário quer? como ele usa?) A Usabilidade exige imersão TOTAL na busca da experiência Experiência – De que maneira meu cliente enxerga meu site, minha marca? Qual sua percepção ao ligar, comprar, contactar? 2001 Vídeo - Disposição voltada ao público: Prateleiras com os diretores, Allen, Hitchcock, Rohmer, Kubrick, Truffaut. Corretora de Ações - Páginas de transações que somente um usuário pode produzir e entender (compra, venda, painel de negociação, livro de ofertas etc.) Pequenas Empresas - pagamentos, cobrança, conta corrente etc. Clientes que usam o site como plataforma de trabalho

7. A Usabilidade e o foco no usuário Istockphoto.com – propagandas sazonais (Natal, Hannukah, Ano Novo)

8. A Usabilidade e o foco no usuário NetVibes.com e a USABILIDADE NAS MÃOS DO USUÁRIO

9. Projetos focados em Usabilidade Estruturação de projeto, contemplando a usabilidade em todas as fases: Pesquisa, Benchmarking Usabilidade Conteúdo Principal Seções Arquitetura de Informação / Navegação Design

10. Projetos focados em Usabilidade – Visão Macro Apresentação Técnica (equipe) Como deve ser estruturada a navegação nas atualizações; Documentação com Css, Java, Asp, Banco de Dados, Intarface, fontes, cores, tabelas. Apresentação Geral (equipe, usuário, áreas relacionadas) Objetivo do projeto Qual público Segmento Mercado de inserção

11. CASE 1 - Asset Management Objetivo Atingir público crescente de clientes buscando investimentos por conta própria, sem ajuda dos Gerentes Disponibilizar todas as informações para a tomada de decisão do cliente (composição do fundo, cotas, regulamento, prospecto, rentabilidade diária, mensal, comentários do gestor etc.) Migrar clientes das agências e Central de atendimento para Canais eletrônicos (pessoa física, afluente baixo, pessoa jurídica e private) Público Clientes do Banco que buscam APENAS investir nos fundos de investimento (carteira)

12. CASE 1 - Asset Management Planejamento e execução Pesquisas com clientes (Central de Atendimento/Gerentes) Webtrends (principal acesso pessoa física + Safra Report) Reunião com Asset, Propaganda e Marketing Definição do foco Estruturação da A.I. (Mapa, organização e navegação) Benchmarking (respeitando perfil de cliente) Reunião para aprovação do Mapa Desenvolvimento de Layout (Home + interna) via Wireframe Desenvolvimento Site completo (+ aprovações de texto e propagandas com Jurídico) Apresentação final e ajustes Implementação Atualizações (????)

13. CASE 1 - Asset Management Clientes reclamavam da dificuldade para conseguir ler o conteúdo dentro das caixas. Não sabiam que os itens eram propagandas.

14. CASE 1 - Asset Management Espaço reduzido para leitura e scroll em JavaScript incomodavam (“conteúdo preso!”) “ Menu está apagado!” / “Não parece Menu”

15. CASE 1 - Asset Management Apesar da inserção do homem, a A.I não foi bem aceita. Utilização de Highlight ajudou pouco

16. CASE 1 - Asset Management 1 2 3 1. Novo menu horizontal 2. Propagandas maiores com imagens claras 3. Exibição de notícias atualizadas pela área

17. CASE 1 - Asset Management 1 1 1 1. Distinção de fundos pela cor (Benchmarking + sugestão de clientes)

18. CASE 1 - Asset Management 1 1. Texto “livre”, com possibilidade de impressão 2. Subseções dentro da seção, durante toda a navegação 3. Fale Conosco (dúvidas de investimentos + Treinamento central atendimento) 2 3

19. CASE 1 - Asset Management 1. Rentabilidade no período (aumento da fonte/cliente com calculadora) 1

20. CASE 2 – Pequenas Empresas Objetivo Atingir empresas com faturamento menor, que busquem produtos mais simples e sob medida para sua necessidades do dia-a-dia. Características 60% da carteira. Foco na Segmentação (tendência – Personnalite, BB Estilo, Private). Melhoria nos processos existentes (posterior migração para demais segmentos – JÁ OCORRENDO – Middle e Corporate). Redução de Custos (migrar clientes para a web). Diminuição do envolvimento dos Gerentes (poucos gerentes, muitas empresas). Venda direta e contratação pela internet (estrutura sistêmica). Desenvolvimento direto com o cliente (cortando intermediários)

21. CASE 2 – Pequenas Empresas Método utilizado Benchmarking (baixo custo), análise de clientes do próprio Banco, visitas. Pesquisa com clientes Cliente nunca pagou contas de água e luz pois nunca encontrou a opção de Serviços Públicos no menu. Nunca conseguiu realizar transferência entre contas (PagSafra/Pagamentos a Fornecedores/DOC) Comodidade de realizar envio de cobrança até 20h. Concorrência até 19h. Novos funcionários precisam de treinamento. Dificuldade de encontrar produtos/serviços pelos nomes no Menu (Nomes internos – Arrecadações, Net Autos, Net ID, PagSafra x Nomes de mercado – Tributos, Detran, Token, Pagamentos). Caixa de mensagens usada para mensagens irrelevantes (Gerentes). Tela apertada para quantidade de informações.

22. CASE 2 – Pequenas Empresas Soluções propostas Criação de Menu mais fácil (benchmarking, clientes), expondo todas as seções e subseções (estilo pessoa física). Master e usuários visualizando todas as opções. Descritivos de produtos mais vendedores (nomenclaturas de mercado). Foco nos itens mais apreciados pelos clientes. Criação de "Dicas" e "Você sabia" (dúvidas de clientes via Central PJ e Gerente - horários, feriados, valores máximos). Opção de maximizar, dentro de toda a navegação (clientes utilizando o site como plataforma de trabalho). Pesquisa Webtrends (97% de 800x600, telas menores, sistema complexo).

23. CASE 2 – Pequenas Empresas 1. Novo menu horizontal 2. Uma única propaganda, maior, focando determinado produto/serviço 3. Oferecimento de produtos/serviços secundários 1 2 3

24. CASE 2 – Pequenas Empresas 1. Seções destacadas sempre ao lado esquerdo 2. Textos menores e focados na venda/contratação direta pela internet 1 2

25. CASE 2 – Pequenas Empresas 1. Menu horizontal com mesmas opções institucionais 2. Seções e Sub-Seções abertas (Master e Usuários) 3. Propaganda focada 4. Dicas/Você sabia? 5. Maximizar – Ajuda integrada (para cada serviço) 1 2 3 4 5

26. CASE 2 – Pequenas Empresas 1. Exemplo de tela maximizada (Pagamentos, Cobrança, Recebimentos etc.) 2. Opção de Minimizar 1 2

27. CASE 2 – Pequenas Empresas Antes e depois (Pagamentos) (doc, ted...)

28. CASE 2 – Pequenas Empresas Antes e depois (Pagamentos) (doc, ted...)

29. CASE 2 – Pequenas Empresas Antes e depois (Pagamentos) (água, luz, gás...)

30. CASE 2 – Pequenas Empresas Antes e depois (Pagamentos) (água, luz, gás...)

31. CASE 2 – Pequenas Empresas Antes e depois (Pagamentos) (IPVA, DPVAT...)

32. CASE 2 – Pequenas Empresas Antes e depois (Pagamentos) (IPVA, DPVAT...)

33. CASE 3 – Corretora de Ações Objetivo Atender crescente demanda por investimentos em ações Operações de mercado (Aluguel de Ações, Ofertas Públicas, Clube de Investimento) Tirar clientes da Mesa de Operações (alto custo cliente x operador) Transformar cliente em operador Disponibilizar mais informações para a tomada de decisão do cliente (análise gráfica, fundamentalista, histórico dos papéis, evolução histórica etc.) Criação de site focado em usabilidade e disponibilidade full time Tomar clientes insatisfeitos de outras corretoras (facilidade para transferência de custódia) Público Usuários acostumados com operações de Corretora (compra, venda de ações, análise gráfica etc.) Segmento de Heavy Users (pré-abertura, pregão, after market e análises) Clientes exigentes que operam alto e trazem margem ao Banco

34. CASE 3 – Corretora de Ações Soluções Propostas Treinamento com Central de Atendimento (pré-atendimento) Operador, 3ª instância (web, central e mesa) Linguagem institucional adequada à transacional Acesso direto por site próprio (perfil de cliente que apenas opera) Alterações visuais “sutis”, levando em conta perfil de público (mudança de cores, fontes e estilo) Reorganização cuidadosa da A.I. Pesquisa com clientes Home com Painel de cotações (Bovespa, Dow Jones e Dólar) Informações sobre resultados de Ofertas Públicas (rateio, valor etc.) Valores de corretagem e operação diária Reserva de Ofertas On-line Menos informações, menos caos (percepção concorrência)

35. CASE 3 – Corretora de Ações

36. CASE 3 – Corretora de Ações

37. CASE 3 – Corretora de Ações

38. CASE 3 – Corretora de Ações

39. CASE 3 – Corretora de Ações 1. Menu horizontal 2. Acesso direto, sem precisar acessar a conta pessoa física 3. Propagandas com foco no mercado 4. Perdendo o foco... 5. Painel de Cotações rápido 6. Resultados de Ofertas Públicas, Calendário e afins 1 2 3 4 5 6

40. CASE 3 – Corretora de Ações

41. CASE 3 – Corretora de Ações

42. CASE 3 – Corretora de Ações

43. CASE 3 – Corretora de Ações 1. Informações em tempo real sobre qualquer papel 2. Cotações e Índices atualizados 3. Busca por código ou empresa 4. Maiores Altas (com atalho de compra) 5. Maiores Baixas (com atalho de compra) 1 2 3 4 5

44. CASE 2 – Pequenas Empresas Antes e depois (Menu) Reorganização cuidadosa da A.I. Negociação (compra, venda e painel de negociação) Consultas (Carteira, Ordens, Histórico e Notas de Corretagem) Análises (Econômicas, Cotações, Notícias, Gráficos)

45. CASE 3 – Corretora de Ações

46. CASE 3 – Corretora de Ações 1. Cabeçalho, seguindo linha institucional 2. Itens explicados dentro de cada subseção 3. Sem distinção por empresa prestadora de informação 1 2 3

47. CASE 3 – Corretora de Ações

48. CASE 3 – Corretora de Ações

49. CASE 3 – Corretora de Ações

50. CASE 3 – Corretora de Ações 1. Renovação de cabeçalho, focando em contas e cotação “sempre à mão” 2. Alterações “sutis” de cores, fontes e estilo 1 2

51. CASE 3 – Corretora de Ações

52. CASE 3 – Corretora de Ações ... cores, fontes e estilo...

53. CASE 3 – Corretora de Ações

54. CASE 3 – Corretora de Ações

55. CASE 3 – Corretora de Ações Seguindo preceitos básicos da Web 2.0, porém, de uma maneira diferente...

56. CASE 3 – Corretora de Ações Não está pronto para a WEB 2.0? Adequação dos sistemas Compra de Software etc. Custos... Dê opção ao cliente/usuário

57. Usabilidade – Outras Informações Pop-ups Transações pouco “usáveis” PCDs Acessibilidade (Kit de primeiros socorros) Testes de Usabilidade (minha visão) Banner com foco definido = eficiência Propaganda na web Campanhas e resultados

58. Usabilidade – Outras Informações Pop-ups Regra geral, não utilizar Exemplo: Acesso à conta enquanto pop-up se abre Exceção: Mensagens essenciais (feriados, avisos de segurança, horário de verão) Cuidado com os anti pop-ups Transações pouco “usáveis” Sistema com natureza específica Cliente habituados x novos clientes Criação de Simulador permanente (treinamento) Ajuda integrada (contribuições de clientes) Divisão por tema, palavra-chave etc. Não esqueça da opção de BUSCA (Amazon, Google) Quem sabe a dificuldade do sistema é o CLIENTE!

59. Usabilidade – Outras Informações PCDs Brasil, 25 milhões de deficientes 14,6% da população 57% possuem acesso a computador Cerca de 48% deficientes visuais Lei de Cotas: 1 milhão de vagas 50% das vagas preenchidas Potencial de consumo: R$ 100 bilhões anuais Mercado em ascensão Usabilidade e acessibilidade (PCD cliente, parceiro, funcionário)

60. Usabilidade – Outras Informações Acessibilidade (Kit de primeiros socorros) Alt – Alternative text: propaganda explicada, nome da seção, se abrirá em nova janela, qual tipo de arquivo (pdf, xls etc.), qual o tamanho... Tabindex – Orientando a navegação (priorização dos textos) Input, title – Ex: ddd, telefone. Mensagem, tamanho máximo xxx caracteres Esqueça as animações em flash (ou dê alternativas explicativas) Guias práticos e suas negativas - Não pode frame? Claro que pode...

61. Usabilidade – Outras Informações Testes de Usabilidade (minha visão) Sala fechada, avaliador, questões, sala espelho, câmeras... Think Aloud - Você costuma falar sozinho? Você está certo que seu cliente está à vontade? Há bom desempenho no processo? CUSTOS DOS TESTES! Busque o cliente em seu "habitat natural" Visite seu CLIENTE (486, monitor piscando, barulho, entra e sai de gente, telefone tocando) Case Confecção e Laticínios Não existem condições ideais no dia-a-dia! Pense nisso!

62. Usabilidade – Outras Informações Banner com foco definido = eficiência Aumento de 69% - em média - nos cliques em banners durante grandes campanhas (natal, crianças, namorados, pais, mães) Banner: Questão de credibilidade. Foco, foco, foco... O que meu cliente quer? Sem engano: Banners com boa taxa de cliques, porém, PÉSSIMOS VENDEDORES... Compromisso com os resultados! Banner mais eficiente = o que vende mais!

63. Usabilidade – Outras Informações Propaganda na web Simplicidade e foco; Venda direcionada! O que meu cliente quer e precisa? Importância da segmentação... Case Venda de Crédito Com crédito pré-aprovado Sem crédito pré-aprovado Banner/Cliente PRODUTO GERENTE

64. Usabilidade – Microsoft Surface

65. Usabilidade – Microsoft Surface

66. Usabilidade – Amazon Kindle Amazon Kindle Mesma tecnologia de celulares Facilidade de uso (ao contrário de ler em celulares e PDAs) Ler livros como no papel (luz do sol) Download de livros, jornais, blogs, documentos em geral SD card Preços 3 vezes menores que impresso Acesso à internet Mais info: Youtube ou www.amazon.com

67. Links http://useit.com http://webinsider.uol.com.br http://cetic.br/ (Centro de Estudos sobre T.I e da Comunicação) http://www.guilhermo.com/ http://jumpexec.uol.com.br/ http://usabilidoido.com.br http://www.fmemoria.com.br/ http://www.capes.gov.br/ http://www.netvibes.com

68. Contatos profissionais e pessoais Consultoria, informações, networking e troca de idéias... MSN: [email_address] E-mail: [email_address]

69. Dúvidas? Ricardo Lima – ricardolimaprojetos@gmail.com

70. Obrigado! Ricardo Lima – ricardolimaprojetos@gmail.com