Este documento resume as principais alterações na interface do usuário móvel da plataforma CORE versão 2.3.1, incluindo melhorias na home, detalhes do produto, carrinho e áreas de login e cadastro para uma melhor experiência de compra.
2. 1CORE–Documentaçãodaplataforma de versão 2.3.1 Mobile
Sumário
Melhorias e novidades da versão............................................................................................... 2
Ajustes na Interface Mobile ....................................................................................................... 3
1. Home ........................................................................................................................... 3
2. Detalhe de produto ..................................................................................................... 4
3. Carrinho ....................................................................................................................... 5
4. Cadastro e Login.......................................................................................................... 6
4. 3CORE–Documentaçãodaplataforma de versão 2.3.1 Mobile
Ajustes na Interface Mobile
As melhorias para a versão Mobile das lojas do Core (abaixo exemplificadas pela
m.biroshop.com.br) alteram sobretudo o visual dos componentes de interface, e
ocasionalmente o comportamento e a posição deles na tela. São mudanças não-estruturais
que melhoram exponencialmente a percepção dos compradores online, acreditamos.
1. Home
No cabeçalho, presente na página inicial e demais
páginas, agrupamos o acesso ao cadastro e login em
um item só (ícone usuário), assimtornando
dispensável o uso de um menu expansível por toda a
tela.
Na área para banners, deslocamos as “bolinhas”
para aparecerem abaixo das imagens, e não dentro
delas, assimfacilitando a interação para trocar
banners ou saber qual está selecionado (quando há
mais de um).
O menu de categorias ganhou uma forma para
sugerir melhor que se trata de um menu expansível
ou retrátil, vindo por padrão recolhido para dar mais
ênfase às vitrines.
Nas vitrines aumentamos a área pressionável das
setas à direita e à esquerda, alémde acrescentar o elemento (“bolinhas”) que indica quantos
grupos de 2 produtos existemao todo. Além disso, foi ajustada a forma como os produtos
são apresentados, para maior clareza (ajustamos o tamanho de fonte e cor de fundo).
5. 4CORE–Documentaçãodaplataforma de versão 2.3.1 Mobile
O rodapé foi reformulado para
comtemplar um link para o topo
da página, útil nos casos onde a
tela pode ficar muito longa.
Também foi adicionada uma área
para os telefones de
atendimento, facilitando o
contato com a loja em caso de
dúvidas.
A animação de carregamento
passa a ser a de um carrinho, um
ícone intimamente ligado ao
universo das lojas online.
2. Detalhe de produto
No detalhe, reordenamos as informações sobre o
produto, subindo o título e as avaliações para mais
perto do topo. Também incluímos o menu de navegação
por categorias a essa tela, para propiciar uma
continuidade no fluxo de pesquisa por produtos.
6. 5CORE–Documentaçãodaplataforma de versão 2.3.1 Mobile
Para as soluções que utilizam
compra em grade, incluímos o
recurso num formato
otimizado para a compra em
dispositivos móveis. Também
houve ajustes, para todas as
lojas, na forma como são
apresentados os detalhes
relativos a preço.
A descrição ou informações
técnicas sobre o produto estão
agora dispostas dentro de
menus expansíveis ou
retráteis, causando menos
confusão que o componente
anterior.
3. Carrinho
Nessa etapa da compra ou pesquisa, ordenamos e
tornamos as informações mais enxutas, privilegiando a
clareza.
Na parte de cálculo de frete e cupom de descontos,
recolhamos os seus respectivos campos quando não
houver a intenção de usá-los.
7. 6CORE–Documentaçãodaplataforma de versão 2.3.1 Mobile
Uma vez que um deles seja
escolhido (opção de entrega
ou cupom) os valores que
lhes dizem respeito sempre
ficarão visíveis, mesmo que
as opções ainda possamser
ocultadas.
4. Cadastroe Login
A tela de login (para onde é
levado o usuário não
identificado) foi redesenhada
pensando na otimização de
seu uso em dispositivos
móveis, como a forma dos
campos, botões, e o tamanho
das áreas pressionáveis. Foi
adicionado o login ou
cadastro via Facebook, além
de saídas para aquele (a) que
estiver procurando
cadastrar-se.