• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Avaliação de interfaces com o usuário atraves de prototipação
 

Avaliação de interfaces com o usuário atraves de prototipação

on

  • 1,419 views

Minicurso Jornada de Informática Bauru/SP

Minicurso Jornada de Informática Bauru/SP
Setembro/2011

Statistics

Views

Total Views
1,419
Views on SlideShare
1,419
Embed Views
0

Actions

Likes
2
Downloads
39
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Avaliação de interfaces com o usuário atraves de prototipação Avaliação de interfaces com o usuário atraves de prototipação Presentation Transcript

    • Avaliação de interfaces com ousuário através de prototipação Livia Gabos – MStech - @liviagabos Talita Pagani – UFSCar - @talitapagani Setembro/2011 1 de 49
    • Agenda• Apresentação• Parte I – Prototipação• Parte II – Avaliação de Usabilidade• Parte III – Atividade Prática• Referências 2 de 49
    • Apresentação• Livia Gabos • Bacharel em Sistemas de Informação pela Unesp/Bauru • Analista de teste na Mstech – sede Bauru • Trabalha com acessibilidade, usabilidade e experiência do usuário • Artigos aceitos no ICEIS e SBQS 3 de 49
    • Apresentação• Talita Pagani • Bacharel em Ciência da Computação pela USC-Bauru • Mestranda em Ciência da Computação na UFSCar • Designer de Interface desde 2005 • Trabalha com usabilidade, qualidade em uso, CSS e HTML • Editora regular do site Tableless – Padrões Web 4 de 49
    • Parte IPROTOTIPAÇÃO 5 de 49
    • Conceito• O que é “Prototipação”? • Projeto rápido da interface e das funcionalidades • Representação dos requisitos • Concepção de fragmentos do sistema • Artefato construído iterativamente• Foco: avaliar resultados obtidos com o protótipo 6 de 49
    • Por que prototipar interfaces?A principal motivação para a construção de protótipos éavaliar interfaces com o usuário de forma a diminuir acarga de trabalho cognitivo, aumentar a facilidade de usoe auxiliar o usuário a realizar tarefas que resultam narealização de seus objetivos. 7 de 49
    • Classificação• Quanto ao detalhamento • Baixa Fidelidade • Média Fidelidade • Alta Fidelidade 8 de 49
    • 9 Protótipo de Baixa Fidelidade de 49Fonte: http://www.uxbooth.com/blog/tools-for-sketching-user-experiences/
    • 10 Protótipo de Média Fidelidade de 49Fonte: http://usabilidoido.com.br/quanto_mais_simples_o_wireframe_melhor.html
    • 11 Protótipo de Alta Fidelidade de 49Fonte: http://www.benjaminkoh.com/gigabit.html
    • Classificação• Quanto ao reuso • Evolucionário • Throw-away 12 de 49
    • Classificação• Quanto à função • Apresentação • Autêntico • Funcional • Sistema Piloto 13 de 49
    • Como é realizada Análise dos resultados ou Coleta de refinamento requisitos do protótipo Avaliação Planejamento (Cliente e/ou e Projeto do usuário) Protótipo Construção 14 do Protótipo de 49
    • Vantagens e Desvantagens Elucida requisitos Melhora a qualidade da especificação Imprecisão sobre o tempo do projeto Omissão de comentários 15 de 49
    • A prototipação em papel• Uma das formas mais utilizadas de prototipação rápida• Baixa fidelidade• Simples confecção• Fácil execução• Economia de tempo e dinheiro• Rápida incorporação de feedback no momento de produção 16 de 49
    • A prototipação em papel• 6 Mitos (Spinelli; Rei, 2011) 1. “Protótipo deve ser bonito”; 2. "Só sei desenhar direto no layout"; 3. "Não parece profissional"; 4. "Meu chefe não irá entender"; 5. "Prototipar depende da plataforma"; 6. "Impossível simular interatividade com papel" 17 de 49
    • 18 Desenhando o protótipo de 49Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/
    • 19 Desenhando o protótipo de 49Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/
    • 20 Simulando as interações da interface de 49Fonte: http://www.flickr.com/photos/21218849@N03/with/3902255728/
    • Parte IIAVALIAÇÃO DE USABILIDADE 21 de 49
    • O que é um teste de usabilidade?• Também chamado de avaliação empírica.• Método para detectar problemas na interação do usuário com um produto.• Metodologia de avaliação de usabilidade (mas apenas uma de muitas!) 22 de 49
    • Apenas para isso?• Nãaaaaooo!• Testes de usabilidade também servem para: • Aprender sobre o comportamento do usuário • Entender como ele se relaciona com o seu produto • Te deixa com um “olhar afiado” para problemas de usabilidade em geral. 23 de 49
    • O que observamos?• Caminho utilizado pelo usuário• Reclamações espontâneas• Expressão facial e gestos• Tempo de execução da tarefa• Avaliação do site ao final 24 de 49
    • Tipos de testes• Formativo / Validativo• Exclusivo / Comparativo• Qualitativo / Quantitativo• Cooperativo / Individual• Livre / Estruturado• Em campo / Em laboratório 25 de 49
    • O que é feito antes do teste?• Definição da metodologia (teste de usabilidade)• Definição dos objetivos e da amostra• Prototipação• Análise heurística (vou falar daqui a pouco)• Criação do roteiro de tarefas• Recrutamento de participantes 26 de 49
    • Análise heurística• Heurísticas são criadas de pesquisas• Define-se procedimento heurístico como um método de aproximação das soluções ideais aos problemas• As heurísticas mais famosas foram criadas por Jakob Nielsen• Fez uma pesquisa com 240 pessoas• 10 heurísticas de Nielsen Oi, tudo bem? 27 de 49
    • Análise heurística1. Visibilidade do estado atual do sistema2. Correlação entre o sistema e o mundo real3. Controle versus liberdade do usuário4. Consistência e Padrões5. Prevenção de Erros6. Reconhecimento ao invés de memorização7. Flexibilidade e eficiência de uso8. Projeto estético e minimalista9. Suporte aos usuários no reconhecimento, diagnostico e recuperação de erros10. Informações de ajuda e documentaçãoFonte: http://www.useit.com/papers/heuristic/heuristic_list.html 28 de 49Vídeo legal! http://www.youtube.com/watch?v=hWc0Fd2AS3s&feature=player_embedded
    • O que é feito antes do teste?• Definição da metodologia (teste de usabilidade)• Definição dos objetivos e da amostra• Prototipação• Análise heurística• Criação do roteiro de tarefas• Recrutamento de participantes 29 de 49
    • Papéis em um teste• Participante/testador • Pessoa que está dentro da amostra definida para o estudo. • Geralmente procuramos pessoas que não trabalham com internet, design ou áreas relacionadas.• Moderador • Fica dentro da sala com o participante, passando as tarefas e fazendo perguntas.• Observador • Fica fora da sala, acompanha e dá suporte ao moderador. 30 de 49
    • Papel do moderador• Explica como vai funcionar a pesquisa• Lê o enunciado da tarefa, no roteiro• Anota problemas, observações• Faz perguntas ao final Poker Face 31 de 49
    • Papéis em um teste 32 de 49
    • Aquecimento para o teste• Boas vindas• Introdução • Como funciona a pesquisa • Falar sobre o ambiente • “Você não está sendo testado.” “Não tem certo e errado.” • Falar sobre o seu papel como moderador 33 de 49
    • Questionário inicial• Serve para: • Confirmar o perfil do testador • Obter informações úteis • Aquecer para as tarefas – não é para ser amiguinho! 34 de 49
    • Tarefas• Moderador lê em voz alta o enunciado da tarefa• Entrega os materiais que o participante vai precisar para fazer as tarefas• Lembre o participante que ele define quanto termina a tarefa• Peça para ele pensar alto. Caso não aconteça naturalmente, estimule ele a falar, fazendo perguntas. • CUIDADO para não ser chato demais! 35 de 49
    • Aquecimento... Voluntário? =D 36 de 49
    • Situações Agora eu não sei o que fazer. É pra clicar aqui?• Você não pode responder as perguntas nem dar dicas!• Cada vez que você explicar alguma coisa para o testador estará perdendo uma oportunidade de descobrir um problema ou uma falha no site.• Também não vale deixar o testador falando sozinho. É importante mostrar que você está interessado em tudo o que ele diz. 37 de 49
    • Situações Agora eu não sei o que fazer. É pra clicar aqui?> “Você faria isso em uma situação real, usando o site na suacasa?”> “Faça como você faria em uma situação real.”> “Você acha que é?”Evite: “Aham” - pode parecer que você concorda ... <- ele pode se sentir desprezado ou continuar olhando para asua cara, esperando uma resposta. 38 de 49
    • Situações• Testador fica em loop, clicando em algo repetidamente, sem prosseguir. Poker FaceRESISTA! AGUENTE!• Faça perguntas, até que ele entenda o que está acontecendo e consiga se virar sozinho 39 de 49
    • Situações n...• Não dê dicas para o participante.• Cuidado com os termos que utiliza.• Tente que ele faça as tarefas sozinho• Se ele desistir da tarefa, anote e se você não for usar a informação para outras tarefas, diga a ele o que ele tinha que fazer.• Faça uma pergunta de cada vez.• A tarefa só termina quando o participante falar que acabou.• Não coloque palavras na boca do participante: “Você achou que foi difícil, né?” 40 de 49
    • Outras questões• O participante deve assinar um termo para a gravação de áudio e vídeo.• Ele deve saber que esse áudio e vídeo serão usados apenas para a pesquisa. 41 de 49
    • Teste de usabilidade comprotótipos em papelhttp://www.youtube.com/watch?v=5Ch3VsautWQhttp://www.youtube.com/watch?v=8PhT0U5uhSI 42 de 49
    • Parte IIIATIVIDADE PRÁTICA 43 de 49
    • Desafio• Aplicativo de busca e reserva de passagens aéreas para dispositivos móveis• Prototipar 2 funcionalidades • Busca de passagem • Compra de passagem • Base: www.decolar.com• Formação de grupos• Depois do protótipo, aplicar teste com moderação. 44 de 49
    • ReferênciasAguiar, Y.; Lula, B.; Lima, C.; Lima, G.; Gouveia, R. “Uso de Protótiposno Processo de Concepção de Interfaces do Usuário”. II Congresso dePesquisa e Inovação da Rede Norte Nordeste de Educação Tecnológica,João Pessoa, 2007.Brown, J. “Methodologies for the Creation of Interactive Software”.Relatório Técnico. Mai. 1996.CEFET-RN/DATINF. “Design, Prototipação e Construção”. 2008.Dutra, L. R. “Paradigmas de Engenharia de Software”. Disponível em:http://www.redes.unb.br/material/Metodologia%20de%20Desenvolvimento%20de%20Software/aula3.pdfOliveira Netto, A. A. “IHC: Modelagem e Gerência de Interfaces com o 45Usuário”. Florianópolis: Visual Books, 2004. de 49
    • ReferênciasPreece, J.; Rogers, Y.; Sharp, H. “Interaction Design: BeyondHuman-Computer Interaction”. New York: John Wiley & Sons,Inc., 2002.PUC-Rio. “Desenvolvimento de Protótipo”. 2005. Disponível em:http://www2.dbd.puc-rio.br/pergamum/tesesabertas/0313143_06_cap_10.pdf.Acesso em: 12 mai. 2011.Sommerville, I. ”Engenharia de Software”. 6ª ed. São Paulo:Pearson, 2005Spinelli, T.; Rei, R. “Design de Interação – além do lápis e papel”. 46 de 49Campus Party (Palestra), 2011
    • Referências• Sobre avaliação de usabilidade em geral• Observing the User Experience: A Practitioners Guide to User Research, Mike Kuniavsky• Handbook of Usability Testing: Howto Plan, Design, and Conduct Effective Tests, Jeffrey Rubin and Dana Chisnell• Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems, Steve Krug• Moderação em pesquisa de mercado• Pesquisa Qualitativa com Texto, Imagem e Som: um Manual Prático, Martin W. Bauer 47 de 49
    • Perguntas? 48 de 49
    • Obrigada!liviagabos@gmail.com / http://twitter.com/liviagabostalita.cpb@gmail.com / http://twitter.com/talitapagani 49 de 49