O documento explora a importância da usabilidade no desenvolvimento de projetos interativos, destacando a necessidade de focar nas necessidades do usuário em um contexto de comunicação digital. São discutidos conceitos básicos de usabilidade, papéis de profissionais envolvidos no design e arquitetura de informação, e métodos para testar e melhorar a interação do usuário com sistemas. Através de exemplos práticos e teorias, enfatiza-se a relevância da usabilidade para garantir uma experiência positiva e eficaz para o usuário.

1. Usabilidade Visão e processo para implementar projetos com foco no usuário

2. Por que propusemos tratar do tema Usabilidade neste encontro? Ela foi revisitada? Suas formulações teóricas não fazem mais sentido? Descobrimos que Jakob Nielsen é um estudioso ultrapassado? A web 2.0 implodiu os principais conceitos da disciplina? USABILIDADE: de novo esse tema?

3. NADA DISSO JUSTIFICA! O motivo que nos traz aqui para falar um pouco mais sobre o tema é o fato de a Internet ser considerada, cada vez mais, um ambiente de relacionamento e comunicação para as mais diversas audiências. E isto aponta que: A disciplina precisa ser considerada no desenvolvimento de projetos com uma atenção jamais vista! USABILIDADE: de novo esse tema?

4. Vamos então brevemente recapitular o conceito....

5. http://br.youtube.com/watch?v=sYahB9Ib_SY

6. “ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.” A TAL USABILIDADE

7. “ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.” celulares softwares televisão A maçaneta da minha casa A TAL USABILIDADE

8. “ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.” telespectadores ouvintes internautas Os motoristas A TAL USABILIDADE

9. “ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável.” Hora de ler meus e-mails Acompanhar o sobe e desce da Bolsa de Valores Chegar ao vigésimo andar de elevador A TAL USABILIDADE

10. “ A capacidade de um sistema interativo oferecer a um usuário em um determinado contexto de operação a realização de tarefas de maneira eficaz, eficiente e agradável .” Comprei os ingressos com antecedência pela internet. É baba, vai lá. Esse mapa do metrô não ajuda em nada. E agora, não sei falar japonês?! Filho, como eu faço pra esse celular parar de tocar? A TAL USABILIDADE

11. É por isso que os profissionais que desenvolvem produtos interativos (e eles estão ao nosso redor a todo instante) precisam ter o foco na necessidade do usuário: Em seu jeito de agir Seus hábitos adquiridos ao longo do tempo A sua herança comportamental O que eles querem/esperam da vida Mas nem sempre nossos “usuários” são bem cuidados. Por essas e outras, eu digo: O mundo é difícil de usar A TAL USABILIDADE

12. O mundo de quem precisa lavar as mãos é difícil. O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=xdoc4LaTu_Q

13. O mundo de quem quer sair dos lugares é difícil. O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=66ShiGK21TA

14. O MUNDO É DIFÍCIL... O mundo de quem quer polivitamínicos também é difícil.

15. O mundo de quem quer comprar TV por assinatura é difícil. O MUNDO É DIFÍCIL... http://br.youtube.com/watch?v=zG3wCr7_DWw

16. Para implementar projetos com foco no interesse do usuário e que leve em consideração boas práticas de usabilidade é importante o alinhamento entre 2 profissionais. ATERRISANDO NA WEB... Os arquitetos de informação Os designers

17. OS ARQUITETOS.... Pegam briefings com cliente e entram na dinâmica de seus produtos e serviços. São responsáveis por organizar os conteúdos. O arquiteto é quem veste a fantasia do usuário prevendo seu comportamento de navegação. Ele monta árvores de navegação (info-estruturas), esboços gráficos da página (wireframes) e fluxogramas de processos. Em seu desktop sempre estão abertos o Visio, o PowerPoint, o Mind Manager. É ele quem entrega ao designers páginas que vão precisar ser desenhadas.

18. OS ARQUITETOS.... Um pouco da sua produção: Infoestrutura Wireframes

19. OS DESIGNERS... São repletos de referências visuais. Têm o papel de traduzir visualmente as estratégias digitais do cliente, seja em um site, hotsite, campanha. Definem conceitos de imagens, tipologias, texturas e grafismos. Trabalham ora com referências rígidas de seus clientes (o que muitas vezes gera um certo grau de insatisfação), ora com liberdade total (o job que todos querem!). Na sua mesa, é fácil encontrar uma tablet pra desenhar. No desktop, o Photoshop, o Flash, o Ilustrator, às vezes o 3D Studio Max. Às vezes, o Second Life!

20. OS DESIGNERS... Um pouco da sua produção:

21. E é do encontro entre estes profissionais que nasce as implementações de Usabilidade. Juntos, eles têm a missão de promover: Facilidade de aprendizado - o usuário rapidamente consegue explorar o sistema e realizar suas tarefas; Eficiência de uso - tendo aprendido a interagir com o sistema, o usuário atinge níveis altos de produtividade na realização de suas tarefas; Facilidade de memorização - após um certo período sem utilizá-lo, o usuário não freqüente é capaz de retornar ao sistema e realizar suas tarefas sem a necessidade de reaprender como interagir com ele; Baixa taxa de erros - o usuário realiza suas tarefas sem maiores transtornos e é capaz de recuperar erros, caso ocorram; Satisfação subjetiva - o usuário considera agradável à interação com o sistema e se sente subjetivamente satisfeito com ele. O ENCONTRO

22. O ENCONTRO Quando esse encontro traz bons furtos: Comportamento de menus: Uma aplicação para demonstrar que clique vai levar a página interna (>>) Na outra aplicação (com marcador) fica demonstrado o comportamento de sub-menu (>) Além disso o marcador recebe uma diferenciação de indicação E sub-itens apresentados ganham BG escurecido.

23. Quando esse encontro traz bons furtos: Utilização de ALT’s como forma de: Complementar o label disponível Oferecer uma espécie de preview ao que vai ser encontrado O ENCONTRO

24. Quando esse encontro traz bons furtos: Ao digitar uma página inexistente dentro de um domínio existente COMPORTAMENTO 1: Página de erro do browser. Pouco atrativa! O ENCONTRO

25. Quando esse encontro traz bons furtos: Ao digitar uma página inexistente dentro de um domínio existente COMPORTAMENTO 2: Maior receptividade. Possibilidade de novos caminhos de navegação e interesse. O ENCONTRO

26. Quando esse encontro traz bons furtos: Formas clássicas indicativas de ação: Símbolos de mais e menos. O ENCONTRO

27. Quando esse encontro traz bons furtos: Mecanismo de paginação: Clara identificação de: páginas existentes (4) Quantidade de itens (214) Botões de próximo e anterior “ Over” no botão uma vez que o usuário faz uma determinada ação. O ENCONTRO

28. O ENCONTRO Quando esse encontro traz bons furtos: Utilização de ícones: PONTO POSITIVO: Quando as identificações são de uso popular PONTO NEGATIVO: Ao adotar uma linha visual amparada na criação de ícones, e se começa a expandir para a invenção de formas para os mais diversos temas.

29. Quando esse encontro traz bons furtos: Navegação por abas Bastante positivo para facilitar a visualização de conteúdos numa mesma página. Plataformas desenvolvidas em AJAX permitem que o usuário não carregue a página inteira a cada clique. O ENCONTRO

30. Quando esse encontro traz bons furtos: Consistência e padrões Elementos visuais padronizados ao longo de todo o site, bem como de toda as linhas de produtos da marca corporativa. Menus, Destaques, Brand Image, Padrão de links, Marcadores ect Diminui a curva de aprendizagem do usuário Garante experiência positiva de acessos futuros homepage Ferramentas elétricas Tecnologia automotiva O ENCONTRO

31. Quando esse encontro traz bons furtos: Títulos e boxes A marca-mãe em primeiro plano agregando a ela o nome do serviço/produto a ser apresentado. Garante uniformidade ao longo de toda a navegação. Para o usuário fica “claro” o que são os destaques do site. O ENCONTRO

32. Quando esse encontro traz bons furtos: Identificação por cores Além do menu identificado por cores, o Globo.com traz seus destaques relacionados às áreas também na mesma cor. Com o tempo, o usuário se acostuma com o tom de cada área e se movimenta melhor pelo site. O ENCONTRO

33. Quando esse encontro traz bons furtos: Testeiras (headers) Além de trazer uma experiência mais agradável em termos visuais, ajuda o usuário a se localizar. O ENCONTRO

34. Quando esse encontro traz bons furtos: Agrupamento temáticos Visando orientar a busca por informações. O ENCONTRO

35. O ENCONTRO Quando esse encontro traz bons furtos: Busca por Cloud Tags Para o usuário que deseja fazer uma busca de menor foco, as cloud tags permitem que ele obtenha um overview do que é mais popular dentro de um determinado tema.

36. O ENCONTRO Quando esse encontro traz bons furtos: Dashboard Aplicações de novas tecnologias requerem uma nova curva de aprendizado nova. Uma vez aprendidas, estes novos features só trazem ganhos para os usuários, uma vez que permitem a personalização de sites.

37. Quando esse encontro traz bons furtos: Google Desktop Os documentos vão sendo apresentados a cada nova letra digitada. Permite fazer relações que nem mesmo o usuário imaginasse que pudesse ser feita. O ENCONTRO

38. O DESENCONTRO

39. O DESENCONTRO Agrupamento lógico O Atendimento on-line ao lado do Crédito parcelado? Por que? E essa distância das ações até o footer?

40. O DESENCONTRO Organização visual Para onde ir?

41. O DESENCONTRO Scrol Dois scrolls verticais? Que confusão é essa?

42. O DESENCONTRO Indefinição Escolha uma maneira e vá com ela até o fim!

43. O DESENCONTRO Tela de resposta ao digitar uma palavra-chave na busca e clicar "enter", o usuário vê uma resposta sobre login e senha, referente a outro campo de preenchimento.

44. O DESENCONTRO Perda de navegação Depois de selecionar um deles, o usuário perde toda a navegação.

45. O DESENCONTRO Visualização O Submarino não deixa ordenar por preço. Deixa ordenar por fabricante, por mais vendido, por nome do produto.

46. O DESENCONTRO Labels “ Site index”, neste caso, é o mesmo de “mapa do site”

47. O DESENCONTRO Formulários o usuário tem que usar a tecla tab ou clicar com o mouse para mudar de campo no preenchimento da data.

48. PARA EVITAR... PAPER PROTOTYPE EYE TRACKING CARD SORTING TESTE DE USABILIDADE ANÁLISE HEURÍSTICA 1 2 3 4 5 Com a profissionalização da disciplina e a descoberta de sua importância, o mercado desenvolveu produtos para medir a satisfação do usuário em termos de facilidade de acesso ao site.

49. PARA EVITAR... ANÁLISE HEURÍSTICA 1 Formuladas em 1993 por Jakob Nielsen , este conjunto de descobertas são ainda hoje fundamentais para se identificar falhas de usabilidade. Em geral, este teste é feito por especialistas no assunto, e listam uma série de problemas identificadas em grau de importância. Construir diálogos simples e naturais Falar a linguagem do usuário Minimizar a necessidade de memorização do usuário Manter a consistência Oferecer feedback Identificar claramente as “saídas” Oferecer atalhos Elaborar boas mensagens de erro Evitar a ocorrência de erros Prover ajuda e documentação de apoio

50. PARA EVITAR... TESTE DE USABILIDADE 2 Podem ser realizados em diversas circunstâncias: Teste de usabilidade presencial individual Teste de usabilidade presencial em grupo Teste de usabilidade via telefone Teste de usabilidade via chat

51. PARA EVITAR... TESTE DE USABILIDADE 2 Como se dá: Entrevistador apresenta cenário e tarefas. Usuários discutem melhor forma para realizar atividades propostas. Observador faz anotações e registra comentários.

52. PARA EVITAR... CARD SORTING 3 O processo é feito geralmente antes do início das atividades de Arquitetura de Informação. Os pesquisados são convidados a montarem suas árvores de navegação. Constroem de forma a facilitar o acesso à informação desejada. Considerado altamente eficaz na relação custo x benefício.

53. CARD SORTING ... para um site

54. CARD SORTING ... para um aparelho celular da Apple. http://br.youtube.com/watch?v=RTwfz9x98A8

55. PARA EVITAR... PAPER PROTOTYPE 4 O teste é feito ainda em estágio de wireframes. As páginas impressas são submetidas aos usuários, que registram suas opiniões sobre a formatação das mesmas. Ou, ainda, é possível disponibilizar a ele “elementos de página” e solicitar que o próprio faça a montagem.

56. PARA EVITAR... PAPER PROTOTYPE 4

57. PARA EVITAR... PAPER PROTOTYPE 4

58. PARA EVITAR... PAPER PROTOTYPE 4

59. PARA EVITAR... EYE TRACKING 5 Certamente, o tipo de teste de maior investimento. Mediante tarefas oferecidas ao usuário, ele observa o site com tendo o movimento de seus olhos monitorados. Alta eficiência! Algumas conclusões dos estudos (modelo F ): Usuário primeiro lê um movimento horizontal, geralmente a parte de conteúdo superior. Próximo, usuários descem um pouco e lêem o segundo movimento horizontal Em seguida, scaneiam o conteúdo da esquerda em um movimento vertical

60. PARA EVITAR... EYE TRACKING 5

61. PARA EVITAR... EYE TRACKING 5

62. PARA EVITAR... EYE TRACKING 5

63. PARA EVITAR... EYE TRACKING 5

64. PARA EVITAR... EYE TRACKING 5 Algumas recomendações: Usuários não lêem seu texto inteiramente palavra-por-palavra . Leitura exaustiva é rara! Os dois primeiros parágrafos devem conter informações mais importantes Técnica da pirâmide invertida : Inicie cabeçalhos e parágrafos com informações chaves que conduza usuários a escanear verticalmente o conteúdo.

65. http://www.guilhermo.com/ http://tadificil.wordpress.com/ http://www.dontclick.it/ http://www.usability.com.br/usabilidade.html http://www.usabilidoido.com.br/ http://www.boxesandarrows.com/ ALGUNS LINKS

66. OBRIGADO! Maurício Moreira [email_address] [email_address]