16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de

Interfaces Humano Tecnolgica: Produto, Informaes Ambientes

Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.

ANLISE DA INTERFACE DE UM LIVRO DIGITAL SOBRE

ILUMINAO FOTOGRFICA DE ESTDIO

ANALYSIS OF THE INTERFACE OF A DIGITAL BOOK ABOUT STUDIO

PHOTOGRAPHIC LIGHTING

Ana Leticia Oliveira do Amaral1, mestranda

Berenice Santos Gonalves2, Dra.
Volnei Antnio Matt3, Dr.

(1) Universidade Federal de Santa Catarina

e-mail: amaral.analeticia@gmail.com

(2) Universidade Federal de Santa Catarina

e-mail: berenice@cce.ufsc.br

(3) Universidade Federal de Santa Maria

e-mail: volnei.a.m@gmail.com

Palavras-chave: design de interfaces, livro digital interativo, iluminao fotogrfica

O livro digital interativo pode reunir uma diversidade de recursos que tornam o contedo expressivo e dinmico.
Nesse sentido, destaca-se a capacidade de ser empregado como recurso de aprendizagem. Com base nessas
afirmaes e na observao de aulas de fotografia em contexto de graduao, foi possvel constatar a oportunidade
de elaborao de um livro digital sobre composio de luzes de estdio para fotografia. Diante do exposto, o
objetivo principal deste artigo relatar as etapas do projeto e a avaliao do livro digital interativo desenvolvido. Os
resultados mostram, dentre as contribuies, que a composio do contedo, em relao utilizao de linguagem
verbal e visual temtica, foi eficiente para motivar o leitor. Alm disso, o projeto tambm foi considerado eficaz
como mtodo de consulta. Contudo, a navegao e o desenho dos cones foram considerados pontos a serem
melhorados.

Key-words: interface design, interactive digital book, photographic lighting

The interactive digital book can bring together a diversity of resources that make the content expressive and
dynamic. In this sense, the capacity to be employed as a learning resource is highlighted. Based on these
affirmations and the observation of photography classes in the context of graduation, it was possible to verify the
opportunity to elaborate a digital book on composition of studio lighting for photography. In view of the above, the
main objective of this article is to report the stages of the project and the evaluation of the digital interactive book
developed. The results show, among the contributions, that the content composition, in relation to the use of verbal
and thematic visual language, was efficient to motivate the reader. In addition, the project was also considered
effective as a consultation method. However the navigation and the icons design were considered points to be
improved.

1 Introduo
Os dispositivos mveis de leitura, populares
atualmente, proporcionam diversas maneiras de
apresentao de informaes, sendo uma delas os
livros digitais interativos. De acordo com Licht et
al. (2016) o livro digital possui caractersticas
prprias, visto que rene uma diversidade de
recursos que tornam o contedo expressivo e
dinmico. Ainda segundo os autores, entre as
finalidades do livro digital interativo, destaca-se a
capacidade de ser empregado como recurso de
aprendizagem.
Considerando as afirmaes acima, a observao
de aulas de fotografia em contexto de graduao, e
o apoio de um professor da rea, foi possvel
constatar a oportunidade da construo de um livro
digital sobre o tema fundamentos da iluminao
de estdio.
Diante disso, percebeu-se a necessidade de
desenvolver uma ferramenta equilibrada entre
forma (esttica) e funo (usabilidade), fcil e
prtica, na qual o leitor fosse o centro das
preocupaes [ROYO, 2008]. Nesse sentido, esse
material poderia ser capaz de auxiliar o leitor na
composio da iluminao para as produes
fotogrficas.
Frente a esse cenrio, este artigo apresenta o
processo de design e avaliao de um livro digital
que teve por objetivo estimular a aprendizagem
sobre os conceitos de iluminao, de modo
dinmico e interativo. Para tanto, este estudo foi
dividido em trs sees, que abordam: a
fundamentao terica que apoiou a pesquisa, o
processo de design do livro e a avaliao da
interface realizada por especialistas.
1.1 Design de Interao e Design de Interfaces
Para Kolko (2011), em uma definio mais
abrangente, o Design de Interao caracteriza a
criao de um dilogo (fsico e emocional) entre
pessoas e produtos, sistemas ou servios. De
acordo com Saffer (2010), o Design de Interao
empenha-se em encontrar solues para produtos
que envolvem a interao com o usurio, tendo
como objetivo no apenas a usabilidade, mas
tambm a utilidade e a diverso. Pode-se dizer que
16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.
o processo de Design de Interao acontece
envolvendo trs agentes: o usurio, a tecnologia e
o designer. Sendo assim, como afirma Preece,
Rogers e Sharp (2005), a essncia do design de
interao fornecer suporte s atividades
cotidianas das pessoas para melhorar a forma como
elas se comunicam, trabalham e utilizam produtos
interativos.
Quanto ao Design de Interfaces, para Bonsiepe
(2015), a interface o espao no qual se estrutura
a interao entre corpo, ferramenta (objeto ou
signo) e objetivo da ao [BONSIEPE, 2015, p.
111]. Em sntese, o Design de Interfaces o
encontro do Design Visual com o Design de
Interao.
1.2 Contedo Interativo
O processo de compreenso de uma obra pode ser
manifestado a partir de quatro etapas que formam a
aprendizagem progressiva: dados bsicos,
informaes, conhecimento e sabedoria. Kolko
(2011, p. 42) explica que, apesar de terem pouco
valor os dados quando isolados, representam as
unidades isoladas do contedo. A informao
descrita como dados significativos formada pela
unio dos elementos de relao semntica que
geram uma experincia sensorial, da qual a viso
a mais comum. Tais elementos, quando
combinados com a finalidade de formar algum
argumento ou teoria, so classificados como
conhecimento. O alcance de conhecimento ocorre
no decorrer do tempo, enquanto isso, o
comportamento se manifesta por influncia da
sabedoria, que constitui uma nova e original
aplicao do conhecimento.
Dessa forma, um livro digital interativo pode ser
considerado um instrumento de transferncias de
informao, o qual pode tambm oferecer imerso
em experincia ao usurio, visto que o leitor pode
at no experimentar as funcionalidades de
determinado objeto, mas pode adquirir
conhecimento sobre suas funcionalidades.
2 Procedimentos metodolgicos
De acordo com Prodanov e Freitas (2013), este
artigo de natureza aplicada, com abordagem
qualitativa e quanto aos objetivos, classificado

como exploratrio. Sendo assim, a investigao foi
estruturada em quatro principais etapas: (I)
Levantamento terico sobre luz e iluminao de
estdio; (II) Design do livro digital; (III) Avaliao
do livro por especialistas e (IV) Resultados e
discusses.
2.1 Levantamento terico sobre luz e iluminao
de estdio
A pesquisa sobre luz e iluminao de estdio,
realizada durante a primeira fase do
desenvolvimento da pesquisa, buscou apoiar o
desenvolvimento do projeto do livro digital.
Como afirmam Hunter, Biver e Fuqua (2014), a luz
o elemento primordial fotografia, pois
responsvel por sua criao, por meio de sombras,
revelando formas e texturas, entre outras
possibilidades, de acordo com a imaginao do
fotgrafo. Por isso, presume-se que todo fotgrafo
ou aprendiz deva ter conhecimento sobre os
conceitos de iluminao fotogrfica.
Desse modo, buscou-se abordar o conceito de luz
apoiado nas teorias de Newton (Teoria Corpuscular
da Luz), Huygens (Modelo Ondulatrio) e Einsten
(ftons), as quais, segundo Barthem (2005), so a
base dos estudos sobre a radiao eletromagntica
desde o sculo XX at hoje. Com isso, foi possvel
conceituar o espectro luminoso, a temperatura de
cor e o balano de branco que o ajuste feito na
cmera para corrigir as cores , assim como
apresentar as especificidades da luz natural e luz
disponvel, ou seja, as luzes que nos cercam no
cotidiano, sem a nossa interveno. Ainda foram
tratados conceitos bsicos da luz do ponto de vista
da fotografia.
Segundo Prkel (2010), o controle sobre a luz que
se tem em um estdio engloba no s a direo e a
quantidade de luz, mas tambm a sua qualidade.
Em sntese, em um estdio, o fotgrafo tem total
controle sobre a incidncia de luz e pode mold-la
com o auxlio dos esquemas clssicos de
iluminao e dos diferentes modificadores.
2.2 Design do livro digital
O mtodo de projeto escolhido para orientar a
elaborao do referencial prtico e do produto foi o
Projeto E, desenvolvido por Meurer e Szabluk
16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.
(2010) que compreende oito etapas. Contudo, para
esta pesquisa, decidiu-se por dividi-lo em duas
grandes sees, sendo elas: compreenso do
projeto e configurao do produto. Os tpicos das
sees sero apresentados a seguir.
Compreenso do projeto
I. Contextualizao: consiste na etapa inicial e tem
por objetivo identificar, definir e delimitar o
problema. Como subfases, nesta pesquisa, foram
escolhidas: (a) Situao inicial bem definida
(SIBD) e situao final bem definida (SIFB); (b)
Questes projetuais; (c) Taxonomia; (d) Condio
atual e condio pretendida; (e) Identificao dos
usurios e (f) Equalizao dos fatores projetuais.
II. Desconstruo: englobou uma ampla anlise e
avaliao dos contedos, conceitos e contextos que
serviram de referncia para o desenvolvimento do
projeto. Nesta etapa, foi desenvolvida uma (a)
linha do tempo, que buscou investigar produtos ou
nichos de produtos pioneiros no contexto do
projeto. Ainda na fase de desconstruo, foi
realizado um levantamento de (b) similaridades e
referncias de aplicativos da rea de fotografia, (c)
anlises estrutural, morfolgica e funcional e um
(d) comparativo de funcionalidades de trs
aplicativos e um site, sendo eles a Katachi
Magazine, o aplicativo WWF Together, a revista
Mine e o site Be moved.
Esse levantamento buscou elencar as
especificidades de cada um desses objetos, atravs
da anlise da organizao do contedo, da
tipografia, das imagens e da consistncia nas
interaes e sinalizaes, resultando em um
comparativo de funcionalidades. Essas ferramentas
escolhidas para um quadro comparativo
influenciam diretamente na manuteno da ateno
do usurio, ou seja, quanto mais detalhadas e bem
projetadas (aliadas ao contedo) forem as
ferramentas, maior ser o tempo dedicado pelo
usurio ao produto.
II. Verificao: nesta fase foi possvel,
considerando as informaes obtidas nas etapas
anteriores, definir uma lista de restries,
requisitos e possibilidades a serem consideradas no
novo produto.
 16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.

O que? Como? palavras-chave, como vintage, fundos desfocados,

Padro grfico-visual
Linguagem do usurio
Usabilidade
Sinalizao evidente nas
interaes
Criar malhas para a
organizao do contedo
Iconografia padronizada de
Composio Esttico- acordo com a temtica
Formal escolhida
Imagens atrativas e
condizentes com o contedo
Fontes de tamanhos e
espaamento adequados
Legibilidade
Iconografia com mdia-alta
ordem grfica
Apresentao do contedo
Contedo textual de forma divertida
Figura 1: Quadro de requisitos para o projeto. Fonte:
dos autores, 2015
Configurao do produto
I. Reconstruo: esta fase diz respeito s etapas de
escopo, estrutura e esqueleto do projeto, ou seja,
gerao de alternativas.
II. Definio de ferramentas, funcionalidades e
contedos: esta etapa consiste em estabelecer a
organizao e a hierarquia entre os contedos,
assim como as ferramentas e funcionalidades. Para
isso foi utilizada a tcnica de prototipagem rpida
card sorting (cartes sortidos). Com isso, a
primeira fase foi descrever as informaes nos
cartes de forma aleatria para ento, de acordo
com a sequncia do contedo, organiz-los em um
organograma hierrquico. Nesta etapa, ainda foi
necessrio compor o contedo textual para uma
melhor visualizao das ferramentas e
funcionalidades. Os textos foram estruturados com
base na linguagem dialogada para remeterem
temtica escolhida, a fim de envolver o leitor e
tornar a leitura dinmica e divertida. As
informaes foram estruturadas visando a melhor
forma de continuidade do assunto para facilitar a
compreenso do usurio. Com isso, definiu-se o
sentido de navegao a partir de captulos e
orientao da pgina como horizontal.
III. Identidade: A definio da assinatura visual do
livro digital partiu de pesquisas filtradas utilizando
otimismo e divertido. A partir dos resultados
visuais, optou-se por uma temtica retro com foco
nos anos 50.
Assim, o prottipo do livro intitulado Sopa no Mel
possui uma navegao horizontal por captulos e
vertical por contedo, ou seja, para navegar entre
captulos diferentes necessria uma transio
horizontal, j para consultar o assunto do captulo
em si a transio deve ser vertical. O contedo foi
dividido em cinco captulos e o livro composto
por: capa, instrues, apresentao, sumrio,
captulo 1 (O que luz?), captulo 2 (Princpios de
Iluminao), captulo 3 (Esquemas Clssicos),
captulo 4 (Modificadores), captulo 5 (Imagens) e
crditos.
Capa: buscou-se construir uma capa divertida que
estimule o interesse do leitor j no primeiro
contato. Os elementos utilizados foram escolhidos
para reforarem a ideia do contedo que o usurio
ir encontrar.
Figura 2: Capas do prottipo. Fonte: dos autores, 2017
Instrues: apresentam uma explicao, atravs de
cones e texto, sobre a forma de utilizar o livro.
Apresentao: explicita o que ser encontrado no
decorrer da leitura e em que contexto o livro digital
interativo foi concebido. Captulo 1 Magic: este
o captulo introdutrio que tenta responder a
pergunta o que luz?. So apresentadas as
teorias da luz mais relevantes ao mundo
fotogrfico. Captulo 2 Rules: so apresentadas
ferramentas que so utilizadas como princpios
fundamentais de iluminao, atravs do uso de
diferentes estilos de interao. Captulo 3 Ever:
dedicado aos esquemas clssicos de iluminao
de estdio. Sendo que h tambm uma pgina
voltada a explicar o que um estdio fotogrfico.
Captulo 4 Works: apresenta as caractersticas

dos modificadores de luz, devido sua importncia
em um estdio fotogrfico. Captulo 5 Baby:
predominantemente composto por imagens,
utilizadas para exemplificar diferentes tipos de
iluminao e ambientes. Crditos: dado
reconhecimentos aos colaboradores do projeto.
Como parte de reforo ao contedo interativo, fez-
se necessrio o desenvolvimento de cones que
identificassem o tipo de interao que est sendo
apresentada para orientar o leitor. Dessa forma,
para o desenvolvimento dos cones foram
selecionadas as principais tarefas e escolhidos os
desenhos que melhor representariam a ao e ainda
remetessem temtica.
Figura 3: cones. Fonte: arquivos do projeto
2.3 Avaliao do livro por especialistas
Para fins de avaliao do cumprimento dos
objetivos pretendidos pelo livro digital interativo,
optou-se por consultar especialistas na rea a partir
de um questionrio qualitativo construdo com
base nos requisitos levantados na fase de
verificao. A avaliao foi realizada
individualmente com quatro especialistas, durante
a segunda semana de maro de 2017, sendo trs
participantes professores universitrios, dois da
rea de design editorial e um de fotografia
doutores que atuam em uma instituio externa ao
desenvolvimento do projeto e um doutorando da
rea de mdia.
No incio de cada consulta, foi explanado o
objetivo da aplicao do questionrio. Aps o uso
do livro digital interativo, por um perodo
aproximado de 10 minutos, cada analista
respondeu um questionrio impresso composto por
duas partes. A primeira tinha o intuito de
reconhecer o perfil do participante e a segunda
visava avaliao geral do livro digital interativo.
Findadas as consultas, os resultados foram
compilados e demonstrados a seguir.
16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.
2.4 Resultados e discusses
Para iniciar as discusses acerca da avaliao, a
sntese do grau de familiaridade que os
especialistas tm com os dispositivos mveis de
leitura que metade dos especialistas, A e D,
consideram que dominam a tecnologia
completamente e dois, B e C, dominam em parte.
Quanto avaliao geral do livro digital
interativo, trs dos especialistas concordam que a
dinmica de navegao est boa e um deles a
considerou excelente. Contudo, o especialista A
acredita que o ritmo de leitura pode ser quebrado
devido alternncia horizontal/vertical dos
contedos. J o especialista B destaca a
necessidade de estar presente uma forma mais
rpida de retorno ao sumrio. E o especialista D
recomenda manter os botes de navegao na
mesma localizao em diferentes telas.
Todos os especialistas concordam que no h falta
de informaes complementares, assim como todos
os especialistas consideram que o uso de uma
linguagem temtica motiva o leitor. Dois dos
participantes concordam que a linguagem visual
temtica (cones, ilustraes e fotografias) seria
eficaz para motivar o aluno a consultar o livro.
Por outro lado, os especialistas A e D concordam
em parte, visto que consideram que os cones
apesar de visualmente atrativos, precisam ser mais
claros quanto aos objetivos para no confundir o
leitor. O quadro a seguir busca ressaltar as
principais contribuies sugeridas pelos
especialistas para o aperfeioamento da interface.
Participante Contribuio
Especialista A A alternncia horizontal/vertical pode
confundir e quebrar o ritmo de leitura dos
contedos.
Especialista A Os cones poderiam ser mais
representativos quanto aos seus objetivos.
Especialista B Poderia facilitar a localizao de um
contedo especfico.
Especialista D Apesar de ficarem visualmente mais
atrativos (botes), pode confundir uma
comunicao clara e eficiente.
Figura 4: Principais contribuies qualitativas dos
especialistas. Fonte: dos autores, 2017

Trs dos quatro especialistas consideram a
quantidade de animaes suficientes e um
insuficiente. Ainda, trs participantes concordam
que o livro digital interativo eficiente como
mtodo de consulta rpida, j o especialista B
concorda em parte, apontando que deveria haver
uma maior facilidade em localizar contedos
especficos. A mesma opinio se repetiu em relao
falta de feedbacks.
Pontos Positivos Pontos a serem aprimorados
- composio do contedo - formas de retonar ao sumrio
- as linguagens verbal e visual - apresentar de forma mais clara
temtica motivam o leitor a dinmica de navegao
- mtodo de consulta eficaz - feedbacks de retorno ao incio
e de ir para outros contedos
- botes mais claros quanto aos
seus objetivos
Figura 5: Pontos positivos e pontos a serem
aprimorados. Fonte: dos autores, 2017
3 Consideraes Finais
O ambiente digital um meio frequente onde a
troca de informaes, experincias e
conhecimentos acontece constantemente, de modo
dinmico e interativo. Como ressalta Portugal
(2010) h necessidade de se investigar novos
modelos, mtodos e abordagens para o design de
interao, novas maneiras de apresentao de
contedos diferentes das tradicionais. Acredita-se
que a unio do contedo sobre iluminao
fotogrfica e o livro digital interativo permite
novas formas de reteno e aprendizagem das
informaes ao leitor.
Desse modo, considera-se que o objetivo da
pesquisa relatada foi alcanado, pois foram obtidas
informaes relevantes em relao aos
fundamentos de iluminao e interao, assim
como foi possvel desenvolver e analisar o livro
digital interativo. Alm disso, ficou claro aos
pesquisadores a necessidade de testes com os
usurios, visto que apesar dos resultados positivos
aprimoramentos conforme apontado pelos
especialistas consultados poderiam ser
alcanados, cabendo ainda novas anlises da
interface, assim como testes com usurios
16 Ergodesign Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Tecnolgica: Produto, Informaes Ambientes
Construdos e Transporte
16 USIHC Congresso Internacional de Ergonomia e Usabilidade de
Interfaces Humano Computador
CINAHPA | 2017 Congresso Internacional de Ambientes Hipermdia
para Aprendizagem.
aplicados no ambiente para o qual o livro digital
interativo foi inicialmente proposto o estdio
fotogrfico.
REFERNCIAS BIBLIOGRFICAS
BARTHEM, R. A luz. So Paulo: Editora Livraria da
Fsica, Sociedade Brasileira de Fsica, 2005.
BONSIEPE, G. Do material ao digital. So Paulo:
Blucher, 2015.
HUNTER F; BIVER, S; FUQUA, P. Luz cincia e
magia: guia de iluminao fotogrfica. Traduo de P.
Z. Mello e R. Bonelli. 3. ed. Balnerio Camburi, SC:
Photos, 2014.
KOLKO , J. Thoughts on Interaction Design: a
collection of reflectios/written and compiled by Jon
Kolko. 2. ed. Burlington: Morgan Kaufman, 2011.
LICHT, M. C; GONCALVES, B. S; PEREIRA, A. T. C;
VIEIRA, M. L. H. O livro digital interativo como
recurso educacional. In: IV Simpsio Internacional de
Inovao em Mdias Interativas, 2016, Goinia. Anais
eletrnicos... Goinia: Media Lab - UFG, 2016.
Disponvel em: <https://siimi.medialab.ufg.br/p/16333-
anais-2016>. Acesso em:18 mar. 2017.
MEURER, H.; SZABLUK, D. Projeto E: aspectos
metodolgicos para o desenvolvimento de projetos
dgito-virtuais. Ao Ergonmica Ergodesign II. V.5,
N. 2, 2010.
PORTUGAL, C. Questes complexas do design da
informao e de interao. Info Design: revista
brasileira de design da informao, S. L., v. 7, n. 2, p. 1-
6, nov. 2010. Disponvel em:
<http://www.infodesign.org.br/infodesign/article/view/8
9>. Acesso em: 21 ago. 2016.
PRKEL, D. Iluminao. Traduo de R. Pajuaba.
Porto Alegre: Bookman, 2010.
PRODANOV, C. C; FREITAS, E. C. Metodologia do
trabalho cientfico: mtodos e tcnicas da pesquisa e
do trabalho acadmico. 2. ed. Novo Hamburgo: Feevale,
2013.
PREECE, J; SHARP, H; ROGERS, Y. Design de
interao: alm da interao homem-computador. Porto
Alegre: Bookman, 2005.
ROYO , J. Fundamentos do design: design digital. So
Paulo: Rosari, 2008.
SAFFER, D. Designing for Interaction: Creating
Innovative Applications and Devices. Berkeley: New
Riders, 2010.