SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
CURSO DE VERÃO 2017: 
ENGENHARIA DE USABILIDADE
PROF ME. HAMILTON FERNANDES DE MORAES JUNIOR
Carlos Vinicius Vale Barcellos
Cristina Kim
Rafael Rodisanski Patricio
Vanessa Darthy Silveira de Almeida
COMPREI BARATO
Aplicativo de leilão reverso para compras coletivas 
INSTITUTO DE MATEMÁTICA E ESTATÍSTICA
SUMÁRIO
INTRODUÇÃO 3
PÚBLICO ALVO 4
PERSONAS 5
MAPA DE NAVEGAÇÃO E INTERAÇÃO 9
CARD SORTING 12
IDENTIDADE VISUAL 14
UX CANVAS 15
ANÁLISE HEURÍSTICA 16
TESTE DE USABILIDADE 19
REFERÊNCIAS 20
Este projeto foi desenvolvido durante o curso de Engenharia de Usabilidade para
Sistemas Web, ministrado pelo Prof. Me. Hamilton Fernandes de Moraes Junior,
visando à aplicação de técnicas e conceitos de engenharia de usabilidade e de design
de interação no desenvolvimento de interfaces para um aplicativo de dispositivos
móveis.
Elaborou­se um projeto conceitual para a interface do aplicativo denominado Comprei
Barato, o qual possibilita a formação de grupos de compradores (pessoas físicas) para
posterior disputa de vendas coletivas sob a forma de leilão entre micro e pequenas
empresas do comércio varejista.
Dessa forma, o aplicativo possibilita que pessoas interessadas em adquirir bens em
comum (como, por exemplo, pais que precisam comprar materiais escolares, alunos
interessados em adquirir livros ou moradores de um condomínio que precisam realizar
suas compras mensais) sejam capazes de elaborar listas de compras para a formação
de grupos, com o intuito de ganhar poder de negociação e obter melhores preços. Por
outro lado, os varejistas podem auferir um maior volume vendas e obter lucro através
da realização de propostas conforme seu limite de negociação.
INTRODUÇÃO
                                   3
P ÚBL IC O
A LV O
O aplicativo Comprei Barato tem como público­alvo usuários compradores de 18 a 55
anos, que tenham familiaridade com a utilização de dispositivos móveis e mídias sociais.
Compõe­se de pessoas que realizam um baixo volume de compras (por exemplo,
solteiros e casais jovens), dispostas a utilizar ferramenta de comércio eletrônico e
interessadas em reduzir custos por meio de compras coletivas.
Também tem como público­alvo, usuários vendedores como proprietários de micro e
pequenas empresas do comércio varejista, motivados a aumentar seu volume de vendas
e a ampliar a presença de sua marca no ambiente online. 
4
PERSONAS
André Franco
Idade: 20
Profissão: Estudante de Medicina
Estado Civil: solteiro
Localização: São Paulo, SP
André tem 20 anos e é estudante de medicina da USP.
Possui uma vida bastante agitada, pois além de uma extensa carga
horária de estudos, também participa de outras atividades como
grêmio estudantil, clube esportivo da faculdade e corrida de bike nos
finais de semana.
Ele gosta muito de tecnologia e esportes, além de ser apreciador e
leitor ávido de livros. Visto que seu curso exige grande investimento de
tempo e recursos financeiros, busca sempre planejar e equilibrar sua
vida.
Perfil
Estilo de vida
Praticante de Esportes
Utilizador ávido de tecnologia (Nerd)
Usuário de Facebook, Snapchat, Instagram e Twitter
5
Maria Fernanda
Rodrigues
Idade: 42
Profissão: Enfermeira
Estado Civil: Casada, com 1 filho.
Localização: São Paulo, SP
Maria Fernanda tem 42 anos e trabalha como enfermeira no Hospital
São Camilo.
Atualmente, possui uma rotina bastante movimentada, resultado do
desafio de conciliar sua vida profissional com sua vida familiar.
Casada, tem um filho de 9 anos pelo qual tem muito afeto e
dedicação.
Ela costuma utilizar ferramentas tecnológicas para se comunicar.
Possui uma extensa rede de contatos nas mídias sociais e é muito
participativa nesse ambiente. Cuida bastante de sua alimentação e no
tempo de lazer gosta de passear com sua família.
Perfil
Estilo de vida
Tem facilidade de comunicação;
Gosta de frequentar parques e outras atrações em
companhia de sua família;
Usuária de mídias sociais (Facebook, Twitter e
Instagram).
6
Valdir Simões
Idade: 31
Profissão: Assistente
administrativo
Estado Civil: Casado, sem filhos
Localização: São Paulo, SP
Valdir Simões tem 31 anos e trabalha como assistente administrativo
no Conselho Regional de Contabilidade do Estado de São Paulo.
Em seu cotidiano pessoal e profissional, faz uso de ferramentas
tecnológicas (smartphone, tablet e computador). Apesar de ter uma
carreira estável, está concluindo seu bacharelado em Ciências
Contábeis no Centro Universitário Senac com o objetivo de prestar
novo concurso, agora para o cargo de Analista Contábil.
Valdir gosta de ler livros e escutar músicas em seu tempo livre. Possui
familiaridade com dispositivos eletrônicos e faz uso de ferramentas
que aumentam a produtividade e/ou trazem praticidade ao dia­a­dia.
Perfil
Estilo de vida
Tem uma carreira profissional estável mas almeja
um cargo com salário maior;
Gosta de ler;
Procura obter eficiência e comodidade com a
utilização da tecnologia.
7
Alice Oliveira
Idade: ​53
Profissão: Dentista
Estado Civil: Casada, com filhos.
Localização: São Paulo, SP
Alice tem 53 anos e trabalha como dentista em uma clínica
odontológica localizada na região sul da cidade de São Paulo.
Casada e com filhos adultos, tem uma rotina regular no consultório. É
bastante comunicativa e sempre dedicada no atendimento aos seus
pacientes.
Alice costuma frequentar bares e restaurantes em companhia de seu
marido. Em suas férias, gosta de viajar e conhecer novos lugares. Faz
uso regular da tecnologia para se comunicar e se informar, sendo
frequentemente atenta às indicações mencionadas por seus pacientes
e amigos.
Perfil
Estilo de vida
Possui uma rotina regular e tem bom relacionamento
com as pessoas;
Gosta de sair e de viajar em companhia de seu
marido;
É comunicativa e utiliza mídias sociais (Facebook e
Instagram).
8
MAPA DE NAVEGAÇÃO E
INTERAÇÃO
9
10
11
CARD
SORTING
Card sorting é uma técnica de categorização de cartões
cujo objetivo é criar um sistema de organização de
conteúdo que reflete o modo de pensar dos seus
usuários.
Esta técnica foi utilizada para juntar informações e ideias
fornecidas por cada um dos integrantes do grupo, agrupando-
as em categorias.
12
13
IDENTIDADE VISUAL
Logotipo
O logotipo escolhido representa a queda 
dos preços dos produtos que o consumidor
deseja comprar, denotando a ideia de que a
compra coletiva com leilão reverso é um bom
negócio.
Cores
As cores escolhidas foram o azul #3dc1b2 e o verde
#99e265. Segundo pesquisas, a cor azul é considerada a
preferida pelas pessoas, além de simbolizar confiança,
dignidade e autoridade, que são características
importantes para a marca de uma empresa. A cor verde
está associada ao dinheiro, que irá representar a
economia para o usuário comprador e o ganho para o
usuário vendedor.
14
UX CANVAS
15
ANÁLISE HEURÍSTICA
16
Foi realizada a Análise Heurística do site www.leiloeirosp.com.br na versão mobile
TESTE DE USABILIDADE
17
Compreender a função principal do App Comprei Barato.
    1. O usuário compreende a necessidade de consultar um item de interesse para
        verificar se já existe um grupo de compras para o item desejado, evitando
        assim a criação de diversos grupos para o mesmo item?
    2. O usuário tem alguma dificuldade em encontrar ou divulgar algum item?
    3. O usuário compreende que uma lista de compras e região é o que define um
        grupo de compras?
    4. O usuário compreende que ele também pode buscar grupos de compras por
        região?
    5. O usuário consegue chegar no objetivo final de forma intuitiva?
objetivo:
18
1. Quantidades de cliques para completar uma tarefa.
2. Tempo gasto para concluir uma tarefa.
3. Pesquisa de Satisfação:
1. Facilidade de utilização.
1. É fácil navegar pelo aplicativo?
2. As informações disponibilizadas no aplicativo são confiareis?
3. NPS ­ Net Promoter Score ­ Você indicaria este aplicativo para seus
amigos e familiares? escala de 0 a 10.
métricas:
perfil das
personas:
 1. André Franco
2. Maria Fernanda Rodrigues
3. Valdir Simões
4. Alice Oliveira
3.3.
tarefas:
1. Encontrar as listas de
compras existentes em sua
região.
2. Encontrar uma lista de
compras de material escolar
para ensino fundamental.
3. Criar uma lista de compras
e criar um grupo
4. Aderir a um grupo de
compras existente.
cenários:
1. André Franco já está há 6 meses morando em São Paulo e cursando medicina na
USP, como uma grande metrópole, tudo em São Paulo é muito caro. Um amigo de
André, do segundo ano indica o aplicativo Comprei Barato e André instala o
aplicativo em seu celular e faz uma busca por grupos de compra coletiva em sua
região.
2. Mãe de um filho de 9 anos, todos os anos, Maria Fernanda precisa comprar materiais escolares, 
com outras mães do colégio que já estão usando o aplicativo Comprei Barato e Maria decide
também utilizar, então ela faz uma busca pela lista de materiais escolar da turma do seu filho.
3. Valdir Simões não encontrou nenhuma lista de produtos de higiene em sua região apesar de
existirem diversas drogarias no bairro cadastradas no aplicativo, decide então Criar uma lista de
compras mensal em sua região para materiais de higiene como sabonete, creme de barbear,
shampoo e desodorante.
4. Alice Oliveira baixou o aplicativo Comprei Barato após ouvir diversas pessoas comentando dos
ganhos que alcançaram ao utilizar o aplicativo, mesmo sem se cadastrar, logo na primeira tela,
como recomendação, viu um grupo de compras de aquecedores de água, criado por
moradores do seu novo condomínio, Alice decide por aderir a este grupo de compras.
19
REFERÊNCIAS
Material de Engenharia de Usabilidade para Sistemas WEB
fornecido pelo Prof. Hamilton Fernandes de Moraes Junior
https://brasil.uxdesign.cc/
http://www.revistawide.com.br/tecnologia/teste-de-usabilidade-mobile
https://mydiabetes.dcc.fc.up.pt/results/teseFinal-LeonelSantos-UsabilidadeAplicacao
http://digitalskratch.com/color-psychology/
https://mural.ly
https://ninjamock.com
20

Mais conteúdo relacionado

Semelhante a Projeto Engenharia de Usabilidade para sistemas WEB

Mercado Digital e as novas oportunidades de carreira encontradas nele. | 4 En...
Mercado Digital e as novas oportunidades de carreira encontradas nele. | 4 En...Mercado Digital e as novas oportunidades de carreira encontradas nele. | 4 En...
Mercado Digital e as novas oportunidades de carreira encontradas nele. | 4 En...Luis Grassitelli
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Augusto César Albuquerque
 
Infografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidadeInfografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidadeFran Maciel
 
A web como unificação das plataformas mobile
A web como unificação das plataformas mobileA web como unificação das plataformas mobile
A web como unificação das plataformas mobileAllan Marques Baptista
 
Desafio SnowFly! Participe
Desafio SnowFly! ParticipeDesafio SnowFly! Participe
Desafio SnowFly! ParticipeIbrahim Cesar
 
Desafio SnowFly! Participe
Desafio SnowFly! ParticipeDesafio SnowFly! Participe
Desafio SnowFly! ParticipeRaissa Belchior
 
1º Lugar Nacional Publicidade Digital Digital/Virtual - Intercom 2012
1º Lugar Nacional Publicidade Digital Digital/Virtual - Intercom 20121º Lugar Nacional Publicidade Digital Digital/Virtual - Intercom 2012
1º Lugar Nacional Publicidade Digital Digital/Virtual - Intercom 2012Ibrahim Cesar
 
Design de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico
Design de IHC para Quiosque Interativo de Auto-Atendimento AcadêmicoDesign de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico
Design de IHC para Quiosque Interativo de Auto-Atendimento AcadêmicoDaniel Mai
 
Artigo: Aplicação do Design Participativo para geração ideias de produtos e s...
Artigo: Aplicação do Design Participativo para geração ideias de produtos e s...Artigo: Aplicação do Design Participativo para geração ideias de produtos e s...
Artigo: Aplicação do Design Participativo para geração ideias de produtos e s...Fran Maciel
 
Gp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgosGp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgosLuara Schamó
 
Arquitetura da Informação para o Diálogo Governo-Cidadão através da Rede
Arquitetura da Informação para o Diálogo Governo-Cidadão através da RedeArquitetura da Informação para o Diálogo Governo-Cidadão através da Rede
Arquitetura da Informação para o Diálogo Governo-Cidadão através da RedeEBAI
 
Uma proposta de arquitetura para sistemas de comercialização de títulos de ca...
Uma proposta de arquitetura para sistemas de comercialização de títulos de ca...Uma proposta de arquitetura para sistemas de comercialização de títulos de ca...
Uma proposta de arquitetura para sistemas de comercialização de títulos de ca...Eduardo Galbieri
 
Apresentação Monografia Cinara Moura
Apresentação Monografia Cinara MouraApresentação Monografia Cinara Moura
Apresentação Monografia Cinara MouraCinara Moura
 
Dai guião 14_15
Dai guião 14_15Dai guião 14_15
Dai guião 14_15Rui Raposo
 
Producao de Conteudo para Dispositivos Moveis
Producao de Conteudo para Dispositivos MoveisProducao de Conteudo para Dispositivos Moveis
Producao de Conteudo para Dispositivos MoveisPoliana Godinho Pires
 
Totvs - Rede Social Corporativa
Totvs - Rede Social CorporativaTotvs - Rede Social Corporativa
Totvs - Rede Social CorporativaTeresa_Marques
 
Design colaborativo: processos, modos e formas de pensar a web como meio de c...
Design colaborativo: processos, modos e formas de pensar a web como meio de c...Design colaborativo: processos, modos e formas de pensar a web como meio de c...
Design colaborativo: processos, modos e formas de pensar a web como meio de c...Dalton Martins
 
Virtual Reality in the architecture, engineering and construction industry: P...
Virtual Reality in the architecture, engineering and construction industry: P...Virtual Reality in the architecture, engineering and construction industry: P...
Virtual Reality in the architecture, engineering and construction industry: P...João Poças Martins
 

Semelhante a Projeto Engenharia de Usabilidade para sistemas WEB (20)

Mercado Digital e as novas oportunidades de carreira encontradas nele. | 4 En...
Mercado Digital e as novas oportunidades de carreira encontradas nele. | 4 En...Mercado Digital e as novas oportunidades de carreira encontradas nele. | 4 En...
Mercado Digital e as novas oportunidades de carreira encontradas nele. | 4 En...
 
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
 
Por que Arquitetura de Informação e Usabilidade são importantes?
Por que Arquitetura de Informação e Usabilidade são importantes?Por que Arquitetura de Informação e Usabilidade são importantes?
Por que Arquitetura de Informação e Usabilidade são importantes?
 
Infografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidadeInfografia multimídia para apresentação de resultados de testes de usabilidade
Infografia multimídia para apresentação de resultados de testes de usabilidade
 
A web como unificação das plataformas mobile
A web como unificação das plataformas mobileA web como unificação das plataformas mobile
A web como unificação das plataformas mobile
 
Desafio SnowFly! Participe
Desafio SnowFly! ParticipeDesafio SnowFly! Participe
Desafio SnowFly! Participe
 
A era do consumo compartilhado
A era do consumo compartilhadoA era do consumo compartilhado
A era do consumo compartilhado
 
Desafio SnowFly! Participe
Desafio SnowFly! ParticipeDesafio SnowFly! Participe
Desafio SnowFly! Participe
 
1º Lugar Nacional Publicidade Digital Digital/Virtual - Intercom 2012
1º Lugar Nacional Publicidade Digital Digital/Virtual - Intercom 20121º Lugar Nacional Publicidade Digital Digital/Virtual - Intercom 2012
1º Lugar Nacional Publicidade Digital Digital/Virtual - Intercom 2012
 
Design de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico
Design de IHC para Quiosque Interativo de Auto-Atendimento AcadêmicoDesign de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico
Design de IHC para Quiosque Interativo de Auto-Atendimento Acadêmico
 
Artigo: Aplicação do Design Participativo para geração ideias de produtos e s...
Artigo: Aplicação do Design Participativo para geração ideias de produtos e s...Artigo: Aplicação do Design Participativo para geração ideias de produtos e s...
Artigo: Aplicação do Design Participativo para geração ideias de produtos e s...
 
Gp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgosGp cibercultura taciana de lima burgos
Gp cibercultura taciana de lima burgos
 
Arquitetura da Informação para o Diálogo Governo-Cidadão através da Rede
Arquitetura da Informação para o Diálogo Governo-Cidadão através da RedeArquitetura da Informação para o Diálogo Governo-Cidadão através da Rede
Arquitetura da Informação para o Diálogo Governo-Cidadão através da Rede
 
Uma proposta de arquitetura para sistemas de comercialização de títulos de ca...
Uma proposta de arquitetura para sistemas de comercialização de títulos de ca...Uma proposta de arquitetura para sistemas de comercialização de títulos de ca...
Uma proposta de arquitetura para sistemas de comercialização de títulos de ca...
 
Apresentação Monografia Cinara Moura
Apresentação Monografia Cinara MouraApresentação Monografia Cinara Moura
Apresentação Monografia Cinara Moura
 
Dai guião 14_15
Dai guião 14_15Dai guião 14_15
Dai guião 14_15
 
Producao de Conteudo para Dispositivos Moveis
Producao de Conteudo para Dispositivos MoveisProducao de Conteudo para Dispositivos Moveis
Producao de Conteudo para Dispositivos Moveis
 
Totvs - Rede Social Corporativa
Totvs - Rede Social CorporativaTotvs - Rede Social Corporativa
Totvs - Rede Social Corporativa
 
Design colaborativo: processos, modos e formas de pensar a web como meio de c...
Design colaborativo: processos, modos e formas de pensar a web como meio de c...Design colaborativo: processos, modos e formas de pensar a web como meio de c...
Design colaborativo: processos, modos e formas de pensar a web como meio de c...
 
Virtual Reality in the architecture, engineering and construction industry: P...
Virtual Reality in the architecture, engineering and construction industry: P...Virtual Reality in the architecture, engineering and construction industry: P...
Virtual Reality in the architecture, engineering and construction industry: P...
 

Projeto Engenharia de Usabilidade para sistemas WEB