UNIVERSIDADE FEDERAL DO AMAZONAS
INTITUTO DE COMPUTAÇÃO
BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO
Qualidade Afetiva de Elemento...
Marcelo Henrique Souza da Silva
Qualidade Afetiva de Elementos Visuais de
Interface
Monografia de Graduação apresentada
ao...
Monografia de Graduação sob o título Quantidade Afetiva de Elementos
Visuais de Interfaces apresentada por Marcelo Henriqu...
Para todos aqueles dedicam confiança em meu trabalho, meu muito
obrigado.
Agradecimentos
À minha professora orientadora que sempre me abriu portas, acreditou no
potencial de meu trabalho e que me ...
“The buckstopshere!“
Harry S. Truman
Qualidade Afetiva de Elementos Visuais de
Interfaces
Autor: Marcelo Henrique Souza da Silva
Orientador(a): Dra. Tayana Con...
AffectionQualityof Interface Visual Elements
Author: Marcelo Henrique Souza da Silva
Advisor: Dra. Tayana Conte
ABSTRACT
E...
Lista de figuras
Imagem 1 – Exemplo página inicial ..........................................................................
Lista de tabelas
Tabela 1 - Elementos Visuais de Páginas Web e Suas Funções...................................... 18
Tabel...
Lista de abreviaturas e siglas
UFAM – Universidade Federal do Amazonas
IComp – Instituto de Computação
Sumário
1 Introdução ........................................................................................................
14
1 Introdução
As vendas online têm redefinido os paradigmas de venda de produtos(Hoque
and Lohse 1999). Elas reduzem o t...
15
Grewal 1992, Donovan, et al. 1994, Spies, Hesse and Loesch 1997). Diante
disso, assim como em lojas reais, nos quais o ...
16
e o método de aplicação do experimento. Por último, no Capítulo 4, serão
apresentadas as conclusões sobre o experimento...
17
2 Intenção e Hipóteses do Experimento
Baseado na pesquisa de Callahan&Koenemann(2000), de que as pessoas
primeiro inter...
18
sobre os participantes,
acomoda diversos grupos de participantes,
é mais barato que o modelo tradicional,
possibilita e...
19
Dropdownbutton Indica uma lista de ações no
clique.
Toggle Permite ao usuário definir
estados diferentes de algum
conte...
20
Tag Tags permitem aos usuários
encontrarem conteúdo da
mesma categoria.
Slider Permite usuários definirem ou
ajustarem ...
21
modelos de loja possuem 5 tarefas, e o teste foi criado para durar um tempo
médio de 7 minutos. Segue abaixo a lista de...
22
utilizar esse sistema.
8. Eu achei o sistema muito desconfortável de utilizar.
9. Eu me senti bem confiante utilizando ...
23
inserção de dados de pagamento de cartão de crédito, solicitando ao usuário
somente para adicionar sua data de nascimen...
24
produto
Imagem 3 – Exemplo página de
pagamento
Imagem4 – Exemplopágina de
pesquisa
O código fonte do projeto está dispo...
25
Links Página com lista
de blusas
Todos os links na versão 2 da loja
estão na cor preta e sem sublinhado,
com o intuito ...
26
Na versão 2, todos os botões foram
substituídos por links, esses com
cores azuis características dos links.
Botão Volta...
27
Imagem 6 - Comparação entre as páginas de produto
Imagem 7- Comparação entre as páginas de pagamento
28
4 Resultados e Análise
Dos 108 participantes da pesquisa, apenas 55 pessoas responderam ao
formulário SUS ao final do e...
29
Imagem 8 - Distribuição de pessoas por tempo para completar o experimento da loja 1
A loja 2 apresentou uma média de 85...
30
Imagem10 - Comparação de cliques entre páginas de busca da loja 1 (a esquerda) e
loja 2 (a direita)
Imagem11 - Comparaç...
31
4.2 Utilizar o elemento visual correto para cada tarefa
aumenta a taxa de sucesso na execução das tarefas
Para testar e...
32
4.1 Utilizar o elemento visual correto para cada tarefa
aumenta a percepção de satisfação do usuário em relação
à aplic...
33
Imagem 16- Tabela de Cálculo de Índices Loja 2
34
5 Considerações Finais
As diferenças implantadas entre as lojas são muito sutis e geralmente não
seriam percebidas por ...
35
Referências
Baker, J, M Levy, e D Grewal. “An experimental approach to making retail store environmental
decisions .” J...
36
Novak, T P, D L Hoffman, e Y F Yung. “Measuring customer experience in online environments: a
structural modeling appro...
Próximos SlideShares
Carregando em…5
×

Monografia - Qualidade Afetiva de Elementos Visuais

725 visualizações

Publicada em

Embora não tenha atingido resultados que possam mudar o mundo. Segue a monografia com o resultado dos experimentos que realizei em 2013 para testar o impacto da mudança sutil de elementos de interface para a mesta atividade.

A cada novo ano, estamos acompanhando o crescimento da internet e como ela tem mudado a vida das pessoas. Como uma ferramenta global de comunicação, vendas, compra e trabalho, a Internet se provou um ambiente multi-disciplinar e multi-cultural. Isso alimenta a necessidade e o desafio de criar interfaces que comunicam com todas essas comunidades, culturas e atividades, e que as ajudem a alcançar seus objetivos de uso. Baseado nos estudos que apontam que a percepção do usuário sobre o uso de interfaces se altera de acordo com sua cultura e personalidade, este trabalho experimental tem como objetivo analisar como diferentes elementos visuais tem impacto na forma que as pessoas usam interfaces.

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
725
No SlideShare
0
A partir de incorporações
0
Número de incorporações
0
Ações
Compartilhamentos
0
Downloads
8
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Monografia - Qualidade Afetiva de Elementos Visuais

  1. 1. UNIVERSIDADE FEDERAL DO AMAZONAS INTITUTO DE COMPUTAÇÃO BACHARELADO EM CIÊNCIA DA COMPUTAÇÃO Qualidade Afetiva de Elementos Visuais de Interface Marcelo Henrique Souza da Silva Manaus – AM Setembro / 2013
  2. 2. Marcelo Henrique Souza da Silva Qualidade Afetiva de Elementos Visuais de Interface Monografia de Graduação apresentada aoInstituto de Computação da Universidade Federal do Amazonas como requisito parcial paraa obtenção do grau de bacharel em Ciência da Computação. Orientador(a) Dra. Tayana Conte Universidade Federal do Amazonas – UFAM Instituto de Computação – IComp Manaus-AM Setembro / 2013
  3. 3. Monografia de Graduação sob o título Quantidade Afetiva de Elementos Visuais de Interfaces apresentada por Marcelo Henrique Souza da Silva e aceita pelo Instituto de Computação da Universidade Federal do Amazonas, sendo aprovada por todos os membros da banca examinadora abaixo especificada: __________________________________________ Tayana Conte, Dra. em Engenharia de Sistemas de Computação Orientador(a) Grupo de Pesquisa em Usabilidade e Engenharia de Software Universidade Federal do Amazonas __________________________________________ Natasha Valentim Departamento de Ciência da Computação Universidade Federal do Amazonas Manaus-AM, 18 de Setembro de 2013.
  4. 4. Para todos aqueles dedicam confiança em meu trabalho, meu muito obrigado.
  5. 5. Agradecimentos À minha professora orientadora que sempre me abriu portas, acreditou no potencial de meu trabalho e que me serve de inspiração na tomada de muitas decisões. Aos meus colegas de trabalho que me deram suporte e contribuíram com seus pontos de vista em relação aos modelos de experimento. A todas as pessoas que me servem de fonte de energia para acordar todo dia e continuar em frente.
  6. 6. “The buckstopshere!“ Harry S. Truman
  7. 7. Qualidade Afetiva de Elementos Visuais de Interfaces Autor: Marcelo Henrique Souza da Silva Orientador(a): Dra. Tayana Conte RESUMO A cada novo ano, estamosacompanhando o crescimento da internet e comoela tem mudado a vida das pessoas. Como umaferramenta global de comunicação, vendas, compra e trabalho, a Internet se provou um ambiente multi-disciplinar e multi-cultural. Issoalimenta a necessidade e o desafio de criar interfaces quecomunicamcomtodasessascomunidades, culturas e atividades, e que as ajudem a alcançarseusobjetivos de uso. Baseadonosestudosqueapontamque a percepção do usuáriosobre o uso de interfaces se altera de acordo com suacultura e personalidade, estetrabalho experimental tem comoobjetivoanalisarcomodiferenteselementosvisuais tem impactona formaque as pessoasusam interfaces. Palavras-chave: usabilidade, experiência, efetividade, conversão.
  8. 8. AffectionQualityof Interface Visual Elements Author: Marcelo Henrique Souza da Silva Advisor: Dra. Tayana Conte ABSTRACT Every new year, we are following internet growth and how it is changing peoples’ life. As a global tool to communicate, sell, buy and work, Internet has been proven as a multicultural environment. It brings up the challenge to create interfaces that communicate with all those communities, cultures and activities, and help them to achieve their goals. Since there are references that culture and people’s personality creates a different perception of trust and meaning, this work has as main objective, analyze how common user interface components help users to complete simple tasks. Keywords:usability, ux, experience, effectiveness, conversion.
  9. 9. Lista de figuras Imagem 1 – Exemplo página inicial ......................................................................................... 23 Imagem 2 – Exemplo página de produto................................................................................ 23 Imagem 3 – Exemplo página de pagamento.......................................................................... 24 Imagem 4 – Exemplo página de pesquisa.............................................................................. 24 Imagem 5 - Comparação entre as páginas de busca.......................................................... 26 Imagem 6 - Comparação entre as páginas de produto...................................................... 27 Imagem 7 - Comparação entre as páginas de pagamento................................................ 27 Imagem 8 - Distribuição de pessoas por tempo para completar o experimento da loja 1.................................................................................................................................................... 29 Imagem 9 - Distribuição de pessoas por tempo para completar o experimento na loja 2.................................................................................................................................................... 29 Imagem 10 - Comparação de cliques entre páginas de busca da loja 1 (a esquerda) e loja 2 (a direita)............................................................................................................................. 30 Imagem 11 - Comparação de cliques entre páginas de blusa da loja 1 (a esquerda) e loja 2 (a direita)............................................................................................................................. 30 Imagem 12 - Comparação de cliques entre páginas de pagamento da loja 1 (a esquerda) e loja 2 (a direita)......................................................................................................... 30 Imagem 13 - Número de pessoas que completaram cada etapa do experimento para a loja 1 ................................................................................................................................................ 31 Imagem 14 - Número de pessoas que completaram cada etapa do experimento para a loja 2 ................................................................................................................................................ 31 Imagem 15 - Tabela de cálculo de índices Loja 1................................................................ 32 Imagem 16 - Tabela de Cálculo de Índices Loja 2............................................................... 33
  10. 10. Lista de tabelas Tabela 1 - Elementos Visuais de Páginas Web e Suas Funções...................................... 18 Tabela 2 - Diferença entre as versões das lojas .................................................................... 24
  11. 11. Lista de abreviaturas e siglas UFAM – Universidade Federal do Amazonas IComp – Instituto de Computação
  12. 12. Sumário 1 Introdução ..........................................................................................................14 1.1 Contextualização.................................................................................................................. 15 1.2 Objetivos ................................................................................................................................. 15 1.3 Organização do trabalho ................................................................................................... 15 2 Intenção e Hipóteses do Experimento.........................................................17 3 Estudo experimental........................................................................................17 3.1 Os Elementos Visuais......................................................................................................... 18 3.2 Métricas................................................................................................................................... 20 3.3 A Loja Virtual ........................................................................................................................ 22 3.4 Itens de comparação........................................................................................................... 24 4 Resultados e Análise ........................................................................................26 4.1 Utilizar o elemento visual correto para cada tarefa diminui o tempo necessário para completar a tarefa............................................................................................................. 28 4.2 Utilizar o elemento visual correto para cada tarefa aumenta a taxa de sucesso na execução das tarefas............................................................................................................ 31 4.1 Utilizar o elemento visual correto para cada tarefa aumenta a percepção de satisfação do usuário em relação à aplicação.................................................................... 32 5 Considerações Finais .......................................................................................34 Referências ............................................................................................................35
  13. 13. 14 1 Introdução As vendas online têm redefinido os paradigmas de venda de produtos(Hoque and Lohse 1999). Elas reduzem o tempo de pesquisa por diferentes preços e em encontrar diferentes fornecedores, além de criar um canal de comunicação alternativo para quem presta algum serviço. As vendas pela internet aumentaram o alcance de pequenas, médias e grandes lojas, o que torna lojas online visíveis à pessoas de diferentes culturas e metáforas linguísticas. A necessidade por melhorar a razão de conversão - quantidade de visitantes do site que chegam a realizar uma compra - se torna necessária para o sucesso desses negócios(Reibstein 1999?). Mesmo que fosse possível criar interfaces que vendem mais, pois se comunicam diretamente com o interesse de cada indivíduo, predizer o comportamento do usuário é uma tarefa muito complexa (Khalid 2006). Neste cenário, o designer ou gerente de produto deve observar as características que definem o grupo de consumidores, então criar interfaces que deem os meios que o grupo precisa para atingir seus objetivos. Através de interfaces web trabalhadas com foco nos usuários, os donos de lojas online têm a expectativa de sair da dura média de 4% de razão de conversão(Chaffey 2013). Dentre os desafios de se identificar comportamentos dos grupos de usuários está a “culturabilidade”, mistura de cultura e usabilidade (Barber and Badre 1998), que impacta diretamente na percepção de confiança e aceitação dos usuários nos websites, dependendo de suas origens (Marcus and Gould 2000, Fogg 2002, Jarvenpaa, et al. 1999). Independentemente se a loja é real ou virtual, o contato do consumidor com o ambiente da loja influencia suas respostas emocionais e comportamento de compra (Chang, et al. 2002, Novak, Hoffman and Yung 2000, Sherman and Smith 1986, Baker, Levy and
  14. 14. 15 Grewal 1992, Donovan, et al. 1994, Spies, Hesse and Loesch 1997). Diante disso, assim como em lojas reais, nos quais o ambiente de compra influencia o usuário a fazer uma compra ou não, alguns frameworks estão sendo propostos para criar os mesmos estímulos em meios virtuais (Mummalaneni 2005). 1.1 Contextualização A maioria das pessoas não leem as instruções de interface, ao contrário, interagem com a interface primeiro, e caso não atinjam seu objetivo, começam a procurar por instruções na página(Callahan and Koenemann 2000). Sendo assim, não importa quão bem trabalhada e sofisticada as interfaces web sejam, as diferenças de língua e culturas irão influenciar fortemente a percepção do usuário (Nielsen 1990). Faz-se necessário, então, entender o que move os grandes grupos de consumidores e construir interfaces que se comuniquem bem com estes grupos. Devido a estes fatos, o uso dos elementos de comunicação visual se tornam essenciais na hora de construir interfaces que conduzam bem os usuários até o seu objetivo final(Callahan and Koenemann 2000). 1.2Objetivos O objetivo deste trabalho é observar como a mesma tarefa pode modificar o comportamento e percepção do usuário sobre a interface, variando-se apenas os elementos visuais utilizados para navegar e auxiliar o usuário. 1.3 Organização do trabalho Este material está dividido em quatro capítulos. Este capítulo inicial é uma introdução ao conceito de percepção do usuário e introdução aos termos utilizados. No Capítulo 2, serão explicitadas as hipóteses que servem de base para este experimento. O Capítulo 3 descreve a elaboração, desenvolvimento
  15. 15. 16 e o método de aplicação do experimento. Por último, no Capítulo 4, serão apresentadas as conclusões sobre o experimento, co-foundingfactors do experimento e possíveis trabalhos futuros.
  16. 16. 17 2 Intenção e Hipóteses do Experimento Baseado na pesquisa de Callahan&Koenemann(2000), de que as pessoas primeiro interagem com elementos visuais da interface, para então, caso não consigam atingir seus objetivos, ler as instruções, este estudo assume que os elementos visuais são o fator principal de influência no tempo no qual os usuários irão completar as atividades propostas pelas interfaces web. É mencionado por Kubilus(2002) que os componentes de ambientes de e- commerce confiáveis compartilham de muitas características de usabilidade de interfaces eficazes. Este estudo propõe que essa relação existe, pois quando se utiliza o componente visual correto para a tarefa proposta, o usuário se sente mais confortável e confiante para dar o próximo passo. Este estudo desconsidera os princípios de criação de design: harmonia, equilíbrio e simplicidade (Watzman 2002), e concentra as diferenças nos grupos de teste apenas nos componentes visuais com o objetivo de testar as seguintes hipóteses: - Utilizar o elemento visual correto para cada tarefa H1: diminui o tempo necessário do usuário para completar a tarefa H2: aumenta a taxa de sucesso na execução das tarefas H3: aumenta a percepção de satisfação do usuário em relação à aplicação 3 Estudo experimental Para aumentar a variação do grupo de participantes do experimento e as circunstâncias de uso da interface, este experimento foi realizado através de uma página divulgada na internet e na língua portuguesa - língua nativa do país onde o projeto foi executado. O modelo de experimento remoto foi escolhido pois (Remote Testing 2013): elimina a necessidade do uso de laboratórios e o efeito de laboratórios
  17. 17. 18 sobre os participantes, acomoda diversos grupos de participantes, é mais barato que o modelo tradicional, possibilita estender os dias de experimento em caso de necessidade 3.1 Os Elementos Visuais Pra criar dois ambientes diferentes de uso, serão criadas duas interfaces de loja virtual: a primeira na qual cada componente visual será utilizado para a função que foi determinado, e uma segunda na qual tarefa e componente utilizado serão de objetivos diferentes. Foi utilizado como base a descrição de função dos componentes visuais como definido por usability.gov(User Interface Elements 2013) , conforme mostra a Tabela 1. Tabela 1 - Elementos Visuais de Páginas Web e Suas Funções Elemento Função Exemplo checkbox Permite ao usuários selecionar mais de uma opção. radiobutton Permite aos usuários selecionarem um item por vez. Dropdownlist Mesma função do radiobutton, porém mais compacto. List box Mesma função do checkbox, porém mais compacto. Button Indica uma ação no clique.
  18. 18. 19 Dropdownbutton Indica uma lista de ações no clique. Toggle Permite ao usuário definir estados diferentes de algum conteúdo. Text Field Permite aos usuários adicionar textos. Datepicker Permite aos usuários selecionar data e hora em formato correto para o sistema. Searchfield Mesma função do componente “textfield”, porém é geralmente acompanhado por um botão de busca. Breadcrumb Permitem aos usuários encontrarem sua atual posição no site, e permitir navegar para etapas anteriores. Pagination Permite aos usuários navegador entre as páginas de conteúdo, seguindo uma ordem definida ou não.
  19. 19. 20 Tag Tags permitem aos usuários encontrarem conteúdo da mesma categoria. Slider Permite usuários definirem ou ajustarem valores. Icon Ajudam usuários a navegar na interface. ImageCarousel Permite os usuários navegarem por um conjunto de itens e escolherem um, que geralmente encaminha para uma nova página. 3.2 Métricas Como o experimento se dá com o uso de uma interface simulada de loja virtual, e que pode ser acessada por várias pessoas em lugares diferentes, os dados serão todos coletados remotamente. Para este estudo foram utilizados o seguinte conjunto de métricas: Taxa de sucesso ao completar a tarefa (H2) Tempo necessário total para completar as atividades (H2) Satisfação final do usuário com a experiência de compra (H3) O experimento foi executado com dois modelos de loja diferentes. Ambos
  20. 20. 21 modelos de loja possuem 5 tarefas, e o teste foi criado para durar um tempo médio de 7 minutos. Segue abaixo a lista de tarefas propostas para ambas as lojas online: 1. Procurar por um blusa; 2. Selecionar uma quantidade e atributos do produto; 3. Inserir dados de pagamento simulando um cartão de crédito; 4. Voltar para escolher uma nova quantidade, pois a quantidade indicada na tarefa é maior que a quantidade disponível; 5. Completar a compra. Para a medição do tempo de execução entre as atividades, assim como para saber o fluxo de interação do usuário com a página, será implementado ao longo do site medidores através da ferramenta KISSMetrics 1 . Essa ferramenta é totalmente transparente para o usuário, não afetando assim a percepção do mesmo sobre a interface. Para medir o nível de satisfação do usuário, será utilizada a escala de usabilidade de sistemas (SUS)(Brooke 1986). No sistema SUS os usuários precisam responder aos 10 itens abaixo mencionados com uma resposta que varia entre “Discordo totalmente” e “Concordo totalmente”: 1. Eu acredito que gostaria de utilizar esse site mais vezes. 2. Eu achei o sistema desnecessariamente complexo. 3. Eu achei o sistema fácil de usar. 4. Eu acredito que precisaria da ajuda de uma pessoa técnica para usar o sistema. 5. Eu acredito que as várias funções desse sistema estavam melhor integradas. 6. Eu acredito que há várias inconsistências nesse sistema. 7. Eu acredito que a maioria das pessoas aprenderiam rapidamente a 1 KISSMetrics – www.kissmetrics.com
  21. 21. 22 utilizar esse sistema. 8. Eu achei o sistema muito desconfortável de utilizar. 9. Eu me senti bem confiante utilizando o sistema. 10. Eu sinto que preciso aprender mais coisas para conseguir utilizar esse sistema. Ao final serão analisados ainda as imagens de interação de mouse, clique e uso de rolar página, com as interfaces capturadas ao longo do experimento no objetivo de mapear algum tipo de comportamento em cada modelo de loja. Para a medição dos mapas de calor será utilizado a ferramenta CrazyEgg2 que faz medição dos mapas de calor, assim como mapa de cliques e rolamento das páginas. Ambas as ferramentas, CrazyEgg e KissMetrics, foram escolhidas por permitirem o uso gratuito dentro do período do experimento, e também pelo domínio das ferramentas. 3.3 A Loja Virtual Ambas as lojas virtuais possuem o mesmo cenário, e variam apenas nos recursos disponibilizados na interface para permitir ao usuário completar sua tarefa. Como já é conhecido que as taxas de conversão web são baixas naturalmente, propõe um cenário simples para o experimento, e que segue descrito abaixo: Utilizar a loja para comprar camisas, sendo uma ou mais. A loja virtual possuirá uma página inicial com a lista de produtos (ver Imagem 1). A segunda página é a página com mais detalhes do produto, e possui os campos para definir quantidade, tamanho e cor da camisa desejada, além do botão comprar (ver Imagem 2). A terceira tela simula a 2 Crazy Egg – www.crazyegg.com
  22. 22. 23 inserção de dados de pagamento de cartão de crédito, solicitando ao usuário somente para adicionar sua data de nascimento e nome (ver Imagem 3). Nessa etapa ele é obrigado a voltar para diminuir a quantidade de camisas para completar a compra. Ao completar a compra, todos os usuários são redirecionados para o mesmo formulário de avaliação SUS. O preço dos produtos foram ocultados para não influenciarem no processo de decisão do usuário. Para gerenciar a distribuição dos modelos de loja seria utilizado como ferramenta o Google AnalyticsContentExperiments 3 . Essa ferramenta redireciona os acessos do link original, para uma de suas variações, e armazena esses dados com o propósito de apontar uma versão vencedora em número de conversões. Porém, devido a tecnologia utilizada para o desenvolvimento do site de experimento, não foi possível inserir o recurso, que exigia que as páginas do site fossem geradas de forma estática, ao contrário de como funcionam os sites feitos em AngularJS – linguagem de desenvolvimento escolhida para desenvolver o projeto. Para substituir o Google AnalyticsContentExperiments foi implementada uma função randômica para direcionar os usuários aleatoriamente para cada página. No caso de desequilíbrio na distribuição que superasse uma razão de dois terços, seria adaptado o direcionamento apenas para uma página afim de equilibrar a pesquisa. Imagem1 – Exemplopáginainicial Imagem 2 – Exemplo página de 3 Google Analytics Content Experiments - https://support.google.com/analytics/answer/1745147?hl=en
  23. 23. 24 produto Imagem 3 – Exemplo página de pagamento Imagem4 – Exemplopágina de pesquisa O código fonte do projeto está disponível em um repositório aberto no Github e pode ser encontrado no endereço https://github.com/bissu/ui- acceptance. O experimento pode ser acessado pelo endereço http://bissu.github.io/ui-acceptance/#/. 3.4Itens de comparação Como o experimento tem por objetivo demonstrar que o uso correto dos elementos de interface, assim como os componentes visuais da página, tem impacto positivo na percepção do usuário e no comportamento dele, foram alterados em cada versão da loja, elementos que são detalhes suaves, mas que poderiam ser identificados se fosse solicitada uma comparação. A lista de itens selecionados são elementos que o usuário irá precisar para navegar ou completar a tarefa, o que implica que necessariamente ele irá ver interagir com esses elementos ao longo do experimento. Dos itens modificados entre as lojas estão: Tabela 2 - Diferença entre as versões das lojas Item Página do experimento Diferença
  24. 24. 25 Links Página com lista de blusas Todos os links na versão 2 da loja estão na cor preta e sem sublinhado, com o intuito de descaracterizar a função destes textos. Todos os elementos de link também não modificam o cursor do mouse para pointer ( ). Imagens das blusas Página com lista de blusas Todas as imagens de blusas perderam moldura e o cursor do mouse também não muda para pointer ( ). Box para definição de quantidade do produto Página do produto Na versão 1 da loja, o campo possui ponteiros para cima e para baixo para a definição dos valores de quantidade: Na versão 2 o campo é um textfield comum como definido na Tabela 1. Lista de tamanhos de camisa Página do produto Na versão 1 da loja as opções foram dispostas em um dropdownlist, como definido na Tabela 1. Na versão 2 as opções foram dispostas por um conjunto de radiobuttons, como definido na Tabela 1. Botão comprar Página do produto Na versão 1 da loja foram usados botões com cores e bordas.
  25. 25. 26 Na versão 2, todos os botões foram substituídos por links, esses com cores azuis características dos links. Botão Voltar Página de pagamento Na versão 1 da loja foram usados botões com cores e bordas. Na versão 2, todos os botões foram substituídos por links, mas este em específico está da cor preta. Botão efetuar pagamento Página de pagamento Na versão 1 da loja foram usados botões com cores e bordas. Na versão 2, todos os botões foram substituídos por links, esses com cores azuis características dos links. Imagem 5- Comparação entre as páginas de busca
  26. 26. 27 Imagem 6 - Comparação entre as páginas de produto Imagem 7- Comparação entre as páginas de pagamento
  27. 27. 28 4 Resultados e Análise Dos 108 participantes da pesquisa, apenas 55 pessoas responderam ao formulário SUS ao final do experimento. Devido ao fato de esse experimento ser executado remotamente, através de um endereço disponibilizado na internet, não é possível observar os motivos que levaram os participantes a desistirem no processo. Esses motivos podem ser diversos como: falha na internet, falha no site, desinteresse pelo objetivo, interrupção da atividade seguida por desistência ou frustração no meio do processo. Essas faltas se aproximam das causas reais de desistência de compra/assinatura em um processo real de aquisição na internet. Das 3 hipóteses que incentivaram o estudo, uma apresentou indício negativo e duas apresentaram indícios positivos. Seguem abaixo as apresentações dos modelos de teste e os resultados atingidos. 4.1 Utilizar o elemento visual correto para cada tarefa diminui o tempo necessário para completar a tarefa Para analisar esta hipótese foram considerados somente os participantes que conseguiram iniciar o experimento e chegar a última página experimento. O tempo medido é desde a visualização da página de busca, até a visualização da página final – não incluindo o tempo para responder a pesquisa ao final do experimento. A loja 1 apresentou uma média de 136,72 segundos, com um desvio padrão de 88,77, para 29 pessoas. Foi removido do grupo amostral um usuário em específico que levou 8 minutos para a execução da tarefa. A distribuição dos usuários pelo tempo utilizado para executar o experimento pode ser acompanhada pela Imagem 8.
  28. 28. 29 Imagem 8 - Distribuição de pessoas por tempo para completar o experimento da loja 1 A loja 2 apresentou uma média de 85,84 segundos, com um desvio padrão de 42,03 para 31 pessoas. Foram removidos do grupo amostral 3 usuários que levaram mais do que 15 minutos para a execução do experimento. A distribuição dos usuários pelo tempo utilizado para executar o experimento pode ser acompanhada pela Imagem 9. Imagem 9 - Distribuição de pessoas por tempo para completar o experimento na loja 2 Segundo os dados coletados, a loja 2 – que apresenta elementos visuais fora das suas características padrão - apresentou menor tempo médio para a execução do experimento, com uma diferença de 47,96 segundos. Os motivos que levaram os usuários a passar mais tempo na loja com melhor interface não estão claros. Os mapas de interação não demonstram nenhuma diferença significativa no comportamento entre os usuários das páginas.
  29. 29. 30 Imagem10 - Comparação de cliques entre páginas de busca da loja 1 (a esquerda) e loja 2 (a direita) Imagem11 - Comparação de cliques entre páginas de blusa da loja 1 (a esquerda) e loja 2 (a direita) Imagem12 - Comparação de cliques entre páginas de pagamento da loja 1 (a esquerda) e loja 2 (a direita)
  30. 30. 31 4.2 Utilizar o elemento visual correto para cada tarefa aumenta a taxa de sucesso na execução das tarefas Para testar esta hipótese foram consideradas a quantidade de pessoas que visualizaram a primeira página da loja (página de busca por blusas) e que conseguiram visualizar a última página do experimento. Para considerar a realização do experimento um sucesso, não foi considerado necessário preencher a pesquisa na última página. Para a loja 1, a taxa de sucesso foi de 56,1% (ver imagem 13). Para a loja 2, a taxa de sucesso foi de 54,8% (ver imagem 14). Sendo assim a loja 1 apresentou uma leve melhor performance em número de pessoas que chegaram ao fim do experimento, porém com uma diferença muito baixa o que caracteriza o indício como neutro. Imagem 13 - Número de pessoas que completaram cada etapa do experimento para a loja 1 Imagem 14 - Número de pessoas que completaram cada etapa do experimento para a loja 2
  31. 31. 32 4.1 Utilizar o elemento visual correto para cada tarefa aumenta a percepção de satisfação do usuário em relação à aplicação Os usuários que conseguiram chegar até a última etapa do experimento encontraram um formulário de escala de usabilidade de sistemas (SUS) (Brooke 1986). O SUS tem como objetivo medir sistemas em diferentes aspectos: Eficácia: os usuários conseguem atingir seus objetivos; Eficiência: quanto de recurso ou esforço é necessário é investido para realizar os objetivos; Satisfação: a avaliação de quão a experiência foi boa. O formulário gera um índice que varia de 0 a 100, com uma nota de corte média para 68 (Sauro 2011). Medindo os índices da loja 1 apresentou um índice de 74,17, contra 71,83 da loja 2. Novamente uma diferença muito baixa, o que caracteriza o indício como neutro. Abaixo é possível acompanhar os dados completos coletados para o formulário Imagem 15- Tabela de cálculo de índices Loja 1
  32. 32. 33 Imagem 16- Tabela de Cálculo de Índices Loja 2
  33. 33. 34 5 Considerações Finais As diferenças implantadas entre as lojas são muito sutis e geralmente não seriam percebidas por pessoas que usaram as lojas individualmente. As lojas diferem apenas em relação com elementos isolados e não foi implementada nenhuma diferença visual que interfere no fluxo do experimento. Embora o tempo para executar a segunda versão da loja seja menor, o índice de conversão da loja 1 apresentou melhores resultados. Além disso, mesmo as diferenças sendo sutis, a loja 1 apresentou melhor resultado na percepção de qualidade através do formulário SUS. Analisando esses resultados, temos indícios de que tão embora leves modificações nos elementos visuais alteraram levemente a percepção do usuário sobre a qualidade e conforto percebido, a modificação tão somente dos elementos visuais não foram fortes o suficiente para alterar a taxa de sucesso. Questiona-se também agora, ao final do estudo, se a atividade talvez não fosse simples demais a ponto de não impor desafios aos usuários, requerindo assim que eles procurassem suporte nos elementos visuais das páginas para atingir seus objetivos. Dessa forma, indica-se como próximos passos: - A realização de entrevistas com parte do grupo amostral, afim de captar diferenças mais subjetivas no comportamento e percepção do usuário; - Aumentar a amostra para tirar conclusões mais sólidas do experimento; - Realizar novos experimentos, com alterações menos sutis nos elementos de interface; - Realizar novos experimentos com cenários que possuam objetivos mais complexo
  34. 34. 35 Referências Baker, J, M Levy, e D Grewal. “An experimental approach to making retail store environmental decisions .” J Retail, 1992: 445-60. Barber, W, e A N Badre. “Culturability: The merging of culture and usability.” 4th Conference on Human Factors and the Web . Baskin Ridge, 1998. Brooke, John. “SUS: A Quick and Dirty Usability Scale.” (Redhatch Consulting Ltd.) 1986. Callahan, Ewa, e Jürgen Koenemann. A Comparative Usability Evaluation of User Interfaces for Online Product Catalogs. Minneapolis, Minnesota: ACM, October de 2000. Chaffey, Dave. Ecommerce Conversion Rates. 10 de June de 2013. http://www.smartinsights.com/ecommerce/ecommerce-analytics/ecommerce-conversion-rates/ (acesso em 13 de July de 2013). Chang, J. E., T. W. Simpson, A Rangaswamy, e J R Tekchadaney. “A good website can convey the wrong brand image! A preliminary report.” EBRC, 2002. Donovan, R J, J R Rossiter, G Marcoolyn, e A Nesdale. “Store atmosphere and purchasing behavior.” J Retail, 1994: 283-94. Fogg, B. J. “Persuasive technology.” (Morgan Kaufmann Publishers) 2002. Hoque, AY, e GL Lohse. “An information search cost perspective for designing interfaces for electronic commerce.” J Mark Res, August 1999: 387 - 94. Jarvenpaa, S. L., N. Tractinsky, L. Saarinen, e M. Vitale. “Consumer trust in an Internet store: A cross- cultural validation.” Journal of Computer Mediated Communication 5 (Online Journal), 1999. Khalid, Halimahtun M. “Embracing diversity in user needs for affective design.” Applied Ergonomics, July de 2006: 409–418. Kubilus, N. J. “Designing an e-commerce site for users.” ACM Crossroads ([on-line serial]), August 2002. Marcus, A., e E. W. Gould. “Cultural dimensions and global Web user interface design: What? So what? Now what?” 16th Conference on Human Factors and the Web. Austin, 2000. Mummalaneni, Venkatapparao. “An empirical investigation of Web site characteristics, consumer emotional states and on-line shopping behaviors.” Journal of Business Research 58 (2005): 526-532. Nielsen, Jakob. “Designing user interfaces for international use.” 1990.
  35. 35. 36 Novak, T P, D L Hoffman, e Y F Yung. “Measuring customer experience in online environments: a structural modeling approach.” Mark Sci, 2000: 22-42. Reibstein, DJ. “Who is buying on the Internet.” Wharton School, University of Pennsylvania, 1999? Remote Testing. 2013. http://www.usability.gov/how-to-and-tools/methods/remote-testing.html (acesso em 20 de July de 2013). Sauro, Jeff. Measuring Usability With The System Usability Scale (Sus). 2 de February de 2011. http://www.measuringusability.com/sus.php (acesso em 17 de August de 2013). Sherman, E, e R B Smith. “Mood states of shoppers and store image: promising interactions and possible behavioral effects.” Edição: Anderson P. (Adv Consum Res) 14 (1986): 251-254. Spies, K, F Hesse, e K Loesch. “Store atmosphere, mood and purchasing behavior.” Int J Res Mark 14 (1997): 1-17. User Interface Elements. 2013. http://www.usability.gov/how-to-and-tools/methods/user-interface- elements.html (acesso em 13 de July de 2013). Watzman, Suzanne. “Visual Design Principles For User Interface.” In: Visual Design Principles For User Interface, por Suzanne Watzman, 264-284. Hillsdale, NJ: L. Erlbaum Associates Inc, 2002.

×