Este documento discute a importância da usabilidade e da prototipação em papel no desenvolvimento de software centrado no usuário. Ele explica como protótipos em papel podem ser usados para explorar ideias, comunicar designs e validar a eficiência de elementos de design antes de investir tempo e recursos em um produto final. Também fornece diretrizes sobre como identificar o que prototipar, criar protótipos em papel, planejar testes com usuários e analisar os resultados para melhorar o design.

1. USABILIDADE COM PAPER PROTOTYPE Prof. Esp. Francisco Gama IF - Sertão PE - francisco.gama@ifsertao-pe.edu.br Prof. Esp. Eudis Oliveira IF - Sertão PE - eudis.oliveira@ifsertao-pe.edu.br

2. Professores Francisco Gama, especialista em Engenharia de Software, professor do Instituto Federal do Sertão Pernambucano, campus Floresta e Engenheiro de Software da STI Fábrica de Software. Eudis Oliveira Teixeira , especialista em Engenharia de Software, professor e coordenador dos cursos de Informática do Instituto Federal de Educação Ciência e Tecnologia – IF Sertão - PE, Campus Petrolina.

3. Minicurso Usabilidade e Prototipação em Papel Este minicurso mostra a importância do design de Interação para o desenvolvimento de software centrado no usuário, principalmente o uso de técnicas de usabilidade e prototipação em papel (paper prototype). Dentre os temas abordados teremos: Conceito e benefícios da usabilidade, ciclo de vida para um projeto com usabilidade, teste de usabilidade, prototipação rápida em papel, exemplos, ferramentas e teste de protótipos.

4. Primeiro Help Desk da História

5. Alguns não precisam de Help Desk http://sorisomail.com http://www.mdblogger.com.br

6. E com o tempo... http://sorisomail.com

7. E com o tempo... http://sorisomail.com http://www.mdblogger.com.br

8. E com o tempo... http://www.mdblogger.com.br

9. E os que não tem tanta facilidade?

10. Maior interação facilitaria? www.vol.com.br

11. Acesso aos conteúdos Garantir o acesso aos conteúdos não passa por ter os conteúdos on-line e um servidor. Existem barreiras funcionais e estruturais que podem dificultar o acesso aos mesmos.

12. Valor do Acesso Maior Usabilidade Maior o Valor

13. Acesso aos conteúdos Quanto mais fechado o acesso à informação, menor será o número de utilizadores que consegue tirar partido da informação, menor a "exposição" dessa informação e por consequência menor o valor da mesma.

14. Acesso aos conteúdos Liquidificador: está em “Eletrodoméstico” ou “Eletroportáteis”? Walkman: está em “Eletrônicos” ou “Eletroportáteis”? Aparelho de DVD: está em “DVDs”“Eletrônicos”? O que é UD? O que tem dentro de UD?

15. Acesso aos conteúdos

16. Acesso aos conteúdos

17. O poder da Usabilidade na Web Em 1998 cerca de 3 bilhões de dólares deixaram de ser ganhos na WEB norte americana por causa de designs mal feitos; Em 2001 os Websites mais conhecidos de comércio eletrônico perderam 65% de suas vendas ; (cerca de 15 bilhões de dólares devido o “carrinho de compras” dos usuários não chegar ao seu destino final (pagamento); Em sites de comércio eletrônicos a interface precisa compensar a ausência do vendedor;

18. O poder da Usabilidade na Web No desenho de produtos ou de software tradicionais o consumidor paga antes e tem experiência com a usabilidade depois ; O Poder É DO CLIENTE: Quem clica no mouse decide tudo. Todos os concorrentes do mundo estão a um simples clique do mouse ; Na Web o usuário experimenta a usabilidade antes e compra depois .

19. O que é USABILIDADE? “ Usabilidade é a medida na qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com eficácia, eficiência e satisfação em um contexto específico de uso.” ISO 9241-11

20. O que é USABILIDADE? O termo usabilidade é utilizado para medir a qualidade das interfaces . Está relacionada com a facilidade de aprendizado, eficiência, memorização, tolerância a erros e a satisfação do usuário (Nielsen, 1993) . Assegurar que algo funcione bem : que uma pessoa com habilidade e experiência médias (ou mesmo abaixo da média) consiga usar este “algo” – seja um site , um avião de caça ou uma porta giratória – de acordo com o propósito dela, sem ficar desesperadamente frustrado. (Krug, 2001) .

21. Tornar mais fácil de usar ?”

22. Atributos associados a Usabilidade Existem vários atributos e metas (critérios) associados à usabilidade e cada software busca enfatizar os que são mais importantes para seus usuários.

23. Atributos da Usabilidade (NIELSON,1993) : Facilidade de Aprendizagem (Interação logo no primeiro momento); Eficiência de uso (Grau de produtividade atingido pelo usuário depois que aprendeu a utilizar o sistema; Facilidade de memorização (Utilizar o sistema novamente após um tempo); Atributos associados a Usabilidade

24. Atributos da Usabilidade (NIELSON,1993) : Baixa taxa de erros (Medida do quando o usuário pode ser induzido ao erro pelo sistema e o quando pode se recuperar do mesmo); Satisfação subjetiva (Medida quando o usuário de sente feliz de esta utilizando o sistema). Atributos associados a Usabilidade

25. Atributos da Usabilidade (NIELSON,1993) : Flexibilidade (possibilidade de acrescentar, modificar funções, medindo a criatividade do sistema de realizar novas tarefas); Produtividade (capacidade de permitir que o usuário seja mais produtivo com a utilização do sistema). Atributos associados a Usabilidade

26. Exemplos de critérios de usabilidade Tempo para completar a tarefa (eficiência); Tempo para aprender a tarefa; Número de erros cometidos ao realizar a tarefa num dado tempo (memorability).

27. Criação de sistemas que sejam: satisfatórios motivadores agradáveis Esteticamente apreciáveis divertidos Incentivadores de criatividade interessantes compensadores úteis Emocionalmente adequados

28. Metas de usabilidade e metas decorrentes da experiência do usuário

29. Metas de usabilidade e metas decorrentes da experiência do usuário Metas de Usabilidade -> São fundamentais para o design da interação e são operacionalizados por meio de critérios diferentes. Metas decorrentes da experiência do usuário -> são subjetivas e menos claramente definidas. Obs. Às vezes dependendo do objetivo do projeto essas metas são contrariadas. É preciso reconhecer o equilíbrio entre as duas metas, levando em consideração a necessidade do usuário. Ex_1: Prego eletrônico (eficiente, agradável e divertido) Ex_2: Sistema de controle de processos (seguro e divertido)

30. ATIVIDADE - USABILIDADE Apresentamos alguns produtos interativos. Quais você acha que sejam as metas de usabilidade e as decorrentes da experiência do usuário em cada um deles. 1. um dispositivo portátil que permite a crianças comunicar-se umas com as outras e brincar com jogos colaborativos. 2. um sistema de vídeo e computador para conferências que permite aos estudantes aprender em casa. 3. uma aplicação da Internet que permite ao público em geral acessar seu prontuário médico através de uma TV interativa. 4. um sistema de CAD para arquitetos e engenheiros. 5. uma comunidade on-line que fornece suporte a pessoas que recentemente tiveram amigos e familiares falecidos.

31. ATIVIDADE - USABILIDADE Comentário: Atividade 1. Esse dispositivo colaborativo deve ser de uso simples, eficaz, eficiente, fácil de aprender a utilizar, engraçado e interessante. 2. Esse dispositivo para aprendizagem deve ser fácil de entender e de utilizar, eficaz, motivador e compensador. 3. Esse sistema pessoal deve ser seguro, fácil de usar e de lembrar como usar, eficaz e eficiente. 4. Essa ferramenta precisa ser fácil de aprender, fácil de lembrar como usar, ter uma boa utilidade, ser segura, eficiente, eficaz, fornecer suporte à criatividade e ser esteticamente agradável. 5. Esse sistema dever ser fácil de aprender, fácil de usar, motivador, emocionalmente adequado e compensador.

32. Princípios de Usabilidade e design Uma outra forma de aprender e conceituar sobre usabilidade é através dos princípios de design. Aspectos mais comuns: 1. Visibilidade 2. Feedback 3. Restrições 4. Simplicidade

33. Princípios de Usabilidade e design 1. Visibilidade -> Princípio que mostra de imediato o procedimento a ser realizado por usuários mediante um produto interativo. Quanto mais visíveis forem as funções, mais os usuários saberão como agir. Ex: Ícones, Botões em Veículos 2. Feedback -> Associado totalmente ao conceito de visibilidade. Refere-se ao retorno de informações a respeito de que ação foi feita e do que foi realizado, permitindo ao usuário continuar com a atividade. Tipos de feedback para o design da interação: Áudio, Tátil, Verbal, Visual ou suas combinações.

34. Princípios de Usabilidade e design 3. Restrições -> Utilizado para determinar as formas de delimitar o tipo de intervenção que pode ocorrer em um determinado momento. Podem ser: Física -> forma como os objetos físicos restringem os movimentos das coisas. Ex: Instalação de um HD, Tomadas externas PC, Pré-requisitos Hardware. Lógica -> Dependem do entendimento como as pessoas tem sobre a maneira como o mundo funciona. Ex: Aviso de chegada de mensagens, desativar opções do menu. Cultural -> No âmbito das convenções aprendidas. Ex: Uso do vermelho para alerta, sinais de áudio, uso de janelas para representação de informações.

35. Princípios de Usabilidade e design 4. Simplicidade -> Nome também dado a usabilidade. Criação de soluções simples e originais. Às vezes “Complicar o simples é fácil” Nielsen propõe que os designers analisem todos os elementos do seu projeto e os removam um a um. Caso ele funcione bem sem um desses elementos, elimine-o.

36. ATIVIDADE - USABILIDADE Tarefa: Colocando em prática alguns conceitos de usabilidade. O objetivo é permitir que você defina as metas decorrentes da experiência do usuário e as metas de usabilidade e que utilize princípios de design e usabilidade para avaliar a usabilidade de um produto interativo. Encontre um dispositivo (p. ex: notebook, celular, etc). 1 . Das suas primeiras impressões, escreva a que primeiro vem a sua mente, a respeito do que é bom ou ruim na maneira como o dispositivo funciona. Liste (i) sua funcionalidade e (ii) variedade de tarefas que um usuário típico poderia querer realizar com o dispositivo. A funcionalidade é maior, igual ou menor do que a desejada pelo usuário?

37. ATIVIDADE - USABILIDADE 2. Compile um conjunto de metas de usabilidade e de metas decorrentes da experiência com o usuário as quais você considera que seriam mais úteis na avaliação do dispositivo. Decida quais são os mais importantes e explique por quê. 3. Transforme as principais metas de usabilidade e decorrentes da experiência do usuário que você selecionou em duas ou três perguntas. Use-as para avaliar se o dispositivo funciona bem (p. ex.: Metas de usabilidade. Que mecanismos específicos foram utilizados para garantir segurança? É fácil aprender a utilizá-los? Metas decorrentes da experiência do usuário: É divertido utilizar os mecanismos? O usuário frusta-se facilmente? Se sim, por quê?). Discuta possíveis melhorias para a interface, baseando-se em sua avaliação de usabilidade.

38. Como é que nunca me ocorreu essa ideia?

39. Como é que nunca me ocorreu essa ideia?

40. Como é que nunca me ocorreu essa ideia?

41. Como é que nunca me ocorreu essa ideia?

42. Como é que nunca me ocorreu essa ideia?

43. Tá difícil ... http://tadificil.wordpress.com/

44. Ciclo de Vida para Projeto com Usabilidade início conhecer usuários e suas tarefas prototipação avaliação de usabilidade protótipo em trabalho produto final

45. Paper Prototype

46. O que são protótipos em papel? Mock-up ou representações de um design. É uma maneira para avaliar um design através de um teste com usuários; Ferramenta de comunicação para facilitar o entendimento de um design; São feitos através de: Esquemas feitos a mão; Foto-copias; Recortes de pedaços de papel Uma combinação criativa de qualquer um dos itens acima

47. Porque usar protótipos em papel? Explorar – Permite testar facilmente diferentes idéias; Comunicar – Apresentar as idéias de forma que pode ser entendida facilmente ; Colaborar- Facilita que todo time de design construa e avalie o protótipo; Validar – Determina a eficiência dos elementos de design e do fluxo de navegação.

48. Quando usar protótipos em papel? Nos primeiros processos de design, porque: As pessoas são menos resistentes a mudança; Foi investido pouco tempo e recursos no projeto; Ainda não se tem clareza de qual a melhor solução.

49. Vantagens dos protótipos em papel Requerem poucos recursos para serem construídos; Construídos com ferramentas simples , que não requerem habilidade especifica; Permite que as ideias sejam testadas nos primeiros estágios do processo de design; São construídos rapidamente; Identifica os maiores problemas de usabilidade de um projeto.

50. Passos para criar um protótipos em papel Identificar o que prototipar; Criar o protótipo; Planejar o teste Conduzir o teste com o usuário; Analisar os resultados; Modificar o design; Refazer o teste.

51. 1 – Identificando o que prototipar Defina as tarefas mais importantes: Tarefas mais comuns ou típicas; Tarefas mais críticas; Tarefas com maior impacto no negócio. Crie um protótipo que permita executar estas tarefas

52. Quais elementos incluir no protótipo em Papel? O protótipo não precisa ser completo; Considere as 3 tarefas prioritárias do projeto e faça um protótipo para testá-las; Comece com conceitos simples e depois evolua para protótipos mais abrangentes ou profundos

53. 2 – Criando o Protótipo Fazer um brainstorming sobre as idéias e conceitos do projeto; Formar times com pessoas de diferentes áreas da empresa (máximo de 6 pessoas); Facilita o entendimento e divide a responsabilidade; Reduz a competição e conflitos; Existe uma base de conhecimento maior; Gera idéias mais criativas.

54. Ferramentas necessárias Papel; Canetas coloridas; Tesoura; Post-it; Durex; Quaisquer outro material de escritório. MUITA CRIATIVIDADE !

55. Exemplos de como criar protótipos

56. Exemplos de como criar protótipos

57. Exemplos de como criar protótipos

58. Exemplos de como criar protótipos

59. Exemplos de como criar protótipos

60. Protótipos em papel 3D Destina a representar um hardware; Avalia a interação do aparelho físico: Telefones celulares; Caixas eletrônicos; Aparelhos de dvd;

61. 3 – Planejando o teste Desenvolva um script com as tarefas que se deseja avaliar; Teste o script com alguns usuários; Recrute usuários para o teste definitivo; Os usuários devem representar os perfis do público alvo; Teste com um pequeno número de usuários (de 4 a 6 usuários); Escolha o local do teste: Formal: Laboratórios de usabilidade com salas com espelho falso. Os observadores ficam atrás do espelho; Informal: Sala de reunião com privacidade. Os observadores ficam na mesma sala

62. 4 – Conduzindo o teste com o usuário O teste com protótipo em papel é semelhante a qualquer outro teste de usabilidade de produto. Peça para o usuário pensar em voz alta; Deixe o usuário interagir com o produto e realizar as tarefas;

63. Pessoas envolvidas com o teste Normalmente quatro pessoas são envolvidas na realização do teste: Facilitador; A pessoa que representa o “computador”; O Usuário; Os observadores.

64. Facilitador É usualmente um especialista em usabilidade; Auxilia o usuário a interagir com o protótipo Explica ao usuário a que se destina o teste; Informar ao usuário que o que sendo testado é o sistema, não o usuário; Passa ao usuário as instruções das tarefas a realizar; Acompanha e intervem quando necessário; Observa e anota como o usuário realizou a tarefa; Senta-se próximo ao usuário.

65. “ Computador” Deve ser uma pessoa familiarizada com o protótipo; Apresenta as telas conforme o usuário interage com o protótipo; Deve sentar-se de frente ao usuário; Dicas: Deve ter um postura neutra e quieta durante toda a sessão de teste; Manter uma linguagem corporal neutra. Não manifestar emoções; Manter as demais folhas do protótipo fora do alcance da visão do usuário; Manter a mesma pessoa representando o computador em todas as sessões de teste.

66. O usuário Interage com o protótipo; Tenta realizar as tarefas; Aponta os elementos que deseja clicar (ex: botões, links); Preenche os campos de formulários; Descreve a ação que vai executar em voz alta e explica o que está sentido com a experiência.

67. Os Observadores Ter no máximo dois observadores na sala de teste; Faça um rodízio de observadores caso tenha mais de dois; Para reduzir barulho, interrupção e distrações O usuário sente-se mais confortável com poucos observadores; É difícil observar o teste com mais de dois observadores; Compartilha suas anotações com o Facilitador ao final de cada sessão; Devem ter cópias do protótipo.

68. Conduzindo o teste com o usuário Antes de começar o teste o Facilitador deve apresentar o projeto ao usuário, explicando com ele deve interagir com o protótipo Explicar de que se trata-se o projeto; Mencionar que o projeto está numa fase inicial Explicar que está se testando o sistema não o usuário; Explicar ao usuário que ele deve executar as tarefas como se estivesse em um computador; Explicar que o usuário deve apontar os elementos que deseja clicar; Explicar que o usuário deve escrever nos campos o que normalmente escreveria se estivesse usando o computador;

69. Conduzindo o teste com o usuário Solicitar ao usuário que ele fale em voz alto o que está pensando sobre o sistema e o que pretende fazer; Dar uma tarefa de cada vez ao usuário e ter certeza que ele a entendeu.

70. Dicas para condução do teste Definir a área onde devem ficar as folhas do protótipo Fazer uma marca na mesa para que as folhas sejam sempre colocadas na mesma posição. Isto facilita a filmagem; Manter o protótipo fora do alcance dos olhos do usuário Os usuários facilmente se distraem ou desejam antecipar suas ações. Por isto o protótipo deve ficar embaixo da mesa ou em outro lugar fora do alcance de seus olhos.

71. 5 – Analisando os Resultados Observar: Modelo mental O protótipo corresponde ao modelo mental do usuário ? Esquema de navegação Existem caminhos que confundem o usuário? Observou-se caminhos onde o usuário se perdeu, baixa confiança, respostas incorretas, desespero ? Conteúdo e linguagem Está apropriado o uso das palavras e da linguagem ? Existem links, termos e rótulos que não são claros ?

72. 5 – Analisando os Resultados Observar: Agrupamento das informações A arquitetura da informação está clara ? O menu está apropriado ? Agrupe as observações semelhantes; Priorize as observações; Quais são as mais importantes ou críticas ? Quais são viáveis ? Faça um relatório; Recomenda-se fazer este relatório em até 24 horas após o final do teste.

73. 6 – Modificando o Design Considerar a viabilidade e o impacto das mudanças; Limitações técnicas; Tempo e dinheiro para implementar; Realizar as mudanças do design que tenham o melhor custo/benefício.

74. 7 – Refazendo o Teste Testar as mudanças propostas e verificar se realmente forma efetiva O teste deve ser feito com os mesmos usuários testados anteriormente e com novos usuário

75. Será que realmente funcionam?

76. Protótipos em papel realmente funcionam? Sim, funcionam Porque a informalidade é contagiante: Os usuários sentem que podem ajudar a melhorar o produto; Os protótipos são fáceis de serem manuseados pelo usuário; Os protótipos indicam claramente que o projeto ainda está numa fase de desenvolvimento; Porque são rápidos e baratos; Não é necessário nenhuma habilidade específica ou ferramenta cara para desenvolver o protótipo; Porque permitem a colaboração de todo o time; Qualquer pessoa do time de projeto, independente da sua formação entende e pode ajudar na construção do protótipo.

77. Teste de Usabilidade Processo no qual usuários representativos avaliam o grau em que um produto se encontra em relação critérios específicos de usabilidade (RUB 94). Servindo para diferentes propósitos: Medição de performance; Encontrar problemas de usabilidade; Recomendações no sentido de melhorias; Finalidade de comparar 2 ou mais produtos.

78. Teste de Usabilidade Material Utilizado Durante a Sessão de Teste Roteiro do Avaliador: Guia de orientação do Avaliador durante a sessão de teste; Descreve o ambiente que será utilizado; As funções do avaliador; O perfil do participante; As tarefas do sistema; Procedimento; A lista dos formulários utilizados.

79. Teste de Usabilidade Material Utilizado Durante a Sessão de Teste Questionário para Identificação do Perfil do Participante : Relaciona informações históricas sobre o participante auxiliando o entendimento de comportamento e performance ; Utilizado pelo avaliador e desenvolvedores que irão avaliar os testes; Dever ser facilmente entendido e preenchido; Deve ser curto (máximo 2 folhas); Baseado em informações que poderão afetar a performance dos participantes.

80. Teste de Usabilidade Material Utilizado Durante a Sessão de Teste Script de Orientação: Comunicação lida aos participantes antes da realização dos testes ; Descreve o que ira acontecer durante a sessão de testes possibilitando uma visão prévia aos participantes ; Deve utilizar uma linguagem mais profissional porém amigável ; Deve conter apresentação do que será realizado, qual objetivo, importância, o que se espera, descrição dos equipamento e recursos utilizados;

81. Teste de Usabilidade Material Utilizado Durante a Sessão de Teste Lista de Tarefas: Conhecido também como “Cenário das tarefas” ; É o trabalho que o usuário executa durante a utilização do produto; Descreve os resultados finais que os participantes devem atingir ; Estados do sistema quando a tarefa for inicial; Mensagens que o usuário verá quando executar a tarefa.

82. Teste de Usabilidade Material Utilizado Durante a Sessão de Teste Instrumentos para Coleta de Dados: Registra os acontecimentos durantes os testes; Intenção de coletar dados concisos e confiantes; Podem ser dados sobre performance ou dados preferenciais; Os dados coletados devem ser claros e diretamente ligada as questões que necessitam ser resolvidas;

83. Teste de Usabilidade Material Utilizado Durante a Sessão de Teste Avaliação do sistema pelo participante: Aplicado após o teste; Objetivo de questionar e coletar informações preferenciais dos participantes; Aprofundando o entendimento do produto, apontando pontos fortes e pontos a melhorar baseados em problemas encontrados; Importante formular perguntas em relação a pontos difíceis de serem detectados, tipo: sentimentos, opiniões e sugestões para melhoria.

84. Teste de Usabilidade Material Utilizado Durante a Sessão de Teste Tópicos para questionamento : Estruturar tópicos de questionamento do participante em relação aos testes realizados ; Questionamentos que a natureza exata depende das circunstâncias encontradas durante cada sessão de testes ;

85. Referências PREECE, J., ROGERS, I., SHARP, H. (2005) – Design de Interação. Além da Interação homem-computador. 1 ed. Bookman. SOMMERVILLE, I. (2007) - Engenharia de Software. 8 ed. Addison Wesley TEIXEIRA, E. O. (2009) – Estilos de Interação em EAD: Microblogging Twitter. Dissertação (Especialização em Engenharia de Software) Faculdade de Ciências Aplicadas e Sociais de Petrolina, FACAPE.