Este documento apresenta os resultados de um estudo experimental sobre como elementos visuais em interfaces afetam a percepção e comportamento de usuários. O estudo comparou duas versões de uma loja virtual, variando apenas os elementos visuais utilizados. Os resultados sugerem que usar elementos visuais apropriados para cada tarefa pode reduzir o tempo para completá-la, aumentar a taxa de sucesso e a satisfação do usuário. O estudo fornece evidências para as hipóteses de que elementos visuais bem projetados melhoram a experiência do usuário.

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. 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. 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. Para todos aqueles dedicam confiança em meu trabalho, meu muito
obrigado.

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. “The buckstopshere!“
Harry S. Truman

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. 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. 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. 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. Lista de abreviaturas e siglas
UFAM – Universidade Federal do Amazonas
IComp – Instituto de Computação

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27
Imagem 6 - Comparação entre as páginas de produto
Imagem 7- Comparação entre as páginas de pagamento

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. 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. 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. 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. 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. 33
Imagem 16- Tabela de Cálculo de Índices Loja 2

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