ALMANAQUE PARA POPULARIZAÇÃO DE

CIÊNCIA DA COMPUTAÇÃO

Volume 10

PROTOTIPAGEM - PARTE 1

SÉRI

E

9 INTERAÇÃO HUMANO-

COMPUTADOR

GABRIEL AUGUSTUS DE AQUINO LEÃOMADSON OLIVEIRA DA SILVAMARIA AUGUSTA SILVEIRA NETTO NUNESCRISTINA PALUDO SANTOSHENRIQUE NOU SCHNEIDERJOSé HUMBERTO DOS SANTOS JúNIOR

Universidade Federal do Estado do Rio de Janeiro (UNIRIO)

REITOR Prof. Dr. Ricardo Silva Cardoso

VICE-REITORProf. Dr. Benedito Fonseca e Souza Adeodato

CAPA, ILUSTRAÇÕES E EDITORAÇÃO ELETRÔNICAJosé Humberto dos Santos Júnior

REVISÃO GERALMaria Augusta Silveira Netto Nunes

Os personagens e as situações desta obra são reais apenas no universo da ficção; não se referem a pessoas e fatos concretos, e não emitem opinião sobre eles.

Dados Internacionais de Catalogação na Publicação (CIP)

Catalogação elaborada por Francine Conde CabralCRB-10/2606

P967

CDU 004.5 (059)

Prototipagem: parte um [recurso eletrônico] / Gabriel Augustusde Aquino Leão ... [et al.]. – Porto Alegre : SBC, 2020.28 p. : il. – (Almanaque para popularização de ciência dacomputação. Série 9, Interação humano-computador ; v. 10).

ISBN 978-65-87003-06-1

1. Computação. 2. Interação homem-máquina. 3. Interfaces(Computadores). I. Leão, Gabriel Augustus de Aquino. II. Silva,Madson Oliveira da. III. Nunes, Maria Augusta Silveira Netto.IV. Santos, Cristina Paludo V. Schneider, Henrique Nou. VI.Santos Júnior, José Humberto dos. VII Universidade Federaldo Estado do Rio de Janeiro. VIII. Universidade Federal deSergipe. IX. Título. X. Série.

GABRIEL AUGUSTUS DE AQUINO LEÃOMADSON OLIVEIRA DA SILVA

MARIA AUGUSTA SILVEIRA NETTO NUNESCRISTINA PALUDO SANTOSHENRIQUE NOU SCHNEIDER

JOSé HUMBERTO DOS SANTOS JUNIOR

ALMANAQUE PARA POPULARIZAÇÃO DECIÊNCIA DA COMPUTAÇÃO

Série 9: Interação Humano-Computador

Volume 10: Prototipagem - Parte 1

Porto Alegre/RSSociedade Brasileira de Computação

2020

Apresentação Essa cartilha foi desenvolvida durante o projeto de Bolsa de Produti-vidade CNPq–DTII n°306576/2016-3 e finalizado durante a Bolsa de Pro-dutividade CNPq-DT-1D n°313532/2019-2, coordenado pela profª. Ma-ria Augusta S. N. Nunes, desenvolvidas no Departamento de Computação (DCOMP)/Programa de Pós-graduação em Ciência da Computação (PROCC) na Universidade Federal de Sergipe e finalizadas no Departamento de In-formática Aplicada (DIA)/ Bacharelado em Sistemas de Informação (BSI) e Programa de Programa de Pós-Graduação em Informática (PPGI) da Univer-sidade Federal do Estado do Rio de Janeiro (UNIRIO). É também vinculado à projetos de extensão, Iniciação Científica e Tecnológica para Popularização de Ciência da Computação apoiada pelos NITs institucionais UNIRIO/UFS. O público alvo das cartilhas são jovens e pré-adolescentes. O objetivo é fo-mentar ao público nacional o interesse pela área de Ciência da Computação. Essa cartilha introduz os conceitos de Prototipagem dentro em IHC (Interface Humano Computador) e como elas ajudam no desenvolvi-mento de projetos de interface de software dentro da área Computação.

(os Autores)

(As informações aqui contidas são de responsabilidade dos autores)

5

Está ansiosa para o primeiro dia de aula na escola nova?

Bom dia Laura!

Já tá na hora de me arrumar pra ir para a

escola.

Bom dia pai! Estou um pouco.

6

Tá bom pai

Tchau filha. Tome cuidado e se comporte na

escola.

Que bom que iremos estudar

juntos novamente pessoal.

Eu também gosto de vocês meus amigos!

O que foi Laura? Aconteceu

alguma coisa?

Hum… É que eu estava

pensando na cena dos garotos de agora há

pouco.

Você sempre se

preocupando com as outras pessoas Laura.

O que foi isso Lucas?

Já está todo emocionado só

com isso?

Qual é Marcos? Deixa o

cara.

Realmente Laura, é muito

bom já conhecer alguns colegas em uma escola nova.

7

Meu irmão já

estudou aqui e ele falou que coisas

como essas acontecem frequentemente, ele até

me falou para tomar cuidado.

Essa é uma

realidade até triste.

Será que aquele garoto

de mais cedo era dessa classe?

O que vocês

acharam da escola nova?

Eu gostei das

professoras e tem muitas pessoas legais na nossa sala.

Eu também gostei do pessoal da nossa sala.

Eu achei...

Top.

Muito interessante.

Que cara é essa filha? Aconteceu alguma coisa na

escola?

Tchau pessoal, até

amanhã!Tchau!

Tchau Laura!

Até amanhã.

8

Tinha um grupo de garotos

atormentando um outro garoto quando

eu cheguei na escola e isso não sai da minha

cabeça.

Eu sei como você fica

aborrecida com esse tipo de coisa Laura, mas tente não

ficar tão para baixo por isso.

Tá bom pai!

Bom dia Laura!

Rápido Laura ou vamos nos atrasar!

Bom dia Maria! Estou indo André,

relaxa.

Eu vou para o meu quarto

agora.

9

Eu percebi que você

não veio à aula ontem, aconteceu alguma

coisa?

Alguns garotos de outra

turma que estavam tirando sarro de mim, então eu fiquei meio chateado com o que fizeram e voltei para

casa.

Mas você falou com seus

pais?

Não, meus pais chegam em casa

cansados do trabalho e eu não quero dar mais

problemas.

Então por que

você não vai falar com a diretora?

Na verdade eu também

tenho um pouco de medo de ir falar com a diretora e acabar deixando aqueles

caras mais zangados e acabarem fazendo algo

pior.

Olá! Eu me chamo Laura.

Oi! eu me chamo Felipe.

10

Vamos Laura! Estamos só te

esperando!

Para que essa pressa André?

Eu também quero chegar logo em casa.

Pessoal! Vou ir resolver uma coisa

na direção da escola, podem ir sem mim .

Na direção?

Ok Laura! Até mais então!

Fazer o que lá?

Até!

Sim! Preciso tirar algumas

dúvidas

Vou indo Felipe. Até

mais!

Tchau Laura! Até mais!

11

Diretoria

Olá! Em que posso ajudá-la?

Olá! Eu estou com algumas

dúvidas.

Quais dúvidas?

Hum…

A escola faz alguma coisa para

combater a violência na escola?

E o que acontece

com quem pratica ou sofre bullying aqui na

escola?

Aconteceu alguma coisa?

Hun… Eles seriam chamados à diretoria, onde nós

teríamos uma conversa inicial com eles para esclarecer o ocorrido e em seguida

seria solicitada a presença dos responsáveis dos envolvidos para podermos tomar as

medidas adequadas.

Faz sim! Sempre que possível realizamos palestras e discussões

sobre o assunto com os pais, professores e alunos, mas não ocorrem com muita frequência porque é difícil

de reunir a maioria dos pais.

12

Não Não! Era só para saber mesmo.

Obrigada!Boa tarde

pai!

Boa tarde minha filha. O que foi que você chegou mais

tarde?

Eu dei uma passada na

diretoria depois da aula.

Não aconteceu nada, eu

só fui tirar uma dúvidas

sobre a escola.

Vou estar no meu

quarto se precisar.

“Violência nas escolas, bullying e algumas soluções para estes

problemas ... “

Ah sim!

Por quê? Aconteceu alguma

coisa?

Ok! Tchau!

Tchau!

Disponha! Qualquer outra dúvida, ou se

acontecer alguma coisa, é só nos procurar.

13

Hey pessoal! O que você

acham de um website de discussões sobre violência

na escola?

Site de discussão

sobre violência na escola?

Esse seu website tem alguma

coisa a ver com a cena do portão do outro

dia?

Sim! Eu não conseguia parar de

pensar no acontecido, então tentei fazer alguma

coisa para ajudar de alguma maneira e acabei projetando um website.

Ah, você sempre tentando

ajudar os outros né Laura.

Eu não consigo

evitar, depois de tudo que eu

passei.

Eu acho que vou mostrá-lo para a diretora e ver o

que ela acha. Hey laura!

Diretoria

Vou ir lá na diretoria

agora. Até mais pessoal!

Tá bom Laura. Até!

Tchau Laura.

Eu acho legal, parece ser bem

útil, mas porque da pergunta?

Eu acho uma ideia bem

legal.

14

Bom dia!

Bom dia! o que posso fazer por você minha

querida?

Eu não sei, mas eu fiquei pensando bastante no que aconteceu.

Eu passei por casos de racismo na minha antiga escola, foi

muito desgastante na época e agora eu me sinto desconfortável de presenciar cenas desse tipo. Então depois de passar alguns dias pesquisando sobre o assunto eu acabei criando

um website de discussão sobre violência para tentar ajudar.

Pensando? O que te deixou tão

reflexiva?

Hum…

OK!

Aqui está o pen drive com o

website!

Entendo, eu não conheço muito dessa área de construção de

websites.

Mas como você parece ser um garota muito bem

intencionada, eu vou mostrar o seu website para o Bacharel em

Informática aqui da escola e amanhã você poderá ir conversar com ele

lá no laboratório, ok?.

É que alguns dias atrás eu vi um garoto sendo

provocado por um outro grupo de garotos e percebi que esse

mesmo garoto não frequentou a aula nesse dia.

Quem são esses garotos?

15

Tchau e muito

obrigado!

Oi minha filha, como foi na

escola?

E você parece estar bastante ansiosa com

isso, né?

Olá, eu sou Laura!

Olá Laura! eu sou Fernandes. Sente-se aqui ao

meu lado, eu já dei uma olhada no seu website e queria lhe

mostrar algumas coisas.

Então Laura, eu percebi que o seu website está um pouco confuso e

contém alguns erros básicos na questão de projeto de

interfaces.

É?

É verdade, eu acho que é porque eu

não entendo muito dessas coisas, já que esse é o

primeiro website que eu fiz. Mas me empolguei e quero até

fazer curso de Computação no futuro.

Sim, veja aqui, por exemplo, como essa

barra de menu está em um lugar meio escondido, não

acha?

Estou sim.

Laboratório de Informática

Oi pai! Foi bem, eu fui mostrar um website que eu fiz à diretora, mas só vou saber se ele vai ter alguma utilidade amanhã

Tchau Laura!

16

Que legal, mas vamos tentar dar um jeitinho

nesse teu primeiro projeto então, ok?

A diretora me falou que é uma iniciativa muito legal, você criar esse meio

informativo para tentar evitar o bullying entre seus colegas.

Agora eu entendo! Essa sua idéia é de

uma iniciativa exemplar, muito boa mesmo. Com

certeza o uso de um website informativo ajudaria bastante

a melhorar a situação atual da escola, mas a forma com que o website foi projetado

em termos de interface, não atingiria o objetivo

esperado.

Ah, que pena, então ele vai

acabar não servindo para a escola? não atingiria o objetivo

esperado.

Vai servir sim, mas antes nós vamos dar uma melhorada nele,

pode ser?

... e nem sei por onde

começar.

Oba, pode sim! Eu quero muito melhorá-

lo para que possa ajudar a esclarecer esse povo sobre bullying. Mas como eu já

falei eu não entendo muito sobre projetos de sites e de

interfaces…

Não se preocupe, eu irei pedir para uma amiga minha te dar uma ajuda com isso,

está ok para você?

Sim.

Esses dias eu estava pesquisando sobre o assunto e tiver a idéia de fazer um website para ajudar, já que pela política da escola, como a diretora falou, somente são realizdas palestras sobre o assunto. Mas mesmo assim é difícil reunir todo mundo.

Com o website achei que seria mais fácil o acesso às informações. Então eu olhei alguns tutoriais na internet

sobre como projetar um website e criei esse aí.

17

Alô! Oi amiga, eu gostaria de lhe pedir uma favor.

Uma aluna aqui da escola teve uma iniciativa interessante e criou website para ajudar na consicentização sobre

bullying, mas ela não conhece muito sobre prototipação e projetos de interface. Ela

está precisando de uma ajuda para melhorar o website que ela desenvolveu, você

gostaria de ajudá-la?

Quando e onde você achar

melhor...

Então Laura, minha amiga Aline é uma

profissional da área e vai te ajudar. Ela, geralmente, é bem ocupada, mas vocês podem se encontrar na casa dela hoje às 15 horas. Está bom para

você?

Está sim., que maravilha,

obrigada.

Aqui está..

Até mais

Laura!Que legal! E

quando vai ser isso?

Tchau Fernandes! Até mais!

Ei pai! Eu falei com o técnico da escola

hoje e ele pediu para uma amiga dele me ajudar a

projetar melhor o website que eu desenvolvi.

Muito obrigada!

Não foi nada, eu gosto de tentar ajudar

pessoas com boas iniciativas como você.

Certo, ela vai te ajudar bastante. Vou lhe passar o endereço.

Ok! Obrigado!

Tchau.

18

Hoje a tarde.

Deve ser aqui

Olá! Eu sou Laura, a garota que Fernandes falou que

viria.

Olá Laura! Eu já estava te

esperando.

Por favor, entre.

Que bom que você conseguiu

alguém para te ajudar.

19

Sente-se Laura! Vamos dar uma olhadinha no que

você já tem.

Fernandes me falou que esse é

seu primeiro website e você fez em pouco

tempo.

Na verdade está bom por ser uma primeira tentativa e está tratando de um assunto

muito importante.

Sim. Ele não está

muito bom, pois eu não tenho muito conhecimento nessa

área.

Ok!

Você acha mesmo?

Certíssimo, estou muito animada!

Me desculpe eu me empolguei.

Percebi.

Hum… Eu não estou conseguindo

acompanhar.

Primeiro eu vou lhe explicar o que é uma Interface…

Acho sim, mas agora vamos focar no que

precisamos melhorar, vou te explicar algumas

coisas, certo?

Eu tenho que lhe explicar o que é uma interface depois falar da prototipagem, dos

tipos de protótipo, tal como o protótipo verbal e, também, tem o wireframe e...

20

... Interface é um palavra que se refere a um modo que liga duas “coisas”

distintas que não podem se comunicar diretamente, como, por exemplo, um controle remoto que lhe

permite mudar o canal da TV…

Isso, mesmo, o website deve ter uma interface que liga o usuário (o mundo) com as informações, ferramentas e/ou tarefas disponíveis (que seria você, ou o que você está

querendo passar sobre o bullying).

Note que a principal falha do

seu website é que a interface está bastante confusa, o que dificulta ao usuário de completar

suas “tarefas” com facilidade.

No caso do seu

website, com a interface ruim fica difícil para usuários encontrarem

as informações sobre bullying que você está querendo disponibilizar

para a comunidade escolar.

Ah, tô entendendo...Que legal...

Humm, entendi. Ok! Então eu

devo re-projetar a interface do meu

website?

Mas isso leva um bom tempo para

se aprender.

Isso mesmo Laura. Você

precisa ter bastante conhecimento das “boas práticas” da área para poder fazer uma boa

interface.

… então o website é uma

interface seria uma interface entre eu e

o mundo?

… outro exemplo é um pessoa que está mediando um conversa

entre duas pessoa que falam línguas distintas, onde as duas pessoas teriam muita dificuldade

interagirem e entender o outro sem esse “mediador”, que seria a “Interface”entre as duas

pessoas.

21

Peraí, existe também uma outra técnica que permite termos um bom resultado,

essa técnica é mais interativa e pode ser mais interessante para aplicarmos ao teu caso.

Outra maneira?Sim! Se chama prototipagem.

A prototipagem é um processo

utilizado para avaliar se alguma idéia que você tem sobre a interface combina com a opinião de possíveis

usuários.

Para começar há duas

classificações básicas de protótipos: o protótipo

de baixa fidelidade e o protótipo de alta

fidelidade.

Então eu começo por um

protótipo de baixa fidelidade e depois faço um

mais detalhado?

Não exatamente. É bom você começar por um protótipo de baixa fidelidade para poder avaliar se

sua interface consegue ser de fácil entendimento ao usuário e evitar possíveis riscos que seriam fatais futuramente, em seguida você pode fazer um protótipo um pouco mais detalhado, mas caso você precise fazer grandes alterações ou ver que seu protótipo de alta fidelidade teve baixa aceitação no

feedback nada lhe impede de fazer outro protótipo de baixa fidelidade para avaliar novas idéias.

Já o protótipo

de alta fidelidade se parece mais com a versão final de seu

projeto e pode simular algumas das funções ou já tê-las prontas, esses protótipos podem ser um wireframe ou uma interface de trabalho

funcional, mas podem dar um pouco de trabalho

para montá-los.

É recomendado você começar por

um protótipo de baixa fidelidade, pois eles são fáceis de se construir e de se alterar, eles podem ser representações do seu projeto como um desenho

em uma folha de papel ou até mesmo uma simples

descrição oral.

22

Toda essa conversa me deu

sede, vou fazer um suco. Gostaria de me acompanhar, Laura?

Gostaria sim.

Vamos lá no quintal para colher

algumas laranjas.

Eu gosto muito de ter frutas em

minha casa para poder fazer sucos e como eu tenho algumas

árvores frutíferas no meu quintal elas estão sempre fresquinhas.

Sim, suco de frutas frescas é

muito bom.

Muito melhor que essa

bebidas processadas. Também muito mais

saudável!

O protótipo verbal é uma descrição falada

das características e das funções da sua interface.

Esses três tipos realmente

parecem ser fáceis de alterar.

E são mesmo, eles dão liberdade para serem

alterados com muita facilidade permitindo alterações logo após o recebimento do

feedback.

O protótipo rascunho já é uma representação visual

básica que pode ser feita em folhas de papel.

E o protótipo encenação

tenta simular a interação do usuário com a interface mesmo não estando pronta

ainda.

Agora, voltando para o assunto, entre os protótipos de baixa

fidelidade temos: o verbal, o rascunho e a

encenação(mágico de OZ).

23

Aline eu estou aprendendo

muito e a conversa está super interessante, mas

está ficando tarde e amanhã tenho aula cedo.

Entendo, podemos continuar amanhã no

mesmo horário se estiver bom para você. Pode ser.

Então tá marcado.

Vou lhe acompanhar até a

porta.

Tchau Aline obrigado pelas

explicações.

Não foi nada Laura, te vejo

amanhã.

Com certeza.

Continua ...

PASSATEMPOS JOGO DOS 7 ERROS

PALAVRAS CRUZADASPASSATEMPOS

RESPOSTAS DOS PASSATEMPOS EM: HTTP://ALMANAQUESDACOMPUTACAO.COM.BR/

BIBLIOGRAFIA

Gibi inspirado em:https://classroom.udacity.com/courses/ud400http://www2.dbd.puc-rio.br/pergamum/tesesabertas/0210297_04_cap_03.pdfhttps://docente.ifrn.edu.br/daniellefreitas/disciplinas/ihc/aulas/prototipo.pdfhttp://www.di.ubi.pt/~agomes/ihc/teoricas/07-cap.pdfhttp://www.inf.puc-rio.br/~inf1403/docs/alberto2012-1/20_Prototipacao%20_Padroes.pdf

Mais cartilhas em: http://almanaquesdacomputacao.com.br/ou http://almanaquesdacomputacao.com.br/gutanunes/publication.html

SOBRE OS AUTORES:

Cristina Paludo SantosProfessora do Departamento de Engenharias e Ciência da Computação da Universidade Regional Integrada do Alto Uruguai e das Missões, no campus de Santo Ângelo. Mestre em Ciência da Computação pela Universidade Federal do Rio Grande do Sul (2000). Líder do Grupo de Pesquisa em Integração de Tecnologias para Desenvolvimento de Sistemas Computacionais - InTeC/URI/CNPq, desenvolvendo pesquisas nas áreas de Interação Humano-Computador, em especial em pesquisas que envolvem interação tangível; Informática na Educação e Tecnologias Assistivas. Foi bolsista Produtividade em Extensão EXP-C/CNPq (2011). Coordena o Projeto Meninas Digitais Tchê Missões, projeto parceiro do Programa Meninas Digitais da SBC. Lattes: http://lattes.cnpq.br/6055243052118565

Gabriel Augustus de Aquino Dias LeãoPossui graduação em Sistemas Para Internet pela Faculdade de Administração e Negócios de Sergipe(2017). Tem experiência na área de Ciência da Computação, com ênfase em Metodologia e Técnicas da Computação.Lattes: http://lattes.cnpq.br/4577022978984354

Henrique Nou SchneiderProfessor do Departamento de Computação e do Programa de Pós-Graduação em Educação na Universidade Federal de Sergipe e da Coordenadoria de Informática do Instituto Federal de Sergipe. Doutor em Engenharia de Produção e Sistemas pela Universidade Federal de Santa Catarina (2002), mestre em Computação pela Unicamp (1989) e bacharel em Engenharia Civil pela Universidade Federal de Sergipe (1985). Líder do Grupo de Estudos e Pesquisa em Informática na Educação – GEPIED/UFS/CNPq, desenvolvendo pesquisas nas áreas de conhecimento: interação humano-computador, informática educativa e filosofia e sociologia da internet.

José Humberto dos Santos JúniorEstudante de Ciência da Computação da Universidade Federal deSergipe – UFS.Lattes: http://lattes.cnpq.br/9144803555676838

Madson Oliveira da SilvaGraduando em Ciência da Computação pela Universidade Federal de Sergipe. Técnico em Informática pelo Instituto Federal da Bahia(2016). Lattes: http://lattes.cnpq.br/6072838835765592

Maria Augusta Silveira Netto NunesBolsista de Produtividade Desen. Tec. e Extensão Inovadora do CNPq - Nível 1D - Programa de Desenvolvimento Tecnológico e Industrial

Professor Associado II do Departamento de Computação da Universidade Federal do Estado do Rio de Janeiro (UNIRIO). Membro do Programa de Pós-graduação em Ciência da Computação (PROCC) na Universidade Federal de Sergipe. Membro permanente no Programa de Pós-graduação em Informática PPGI (UNIRIO) (ciclo março de 2020). Pós-doutora pelo laboratório LINE, Université Côte d’Azur/Nice Sophia Antipolis/ Nice-França (2019). Pós-doutora pelo Instituto Nacional de Propriedade Industrial (INPI) (2016). Doutora em “Informatique pela Université de Montpellier II - LIRMM em Montpellier, França (2008). Realizou estágio doutoral (doc-sanduiche) no INESC-ID- IST Lisboa- Portugal (ago 2007-fev 2008). Mestre em Ciência da Computação pela Universidade Federal do Rio Grande do Sul (1998) . Graduada em Ciência da Computação pela Universidade de Passo Fundo-RS (1995) . Possui experiência acadêmico- tecnológica na área de Ciência da Computação e Inovação Tecnológica-Propriedade Intelectual. É bolsista produtividade DT-CNPq. Atualmente, suas pesquisas estão voltadas, principalmente no uso de HQs na Educação e Pensamento Computacional. Também em inovação Tecnológica usando Computação Afetiva na tomada de decisão Computacional, Atua também em Propriedade Intelectual para Computação. Criou o projeto “Almanaques para Popularização de Ciência da Computação” chancelado pela SBC, http://almanaquesdacomputacao.com.br/ http://scholar.google.com.br/citations?user=rte6o8YAAAAJLattes: http://lattes.cnpq.br/9923270028346687

AgradecimentosAo CNPq, CAPES, SBC, BSI/PPGI-UNIRIO e DCOMP/PROCC-UFS.

APOIO