Interfaces Pessoa-Máquina

Interfaces Pessoa-Máquina Marielba Silva de Zacarias Fct I, Gab. 2.69 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. 1-2 3. Interaction Design, J. Preece Cap 7 (Ed. 1), Cap 10 (Ed. 2) 4. Aulas de IPM do IST

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

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

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

CENÁRIOS DO PROBLEMA 5

Cenários do problema Histórias de pessoas e das suas actividades Elementos típicos Um contexto Um ou + actores Um objectivo orientador ou motivante Actividade mental, planos ou avaliação de comportamento Um enredo com acções e acontecimentos Coloca enfase na utilização Necessidades das pessoas, Acções e reacções Expectativas 6

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

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 Tipo de pauta, nº de participantes, etc. Forçar quem está a desenhar a pensar em todos os detalhes que se tornem relevantes 8

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. Reflectir interesse dos utilizadores Ilustrar funcionalidade proposta no contexto do que os utilizadores realmente querem fazer 9

Cenário 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. 10

Cenário 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 Quem são os utilizadores, contexto

Cenário 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 Enunciar aquilo que o utilizador quer fazer e não como deveria fazê-lo

Cenário 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 os temas, o António sugeriu umas pequenas utilizadores alterações na música para que ela ficasse realmente mais querem melódica. fazer Aceite a sugestão do António, todos tiveram que alterar as suas pautas para reflectir a ideia. 16

CENÁRIOS DE ATIVIDADE 17

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

Desenho de cenários Concentrar em tarefas centrais/críticas Usar tarefas seleccionadas na AT Simular tarefas, planos e reacções Sejam criativos nas narrativas Sejam tão específico como nos cenários do problema Reutilizar actores e artefactos para aumentar coerência entre os distintos cenários 19

Exemplo Album de Fotografias (Modelo conceptual) Aplicação para organizar fotografias Metáfora: album 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. Acções: inserir fotos, apagar fotos, acrescentar legenda, etc. Mapeamento: inserir <-> colocar, apagar <-> retirar, legenda <-> nota na margem, etc. 20

Exemplo Album de Fotografia (Cenário de Actividades) 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, incluíndo 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 selecciona um conjunto de fotos e disponbiliza-as num arquivo partilhado, para que a Ana e o António possam dar uma vista de olhos. 21

Exemplo Album de Fotografia (Cenário de Actividades) O João acabou de vir da sua viagem a Pas de La Casa, 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, incluíndo 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 selecciona um conjunto de fotos e disponbiliza-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, 22

Exemplo Album de Fotografia (Cenário de Actividades) O João acabou de vir da sua viagem a Pas de La Casa, 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, incluíndo 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 selecciona um conjunto de fotos e disponbiliza-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 23

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 actividades 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 interacção 24

Do modelo conceptual ao producto final (cont) A nível da Interface Orienta o desenho (o modelo conceptual indica o que a IU deve dar ao utilizador) O desenho da IU converte os conceitos abstractos em elementos gráficos Os cenários de actividade podem ser re-escritos para criar cenários de interacção 25

Do modelo conceptual ao producto final (cont) 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 26

CENÁRIOS DE INTERAÇÃO 27

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

Cenários de interacção (cont) Podem ser usados para: Desenho da IU Perceber rapidamente 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 e editados antes de desenhar toda a IU Bons para explorar casos extremos (+ ou -) 29

Exemplo cenário de interacçã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 seleccionou 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, seleccionando o João a opção de pagar com multibanco. O João passou o multibanco na ranura e introduziu o PIN correspondente. Finalmente, o João carregou no botão <Recibo> para receber um recibo da sua operação 30

Exemplo cenário de interacçã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 seleccionou 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, seleccionando o João a opção de pagar com multibanco. O João passou o multibanco na ranura 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 31

Exemplo cenário de interacção Jenny, the Nuclear Power Plant operator has normal sight and no physical or perceptual impairments. Her shift started at 11pm and it is now 5am in the morning. So far the plant has been operating within normal parameters and the current alarm state is therefore green 1 Jenny notices the core reaction rate has risen very rapidly 2. she realises she must immediately change the reactor target pressure to correct this 3. she goes to the Alarm Control Panel on the far right of the main reactor control panel and presses '+' twice (as it is starting off in green state) 4. the Emergency Confirm button glows red 5. she moves across to the Manual Override panel on the far left of the main reactor control panel

Storyboards I Storyboards are similar to scenarios They illustrate the interaction required to achieve a goal. But instead of using a list of steps, a storyboard visualises the interaction similar to a comic strip.

Storyboards II This storyboard describes how the persona Mary books several employees on the same training course. The board consists of a series of frames. Underneath is a brief description of what Mary does at each step.

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 UI) 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 interacção

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

Resumo Cenários e storyboards são boas ferramentas para descrever como os utilizadoes interagem com o produto. Também complementam casos de uso: Permitem explorar casos paticulares Descobir 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 poduto para mostrar, principalmente a utilizadoes, novatos como realizar tarefas comuns no IU