Um estudo sobre emoções e interfaces de usuário em sistemas web

Transcrição

1 ISSN T.I.S. São Carlos, v. 4, n. 3, p , set-dez 2015 Tecnologias, Infraestrutura e Software Um estudo sobre emoções e interfaces de usuário em sistemas web 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 Elementos de interface de usuário que compõem páginas web tais como cores, textos e imagens, podem transmitir diferentes emoções aos usuários (JIANG et al., 2008). As respostas emocionais geradas pela interação com sistemas computacionais influenciam diretamente no comportamento desses usuários. Pode-se, por exemplo, induzir uma pessoa na compra de um produto ou ajudar no seu processo cognitivo (BIANCHI; NERIS, 2015; XAVIER, 2013; XAVIER et al., 2012). As reações emocionais que esses elementos podem evocar é uma das linhas de pesquisa na área de Interação Humano-Computador (IHC). O estudo da relação das emoções com elementos como cor, imagem e estilo de fonte é abordado em outros trabalhos em que são investigados individualmente ou relacionado a outros elementos de interface (cf. DELLAGIACOMA et al., 2011; GUGLIOTTA; PATERNÒ, 2012). O design emocional desses elementos também foi objeto de estudo de Jiang et al. (2008), porém não apresenta uma avaliação com usuários para medir o impacto das emoções durante a interação. Dessa forma, torna-se necessário investigar se a combinação desses elementos pode despertar emoções específicas durante a experiência emocional do usuário. Este trabalho tem por finalidade realizar um estudo sobre os elementos de interface de usuário como cor, estilo de fonte e imagem e as possíveis respostas emocionais que eles evocam, bem como o desenvolvimento de soluções de design organizando esses elementos conjuntamente e considerando emoções específicas como Surpresa, Raiva e Alegria, além de avaliar se as decisões de design tomadas levam às emoções indicadas na literatura. Para a realização deste estudo foram desenvolvidas interfaces de usuário para o projeto denominado Research Content Management System (RCMS), do curso de pósgraduação lato sensu em Desenvolvimento de Software Para Web da Universidade Federal de São Carlos (UFSCar). Esse sistema divulga informações científicas de grupos de pesquisa, como currículo dos pesquisadores de um dado grupo, os projetos de pesquisa e as publicações realizadas. Com base na literatura sobre cor, imagem e estilo de fonte, foram criados três temas, desenvolvidos com a intenção de evocar as emoções Surpresa, Raiva e Alegria, sendo nomeados desta forma. Para observar e avaliar as respostas emocionais, um conjunto de dez pessoas foi convidado a interagir com o sistema. Cada participante realizou uma tarefa semelhante em cada um dos temas. Para a avaliação da experiência emocional foi utilizada a abordagem híbrida proposta por Xavier (2013) que considera os diferentes aspectos da emoção, as visões dos usuários e dos especialistas 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 São Carlos SP Brasil Autor para correspondência: acgarcia@sc.usp.br, vania@dc.ufscar.br

2 Com os experimentos e as avaliações da experiência emocional dos participantes durante a interação foi possível confirmar algumas teorias, descritas na Seção 2. Dentre os resultados obtidos, as emoções experimentadas pelos participantes nos temas Surpresa e Alegria coincidiram com as esperadas. Em contrapartida, o tema associado à emoção Raiva teve apenas uma avaliação dentro do esperado, sendo necessários novos experimentos ou outros métodos de avaliação. Este artigo está dividido como segue. Na Seção 2 estão os conceitos teóricos relacionados a cada um dos elementos estudados, as classificações de emoções e os métodos de avaliação utilizados. Na Seção 3 os principais trabalhos relacionados são descritos. A metodologia utilizada neste trabalho é apresentada na Seção 4. Os resultados obtidos pelas avaliações estão na Seção 5. E por fim, na Seção 6 estão as conclusões e os trabalhos futuros. II. REFERENCIAL TEÓRICO Nesta seção são apresentados os conceitos teóricos relacionados aos elementos de interface de usuário estudados, suas associações com emoções e os métodos utilizados para avaliar a experiência emocional dos usuários. A) Cores Segundo Jiang et al. (2008), as cores, dentre os elementos que compõem uma página web, é a mais importante devido à sensibilidade das pessoas a elas. Elas são as primeiras a chamar a atenção de um visitante em um site, seguida das imagens e por último os textos. Este fator evidencia a importância de os designers se atentarem às cores. Ainda, segundo o pesquisador, as cores principais de um site devem ser incorporadas a um tema com tendência de cor que atenda às necessidades emocionais dos usuários. Plutchik (2001) criou a teoria psicoevolutiva emocional que considera oito dimensões básicas bipolares para a emoção: alegria versus tristeza, raiva versus medo, aceitação versus desgosto e surpresa versus expectativa. As emoções são associadas a uma roda de cores em que as semelhantes estão próximas e as divergentes separadas em 180 graus, como cores complementares. Figura 1. Modelo tridimensional circumplexo. Retirado de (PLUTCHIK, 2001). Para o desenvolvimento das soluções de design deste trabalho foram consideradas as cores do Modelo trimendional circumplexo de Plutchik (2001), ilustrado pela Figura 1. Em relação aos temas, para Surpresa foi adotado o tom de azul relacionado à emoção de mesmo nome no modelo (surprise), assim como o tom vermelho para o tema Raiva (anger) e o amarelo para o Alegria (joy). B) Imagens As imagens possuem um papel significativo na 181

3 Um estudo sobre emoções e interfaces de usuário em sistemas web determinação das primeiras impressões de uma pessoa. Elas são intuitivas, ajudam os usuários a compreender as informações e transmitem opiniões e mensagens emocionais (DELLAGIACOMA et al., 2011; JIANG et al., 2008; PRLJIC, 2014). Segundo Jiang et al. (2008), as imagens não devem apenas decorar as páginas, mas também transmitir conteúdo e expressar emoções. Assim, a escolha desse elemento de interface de usuário é muito importante e deve estar relacionada a todo o site. Jiang et al. (2008) e Prljic (2014) listam alguns pontoschave para a escolha das imagens: Aspectos fundamentais: qualidade, tamanho, composição e exposição; As cores das imagens devem ser claras, com efeitos visuais intensos, atraentes, únicas e inesquecíveis; A aplicação de cores na imagem deve estar em cooperação com o conteúdo; A concepção artística das imagens deve estar em harmonia com o conteúdo e os usuários do site; As imagens devem ser úteis, óbvias e autoexplicativas; Deve ser eficaz, influenciando o comportamento do usuário fazendo com que ele compre um produto, por exemplo; 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 público-alvo; Expressões faciais podem mudar a mensagem que está sendo transmitida; Não utilizar fotos borradas, visto que levam a uma má impressão, ou fotos não relacionadas com o assunto, pois podem enviar uma mensagem errada para o visitante. A escolha das imagens utilizadas em cada um dos temas desenvolvidos para este trabalho levou em consideração as cores predominantes na imagem, de acordo com a roda de cores de Plutchik (2001), e com a emoção pretendida pelo tema. Por exemplo, para o tema Alegria, foi escolhida uma imagem de uma criança e uma pessoa sorrindo. O sorriso é um sinal de satisfação e está relacionado a uma condição positiva (LERA; DOMINGO, 2007). C) Tipografia Devido à presença de textos em grande parte do conteúdo web e também pela constante interação dos usuários, a tipografia é considerada um dos elementos centrais em um projeto de design (BULAT, 2015; GUERRATO, 2012). Toda formatação aplicada nas páginas web, como estilo, espaçamento, tamanho e cor, tem uma grande influência no psicológico e emocional dos visitantes (BULAT, 2015). A World Wide Web Consortium (W3C, 2015), organização que estabelece padrões para a Web, define cinco estilos de fontes que podem ser utilizadas em Cascading Style Sheet (CSS 1 ). Os estilos e exemplos de tipos de fontes incluem (GUERRATO, 2012; W3C, 2015): Serif: Times New Roman, Baskerville, Bookman, Century, Georgia, Garamond; Sans-serif: Helvetica, Arial, Futura, Verdana, Calibri; Cursive: Comic Sans MS, Blackadder ITC, Lucida Handwriting, Brush Script; Fantasy: Papyrus, Impact, Comic Sans, Copperplate, Curlz MT; Monospace: Courier, Prestige Elite, Fixedsys e Monaco. Além dessas, outras classificações são encontradas na literatura, tais como: Slab serif, Script, Moderna, Display, Decorative, Romanas e Egípcias (BULLAT, 2015; MARMOL, 2013; MICHAEL, 2015; VISUALLY, 2013). Visto que cada estilo de fonte pode afetar as emoções do leitor de várias formas, o Quadro 1 sintetiza as possíveis relações dos estilos de fonte, principal utilização e emoções associadas. Quadro 1. Síntese das relações entre estilos de fonte, finalidades e emoções Outros aspectos da tipografia devem ser considerados em um contexto geral da página. Fonte em negrito, por exemplo, indica força e tem características masculinas. Fontes finas indicam graciosidade e características femininas (GENDELMAN, 2015; JIANG et al., 2008). A cor e o tamanho da fonte também são importantes por permitirem que sejam mais notadas, atraindo a atenção dos usuários e criando efeitos visuais diferentes. A escolha do estilo de fonte a ser utilizado se dá principalmente pelo conteúdo e deve satisfazer a necessidade de expressar o tema desejado (JIANG et al., 2008). Para o tema Surpresa, desenvolvido neste trabalho, foi escolhida a fonte Sansation (SANSATION, 2008) e para o tema Raiva a fonte Prototype, ambas do estilo Moderna. Esses 1 CSS é um mecanismo para adicionar estilos em documentos web (W3C, 2015). 182

4 tipos de fonte podem transmitir uma mensagem futurista e exclusiva (MICHAEL, 2015; VISUALLY, 2013), características pretendidas para o tema Surpresa. Podem também transmitir força e estilo (MICHAEL, 2015) desejados para o tema Raiva. A fonte Comic Sans, do estilo Fantasia, foi utilizada no tema Alegria por ser decorativa, transmitindo diversão e alegria (GENDELMAN, 2015; GUERRATO, 2012). D) Classificação das emoções Segundo Xavier et al. (2012), para identificar o estado emocional dos usuários durante a interação é importante categorizar suas emoções. O Espaço Emocional Semântico proposto por Scherer (2005), ilustrado na Figura 2, permite classificar as emoções por meio de domínios. Figura 2. Espaço Emocional Semântico. Retirado de (SCHERER, 2005) Xavier (2013, p. 39) resume da seguinte maneira cada um mais superior à esquerda é o número 8, podendo ser dos quatro domínios: diferenciado do primeiro no domínio Valência, que é positivo Active/Aroused e Passive/Calm: fortemente neste caso. relacionado ao impacto de excitação do usuário E) Avaliação heurística das emoções (Excitação); High Power/Control e Low Power/Control: reflete A emoção pode causar uma série de estímulos no corpo o sentimento de controle do usuário sobre a humano, como contração de músculos, gestos faciais ou interação/dispositivo (Sentimento de controle); ações, como correr, atacar ou gritar (PLUTCHIK, 2001). Positive e Negative: representa o grau de prazer e Medir a emoção permite entender o nível de engajamento e desprazer (Valência); motivação dos usuários, informações valiosas aos designers Conducive/Obstructive: reflete a facilidade e (LERA; DOMINGO, 2007). Um método encontrado na dificuldade de se alcançar um objetivo (Facilidade de literatura para avaliar as expressões motoras de uma pessoa conclusão do objetivo). são as Dez Heurísticas da Emoção, definidas por Lera e A identificação dos oitantes do Espaço Emocional Domingo (2007). Semântico de Scherer (2005) pode ser realizada adotando As Dez Heurísticas são fundamentadas em teorias que como oitante 1 o mais superior à direita, o qual caracteriza relacionam reações expressivas com o estado emocional do alto grau de Excitação, Valência negativa, alto Sentimento de usuário. São elas: 1) franzir da testa; 2) elevar as Controle, e baixa Facilidade de Conclusão do Objetivo (i.e., sobrancelhas; 3) olhar afastado; 4) sorrir; 5) comprimir os obstrutivo). Seguindo o sentido horário, tem-se que o oitante lábios; 6) mover a boca; 7) expressar-se vocalmente; 8) tocar a 183

5 Um estudo sobre emoções e interfaces de usuário em sistemas web mão no rosto; 9) afastar a cadeira para trás; e 10) inclinar o tronco para frente (LERA; DOMINGO, 2007). A avaliação heurística tem baixo custo para execução, sendo necessário apenas o registro das expressões faciais que podem ser filmadas por uma webcam ligada ao computador. As ocorrências das heurísticas são identificadas e registradas em formulários por um conjunto de avaliadores para serem compiladas em um relatório final posteriormente (XAVIER, 2013). Expressões Motoras e Avaliações Cognitivas (SCHERER, 1984). A Figura 4 mostra de forma sumarizada cada etapa do processo da aplicação da abordagem híbrida. F) Questionário SAM O Self-Assessment Manikin (SAM) (BRADLEY; LANG, 1994) é um questionário de autoavaliação que utiliza pictogramas para representar as respostas emocionais. Este instrumento, ilustrado na Figura 4, aborda os seguintes domínios (MAHLKE; MINGE, apud XAVIER, 2013): Valência: avalia o grau de prazer/desprazer; Excitação: avalia o grau de excitação/relaxamento; Sentimento de controle: avalia se o usuário esteve no controle ou não da atividade realizada. Figura 3. Self-Assessment Manikin. Retirado de (BRADLEY; LANG, 1994) Após a interação, solicita-se que o participante escolha um pictograma de cada domínio que melhor represente seu estado emocional. Cada domínio possui uma escala de valores entre 1 e 9. Considera-se uma avaliação negativa do domínio quando se obtém entre 1 e 4, 5 é avaliado como neutro e entre 6 e 9 como positivo (XAVIER, 2013). G) Abordagem híbrida para a avaliação da experiência emocional Na pesquisa realizada por Xavier (2013) foi desenvolvida uma abordagem híbrida para a avaliação do impacto das emoções na experiência emocional dos usuários. O processo de avaliação envolve a utilização do Espaço Semântico de Scherer (2005), apontado na Figura 2, e cinco componentes da emoção que se inter-relacionam: Sentimentos Subjetivos, Tendências Comportamentais, Reações Fisiológicas, 2 MAHLKE, S.; MINGE, M. Consideration of Multiple Components of Emotions in Human-Technology Interaction. Affect and Emotion in Human-Computer Interaction, v. 4868, p , Figura 4. Processo de aplicação da Abordagem Híbrida. Retirado de (XAVIER, 2013). Na Etapa 1 são definidos os métodos de avaliação de cada componente da emoção. Os seguintes componentes evidenciam o estado emocional dos usuários: Tendências Comportamentais, Reações Fisiológicas, Expressões Motoras e Avaliações Cognitivas. Já o componente Sentimentos Subjetivos avalia um episódio emocional ocorrido (XAVIER, 2013). Na Etapa 2, os critérios de análise dos resultados obtidos nas avaliações da Etapa 1 são determinados, como, por exemplo, quantos erros durante a interação são esperados e qual será o limite para que a avaliação seja considerada negativa ou positiva. Em seguida, os resultados são generalizados como positivos, neutros ou negativos e é feita a relação com o respectivo hemisfério do domínio avaliado. Por fim, na Etapa 3, é realizado o processo de incidência dos oitantes. Cada oitante é incrementado de acordo com os resultados obtidos na Etapa 2 e aquele com maior ocorrência será o resultado final da avaliação (XAVIER, 2013). III. TRABALHOS RELACIONADOS O estudo apresentado por Jiang et al. (2008) exemplifica como a combinação harmoniosa dos elementos cor, imagem e tipografia pode expressar emoções. Os pesquisadores ressaltam que a boa combinação desses elementos é mais importante do que a beleza de páginas web, visto que devem satisfazer as necessidades psicológicas dos usuários. Esses fatores fazem com que as informações possam ser mais bem compreendidas e absorvidas. No trabalho, os autores citam exemplos de páginas web em que foram aplicados conceitos do design emocional. Porém, não houve uma avaliação das respostas emocionais dos usuários durante a interação com as 184

6 páginas exemplificadas. O estudo conclui que apesar de ser necessário levar em consideração a beleza estética, a aplicação dos elementos ainda possui maior importância. Na pesquisa realizada por Dellagiacoma et al. (2011) são avaliadas as características relacionadas com o conteúdo emocional de uma imagem para permitir sua classificação. Foi proposto um estudo de caso para a análise da emoção em imagens de cenários naturais. Os pesquisadores convidaram pessoas para associar a emoção transmitida pelas imagens a seis estados emocionais específicos: alegria, tristeza, medo, desgosto, raiva e surpresa. Os resultados apontaram que, ao analisar as respostas emocionais dos usuários quando eles olham para diferentes imagens, existe um sentimento comum entre as pessoas. Com base nessa experiência o uso de imagens específicas foram utilizadas no desenvolvimento dos temas deste trabalho para que as emoções de cada um deles (Surpresa, Raiva e Alegria) fossem evocadas. Já no trabalho realizado por Gugliotta e Paternò (2012) foram desenvolvidos quatro websites compatíveis com as emoções raiva, calma, alegria e tristeza. O objetivo era fazer com que pessoas interessadas na leitura de livros e poemas de escritores ingleses interagissem com os websites e relatassem o estado emocional durante a interação. Os elementos de design como cor, disposição de elementos e conteúdo dos textos foram combinados de forma a produzir a emoção desejada. Xavier et al. (2012) apresentam uma proposta de associação de respostas emocionais a elementos de interface. O estudo consistiu na identificação de emoções através das Dez Heurísticas de Lera e Domingo (2007) e da estrutura do Espaço Emocional Semântico de Scherer (2005). Idosos foram convidados a interagir com um website por meio de tablets, sendo possível observar os problemas de usabilidade. Os resultados permitiram identificar como as decisões de design ruins entre os elementos de interface podem influenciar negativamente a interação. Os resultados de Jiang et al. (2008) e Dellagiacoma et al. (2011), entre outros, foram tomados como base para a implementação da interface desenvolvida no contexto deste trabalho. Para as avaliações, além das análises dos relatos através de questionários conforme realizado por Gugliotta e Paternò (2012), também foi utilizada a proposta de Xavier et al. (2012) para avaliar e associar as expressões motoras dos usuários com seu estado emocional por meio de diferentes elementos de interface. IV. METODOLOGIA A primeira parte deste trabalho consistiu no estudo da relação das emoções com os elementos cor, imagem e estilo de fonte. Em seguida, foram desenvolvidos três temas para a interface do projeto RCMS: Surpresa, Raiva e Alegria. Estas três emoções foram escolhidas por estarem dispostas de modo distante umas das outras no Modelo de Plutchik (2001), possibilitando a análise de emoções diferentes entre si. Para o tema Surpresa (Figura 5a) o tom azul foi adotado como predominante, com o objetivo de provocar emoções de admiração e surpresa (PLUTCHIK, 2001). Na página inicial do portal RCMS foi incluído um banner com uma imagem em destaque para remeter o participante a um dos projetos de pesquisa. A escolha da imagem, composta de elementos tecnológicos, foi feita levando em consideração os aspectos emocionais pretendidos pelo tema. Para os textos de títulos e menus foi utilizado o tipo de fonte Sansation (SANSATION, 2008) do estilo Moderna, que evoca uma mensagem futurista e exclusiva (MICHAEL, 2015; VISUALLY, 2013). No tema Raiva (Figura 5b) o tom foi o vermelho, que pode evocar emoções como irritação, ira ou raiva (PLUTCHIK, 2001). A fonte Prototype, também do estilo Moderna, que pode transmitir força e estilo (MICHAEL, 2015), foi escolhida para os títulos e menus. Finalmente, para o tema Alegria (Figura 5c) foi utilizada a cor amarela que está associada às emoções de excitação e alegria segundo a roda de cores de Plutchik (2001). A imagem do banner foi modificada de acordo com as características do tema utilizando-se uma foto com uma criança e uma pessoa sorrindo indicando satisfação (LERA; DOMINGO, 2007). A fonte Comic Sans, do estilo Fantasia, foi utilizada para os títulos e menus. As fontes Fantasia são decorativas, transmitindo diversão e alegria (GENDELMAN, 2015; GUERRATO, 2012). Figura 5. Temas desenvolvidos para o sistema RCMS 185

7 Um estudo sobre emoções e interfaces de usuário em sistemas web Para a avaliação dos temas, dez estudantes de pósgraduação em Ciência da Computação foram convidados a participar de forma aleatória, independente de idade, gênero e linha de pesquisa. Não foram recrutadas pessoas daltônicas, visto a necessidade de se perceber as diferentes cores entre uma interface e outra. Cada participante deveria interagir com o sistema realizando a mesma tarefa em cada tema: buscar um pesquisador e abrir o PDF de uma de suas publicações ambos especificados antes da realização de cada tarefa. A sequência de interação com os temas foi definida por sorteio para que todas as possibilidades tivessem a mesma probabilidade de ocorrência. No Quadro 2 são apresentados os perfis dos participantes, com idade entre 25 e 32 anos, e a ordem dos temas sorteados para execução das tarefas. Quadro 2. Perfil dos participantes e ordem de execução das tarefas Para capturar expressões faciais e a fala durante as interações, utilizou-se uma webcam. O software Camtasia foi usado para gravar as ações executadas pelos participantes (CAMTASIA, 2015). Os vídeos foram posteriormente analisados a partir das Dez Heurísticas da Emoção (LERA; DOMINGO, 2007) e das falas espontâneas. Dois avaliadores realizaram esta etapa, registrando a tarefa que estava sendo executada, as heurísticas e as falas detectadas. Em outra etapa os avaliadores discutiram os resultados produzindo um relatório com a síntese das análises dos vídeos. Um dos avaliadores é o primeiro autor deste trabalho e o outro é uma mestranda em Ciência da Computação com tema de pesquisa associado às emoções e design de sistemas computacionais. V. RESULTADOS Nesta seção são apresentados os resultados obtidos para cada um dos componentes da emoção avaliados, assim como a generalização dos resultados e a aplicação do processo de incidência dos oitantes da abordagem híbrida desenvolvida por Xavier (2013). A) Sentimentos subjetivos Para a aplicação da abordagem híbrida de Xavier (2013), foram adotadas as medidas descritas no Quadro 3. O instrumento SAM (BRADLEY; LANG, 1994) foi utilizado para avaliação dos Sentimentos Subjetivos. Para o componente Tendências Comportamentais foram analisadas as seguintes métricas de desempenho e eficácia: número de erros e sucesso na conclusão da tarefa. Para avaliar as Expressões Motoras, baseou-se nas Dez Heurísticas da Emoção (LERA; DOMINGO, 2007). As falas espontâneas foram aplicadas para analisar Avaliações Cognitivas. O componente Reações Fisiológicas não foi avaliado devido à falta de equipamentos, altos custos e falta de especialistas para análise dos resultados. Quadro 3. Medidas Adotadas na Aplicação da Abordagem Híbrida Os resultados obtidos por meio do questionário SAM indicam que todos os domínios (Valência, Excitação e Sentimento de Controle) tiveram uma avaliação positiva, tendo como maioria das respostas valores entre 6 e 9. Foi relatada uma experiência prazerosa, excitante e com alto sentimento de controle durante a interação. Os Quadros 4, 5 e 6 apontam o resumo dos resultados obtidos para os temas Surpresa, Raiva e Alegria, respectivamente. Quadro 4. Resultado das avaliações do questionário SAM do Tema Surpresa Quadro 5. Resultado das avaliações do questionário SAM do Tema Raiva Quadro 6. Resultado das avaliações do questionário SAM do Tema Alegria B) Tendências comportamentais Ao final de cada tarefa os participantes responderam o questionário SAM indicando, por meio dos pictogramas, seu estado emocional. Para cada tarefa o participante deveria escolher uma entre as nove opções de cada domínio: Valência, Excitação e Sentimento de Controle. Para as métricas de desempenho e eficácia foram considerados os números de erros e a conclusão da tarefa. Por exemplo, acessar um menu errado ou tentar utilizar o sistema de busca ao invés do menu foram considerados como um erro de execução da tarefa. Se o participante cometeu mais de um 186

8 erro e mesmo assim conseguiu concluir a tarefa, a avaliação final foi considerada como neutra. O Quadro 7 descreve os critérios considerados para cada uma das possíveis situações. Quadro 7. Critérios para a Avaliação das Métricas de Desempenho e Eficácia Como avaliação final, nenhuma interação foi considerada negativa. Apenas duas foram consideradas neutras e todas as demais tiveram uma avaliação positiva. Os erros cometidos aconteceram na execução da primeira tarefa. Acredita-se que como as tarefas seguintes eram semelhantes, os participantes sabiam quais passos realizar após o primeiro acerto. A tarefa executada no Tema Surpresa não contabilizou nenhum erro. No tema Raiva foram obtidas duas ocorrências: um e três erros com conclusão da tarefa, caracterizando avaliação final positiva e neutra, respectivamente. Também houve registro no tema Alegria por dois participantes. Foram contabilizados dois erros para um dos participantes e outro cometeu apenas um, ambos concluíram a tarefa e tiveram avaliação final neutra e positiva, respectivamente. C) Expressões motoras Na avaliação final das Dez Heurísticas da Emoção (LERA; DOMINGO, 2007) foram consideradas para classificação de uma experiência negativa a ocorrência de quatro ou mais vezes a violação das heurísticas. Menos de quatro foram definidos como uma experiência positiva. No caso do participante 5, tema Alegria, por exemplo, foram registradas cinco diferentes ocorrências: franzir a testa (duas vezes), elevar as sobrancelhas, sorrir, mover a boca, tocar a mão no rosto e inclinar o tronco para frente. Neste caso a avaliação foi considerada Negativa. Quadro 8. Resultado generalizado da avaliação das Dez Heurísticas da Emoção Todos os participantes tiveram uma avaliação positiva para o tema Surpresa. Para os temas Raiva e Alegria houve três avaliações negativas para cada um. D) Avaliação Cognitiva Para a avaliação cognitiva foram consideradas as falas espontâneas. O Quadro 9 apresenta os critérios utilizados para a classificação da experiência dos participantes durante a interação para esta medida. Quadro 9. Critérios para classificação das falas espontâneas O Quadro 10 aponta o resultado generalizado da avaliação das falas espontâneas. Para o tema Surpresa a avaliação foi considerada neutra pois não houve comentários ou os comentários positivos foram em igual quantidade aos negativos. Para o tema Raiva apenas uma classificação final foi negativa. Duas classificações negativas foram detectadas para o tema Alegria. Para nenhum tema foi detectada uma classificação positiva. Quadro 10. Resultado da avaliação da análise das falas espontâneas 187

9 Um estudo sobre emoções e interfaces de usuário em sistemas web E) Processo de Incidência dos Oitantes cada uma das medidas avaliadas (Valência, Excitação, Sentimento de Controle, Métricas de desempenho e eficácia, Dez Heurísticas da Emoção, e Análise de falas espontâneas). O Quadro 11 mostra a síntese dos resultados generalizados para o tema Alegria e quais oitantes foram incrementados, sendo que os valores 1, 0 e -1 correspondem respectivamente à uma experiência positiva, neutra e negativa. De acordo com a abordagem híbrida de Xavier (2013), após a análise de cada uma das medidas avaliadas, deve ser realizada a generalização dos resultados e o processo de incidência dos oitantes do Espaço Semântico (SCHERER, 2005). Cada oitante foi incrementado seguindo os resultados de Quadro 11. Processo de incidência dos oitantes referente ao tema Alegria Como exemplo dos passos realizados, a Quadro 12 ilustra medida para o quarto participante, para cada um dos temas. o resultado do processo de incidência dos oitantes de cada Quadro 12. Processo de incidência dos oitantes para o participante 4 Para seis participantes houve a incidência de mais de um oitante como resultado final. O exemplo exibido no Quadro 12 mostra um desses casos no tema Alegria em que como resultado obteve-se os oitantes 1 e 2. Nesses casos a abordagem híbrida de Xavier (2013) recomenda para o desempate: dá-se preferência àqueles em que o número de medidas avaliadas pelo usuário tenha sido igual ao número de medidas avaliadas pelo especialista (Xavier, 2013, p.77). Caso o empate persista deve-se escolher os oitantes em que um maior número de componentes da emoção tenha sido avaliado (Xavier, 2013, p.77). Ao final do processo de incidência dos oitantes, identificação dos oitantes resultantes e aplicação dos critérios de desempate foi possível apresentar a avaliação final da experiência emocional. No Quadro 13 é apresentada a avaliação final dos dez participantes para cada um dos temas assim como quais foram os oitantes resultantes do Espaço Semântico de Scherer (2005). Quadro 13. Avaliação Final da Experiência Emocional Ao analisar os dados da Quadro 13, tem-se que a maioria 188

10 dos participantes teve uma experiência positiva para o domínio de Valência. Para o domínio de Excitação nenhum dos temas causou um alto nível de excitação. A facilidade das tarefas executadas durante a interação pode ter influenciado no domínio de facilidade de conclusão do objetivo. Como resultado final apenas dois casos incidiram sobre os oitantes 1 ou 2, os quais possuem alto grau de obstrução. Como citado, alguns participantes tiveram mais de um oitante como resultado final. No caso específico do participante 10 e tema Raiva, por exemplo, foram incididos os oitantes 2, 3 e 4, podendo-se concluir que ele teve uma experiência negativa no domínio de Valência. O participante 7 também resultou em mais de um oitante (6 e 7) tendo um sentimento de prazer para todos os temas avaliados. VI. CONCLUSÕES E TRABALHOS F UTUROS O presente trabalho apresenta propostas de design a partir de estudos da literatura e as possíveis respostas emocionais evocadas, por meio da avaliação híbrida de Xavier (2013). Os resultados sugerem que os experimentos realizados para avaliar as respostas emocionais dos participantes durante a interação permitiram confirmar em partes pesquisas anteriores. No caso dos temas Surpresa e Alegria, os resultados apontados coincidiram com o esperado, tendo incidência nos oitantes 6 e 7. No entanto, para o tema Raiva, segundo o levantamento bibliográfico, era esperada uma avaliação negativa para o domínio de Valência e Excitação dos participantes durante a interação. Apenas um dos resultados incidiu sobre os oitantes que representam uma avaliação negativa (oitantes 1 e 2), não permitindo confirmar a literatura. Outros aspectos de design associados às emoções ainda podem ser explorados como complemento deste trabalho. A associação de outras cores com as emoções, a disposição e tamanho de imagens e estilos personalizados para os textos são algumas das possibilidades de trabalhos futuros. AGRADECIMENTOS Os autores agradecem especialmente a Renata Germano Bianchi, mestranda em Ciência da Computação pela UFSCar, por ter contribuído na realização dos experimentos e análise dos resultados deste trabalho. REFERÊNCIAS BIANCHI, R. G., NERIS, V. P. A. Com que cor eu vou? Um estudo sobre cores e emoções na Interação HumanoComputador. In: Proceedings of the 14th Brazilian Symposium on Human Factors in Computing Systems (IHC'2015). Brazilian Computer Society, To be published. BRADLEY, M. M.; LANG, P. J. Measuring emotion: the selfassessment manikin and the semantic differential. Journal of behavior therapy and experimental psychiatry, v. 25, n. 1, p , BULAT, A. Font Psychology: What Your Font Says About Your Website Disponível < Acesso jul CAMTASIA. Screen Recording & Video Editing Disponível < Acesso ago COY, L. The Psychology of Typography Disponível < Acesso jul DELLAGIACOMA, M. et al. Emotion based classification of natural images. In: Proceedings of the 2011 international workshop on DETecting and Exploiting Cultural diversity on the social web. ACM, p GENDELMAN, V. Font Psychology: How Typefaces Hack Our Brains Disponível < Acesso jul GUERRATO, D. Um guia completo de tipografia para a web Disponível < Acesso jul GUGLIOTTA, G.; PATERNÒ, F. The Design of Web Sites Adaptable to Emotion-related Aspects. In: PsychNology Journal. v. 10, n.1, p Disponível < GY_JOURNAL_10_1_PATERNO.pdf >. Acesso ago JIANG, N. et al. Emotional design of web page. In: ComputerAided Industrial Design and Conceptual Design, CAID/CD th International Conference on. IEEE, p LERA, E.; DOMINGO, M. G. Ten Emotion Heuristics: Guidelines for assessing the user s affective dimension easily and cost-effectively. In: Proceedings of the 21st British HCI Group Annual Conference on People and Computers: HCI...but not as we know it, v. 2, p , MARMOL, A. Qué transmiten las tipografías y cómo nos afectan emocionalmente? Disponível < Acesso jul MICHAEL, J. Your Text Tells a Story But Your Font Evokes Emotion. What Does Your Font Say? Disponível < Acesso jul PLUTCHIK, Robert. The Nature of Emotions. American Scientist, v. 89, n. 4, p , PRLJIC, M. The Web Designers Guide to Photo Selection Disponível < Acesso jul SANSATION. Planet Typography Disponível < Acesso jul SCHERER, K. R. On the Nature and Function of Emotion: A Component Process Approach. In: SCHERER, K.R.; 189

11 Um estudo sobre emoções e interfaces de usuário em sistemas web EKMAN, P. Approaches to Emotion, p , SCHERER, K. R. What are emotions? And how can they be measured?. Social science information (4), VISUALLY. The Psychology of Fonts Disponível < Acesso jul W3C. World Wide Web Consortium. Disponível < Acesso jul XAVIER, R. A. C. Uma abordagem híbrida para a avaliação da experiência emocional de usuários Dissertação de Mestrado. Universidade Federal de São Carlos, Programa de Pós-Graduação em Ciência da Computação, São Carlos, SP, Brasil. XAVIER, R. A. C.; GARCIA, F. E.; NERIS, V. P. A. Decisões de Design de Interfaces Ruins e o Impacto delas na Interação: um Estudo Preliminar Considerando o Estado Emocional de Idosos. IHC'12, Brazilian Symposium on Human Factors in Computing Systems, p ,