Um Estudo Sobre Emoções E Interfaces De Usuário Em Sistemas Web
Total Page：16
File Type：pdf, Size：1020Kb
ISSN 2316-2872 T.I.S. São Carlos, v. 4, n. 3, p. 180-190, set-dez 2015 ©Tecnologias, Infraestrutura e Software Um estudo sobre emoções e interfaces de usuário em sistemas web André Canale Garcia, Vânia Paula de Almeida Neris Resumo. A escolha de elementos de interface de usuário, tais como cor, imagem e estilo de fonte, tem grande influência nas emoções dos usuários durante a interação com sistemas computacionais. O estudo da associação desses elementos, por exemplo, cor, imagem e tipografia, com as emoções é uma linha de pesquisa da Interação Humano-Computador. Este artigo apresenta um estudo que auxilia web designers na escolha de elementos, de modo que a partir do desenvolvimento de websites provoquem respostas emocionais específicas. Para tanto, foram desenvolvidos e experimentados três temas de uma mesma página web para avaliar o impacto emocional. Palavras chave:interação humano-computador, emoções, interface A study about emotions and user interface in web systems Abstract. The choice for user interface elements, such as color, picture and font style, has great influence on user’s emotions while interacting with computer systems. Studies about the association of these elements, for example, color, image and typography, with emotions is one research line on Human-Computer Interaction. This paper presents a study to help web designers choosing elements in order to provoke specific emotional responses from websites development. For that, three themes of the same website were developed and experimented to evaluate its emotional impact. Keywords: computer-human interaction, emotions, interface I. INTRODUÇÃO e imagem e as possíveis respostas emocionais que eles Elementos de interface de usuário que compõem páginas evocam, bem como o desenvolvimento de soluções de design web tais como cores, textos e imagens, podem transmitir organizando esses elementos conjuntamente e considerando diferentes emoções aos usuários (JIANG et al., 2008). As emoções específicas como Surpresa, Raiva e Alegria, além de respostas emocionais geradas pela interação com sistemas avaliar se as decisões de design tomadas levam às emoções computacionais influenciam diretamente no comportamento indicadas na literatura. desses usuários. Pode-se, por exemplo, induzir uma pessoa na Para a realização deste estudo foram desenvolvidas compra de um produto ou ajudar no seu processo cognitivo interfaces de usuário para o projeto denominado Research (BIANCHI; NERIS, 2015; XAVIER, 2013; XAVIER et al., Content Management System (RCMS), do curso de pós- 2012). As reações emocionais que esses elementos podem graduação lato sensu em Desenvolvimento de Software Para evocar é uma das linhas de pesquisa na área de Interação Web da Universidade Federal de São Carlos (UFSCar). Esse Humano-Computador (IHC). sistema divulga informações científicas de grupos de O estudo da relação das emoções com elementos como cor, pesquisa, como currículo dos pesquisadores de um dado imagem e estilo de fonte é abordado em outros trabalhos em grupo, os projetos de pesquisa e as publicações realizadas. que são investigados individualmente ou relacionado a outros Com base na literatura sobre cor, imagem e estilo de fonte, elementos de interface (cf. DELLAGIACOMA et al., 2011; foram criados três temas, desenvolvidos com a intenção de GUGLIOTTA; PATERNÒ, 2012). O design emocional desses evocar as emoções Surpresa, Raiva e Alegria, sendo elementos também foi objeto de estudo de Jiang et al. (2008), nomeados desta forma. Para observar e avaliar as respostas porém não apresenta uma avaliação com usuários para medir emocionais, um conjunto de dez pessoas foi convidado a o impacto das emoções durante a interação. Dessa forma, interagir com o sistema. Cada participante realizou uma tarefa torna-se necessário investigar se a combinação desses semelhante em cada um dos temas. Para a avaliação da elementos pode despertar emoções específicas durante a experiência emocional foi utilizada a abordagem híbrida experiência emocional do usuário. proposta por Xavier (2013) que considera os diferentes Este trabalho tem por finalidade realizar um estudo sobre aspectos da emoção, as visões dos usuários e dos especialistas os elementos de interface de usuário como cor, estilo de fonte e as avaliações feitas durante e após as interações. Departamento de Computação - Universidade Federal de São Carlos (UFSCar) Caixa Postal 676 – 13.565-905 – São Carlos – SP – Brasil Autor para correspondência: [email protected], [email protected] André Canale Garcia, Vânia Paula de Almeida Neris Com os experimentos e as avaliações da experiência suas associações com emoções e os métodos utilizados para emocional dos participantes durante a interação foi possível avaliar a experiência emocional dos usuários. confirmar algumas teorias, descritas na Seção 2. Dentre os resultados obtidos, as emoções experimentadas pelos A) Cores participantes nos temas Surpresa e Alegria coincidiram com Segundo Jiang et al. (2008), as cores, dentre os elementos as esperadas. Em contrapartida, o tema associado à emoção que compõem uma página web, é a mais importante devido à Raiva teve apenas uma avaliação dentro do esperado, sendo sensibilidade das pessoas a elas. Elas são as primeiras a necessários novos experimentos ou outros métodos de chamar a atenção de um visitante em um site, seguida das avaliação. imagens e por último os textos. Este fator evidencia a Este artigo está dividido como segue. Na Seção 2 estão os importância de os designers se atentarem às cores. Ainda, conceitos teóricos relacionados a cada um dos elementos segundo o pesquisador, as cores principais de um site devem estudados, as classificações de emoções e os métodos de ser incorporadas a um tema com tendência de cor que atenda avaliação utilizados. Na Seção 3 os principais trabalhos às necessidades emocionais dos usuários. relacionados são descritos. A metodologia utilizada neste Plutchik (2001) criou a teoria psicoevolutiva emocional que trabalho é apresentada na Seção 4. Os resultados obtidos pelas considera oito dimensões básicas bipolares para a emoção: avaliações estão na Seção 5. E por fim, na Seção 6 estão as alegria versus tristeza, raiva versus medo, aceitação versus conclusões e os trabalhos futuros. desgosto e surpresa versus expectativa. As emoções são associadas a uma roda de cores em que as semelhantes estão II. REFERENCIAL TEÓRICO próximas e as divergentes separadas em 180 graus, como Nesta seção são apresentados os conceitos teóricos cores complementares. relacionados aos elementos de interface de usuário estudados, Figura 1. Modelo tridimensional circumplexo. Retirado de (PLUTCHIK, 2001). Para o desenvolvimento das soluções de design deste assim como o tom vermelho para o tema Raiva (anger) e o trabalho foram consideradas as cores do Modelo trimendional amarelo para o Alegria (joy). circumplexo de Plutchik (2001), ilustrado pela Figura 1. Em relação aos temas, para Surpresa foi adotado o tom de azul B) Imagens relacionado à emoção de mesmo nome no modelo (surprise), As imagens possuem um papel significativo na T.I.S. 2015; 4 (3): 180-190 181 Um estudo sobre emoções e interfaces de usuário em sistemas web determinação das primeiras impressões de uma pessoa. Elas que estabelece padrões para a Web, define cinco estilos de são intuitivas, ajudam os usuários a compreender as fontes que podem ser utilizadas em Cascading Style Sheet informações e transmitem opiniões e mensagens emocionais (CSS1) . Os estilos e exemplos de tipos de fontes incluem (DELLAGIACOMA et al., 2011; JIANG et al., 2008; (GUERRATO, 2012; W3C, 2015): PRLJIC, 2014). • Serif: Times New Roman, Baskerville, Bookman, Segundo Jiang et al. (2008), as imagens não devem apenas Century, Georgia, Garamond; decorar as páginas, mas também transmitir conteúdo e • Sans-serif: Helvetica, Arial, Futura, Verdana, expressar emoções. Assim, a escolha desse elemento de Calibri; interface de usuário é muito importante e deve estar • Cursive: Comic Sans MS, Blackadder ITC, Lucida relacionada a todo o site. Handwriting, Brush Script; Jiang et al. (2008) e Prljic (2014) listam alguns pontos- • Fantasy: Papyrus, Impact, Comic Sans, chave para a escolha das imagens: Copperplate, Curlz MT; • Aspectos fundamentais: qualidade, tamanho, • Monospace: Courier, Prestige Elite, Fixedsys e composição e exposição; Monaco. • As cores das imagens devem ser claras, com efeitos Além dessas, outras classificações são encontradas na visuais intensos, atraentes, únicas e inesquecíveis; literatura, tais como: Slab serif, Script, Moderna, Display, • A aplicação de cores na imagem deve estar em Decorative, Romanas e Egípcias (BULLAT, 2015; cooperação com o conteúdo; MARMOL, 2013; MICHAEL, 2015; VISUALLY, 2013). • A concepção artística das imagens deve estar em Visto que cada estilo de fonte pode afetar as emoções do harmonia com o conteúdo e os usuários do site; leitor de várias formas, o Quadro 1 sintetiza as possíveis • As imagens devem ser úteis, óbvias e relações dos estilos de fonte, principal utilização e emoções autoexplicativas; associadas. • Deve ser eficaz, influenciando o comportamento do usuário fazendo com que ele compre um produto, por Quadro 1. Síntese das relações entre estilos de fonte, exemplo; finalidades e emoções • O uso de imagens grandes chama a atenção dos usuários; • Deve ser emotiva resultando em uma resposta emocional do espectador; • As emoções em uma foto são geralmente transmitidas pela expressão facial e por gestos físicos. Dessa forma, deve-se atentar à emoção transmitida pela pessoa na imagem para atingir o