design digital e modelagem …ca.ufpel.edu.br/design/digital/tcc/acervo/2011_2/violeta.pdf ·...
TRANSCRIPT
DESIGN DIGITAL E MODELAGEM
TRIDIMENSIONAL: O CENÁRIO 3D
COMO INTERFACE DE INTERAÇÃO
DESIGN DIGITAL E MODELAGEM
TRIDIMENSIONAL: O CENÁRIO 3D
COMO INTERFACE DE INTERAÇÃO
DESIGN DIGITAL E MODELAGEM
TRIDIMENSIONAL: O CENÁRIO 3D
COMO INTERFACE DE INTERAÇÃO
UNIVERSIDADE FEDERAL DE PELOTAS CENTRO DE ARTES
BACHARELADO EM DESIGN DIGITAL
Trabalho de Conclusão de Curso
VIOLETA FERLAUTO SCHUCH
DESIGN DIGITAL E MODELAGEM TRIDIMENSIONAL:
O CENÁRIO 3D COMO INTERFACE DE INTERAÇÃO
Pelotas, dezembro de 2011
2
UNIVERSIDADE FEDERAL DE PELOTAS CENTRO DE ARTES
BACHARELADO EM DESIGN DIGITAL
VIOLETA FERLAUTO SCHUCH
DESIGN DIGITAL E MODELAGEM TRIDIMENSIONAL:
O CENÁRIO 3D COMO INTERFACE DE INTERAÇÃO
Monografia apresentada ao Centro de Artes e ao curso de Bacharelado em Design Digital da Universidade Federal de Pelotas, como requisito parcial a obtenção do título de Bacharel em Design Digital.
Orientador: Guilherme Carvalho da Rosa
Pelotas, dezembro de 2011
3
BANCA EXAMINADORA
Alexandre Vieira Maschio
Marcelo Schiavon Porto
4
Primeiramente agradeço aos meus pais, Teresa e Oscar, por me
proporcionarem o que eu precisava para fazer esta longa caminhada até o
final do meu curso, por sempre me ajudarem com uma coisa ou outra e por
sempre incentivarem meu crescimento e aprendizagem. Principalmente a
minha mãe, por sempre me apoiar nos caminhos escolhidos durante a
faculdade e por me dar forças quando tive angústias e dúvidas. Ao Lucas,
meu namorado, pela compreensão, paciência e carinho, por conseguir me
acalmar nos momentos de surto, por ser além de um namorado um amigão
e me ajudar em tudo que precisei. Aos meus amigos por entenderem a
minha ausência e me darem forças para continuar. Ao meu orientador
Guilherme, pela prestatividade, conhecimentos e aprendizados passados, e
também por ter se dedicado muito ao curso de Design Digital e a nossa
turma. Enfim, a tudo e a todos, que de uma forma ou de outra, colaboraram
para eu chegar onde estou. Graças a vocês (e ao meu esforço) hoje eu sei
que sou capaz. MUITO OBRIGADA a todos vocês. <3
vioLeta :D
AGRADECIMENTOS
5
RESUMO
Buscamos nesta pesquisa analisar como se dá a construção de
cenários 3D para interfaces de interação em cruzamento com as
tecnologias do imaginário. Dentro desta pesquisa faremos a análise do
website da Cervejaria Bohemia a partir das teorias do imaginário em
cruzamento com alguns autores do campo do design de interface. A
proposta prática parte do desenvolvimento do protótipo de uma interface
de interação que considere o cenário 3D. A partir disso, proporemos alguns
indícios metodológicos na especificidade das interfaces imersivas com o uso
de modelagem tridimensional.
PALAVRAS-CHAVE: 3D, interface, interação, imaginário, design digital
RESUMO
6
ABSTRACT
This research aims to analyse how is the construction of 3D sceneries for
interactive interfaces, crossed by the technologies of the imaginary. This study
analyses the Bohemia Brewery website from the perspective of theory of the
imaginary, crossed by the work of a few researchers from interface design
field. The practical proposal consists of a prototype for an interactive
interface which includes a 3D scenery. Starting from this, the study suggests
some methodological evidences for creating immersive interfaces with three-
dimensional modeling.
KEYWORDS: 3D, interface, interaction, theory of the imaginary, digital design
ABSTRACT
7
LISTA DE FIGURAS
Figura 1: Sequência da propaganda televisiva da campanha de vacinação infantil de 2010 ______________________________________________________ 11
Figura 2: Cenas de Procurando Nemo ____________________________________ 12 Figura 3: Screenshots do website mostrando como se dá a visão em 360° __ 12 Figura 4: Estrutura de navegação orgânica proposta por Garrett __________ 13 Figura 5: Website imersivo Optus Whale Song _____________________________ 15 Figura 6: Cerveja e acompanhamentos __________________________________ 37 Figura 7: Anúncio litográfico e policromático _____________________________ 38 Figura 8: Freezer e balde de cerveja da Bohemia _________________________ 38 Figura 9: Legenda de símbolos gráficos ___________________________________ 39 Figura 10: Fluxograma do website da Bohemia ___________________________ 40 Figura 11: Psicologia das cores ___________________________________________ 43 Figura 12: Primeira tela da Sala do Mestre ________________________________ 45 Figura 13: Segunda tela da Sala do Mestre _______________________________ 46 Figura 14: Terceira tela da Sala do Mestre ________________________________ 47 Figura 15: Quarta tela da Sala do Mestre _________________________________ 48 Figura 16: Sequência de telas da Sala do Mestre _________________________ 49 Figura 17: Abajures/Ritmo ________________________________________________ 50 Figura 18: Quadros/Ritmo ________________________________________________ 50 Figura 19: Livros/Ritmo ___________________________________________________ 50 Figura 20: Cristaleira/Ritmo _______________________________________________ 51 Figura 21: Quadro/Ritmo _________________________________________________ 52 Figura 22: Vasos & gavetas/Ritmo ________________________________________ 52 Figura 23: Mesa & janela/Hierarquia ______________________________________ 53 Figura 24: Cristaleira & quadro/Hierarquia ________________________________ 54 Figura 25: Porta & quadro/Hierarquia _____________________________________ 55 Figura 26: Quadros/Hierarquia ___________________________________________ 55 Figura 27: Fluxograma de informação do website da Tropical Brasil ________ 65 Figura 28: Storyboard - Projeto prático ____________________________________ 66 Figura 29: Tela loader ____________________________________________________ 67 Figura 30: Areia do cenário do website da Tropical Brasil __________________ 68 Figura 31: Placas do cenário do website da Tropical Brasil _________________ 69 Figura 32: Oceano modelado para o website da Tropical Brasil ____________ 69 Figura 33: Marca da Tropical Brasil _______________________________________ 70 Figura 34: Pranchas de surf modeladas para o website da Tropical Brasil ___ 71 Figura 35: Tela de entrada do website ____________________________________ 72
LISTA DE FIGURAS
8
Figura 36: Tela boletim das ondas ________________________________________ 73 Figura 37: Tela notícias ___________________________________________________ 73 Figura 38: Tela pop-up explicativo ________________________________________ 74 Figura 39: Tela pranchão ________________________________________________ 74 Figura 40: Tela pranchão rotacionado ___________________________________ 75 Figura 41: Tela fun bord __________________________________________________ 75 Figura 42: Tela fun bord rotacionada ____________________________________ 757 Figura 43: Tela fun bord rotacionada ____________________________________ 757
9
SUMÁRIO
APRESENTAÇÃO .................................................................................................. 10
1. CIBERCULTURA E IMAGINÁRIO ...................................................................... 17
1.1 Um olhar histórico a partir da internet ...................................................... 17
1.2 A cibercultura ............................................................................................... 18
1.3 A noção de interação mediada por computador ............................... 24
1.4 Um olhar sobre o Imaginário ...................................................................... 27
2. OPÇÕES METODOLÓGICAS ........................................................................... 32
3. ANÁLISE DO WEBSITE DA BOHEMIA ............................................................... 36
3.1 O fluxo de informação no website da Cervejaria Bohemia ................. 39
3.2 O design visual no na Sala do Mestre ...................................................... 40
3.2.1 Cores .................................................................................................... 40
3.2.2 Equilíbrio, ritmo e hierarquia ............................................................. 43
3.3 Interação dos usuários com a interface .................................................. 55
3.4 O imaginário da Sala do Mestre na experiência dos usuários ............. 58
4. PROJETO PRÁTICO .......................................................................................... 62
CONCLUSÃO ...................................................................................................... 77
REFERÊNCIAS BIBLIOGRÁFICAS ......................................................................... 80
Anexo 01 ............................................................................................................. 82
Anexo 02 ............................................................................................................. 83
Anexo 03 ............................................................................................................. 84
Anexo 04 ............................................................................................................. 86
SUMÁRIO
10
APRESENTAÇÃO
O presente trabalho tem como objetivo principal abordar as
possibilidades de utilização da tecnologia 3D, em cenários utilizados em
interfaces de interação na web. Esta proposta se justifica principalmente
pelo crescimento de demandas para projetos em 3D principalmente na área
do entretenimento e pela necessidade de observar estas interfaces, e o seu
caráter de imersão, a partir de alguns olhares teóricos, como o imaginário e
a cibercultura. Além disso, parte-se da possibilidade de ver em que
momento as metodologias projetuais para desenvolvimento de interfaces, já
conhecidas, precisam dialogar com as especificidades de projetos deste
tipo. A modelagem 3D é um campo onde o designer pode atuar,
trabalhando para estúdios, agências e até mesmo como freelancer1. Esta
pesquisa além de ser significativa pessoalmente para a autora poderá
incentivar a produção e o estudo de futuros projetos 3D no curso de design
digital da UFPEL.
Podemos ver a utilização desta tecnologia em diversas áreas,
especialmente em filmes de animação, websites da internet, conteúdos
para televisão e games. No uso de propagandas para TV, podemos citar a
campanha de vacinação contra a paralisia infantil de 20102 feita pelo Studio
Nitro3, um escritório de design brasileiro, onde todo o vídeo foi feito com
elementos em 3D, tanto o cenário como os personagens. Neste projeto é
possível ver proximidades com um dos primeiros filmes feitos totalmente em
3D, Toy Story (John Lasseter, 1995) por conta de os brinquedos da
propaganda terem vida própria quando não estão sendo observados por
seres humanos, como no filme. Um aspecto desta propaganda é que o Zé
Gotinha foi transformado em um brinquedo como os outros, fazendo assim
1 Freelancer – Profissional autônomo, realiza seus projetos independemente de estar empregado. 2 Disponível em: http://youtu.be/NA10hmG9q_Y. - Acesso em: 09/08/2011. 3 Studio Nitro - Disponível em: www.nitroglicerina.tv - Acesso em: 10/08/2011.
APRESENTAÇÃO
11
com que ele seja interpretado como algo do cotidiano infantil. Para ter uma
visão mais clara sobre os aspectos comentados sobre esta propaganda é
apresentado a sequência de quadros apresentada na figura 1:
Figura 1: Sequência da propaganda televisiva da campanha de vacinação infantil de 2010 Fonte: Imagens capturadas pela autora4
O estúdio Pixar5, um dos precursores na produção de filmes de
animação 3D, tem como um de seus sucessos o filme Procurando Nemo
(Andrew Stanton, 2003). Este filme teve a melhor bilheteria de estreia para um
desenho animado em todos os tempos, arrecadou US$ 70,6 milhões nos
Estados Unidos em apenas um final de semana6. Durante a produção, nos
testes em cenas do filme, a imagem se parecia tão real que foi necessário
diminuir os níveis de semelhança. É possível ver o comentário sobre este fato
no making-of7 da produção. Toda a arte e animação foram inspiradas em
formas concretas dos peixes e organismos do fundo do mar. A animação foi
feita a partir de estudos com os próprios animais marítimos. A modelagem e
animação era (durante a produção), comparada a gravações em vídeo
4 Disponível em: http://youtu.be/NA10hmG9q_Y. - Acesso em 09/08/2011. 5 Website da Pixar: www.pixar.com - Acesso em: 11/08/2011. 6 Fonte: http://cinema.cineclick.uol.com.br/criticas/ficha/filme/procurando-nemo/id/725 - Acesso em: 15/08/2011. 7 Making-of – Termo utilizado para se referir a vídeos gravados nos sets de filmagem, porém não as próprias cenas do filme.
12
dos peixes. Como podemos ver na figura 2, a modelagem dos peixes se
aproxima das formas reais:
Figura 2: Cenas de Procurando Nemo Fonte: Montagem de frames realizada pela autora8
O website Ecodazoo.com é um exemplo de aplicação do 3D à web,
no sentido de imersão do usuário. O projeto simula a visão 360° do ambiente
e com a possibilidade de usuário mover-se pela interface. Mas também,
além do 3D, são incorporados elementos em 2D. Além desta possibilidade o
usuário possui um contato espacial com a interface simulando espaços e
tempo reais. O som também compõe a dinâmica espacial e o usuário
acaba tendo uma experiência com maior imersão (figura 3).
Figura 3: Screenshots do website mostrando como se dá a visão em 360° Fonte: Imagens capturadas pela autora9
8 Fonte: http://www.adorocinema.com/filmes/procurando-nemo/trailers-e-imagens/ e http://cinema10.com.br/filme/procurando-nemo - Acesso em: 26/08/2011. 9 Fonte: http://ecodazoo.com/ - Acesso em: 29/08/2011.
13
Felipe Memória afirma que “quando se projeta qualquer coisa que
trabalhe interação entre pessoas, um dos objetivos primários deve ser
alcançar a imersão total” (MEMÓRIA, 2005, p. 153). Segundo Memória (2005,
p. 153) uma forma de “hipnotizar” o usuário e fazê-lo imergir completamente
na utilização de um sistema é a fluidez, isto é, fazer o usuário ter uma
experiência muito próxima da proporcionada pelo audiovisual a partir de
uma percepção relativa do tempo e do espaço construídos por uma
espécie de “narrativa”. Jesse James Garrett afirma em seu livro (2003, p. 99),
que quando se quer incentivar uma exploração livre do website a estrutura
orgânica de navegação é uma escolha. A estrutura proposta por Garrett
(figura 4) é demonstrada graficamente por nós ou pontos que representam a
navegação do usuário pelo website. Estes formam caminhos dentro da rede.
As linhas que conectam os nós são os possíveis caminhos que usuário pode
fazer dentro do website.
Figura 4: Estrutura de navegação orgânica proposta por Garrett
Fonte: Imagem reproduzida do original pela autora
Esta estrutura pode levar o usuário à imersão no ambiente do website
e esta vai ser uma característica a ser estudada neste trabalho, o que
também comporá o projeto prático final. Estes aspectos têm uma
proximidade com a simulação de um mundo “real”, onde o usuário pode
entrar em contato com um espaço e um tempo simulado, por exemplo,
podendo analisar todos os ângulos de um produto, e também criar uma
atmosfera de realidade. Ao observar empiricamente este tipo de interface,
uma outra característica de websites imersivos é a de levar o usuário a
14
explorá-lo por maior tempo que pode levar a um nível de experiência de
entretenimento ao ponto de, por exemplo, diluir um discurso publicitário da
venda de algum produto. A intenção mercadológica e a do entretenimento
se fundem formando uma só. Quando um usuário joga um advergame10 em
um website de uma empresa, por exemplo, ele acaba se divertindo com
aquilo de uma forma lúdica e, por fim, possivelmente esquecendo que é
uma propaganda que compõe uma estratégia de marketing e venda.
A partir desses fatores será feita uma análise do website da cervejaria
Bohemia buscando ver como os ambientes tridimensionais podem compor
uma interface. Serão analisados, particularmente, dois aspectos do design
de interface, tendo como referência para estas análises, nomes, desde já a
proposição de Jesse James Garrett (2003): o design da informação e
também a linguagem visual. A escolha deste website se deu por a interface
ser construída com um ambiente 3D, por ter uma característica de imersão e
também por apresentar uma estrutura de navegação prioritariamente não-
linear. Podemos observar, à primeira vista, que o website da Bohemia possui
uma navegação orgânica (GARRETT, 2003 p. 99), diferentemente de outros
websites, por exemplo, os que possuem uma estrutura hierárquica e com
caminhos pré-definidos.
Nesta pesquisa quando se expõe o termo website imersivo, referimo-
nos a interfaces com estrutura de navegação orgânica que se caracteriza
pela possibilidade de o usuário explorar o conteúdo, em princípio, sem
indicações hierárquicas. Estas interfaces levam o usuário a uma experiência
diferente da hierárquica. Há uma simulação da condição de imersão em
uma realidade tornando assim a experiência estética, simulando uma
presença corporal do usuário em um espaço virtual. É como se o usuário
realmente adentrasse a tela do computador e fosse controlando seus passos
10 Advergame – Fusão das palavras inglesas Advertise = propaganda e Game = jogo eletrônico. Jogos que possuem a principal função divulgar uma marca ou um produto.
15
de acordo com o seu interesse no momento. De acordo com a autora Gaia
Moretti “um mundo virtual imersivo é a representação (simulada) de um
mundo real” (MORETTI, online, 2011, p. 2)11. Podemos ver um exemplo disso
no website Optus Whale Song (figura 5) que foi desenvolvido a partir de uma
experiência real com a capacidade de percepção sonora das baleias.
Neste experimento, foi levada uma pequena orquestra para a superfície do
mar junto com alto-falantes. A orquestra tocou músicas e os alto falantes
foram ativados dentro da água para registro das reações das baleias. Este
experimento real resultou em um website onde o usuário pode controlar o
movimento feito pela baleia a partir de sons comandados pelo teclado.
Figura 5: Website imersivo Optus Whale Song Fonte: Imagens capturadas pela autora12
Neste trabalho, será feita uma revisão teórica abordando, por
exemplo, como os ambientes 3D e as interfaces com foco na imersão do
usuário podem ser compreendidos através da sociologia compreensiva e do
imaginário. Correlato a isto, outro fator teórico a ser abordado é o da
cibercultura. Seguindo o trabalho, partiremos de proposições metodológicas
passíveis de serem utilizadas como a sociologia compreensiva em
11 Disponível em: http://www.cibersociedad.net/congres2009/actes/html/com_mundos-digitais-virtuais-em-3d-e-aprendizagem-organizacional-uma-relasao-possivel-e-produtiva_644.html - Acesso em: 16/08/2011. 12 Fonte: http://www.optuswhalesong.com.au/ - Acesso em: 15/09/2011.
16
cruzamento com algumas técnicas de pesquisa do design de interface. A
partir disto, será feito o estudo de caso do website da cervejaria Bohemia
considerando algumas questões das teorias do imaginário cruzadas de com
o viés do design de interfaces. A prática projetual constituirá na criação de
um protótipo de website com características imersivas. Por fim, este trabalho
pretende propor alguns caminhos metodológicos para construção de
websites com estas características.
17
1. CIBERCULTURA E IMAGINÁRIO
Neste capítulo serão apresentadas algumas noções teóricas que
servirão como base para a construção deste trabalho. Primeiramente, será
abordada a questão da cibercultura e sua influência no momento de pensar
e projetar interfaces gráficas de interação. Logo após, serão apresentadas
as tecnologias do imaginário, buscando fazer uma leitura, através da
sociologia compreensiva, da experiência dos usuários nas interfaces com
caráter imersivo.
1.1 Um olhar histórico a partir da internet
Nos dias atuais a internet é bastante utilizada como ferramenta de
diversão, entretenimento, pesquisa e comunicação, porém sua história
começa nos anos 1960 com intuito e investimento militar. Tudo começa com
a Advanced Projects Agency (ARPA), que foi formada pelo Departamento
de Defesa dos Estados Unidos que, segundo Manuel Castells (2004, p. 13),
tinha a “missão de mobilizar recursos de pesquisa, particularmente do mundo
universitário, com o objetivo de alcançar superioridade tecnológica militar
em relação à União Soviética”. Com o objetivo de estimular a pesquisa em
computação interativa foi criada a Arpanet onde era possível “compartilhar
on-line tempo de computação” (CASTELLS, 2004, p. 14). Esse sistema
funcionou dentro das Universidades da Califórnia em Los Angeles e Santa
Barbara e também na Universidade de Utah, em 1969.
Por conseguinte criou-se um novo conceito: uma rede das redes, onde
a Arpanet tinha conexão com outros computadores em rede começando
com dois núcleos de redes. A partir disso tornou-se necessário utilizar
protocolos de comunicação padronizados. Consegue-se isto em 1973 com o
Protocolo de Controle de Transmissão (TCP). Logo em 1978 pesquisadores na
Universidade da Califórnia do Sul, “dividiram o TCP em duas partes,
acrescentando o Protocolo Intra-rede (IP), o que gerou o protocolo TCP/IP”
1. CIBERCULTURA E IMAGINÁRIO
1.1 Um olhar histórico a partir da internet
18
(CASTELLS, 2004, p. 14 e 15) que é utilizado na internet até os dias atuais. Em
1990 a Arpanet se tornou obsoleta e a tecnologia de redes de
computadores já estava em domínio público. Nos EUA a maioria dos
computadores já tinha capacidade de entrar em rede. Nesta mesma
década, afirma Castells, muitos provedores de internet já tinham montado
suas próprias redes e “estabeleceram suas próprias portas de comunicação
em bases comerciais” (CASTELLS, 2004, p. 15). Depois disso a internet se
espalhou rapidamente, formando a rede mundial de computadores.
1.2 A cibercultura
Como resultado de apropriação social do desenvolvimento da
internet, a cibercultura se origina do surgimento do ciberespaço que,
segundo Lévy (1999, p. 17), é o meio de comunicação que se dá através da
interconexão mundial dos microcomputadores. Apresentamos também a
significação da cibercultura que, “especifica o conjunto de técnicas
(materiais e intelectuais), de práticas, de atitudes, de modos de pensamento
e de valores que se desenvolvem juntamente com o crescimento do
ciberespaço” (LÉVY, 1999, p. 17). Ou seja, a cibercultura está relacionada ao
uso social deste ciberespaço. Quanto mais a cibercultura se amplia, menos
se torna totalizável (LÉVY, 1999, p. 111).
Outra característica apontada por Lévy está relacionada à ausência
de um centro específico: “o universal da cibercultura não possui nem centro
nem linha diretriz” (LÉVY, 1999, p. 111), ou seja, este universal não possui
apenas um conteúdo particular: é uma fusão de diversos pontos e cargas
semânticas de cada entidade relacionada. O processo de interconexão
carrega consigo, segundo Lévy (1999, p. 111), “imensas repercussões” em
atividades culturais, políticas e econômicas, mudando condições da vida
em sociedade, transformando-as em um universo indeterminado que tende
a se manter em mutação. Cada novo nó que surge na rede das redes gera
1.2 A Cibercultura
19
novas informações, imprevisíveis e que acabam reorganizando parte da
conectividade global. Lévy afirma (1999, p. 111) que o ciberespaço pode ser
considerado o sistema do caos, pois se constrói em sistemas de sistemas, está
em constante mudança, revigorando-se, transformando-se e criando assim
um verdadeiro labirinto. Esse sistema de desordem, universalidade sem um
sentido central, este labirinto, é o que Lévy chama de “universalidade sem
totalidade” o qual se constitui “a essência paradoxal da cibercultura” (LÉVY,
1999, p. 111).
Tratando da universalidade no plano técnico podemos ver algumas
implicações sociais e culturais do digital, que segundo Lévy (1999, p. 112) se
diferenciam e se aprofundam a cada nova interface que surge neste
contexto, a cada aumento de capacidade ou potência, ou ainda em cada
nova ramificação que trazem novos conjuntos de técnicas. Uma invariante
paradoxal dentro desta variedade móvel é a velocidade da evolução.
Todos os dias são inseridas novas técnicas e novos nós dentro da rede em
uma velocidade grande de inserção de informação. Uma outra
característica deste universo é a constante virtualização da informação e
comunicação. Cada vez mais podemos nos informar através da rede, sem
precisar de outros meios como televisão, rádio e jornal para isto. Lévy (1999,
p. 112) exemplifica que o ciberespaço funciona como a natureza e alguns
sistemas ecológicos: “a longo prazo, um determinado “nicho” não pode
acolher um número muito grande de espécies concorrentes” (LÉVY, 1999, p.
112). Sendo assim, mesmo que existam diversas variedades inicialmente, elas
acabam desaparecendo em proveito de algumas outras formas
dominantes.
O digital se torna cada vez mais forte em termos de comunicação,
colaboração e informação. Sendo assim, este se torna um suporte
privilegiado, pois abrange este todo e esta tendência à universalização se
torna um marco na história da informática. Os usuários deste sistema podem
20
se conectar com qualquer outro computador no mundo. Acabam, pela
comunicação mediada por computador, estabelecendo padrões e regras
para o uso desta. Estes usuários têm a capacidade de demonstrar para
empresas quando um sistema é incompatível e o quanto isso precisa ser
modificado. Pode se dizer que uma inovação tecnológica é vencedora
quando ela consegue criar um sistema que se estabelece fortemente no
restante do ambiente tecnológico. Estes elementos do ciberespaço tendem
a continuar progredindo cada vez mais “rumo à integração, a interconexão,
ao estabelecimento de sistemas cada vez mais interdependentes, universais
e transparentes“ (LÉVY, 1999, p. 113). Conforme o autor, o desenvolvimento
do digital é universalizante não apenas em si mesmo, mas também em
outros aspectos e fenômenos tecno-sociais que tendem nessa mesma
estrutura de integração mundial como, por exemplo, finanças, comércio,
pesquisa científica, mídias, produção industrial e transportes, entre outros.
Todos estes traços da cibercultura nos mostram que este sistema é feito para
atender as necessidades dos usuários de acordo com os projetos de seus
criadores.
Neste universo do ciberespaço, segundo Lévy (1999, p. 118),
atualmente quase nenhuma mensagem fica desconexa, sempre haverão
links para assuntos ligados e sempre haverão pessoas interessadas naquele
assunto, seja ele qual for. Virtualmente, as mensagens encontram-se
mergulhadas em um grande banho universal fervilhante de informações,
incluindo até mesmo as próprias pessoas, do qual o ciberespaço surge como
o coração de tudo isto (LÉVY, 1999, p. 118). A interconexão generalizada, um
dos principais fatores do crescimento da internet, emerge como uma forma
nova de universal, uma forma diferente da escrita estática que também é
universal. Neste contexto, ela não produz um fechamento semântico: este
universal “não totaliza mais pelo sentido, ele conecta pelo contato, pela
interação geral” (LÉVY, 1999, p. 119). Com os computadores, e as redes, as
21
pessoas podem entrar em contato com o mundo inteiro. Este universal pode
se realizar pela imersão. Todos nós estamos sendo constantemente
banhados por esse dilúvio de comunicação sem ser possível um fechamento
semântico ou uma totalização. Quanto mais universal menos totalizável.
Em tempos atuais a cibercultura está inserida em um contexto onde
ela está para nos ajudar e também integrar as pessoas ao redor do mundo.
Porém em 1948 a teoria da cibernética estava em voga. Esta teoria está
ligada a primeira fase da internet, e tinha como base “noções de
realimentação, informação, programação, regulação, controle e sistemas
complexos” (LEMOS, 2007, p. 102). Esta teoria, segundo André Lemos (2007, p.
102) falava que os computadores/máquinas iriam dominar os seres humanos,
imitar o cérebro e criar uma simulação dos seres vivos, era a máquina em
oposição ao ser humano. Aos poucos a noção de cibernética vai se
distanciando da informática, sendo a cibernética uma forma de reflexão dos
usos das ferramentas de comunicação, enquanto a informática será uma
forma de manipulação ou automação da informação.
Com o tempo, o termo ciberespaço, parte fundamental da
cibercultura, vai se tornando parte do cotidiano nas discussões sobre
Tecnologias da Informação (TI). Segundo Lemos (2007, p. 127) o ciberespaço
tinha como idéia principal o conjunto de redes de telecomunicações
interligadas por uma rede participantes de um processo digital de circulação
de informação, abrangendo não só a internet como o telefone, sendo este o
lugar onde nos encontramos enquanto falamos ao telefone. Durante o
século XXI, estamos passando e continuaremos a passar por diversas
transformações no que se difere ao ciberespaço, são estas um “processo de
negociação, distorção, apropriação a partir da nova dimensão espaço-
temporal de comunicação e informação planetárias” (LEMOS, 2007, p. 127).
22
Este termo “ciberespaço” foi inventado em 1984, pelo escritor
cyberpunk de ficção científica William Gibson em seu livro Neuromancer
(LEMOS, 2007, p. 127). Ele afirma que o ciberespaço é um espaço não-físico
ou territorial onde circulam diversas informações através de um conjunto de
redes de computadores. Dizia Gibson que o ciberespaço é uma “alucinação
consensual”. Ela fazia uma caricatura do real, o que se passa no nosso
cotidiano, dizendo que a “matrix” é a mãe da civilização pós industrial onde
todos os cibernautas irão penetrar, esta será povoada por mais diversas
pessoas que formam tribos, “onde os ‘cowboys’ do ciberespaço circulam em
busca de informações” (LEMOS, 2007, p. 127).
O ciberespaço pode ser compreendido através de dois vieses, a rede
mundial de computadores ou algum lugar onde entramos através de uma
realidade virtual. Segundo Lemos, estas duas noções estão aos poucos se
fundindo, se interligando, pois ao mesmo tempo em que a redes vão
continuar interligadas entre si, também será possível através dos
computadores viver/experimentar uma realidade virtual através de mundos
virtuais em três dimensões. Sendo assim tornando o ciberespaço uma parte
vital da cibercultura, ele não está desconectado da realidade, funciona
como um complexificador do real, aumenta a realidade criando um espaço
físico em uma camada eletrônica, tudo isto devido à criação de ambientes
realísticos em três dimensões. “No lugar de um espaço fechado, desligado
do mundo real, o ciberespaço colabora para a criação de uma realidade
aumentada” (LEMOS, 2007, p. 128).
O ciberespaço segundo Lemos (2007, p. 128) é um espaço imaginário,
um não-lugar, sendo assim um lugar onde devemos “repensar a significação
sensorial de nossa civilização baseada em informações digitais, coletivas e
imediatas” (LEMOS, 2007, p. 128). É ainda um lugar mágico, um universo de
pura informação que se caracteriza pela onipresença, está o tempo todo
em toda a parte, e se forma pelo espaço não-físico junto com o tempo real.
23
Estes conceitos já nos mostram o homem unido a máquina, utilizando as
tecnologias para todos, em favor da informação conectada, informações
que percorrem o mundo e chegam a todos. O ciberespaço atualmente
pode ser visto como um “potencializador das dimensões lúdicas, eróticas,
hedonistas e espirituais na cultura contemporânea” ainda afirma que “com
o advento da cibercultura, a cultura contemporânea se coloca perante
uma verdadeira ‘info-gnose’, um rito de passagem em direção à
desmaterialização da sociedade pós-industrial” (LEMOS, 2007, p. 131).
Relacionado a isso, representar o real pode ser característica de
websites imersivos a partir da noção de virtual. “A palavra virtual vem do
latim medieval virtualis, derivado por sua vez de virtus, força, potência”
(LÉVY, 2003, p. 15). Sendo assim, o virtual pode ser definido como uma
potência do real. É possível exemplificar esta noção através do exemplo
citado: “A árvore está virtualmente presente na semente” (LÉVY, 2003, p. 15).
O virtual seria a semente e o real a árvore. Desta forma é possível pensar
estas interfaces imersivas a partir desta via do virtual como potência,
simulação de um real.
Não obstante a virtualidade das redes, nos tempos atuais estamos
vivendo o mundo das “não-coisas” que segundo Vilém Flusser (2007, p. 54),
são as informações. Estas apesar de sempre existirem, em momentos atuais
formam um contexto que nunca existiu antes, elas são informações
imateriais. São estas, imagens eletrônicas, como por exemplo, imagens que
se passam na TV, dados armazenados em um computador, filmes,
programas e hologramas, todos estes impalpáveis, os quais uma tentativa de
segurá-los com as mãos é totalmente impossível, sempre se fracassará. “Essas
não-coisas são, no sentido preciso da palavra, ‘inapreensíveis’. São apenas
decodificáveis” (FLUSSER, 2007, p. 54). Tudo isto cria uma ilusão “existencial”,
24
prova disto é que em tempos atuais o software13 se torna cada vez mais
caro que o hardware14. Segundo Flusser (2007, p. 56), a sociedade não se
preocupa mais em possuir coisas materiais, mas sim em ter maior
conhecimento. Não procuramos mais apenas uma bela casa e móveis,
procuramos uma viagem, um melhor estudo para nossos filhos, o consumo
de informação se tornou mais importante do que possuir coisas. “Todas as
coisas perderão o seu valor, e todos os valores serão transferidos para as
informações” (FLUSSER, 2007, p. 56). Estamos cada vez mais buscando possuir
informações também pelo motivo da transferência, de que atualmente o
mais importante não é a produção de coisas e sim o estudo e aprendizagem
da informação, sendo esta “dominada por grupos que dispõem de
informações privilegiadas, como por exemplo, a construção de usinas
hidrelétricas e armas atômicas, de automóveis e aeronaves, de engenharia
genética e sistemas informáticos de gerenciamento” (FLUSSER, 2007, p. 56).
Todos os grupos privilegiados que possuem o conhecimento da informação
vendem estes a outros grupos, mostrando a assim uma realidade diferente
de consumo de informação ao invés de coisas.
1.3 A noção de interação mediada por computador
Um tema inerente à observação do papel das interfaces neste cenário
da cibercultura é a interação. De acordo com Alex Primo, a interação
mediada por computador pode ser classificada de duas maneiras: mútua e
a reativa. A interação mútua não pode ser vista apenas como uma soma de
ações individuais. Este tipo de interação apresenta uma “processualidade
que se caracteriza pela interconexão dos sistemas envolvidos” (PRIMO, 2008,
p. 101). Além disso, para que aconteça uma interação mútua é necessário
que os interagentes possuam uma relação de interdependência, ou seja, um
necessita do outro para manter a interação durante um certo período de
13 Software – Parte lógica do computador, impalpável. 14 Hardware – Parte física do computador, palpável.
1.3 A noção de interação mediada por computador
25
tempo. Esta definição se concentra no relacionamento entre os
participantes e não em apenas algum participante específico. “Em virtude
da ênfase relacional no entre da interação, a interconectividade entre os
participantes torna-se o foco de estudo” (PRIMO, 2008, p. 102).
A interação mútua acontece somente quando duas ou mais pessoas,
alimentam suas conversas e/ou discussões de acordo com o que vai
acontecendo no espaço/tempo. A cada ação que acontece, a relação vai
tomando um rumo próprio que inicialmente é impossível de se prever, todas
essas ações vão definindo a relação entre os participantes. Durante estas
interações os participantes oferecem mutuamente definições de
relacionamento e cada um vai definindo a sua natureza, sendo
apresentada uns aos outros, com estes aspectos é a relação atual pode ser
afetada (positiva ou negativamente) e também algumas características
podem perdurar para relacionamentos futuros. Como afirma Primo:
Nas interações construídas conjuntamente, o próprio relacionamento entre os parceiros se altera. De acordo com eles, os processos dialógicos apresentam duas funções transformadoras: a) transformar a compreensão dos interlocutores da ação em questão e b) alterar as relações entre os próprios interlocutores (PRIMO, 2008, p. 106).
Essas relações mútuas possuem uma temporalidade, se desenvolvem
no tempo podendo perdurar por um longo período, ou apenas conversas
formais/triviais pouco exercidas e às vezes até perdidas durante este tempo
de relacionamento. Estes relacionamentos de interação mútua nunca “são”,
eles estão sempre “vindo a ser”, eles estão sempre em processo de
mutação, passam por diversas redefinições. Durante a vida, passamos por
diversos relacionamentos com pessoas diferentes, todos eles nos fazem se
criar uma visão de mundo, uma nova experiência que poderá ser levada a
diante ou não, cria uma seqüência de experiências que estarão sempre em
mudança. Em suma, pode-se afirmar que o “desenvolvimento da relação se
dá por processos recursivos, tendo em vista que cada comportamento tem
implicação sobre outros e sobre a definição do próprio relacionamento.”
26
(PRIMO, 2008, p. 112) Diferentemente de sistemas informáticos onde a
interação se da em âmbito no qual as alternativas já são previstas, e guiadas
por certos comandos considerados corretos ou verdadeiros. Durante uma
interação mútua os participantes, mesmo cada um tendo a sua própria
visão, eles poderão apresentar suas posições e no decorrer do debate,
acabar concordando com a posição de outro participante ou unindo as
duas visões formando uma nova, sem que isto trave a interação, como
travaria em um sistema informatizado. Dadas estas questões, Primo (2008, p.
116) afirma que as relações de interação mútua, devido a sua
dinamicidade, nos levam a constatar que uma relação nunca vai ser igual à
outra, mesmo que tenha estímulos equivalentes.
Na interação reativa “o intercâmbio é vigiado e controlado por
predeterminações” (PRIMO, 2008, p. 135), ou seja, quando uma pessoa
interagir com uma máquina alopoiética, ou seja, que não possui autonomia,
ela será condicionada a certos padrões, tendo um limite e condições já
definidos e previstos anteriormente. Este tipo de interação também prevê
troca continua de informações apenas entre máquinas, “dois computadores
podem ser configurados para trocarem informações entre si continuamente,
sem que haja a necessidade que um técnico fique dedicado a solicitar tais
intercâmbios” (PRIMO, 2008, p. 135). Este intercâmbio é regido por instruções
que fazem as máquinas funcionarem de acordo com o que o programador
previu, portanto, a comunicação entre estas máquinas não é regida por elas
mesmas, anulando a recursividade da interação mútua. As máquinas
apenas funcionam (tal qual foram programadas), não existe conflito nem
cooperação. O termo conflito tratando de linguagem informática se trata
de um erro no sistema que segundo Primo apenas “prejudica o
processamento, frequentemente causando o término da interação” (PRIMO,
2008, p. 136). Os computadores são máquinas teleonômicas, ou seja, elas
são reguladas e ajustadas para uma certa finalidade, dentro deles os
27
programas e o hardware possuem esta mesma característica, eles tem
finalidades específicas, cada um serve para algum serviço, como atender
demandas ou resolver problemas. Computadores, em geral, dependem das
finalidades para os quais foram produzidos. De acordo com Primo (2008)
Máquinas alopoéticas seguem o seu funcionamento teleonômico
independentemente de quem está interagindo com ela, é um sistema
programado. As reações de software e hardware serão sempre as mesmas,
não importando quem está no comando no momento.
Uma diferença entre estas máquinas e o sistema humano é como elas
reagem com algum erro de software, por exemplo, se um dado momento a
máquina inesperadamente parar de funcionar, todos os seus dados poderão
ser reproduzidos exatamente como em seu estado inicial através de discos
de recuperação e sistemas de backup15. Também é possível passar as
mesmas informações para outros computadores. Já em seres humanos é
impossível reproduzir em outra pessoa ou retornar um estado cognitivo
anterior.
As interações mútuas e as reativas segundo Primo (2008, p. 139)
partem de duas visões diferentes de comunicação e também fundamentam
práticas diferentes, ou seja, “não são apenas posturas teóricas que inspiram
o pensar e o olhar, pois também, condicionam o próprio fazer” (PRIMO, 2008,
p. 139) estas são características que devem ser consideradas para
compreender os contrastes entre estas interações.
1.4 Um olhar sobre o Imaginário
Em paralelo as noções que desenvolvemos até o presente momento,
tendo em vista o caráter desta pesquisa, faz-se necessário uma revisão a
partir das teorias do imaginário. Estas noções podem ajudar a compreender
15 Backup – Cópia de segurança, uma cópia de dados salvos do computador caso sejam perdidos acidentalmente ou por erro do sistema.
1.4 Um olhar sobre o imaginário
28
um pouco da complexidade da experiência usuário que pode ser
fundamental no pensamento de um projeto de design. O imaginário faz
parte de nossas vidas, pois “todo imaginário é real. Todo real é imaginário”
(SILVA, 2006, p. 7). Segundo Juremir Machado da Silva, somos movidos pelos
imaginários que criamos, só existimos no imaginário. Pode se dizer por
definição que o imaginário é “um desafio, uma narrativa inacabada, um
processo, uma teia, um hipertexto, uma construção coletiva, anônima e sem
intenção. O imaginário é um rio cujas águas passam muitas vezes no mesmo
lugar, sempre iguais e sempre diferentes” (SILVA, 2006, p. 8). Ou seja, o
imaginário é algo que está sempre em mudança e construção mesmo sem
percebermos isso.
O imaginário, no sentido antropológico, é uma forma de incorporar o
real, de aceitarmo-nos inconscientemente, ou quase, no modo em que nos
introduzimos na sociedade e como nos partilhamos com o mundo. O
indivíduo penetra no imaginário pela “compreensão e aceitação de suas
regras; participa dele pelos atos de fala imaginal (vivências) e altera-o por
ser também um agente imaginal (ator social) em situação” (SILVA, 2006, p.
9). Porém, segundo este autor, o imaginário não pode ser compreendido
apenas como um conjunto de imagens, não é um álbum de fotografias
mentais, nem um lugar onde se encontra a memória individual ou social.
Também não se trata de um pensamento artístico sobre o mundo. “O
imaginário é uma rede etérea e movediça de valores e de sensações
partilhadas concreta ou virtualmente” (SILVA, 2006, p. 9). Um sentido mais
geral da palavra e compatível com vários sentidos atribuídos ao termo foi
criado por Michel Maffesoli interpretado por Juremir da Silva, estilos de vida,
afetos, lembranças e sensações, e ao mesmo tempo, todas juntas formando
uma identidade de grupo/tribal, sendo estes uma força, um catalisador e
uma energia.
29
O imaginário é ao mesmo tempo um reservatório e um motor.
Reservatório, pois “através de um mecanismo individual/grupal, sedimenta
um modo de ver, de ser, de agir, de sentir e de aspirar ao estar no mundo”
(SILVA, 2006, p. 12) o imaginário forma uma marca individual ou grupal do
que vivemos através de uma distorção involuntária do real, o imaginário
surge no real, logo se tem a estruturação do ideal e por fim volta ao real
gerando um elemento impulsor. E torna-se motor pois é “um sonho que
realiza a realidade, uma força que impulsiona indivíduos ou grupos. Funciona
como catalisador, estimulador e estruturador dos limites das práticas” (SILVA,
2006, p. 12). O homem só concretiza seus desejos e ambições, pois possui um
imaginário que o propulsiona a agir, podendo esta ação ser positiva ou
negativa. Somos movidos por estas ambições mas também por paixões,
identificações e modelos, que podem mudar de uma pessoa para outra.
Sendo estes impulsos podendo ser racionais ou não-racionais. Silva nos
apresenta como se constroem esses imaginários, o individual se dá
essencialmente por “identificação (reconhecimento de si no outro),
apropriação (desejo de ter o outro em si) e distorção (reelaboração do outro
para si)” já o imaginário coletivo se forma por contágio: “aceitação do
modelo do outro (lógica tribal), disseminação (igualdade na diferença) e
imitação (distinção do todo por difusão de uma parte)” (SILVA, 2006, p. 13).
O imaginário é um mecanismo onde nos reconhecemos nos outros e assim
reconhecemos a nós mesmos e é determinado pela ideia de fazermos parte
de algo.
As tecnologias do imaginário buscam analisar diversos fatores que
ocupam as bacias semânticas de cada sujeito, tendo em vista descobrir os
principais "dispositivos de fabulação/mitificação que semeiam possibilidades
criativas, grãos de percepção e concentrados existenciais a partir de
choques perceptivos" (SILVA, 2006, p. 73). As tecnologias do imaginário são
uma “disciplina encarregada de estudar a produção virótica de signos
30
capazes de vir alimentar as águas de uma bacia semântica” (SILVA, 2006, p.
77). Dentro da sociologia compreensiva, procura perceber-se diversos
aspectos sem restrição: perceber o mesmo em muitos e ao mesmo tempo o
diferente em poucos. Na análise sociológica são investigados objetos
quantificáveis e não-quantificáveis, passíveis ou não de observação em
algum tipo de cadeia repetitiva como de indivíduo para indivíduo ou como
de grupo para grupo.
Todos nós durante a vida passamos por diversas experiências estéticas
e visuais, como ver uma obra arte, um filme, um website ou um jogo. Todas
essas experiências fazem parte da nossa vida e entram em nossa mente,
algumas ficam marcadas outras não. Essas quais ficam marcadas formam
uma bacia semântica imaginária em nossas mentes. Todos nós possuímos um
imaginário individual. Porém, quando interagimos com outras pessoas, cria-se
um imaginário coletivo onde informações são inseridas e retiradas através do
imaginário de outras pessoas a partir do momento em que interagem, tanto
através de mediações ou diretamente. “Pode se dizer que o imaginário é o
trajeto antropológico de um ser que bebe numa “bacia semântica”
(encontro e repartição de águas) e estabelece o seu próprio lago de
significados” (SILVA, 2006, p. 11).
Esta bacia semântica que cada um carrega consigo está em
constante movimento através de seus afluentes que são “os canais (de
televisão), os provedores (de internet), os fluxos comunicacionais, as redes
(informativas e de contato) e as correntes (de significados)” (SILVA, 2006, p.
77). Estes afluentes se espalham por entre a sociedade, criando consigo
novos pensamentos imagéticos que ficam guardados em nossas mentes.
Com o tempo, são adicionados mais elementos e outros são retirados, sendo
possível também que em algum momento da vida estes que foram retirados
voltem a fazer parte de nossas bacias semânticas. Porém, não serão como
foram antigamente. Eles podem voltar, mas nunca serão iguais e nem
31
provocarão as mesmas sensações. Nossas bacias semânticas orientam o
nosso trajeto antropológico que mostram a direção e o conhecimento do
homem, dentro de uma “errância” existencial que cada um carrega
consigo.
32
2. OPÇÕES METODOLÓGICAS
O imaginário, correlato a outras noções vistas na revisão teórica, será o
ponto de partida do estudo sobre websites imersivos. Neste âmbito, o estudo
se dará através do método da sociologia compreensiva, a qual aceita a
“presença do imponderável, do acaso, do etéreo na cultura” (SILVA, 2006, p.
16). O outro componente de observação será a análise estrutural da
interface a partir de técnicas de pesquisa do design de interface. Serão
observados aspectos como estrutura da informação e o design visual de
interfaces.
Para pesquisar sobre o imaginário presente nas bacias semânticas dos
usuários é necessário “estar à altura do cotidiano” (WEBER apud SILVA, 2006,
p. 73), ou seja, não apenas demonstrar fatos, este pesquisador deve
“mostrar, dar a ver, fazer vir, desentranhar, fazer emergir, revelar, descobrir,
desvendar, expor a luz” (SILVA, 2006, p. 73). Este pesquisador não deve se
ater ao passado e nem ao futuro mas sim captar e narrar bem o presente,
através da fluência, o extraordinário e a complexidade do vivido. As
narrativas do vivido que, segundo Silva (2006, p. 83), são “biografias de
atores sociais contemporâneos em movimento” será um aspecto a ser
abordado neste trabalho. Para ser possível esta compreensão o pesquisador
do imaginário se utiliza da narrativa do vivido: se torna um “etnógrafo das
emoções e das práticas, a exemplo de um repórter de todas as paixões e
acontecimentos do cotidiano” (SILVA, 2006, p. 79). O pesquisador se torna
parte deste objeto de estudo, visando compreende-lo a partir das bacias
semânticas dos participantes do imaginário e tornando-se a pessoa que o
traduz. Pesquisar sobre o imaginário acaba por nos tornar parte dele, pois, “o
pesquisador do imaginário mergulha na bacia semântica do outro e trilha
seu próprio trajeto antropológico, na contramão das verdades de
acostamento e das certezas de retrovisor. Torna-se ele mesmo parte do
imaginário repisado” (SILVA, 2006, p. 75).
2. OPÇÕES METODOLÓGICAS
33
Além da sensibilidade proporcionada pelo imaginário, e pelas teorias
revisadas, o caminho desta pesquisa também irá considerar alguns
repertórios próprios ao design de interfaces, especialmente a arquitetura de
informação e o design visual, tendo como definição para este recorte o
significado destas fases na metodologia dos planos da experiência do
usuário de Garrett (2003, p. 33). A arquitetura de informação se refere à
estrutura de informação (fluxogramas) e o design visual diz respeito às
opções formais/estéticas do projeto.
Tendo em vista estas escolhas, nosso caminho partirá de duas fases
complementares. A primeira é a observação do website da cervejaria
Bohemia. Esta observação será feita a partir de uma análise do sistema da
interface, tendo em vista, como referido acima, a arquitetura da informação
e o design visual. Em particular, será feita a análise de um ambiente em
especial da interface que é a Sala do Mestre. Quanto à arquitetura da
informação, o fluxograma do website será reinterpretado, tendo como
referência o Vocabulário Visual de Garrett, que tem como função descrever
“a estrutura e/ou fluxo da experiência do usuário de um website” (GARRETT,
online, 2002)16. Primeiramente, é feita a macroestrutura do website onde são
definidos aspectos da “visão geral” do website, em seguida, é feita a
microestrutura, onde são estruturados aspectos específicos. Dentro da
arquitetura de informação “o diagrama deve enfatizar a estrutura conceitual
e organização de conteúdo” (GARRETT, online, 2002). E quando se trata do
design de interação “o diagrama deve enfatizar como o usuário flui através
de tarefas definidas e quais os passos específicos dentro destas tarefas”
(GARRETT, online, 2002). Um modelo que engloba essas duas áreas podem
ser descritos da seguinte forma: o sistema deve mostrar “caminhos” para
usuário, então este se “move” dentro dos caminhos e por fim estas ações
fazem com que o sistema gere “resultados”. Segundo Garrett após definir a 16 Disponível em: http://iainstitute.org/pt/translations/000332.html - Acesso em: 01/10/2011.
34
estrutura de informação do website, definimos como este website vai ser
visualmente ou seja como será o seu design visual, dentro deste
observaremos escala cromática e composição espacial do cenário 3D
abordando três fatores específicos: ritmo, equilíbrio e hierarquia segundo
conceitos de Ellen Lupton e Jennifer Phillips (2008).
Não obstante ao fato de que esta pesquisa consider,a as dinâmicas
do imaginário na interface, esta observação será cruzada com testes e
entrevistas com consumidores o qual consiste na segunda parte de
observações. Esta técnica de pesquisa visa à coleta de informações sobre
determinado objeto, onde o pesquisador interage diretamente com o
pesquisado. Nesta técnica, o pesquisador “visa apreender o que os sujeitos
pensam, sabem, representam, fazem e argumentam” (SEVERINO, 2007, p.
124). O tipo de entrevista a ser utilizada é a não-diretiva, onde segundo
Antônio Joaquim Severino, são colhidas informações por meio de um
discurso livre, onde o entrevistado pode se expressar livremente e o
entrevistador interfere eventualmente apenas para estimular o entrevistado.
Este tipo de entrevista deve deixar o “informante à vontade para expressar
sem constrangimentos suas representações” (SEVERINO, 2007, p. 125). Como
faremos uma abordagem qualitativa, a escolha será a de realizar esta
investigação com quatro consumidores do produto, com faixas etárias
distintas: dois consumidores jovens, de 20 a 30 anos e outros dois na faixa de
40 a 50 anos. Para os testes, utilizaremos o modelo de resposta emocional
proposto por Felipe Memória (2005, p. 19) que busca compreender além do
aspecto funcional, procura aspectos emocionais e “elementos relacionados
à experiência do usuário, algo além da estética” (MEMÓRIA, 2005, p. 18)
com este teste pode ser possível, por exemplo, identificar o que pode ser
atraente a esta experiência do usuário em termos do contato com os
elementos visuais e da interação. Após os testes, procuraremos entrevistar os
usuários de forma a considerar o papel do imaginário na constituição destas
35
interfaces, tendo em foco o papel do pesquisador como “narrador do
vivido”.
Como mencionado na apresentação, a partir do objetivo de propor
um possível caminho metodológico para o projeto de websites imersivos,
vamos utilizar alguns autores que terão a função de nortear o trabalho na
observação da interface enquanto projeto de design. James Garrett foi um
dos norteadores, por possuir uma metodologia de caráter orientador para
criação de websites com base na experiência do usuário, e também por ele
explorar aspectos da arquitetura de informação, sendo esta última uma das
bases de análise deste trabalho. Além deste, outro norteador foi o Memória,
por possuir experiência em mídia interativa e usabilidade, e também, por
apresentar uma metodologia totalmente voltada para a internet e
experiência do usuário. No entanto, considera-se aqui a necessidade de
diálogo destas proposições com o imaginário e com as especificidades de
websites imersivos. Visto que pode ser possível uma compreensão mais
dialógica de método no design, onde designer e usuário acabam assumindo
dois papéis que se cruzam, “usuário também projeta e designer também
usa” (AMSTEL, 2006, online, p. 2)17.
A parte prática deste trabalho terá relação com a análise feita a partir
do website da cervejaria Bohemia, a medida que nos proporemos a
desenvolver o protótipo de um website imersivo sobre um determinado
produto. A proposta prática, assim como no website da Bohemia, terá,
também, a mesma estratégia de apresentar conhecimentos sobre o
produto. Será realizado um website com o foco em uma marca de surf,
apresentando uma linha de pranchas produzidas pela empresa com uma
proposta de imersão do usuário.
17 Disponível em: http://usabilidoido.com.br/arquivos/design_interacao_materialista_dialetico.pdf - Acesso em: 01/10/2011.
36
3. ANÁLISE DO WEBSITE DA BOHEMIA
A partir deste momento, serão feitas as análises da Sala do Mestre no
website da cervejaria Bohemia18. Como referido na parte metodológica, a
observação partirá do estudo da interface com relação à arquitetura de
informação e, em um segundo momento, do design visual. Não obstante, ao
final desta observação, a investigação será cruzada com testes e entrevistas
com os usuários, com o objetivo de observar os sentidos a partir do website e
tentar, com isso, estabelecer uma leitura da experiência tendo como ponto
de partida algumas teorias do imaginário.
Este website foi produzido pela agência Player19 e o projeto se intitula
como a primeira fábrica de cerveja virtual em 3D do mundo. A Ambev20 em
seu website institucional, fala da Bohemia valorizando aspectos históricos
pelo fato de ser a primeira cerveja do Brasil e por possuir tradição no
mercado. A marca utiliza uma ênfase em relacionar possíveis comidas para
serem degustadas junto a cada tipo de cerveja Bohemia, a degustação de
uma cerveja tradicional é um dos possíveis norteadores de suas campanhas,
esta característica é mostrada dentro da sala do mestre em um momento
onde se apresentam os diferentes tipos de Bohemia e quais os
acompanhamentos que melhor combinam com as cervejas e também na
propaganda impressa (figura 6).
18 Bohemia - Disponível em: http://www.bohemia.com.br - Acesso em: 17/10/2011. 19 Player - Disponível em: http://www.playercom.net/ - Acesso em: 11/11/2011. 20 Ambev - Disponível em: http://www.ambev.com.br/pt-br - Acesso em: 11/11/2011.
3. ANÁLISE DO WEBSITE DA BOHEMIA
37
Figura 6: Cerveja e acompanhamentos
Fonte: http://oquenaomataengorda.wordpress.com/2010/03/11/qual-bohemia-combina-melhor/
O website foi projetado como se fosse uma cervejaria antiga em
tempos passados. Essa estratégia pode ter sido usada pelo fato de a cerveja
Bohemia ser a primeira do Brasil. O projeto remete a tempos antigos trazendo
uma possível relação com o pioneirismo e tradição desta marca. A cerveja
Bohemia prima por qualidade em seus produtos, dentro da Sala do Mestre
podemos ver a modelagem de objetos que nos remetem à tradição e a
qualidade atrelada a isso no processo de produção. Primando pela
qualidade e tradição, a Bohemia criou uma propaganda impressa feita a
mão por um processo de litografia21, uma técnica antiga que nos remete a
tempos passados, como podemos ver essa técnica e a propaganda feita
em com fotografia e computação (policromia) na figura 7.
21 Litografia - Desenho feito em pedra.
38
Figura 7: Anúncio litográfico e policromático
Fonte: http://blog.ypsilon2.com/index.php/2008/11/06/bohemia-oaken-cerveja-exclusiva-e-campanha-com-6-mil-anuncios-feitos-a-mao/
É também é possível perceber uma relação entre a estética utilizada no
website com suas propagandas em impressos e até mesmo com o próprio
freezer e o balde de cerveja (figura 8) personalizado da marca.
Figura 8: Freezer e balde de cerveja da Bohemia
Fonte: http://www.quebarato.com.br/lojao-do-freezer__49052B.html http://casadaidea.com.br
39
3.1 O fluxo de informação no website da cerveja Bohemia
A partir deste momento, faremos o mapeamento do fluxo de
informação da Sala do Mestre no website da cerveja Bohemia. Para tanto,
utilizaremos como ferramenta o vocabulário visual de arquitetura de
informação proposto por Garrett (online, 2002). Esta é uma forma de
representar a estrutura e/ou fluxo de informações de um website com a
utilização de símbolos e figuras. Este vocabulário tem em sua natureza ser
simples e passível de compreensão rápida, e é integrante de boa parte das
metodologias projetuais geralmente utilizadas para o desenvolvimento de
interfaces digitais.
Para uma maior compreensão sobre o fluxograma, faz-se necessário o
esclarecimento de alguns padrões que serão utilizados nesta análise que
estão expressos na figura 9. As páginas web são representadas pelo
retângulo. Os conectores e setas representam os caminhos possíveis do
website. Os conectores simples representam as escolhas reativas disponíveis
aos usuários, um conector condicional representado pela linha tracejada é
quando um caminho pode ou não ser apresentado ao usuário dependendo
de sua ação. As setas cortadas que representam um caminho onde não é
possível voltar ao anterior. Já o semi-círculo é “usado em casos onde a ação
do usuário gera resultados múltiplos simultâneos” (GARRETT, online, 2002), a
figura do trapézio representa os vários caminhos que podem ser escolhidos e
estes sem ser mutuamente exclusivos e por fim, os retângulos com cantos
arredondados representam áreas e espaços da interface 3D.
Figura 9: Legenda de símbolos gráficos Fonte: produzido pela autora
3.1 O fluxo de informação no website da Cervejaria Bohemia
40
O caminho utilizado para esta parte do trabalho consistiu na
realização do mapeamento visual da informação e, posteriormente, uma
pequena análise sobre a estrutura que o website apresenta. Na figura 10
pode-se perceber o resultado deste mapeamento. Figura 10
Com relação a observação do fluxo de informação da Sala do Mestre,
primeiramente, tendo como premissa o trabalho de Garrett (2003)
acreditava-se que por o website da cerveja Bohemia ser imersivo ele deveria
possuir uma estrutura de navegação primordialmente orgânica. Porém, com
a reinterpretação do fluxograma, foi possível ver que o website tende a uma
navegação orgânica híbrida com a navegação hierárquica. Não existe o
predomínio de nenhum dos dois tipos de navegação.
Nesta parte faremos a observação do design visual que dentro dos
planos da experiência do usuário de Garrett consiste no “tratamento visual
do texto, elementos gráficos da página e componentes de navegação”
(online, 2002). Os aspectos visuais do website são a primeira coisa que os
usuários notam. Nesta parte os aspectos de construção do website são
arranjados de forma visual e estética. O design visual reforça e clarifica os
aspectos estruturais do website.
3.2.1 Cores
Começaremos esta observação a partir da paleta de cores utilizadas
na interface. Analisar e compor as cores em uma interface é tarefa
protocolar no trabalho da direção de arte em um projeto. De acordo com
Lupton e Phillips, as cores têm relação com a construção estética do projeto,
no sentido de permitir uma percepção sensória do usuário: “a cor pode
exprimir uma atmosfera, descrever uma realidade ou codificar uma
informação” (LUPTON; PHILLIPS, 2008, p. 71). Segundo Tom Fraser e Adam
3.2.1 Cores
3.2 O design visual na Sala do Mestre
Figura 10: Fluxograma do website da BohemiaFonte: Produzido pela autora
42
Banks (2007, p. 12), se pensarmos em alguma marca famosa provavelmente
lembraremos as suas cores. É uma forma de identificação. As cores podem
ser interpretadas de diferentes maneiras a partir do repertório cultural e
estético de cada sujeito. Segundo Fraser e Banks, a psicologia das cores teve
inicio com a teoria das cores de Goethe, publicado em 1810 (FRASER; BANKS,
2007, p. 48). Goethe estudava as cores de acordo com a percepção
humana, como respondemos e nos relacionamos com a cor. “Goethe
recorreu à linguagem e conceitos idiossincrásicos ao expor as suas idéias,
aludindo a efeitos sensuais-morais, privação e poder” (FRASER; BANKS, 2007,
p. 48). Apesar deste tratamento da cor, por vezes, tender a um
determinismo, os estudos de Goethe podem auxiliar o trabalho do designer a
partir do domínio deste fundamento da linguagem visual.
A interface da Sala do Mestre possui em sua composição quatro cores
principais, marrom, amarelo, branco e preto. Na interface do website da
cerveja Bohemia essas três cores, dependendo do objeto em questão,
possuem variações de intensidade, vivacidade ou esmaecimento, e valor,
claro ou escuro, luminosidade ou brilho. Marrom e amarelo são cores
análogas, elas possuem temperatura de cor equivalentes e também tem
pouco contraste e assim criam uma harmonia natural, “pois cada cor tem
algum elemento em comum com as outras da sequência” (LUPTON; PHILLIPS,
2008, p. 72). A partir da teoria das cores, como ponto de partida, podemos
perceber alguns valores atrelados a esta paleta. Na figura 11, há a
especificação dos valores agregados a cada uma delas, a partir de Fraser e
Banks (2007, p. 49).
43
Figura 11: Psicologia das cores Fonte: Imagem criada pela autora
Ao observar a aplicação desta paleta no website da cerveja Bohemia,
podemos perceber uma relação com a estética da própria cerveja, a partir
da cor amarela, da embalagem e de algumas texturas utilizadas nas peças
publicitárias (tons terrosos, aludem ao antigo e o tradicional, ao artesanal).
Na composição da cena o chão é de textura de madeira, assim como todos
os móveis e alguns detalhes de cena, como a moldura dos quadros e alguns
elementos decorativos, o uso de textura de madeira nos remete a algo
tradicional e de boa qualidade, pois além da madeira os móveis tem uma
aparência de antigos, que possuem maior qualidade de fabricação e
acabamento. É possível ver que as cores utilizadas para compor a interface,
também aparecem nas cores dos diferentes tipos de cerveja fabricadas
pela cervejaria Bohemia. A cena geral do website é levemente iluminada, o
que torna o ambiente mais intimista e também remete a sensação de fim de
tarde, momento onde algumas pessoas se encontram para relaxar,
conversar e tomar uma cerveja com os amigos.
3.2.2 Equilíbrio, ritmo e hierarquia
Procuramos equilíbrio em todas as coisas em nossa vida, “é uma
condição humana fundamental” (LUPTON; PHILLIPS, 2008, p. 29). Equilíbrio é
uma espécie conforto que buscamos em nossas vidas. Todo este conforto
gerado pelo equilíbrio que buscamos é relativizado em interfaces, em design
3.2.2 Equilíbrio, ritmo e hierarquia
44
a forma é balizada pelo equilíbrio. “As relações entre elementos em uma
página nos lembram as relações físicas. O equilíbrio visual acontece quando
o peso de uma ou mais coisas está distribuído igualmente ou
proporcionalmente no espaço” (LUPTON; PHILLIPS, 2008, p. 29). Projetos
simétricos são naturalmente estáveis. Para gerar estabilidade e simetria em
design são utilizados diferentes tamanhos, texturas, valores, cores e formas
contrastantes buscando enfatizar ou contrabalançar os elementos da
página.
Como falado anteriormente, o website possui um equilíbrio natural em
questão de cores por se utilizar de cores análogas em sua composição. A
primeira tela (figura 12) do website, nos mostra a mesa do mestre cervejeiro
com uma janela atrás, ao lado da mesa existem alguns objetos como os
abajures e a poltrona que dão equilíbrio a esta cena, sendo um abajur em
cada lado, um maior e outro menor, assim torna o equilíbrio assimétrico além
de fazer o olhar tender mais ao lado onde os objetos que são maiores, o que
pode ser uma estratégia para seguirmos caminhos pelo website.
45
Figura 12: Primeira tela da Sala do Mestre Fonte: Screenshot capturado pela autora
Seguindo este possível caminho, na segunda tela (figura 13) vemos
como objetos principais de cena uma lareira e uma cristaleira. Em segundo
plano, percebemos alguns quadros pendurados na parede. Esta visão está
equilibrada pelo peso dado as partes inferiores de tela, com a lareira e
também pela cristaleira ser mais avantajada e a leveza na parte superior
mostrando apenas os quadros em um fundo branco e a cristaleira sendo
mais enxuta na parte de cima.
46
Figura 13: Segunda tela da Sala do Mestre Fonte: Screenshot capturado pela autora
Seguindo a movimentação pelo website vemos uma terceira tela
(figura 14), esta cena nos mostra um equilíbrio assimétrico, pois em uma
metade da tela temos elementos com bastante informação como a mesa e
o quadro ao fundo, já na outra metade da cena temos apenas uma porta
onde no website ela é meramente decorativa, nesta tela o contraste de luz
e sombra ajuda a equilibrar ela como um todo.
47
Figura 14: Terceira tela da Sala do Mestre Fonte: Screenshot capturado pela autora
Por fim a quarta tela (figura 15) da Sala do Mestre nos apresenta
muitos quadros na parede, uma mesa auxiliar e outra cristaleira, a tendência
desta tela era de a cristaleira pesar mais que o resto da cena, a utilização de
sombra sob a cristaleira e iluminação nos quadros nos dá um equilíbrio total.
A utilização de diversos quadros ao lado da cristaleira ajuda a nenhum dos
lados pesar mais que o outro. Por fim, foi possível através desta analise
perceber que a interface no geral tem composição equilibrada, fazendo-se,
principalmente, por efeitos de iluminação da modelagem 3D e também
pela composição de objetos em cena.
48
Figura 15: Quarta tela da Sala do Mestre Fonte: Screenshot capturado pela autora
O ritmo em um projeto é algo bastante importante, através dele
podemos nos entediar ou nos maravilhar com as cenas. Também podemos
identificar fatores como velocidade ou sincronia. Todas as pessoas usam o
ritmo para expressar alguma coisa no espaço/tempo. “O ritmo é um padrão
forte, constante e repetido: o toque dos tambores, o cair da chuva, os
passos no chão” (LUPTON; PHILLIPS, 2007, p. 29). O ritmo se dá por meio de
variações de formas e pode nos indicar um caminho a seguir dentro de uma
interface ou peça gráfica. A Sala do Mestre possui elementos em sua
interface que geram um ritmo linear, a parede da sala é composta por três
partes: uma grande faixa de madeira escura no inferior, uma parte branca
49
no meio e por fim uma pequena faixa de madeira na parte superior. Estes
três elementos juntos formam ritmo linear encontrado em todas as telas do
website, além de dar ritmo para as telas, também dão uma noção de
continuidade. Outra estratégia para gerar ritmo foi de intercalar telas com
tratamento parecido (figura 16), a primeira tela tem como foco da
composição uma mesa e uma janela, na segunda há uma lareira e uma
cristaleira, na terceira uma mesa e por fim a quarta tela é composta por uma
pequena mesa auxiliar e uma cristaleira. A disposição destes elementos
nesta ordem, fazem com que em momentos os objetos façam nos perceber
as quebras de padrão e logo após voltam para um cenário parecido com
outro visto anteriormente.
Figura 16: Sequência de telas da Sala do Mestre Fonte: Screenshot capturado pela autora
Observando cada tela em separado também é possível ver alguns
elementos que geram ritmo a cena, na primeira tela os três abajures geram
um ritmo escalonar, da esquerda para direita eles vão crescendo
gradualmente (figura 17).
50
Figura 17: Abajures/Ritmo Fonte: Screenshot capturado pela autora
Na segunda tela encontramos ritmo linear nos quadros ao fundo na parede,
são três quadros um do lado do lado do outro, com espaçamento idêntico
entre um e outro (figura 18).
Figura 18: Quadros/Ritmo Fonte: Screenshot capturado pela autora
Logo abaixo dos quadros vemos livros em cima da lareira organizados
primeiramente de forma crescente, no centro existe uma quebra de espaço,
e por fim eles estão organizados de forma decrescente, estes livros geram
um ritmo escalonar (figura 19).
Figura 19: Livros/Ritmo Fonte: Screenshot capturado pela autora
51
Na cristaleira as garrafas de cerveja são organizadas da mesma forma nas
prateleiras, uma garrafa e dois copos que se repetem três vezes em cada
prateleira, esta forma de organização também gera um ritmo, por fim na
parte inferior da cristaleira que é separada por dois módulos, existem três
garrafas em cada uma e esta disposição espacial também gera ritmo (figura
20).
Figura 20: Cristaleira/Ritmo Fonte: Screenshot capturado pela autora
Na terceira tela o ritmo é gerado por alguns módulos da mesa, eles são
iguais em um formato quadrado e dispostos um ao lado do outro. Além disto,
o quadro ao fundo da parede possui uma ilustração onde os elementos
gráficos seguem um padrão e este gera ritmo a este quadro (figura 21).
52
Figura 21: Quadro/Ritmo Fonte: Screenshot capturado pela autora
Por fim na quarta tela os elementos que geram ritmo a cena são os dois
vasos de flores em cima da mesa auxiliar, eles estão dispostos um em cada
canto da mesa, além disto outro elemento que gera ritmo nesta tela são as
gavetas desta mesa, são três gavetas dispostas com a mesma distância
entre uma e outra (figura 22).
Figura 22: Vasos & gavetas/Ritmo Fonte: Screenshot capturado pela autora
A hierarquia é uma constante tanto em nossas vidas como na
execução de um projeto de design. Em nossa vida cotidiana somos movidos
por certas hierarquias, estas definem a ordem de importância dentro de um
53
grupo social. “A posição que ocupamos define o que somos em nossa
cultura” (LUPTON; PHILLIPS, 2007, p. 115). Assim como hierarquia define
caminhos em nossas vidas, ela também define em projetos de design. “A
hierarquia visual controla a transmissão e o impacto da mensagem”
(LUPTON; PHILLIPS, 2007, p. 115). Variações de cor, escala e posicionamento
pode definir uma hierarquia visual dentro de um website.
Inicialmente podemos ver uma hierarquia clara entre as telas da Sala
do Mestre, pois somos levados diretamente a uma tela específica, dentro
dela é possível identificar a mesa como ponto principal, pois além de ser
maior objeto, está centralizado com uma grande janela ao fundo o que
gera um caminho ao olhar (figura 23).
Figura 23: Mesa & janela/Hierarquia Fonte: Screenshot capturado pela autora
Analisando a segunda tela vemos que o ponto de atenção é a cristaleira
com as garrafas e copos, neste momento a hierarquia é dada por uma
maior iluminação deste objeto, o quadro com o nome da cervejaria ao lado
da cristaleira, gera um segundo foco que também é gerado por iluminação,
porém esta é menos intensa do que a da cristaleira (figura 24).
54
Figura 24: Cristaleira & quadro/Hierarquia Fonte: Screenshot capturado pela autora
Na terceira tela o que chama mais atenção ao olhar é a porta de madeira
que não possui interação com o usuário, é meramente decorativo, em um
segundo momento o nosso olhar tende ao quadro na parede onde é
mostrado o processo de fabricação da cerveja e que também nos leva para
outras partes da fábrica virtual (figura 25).
55
Figura 25: Porta & quadro/Hierarquia Fonte: Screenshot capturado pela autora
Por fim, na quarta tela inicialmente não é possível definir a hierarquia, porém
ela é novamente gerada por iluminação e leva o olhar aos quadros
pendurados na parede que contam a história da Bohemia (figura 26).
Figura 26: Quadros/Hierarquia Fonte: Screenshot capturado pela autora
3.3 Interação dos usuários com a interface
Para uma compreensão mais ampla das experiências, como referido
na parte metodológica, neste momento do trabalho foi definido a técnica
de pesquisa de entrevista não-diretiva, optou-se por entrevistar quatro
3.3 Interação dos usuários com a interface
56
pessoas com faixas etárias distintas, dois de 20 a 30 anos e mais dois de 40 a
50 anos, outro requisito foi de que utilizassem a internet regularmente e
fossem consumidores do produto. Primeiramente foi explicado como
funcionariam os testes e entrevistas, logo foi pedido que navegassem no
website pelo tempo que lhes fosse conveniente. Esta navegação teve
gravação de tela e áudio para análise posterior. Após os entrevistados
navegarem pelo website foi pedido que respondessem o teste de resposta
emocional de acordo com a impressões do website. E por fim, foi realizada a
entrevista em um formato de conversa, com intenção de deixar os usuários a
vontade para expressarem o que lhes interessasse. Esta entrevista foi
gravada e depois transcrita para um documento. Todos os entrevistados
coincidentemente não conheciam o website, o que propiciou a vivência
das mesmas experiências em níveis iguais. Todos estes aspectos foram
analisados e são apresentados no decorrer deste trabalho.
Foi proposto aos entrevistados que visitassem o website da Bohemia
durante um tempo que lhes fosse conveniente, todos foram orientados a
visitar em especial a Sala do Mestre por esta ser o nosso objeto de estudo. Os
entrevistados ficaram livres para navegar por onde quisessem. Pode
observar-se que o tempo de permanência no website não foi muito longo
quanto ao volume de conteúdo proposto. A maioria dos entrevistados ficou
explorando o website durante aproximadamente 15 minutos, o que pode ser
considerado expressivo se comparado a websites com conteúdo
hierárquico, porém, para projetos imersivos, talvez possa não ser um número
expressivo por conta da noção de experiência. Nota-se também que o
caminho percorrido pelos entrevistados foi bastante parecido, não
exatamente na mesma ordem, mas todos viram as mesmas informações.
Primeiramente, como induzido pelo website, os entrevistados geralmente
clicam na mesa com as funções do mestre. Eles olham a opção de deixar
uma mensagem. Acredita-se que esta parte foi bastante vista por estar
57
centralizada na tela. Ainda na mesa grande, parte dos entrevistados fizeram
cadastro no website. Nota-se que quando estão explorando os links nesta
tela muitos clicam em links que aparecem em outras telas como por
exemplo a receita e tipos de Bohemia. Muitos dos entrevistados saem da tela
da mesa diretamente por esses links e não pelo link "voltar" e também depois
acabam clicando nestes mesmos links mostrados em telas diferentes.
A parte de processo de fabricação da cerveja foi visitado por todos os
entrevistados, eles responderam o "verdadeiro ou falso" sobre componentes
da cerveja e muitos se mostraram impressionados por errar o teste. Isso
despertou o interesse dos usuário para os ingredientes da cerveja. Após isso
os entrevistados viram quais eram os processos de fabricação e cada uma
de suas etapas como estocagem, beneficiamento e outras. Outra parte
acessada foi a enciclopédia que traz diversos aspectos e curiosidades sobre
as cervejas da marca Bohemia. A maioria dos entrevistados viu todas as
partes da enciclopédia.
Outro conteúdo que despertou interesse foram os tipos de cerveja.
Além disto, nesta parte, são mostrados os copos ideais, além de textos e
vídeos que não foram vistos pelos usuários. Um último aspecto, considerado
interessante nesta parte, é que muitos dos entrevistados utilizaram os links de
apoio, que ficam logo a abaixo da tela, ao invés de utilizar os links nas telas,
mas isso não aconteceu sempre, apenas em algumas vezes. Um aspecto
interessante analisado foi que os usuários não exploraram todos os links
apresentados pelo website, talvez o grande número de informações tenha
gerado este comportamento por parte dos usuários, este é um aspecto que
deve ser pensado no momento de se projetar um website imersivo, por vezes
é mais interessante um conteúdo menor e mais focado do que um maior e
generalista.
58
3.4 O imaginário da Sala do Mestre na experiência dos usuários
Neste momento vamos observar, a partir de testes e de entrevistas,
como pode ser significada a Sala do Mestre pelos usuários, a partir de suas
experiências com o website e como consumidores da cerveja Bohemia.
Durante esta etapa, primeiramente, foram realizados com usuários
testes de resposta emocional logo após eles interagirem com a interface da
Sala do Mestre. Este teste serve para apontar o pensamento emocional dos
usuários quanto ao website. Os testes são por um primeiro momento uma
forma de ver aspectos que mais chamam atenção dos usuários porém, para
um entendimento mais profundo sobre a experiência do usuário, são feitas as
entrevistas. Com a análise das entrevistas é possível ver que os pensamentos
se cruzam e formam uma espécie de imaginário coletivo a partir de alguns
elementos muito recorrentes na fala dos usuários, como a história, a tradição,
o fato de aprender algo novo e a qualidade ligada à cerveja Bohemia. É
possível ler isso a partir da ideia de que todo imaginário é coletivo por
excelência, "o imaginário é algo que ultrapassa o indivíduo, que impregna o
coletivo ou, ao menos, parte do coletivo". (MAFFESOLI, 2001, p. 75)
Cabe lembrar que para a realização das entrevistas foram escolhidas
pessoas que utilizam-se a internet regularmente e também que fossem
consumidores desta marca de cerveja. Estas entrevistas foram realizadas nas
casas de cada um dos entrevistados, a partir de certa informalidade, com
intuito de deixar o entrevistado a vontade para falar sobre seus pensamentos
sobre o website. Na faixa etária de 20 a 30 anos foram entrevistados Lucas
de Oliveira Castilho, 25 anos, consultor de vendas e Bruna Bueno Allemand,
20 anos, estudante de direito, e os entrevistados de 40 a 50 são Jorge Luis da
Silva, 40 anos, bancário e Luiz Carlos G. de Oliveira, 50 anos, bancário.
3.4 O imaginário da Sala do Mestre na experiência dos usuários
59
Foi possível observar que os aspectos que a empresa prima para sua
cerveja em suas campanhas publicitárias aparentemente são percebidos
pelos usuários. Ao perguntar sobre os atrativos da cerveja os entrevistados
responderam que aroma e corpo são aspectos que os levam a optar pela
Bohemia entre outras marcas. Isso pode ser observado com a fala de três
entrevistados, Bruna diz "a cor, o aroma, o sabor", Jorge fala "a textura dela,
sim, o sabor e a textura mesmo, o corpo da cerveja" e por fim Luiz afirma "o
sabor, a textura dela. É um tipo de cerveja que é mais encorpada".
Observa-se que a significação do valor da qualidade agregado à
marca parece ser percebido de forma clara pelos usuários, como falou
Lucas "o que é mais atraente na Bohemia é que ela tem uma tradição e
acaba passando maior credibilidade na hora da compra". A proposta do
site de ser interativo com o público é algo que foi bastante comentado
como um aspecto interessante do website, além disto, os entrevistados
falaram bastante sobre o conhecimento que é passado, acharam
interessante saber sobre como a cerveja é fabricada e todo o seu processo
de produção.
Este website foi construído com aspectos que remetem ao passado, foi
observado que este aspecto está presente nos imaginários. Todos os
entrevistados de forma ou outra comentaram sobre o website remeter à
lembranças do passado ou então lembrar épocas antigas. Primeiramente é
possível citar a fala de Luiz que relembrou tempos passados de sua própria
vida: "quando eu estudava, fiz biologia, fomos na fábrica da Brahma em
Passo Fundo, foi mostrado todos os passos de fabricação, degustação,
armazenamento, tudo". Também Jorge e Bruna observam a estética da
interface relacionada ao passado. Jorge relata que “lembra uma fábrica
antiga na verdade né, uma coisa tradicional no ponto de vista estético" e
Bruna que diz "é bem antigo e mostra características dos anos 30/50".
Apenas um dos entrevistados comentou sobre ter uma lembrança da
60
propaganda da Bohemia. Lucas disse: "me lembra uma propaganda da
própria cerveja, que vai mostrando as pessoas passando a cerveja por
diferentes épocas, mostrando a tradição da Bohemia de manter um produto
de qualidade por tanto tempo". A memória, junto com o aprendizado,
história pessoal e inserção no mundo dos outros segundo Silva (2006, p. 57)
pode ser parte integrante do imaginário como uma espécie biografia, uma
história de vida.
Um aspecto bastante lembrado foi quanto ao conhecimento sobre a
cerveja, os entrevistados se interessam bastante por saber os processos de
fabricação, podemos ver isto na fala de Luiz: "o
armazenamento/armazenagem, como ela é fabricada tudo isso eu gostei
de saber, porque eu não sabia, tomava porque gostava". O modo de
apresentação dos links no website tornou ele interessante e fácil de interagir
como falou Jorge "por ser 360º tu tinha visão de toda sala do site sem ser
uma coisa plana e achatada com links óbvios, então tu tinha que passar ali
pra investigar o que tinha, não era escancarado mas também não era
escondido, uma navegação fácil, boa".
A composição visual e a interação dos elementos foi importante no
momento dos usuários decidirem por navegar mais tempo, aspecto a ser
considerado quando se projeta um website imersivo. É o que fala Luiz
quando perguntado se gostou da composição dos elementos no website e
se foi fácil de navegar, "gostei muito, é bem fácil de navegar, é bem
tranquilo, tu vai pelos tópicos e vai chegando onde tu quer, pode voltar,
pode ir adiante".
De acordo com os entrevistados um website sobre uma marca de
cerveja deve sempre apresentar aspectos históricos sobre ela e também
sobre a composição da cerveja. O entrevistado Lucas, quando perguntado
se tinha vontade de saber mais sobre a Bohemia, e se sua experiência tinha
61
sido satisfatória neste sentindo responde que "foi satisfatória no sentido de
aprender mais sobre a história e fabricação da primeira cerveja no Brasil".
Uma das percepções mais presentes nas palavras dos usuários foi a
experiência de aprender com o conteúdo disposto no website de forma
imersiva. Como fala Jorge sobre o que não poderia faltar em um website de
cerveja "o modo como ela é fabricada, os produtos que compõem ela, o
local onde a fábrica está inserida porque isso também determina a
qualidade o acesso aos elementos da fabricação. A tradição da cerveja, a
tradição do que é fabricar uma cerveja".
Como dito anteriormente, websites imersivos tendem a levar o usuário
a explorá-lo por um maior tempo, foi possível notar que o website da
Bohemia conseguiu fazer esta estratégia funcionar como é possível nos
comentários de Jorge "tem alguns sites que são muito fortes as cores e isso é
cansativo, tu não consegue ficar muito tempo naquelas páginas e esse não
eu poderia ficar horas ali", Lucas também fala sobre isso "eu não iria navegar
tanto em um site de cerveja se ele não tivesse uma interação como o site da
Bohemia teve".
Foi possível perceber, de forma geral, na fala dos usuários algumas
questões colocadas sobre o imaginário. Alguns aspectos do website da
Bohemia foram percebidos por todos os entrevistados, tanto aspectos
funcionais como visuais. Todas essas percepções geram algum tipo de
impressão e sentimento, tudo isto é um imaginário que por si é "uma represa
de sentidos, de emoções, de vestígios, de sentimentos, de afetos, de
imagens, de símbolos e valores" (SILVA, 2006, p. 14). Além disso vimos
repetições, que foram comentadas durante este capítulo, nas falas dos
entrevistados, mesmo sem os entrevistados estarem juntos e sem saberem as
respostas uns dos outros acabam por formar um "patrimônio de grupo (tribal),
uma fonte comum de sensações, de lembranças, de afetos e de estilo de
vida" (MAFFESOLI apud SILVA, 2006, p. 10).
62
4. PROJETO PRÁTICO
A partir deste momento, será apresentada a metodologia projetual
utilizada para a construção do website imersivo, que é a proposta prática
deste projeto. É importante salientar que não se pretende nesta parte definir
um caminho hermético para esta especificidade do projeto, mas a partir da
proposta prática desenvolvida, contribuir com um possível roteiro para o
desenvolvimento de interfaces imersivas. Cabe relembrar que websites
imersivos têm como uma de suas características levar o usuário a explorar o
conteúdo por um maior tempo. Assim como alguém que joga um game em
primeira pessoa e “passeia” livremente pela interface, o usuário participa de
uma narrativa criada pelo website. Websites imersivos são como uma
simulação do mundo real transferida para uma interface, é como se o
usuário transferisse o seu corpo para dentro de uma tela, que houvesse uma
simulação, mesmo que rudimentar, da presença deste corpo no espaço
virtual.
A proposta prática é, junto a estratégia mercadológica de uma
marca de surf chamada Tropical Brasil22, apresentar os diferentes tipos de
pranchas fabricadas por esta empresa de uma forma mais lúdica e
agradável, dentro de uma interface imersiva. A Tropical Brasil é uma
empresa brasileira e administrada por surfistas, que surgiu nos anos 1970 a
partir do idealizador Avelino Bastos. Inicialmente, só eram produzidas
pranchas, porém com o passar dos anos começaram a ser produzidos
acessórios para surf e roupas para uso cotidiano, além de longs, roupas de
borracha para a prática do surf. Avelino conquistou sete prêmios de melhor
shaper23 brasileiro além disto a Tropical Brasil trabalhou com grandes nomes
do surf brasileiro como Teco Padaratz, Peterson Rosa, David Husadel e Neco
22 Tropical Brasil - http://www.tropicalbrasil.com.br/ Acesso em: 16/11/2011. 23 Shaper - Pessoa que fabrica, dá formato às pranchas de surf.
4. PROJETO PRÁTICO
63
Padaratz. Atualmente a Tropical Brasil é a maior empresa do segmento na
indústria brasileira, exportando para vários países24.
Primeiramente para a proposta prática deste trabalho, seria feito
apenas um website que apresentasse as pranchas da Tropical Brasil de forma
imersiva, como estratégia para apresentação aos públicos. Após conversas
com surfistas, que são o público-alvo deste projeto prático, observou-se a
necessidade de incluir também um boletim das ondas e também uma parte
que apresentasse notícias sobre o mundo do surf. Este público identificou
como um dos conteúdos mais recorrentes para surfistas o boletim das ondas.
Esta informação é um de seus principais interesses para a prática do esporte
e também para procurarem sobre surf na web. Com as metas e pesquisas
definiu-se por apresentar um cenário de praia com as pranchas como maior
destaque. Além disso acesso aos conteúdos boletim das ondas e notícias do
mundo do surf.
Como norteador de metodologia de projeto utilizamos Garrett (2003) e
os planos da experiência, apontando especificidades com relação ao
projeto de websites imersivos. A partir deste caminho, primeiramente,
definimos a estratégia que consiste em projetar um website imersivo onde
hipoteticamente seria parte de uma campanha da Tropical Brasil que
apresentará como foco principal as pranchas de surf produzidas por eles,
proporcionando um maior conhecimento sobre a sua produção para os
públicos. Com o objetivo de apresentar estas pranchas de uma forma
diferente de websites hierárquicos, o projeto apresenta a funcionalidade de
visualização tridimensional em 360º das pranchas.
Seguindo para a parte de escopo do website, que de acordo com o
Garrett, é o momento onde são definidas as tecnologias. Neste caso
específico são utilizados objetos modelados em software de modelagem 3D 24 Informações sobre a Tropical Brasil foram retiradas do próprio site da empresa. Disponível em: www.tropicalbrasil.com.br - Acesso em: 18/11/2011.
64
(3D Studio Max) e todos objetos de cena são feitos com esta tecnologia. A
tecnologia para mostrar animações de câmera e interação com o website
seria a de animação em Flash, este tipo de tecnologia é utilizado em outros
websites imersivos como o da cerveja Bohemia e o Ecodazoo, ambos
citados anteriormente neste trabalho. Para se adaptar a diferentes
navegadores foi definido que a tela interativa do website da Tropical Brasil
terá 1024x768 pixels, a utilização de um palco é recorrente em websites
imersivos podendo novamente citarmos o website da Bohemia e o
Ecodazoo.
O plano da estrutura segundo Garrett "define a forma como os diversos
recursos e funções do website se encaixam25" (Garrett, 2003, p. 23). Neste
website a estrutura é em sua maior parte orgânica onde não existem
caminhos pré-definidos, deixando assim o usuário livre para navegar onde
houver maior interesse. Neste momento foi feito o fluxograma do website
(figura 27) de acordo com o vocabulário visual de Garrett.
25 Tradução livre feita pela autora. Texto original: "The structure defines the way in which the various features and functions of the site fit together."
65
Figura 27: Fluxograma de informação do website da Tropical Brasil
Fonte: Feito pela autora
A partir disto, partimos para a definição do esqueleto, segundo Garrett
o plano do esqueleto do website é onde “se definem os lugares onde cada
funcionalidade, botões, links do website vai ficar é o momento de otimizar o
arranjo dos elementos para obter uma máxima funcionalidade26” (Garrett,
2003, p. 22). Neste projeto prático foi feito um storyboard (figura 28).
Diferentemente de websites hierárquicos que utilizam wireframes, a escolha
por storyboard é pelo motivo de o website ser imersivo. Isso implica em uma
proximidade com o design de movimento e com a animação que tem uma
narrativa feita a partir de diferentes quadros que são sequenciais:
dependem uns dos outros.
26 Tradução livre feita pela autora. Texto original: "The skeleton is designed to optimize the arrangement of these elements for maximum effect and efficiency".
66
Figura 28: Storyboard - Projeto prático
Fonte: Produzido pela autora
67
Com todas as definições feitas parte-se para a definição da superfície
mostrando a modelagem27 dos elementos que aparecerão na interface,
além de outros elementos de suporte como caixas de texto. Alguns
elementos são possíveis de clicar, mostrando informações ou indo para
outras páginas, outros são utilizadas para compor o cenário do website. A
tela loader (figura 29) precisa ser pensada como algo diferente enquanto
está carregando. Projetos de websites imersivos geralmente demoram para
carregar comparado a outros. Neste projeto prático a tela loader apresenta
a silhueta de um surfista, em cima da barra de carregamento, e abaixo um
box com curiosidades sobre o mundo do surf, estas curiosidades são
randômicas, aparecendo uma diferente cada vez que se entra no website.
Figura 29: Tela loader Fonte: Produzida pela autora
Objetos em 3D mostram mais detalhes sobre o que pretende ser
mostrado, levando o usuário a experiência estética de realidade virtual. Para 27 Modelagem - Técnica de construção de objetos em software 3D.
68
alguns elementos como a areia da praia (figura 30) a constituição foi feita a
partir de elementos de modelagem simples com aplicação de textura,
optou-se por esta imagem por ela representar fielmente a areia da praia e
também por elementos de luz e sombra nota-se que a cena é diurna.
Figura 30: Areia do cenário do website da Tropical Brasil
Fonte: Feito pela autora
Para elementos menores, com menos polígonos28, foi feita modelagem
e logo após aplicação de uma textura de madeira como na placa (figura
31), que apresenta disposta dois ícones para os conteúdos informativos do
website: boletim das ondas e notícias. A placa tem um comportamento
quando o mouse está sobre o elemento que descreve a função do link.
Optou-se por utilizar elementos simples, assim foram criados dois pictogramas
pela autora, a onda que representa o boletim das ondas e a folha de
notícias que representa o link com notícias do mundo do surf. A escolha por
pictogramas se justifica pela possibilidade elementos simples serem de mais
28 Polígonos - Figuras fechadas formadas por segmento de retas. Em softwares de modelagem 3D quanto mais polígonos houver na malha mais pesado será o objeto modelado em 3D.
69
fácil leitura e também por ficar um maior tempo gravado na memória do
usuário.
Figura 31: Placas do cenário do website da Tropical Brasil Fonte: Feito pela autora
Para a construção do oceano foram utilizadas técnicas de
modelagem para mostrar a ondulação, e logo após, aplicado textura de
oceano para um efeito mais realístico na cena (figura 32). As cores têm
proximidade com as tonalidades de praias muito propícias ao surf, com mar
azul ou verde.
Figura 32: Oceano modelado para o website da Tropical Brasil Fonte: Produzido pela autora
70
O logotipo (figura 33) da marca Tropical Brasil foi feito com
modelagem leve e poucos polígonos para não ser um elemento que
pesasse na cena. Este modelo não teve aplicação de nenhum material ou
textura e optou-se por uma paleta complementar para sua aplicação, ou
seja, pouco contraste em relação ao fundo para manter o foco na interface
imersiva, além de manter o ambiente real como se realmente fosse uma
praia apenas.
Figura 33: Marca da Tropical Brasil Fonte: Feito pela autora
As pranchas de surf foram modeladas a partir da técnica de box
modelling (modelagem a partir de uma caixa), que consiste em construir um
objeto a partir de uma caixa, modificando os polígonos, criando novas
arestas, vértices de polígonos. Após modeladas foram postas texturas de
pinturas de pranchas de surf (figura 34). Optou-se por utilizar pranchas de
diferentes cores vibrantes por empiricamente para a autora o verão e a
praia lembrarem coisas coloridas. Além disto as pranchas foram dispostas
uma ao lado da outra com mesma distância entre elas gerando ritmo a
cena.
71
Figura 34: Pranchas de surf modeladas para o website da Tropical Brasil
Fonte: Produzido pela autora
Quanto a escolha da tipografia para os elementos do website, optou-
se por utilizar dois tipos diferentes. Primeiramente para as placas optou-se por
utilizar a mesma fonte a utilizada na construção da marca, com intuito de
manter a identidade, esta fonte possui hastes grossas e estilo fantasia. Para
os textos optou-se por utilizar uma fonte mais limpa, longilínea e sem serifa,
com intuito de facilitar a leitura, não cansar a visão e não deixar a cena
poluída.
Para a finalização das telas as imagens renderizadas foram transferidas
para um software de edição de imagens para web (Adobe Fireworks) com
intuito de construir as partes 2D e também para finalização de tamanho de
tela considerando o tamanho em pixels. Foram adicionados quatro tipos de
caixa de informação. Todas as caixas são na cor branca com opacidade
baixa, elas diferenciam por cores que mostram as áreas do website. Para o
boletim das ondas, utilizou-se o azul por fazer correspondência com a água
do mar. Para notícias, foi escolhida a cor verde, significando possibilidade.
72
Para as informações sobre cada prancha, utilizou-se o vermelho, para gerar
um maior destaque. E por fim, a cor amarela foi utilizada nas caixas
explicativas, tutoriais.
As telas finais (figuras 35 a 44),29 do projeto prático deste trabalho
foram pensadas para ficarem centralizadas na tela do navegador e com um
fundo branco. Uma sombra foi colocada nas telas para demarcar as áreas
úteis e interativas do website.
Figura 35: Tela de entrada do website
Fonte: Produzido pela autora
29 Na última página deste trabalho existe um cd encartado para visualização das telas no computador.
73
Figura 36: Tela boletim das ondas
Fonte: Produzido pela autora
Figura 37: Tela notícias
Fonte: Produzido pela autora
74
Figura 38: Tela pop-up explicativo
Fonte: Produzido pela autora
Figura 39: Tela pranchão
Fonte: Produzido pela autora
75
Figura 40: Tela pranchão rotacionado
Fonte: Produzido pela autora
Figura 41: Tela fun bord
Fonte: Produzido pela autora
76
Figura 42: Tela fun bord rotacionada
Fonte: Produzido pela autora
Figura 43: Tela fun bord rotacionada
Fonte: Produzido pela autora
77
ONCLUSÃO
O presente trabalho surgiu primeiramente por notar-se um grande
crescimento do mercado 3D, assim como apresentado no decorrer do
trabalho. Foram apresentados diferentes exemplos deste crescimento, sendo
esta área de grande possibilidade de atuação no mercado de trabalho
atual para designers.
Este trabalho de conclusão de curso abordou questões sobre
construção de websites imersivos cruzando com teorias do imaginário e
especificidades do design. Primeiramente pesquisou-se sobre websites com
estas mesmas características, escolheu-se o website da cerveja Bohemia
como recorte para estudo de caso. Nesta pesquisa notou-se a importância
de apresentar formas em 3D nestes websites, além de notar que pensar na
interatividade com o usuário é um aspecto fundamental no momento de
construção.
Ao longo da pesquisa, percebe-seu a importância de estudar
aspectos ligados a cibercultura, com o intuito de entender o mundo da
internet e outros aspectos relacionados, além de estudar o histórico da
internet para entender a evolução desta tecnologia, procurando entender
para onde estamos caminhando em termos gerais. Percebe-se que tudo na
web está sempre em movimento e transformação. Websites imersivos nos
mostram uma nova maneira de apresentar produtos na web, uma forma
mais lúdica e interativa, visando que o usuário utilize o website por um maior
tempo e tenha uma experiência de navegação diferente de websites
hierárquicos, os quais ainda são muito utilizados como forma de
comunicação na web.
A escolha por integrar o imaginário nesta pesquisa foi de grande valia,
pois, o estudo e pesquisas sobre o imaginário dos usuários sobre websites
imersivos ajudou a compreender as expectativas geradas por websites deste
CONCLUSÃO
78
tipo, além de perceber aspectos importantes que devem ser integrados ao
projeto. Como a interação, a utilização de formas lúdicas com indicações
não tão óbvias para o usuário. O imaginário é uma boa forma de conhecer
o usuário, questão esta fundamental do momento de se projetar em design.
Estudou-se para deixar informações claras e mais agradáveis, todo o
projeto de design sempre deve ser voltado para o usuário, devemos nos
comunicar de forma simples, facilitando a vida das pessoas. As estratégias
em design podem ser diferentes, dependendo da necessidade e
especificidade de cada projeto, acredita-se que dentro da noção de
website imersivo, conseguimos alcançar um resultado satisfatório,
apresentando informações relevantes para o público-alvo de uma forma
lúdica, apresentando informações em um formato diferente de formatos
convencionais utilizados na web.
Por fim, esta pesquisa apresentou a comunidade uma forma de se
projetar websites imersivos com 3D, de acordo com suas especificidades
partindo da metodologia projetual do Garrett, apresentando as principais
diferenças projetuais de websites hierárquicos e imersivos. Esta metodologia
apresentada é uma forma de através do próprio trabalho realizado, deixar
uma possível contribuição para projetos que sejam relacionados, ou
parecidos com este. Assim, esta pesquisa resultou na criação de um
protótipo de website imersivo para a marca Tropical Brasil, onde apresentou-
se um cenário de praia que representa um habitat dos surfistas, além de
mostrar as pranchas de surf que são a principal ferramenta para a prática do
esporte. Apresentar boletim das ondas para surfistas também se torna
bastante importante, pois a partir deste eles podem saber se é possível surfar
e onde está em condições melhores para a prática do esporte. Por fim as
notícias foram apresentadas com intuito de agregar conhecimento atual
sobre as novidades no mundo do surf.
79
Este trabalho de conclusão de curso tratou, em termos gerais de
tecnologias relativamente novas, o estudo sobre 3D na construção de
websites imersivos ainda possui muitos aspectos serem abordados. Como por
exemplo, a utilização de tecnologias para construção de animações para
estes websites, como talvez poderá ser possível com a utilização do HTML5,
feita apenas com códigos. Esta pesquisa é um primeiro passo podendo ser
desdobrada para outros estudos posteriores, a utilização do 3D é bastante
ampla podendo assim ser utilizada em outras estratégias como, por exemplo,
ambientes de aprendizagem e também hipermídias. Com o crescimento e
atualização da internet ao passar do anos a tecnologia 3D tende a ser
bastante utilizada por poder apresentar objetos em seu todo de uma forma
lúdica. Além disso, é possível estudar um pouco mais sobre como ambientes
em três dimensões podem contribuir em estratégias mercadológicas, assim
como feito no website da Bohemia e no projeto feito como parte prática
deste trabalho.
80
REFERÊNCIAS BIBLIOGRÁFICAS
AMSTEL, Frederick van. Em busca de uma metodologia projetual de
design de interação materialista-dialética. Disponível em:
http://usabilidoido.com.br/arquivos/design_interacao_materialista_dial
etico.pdf - Acesso em: 01/01/2011, 2006.
CASTELLS. Manuel. A Galáxia da Internet, reflexões sobre a internet, os negócios e a sociedade. Lisboa: Fundação Calouste Gulbenkian, 2004.
FLUSSER, Vilém. O mundo codificado: por uma filosofia do design e da comunicação. São Paulo: Cosac Naify, 2007.
FRASER, T.; BANKS, A. O guia completo da cor. 2ªed. São Paulo: Editora Senac São Paulo, 2007.
GARRETT, Jesse James. The elements of user experience: User-Centered
design for the web – 2ªed. – New York: AIGA, 2003.
GARRETT, Jesse James. Um Vocabulário Visual para AI e Design de
Interação. Tradução: Lívia Labate. Disponível em:
http://iainstitute.org/pt/translations/000332.html - Acesso em
01/10/2011, 2002.
LEMOS, André. Cibercultura, tecnologia e vida social na cultura
contemporânea. 3ªed. – Porto Alegre: Sulina, 2007.
LÉVY, Pierre. Cibercultura - São Paulo: Editora 34, 1999.
LÉVY, Pierre. O que é o virtual? – 1ª Ed. 6ª reimpressão– São Paulo:
Editora 34, 2003.
LUPTON, E.; PHILLIPS, J. Novos fundamentos do design. São Paulo:
Cosac Naify, 2008.
MAFFESOLI, Michel. O imaginário é uma realidade. Porto Alegre: Revista
Famecos nº15, 2001.
REFERÊNCIAS BIBLIOGRÁFICAS
81
MEMÓRIA, Felipe. Design para a internet: projetando a experiência
perfeita – 7ª reimpressão - Rio de Janeiro: Elsevier, 2005.
MORETTI, Gaia. Mundos digitais virtuais em 3D e aprendizagem
organizacional: uma relação possível e produtiva. Disponível em:
http://www.cibersociedad.net/congres2009/actes/html/com_mundos-
digitais-virtuais-em-3d-e-aprendizagem-organizacional-uma-relasao-
possivel-e-produtiva_644.html - Acesso em: 16/08/2011, 2011.
PRIMO, Alex. Interação mediada por computador. 2ªed. – Porto Alegre:
Sulina, 2008.
SILVA, Juremir Machado da. As tecnologias do imaginário - 2ªed. -
Porto Alegre: Sulina, 2006.
SEVERINO, Antônio Joaquim. Metodologia do trabalho científico –
23ªed. – São Paulo: Cortez, 2007.
82
Anexo 01 - Entrevista com Bruna Bueno Allemand, 20 anos, estudante de
direito.
Autora: Como consumidora, o que te parece atraente na cerveja Bohemia?
O que percebes de valor no produto e que, por exemplo, faz pagar um
pouco mais do que outras marcas do mercado?
Bruna: A cor, o aroma, o sabor. A fermentação é melhor do que as outras, é
tudo melhor que as outras.
A: Já conhecia este website ou é a primeira vez que você entra?
B: Primeira vez que eu entro.
A: O que você achou mais legal/interessante neste website?
B: A sala do mestre, que mostra sobre receitas, (silêncio) é, é isso aí mesmo.
A: Este website te remete a alguma lembrança ou algum lugar específico,
que você já tenha ido ou que tenha visto em algum filme?
B: Sim, muita coisa, porque é bem antigo e mostra características dos anos
30/50. Também me lembra samba, essa boêmia mesmo.
A: Você tinha vontade de saber mais sobre a cerveja Bohemia? Em que
medida sua experiência na Sala do Mestre foi satisfatória neste sentido?
B: Tinha vontade de saber tudo (risos). Porque eu soube quais eram os
componentes da cerveja e como ela é produzida.
A: Gostou da composição dos elementos? Foi tranquila a experiência de
navegar pelo website?
B: Sim, foi tranquilo, é bem envolvente tem bastante coisas pra mexer.
A: O que não poderia faltar em um website sobre uma marca de cerveja?
83
B: Os componentes né, os elementos, o jeito que ela é fabricada, pra gente
saber o que está ingerindo.
Comentário adicional: O site tava bem maneiro, me fez ter vontade de
beber e apreciar essa maravilha. (risos)
Anexo 02 - Entrevista com Jorge Luis da Silva, 40 anos, bancário.
Autora: Como consumidor, o que te parece atraente na cerveja Bohemia?
O que percebes de valor no produto e que, por exemplo, faz pagar um
pouco mais do que outras marcas do mercado?
Jorge: A textura dela, sim, o sabor e a textura mesmo, o corpo da cerveja.
A: Já conhecia este website ou é a primeira vez que você entra?
J: Não, é a primeira vez.
A: O que você achou mais legal/interessante neste website?
J: Ele ser interativo, eu consegui achar com facilidade, a enciclopédia eu
poder ler e interagir com ele né, a estrutura dele porque não te agride, ele é
simples é claro, ele é bonito, achei bem elegante, ele não é ofensivo, tem
alguns sites que são muito fortes as cores e isso é cansativo, tu não consegue
ficar muito tempo naquelas páginas e esse não eu poderia ficar horas ali.
A: Este website te remete a alguma lembrança ou algum lugar específico,
que você já tenha ido ou que tenha visto em algum filme?
J: Me lembra uma fábrica antiga na verdade né, uma coisa tradicional no
ponto de vista estético mas moderno pelos elementos que tem dentro
daquele contexto, uma coisa aconchegante, eu gostei assim, me lembra
vários lugares mas nenhum em específico.
A: Você tinha vontade de saber mais sobre a cerveja Bohemia? Em que
medida sua experiência na Sala do Mestre foi satisfatória neste sentido?
84
J: Sempre é bom saber, eu gosto de saber novidades sobre cerveja. Eu acho
que saber coisas sobre alguma coisa que tu gosta é legal. Com relação ao
conhecimento né, com relação ao processo e diagrama de fabricação, a
enciclopédia, os tipos de cerveja, os copos, eu achei bem legal assim.
A: Gostou da composição dos elementos? Foi tranquila a experiência de
navegar pelo website?
J: Sim, por ser 360º tu tinha visão de toda sala do site sem ser uma coisa
plana e achatada com links óbvios, então tu tinha que passar ali pra
investigar o que tinha, não era escancarado mas também não era
escondido, uma navegação fácil, boa.
A: O que não poderia faltar em um website sobre uma marca de cerveja?
J: O modo como ela é fabricada, os produtos que compõem ela, o local
onde a fábrica ta inserida porque isso também determina a qualidade o
acesso aos elementos da fabricação. A tradição da cerveja, a tradição do
que é fabricar uma cerveja, tu pega processos novos e acabam tirando a
característica do produto, portanto, tem que ter a tradição da fabricação
com elementos novos e que tenham novas opções digamos assim de sabor
e tal, mas sem perder o centro da fabricação, a característica essencial
dela.
Anexo 03 -Entrevista com Lucas de Oliveira Castilho, 25 anos, Consultor de
vendas - Cisco Sales Expert.
Autora: Como consumidor, o que te parece atraente na cerveja Bohemia?
O que percebes de valor no produto e que, por exemplo, faz pagar um
pouco mais do que outras marcas do mercado?
Lucas: O que é mais atraente na Bohemia é que ela tem uma tradição e
acaba passando maior credibilidade na hora da compra. Além do gosto ser
85
mais atrativo, ela é uma cerveja que com uma quantidade menor você
sente mais satisfeito oque acaba compensando o preço.
A: Já conhecia este website ou é a primeira vez que você entra?
L: É a primeira vez que navego no site.
A: O que você achou mais legal/interessante neste website?
L: Além da interação do site comigo, também gostei bastante sobre as
informações das cervejas e a história da marca Bohemia.
A: Este website te remete a alguma lembrança ou algum lugar específico,
que você já tenha ido ou que tenha visto em algum filme?
L: Me lembra uma propaganda da própria cerveja, que vai mostrando as
pessoas passando a cerveja por diferentes épocas, mostrando a tradição da
Bohemia de manter um produto de qualidade por tanto tempo.
A: Você tinha vontade de saber mais sobre a cerveja Bohemia? Em que
medida sua experiência na Sala do Mestre foi satisfatória neste sentido?
L: Tinha sim. Foi satisfatória no sentido de aprender mais sobre a história e
fabricação da primeira cerveja no Brasil.
A: Gostou da composição dos elementos? Foi tranquila a experiência de
navegar pelo website?
L: Foi fácil navegar pelo site bastou passar o mouse sobre as partes e ele já
vai aparecendo as informações sobre o que você vai clicar. O site é um
pouco pesado.
A: O que não poderia faltar em um website sobre uma marca de cerveja?
L: Não pode faltar as informações sobre as cervejas e a história da marca.
Não vejo outra informação relevante para se colocar, até mesmo porque eu
86
não iria navegar tanto em um site de cerveja se ele não tivesse uma
interação como o site da Bohemia teve.
Anexo 04 - Entrevista com Luiz Carlos G. de Oliveira, 50 anos, bancário.
Autora: Como consumidor, o que te parece atraente na cerveja Bohemia?
O que percebes de valor no produto e que, por exemplo, faz pagar um
pouco mais do que outras marcas do mercado?
Luiz: O sabor, a textura dela. É um tipo de cerveja que ela é mais encorpada,
não fica no outro dia com aquela dor de cabeça, não é “aquela que desce
redondo” mas é uma cerveja gostosa. Geralmente eu tomo ela, se eu vou a
algum lugar que tem Bohemia tomo sempre Bohemia.
A: Já conhecia este website ou é a primeira vez que você entra?
L: Não, é a primeira vez. Nunca tinha entrado, nunca tinha navegado.
A: O que você achou mais legal/interessante neste website?
L: O modo de fabricação da cerveja, desde a chegada, o armazenamento,
tudo. A Sala do Mestre, todas as explicações, se tivesse mais um tempo para
ler todas as enciclopédias. É bem legal o site.
A: Este website te remete a alguma lembrança ou algum lugar específico,
que você já tenha ido ou que tenha visto em algum filme?
L: Sim, quando eu estudava, fiz biologia, fomos na fábrica da Brahma em
Passo Fundo, foi mostrado todos os passos de fabricação, degustação,
armazenamento, tudo.
A: Você tinha vontade de saber mais sobre a cerveja Bohemia? Em que
medida sua experiência na Sala do Mestre foi satisfatória neste sentido?
L: Na verdade nunca parei para pensar sobre esse assunto, tomo mas nunca
nem pensei, nunca me passou pela cabeça. Sobre o
87
armazenamento/armazenagem, como ela é fabricada tudo isso eu gostei
de saber, porque eu não sabia, tomava porque gostava.
A: Gostou da composição dos elementos? Foi tranquila a experiência de
navegar pelo website?
L: Gostei muito, é bem fácil de navegar, é bem tranquilo, tu vai pelos tópicos
e vai chegando onde tu quer, pode voltar, pode ir adiante.
A: O que não poderia faltar em um website sobre uma marca de cerveja?
L: Tipo um histórico dela, como começou, os primeiros fabricantes quem
foram, um relato dela, uma passagem no tempo, como foi a cerveja, a
fabricação.