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.
Usabilidade e Arquitetura de Informação de Websites de Governos MunicipaisMarcelo Ramos
Este documento objetiva analisar e avaliar a usabilidade e arquitetura de informação do website da Prefeitura de Embu das Artes. Para tal, foi realizada uma pesquisa bibliográfica e documental no intuito de entender o governo eletrônico, os fenômenos que ocorrem durante a interação humano-computador e os métodos de avaliação de usabilidade e arquitetura de informação. Assim, a pesquisa permitiu planejar e executar um teste de usabilidade no site da Prefeitura para avaliar a arquitetura de informação com o público-alvo cidadão. A avaliação identificou problemas grave no sistema de organização e algumas falhas no sistema de navegação. Além de problemas relacionados às nomenclaturas e ao excesso de informação nas páginas
Este relatório técnico apresenta os resultados dos estudos realizados com os dados de visualização de TV fornecidos pelo Ibope em um cenário específico. Simulou-se e avaliou-se o comportamento de alguns usuários que interagem com um sistema de recomendação baseado em Filtragem Colaborativa para televisão digital portátil. Os detalhes da simulação, desde a preparação e a organização dos dados, a geração dos perfis e das recomendações, o cálculo da porcentagem de acerto, além dos gráficos, análises e conclusões, são apresentados neste documento.
Exercise Planning - Uma ferramenta de apoio ao meio educacionalMarcos Pessoa
Universidade Federal do Amazonas - Trabalho de conclusão de curso.
Exercise planning é uma ferramenta focada na geração de exercícios didáticos com gabarito, para auxílio dos professores em sala de aula.
Usabilidade e Arquitetura de Informação de Websites de Governos MunicipaisMarcelo Ramos
Este documento objetiva analisar e avaliar a usabilidade e arquitetura de informação do website da Prefeitura de Embu das Artes. Para tal, foi realizada uma pesquisa bibliográfica e documental no intuito de entender o governo eletrônico, os fenômenos que ocorrem durante a interação humano-computador e os métodos de avaliação de usabilidade e arquitetura de informação. Assim, a pesquisa permitiu planejar e executar um teste de usabilidade no site da Prefeitura para avaliar a arquitetura de informação com o público-alvo cidadão. A avaliação identificou problemas grave no sistema de organização e algumas falhas no sistema de navegação. Além de problemas relacionados às nomenclaturas e ao excesso de informação nas páginas
Este relatório técnico apresenta os resultados dos estudos realizados com os dados de visualização de TV fornecidos pelo Ibope em um cenário específico. Simulou-se e avaliou-se o comportamento de alguns usuários que interagem com um sistema de recomendação baseado em Filtragem Colaborativa para televisão digital portátil. Os detalhes da simulação, desde a preparação e a organização dos dados, a geração dos perfis e das recomendações, o cálculo da porcentagem de acerto, além dos gráficos, análises e conclusões, são apresentados neste documento.
Exercise Planning - Uma ferramenta de apoio ao meio educacionalMarcos Pessoa
Universidade Federal do Amazonas - Trabalho de conclusão de curso.
Exercise planning é uma ferramenta focada na geração de exercícios didáticos com gabarito, para auxílio dos professores em sala de aula.
Desenvolvimento de um modelo de simulação social da cidade de MandiritubaLeonardo Alcantara
This graduation paper is an extension of the previously article of the same title.
Social simulation is a powerful tool to assist municipal, state and federal management in overseeing the population growth. This document presents the development of a social simulation model, based on software agents, utilizing Java technology. Discusses briefly the concepts involved in social simulation and how the usage of software agents provide flexibility and sturdiness to the model development. Presents tools, based on Java, which allows the creation of the models and also discusses the differences between the tools.
Trabalho de graduação engenharia de software e desenvolvimento de sistema de gestão de biblioteca acadêmica para FATEC-TA (Faculdade de Tecnologia de Tatuí)
Projeto de graduação, trabalho apresentado como requisito para a conclusão do Bacharelado em Análise de Sistemas da Universidade Federal de Mato Grosso do Sul, em 2004.
TCC Edson Espíndola Júnior - UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFA...Diego Moreau
UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFACES CENTRADAS NA EXPERIÊNCIA DO USUÁRIO - TCC do aluno Edson Espíndola Júnior para o curso de Publicidade do Centro Universitário Estácio SC
Em um momento em que cada vez mais o mundo real converge com o virtual, o ciberativismo é um dos exemplos mais claros dessa dinâmica, dois mundos coexistindo e fortalecendo-se mutuamente. A informação transformada em conhecimento, que gera mobilizações e que se estendem para a vida real são os ideais do ciberativismo. Um Teto Para Meu País (UTPMP), uma ONG que luta contra a injustiça da divisão do espaço físico, do latifúndio e da injustiça social da extrema pobreza pode buscar no ciberespaço formas de potencializar o desenvolvimento e alcance de suas ações sociais. Este trabalho pretende estudar e criar soluções para a presença da ONG no ciberespaço, soluções de design que ofereçam meios práticos e eficazes de se trabalhar o ciberativismo em suas ações.
A UTILIZAÇÃO DE METODOLOGIAS ÁGEIS PARA A ENTREGA DE SERVIÇOS DE INFRAESTRUTU...Marcelo Dieder
As empresas precisam utilizar a TI como um aliado estratégico para as suas demandas de negócio. A TI precisa de agilidade e transparência para que possam
apoiar os negócios das corporações. A metodologia ágil para o desenvolvimento de software já é amplamente utilizada pelas empresas de desenvolvimento de software.
Entretanto as áreas de suporte e infraestrutura continuam utilizando métodos antigos, lentos e pouco produtivos. Este trabalho irá apresentar como é possível que
a metodologia ágil seja utilizada em um ambiente de menor previsibilidade como o ambiente de infraestrutura de TI.
REFORMULAÇÃO DA COMUNICAÇÃO DIGITAL DO PMI ESLuiz Aquino
Monografia apresentada ao Programa de Pós-Graduação em Gerência de Projetos da Universidade Vila Velha, como requisito parcial para obtenção do título de especialista MBA em Gerência de Projetos
Desenvolvimento de um modelo de simulação social da cidade de MandiritubaLeonardo Alcantara
This graduation paper is an extension of the previously article of the same title.
Social simulation is a powerful tool to assist municipal, state and federal management in overseeing the population growth. This document presents the development of a social simulation model, based on software agents, utilizing Java technology. Discusses briefly the concepts involved in social simulation and how the usage of software agents provide flexibility and sturdiness to the model development. Presents tools, based on Java, which allows the creation of the models and also discusses the differences between the tools.
Trabalho de graduação engenharia de software e desenvolvimento de sistema de gestão de biblioteca acadêmica para FATEC-TA (Faculdade de Tecnologia de Tatuí)
Projeto de graduação, trabalho apresentado como requisito para a conclusão do Bacharelado em Análise de Sistemas da Universidade Federal de Mato Grosso do Sul, em 2004.
TCC Edson Espíndola Júnior - UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFA...Diego Moreau
UX DESIGN – UM ESTUDO SOBRE A CRIAÇÃO DE INTERFACES CENTRADAS NA EXPERIÊNCIA DO USUÁRIO - TCC do aluno Edson Espíndola Júnior para o curso de Publicidade do Centro Universitário Estácio SC
Em um momento em que cada vez mais o mundo real converge com o virtual, o ciberativismo é um dos exemplos mais claros dessa dinâmica, dois mundos coexistindo e fortalecendo-se mutuamente. A informação transformada em conhecimento, que gera mobilizações e que se estendem para a vida real são os ideais do ciberativismo. Um Teto Para Meu País (UTPMP), uma ONG que luta contra a injustiça da divisão do espaço físico, do latifúndio e da injustiça social da extrema pobreza pode buscar no ciberespaço formas de potencializar o desenvolvimento e alcance de suas ações sociais. Este trabalho pretende estudar e criar soluções para a presença da ONG no ciberespaço, soluções de design que ofereçam meios práticos e eficazes de se trabalhar o ciberativismo em suas ações.
A UTILIZAÇÃO DE METODOLOGIAS ÁGEIS PARA A ENTREGA DE SERVIÇOS DE INFRAESTRUTU...Marcelo Dieder
As empresas precisam utilizar a TI como um aliado estratégico para as suas demandas de negócio. A TI precisa de agilidade e transparência para que possam
apoiar os negócios das corporações. A metodologia ágil para o desenvolvimento de software já é amplamente utilizada pelas empresas de desenvolvimento de software.
Entretanto as áreas de suporte e infraestrutura continuam utilizando métodos antigos, lentos e pouco produtivos. Este trabalho irá apresentar como é possível que
a metodologia ágil seja utilizada em um ambiente de menor previsibilidade como o ambiente de infraestrutura de TI.
REFORMULAÇÃO DA COMUNICAÇÃO DIGITAL DO PMI ESLuiz Aquino
Monografia apresentada ao Programa de Pós-Graduação em Gerência de Projetos da Universidade Vila Velha, como requisito parcial para obtenção do título de especialista MBA em Gerência de Projetos
Nuki's Brechó: Sistema Colaborativo em um Cenário de Moda Sustentável - Anusk...Anuska Rehn
Trabalho de conclusão de curso - Sistemas de Informação FURB (Universidade Regional de Blumenau) para obtenção do grau de bacharelado.
Nuki's Brechó: Sistema Colaborativo em um Cenário de Moda Sustentável
Nowadays computers are just seen as machines that realize tasks. Affective computing tries to bring the human closer to the machine, creating a bond between both of them, through the adaptation of the machine for better user understanding, making it possible to change the user’s perception of the machine. This work proposes the specification, modeling and implementation of a couple of sociable agents. Each agent will be built to have the form of an alligator, to increase the interaction with humans. The implementation will be done with the Lego Mindstorms kit, a tool widely used for the rapid prototipation of robots. To develop the robot's program, it will be used the Lego Mindstorms module of the software Labview.
TCC - Avaliação de Usabilidade e Acessibilidade para Deficientes Visuais em S...Ricardo Sousa
Trabalho de Conclusão de Curso do aluno Ricardo Sousa para o curso de Bacharel em Sistemas de Informação da Universidade de Mogi das Cruzes Campus Villa Lobos - 2009
Esses são os slides utilizados para a apresentação do resultado do trabalho final da faculdade.
O experimento aqui realizado tem o objetivo de comparar o comportamento e percepção do usuários sobre duas lojas semelhantes que alternam apenas visualmente em alguns elementos visuais.
Canto da Sereia - Guiando o usuário com pistas visuaisMarcelo Henrique
Minha apresentação realizada no Front in Rio 2013.
A internet tem ganhado muito espaço como um dos principais meios de comunicação, e suas aplicações, são cada vez mais decisivas na hora de se posicionar estrategicamente nos negócios. Nesta apresentação vou falar sobre como o visual interfere no comportamento do usuário, na hora em que ele navega na sua aplicação, e como podemos usar isso a nosso favor, para guiá-lo a realizar o conjunto de ações que desejamos.
Monografia - Qualidade Afetiva de Elementos Visuais
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.
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
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.