Tags Posts tagged with "Design para Lojas Virtuais"

Design para Lojas Virtuais

√Ä medida que o varejista online busca oferecer uma melhor experi√™ncia de compra mobile ao seus clientes¬†se espera um grande n√ļmero de releituras de Design para Lojas Virtuais em 2014. Estes sites provavelmente ser√£o redesenhados seguindo tend√™ncias populares de design que atualmente impactam sites de entretenimento e aplicativos mobile.

Plataformas de e-commerce como Magento, Shopify ou at√© mesmo WooCommerce (no WordPress) podem ter uma poderosa influ√™ncia sobre a forma como as lojas virtuais ser√£o projetadas. Para 2014, mesmo quem seguir o mantra “n√£o est√° quebrado, n√£o conserte” pode ser obrigado a remodelar seu site gra√ßas ao crescimento cont√≠nuo do tr√°fego da internet m√≥vel. Muitos projetam que em muito breve o tr√°fego m√≥vel ultrapasse o uso de internet atrav√©s de desktops.

Segundo a E-bit, hoje¬†no Brasil, temos 50 milh√Ķes de smartphones viabilizando a navega√ß√£o pela rede. As vendas via mobile tamb√©m crescem rapidamente. Em junho de 2012, o share em volume transacional da modalidade era 1,3%, passando para 2,5%, em janeiro de 2013, e chegando a 3,6%, no m√™s de junho. No final de novembro de 2013, esse n√ļmero j√° atingiu 4%.

O Practical E-commerce listou 7 fortes tendências do Design para Lojas Virtuais em 2014. Veja:

1- Design Responsivo

Os smartphones ditam as tend√™ncias para as atualiza√ß√Ķes, por√©m nem pense em abandonar os usu√°rios de Desktop. Exatamente por isso, o Design Responsivo, que j√° n√£o √© mais nenhuma novidade, ganha popularidade. A plena experi√™ncia de compra independentemente do dispositivo utilizado pode ser considerada como o ‘mandamento’ mais importante do design atual.

Leia também: O que é Responsive Design?

Uma dica de padrão a ser seguido pelos designers é usar o CSS Flexible Box Layout Module. Esta proposta de padrão World Wide Web Consortium desfruta de um bom suporte à maior parte dos navegadores, incluindo um apoio, pelo menos parcial nos navegadores Chrome 31, Firefox 25, Internet Explorer 10, Safari 7, Opera 18, iOS Safari 7, Android Browser 2.1, Blackberry Browser 10, e IE Mobile 10.

Três recursos ajudarão muito aqueles não familiarizados com o Flexible Box Layout Module:

‚Äʬ†CSS-Tricks ‘¬†‚ÄúA Complete Guide to Flexbox‚ÄĚ;
‚ÄĘ Rede dos Desenvolvedores de¬†Mozilla¬†¬†‚ÄúUsing CSS Flexible Boxes“;
‚ÄĘ Philip Walton¬†‚ÄúSolved by Flexbox‚ÄĚ.

2- Finger Friendly Interfaces (Amig√°vel para os dedos)

Como citado o foco é nos celulares, sendo assim os sites devem permitir ser conduzidos literalmente na ponta dos dedos. De um tablet ou smartphone o usuário navegará usando seus dedos ou, no máximo, uma caneta para tablet.

7 Tendências do Design para Lojas Virtuais em 2014.

No contexto das Lojas Virtuais, exitem talvez dois impactos da tend√™ncia da ‘simpatia pelos dedos’.

1- Veremos menos sliders de conte√ļdo (tamb√©m conhecido como carrossel). Estas barras t√™m sido muito populares em sites, uma vez que permitem aos lojistas mostrar uma grande quantidade de informa√ß√Ķes em uma quantidade relativamente pequena de espa√ßo na tela, por√©m tendem a ter bot√Ķes de navega√ß√£o muito pequenos, o que √© bem dif√≠cil de gerir em smartphones.

2- Fique atento para ter bot√Ķes maiores de navega√ß√£o, a ideia sempre vai girar em torno da facilidade de navega√ß√£o.

3- Flat Design

O Flat Design (Plano) pode ser visto na interface do Windows 8, no iOS 7 da Apple, e em dezenas de sites populares. Essa estética tende a evitar sombras e efeitos em geral, além de focar em cores fortes e interessantes. Entenda melhor o Flat Design neste hotsite genial produzido pela inTacto: A batalha Flat vs. Realism.

Esta tendência do design tem algumas vantagens atuais. A técnica muitas vezes leva a interfaces simples, o que facilita o desenvolvimento do Design Responsivo. A parte visual normalmente proporciona arquivos menores, o que agiliza o carregamento das páginas, o que normalmente se torna um diferencial.

Um ótimo exemplo citado de aplicação de Flat Design para E-commerce é site Canopy, que permite aos usuários compartilhar produtos disponíveis na Amazon.

7 Tendências do Design para Lojas Virtuais em 2014.

4- Mais conte√ļdo em uma p√°gina

Em 2014 esperamos que os designers e desenvolvedores adicionem mais conte√ļdo para p√°ginas individuais atrav√©s de duas maneiras:

1-¬†Visualiza√ß√Ķes r√°pidas – permite aos consumidores obter informa√ß√Ķes adicionais sobre o produto sem sair da p√°gina. Ideal para consumidores mobile, que n√£o precisam aguardar um novo carregamento de p√°gina.
2- A duração do tempo da visita aumenta, alguns usam até uma rolagem infinita, como Tumblr ou Pinterest.

5- Fontes interessantes

A Tipografia online explodiu nos √ļltimos anos, para 2014 a tend√™ncia est√° mantida. ¬†Espere ver sites usando fontes bem diferentes dentro do mesmo site para proporcionar sensa√ß√Ķes distintas dentro de uma mesma p√°gina.

Para ver alguns exemplos deste conceito aplicado em sites de com√©rcio eletr√īnico, visite¬†Free People,¬†Design by Humans,¬†Afends,ou o¬†Yellow Bird Project.

7 Tendências do Design para Lojas Virtuais em 2014.

6- Destaques grandes

Inicialmente pode parecer contra-intuitiva se levarmos em considera√ß√£o o uso de internet m√≥vel e o conceito de fornecer uma experi√™ncia melhor em qualquer dispositivo. Por√©m, os destaques grandes prop√Ķem estar exatamente do tamanho da tela, com um planejamento de qualidade do site, os designers podem entregar destaques grandes e apropriados para os diferentes dispositivos.

7 Tendências do Design para Lojas Virtuais em 2014.

Destaques relativamente maiores que direcionam para produtos, também têm a tendência de facilitar a experiência do usuário que utiliza os dedos. Esta é outra razão para esta tendência crescer.

Bons e GRANDES exemplos: Born, Hagger, e Tommy Bahama.

7- V√≠deos e outros tipos de conte√ļdo

O consumo de vídeo em dispositivos móveis aumenta constantemente e deve continuar, chegou a aumentar 20% de 2012 para 2013.  Diante disso é correto entender que os consumidores não se importam em assistir vídeos em tablets ou smartphones.

Nesta contexto, o v√≠deo √© uma excelente ferramenta para o varejista oferecer conte√ļdo √ļtil e informa√ß√Ķes detalhadas dos produtos. Os varejistas devem come√ßar a incluir mais v√≠deos e outros conte√ļdos de m√≠dia ricos em estrat√©gias para Marketing de Conte√ļdo e na descri√ß√£o dos produtos.

Conte√ļdo traduzido e adaptado do Practical E-commerce