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

Texto original de Matt Ferner, disponível em http://www.practicalecommerce.com/articles/2422-Optimizing-an-Ecommerce-Site-for-Mobile-Devices-Part-2-Layout-and-Design

?

Nota: No artigo “Volunteer
for a Free Mobile-Optimized Ecommerce Site“, solicitamos comerciantes
para se voluntariarem para um estudo de caso de otimização móvel, no qual
seguiríamos o processo de criar um site móvel passo-a-passo. Dezenas de
comerciantes inscreveram seus sites e, depois de um processo de revisão,
escolhemos o DecalGirl.com. A segunda parte do
estudo de caso segue abaixo.

?

No primeiro artigo, Otimizando um site de e-Commerce para dispositivos móveis – Parte 1: Começando, nós mostramos como o DecalGirl.com, uma empresa
que cria skins para dispositivos móveis, começou a explorar as melhores
estratégias para abordar este projeto. Depois de terem trabalhado duro, vamos avaliar seu progresso.

A
experiência de desenvolvimento é válida

Mais
cedo, o MobilizeToday descobriu que Ryan Peters, o cofundador do DecalGirl.com,
está em uma posição única no que diz respeito à otimização mobile de seu site:
ele é o desenvolvedor original de todo o website do DecalGirl.com, incluindo o carrinho de
compras customizado. Sua experiência e total controle criativo do design do
site permitiu que ele participasse do desenvolvimento com Steven Trugbild
do MobilizeToday em um nível além do que
a maioria dos consumidores seria capaz de fazer.

Ryan Peters

Devido
à experiência de desenvolvimento web de Peter, ele ajudou o MobilizeToday.com a
acessar o conteúdo necessário do DecalGirl.com, tirando as restrições de layout
e design do site tradicional para desktop. Com isso customizado, a
funcionalidade do lado do servidor ajudou bastante o MobilizeToday. Trugbild
expressou seu entusiasmo sobre o know-how de Peter e disse que isso dá ao
MobilizeToday a habilidade de compor páginas mobile da maneira ideal: com
conteúdo flexível e não restrito ao design original do site.

Trugbild
disse que estar atrelado ao visual e à estrutura naturais da versão original do
site para desktop é uma limitação comum da otimização para mobile. Ele diz que,
geralmente, devido ao fato de o desenvolvedor mobile não saber a linguagem do
código em uso, ou a estrutura da base de dados do lado do servidor para o site
desktop, é um desafio maior para o desenvolvedor oferecer funcionalidade
customizada do lado do servidor. Peters é uma rara exceção que permite o máximo
de liberdade de design.

Opções para otimimização mobile e barreiras

De
acordo com Trugbild, o jeito ideal de ter um website amigável na versão mobile
é construir a versões móvel e para desktop ao mesmo tempo. Isso permite que as
bases de ambas versões sejam compatíveis uma com a outra, garantindo a elas
maior flexibilidade de design.

No
entanto, na prática, Trugbild entende que a maioria dos websites não foi
construída tendo como prioridade ser amigável para dispositivos móveis. Ele sugere que os
comerciantes que já tenham sites e-Commerce prontos considerem estas três
opções:

• Carrinhos de compra customizados. Contrate
  a empresa de design que fez o website original, se eles oferecerem uma solução
  para torná-lo amigável para a versão mobile. Nem todos os desenvolvedores de
  site oferecem isso. A otimização para mobile, mesmo sendo feita pela mesma
  empresa de desenvolvimento, requer a reconstrução de algumas partes da
  funcionalidade do website original, e pode ter um custo alto.
• Carrinhos de compra hospedados ou
  licenciados. Obtenha maior compatibilidade mobile do fornecedor do carrinho de
  compras. Alguns carrinhos podem oferecer uma solução por um preço maior ou até
  de graça. E se o carrinho ainda não oferecer uma solução mobile, os
  comerciantes podem simplesmente esperar para quando (ou se) o fornecedor desenvolver
  uma solução mobile.
• Carrinhos de compra customizados,
  hospedados ou licenciados. Contrate uma nova empresa de otimização web que irá
  te ajudar a resolver este problema a um custo razoável, provavelmente
  utilizando o CSS mobile. A nova empresa de desenvolvimento irá utilizar o
  design já existente do website original na versão mobile e não irá reconstruir
  todo o site, o que manterá os custos baixos, mas restringirá as escolhas de
  design.

O primeiro mockup

No
início do desenvolvimento, Peters citou os principais elementos que ele
gostaria de ver no site mobile:

• O logo do DecalGirl.com
• Uma função de busca
• Um menu principal com várias opções
  de design para as categorias principais (p.e. iPods, e-readers, media players)
• Uma sub-seção com categorias de skin/case
  populares para seleção
• Links para sites de mídia social

Trugbild
achou que a visão de Peters se alinhou bem à dele, enfatizando a importância de
uma home page mobile “simples, leve e amigável para o usuário”. Trugbild também
ressaltou a importância de diminuir o visual
da homepage e sua navegação como um todo para a tela menor de um
dispositivo móvel.

Com essas idéias inicias em mente, Trugbild entregou o mockup do primeiro design
utilizando as cores existentes e a estrutura de menu do site de desktop do DecalGirl.com. O menu principal tem a largura
flexível que automaticamente se ajusta ao tamanho da tela do dispositivo móvel,
e é compatível com o modo de visualização de retrato ou paisagem.

Mockup do MobilizeToday para a home page mobile do
DecalGirl.com

Refinando o design mobile

Peters
achou a primeira tentativa do mockup com um conteúdo muito pesado. Com sua
experiência de desenvolvimento, ele resolveu fazer o design da sua própria
versão para o menu. Peters simplificou a funcionalidade do menu
substancialmente – ao invés de duplicar a navegação do desktop e o layout do
menu, ele comprimiu as opções em três itens principais (e expansíveis).

Redesign do Peter para a
home page mobile

Então ele usou o design
de uma skin do DecalGirl.com para o estilo aesthetic,
em vez de repetir o esquema de cores do site original.

Peters também adicionou
o gráfico de um carrinho de compras e um valor numérico no gráfico, indicando o
número de itens no carrinho e um link para “Visualize a versão completa”, que
permite que o cliente saia da versão mobile e vá para a versão original do site.

No próximo
artigo, veremos o design final do menu mobile do  DecalGirl.com, e veremos também a
compatibilidade do site com os vários dispositivos móveis.