Uma mostra de comércio eletrônico móvel
Otimizar sites para a web móvel é uma tarefa árdua. E otimizar websites de e-commerce para a web móvel é uma fera que designers e desenvolvedores começaram a domar.
Não é de surpreender que empresas maiores estejam adotando primeiro o meio, provavelmente porque têm recursos e fluxo de vendas para justificá-lo. Afinal, mesmo que um site de comércio eletrônico tenha um tráfego considerável, uma pequena porcentagem disso será baseada em dispositivos móveis. E uma porcentagem ainda menor desse tráfego realmente completará suas vendas.
Com o momento apenas começando realmente nesta arena, a experiência das pessoas com transações de comércio eletrônico móvel é limitada. Isso torna o nicho um experimental na melhor das hipóteses. Felizmente, dada a natureza do e-commerce, o sucesso pode ser cuidadosamente medido e testado. Este é um meio que ainda precisa de definição.
Um enorme obstáculo para o progresso é a escassez de exemplos. Galerias de surf para encontrar uma tonelada de idéias interessantes não está nem perto de ser rápido e fácil. Existem apenas algumas pequenas coleções de design para dispositivos móveis, menos ainda para o comércio eletrônico. Para resolver isso, coletei 10 exemplos fantásticos de comércio eletrônico móvel. QR códigos foram incluídos para facilitar a navegação. Você pode encontrar muitos aplicativos para seus telefones celulares que podem ler esses códigos.
1. Walmart
Uma abordagem comum de todos os sites apresentados aqui é ter uma home page do tipo portal. Walmart não é diferente. No entanto, enquanto a maioria dos sites contam com listas baseadas em texto, esta tem uma grade de ícones, que é muito mais fácil de navegar. Muitos dos sites para dispositivos móveis abordados aqui têm listas que são tão pequenas que são difíceis de usar. O Walmart combina ícones com texto para tornar os alvos fáceis de acertar.
A maior pegadinha do site do Walmart é que você precisa pular para o site principal para concluir uma transação. Ainda assim, as informações e os botões são extremamente fáceis de usar, claros em função e bem organizados.
2. Toys-R-Us
o Toys-R-Us website é um passo na direção certa. Mas poderia fazer algumas coisas importantes melhor. Primeiro, achei a lista de botões na home page um pouco pequena demais. Eu entendo a tentação de reduzi-los para preservar o espaço, mas eles seriam muito mais fáceis de usar com um pouco mais de espaço. Claro, eu teria que rolar mais, mas isso é um bom compromisso.
Depois de passar da home page, fica muito melhor. Em particular, este site tem uma das melhores páginas de carrinho de compras. Os botões são claros e o equilíbrio entre densidade e capacidade de toque parece correto. Tudo somado, um bom exemplo de como comunicar claramente os pontos de ação.
3. Crocs
O desenvolvimento para dispositivos móveis ainda é muito dominado pelos desenvolvedores, portanto, encontrar um website para dispositivos móveis com um belo design é um alívio. Tal é o caso com Crocs . Seu site é bem implementado e uma beleza para se olhar.
A exibição da lista de catálogos é particularmente limpa. A única maneira de torná-lo mais enxuto seria eliminar nomes de produtos. Independentemente disso, cada linha é um alvo fácil, com informações claras e relevantes.
4. JC Penny
Um problema que os designers da JC Penny loja móvel enfrentou o escopo do produto. Como você permite que os usuários naveguem efetivamente em uma ampla variedade de opções em uma seção como calças masculinas? A solução, um sistema drop-down simples, permite que os clientes filtrem rapidamente os critérios para chegar aos produtos de que precisam.
As grandes imagens também são um ótimo recurso. Observe como é fácil ver os itens reais na visualização de detalhes do produto. Eu suspeito que a taxa de conversão de sites móveis é extremamente baixa, e não posso deixar de pensar que uma ótima fotografia como essa é uma das poucas armas para combater isso.
5. Pottery Barn
A fórmula deve estar bem clara agora: logo no topo, pesquise abaixo, um gráfico de lead-in para promover um produto ou venda, seguido por uma lista das principais categorias de produtos. E nós encontramos essa estrutura exata em Celeiro da cerâmica Website para dispositivos móveis.
Um detalhe absolutamente brilhante é a solução deste site para o problema de migalhas longas. Você notará na lista de categorias de produtos que a trilha de navegação foi bastante reduzida para incluir apenas a última parte da string. Compare isso com a intrusividade do breadcrumb no Toys-R-Us e você apreciará essa solução que economiza espaço.
6. Threadless
Não é de surpreender que Sem linha 'site para celular é fantástico. A home page segue a fórmula do portal da categoria, mas com uma torção. Muito parecido com o site do Walmart, a abordagem da grade aqui é muito mais fácil de usar do que a maioria. A fotografia é envolvente e faz a loja parecer uma verdadeira experiência de compra. Algo sobre isso parece menos mecânico do que a maioria das outras lojas cobertas aqui.
Você encontrará essa mesma abordagem de grade na visualização de lista de produtos, o que é um bom alívio e mostra os produtos muito bem. Os designers conseguiram minimizar o desperdício de espaço, mantendo a facilidade de uso.
7. Brookstone
Brookstone A loja de celular do Google sofre de uma densa página inicial. Mas uma vez que você passa, o site fica melhor. A grande fotografia clara é muito apreciada. Não sei se as imagens foram otimizadas para dispositivos móveis, mas com certeza estão entre as mais fáceis de ver nesse lote inteiro.
Um ponto fraco é a quantidade de rolagem necessária na página do carrinho de compras para chegar ao botão de check-out. O conteúdo poderia fazer com alguma limpeza e otimização para fechar o negócio.
8. Dooney & Bourke
Eu realmente aprecio a fotografia em Dooney e Bourke Página inicial. Ele transmite exatamente o que a empresa vende assim que você acessa a página. Um detalhe sutil para dizer o mínimo, mas certamente algo a considerar.
Um ponto irritante sobre a exibição de detalhes do produto é que o campo de quantidade está em branco por padrão. Eu tive que adicionar um "1" para adicionar um produto ao meu carrinho. Mas é improvável que eu pedisse mais do que uma das mesmas sacolas de US $ 150.
Além disso, a página do carrinho de compras parece um pouco secundária. Mas vou dar crédito à empresa por colocar os principais itens de ação no topo. As chances de os clientes esquecerem o que acabaram de colocar no carrinho são pequenas, por isso, concentrar-se em ajudá-los a chegar à página de check-out é uma ideia inteligente.
9. Buy.com
A home page do Buy.com Tem algo que nenhuma outra home page neste artigo tem: um produto real. O pensamento da maioria das lojas de e-commerce é criar um portal móvel que permita aos usuários acessar toda a linha de produtos. Embora isso possa ser essencial, o Buy.com me inspira a considerar alternativas.
E se uma abordagem melhor for se concentrar em negócios? A home page é um imóvel de primeira linha; Dado o desafio de fechar vendas, por que não dedicar todo o seu esforço para colocar algo irresistível na frente dos clientes? Observe que, antes de chegar à lista de departamentos deste site, você vê o produto em destaque e quatro links separados para vendas, ofertas e promoções.
10. Petco
Um ótimo recurso da web para dispositivos móveis é que elimina o fluff. Então, quando vejo a home page do Petco O site para celular, não posso deixar de me perguntar se a foto grande é útil de alguma forma. O nome da empresa e o ícone de cão e gato que o acompanha comunicam o foco do produto. Então, por que mostrar essa imagem idiota? Em vez disso, eu colocaria uma oferta especial ou uma grade de ícones de categoria. Enquanto eu aprecio o polonês do site, pode ser mexido um pouco.
A empresa tem uma ideia engenhosa na visão detalhada do produto, destacando as vendas apenas na Internet. Por que não dar um passo adiante e fazer alguns deles especiais apenas para dispositivos móveis? Deixando de lado, a página de detalhes do produto é fantasticamente limpa e clara. Colocando as descrições completas abaixo, as principais funções e informações também parecem ser uma decisão sábia.
Conclusão
Projetar websites para dispositivos móveis é difícil, e projetar sites de comércio eletrônico móvel talvez seja o dobro. Descobrir como ajudar os clientes a encontrar o produto certo e como converter esse processo em uma venda está longe de ser fácil. Espero que esta pequena coleção de recursos traga algumas ideias novas para o seu próximo (ou talvez primeiro) design de website para dispositivos móveis.
Escrito exclusivamente para WDD por Patrick McNeil . Ele é escritor freelancer, desenvolvedor e designer. Em particular, ele gosta de escrever sobre web design, treinar pessoas no desenvolvimento web e construir websites. A paixão de Patrick por tendências e padrões de web design pode ser encontrada em seus livros sobre TheWebDesignersIdeaBook.com . Siga Patrick no Twitter @designmeltdown .
O que você acha se esses exemplos? Por favor, compartilhe nos comentários abaixo…