Interfaces Pessoa-Máquina

Transcrição

1 Interfaces Pessoa-Máquina Marielba Silva de Zacarias Fct I, Gab Conceptualizando a Interação III - Cenários Referências: 1. Human-Computer Interaction, A. Dix, Cap. 7 (Ed.2), Cap. 15 (Ed. 3) 2. Task-Centered User Interface Design, C. Lewis and J. Rieman Cap Interaction Design, J. Preece Cap 7 (Ed. 1), Cap 10 (Ed. 2) 4. Aulas de IPM do IST V1.2 Helder Daniel

2 Sumário Problema -> Desenho Modelos conceptuais Conceitos, relações entre conceitos Mapeamento entre conceitos Metáforas e analogias Métricas de usabilidade Desempenho e satisfação Do modelo conceptual ao produto físico Cenários 2

3 Sumário Cenários do Problema Cenários de Atividade Cenários de Interação 3

4 Identificação de necessidades e requisitos dos utilizadores Análise de tarefas Desenho Avaliação Modelos conceptuais Prototipagem 4

5 Identificação de necessidades e requisitos dos utilizadores Análise de tarefas Desenho Avaliação Modelos conceptuais Prototipagem 5

6 CENÁRIOS DO PROBLEMA 6

7 Cenários do problema Histórias de pessoas e das suas atividades Elementos típicos Um contexto Um ou + atores Um objetivo orientador ou motivante Um enredo com ações e acontecimentos Atividade mental, planos ou avaliação de comportamento Coloca enfase na utilização Necessidades das pessoas, Ações e reações Expectativas 7

8 Cenários do problema Resultam da análise de tarefas Constroem-se a partir das tarefas relevantes selecionadas Descrição independente da solução: Atual (se já existe) ou Futura (que se está 8a desenhar)

9 Características dos cenários do problema Enunciar aquilo que o utilizador quer fazer e não como deveria fazê-lo Não existe qualquer referência à IU Ela não existe! O enunciado da tarefa deve ser específico Forçar quem está a desenhar a pensar em todos os detalhes que se tornem relevantes Ex. (pauta mágica) Tipo de pauta nº de participantes, etc. 9

10 Características dos cenários do problema Tarefas devem dizer quem são os utilizadores Desenho pode diferir no público alvo Se possível indicar nomes Permite obter mais informação relevante Características dos utilizadores Profissão, aptidões, experiência, etc. Refletir interesse dos utilizadores Ilustrar funcionalidade proposta no contexto do que os utilizadores realmente querem fazer 10

11 Cenário do problema Pauta Mágica O João, que tem uma banda de garagem, costuma ensaiar com os seus colegas na garagem lá de casa. Durante o ensaio distribuem as pautas pelos vários elementos de grupo e tocam as músicas combinadas. No outro dia, durante a execução de um dos temas, o António sugeriu umas pequenas alterações na música para que ela ficasse mais melódica. Aceite a sugestão do António, todos tiveram que alterar as suas pautas para reflectir a ideia. 11

12 Cenário do problema Pauta Mágica O João, que tem uma banda de garagem, costuma ensaiar com os seus colegas na garagem lá de casa. Durante o ensaio distribuem as pautas pelos vários elementos de grupo e tocam as músicas combinadas. No outro dia, durante a execução de um dos temas, o António sugeriu umas pequenas alterações na música para que ela ficasse mais melódica. Aceite a sugestão do António, todos tiveram que alterar as suas pautas para reflectir a ideia. 12

13 Cenário do problema Pauta Mágica O João, que tem uma banda de garagem, costuma ensaiar com os seus colegas na garagem lá de casa. Durante o ensaio distribuem as pautas pelos vários elementos de grupo e tocam as músicas combinadas. No outro dia, durante a execução de um dos temas, o António sugeriu umas pequenas alterações na música para que ela ficasse mais melódica. Aceite a sugestão do António, todos tiveram que alterar as suas pautas para reflectir a ideia. 13 Quem são os utilizadores, contexto

14 Cenário do problema Pauta Mágica O João, que tem uma banda de garagem, costuma ensaiar com os seus colegas na garagem lá de casa. Durante o ensaio distribuem as pautas pelos vários elementos de grupo e tocam as músicas combinadas. No outro dia, durante a execução de um dos temas, o António sugeriu umas pequenas alterações na música para que ela ficasse mais melódica. Aceite a sugestão do António, todos tiveram que alterar as suas pautas para reflectir a ideia. 14

15 Cenário do problema Pauta Mágica O João, que tem uma banda de garagem, costuma ensaiar com os seus colegas na garagem lá de casa. Durante o ensaio distribuem as pautas pelos vários elementos de grupo e tocam as músicas combinadas. No outro dia, durante a execução de um dos temas, o António sugeriu umas pequenas alterações na música para que ela ficasse mais melódica. Aceite a sugestão do António, todos tiveram que alterar as suas pautas para reflectir a ideia. 15 Enunciar aquilo que o utilizador quer fazer e não como deveria fazê-lo

16 Cenário do problema Pauta Mágica O João, que tem uma banda de garagem, costuma ensaiar com os seus colegas na garagem lá de casa. Durante o ensaio distribuem as pautas pelos vários elementos de grupo e tocam as músicas combinadas. No outro dia, durante a execução de um dos temas, o António sugeriu umas pequenas alterações na música para que ela ficasse mais melódica. Aceite a sugestão do António, todos tiveram que alterar as suas pautas para refletir a ideia. 16

17 Cenário do problema Pauta Mágica O João, que tem uma banda de garagem, costuma ensaiar com os seus colegas na garagem lá de casa. Durante o ensaio distribuem as pautas Ilustrar pelos vários elementos de grupo e tocam as músicas funcionalidade combinadas. proposta no No outro dia, durante a execução de um contexto dos do que temas, o António sugeriu umas pequenas os utilizadores alterações na música para que ela ficasse realmente mais melódica. querem fazer Aceite a sugestão do António, todos tiveram que alterar as suas pautas para refletir a ideia. 17

18 CENÁRIOS DE ATIVIDADE 18

19 Cenários de atividade Criados a partir do modelo conceptual Transformam as atividades correntes com base nas vossas ideias Descrevem novas funcionalidades Incluídas no modelo conceptual Descrição independente da solução da IU 19

20 Desenho de cenários de atividade Concentrar em tarefas centrais/críticas Usar tarefas selecionadas na Análise de Tarefas Simular tarefas, planos e reações Ser criativo nas narrativas Ser tão específico como nos cenários do problema Reutilizar atores e artefactos para aumentar coerência entre os distintos cenários 20

21 Exemplo Álbum de Fotografia (Cenário do problema) O João quando passeia ou vai a eventos tira fotografias com a sua máquina digital Chegado a casa guarda-as no seu computador, adicionando legendas e observações Mais tarde quer mostrá-las ou enviá-las aos amigos e precisa de acede-las por evento, data, etc. 21

22 Exemplo Álbum de Fotografias (Modelo conceptual) Aplicação para organizar fotografias Metáfora: álbum de fotografias Conceitos: Fotos, Data, Legenda, Utilizador, evento, arquivo, arquivo partilhado, etc. Relações entre conceitos: fotos tem data e legenda, arquivo tem fotos, evento capturado com fotos, etc. Ações: inserir fotos, apagar fotos, acrescentar legenda, etc. Mapeamento: inserir <-> colocar apagar <-> retirar legenda <-> nota na margem etc. 22

23 Exemplo Álbum de Fotografia (Cenário de Atividades) O João acabou de vir da sua viagem às Caraíbas, onde esteve com os seus amigos. Chegado a casa, o João tirou a sua nova máquina digital do saco e foi a correr passar as fotografias para o Biblio Photo, o seu programa para organizar e partilhar fotografías. Depois de se autenticar no sistema, o João transferiu os 512MB de fotografias, com todos os momentos bons, incluindo a queda do António. Inseridas as fotos na aplicação o João começa a organiza-las por arquivos e a classifica-las acrescentando legendas e observações em cada uma. Terminadas a classificação, o João seleciona um conjunto de fotos e disponibiliza-as num arquivo partilhado, para que a Ana e o António possam dar uma vista de olhos. 23

24 Exemplo Álbum de Fotografia (Cenário de Atividades) O João acabou de vir da sua viagem às Caraíbas, onde esteve com os seus amigos. Chegado a casa, o João tirou a sua nova máquina digital do saco e foi a correr passar as fotografias para o Biblio Photo, o seu programa para organizar e partilhar fotografías. Depois de se autenticar no sistema, o João transferiu os 512MB de fotografias, com todos os momentos bons, incluindo a queda do António. Inseridas as fotos na aplicação o João começa a organiza-las por arquivos e a classifica-las acrescentando legendas e observações em cada uma. Terminadas a classificação, o João seleciona um conjunto de fotos e disponibiliza-as num arquivo partilhado, para que a Ana e o António possam dar uma vista de olhos. Já descreve as funcionalidades incluindo conceitos do modelo conceptual: Fotos, Data, Legenda, Utilizador, evento, arquivo, arquivo partilhado, 24

25 Exemplo Álbum de Fotografia (Cenário de Atividades) O João acabou de vir da sua viagem às Caraíbas, onde esteve com os seus amigos. Chegado a casa, o João tirou a sua nova máquina digital do saco e foi a correr passar as fotografias para o Biblio Photo, o seu programa para organizar e partilhar fotografías. Depois de se autenticar no sistema, o João transferiu os 512MB de fotografias, com todos os momentos bons, incluindo a queda do António. Inseridas as fotos na aplicação o João começa a organiza-las por arquivos e a classifica-las acrescentando legendas e observações em cada uma. Terminadas a classificação, o João seleciona um conjunto de fotos e disponibiliza-as num arquivo partilhado, para que a Ana e o António possam dar uma vista de olhos. Mas não define ainda a interface 25

26 Do modelo conceptual ao produto final Modelo conceptual como primeiro passo de desenho tem vários benefícios: Léxico de termos a usar na aplicação e na documentação Ex. Célula vs contentor Cenários de atividades Servem para validar o desenho Usados na documentação do produto Servem de guião nos testes de usabilidade Servem de base aos cenários de interação 26

27 Do modelo conceptual A nível da Interface ao produto final Orienta o desenho (o modelo conceptual indica o que a IU deve dar ao utilizador) O desenho da IU converte os conceitos abstratos em elementos gráficos Os cenários de atividade podem ser reescritos para criar cenários de interação 27

28 Do modelo conceptual ao produto final Documentação O modelo conceptual fornece material valioso para a equipa de documentação Processo de desenho Ponto de coordenação central da equipa de desenvolvimento Novos conceitos podem ser adicionados ao modelos (requer consentimento) Depois dos testes pode-se alterar o modelo conceptual 28

29 CENÁRIOS DE INTERAÇÃO 29

30 Cenários de interação São protótipos minimalistas (Sem flexibilidade de interação) Descrevem situações propostas ou imaginadas Descrevem uma única seção de interação Combinam limitações: Dos protótipos horizontais Não se pode interagir com dados reais E dos protótipos verticais Utilizadores não se podem mover livremente pelo sistema (poucas tarefas) 30

31 Podem ser usados para: Desenho da IU Cenários de interação Perceber rapidamente o modo como os utilizadores poderão interagir com futuro sistema Avaliar desenho inicial da IU Sem custos de construir um protótipo Boas ferramentas nas fases iniciais do desenho Criados, discutidos e avaliados antes de desenhar toda a IU Bons para explorar casos extremos 31

32 Exemplo cenário de interação O João dirigiu-se à máquina de vender bilhetes de comboio, escolheu o seu destino carregando no botão físico da máquina correspondente ao Porto, depois selecionou um bilhete de ida e volta carregando na opção correspondente. Quando lhe apareceu um diálogo para confirmar a informação introduzida, o João carregou no botão <OK> e o sistema passou para o ecrã de pagamento, selecionando o João a opção de pagar com multibanco. O João passou o multibanco na ranhura e introduziu o PIN correspondente. Finalmente, o João carregou no botão <Recibo> para receber um recibo da sua operação 32

33 Exemplo cenário de interação O João dirigiu-se à máquina de vender bilhetes de comboio, escolheu o seu destino carregando no botão físico da máquina correspondente ao Porto, depois selecionou um bilhete de ida e volta carregando na opção correspondente. Quando lhe apareceu um diálogo para confirmar a informação introduzida, o João carregou no botão <OK> e o sistema passou para o ecrã de pagamento, selecionando o João a opção de pagar com multibanco. O João passou o multibanco na ranhura e introduziu o PIN correspondente. Finalmente, o João carregou no botão <Recibo> para receber um recibo da sua operação Já descrevem as funcionalidades usando a interface 33

34 Exemplo cenário de interação Jenny, a operadora da central Nuclear, tem visão normal e nenhuma deficiência física ou de perceção. O seu turno iniciou-se às 23:00 e agora são 5:00 da manhã. Até agora a central tem operado dentro dos parâmetros normais e o estado corrente de alarme é assim: verde. 1 Jenny observa que o rácio da reação do núcleo subiu muito rapidamente 2 Ela percebe que tem de alterar a pressão do reator rapidamente, para corrigir isto 3 Ela vai para o painel de controlo do Alarme, no extremo direito do painel de controlo do reator principal, e pressiona + duas vezes (pq tinha iniciado no estado verde) 4 O botão de confirmação de emergência brilha vermelho 5 Ela desloca-se para o painel de controlo manual, no extremo esquerdo do painel de controlo do reator principal,

35 Exemplo cenário de interação Jenny, a operadora da central Nuclear, tem visão normal e nenhuma deficiência física ou de perceção. O seu turno iniciou-se às 23:00 e agora são 5:00 da manhã. Até agora a central tem operado dentro dos parâmetros normais e o estado corrente de alarme é assim: verde. 1 Jenny observa que o rácio da reação do núcleo subiu muito rapidamente 2 Ela percebe que tem de alterar a pressão do reator rapidamente, para corrigir isto 3 Ela vai para o painel de controlo do Alarme, no extremo direito do painel de controlo do reator principal, e pressiona + duas vezes (pq tinha iniciado no estado verde) E em que estado está agora? 4 O botão de confirmação de emergência O brilha cenário vermelho não está 5 Ela desloca-se para o painel de controlo completo manual, no e fica extremo ambíguo. esquerdo do painel de controlo do reator Teria principal, de se detalhar mais

36 Storyboards I As Storyboards são semelhantes aos cenários de interação Ilustram a interação requerida para chegar a um objetivo. Mas em vez de apresentar uma lista de passos, visualiza-se a interação de uma forma semelhante a banda desenhada.

37 Storyboards II Esta storyboard descreve como a pessoa Mary inscreve diversos funcionários na mesma ação de formação. A Storyboard consiste numa série de quadros (frames). Por baixo de cada está uma breve descrição do que a Mary faz em cada passo.

38 Storyboards II Esta storyboard descreve como a pessoa Mary inscreve diversos funcionários na mesma ação de formação. A Storyboard consiste numa série de quadros (frames). Por baixo de cada está uma breve descrição do que a Mary faz em cada passo.

39 Storyboards II Esta storyboard descreve como a pessoa Mary inscreve diversos funcionários na mesma ação de formação. A Storyboard consiste numa série de quadros (frames). Por baixo de cada está uma breve descrição do que a Mary faz em cada passo.

40 Storyboards II Esta storyboard descreve como a pessoa Mary inscreve diversos funcionários na mesma ação de formação. A Storyboard consiste numa série de quadros (frames). Por baixo de cada está uma breve descrição do que a Mary faz em cada passo.

41 Storyboards II Esta storyboard descreve como a pessoa Mary inscreve diversos funcionários na mesma ação de formação. A Storyboard consiste numa série de quadros (frames). Por baixo de cada está uma breve descrição do que a Mary faz em cada passo.

42 Storyboards II Esta storyboard descreve como a pessoa Mary inscreve diversos funcionários na mesma ação de formação. A Storyboard consiste numa série de quadros (frames). Por baixo de cada está uma breve descrição do que a Mary faz em cada passo.

43 Storyboards II Esta storyboard descreve como a pessoa Mary inscreve diversos funcionários na mesma ação de formação. A Storyboard consiste numa série de quadros (frames). Por baixo de cada está uma breve descrição do que a Mary faz em cada passo.

44 Storyboards II Esta storyboard descreve como a pessoa Mary inscreve diversos funcionários na mesma ação de formação. A Storyboard consiste numa série de quadros (frames). Por baixo de cada está uma breve descrição do que a Mary faz em cada passo.

45 Resumo Cenário do problema Resultam da análise de tarefas relevantes Enunciar aquilo que o utilizador quer fazer e não como deveria fazê-lo (o IU não existe) Levam ao modelo conceptual Cenários de atividade A partir do modelo conceptual Incluem conceitos da metáfora (mas não descrevem o IU) Servem para validar o desenho Servem de base aos cenários de interação Servem de guião nos testes de usabilidade Usados na documentação do produto

46 Resumo Cenários de interação protótipos minimalistas (não interativos) Descrevem situações propostas ou imaginadas Descrevem uma única seção de interação Podem ser usados para: Desenho da IU Perceber rapidamente o modo como os utilizadores poderão interagir com futuro sistema Avaliar desenho inicial da IU sem custos de construir um protótipo

47 Resumo Cenários e storyboards são boas ferramentas para descrever como os utilizadores interagem com o produto. Também complementam casos de uso: Permitem explorar casos particulares Descobrir novos casos de utilização Capturar relações entre casos de utilização Podem (e devem) ser também incluídos na documentação que acompanha o produto para mostrar, principalmente a utilizadores novatos como realizar tarefas comuns no IU