interacção humano-computador - universidade de …braposo/relatorio_1.docx · web...

Interacção Humano-Computador

Activity DesktopRelatório do Projecto

Março 2008 – DEI/FCTUC

Interacção Humano-Computador Activity Desktop

Índice

Autores...................................................................................................................3

Análise de cenários.................................................................................................3

Cenário 1 – Médico.............................................................................................................................................3

Cenário 2 – Estudante.......................................................................................................................................3

Cenário 3 – Trabalhador-estudante............................................................................................................4

Cenário 4 – Engenheiro....................................................................................................................................4

Cenário 5 – Bancário..........................................................................................................................................4

Cenário 6 – Professor Universitário............................................................................................................5

Análise de Utilizadores e Tarefas.............................................................................6

Aplicação da Metodologia OVID..............................................................................6

Identificar os Objectos......................................................................................................................................7

Desenhar as Vistas..............................................................................................................................................7

Redefinir Tarefas.................................................................................................................................................7

Tabela de Interacções........................................................................................................................................8

Anexo A – Análise das Tarefas.................................................................................9

Anexo B – Modelos das Tarefas.............................................................................11

Anexo C – Vistas....................................................................................................17

Anexo D – Modelos Refinados das Tarefas............................................................27

Anexo E – Tabela de Interacções...........................................................................32

2 de 34


AutoresBernardo Raposo – 501062834

João Sá Borges – 501062853

Ana Sofia Reis

Tiago Pina

Jorge Sousa

David Carvalho

Análise de cenáriosNo início do projecto foram estudados alguns cenários hipotéticos que, apesar de não terem

como objectivo demonstrar aplicações práticas do projecto, são muito importantes para a

contextualização do mesmo.

A nossa análise baseou-se nos seguintes cenários.

Cenário 1 – MédicoUm médico chega ao seu Laptop e selecciona o modo Hospital. Neste modo abre o seu cliente de

e-mail e visualiza todos novos e-mails relacionados com o Hospital onde trabalha.

Lembra-se de que tem de fazer um documento relacionado com um congresso. Abre então o seu

programa de edição de texto e começa a redigir o mesmo. Para completar o documento abre a

pasta Meus Documentos, no qual vê apenas as pastas relacionadas com o Hospital, e abre um

segundo documento de que precisava. Ao terminar o primeiro documento, grava-o nos meus

documentos, o qual é gravado numa pasta pertencente ao grupo de pastas do Hospital.

Em seguida, o médico muda para o modo Clínica. Estando neste modo, abre de novo o seu cliente

de e-mail e vê apenas os e-mails relacionados com a sua Clínica privada.

Cenário 2 – EstudanteUm estudante chega ao seu Desktop e acede ao modo Lazer. Neste modo abre o seu browser e

como Homepage vê o seu Website preferido, um site de filmes. Após dar uma vista de olhos pelo

Website lembra-se que tem de acabar rapidamente um trabalho cujo prazo de entrega acaba

nesse dia até à meia-noite. Muda então para o modo Universidade e acede ao seu cliente de e-

mail, através do qual recebe e-mails relacionados com a Universidade. Vê rapidamente um e-mail

que um colega de grupo lhe enviou. Após ver esse e-mail abre a pasta Meus Documentos, no qual

vê apenas documentos relacionados com a Universidade e abre o relatório que está por

3 de 34


completar. Ao terminar o relatório, abre o cliente de e-mail e envia o relatório através do e-mail

da Universidade para o professor da cadeira.

Cenário 3 – Trabalhador-estudanteUm trabalhador estudante de engenharia informática está no seu posto de trabalho a

desenvolver um software para o cliente X. Está no seu IDE preferido quando encontra uma

dúvida de programação e lembra-se que já tinha efectuado um trabalho semelhante para o

cliente Y, passa para o desktop destinado ao cliente Y e procura a resolução do problema, mas

não encontra porque o problema era ligeiramente diferente. Altera então o seu desktop para o

desktop “escola” e vai ver aos apontamentos das aulas. Volta a aceder ao desktop do cliente X,

resolve o problema e continua a desenvolver a aplicação.

Cenário 4 – EngenheiroUm professor/engenheiro chega a casa após um dia de aulas com necessidade de relaxar um

pouco e decide ouvir o novo álbum sobre o qual os seus colegas tanto falaram. Para tal dirige-se

ao seu computador e compra o álbum on-line em formato digital. Ao mesmo tempo tem também

disponível a possibilidade de procurar que filmes estão em exibição.

Enquanto desfruta do novo ambiente musical e vê a informação do filme que irá ver no próximo

fim-de-semana, recebe alerta de nova mensagem na mailing-list do seu grupo de amigos que o

convida para mais uma noite de descontracção. Tem também disponível aquele jogo que tanto

tempo por vezes lhe consome. Contudo, não tem tempo para pegar nele, pois ao descontrair,

lembra-se que necessita de rever a conclusão do artigo que elaborou para a conferência que se

aproxima. Acto contínuo, muda para um novo ambiente em que lhe são apresentados os acetatos

das aulas e trabalhos de alunos a avaliar, bem como artigos que escreveu e projectos da empresa

em que trabalha .

Enquanto edita o artigo, são-lhe apresentados alertas referentes a mensagens sobre novas

tendências tecnológicas, assim como uma mensagem do seu gestor de projecto da empresa. Após

a revisão do artigo tem ainda tempo para alterar o módulo que o gestor fez questão de frisar

veementemente ser necessário estar pronto até amanhã.

Ainda assim, quando a sua mulher entra no escritório, tem ainda tempo para voltar a mudar de

ambiente e aceder ao pedido dela para gravar as fotos do último jantar de família, juntamente

com as restantes fotos de passeios e viagens ao estrangeiro. Ao ver o seu irmão, há algum tempo

no estrangeiro, disponível no IM, decide dar-lhe uma palavrinha. Antes de jantar tem ainda

tempo para ler o e-mail cómico que o filho lhe enviou.

Cenário 5 – BancárioUm trabalhador de um banco está num posto de trabalho no desktop “Caixa”, quando é abordado

por um cliente que tem dúvidas quanto a investir na bolsa, nesse momento o trabalhador

4 de 34


facilmente altera o seu desktop “Caixa” para o seu desktop “Bolsa” fornecendo ao cliente

informações sobre os melhores investimentos. O cliente não satisfeito pretende então investir em

algo mais seguro e apostar num plano de poupança, nesse mesmo instante, o trabalhador alterna

para o seu desktop “Planos e Investimento”. Depois de saber todas as alternativas o cliente

decide que o banco não satisfaz as suas necessidades e pede para liquidar a sua conta. O

trabalhador então regressa ao desktop “Caixa” e procede a operação. Quando chega a sua hora de

intervalo o trabalhador alterna para o seu desktop “pessoal” e usa uma aplicação de IM para falar

com a sua esposa e dizer que está a ter um dia difícil no trabalho.

Cenário 6 – Professor UniversitárioO António é um professor universitário que utiliza o seu portátil para o auxiliar no seu dia-a-dia.

Quando chega ao campus da universidade, ao conectar-se à rede do mesmo, o sistema altera

automaticamente para o contexto "Trabalho" permitindo-lhe ter apenas a informação que lhe é

relevante para o seu trabalho. Assim, sentado no seu gabinete, começa a corrigir os trabalhos dos

seus alunos que estão guardados no disco do seu portátil. Como se encontra dentro do ambiente

definido como "Trabalho", pode aceder facilmente aos ficheiros que estão catalogados como

pertencentes a esse ambiente, sem perder tempo à procura dos ficheiros por todo o disco.

A meio do seu trabalho é interrompido por um telefonema de um familiar que lhe pede para

enviar as fotos do almoço de família do fim-de-semana passado. Felizmente, não tem de fechar

nenhuma das aplicações uma vez que é possível mudar de ambiente no seu portátil para o

contexto "Família". Dentro desse novo ambiente, o António abre o seu explorador de fotos

favorito que lhe apresenta apenas aquelas que estão relacionadas com o seu contexto familiar.

Selecciona as fotos do almoço de família e opta por enviá-las por email. O seu cliente de email já

se encontrava aberto, no entanto ao mudar de ambiente, tem ao seu dispor apenas os contactos

dos seus familiares para que possa aceder rapidamente aos mesmos. Enquanto envia as fotos,

recebe uma notificação do sistema a avisar que recebeu um novo email pertencente a um

contexto diferente, neste caso o seu ambiente "Lazer". Como ainda restam alguns minutos até

estar completado o envio das fotos, muda então para o ambiente "Lazer" para verificar a

mensagem recebida. Esta pertence a uma mailing list de banda desenhada japonesa, um dos seus

passatempos favoritos. Depois de ler a mensagem e já que se encontra neste ambiente, utiliza o

seu agregador de RSS para saber os últimos resultados da liga italiana de futebol a decorrer

naquele dia.

Entretanto recebe uma nova notificação do sistema que lhe avisa que as suas fotos já foram

enviadas, muda então para o ambiente "Família" para confirmar o envio das mesmas. Estando

tudo correcto, muda mais uma vez de contexto para dar continuidade ao trabalho que estava a

fazer. De volta ao ambiente "Trabalho", todos os documentos e aplicações estão exactamente no

mesmo estado em que as tinha deixado aquando da interrupção do seu familiar.

5 de 34


Mais tarde ao chegar a casa, conecta-se com o seu portátil à sua rede particular e mais uma vez o

sistema muda automaticamente de contexto, mas desta vez para o ambiente "Casa". Neste

ambiente procura ler um pouco sobre as notícias do dia, uma vez que esteve todo o dia a

trabalhar e não teve tempo de se actualizar. Para tal utiliza o seu navegador de internet que tem

definido os seus sites favoritos dentro do contexto que está a utilizar. Assim consegue aceder

imediatamente aos sites dos principais jornais nacionais, sem ter de pesquisar em toda a sua lista

de favoritos. Entretanto, enquanto lê as notícias do dia, lembra-se do compromisso que guardou

na agenda do portátil e sincroniza então a agenda do seu telemóvel com a agenda que está

definida no ambiente "Trabalho".

Análise de Utilizadores e TarefasApós o estudo destes cenários, cada elemento do grupo fez uma análise mais pormenorizada ao

seu cenário de forma a destacar as tarefas realizadas em cada um dos casos estudados. Esta

análise permitiu-nos construir a seguinte tabela que mostramos em anexo (Anexo A).

Esta tabela é de grande importância pois permite-nos, não só analisar as tarefas que cada

utilizador pode efectuar, mas também classificá-las em termos de importância e frequência de

utilização desse mesmo utilizador. Isto será muito útil no desenvolvimento futuro para

desenvolver uma aplicação que irá de encontro às verdadeiras necessidades dos utilizadores.

Para a continuação do trabalho foi necessário escolher um tipo de utilizador, para que fosse mais

simples e intuitivo de perceber. Tendo só um tipo de utilizador em mente foi-nos mais fácil

especificar as tarefas e tentar encontrar as necessidades deste tipo de utilizador e que mais à

frente poderão ser usadas por outro tipo de utilizador.

No nosso caso, decidimos usar o Professor Universitário como modelo, pois achámos que seria o

cenário em que havia uma maior polivalência de contexto e nos permitia uma análise mais

completa do projecto.

Aplicação da Metodologia OVIDA metodologia OVID (Object View Interaction Design) atravessa um conjunto de passos para a

elaboração de interfaces de utilizador orientadas a objectos. Esta metodologia personifica a

mudança de um design de interfaces baseado na arte, para um design de interfaces mais

objectivo e científico, privilegiando as interacções com o utilizador.

Antes de passarmos à aplicação da metodologia OVID, necessitamos de fazer uma análise mais

completa às tarefas que referimos anteriormente. Desta forma passamos à decomposição das

tarefas em passos mais concretos de forma a podermos identificar alguns elementos que serão

importantes para a aplicação da metodologia. Para esta decomposição, usámos a ferramenta

6 de 34


ConcurTaskTree Environment (CTTE) que facilita a elaboração de uma análise hierárquica de

tarefas e permite a criação de modelos para a mesma.

Os modelos resultantes desta análise são também disponibilizados em anexo (Anexo B).

Identificar os ObjectosO primeiro passo da metodologia OVID é identificar os objectos que estão ligados às tarefas que

analisámos anteriormente. Para tal, recorremos a um diagrama de classes ao nível conceptual

para identificarmos não só os objectos, mas também a forma como este se agrupam e se ligam

entre si.

Para esta análise é feita uma ordenação das tarefas por frequência de utilização, para desta forma

encontrar quais os objectos mais concretos da aplicação e quais as relações mais fortes entre os

mesmos.

O diagrama resultante da nossa análise foi o seguinte:

Desenhar as VistasDepois de identificarmos os objectos presentes na interface surge então o primeiro esboço do

aspecto visual da aplicação. Neste passo não interessa tanto a composição artística dos elementos

da interface, mas sim identificar o tipo de objectos necessários para realizar as tarefas analisadas.

Para além disso, ajuda a que no desenvolvimento da aplicação, se possam identificar claramente

quais são as vistas que servirão de base para a aplicação e quais é que necessitam de um design

particular.

Em anexo podem ser analisadas as vistas elaboradas para esta fase (Anexo C).

7 de 34


Redefinir TarefasCom a elaboração dos dois passos anteriores, verificamos que algumas tarefas sofreram

alterações e que outras surgiram para responder a necessidades levantadas entretanto. Assim,

redefinimos as tarefas para obter uma análise mais de acordo com aquilo que foi desenhado e

identificado nos pontos anteriores.

O resultado deste redefinição pode ser visto em anexo (Anexo D).

Tabela de InteracçõesO último passo do ciclo da metodologia OVID passa pela elaboração de uma tabela que descreva

as interacções entre o utilizador e os objectos da interface desenhada nos passos anteriores. Este

processo é muito importante pois permite simular o contacto de um utilizador com a aplicação e

assim identificar as interacções com os objectos.

Da nossa análise resultou a tabela que está definida em anexo (Anexo E).

8 de 34


Anexo A – Análise das TarefasMatriz de Caracterização de Utilizador

Utilizador Professor Univ. Médico Estudante Engenheiro AdvogadoE1 - Computação 3 2 4 5 2E2 - Domínio 3 1 3 4 1E3 - Ap. Similares 2 1 4 2 1

Matriz de Caracterização de Tarefas

Tarefas Freq/Importância Adicionar contexto 1 / 3 1 / 4 2 / 4 1 / 3 1 / 2Modificar contexto 1 / 2 1 / 4 3 / 5 1 / 2 1 / 1Apagar contexto 1 / 3 1 / 3 1 / 3 1 / 3 1 / 2Adicionar aplicação ext. ao contexto 2 / 4 2 / 5 3 / 5 2 / 4 1 / 3Remover aplicação ext. do contexto 2 / 4 2 / 4 2 / 5 2 / 4 1 / 3Mudar aplicação ext. de contexto 1 / 3 1 / 4 2 / 5 1 / 3 1 / 2Associar ligação de rede a um contexto 1 / 4 1 / 5 2 / 5 2 / 5 1 / 3Desassociar ligação de rede 1 / 3 1 / 4 1 / 4 1 / 4 1 / 2Catalogar ficheiros para um contexto 4 / 4 3 / 5 2 / 5 4 / 5 4 / 5Alterar label do ficheiro 3 / 3 2 / 3 3 / 3 3 / 3 2 / 2Retirar label do ficheiro 2 / 3 2 / 5 1 / 3 1 / 3 1 / 2Definir grupos de contactos para cada contexto 2 / 3 2 / 4 4 / 5 4 / 5 3 / 4Adicionar contacto ao grupo 1 / 3 2 / 4 5 / 5 3 / 4 3 / 4Mudar contacto de grupo 1 / 3 1 / 3 2 / 5 1 / 3 1 / 2Remover contacto do grupo 1 / 3 1 / 3 2 / 5 1 / 3 1 / 2Definir lista de favoritos para contexto 2 / 4 2 / 3 3 / 5 3 / 4 2 / 3Adicionar link à lista 3 / 4 2 / 3 4 / 5 3 / 4 2 / 2

9 de 34


Remover link da lista 1 / 2 1 / 2 1 / 4 2 / 4 1 / 2Adicionar feed RSS ao contexto 2 / 3 1 / 2 3 / 3 2 / 4 1 / 3Mudar feed RSS de contexto 1 / 2 1 / 1 1 / 2 1 / 3 1 / 2Remover feed RSS do contexto 1 / 2 1 / 1 1 / 2 1 / 3 1 / 2Definir agenda para contexto 2 / 3 4 / 5 3 / 5 2 / 5 2 / 4Remover agenda do contexto 1 / 2 2 / 4 1 / 3 1 / 3 1 / 2Adicionar pastas a um contexto 3 / 4 2 / 5 4 / 5 3 / 4 2 / 3Remover pastas a um contexto 2 / 3 2 / 4 3 / 4 2 / 4 1 / 3Proteger o acesso a um contexto 2 / 4 1 / 3 4 / 4 1 / 4 1 / 3Retirar protecção de um contexto 1 / 3 1 / 3 2 / 3 1 / 4 1 / 3Abrir aplicação 3 / 5 5 / 5 4 / 5 3 / 5 3 / 5Fechar aplicação 3 / 5 5 / 5 4 / 5 3 / 5 3 / 5Abrir aplicação externa 4 / 5 3 / 5 4 / 5 4 / 5 4 / 5Fechar aplicação externa 4 / 5 3 / 5 4 / 5 4 / 5 4 / 5Mudar de contexto/ambiente 3 / 5 3 / 5 5 / 5 4 / 5 3 / 4

10 de 34


Anexo B – Modelos das TarefasAdicionar aplicação externa

Adicionar contacto

Adicionar contexto

Adicionar feed

11 de 34


Adicionar link

Adicionar pasta

Alterar ficheiro

Apagar contexto

Associar ligação de rede

12 de 34


Catalogar ficheiro

Configurar feeds

Definir favoritos

Definir grupo

Desassociar ligação de rede

13 de 34


Desproteger contexto

Modificar contexto

Mudar contacto

Mudar aplicação de contexto

Proteger contexto

14 de 34


Remover aplicação externa

Remover contacto

Remover feed

Remover ficheiro

Remover link

15 de 34


Remover pasta

16 de 34


Anexo C – Vistas

17 de 34


18 de 34


19 de 34


20 de 34


21 de 34


22 de 34


23 de 34


24 de 34


25 de 34


26 de 34


Anexo D – Modelos Refinados das TarefasAdicionar aplicação externa

Adicionar contacto

Adicionar contexto

Adicionar feed

Adicionar ficheiro

27 de 34


Adicionar link

Adicionar protecção do contexto

Associar ligação de rede ao contxto

Configurar feeds

Executar aplicação externa

28 de 34


Modificar contexto

Mudar aplicação de contexto

Remover aplicação externa

Remover contacto

Remover contexto

29 de 34


Remover feed

Remover ficheiro

Remover ligação de rede

Remover link

Remover protecção do contexto

30 de 34


Sair da aplicação

31 de 34


Anexo E – Tabela de Interacções

Vista Acção Rato / Teclado ResultadoPreferências News Feeds Abrir menu News Feeds Rato: Um click botão esquerdo Mostra menu e lista de feeds

Subscrever Feed

Escolher Subscrever feed Rato: Um click botão esquerdo Mostra Form com campos Nome e URLe botões Cancel e OK

Preencher campo Nome Rato: Um click botão esquerdo; Teclado: escrever Preenche campo com texto escrito

Preencher campo URL Rato: Um click botão esquerdo; Teclado: escrever Preenche campo com texto escrito

Escolher OK Rato: Um click botão esquerdo Desaparece Form; Adiciona nova feed à lista de feedsEscolher Cancel Rato: Um click botão esquerdo Desaparece Form

Remover subscriçãoMostrar opções sobre feed Rato: Um click botão direito Mostra lista de opçõesEscolher Remover subscrição Rato: Um click botão esquerdo Desaparece subscrição da lista

Alterar subscrição Escolher Alterar feed Rato: Um click botão esquerdo Mostra Form com campos Nome e URLe botões Cancel e OK

Listar aplicações Abrir menu Aplicações Rato: Um click botão esquerdo Mostra icons das aplicaçõesPreferências Aplicações Mostrar opções sobre aplicação Rato: Um click botão direito Mostrar lista de opções

Mudar aplicação de contextoEscolher Mudar contexto Rato: Um click botão esquerdo Mostrar lista de contextos

Escolher contexto Rato: Um click botão esquerdo Desaparece lista de contextos, lista de opções e icon da aplicação

Listar contactos Abrir menu Contactos Rato: Um click botão esquerdo Mostra lista contactos, agrupados por grupos, e lista de opções

Preferências do contacto Mostrar opções sobre contacto Rato: Um click botão direito Mostra lista de opçõesAdicionar contacto Escolher Adicionar contacto Rato: Um click botão esquerdo Mostra Form com campos Nome, Tipo de Conta,

Conta, Detalhes e botões Cancel e OK

32 de 34


Preencher campo Nome Rato: Um click botão esquerdo; Teclado: escrever Preenche campo com texto escrito

Preencher campo Conta Rato: Um click botão esquerdo; Teclado: escrever Preenche campo com texto escrito

Preencher campo Detalhes Rato: Um click botão esquerdo; Teclado: escrever Preenche campo com texto escrito

Escolher Tipo de Conta Rato: Um click botão esquerdo Destaca opção escolhidaEscolher OK Rato: Um click botão esquerdo Desaparece Form; Adiciona nova feed à lista de feedsEscolher Cancel Rato: Um click botão esquerdo Desaparece Form

Escolher contextoVer informação do contexto Rato: Hover sobre icons Destaca icon e mostra informação respectivaMudar de contexto Rato: Um click botão esquerdo Abre contexto escolhido

Preferências contexto ePreferências de um contextoe Modificar contexto

Escolher Preferências Rato: Um click botão esquerdo Mostra opção adicionar contexto com form e lista de contextos

Mostrar opções sobre contexto Rato: Um click botão direito Mostra lista de opções

Escolher Modificar contexto Rato: Um click botão esquerdo Mostra form com campo Nome e botão de escolha de Icon, Cancel e OK

Escolher OK Rato: Um click botão esquerdo Desaparece Form; Altera nome e icon do contexto na lista

Escolher Cancel Rato: Um click botão esquerdo Desaparece Form

Menu Aplicação Escolher Aplicação Rato: Um click botão esquerdo Apresenta menu da aplicação (Preferências, Fechar, Ajuda)

Preferências da aplicação Escolher Preferências da Aplicação Rato: Um click botão esquerdo Apresenta lista (de icons) de opções de configuração da aplicação

Preferências ligações de rede

Escolher Ligações de rede

Rato: Hover sobre icon Destaca icon

Rato: Um click botão esquerdoMostra janela com lista de ligações de rede existentes e campo para adicionar ligação a contexto com menu dropdown com lista de contextos

Escolher contexto a adicionar Rato: Um click botão esquerdo no menu dropdown e outro no contexto Destaca contexto escolhido

Escolher OK Rato: Um click botão esquerdo Desaparece janela; Adiciona ligação ao contexto

33 de 34


Escolher Cancel Rato: Um click botão esquerdo Desaparece janela

Preferências de segurança

Escolher Segurança Rato: Um click botão esquerdo Mostra janela com lista de contextos e campos Password e Confirmação de password

Marcar Adicionar segurança Rato: Um click botão esquerdo Coloca visto na opção

Preencher campo Password Rato: Um click botão esquerdo; Teclado: escrever Preenche campo com asteriscos

Preencher campo Confirmação de password

Rato: Um click botão esquerdo; Teclado: escrever Preenche campo com asteriscos

Escolher OK Rato: Um click botão esquerdo Verifica se os campos são iguais; Desaparece janela; Adiciona protecção ao contexto

Escolher Cancel Rato: Um click botão esquerdo Desaparece janela

Lista de Favoritos e Preferências de Favoritos

Abrir menu Favoritos Rato: Um click botão esquerdo Mostra lista de favoritos e opções de adicionar e configurar

Mostrar opções sobre item de Favoritos Rato: Um ckick botão direito Mostra lista de opções sobre item

Listar ficheiros Abrir menu Ficheiros Rato: Um click botão esquerdo Apresenta lista de ficheiros e pastas com icons e nomes

Preferências de um ficheiro Preferências de um ficheiro Rato: Um click botão direito Mostra lista de opções

Preferências de ficheiros eAdicionar ficheiro/pasta

Abrir menu Ficheiros Rato: Um click botão esquerdo Apresenta lista de ficheiros e pastas com icons e nomes

Escolher Adicionar ficheiro/pasta Rato: Um click botão esquerdo Mostra popup com inserção do caminho da ficheira ou pasta

Todas Destacar icon ou item Rato: Hover sobre icon ou item Destaca elemento (realça em tamanho e com coroa “luminosa”)

34 de 34

interacção humano-computador - universidade de …braposo/relatorio_1.docx · web...

Documents