Otimizando um site de e-Commerce para dispositivos móveis – Parte 3: Design e Compatibilidade

O
primeiro artigo, Otimizando um site de e-Commerce para dispositivos móveis, Parte 1: Começando, nós publicamos quando o MobilizeToday.com, uma empresa de desenvolvimento
mobile, e o DecalGirl.com, uma empresa
que cria “skins” para dispositivos móveis, começaram a explorar as melhores estratégias
para abordar este projeto.

Publicamos
o segundo artigo, Parte 2: Layout e Design, seguindo o mockup inicial para o desenvolvimento da homepage mobile para o DecalGirl.com.

Agora
vamos revisar seu progresso.

Design da página interna e desenvolvimento

Na Parte 2, Peters produziu o próprio design da sua  homepage, contrariando o mockup original que Trugbild
havia criado. Ambas as partes preferiram o design de Peters.

Design da homepage de Peters

Agora,
com a direção estética da página e a funcionalidade relativamente acertada, o
design da página interna – navegação e compatibilidade com diferentes
dispositivos móveis – eram os próximos passos do desenvolvimento.

Peters
queria manter a navegação da homepage para as páginas interiores o mais
simples possível, usando três botões principais: “Comprar skins”, “Ver
designs”, e “Ver artistas”.

O
objetivo de Peters é que o consumidor seja capaz de se aprofundar no site com
seleções concisas e intuitivas. Ele quer que seus consumidores comecem por
selecionar, por exemplo, “Comprar Skins”. Isso levararia o consumidor para uma
lista de produtores de dispositivos, na qual ele selecionaria, digamos, “Apple”, e
teria uma lista dos dispositivos produzidos pela Apple. Então o usuário poderia
comprar skins para aquele dispositivo específico da Apple.

Tendo
esse objetivo em mente, Trugbild ofereceu o seguinte design inicial para a
página de dentro.

Depois
que o usuário selecionasse uma opção do menu principal, uma lista de itens no
submenu apareceria. A lista preencheria totalmente a tela do dispositivo móvel,
e se autoajustaria para visualização de paisagem ou retrato. Cada seleção em um
submenu de uma página interna levaria o consumidor a procurar mais fundo, como
Peters queria. E cada página teria uma navegação simples, apenas com botões de
categorias e um conjunto de botões “Anterior/Próximo” no final de cada página.

Mockup da
página interna de Trugbild

Esteticamente,
Peters achou que a cor laranja era demais, e pediu uma cor mais escura para o background
do menu da página interna, sendo laranja a cor a ser considerada para
demonstrar que uma seleção foi feita.

Em relação à navegabilidade, Peters achou que os botões “Anterior/Próximo”
necessitavam de muito input do consumidor, e pediu por um estilo de lista com
scroll – uma função popularizada pelo iOS da Apple – em vez da quebra de
paginação da página.

Peters
também pediu por um campo de “Busca” que pudesse aparecer em todas as páginas
interiores, permitindo outra camada de filtros através da longa lista de
produtos. Trugbild adicionou a caixa de “Busca” imediatamente ao design. 

Trugbild
adicionou a caixa de “Busca”

Em quais dispositivos focar em compatibilidade

Trugbild diz
que os líderes do mercado mobile são iPhone e Android, e que é obrigatório
tornar o site móvel do DecalGirl.com compatível com esses dispositivos. Ele pede a Peters para usar a demografia de tráfego do DecalGirl.com para
descobrir quais dispositivos móveis são mais usados para acessar o site de Peters.

No
entanto,Trugbild oferece essa ressalva. Ele diz que é importante também levar
em consideração que as estatísticas que Peters obterá dos visitantes serão
baseadas na versão para desktop do site, e que essas estatísticas podem mudar
drasticamente devido à otimização mobile, provavelmente atraindo mais usuários
móveis. Portanto, uma vez que o site mobile for lançado, é importante monitorar
as estatísticas dos visitantes e seus dispositivos móveis, browsers e sistemas
operacionais para manter a maior compatibilidade possível.

Fornecedores de plataformas para a otimização
mobile diferem em quais dispositivos são suportados. A MobilizeToday.com de Trugbild
oferece plataformas mobile que são compatíveis com os seguintes dispositivos e
sistemas operacionais:.

• iOS: iPhone e iPod Touch
• Dispositivos com Android
• BlackBerry OS 5 e superior
• Palm webOS 1.4 e superior (Pre e
  Pixi)
• Windows Phone 6.5 e superior
• Symbian S60

A
compatibilidade para Android e para iPhone é a de preço mais acessível que a MobilizeToday
oferece, diz Trugbild, porque sua empresa fez a maior parte do desenvolvimento
e testes nessas marcas líderes. Se Peters quiser adicionar mais dispositivos
móveis à sua lista de compatibilidade, os custos iriam aumentar devido à falta
de desenvolvimento e de testes que a MobilizeToday fez em aparelhos que possuem
menores fatias do mercado, diz Trugbild.

A
demografia dos usuários para o site DecalGirl.com em versão desktop mostra
que focar nos dispositivos iOS e Android é o mais ideal.
Combinados, os usuários de iOS e de Android contribuem com o maior tráfego no site
de Peters: um total de 5,5%. Peters nota que, apesar de usuários do BlackBerry
produzirem apenas 4,3% do tráfego do site para desktop, isso ainda significa
milhares de visitas por mês, e portanto gostaria de ter compatibilidade para BlackBerry
também.

Trugbild
concorda, e ele e Peters decidem focar a compatibilidade do DecalGirl.com com
os sistemas operacionais mais utilizados por seus usuários: iOS (iPhone e iPod
Touch), Android OS e BlackBerry OS 6.

Futuras adaptações e a decisão pela versão mobile

Com a
continuação do design para as páginas interiores do DecalGirl.com, Trugbild esboça
os problemas específicos do site para desktop. Esses recursos
ricos existentes na versão desktop terão que ser adaptados, se possível, ou
completamente omitidos se não forem possíveis na versão mobile. 

Trugbild diz
que esses recursos em particular são problemáticos, porque o código JavaScript
usado para criá-los na versão desktop gera longos períodos de carregamento em
um dispositivo móvel:

• Live Help. O suporte em tempo real via
  chat que está disponível na versão para desktop do DecalGirl.com é
  fornecido por uma empresa terceirizada, e será omitido na versão mobile.
• Imagens de Produtos. As páginas de listagem dos
  produtos são pesadas, e Trugbild tem receio de que o carregamento das
  imagens em um dispositivo móvel possa resultar eu um carregamento devagar,
  gerando uma pobre experiência para o usuário. Infelizmente, as imagens não
  podem ser descartadas, porque são o principal ponto de venda dos produtos do
  DecalGirl.com. As imagens devem ser adaptadas para visualização mobile, e Trugbild
  sugere a utilização de várias técnicas de códigos em JavaScript para
  reduzir o carregamento.
• Previews de Imagens. Trugbild nota que, quando os
  consumidores compram na versão desktop do carrinho do DecalGirl.com,
  os produtos e as variáveis selecionadas geram varias caixas “pop-up” com
  imagens ou maiores detalhes sobre o produtos, possíveis devido ao código
  JavaScript. Mas esse estilo é, mais uma vez, pesado, segundo Trugbild. Ele planeja
  criar uma solução diferente para exibir essas variáveis.
• Slideshows. A versão para desktop do
  site tem slideshows dos produtos usando JavaScript, e Trugbild recomenda
  que isso seja omitido na visualização mobile, devido ao tempo de
  carregamento.
• Formulário de Comentários
  dos Usuários. O site de Peters tem um formulário baseado em código
  JavaScript para que os usuários deixem comentários sobre produtos, avaliando-os.
  Trugbild tem receio de que isso possa ser um problema ao customizar o site
  para mobile, e recomenda sua omissão.

Sumário

Mais uma
vez, Peters expressou um objetivo claro de como ele quer que seja o design de
seu site mobile, e como quer que ele funcione: direto, com navegação simples
para os consumidores. Com isso em mente, Trugbild entregou um mockup inicial
das páginas interiores. Peters queria ver uma lista do inventário com scroll,
em vez de listas paginadas. Trugbild começou a alterar as páginas internas
para atender às especificações de Peters e também adicionou uma função extra de busca.

Peters
descobriu que os principais sistemas operacionais mobile usados pelos
visitantes de seu site – e para os quais Trugbild focou na compatibilidade – são:
iOS (iPhone e iPod Touch), Android OS e BlackBerry OS
6. Trugbild também listou alguns recursos disponíveis na versão para desktop
que talvez não sejam possíveis de adaptar e devem ser omitidos, uma vez que
ambas as partes se preparam para finalizar o design da plataforma mobile.

No
próximo artigo, iremos ver o design final das páginas interiores do menu mobile
do DecalGirl.com e as modificações no carrinho de compras para uso mobile.

?

Texto original disponível em http://www.practicalecommerce.com/articles/2480-Optimizing-an-Ecommerce-Site-for-Mobile-Devices-Part-3-Design-and-Compatibility