monografia - qualidade afetiva de elementos visuais

44
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

Upload: marcelo-henrique

Post on 31-May-2015

391 views

Category:

Design


2 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Monografia - Qualidade Afetiva de Elementos Visuais

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

Page 2: Monografia - Qualidade Afetiva de Elementos Visuais

Marcelo Henrique Souza da Silva

Qualidade Afetiva de Elementos Visuais de

Interface

Monografia de Graduação apresentada ao Instituto de Computação da Universidade Federal do Amazonas como requisito parcial para a 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

Page 3: Monografia - Qualidade Afetiva de Elementos Visuais

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.

Page 4: Monografia - Qualidade Afetiva de Elementos Visuais

Para todos aqueles dedicam confiança em meu trabalho, meu muito

obrigado.

Page 5: Monografia - Qualidade Afetiva de Elementos Visuais

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.

Page 6: Monografia - Qualidade Afetiva de Elementos Visuais

“The buck stops here!“

Harry S. Truman

Page 7: Monografia - Qualidade Afetiva de Elementos Visuais

Qualidade Afetiva de Elementos Visuais de

Interfaces

Autor: Marcelo Henrique Souza da Silva

Orientador(a): Dra. Tayana Conte

RESUMO

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.

Palavras-chave: usabilidade, experiência, efetividade, conversão.

Page 8: Monografia - Qualidade Afetiva de Elementos Visuais

Affection Quality of 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.

Page 9: Monografia - Qualidade Afetiva de Elementos Visuais

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

Page 10: Monografia - Qualidade Afetiva de Elementos Visuais

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

Page 11: Monografia - Qualidade Afetiva de Elementos Visuais

Lista de abreviaturas e siglas

UFAM – Universidade Federal do Amazonas

IComp – Instituto de Computação

Page 12: Monografia - Qualidade Afetiva de Elementos Visuais

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.....................................................................................28

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....................................................................................33

Referências...........................................................................................................34

Page 13: Monografia - Qualidade Afetiva de Elementos Visuais

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

Page 14: Monografia - Qualidade Afetiva de Elementos Visuais

15

1986, Baker, Levy and 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.2 Objetivos

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,

Page 15: Monografia - Qualidade Afetiva de Elementos Visuais

16

desenvolvimento 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-

founding factors do experimento e possíveis trabalhos futuros.

Page 16: Monografia - Qualidade Afetiva de Elementos Visuais

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):

Tayana, 18/09/13,
Completar
Page 17: Monografia - Qualidade Afetiva de Elementos Visuais

18

elimina a necessidade do uso de laboratórios e o efeito de

laboratórios 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.

Dropdown

list

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.

Page 18: Monografia - Qualidade Afetiva de Elementos Visuais

19

Dropdown

button

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.

Search field Mesma função do componente

“text field”, 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.

Page 19: Monografia - Qualidade Afetiva de Elementos Visuais

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.

Image

Carousel

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

Page 20: Monografia - Qualidade Afetiva de Elementos Visuais

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

KISSMetrics1. 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

utilizar esse sistema.

1 KISSMetrics – www.kissmetrics.com

Page 21: Monografia - Qualidade Afetiva de Elementos Visuais

22

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 Crazy Egg2 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

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

2 Crazy Egg – www.crazyegg.com

Page 22: Monografia - Qualidade Afetiva de Elementos Visuais

23

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 Analytics Content Experiments3. 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 Analytics Content Experiments 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.

Imagem 1 – Exemplo página inicial Imagem 2 – Exemplo página de

produto

3 Google Analytics Content Experiments - https://support.google.com/analytics/answer/1745147?hl=en

Page 23: Monografia - Qualidade Afetiva de Elementos Visuais

24

Imagem 3 – Exemplo página de

pagamento

Imagem 4 – Exemplo pá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.4 Itens 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

Links Página com lista Todos os links na versão 2 da loja

Page 24: Monografia - Qualidade Afetiva de Elementos Visuais

25

de blusas 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 text field

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 dropdown list,

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.

Page 25: Monografia - Qualidade Afetiva de Elementos Visuais

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

Page 26: Monografia - Qualidade Afetiva de Elementos Visuais

27

Imagem 6 - Comparação entre as páginas de produto

Imagem 7 - Comparação entre as páginas de pagamento

Page 27: Monografia - Qualidade Afetiva de Elementos Visuais

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.

Page 28: Monografia - Qualidade Afetiva de Elementos Visuais

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.

Page 29: Monografia - Qualidade Afetiva de Elementos Visuais

30

Imagem 10 - Comparação de cliques entre páginas de busca da loja 1 (a esquerda)

e loja 2 (a direita)

Imagem 11 - Comparação de cliques entre páginas de blusa da loja 1 (a esquerda) e

loja 2 (a direita)

Imagem 12 - Comparação de cliques entre páginas de pagamento da loja 1 (a

esquerda) e loja 2 (a direita)

Page 30: Monografia - Qualidade Afetiva de Elementos Visuais

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

Page 31: Monografia - Qualidade Afetiva de Elementos Visuais

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

Page 32: Monografia - Qualidade Afetiva de Elementos Visuais

33

Imagem 16 - Tabela de Cálculo de Índices Loja 2

Page 33: Monografia - Qualidade Afetiva de Elementos Visuais

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

Page 34: Monografia - Qualidade Afetiva de Elementos Visuais

35

ReferênciasBaker, 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.

Page 35: Monografia - Qualidade Afetiva de Elementos Visuais

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.