Este documento descreve o desenvolvimento de protótipos de baixa e média fidelidade para o sistema Personal Chef, que simula um cardápio virtual de uma praça de alimentação utilizando realidade aumentada. Protótipos em papel e papelão foram testados com usuários e melhorados iterativamente. Um último protótipo de média fidelidade utilizou materiais digitais e impressos para simular de forma mais realista a interface projetada em vidro.

1. Personal Chef: protótipo de papel para simular realidade aumentada –
fazendo seu pedido na praça de alimentação de um shopping
Sílvia Fonseca Ferreira
Introdução
Idealizou-se o sistema Personal Chef, como sendo um cardápio virtual para praças de ali-
mentação de shoppings, utilizando-se, como tecnologia, a realidade aumentada.
A partir desta idealização, desenvolveram-se protótipos de baixa e média fidelidade, utili-
zando-se papel, papelão e vidro. Para se testar os protótipos, escolheu-se uma tarefa espe-
cífica e seis usuários foram recrutados para interagir com o sistema.
À medida que se progredia nos testes com usuários, detectava-se a necessidade de alguns
itens de aprimoramento que incluíam funcionalidade, navegação e widgets e outros itens
que faziam parte do design físico do protótipo.
Segundo Preece et al (2005), widgets “são elementos como caixas de diálogo, menus, íco-
nes, barras de ferramentas, etc.” que fazem parte da interface de um sistema.
Com isso, percebeu-se a importância da confecção de protótipos antes da implementação
do produto no suporte real.
Fundamentação Teórica
1. Prototipação e construção
Segundo Preece et al (2005), para se avaliar a usabilidade de um sistema interativo, “os
designers devem produzir uma versão interativa de suas ideias. Nos primeiros estágios de
desenvolvimento, essas versões interativas podem ser feitas com papel e cartolina”. Con-
forme a evolução da construção, as ideias vão se tornando mais detalhadas e estas versões
podem, visualmente e em termos de navegação e funcionalidade, se parecerem mais com o
produto final. Esta atividade é chamada de “prototipação e construção”. O protótipo possibili-
ta aos stakeholders interagirem com um sistema, simulando sua utilização no ambiente real,
de acordo com Preece et al (2005).

2. Já Warfel (2010), citado por Ellis1 (2010), acredita que prototipagem é um grande mecanis-
mo de aprendizagem ou de descoberta.
Snyder (2003) acha que algumas equipes de produção acham os protótipos úteis para a
geração de ideias. Preece et al (2005) também expõe que os protótipos servem para “testar
a viabilidade técnica de uma ideia”, ainda mais aplicada em um projeto que se inicia do zero,
que é o caso do Personal Chef.
2. Protótipos de alta e baixa fidelidade
Segundo Tate (2010), cada método, no processo de criação de um design de um sistema,
existe em um “continuum de fidelidade”, que vai desde os esboços de baixa fidelidade (pro-
totipação de papel) até protótipos de alta. Cada método é adequado para uma determinada
fase do processo de design. E não podem existir separadamente.
Tate (2010) ainda alega que, usando um método de alta fidelidade (considerando tempo e
material), os riscos de erros são reduzidos. Trabalhando em um de muita baixa fidelidade,
por outro lado, significa que a não inserção de alguns detalhes, podem produzir um resulta-
do “meia-boca”.
Por outro lado, Warfel (2010), citado por Ellis (2010), acredita que demasiado planejamento
impede a arte natural de ajustes. Sendo assim, protótipos de baixa fidelidade têm ótimas
vantagens sobre os de alta, pois pode-se escolher somente as tarefas mais difíceis para
serem testadas e os usuários mais complexos, ou seja, a parte mais fácil da interface ou das
ações fica oculta. Assim, tem-se um material simples (o protótipo de papel, por exemplo)
para se tentar descobrir erros graves ou se explorar a fundo ações específicas do sistema
testado.
3. Protótipos de papel
Segundo Snyder (2003), protótipos de papel funcionam como auxílios a testes de usabilida-
de, onde os usuários participantes executam tarefas realistas interagindo com uma versão
em papel da interface, que é manipulada por uma pessoa (ou avaliador ou designer), que
age como se fosse o computador.
Este avaliador não explica como a interface é destinada para a interação, apenas informa a
tarefa a ser executada. O seu objetivo é obter feedback rápido de usuários, enquanto o pro-
jeto ainda está (literalmente) "na prancheta".
Nos protótipos desenvolvidos para o Personal Chef, três avaliadores eram o computador,
executando funções tais como: mudança de telas, abertura de menus, aparecimento de pop-
ups, etc.
1
http://www.projecteric.com/2010/04/07/prototyping-the-todd-zaki-warfel-way/

3. Desenvolvimento e Resultados – prototipação do Personal Chef
1. O Design Físico – ergonomia e materiais – e a Tecnologia escolhidos
O Personal Chef foi idealizado para ser um cardápio digital, que auxiliaria o cliente, em uma
praça de alimentação de um shopping, na escolha e na montagem de sua refeição. Além
disto, ainda no sistema, o cliente poderia escolher o restaurante ou a lanchonete de sua
preferência e poderia pagar, com cartão de débito ou crédito, na própria mesa, sem a ne-
cessidade do atendimento de um garçom ou de deslocamento até o restaurando ou lancho-
nete.
Na idealização do produto, imaginou-se que o sistema poderia se basear na tecnologia da
realidade aumentada.
Segundo Tori (2009):
Realidade aumentada é uma evolução da conhecida tecnologia de realidade virtual.
Enquanto a RV tem como objetivo a imersão do usuário em um ambiente virtual, de
tal forma que elementos e ocorrências do mundo real precisam ser impedidos de in-
terferir no mundo virtual a fim de que a sensação de imersão do usuário não seja
prejudicada, a RA integra as informações virtuais ao ambiente físico.
Assim, desenhou-se esboços de como o produto poderia estar disposto sobre uma mesa de
uma praça de alimentação e qual seria o seu formato e sua tecnologia (FIG. 1).
A princípio, imaginou-se que poderia-se criar uma projeção do cardápio virtual sobre uma
superfície plana, que seria a própria mesa. Porém, com a possibilidade desta superfície se
sujar com os alimentos que estariam ali dispostos, a melhor opção seria a projeção holográ-
fica da realidade aumentada, com sistema multi-toque. Esta projeção sairia de uma pequena
“régua”, como mostra o esboço da FIG. 1 e o protótipo de papelão e papel manteiga da FIG.
2.
Figura 1. Esboço da mesa contendo o sistema e do sistema com suas medidas e formato.

4. Figura 2. Protótipo em papelão e papel manteiga.
Com o desenvolvimento de mais esboços e protótipos, primeiramente sem a interface (telas)
do sistema, verificou-se que o formato da base da projeção estava inadequado. Então, um
poliedro de acrílico de 30 cm de largura, com laterais triangulares e contendo um botão “liga-
desliga”, foi mais bem definido como a base de onde sairia a projeção do cardápio holográfi-
co. A inclinação da face do poliedro onde se encontra o botão teve a ergonomia testada pela
equipe de produção – ver FIG. 3. O conforto ao se pressionar o botão foi um dos primeiros
itens testados pela equipe.
Figura 3. Testando a ergonomia do botão “liga-desliga” e da inclinação da base da projeção holográfica
A função deste poliedro, além de servir de base para a saída da projeção holográfica, deve-
ria ter o tamanho ideal para a inserção da parte contendo um chip de um cartão de débito ou

5. crédito, além de conter, dentro dele, toda a tecnologia para a transmissão dos dados do pe-
dido e para a leitura do cartão.
2. Prototipação
Antes de se iniciar a confecção do protótipo contendo as interfaces do sistema, fez-se o
storyboard (FIG. 4) e o fluxo de interação (FIG 5).
Figura 5. Storyboard.

6. Figura 6. Fluxo de interação.
A partir daí, foi desenvolvido um protótipo utilizando papel manteiga. Sobre ele, a interface
era escrita e desenhada a lápis. Este protótipo foi testado por dois usuários. Antes do protó-
tipo, já se sabia que a interface utilizaria mais imagens que textos. Então, a tela de escolha
dos alimentos, disporia somente as fotos dos mesmos.
A partir deste primeiro protótipo, sentiu-se a necessidade de se fazer mais telas para a tare-
fa escolhida e mais opções para os alimentos. A tarefa foi sendo incrementada na medida
em que os protótipos iam sendo alterados.
O segundo protótipo foi feito com papel apergaminhado e escrito e desenhado à caneta.
Alguns pequenos pedaços de papéis, que representavam botões, pop-ups e outros widgets
já começaram a ser inseridos, dando mais mobilidade aos avaliadores que faziam o papel
do “computador”.
Uma importante inserção foi que, no momento em que se escolhia algum alimento, abriam-
se opções (um menu de escolha) para o mesmo, como, por exemplo, na escolha do refrige-
rante, abre-se um menu com as opções: Coca-Cola, Sprite, Fanta e Guaraná. Antes, o usu-
ário era obrigado a escolher um alimento especificado pela equipe de avaliadores, pois o
desenho na tela era fixo.
Neste segundo protótipo, ainda de baixa fidelidade, pôde-se perceber que, com as opções
de cada alimento e a confecção de widgets em pedaços de papéis soltos, o usuário tinha
mais flexibilidade ao interagir com as telas da interface. Além disto, por tem a interface escri-
ta e desenhada à caneta, sua visualização ficou melhor. Este protótipo foi testado por mais
dois usuários e um de seus vídeos encontra-se em: <http://www.youtube.com/watch?v=
ldfs0L6l6bk>.
Neste ponto, alguns itens foram aprimorados, a saber:
- necessidade de se manter, em todas as páginas, um histórico do pedido. Assim, um dos
itens importantes também era o tempo de espera sempre visível.
- personalização do cliente, com nome e foto, já que o cliente já era cadastrado.

7. - simulação de escolha de 2 unidades de um mesmo alimento.
- definição dos pop-ups necessários, tais como: “você tem certeza que deseja cancelar o
pedido?” ou “favor retirar o seu cartão”.
- inserção de telas que apresentassem ações que o usuário poderia executar enquanto a-
guardasse o seu alimento: jogos, internet e TV.
A partir destas últimas definições, construiu-se o último protótipo, que pode ser considerado
de média fidelidade, já que utilizava outros materiais, tais como: papel de gramatura maior,
vidro, papelão e telas desenvolvidas e impressas digitalmente, no modo colorido (FIG. 6 e
7).
Além disto, pensou-se melhor no layout dos menus dos alimentos e decidiu-se pela utiliza-
ção de menus radiais para as opções dos mesmos, tornando a interface mais agradável
visualmente. Simulou-se a projeção da interface em vidro e posicionou-se este vidro em no-
venta graus em relação à mesa (FIG. 8).
Este último protótipo foi testado com três usuários. Um de seus vídeos se encontra disponí-
vel em: <http://www.youtube.com/watch?v=wPmuM8V1kI0>.
Figura 7. Tela de escolha de alimentos do protótipo de média fidelidade.

8. Figura 8. Menu radial de opções de um dos alimentos.
Figura 8. Projeção do protótipo da interface em vidro, na posição de noventa graus em relação à mesa.
3. Testes com os usuários – passos-a-passo
Em primeiro lugar, o usuário a ser testado era informado do uso de sua imagem e/ou de sua
voz. No entanto, não foi necessária a assinatura de termo de compromisso, pois as condi-
ções deste termo eram expostas oralmente, por um dos avaliadores, no início de cada fil-
magem. Então, o usuário era informado do que se tratava o sistema Personal Chef. E, por
último, era informado com relação à tarefa a ser feita. O QUADRO 1 apresenta algumas
tarefas solicitadas pelas equipes de avaliadores.

9. Após serem testados, como todos os usuários eram experientes em design de interfaces,
citavam um ou outro erro ou do que sentiram falta ou onde sentiram mais dificuldade, o que
foi um auxílio maior ao projeto.
QUADRO 1. Tarefas que foram testadas pelos usuários no sistema Personal Chef
O usuário deveria saber que já era cadastrado no sistema. Por isso que, na
identificação digital, já entrava na tela de “escolha de alimentos” e não na
tela de “cadastro do cliente”.
Deveria ser informado, também, que o protótipo só abrangia alguns alimen-
tos e não foi configurada a tarefa de escolha do restaurante (para tal, deve-
ria-se fazer outro protótipo).
Tarefas:
1- Entrar no sistema e pedir o(s) alimento(s) sugeridos pelos avaliadores e
pagar.
2- Entrar no sistema, pedir dois alimentos diferentes, cancelar um deles e
fechar a compra.
3- Entrar no sistema, pedir dois alimentos iguais e um diferente, cancelar a
segunda unidade do que foi duplicado e fechar a compra.
4- Entrar no sistema, pedir o que quisesse (sendo que deveria ser mais de
um alimento e que um deles deveria ser café). Porém, a compra teria
que ser fechada apenas com café. (Para esta tarefa há um vídeo dispo-
nibilizado no YouTube: http://www.youtube.com/watch?v=wPmuM8V1kI0.)
4. Algumas considerações
Com relação ao último protótipo construído, por ser de média fidelidade, alguns itens deixam
a desejar, tais como:
- Limitação de tipos de alimentos, opções e quantidades (assim, ficou mais parecido com
um substituto de um garçom do que de um chef de cozinha, pois a montagem do prato fi-
cou em segundo plano)
- Demonstração apenas de uma tarefa (ficou faltando o cadastro do cliente e a escolha do
restaurante)
- Processo não-intuitivo de exclusão de alimento (se fosse construído em um protótipo de
alta fidelidade, talvez esta ação ficasse mais clara)

10. Para a continuidade do projeto, imagina-se que a criação de um protótipo de alta fidelidade
seja interessante, além da aplicação de testes com usuários comuns e, não somente com os
mais experientes.
A acessibilidade também é algo a se tratar futuramente, já que o sistema não é acessível ao
público portador de problemas visuais.
Conclusão
Percebeu-se que, num processo de criação de um novo sistema interativo, a construção de
um protótipo (seja ele de baixa, média ou alta fidelidade) é de grande importância.
A aplicação de testes de protótipos de baixa e média fidelidade auxiliam na avaliação da
usabilidade de um sistema que está em processo de criação de seu modelo conceitual. Com
isto, vários problemas ou erros de funcionalidade, navegação, design físico e outros podem
ser evitados antes da implementação do sistema em seu ambiente e suporte reais.
Referências Bibliográficas
SNYDER, Carolyn. What is Paper Prototyping? Paper Prototyping – the fast and easy way
to design and refine user interfaces (2003). Disponível em: <http://www.paperprototyping.
com/what.html>. Acesso em out/2010.
ELLIS, Eric E. Prototyping the Todd Zaki Warfel way. ProjectEric.com (2010). Disponível
em: <http://www.projecteric.com/2010/04/07/prototyping-the-todd-zaki-warfel-way>. Acesso
em out/2010.
WARFEL, Todd Zaki. Todd Zaki Warfel’s webcast. (2010) In: ELLIS, Eric E. Prototyping
the Todd Zaki Warfel way. ProjectEric.com (2010). Disponível em: <http://www.projecteric
.com/2010/04/07/prototyping-the-todd-zaki-warfel-way>. Acesso em out/2010.
TATE, Tyler. Concerning fidelity and design. The UX Booth. (2010) Disponível em:
<http://www.uxbooth.com/blog/concerning-fidelity-and-design/> Acesso em out/2010.
PREECE, Jennifer; ROGERS, Yvonner, SHARP, Helen. Design de interação: além da inte-
ração homem-computador. Porto Alegre: Bookman, 2005. Cap. 8.
Belo Horizonte, outubro de 2010