Trabalho apresentado à disciplina de Projeto de Navegação e Interação da Faculdade de Tecnologia de Jales. Realização de análise dos padrões de projetos utilizados pelo e-commerce Wish.

1. WISH
Comprar ficou mais divertido!
Lucas Henrique Silva
Tamara Victor Rodrigues
Jales
2016
Trabalho apresentado a disciplina de Projeto de Navegação e Interação
da Faculdade de Tecnologia de Jales

2. Agenda
1. Wish
2. Padrão De Projeto
3. Padrões Utilizados
4. Sugestões De Novos Padrões
5. Padrões Persuasivos
6. Bibliografia
2

3. Wish
• Fundado em 2011,
• Site estrangeiro,
• Não possui certificados,
• PayPal,
• Versão mobile
• habilidades de seu aprendizado, trabalho e integração com a família,
amigos e sociedade.
Fonte: wish.com

4. Padrão De Projetos
“Padrões se referem aos problemas mais comuns e às boas soluções
para esses problemas, que são capturadas, compartilhadas e reutilizadas por
profissionais atuando no projeto de diversos tipos de produtos e serviços ”
(CYBIS; BETIOL; FAUST, 2010, p.104)
Fonte: pixabay.com

5. Padrões Utilizados
• Input Feedback – não é possível comprar itens que possuem tamanho, sem
antes defini-los;
• Inplace Editor – é possível editar os dados do usuário mesmo que durante
o processo de compra;
• Preview – ao adicionar ao carrinho de compras, é realizada a pré-
visualização da compra, apresentando os valores de cada item, e o total da
compra, acrescentando frete e data prevista de entrega;

6. Padrões Utilizados
• Settings – possui página de configuração do perfil do usuário e de
notificações;
• Undo – é possível remover produtos do carrinho de compras, ou seja,
desfazer a operação. É possível também remover um endereço cadastrado;
• Drag and Drop – é possível ordenar as listas de desejo na página de Perfil,
através do arrastar e soltar;

7. Padrões Utilizados
• Input Prompt – é utilizado tanto no cadastro, quanto na escolha e
efetuação da compra;
• Morphing Controls – um item adiciona à lista tem o botão alterado de
“Desejar” para “Editar Lista”;
• Wizard – na hora da primeira compra do usuário e no atendimento ao
cliente (Equipe de atendimento), executando sub tarefas até atingir o
objetivo da tarefa maior;

8. Padrões Utilizados
• Steps Left – criação de novo usuário “Nos conte um pouco sobre você”
(solicita data de nascimento e sexo);
• Rate Content – os produtos podem ser avaliados por meio das estrelas (1 a
5), além da avaliação escrita;
• Module Tab – usado em todos os produtos, por exemplo: visão global,
produtos relacionados, descrição;

9. Padrões Utilizados
• Modal – primeiro acesso traz uma modal exigindo o cadastro, caso o
usuário já não esteja logado. Os produtos antes de serem enviados ao
carrinho são também apresentados em Modal;
• Notifications – ao lado do ícone do carrinho, o botão de notificações,
inclusive uma notificação é enviada pelo Wish assim que a sua conta é
criada. Na primeira notificação há uma lista personalizada de acordo com
idade e sexo do novo usuário;

10. Padrões Utilizados
• Shortcut Dropdown – seleção do país e estado no momento da compra.
Além da seleção de dia, mês e ano ao iniciar uma nova conta;
• Home link;
• Vertical Dropdown Menu – usado no ícone de usuário para dar acesso às
páginas de Perfil e Configurações por exemplo. Usado também no link
“Exibir Mais”;

11. Padrões Utilizados
• Progressive Disclosure – o site mantém o foco do usuário, através de
tarefas curtas e que não exigem grande esforço mental ou informações
desnecessárias ao processo;
• Cards – o Wish utiliza Cards em todo o site, mantendo containers de
mesmo tamanho para os produtos, por exemplo;
• Favorites – botão Desejar, adiciona o produto à uma lista de desejos, mas
sem colocá-lo no carrinho de compras;

12. Padrões Utilizados
• Tagging – ao criar uma nova lista de desejos o nome é adicionado como
uma tag, que é sugerida com um auto completar com o nome de outras
tags que aparentemente foram utilizadas por outros usuários que
adicionaram o mesmo produto;
• Continuous Scrolling – usa a rolagem contínua em todas as listas de
produtos;

13. Padrões Utilizados
• Categorization – categorização dos produtos aparentemente pelos tipos
mais comprados;
• Frequently Asked Questions – possui no link “Precisa de Ajuda?” (no
footer) as perguntas mais frequentes. Caso precise de atendimento, passa
por um hierarquia de tópicos, partindo do mais genérico e especializando a
dúvida a cada clique, provavelmente por meio de Perguntas Mais
Frequentes até as Menos Frequentes;

14. Padrões Utilizados
• Gallery – possui a galeria de cada produto. Ao escolher um deles para
exibir são apresentadas as demais fotos abaixo;
• Autocomplete – barra de buscas sugere palavras com as letras digitadas
que estão presentes na loja;
• Account Registration – o acesso ao site só é liberado após ser realizada a
criação de uma conta por e-mail ou entrar usando Facebook ou conta
Google;

15. Padrões Utilizados
• Auto Sharing – é possível compartilhar coisas como a lista de desejos no
facebook;
• Product Page – todo produto tem a página que pode ser aberta como
modal ou em outra guia;
• Coupon – possui página de prêmios, onde aparentemente o usuário pode
ser sorteado. Além disso, ao se cadastrar o usuário recebe nas primeiras
horas, um desconto sobre alguns dos produtos da loja;
• Shopping Cart;

16. Sugestões de Novos Padrões
• Vote to Promote – todos os produtos podem ser avaliados com estrelas e
por comentários dos compradores, mas as avaliações não ordenam os
produtos;
• Navigation Tabs – deveria ser utilizado de forma mais adequada;
• Carousel – poderia ser utilizado para destacar os produtos em promoção,
uma vez que o site realiza promoções de curta duração durante todo o dia;
• Adaptable View – permitir que o usuário aumente a fonte não estaria
apenas seguindo o padrão de projeto mas também de acessibilidade;

17. Sugestões de Novos Padrões
• Table Filter, Search Filters – facilitariam as buscas do usuário, além de
apresentar-lhe produtos correspondentes aos parâmetro mas que não
sejam necessariamente o que ele tem em mente;
• Lazy Registration – permitir que os possíveis clientes possam ao menos
realizar consultas pelo site sem antes precisar registrar-se, tornando o
cadastro necessário apenas em caso de efetuação da venda;

18. Wish, o quanto você pode ser persuasivo?
Fonte: pixabay.com

19. Padrões Persuasivos
• Loss Aversion – as promoções de tempo curto causam a compra impulsiva,
pelo medo de “perder” o produto em questão;
• Curiosity – é necessário cadastrar-se mesmo que apenas para consultar
produtos, além de utilizar o slogan “comprar ficou mais divertido”;
• Limited Duration – durante todo o dia promoções de curta duração são
realizadas por produtos específicos;

20. Padrões Persuasivos
• Variable Rewards – é possível ganhar prêmios aleatórios do Wish;
• Recognition Over Recall – os dados do usuário ficam previamente
preenchidos para a realização de compras, caso ele já tenha realizado
alguma anteriormente;
• Simulation – o Wish solicita mais de uma confirmação para a realização da
compra, sendo assim possível simular, testar e ver os resultados sem
efetuar a compra;

21. Bibliografia
CYBIS, W; BETIOL, A; FAUST, R. Ergonomia e Usabilidade − Conhecimentos,
Métodos e aplicações. 2ed. São Paulo: Novatec Editora, 2010.
UI-PATTERNS. Usuários padrões de Design de Interface. Disponível em:<
http://ui-patterns.com/ >. Aceso em: 20 out 2016.
WISH. Comprar ficou mais divertido. Disponível em:< https://www.wish.com/
>.Acesso em: 20 out 2016.

22. Obrigado!