INF1403 Projeto de Curso Ilustrações

(1)

serg

(c) SERG, 2011

INF1403

–

Projeto de Curso

Ilustra

ç

ões

Turma 3WB

Professora: Clarisse Sieckenius de Souza

17/10/2011

(2)

serg

(c) SERG, 2011

Exemplo de Projeto

• Sites:

– Supermercados Zona Sul e Princesa

• Perfil de Usuário:

– Trabalhadora Doméstica que seguiu programa de Inclusão Digital promovido pela

Associação de Moradores do bairro em que trabalha e administra a casa de um casal de idosos.

– Ela tem 45 anos, escolaridade até o Ensino Médio incompleto, está usando a Internet há 3 meses principalmente para comunicação por email com a família dos idosos de que cuida, e também aos poucos para explorar outros recursos e serviços disponíveis na rede. Ela só tem tempo para utilizar o computador por 2 horas diárias, no máximo.

• Contexto de Projeto (fictício):

– Você é filho(a) do casal de que a trabalhadora doméstica cuida e tem a incumbência de fazer as compras semanais da casa. Como você tem pouco tempo, imagina que seria bom se ela pudesse entrar nos sites de alguns do principais supermercados que fazem venda online do Rio e levantar os preços dos produtos de que a casa precisa. Assim, ela lhe enviaria por email uma ‘lista de compras’ e a informação de onde comprar, e você poderia ganhar tempo fazendo apenas a finalização da comprar onde indicado.

– Você tem bastante conhecimento de informática e pretende usar recursos de customização da navegação na Web para fazer uma /interface/ que seja boa para ela. O computador da casa de seus pais lhe permite acesso remoto. Sua ideia é simplesmente deixar o ‘script pronto’ para ela usar na máquina.

(3)

serg

(c) SERG, 2011

Exemplo de Cenário de Projeto

• Izaura sabe que a casa está precisando de vários produtos de limpeza e deve comparar os

preços dos mesmos em dois supermercados diferentes. Ela então pega a sua lista de compras e acessa o site do Supermercado Zona Sul (http://www.zonasul.com.br ) e do Supermercado

Princesa (http://www.princesasupermercados.com.br).

• Sua meta é anotar a lista de produtos com preços comparados e o total calculado da compra em cada caso. Sabendo disto, ela vai enviar um email para Jorge Antonio, filho dos donos da casa onde ela trabalha, pedindo que ele realize a compra online e mande entregar no endereço dos pais.

• Jorge Antonio já facilitou um pouco a vida dela. Quando ela se senta ao computador, já tem um ícone na tela que se ela clicar abre direto na página do Zona Sul e outro que abre direto na

página do Princesa. E tem também um outro que abre direto na pátida no Gmail, para ela mandar mensagem para o Jorge Antonio.

• Ele explicou a ela como fazer estas coisas. Mostrou que para saber o preço da compra, ela entra nestes sites e vai ‘enchendo o carrinho’ com os produtos. O preço da compra vai aparecendo na tela. Ele também mostrou como ela pode ‘salvar a página’ em que aparece o carrinho da compra mais barata. Ele depois abre esta página e faz a encomenda da compra.

(4)

serg

(c) SERG, 2011

Rodando o cenário para conhecê-lo

• Veja os filmes

– Zonasul.avi

– Princesa.avi

• Lista de compras

– Sabão em pó Ariel

– Amaciante Fofo

– Detergente Limpol

– Desengordurante Veja

– Desinfetante Pinho Sol

– Bombril

(5)

serg

(c) SERG, 2011

Primeira apreciação do cenário

• Tendo em vista o perfil de Izaura,

comente a interação

comente

com os dois websites.

– Potenciais problemas (interações a melhorar/customizar)

– Potenciais distrações (possibilidades de interação a retirar)

– Potenciais melhorias (interações a acrescentar)

• Quais traços do perfil de Izaura foram considerados? E

por quê?

(6)

serg

(c) SERG, 2011

Primeira aproximação

• Um Diagrama de Metas, Planos e Ações de Interface

Comparar preços

Levantar preços

no Site 1

Levantar preços

no Site 2

Comparar

e Decidir

Salvar a página da

melhor compra

Buscar produto Escolher item Colocar item escolhido no

carrinho Abrir site em nova aba

Consultar preços de produtos desejados Esta tarefa se repete para todos os produtos.

(7)

serg

(c) SERG, 2011

Primeira aproximação

• Um Diagrama de Metas, Planos e Ações de Interface

Comparar preços

Levantar preços

no Site 1

Levantar preços

no Site 2

Comparar

e Decidir

Salvar a página da

melhor compra

carrinho

Abrir site em nova aba _{O plano de ação} desta sub-meta é idêntico ao da

anterior. Consultar preços de

(8)

serg

(c) SERG, 2011

Primeira aproximação

• Um Diagrama de Metas, Planos e Ações de Interface

Comparar preços

Levantar preços

no Site 1

Levantar preços

no Site 2

Comparar

e Decidir

Salvar a página da

melhor compra

carrinho

Abrir site em nova aba _{Dependendo do} usuário e da obviedade da diferença de preços

(ou de outro fator como a falta de produtos), esta

sub-meta pode se fundir com a seguinte. Consultar preços de

(9)

serg

(c) SERG, 2011

Sua tarefa, como exercício

1. Completar o detalhamento do diagrama dos slides anteriores,

usando a seguinte notação,

quando/se necess

á

ria:

ria

• Algarismos para sinalizar elementos ordenados (1,2,3 … )

• ‘*’ para sinalizar elementos que se repetem ZERO ou mais vezes

• ‘+’ para sinalizar elementos que se repetem UMA ou mais vezes

• ‘?’ para sinalizar ordem sugerida, mas não obrigatória (1?,2?, 3? …)

• Letras para sinalizar alternativas de elementos (1a,1b,2,3a,3b,3c …)

2. Examinar o diagrama e identificar oportunidades de melhorar a

interação para Izaura, facilitando, simplificando, prevenindo erros,

ou combinando ações que ela deve realizar neste cenário (que se

repetirá várias vezes em seu trabalho daqui para frente).

(10)

serg

(c) SERG, 2011

Intenções Imediatas, Plano de Ações, Execução

• Modelo de Tarefas

– Hierarquias de Metas

• Metas Dependentes

• Composição de Metas

Meta Geral

Sub-Meta 1 Sub-Meta 2 Sub-Meta n

Ação 1 Ação n Intenções Plano Ação Há uma ordem (total/parcial) de sub-metas e ações? As sub-metas e ações são todas