#EUQUEROCUPOM

Todo mundo gosta de Cupom de Desconto, isso não dá pra questionar. Essa tendência vem trazendo novas estratégias entre as lojas virtuais brasileiras.

Confira abaixo o hotsite da campanha de cuponagem #EUQUEROCUPOM que criei para o e-commerce das Lojas Marisa. Uma estratégia do marketing e comercial do e-commerce Marisa.com.br.

CUPOM DE DESCONTO MARISA

Criei toda arquitetura de informação, Usabilidade e design da campanha.

Cupom de Desconto Wireframe

3 Vantagens de oferecer Cupom de Desconto

Aumentar suas vendas e consecutivamente aumentar o ticket médio

O cupom de desconto causa no cliente uma sensação de satisfação. Ele está economizando, levando mais por menos, e além disso deixá-lo mais propenso a finalizar a compra.

Diminua o abandono de carrinho

Uma vez que o cupom é uma oportunidade de deixar a compra mais barata, pode facilitar a venda, sem contar que os cupons costumam ter data de validade então é até uma certa pressão para que não se perca essa oportunidade.

Viralizar campanhas e promoções

A viralização dos cupons de desconto é também uma grande vantagem dessa estratégia. Quando encontramos uma oferta boa na Internet, a tendência é que compartilhemos essa boa notícia com nossos amigos para que eles também aproveitem o desconto.

Ficha Técnica:
Welton Matos: Web Designer – Arquitetura de informação, Usabilidade e design da campanha.
Andreza C S Ferrari: SEO – Otimização da página para os buscadores.
Jana Guiotti: Front-end – Programação da página e cadastro no Admin.

Confira esse projeto no meu portfólio.

Anúncios
Quatro princípios básicos do design

Princípios básicos do design

Alinhamento

Aqui no ocidente, sempre começamos a olhar algo começando do canto superior esquerdo descendo pela lateral. Se eu alinhasse apenas este parágrafo do centro pra direita da página (deixando o resto do texto como está), possivelmente seus olhos iriam ignorar este parágrafo e passar adiante.

Se começar a alinhar algo pela esquerda, alinhe tudo pela esquerda. Se for pra alinhar tudo a direita, alinhe tudo pela direita. Se alinhar a um, dois ou quatro centrímentros da borda, alinhe tudo a um, dois ou quatro centímetros da borda. Evite a todo custo alinhar text pelo centro: isto dá um ar de desordenado e a pessoa se perde facilmente quando vai de uma linha pra outra, já que ela não têm um ponto de referência fácil (no caso, o início da última linha lida). E você não gosta de se sentir perdido ao ler um texto ou ver uma image né? Ninguém gosta.

Design Básico - Alinhamento

Proximidade

Elementos similares devem estar próximos. Por exemplo, acima deste de parágrafo existe o título “Proximidade”. Se eu colocasse o título três linhas acima do início deste parágrafo, isso poderia gerar certa confusão pra você leitor; você estaria se perguntando “O que essa palavra tá fazendo aí no meio do texto? É uma palavra-chave? Qual a relação dele com o resto do texto?”.

A lei é: não faça a pessoa ter que pensar nisso. Se ela ficar se questionando o por que desta distância, ela não vai conseguir concentrar-se no conteúdo. O mesmo vale para imagens: se uma imagem não têm nexo nenhum com uma segunda, por que deixá-los próximos? Vamos manter uma distância para não confundir a pessoa que está visualizando a obra. Aproximando elementos similares, você diminui a confusão, e deixa a informação mais clara e direta.

Design Básico - Proximidade

Contraste

Não é incomum de ver gente usando fundo amarelo com letra branca. Pessoal, amarelo é muito próximo do branco. Se você colocar aquilo no sol, o pessoal não vai conseguir ler nada. Contraste é algo importantíssimo, ainda mais quando existe uma figura e um fundo. Convenhamos, até quando não existe um fundo, existe uma cor da mídia (por exemplo, o papel ou a tela do PC). Claro, dá pra colocar um texto preto sobre um papel branco. É uma ótima forma de contraste. Mas se quiser destacar algo em amarelo, por que não colocar uma tarja preta no fundo desta palavra? É uma ótima forma de contraste; faz aparecer bem aquilo que você quis que se destacasse e não acabou sumindo no fundo.

E contraste não é só de cor, mas de elementos também. Uma frase com tipografia diferente do restante do texto pode ser contrastante. Até uma palavra ou frase negritada pode dar o ar de contraste. Isso serve não só para destacar algo, mas também para diferenciar dois elementos.

Design Básico - Contraste

Repetição

Quando falo sobre repetição, estou falando sobre repetição de elementos visuais. Em um site, por exemplo, você deve repetir a estrutura dele em todas as páginas internas. Ou seja, nada de mudar a posição do menu nas páginas internas.

A repetição de elementos é importante especialmente para a pessoa saber que ainda está no mesmo site. No caso do design de impressos, você pode repetir a cor, fontes, relações espaciais, etc. A repetição cria uma sensação de organização.

Design Básico - Repetição

fonte: http://design.blog.br/geral/quatro-principios-basicos-do-design

UX no E-commerce: 3 tendências de design para seguir e para fugir

UX no E-commerce: 3 tendências de design para seguir e para fugir

No ecommerce, o ux é importantíssimo, a seguir listo 3 tendências para fugir e 3 para seguir quando pensamos em desenvolver nossa loja virtual.

1ª Tendência a seguir: Maiores fotos de produtos.

Talvez pelo aumento das telas e resoluções, designs mais espaçosos ou pelo benefício da experiência do usuário, os sites estão utilizando imagens de produtos maiores. Imagens cresceram em tamanho nas páginas de produto, resultando numa maior quantidade de detalhes visíveis.

Nós todos sabemos que uma fotografia vale por 1000 palavras, e em sites de e-commerce, uma (boa) foto vale por 1000 reais. Em testes de usabilidade, os usuários ciscam por detalhes do produto nas imagens, incluindo detalhes que não são citados nas descrições. Imagens maiores, tem a capacidade de mostrar mais detalhes, e múltiplos ângulos de visualização oferecem ainda mais informações. Fotografias de produtos me utilização ou em seu contexto de uso, funcionam muito bem para responder dúvidas dos e-consumidores.

Nós chegamos a ver um usuário perceber que numa torradeira cabiam bagels, ou que um porta copos tinha feltro que não machuacaria seus móveis, somente olhando para as fotografias no site. O aumento nas imagens de produto não são vistas apenas nas páginas de produtos.

As páginas de categoria, as quais geralmente amontoam o maior número de “micro” imagens possíveis de produtos também adotou a medida. Isso permite ao usuário ver os detalhes rapidamente na “comparação de vitrines”, ajudando-os a gastarem seu tempo explorando os produtos certos.

Category page on ColdwaterCreek.com with large product images

2ª Tendência a seguir: Reviews mais robustas

Reviews ajudam os usuários a entenderem melhor sobre a qualidade e uso de um produto. Reviews podem ser a resposta para as perguntas ou endereçarem preocupações que os usuários tem sobre o produto, simplesmente porque elas são escritas pela perspectiva das pessoas as quais precisavam ou queriam e realmente têm o produto.

Oferecer reviews é de bastante ajuda, mas sites estão cada vez mais optando por oferecer informações adicionais ou um resumo sobre as reviews. Muitos sites estão adicionando detalhes às reviews: detalhes relevantes sobre a pessoa que escreveu a review, como gênero ou idade. Além disso, as reviews estão sendo feitas com filtros sobre características particulares dos produtos, como tamanho e qualidade.

Os sites estão reconhecendo os maiores contribuintes e deixando os leitores avaliarem suas reviews. Eles estão resumindo palavras chaves e frases usadas em reviews tanto positivas quanto negativas, ou até mesmo valorizando citações de reviews bem descritivas ou úteis.

Tais informações adicionais, quando bem feitas, facilita aos usuários receberem o máximo do benefício das opiniões alheias. Detalhes dos “Reviewers” permite aos usuários acharem reviews pertinentes a suas situações ou usos, e os resumos ajudam os clientes a relamente perceber quais são as forças do produto, e seus defeitos comuns.

OrientalTrading.com reviews with criteria for price and quality

3ª Tendência a seguir: Cupons de fácil utilização

Em um passado não muito distante, nós assistimos usuários lutando para utilizar cupons e se qualificar para conseguir descontos. Ficamos felizes que começamos a ver mais sites facilitando cada vez mais a utilemização de cupons para os compradores, ou até automaticamente ganhá-los.

Se um desconto é publicado em um website, automaticamente aplique o desconto para os usuários que estão navegando. Se há códigos de descontos disponíveis faça com que os usuários possam aplicá-los bem antes da página de checkout. Usuários querem ver os descontos aplicados o mais rápido possível em seu processo de compra.

Embora os sites talvez dificultem a utilização de descontos com o objetivo de aumentar valores brutos de venda, prevenir usuários de poderem tirar vantagem de seus descontos devasta sua credibilidade, e pode frustá-los a ponto deles não comprarem mais. Além disso, facilitando a utilização desses descontos existe outra vantagem: muitos consumidores decidem em gastar um pouco mais para se qualificarem ao “Frete Grátis”.

An Add Coupon Code button in the shopping cart preview on ChildrensPlace.com

1ª Tendência a fugir: Descrições de produtos menores e escondidas

Descrições de produtos estão sumindo  em muitos sites de e-commerce. Elas estão localizadas longe do centro, longe das imagens de produto, inteiramente escondida entre links e apertadas em pequenos espaços. Isso pode ser uma mudança influenciada pelo design para mobile, enquanto as empresas tentam criar informações concisas para uso tanto em telas grandes quanto pequenas.

Enquanto o crescimento das fotografias de produto é recomendada, não pode custar às descrições de produto. Descrições podemresponder questões sobre uso, benefícios, cuidados, materiais e medidas. Isso para não dizer que a descrição deve ser vista logo que a página carregar, porém usuários precisam conseguir rapidamente e com certa facilidade achar e utilizar-se da descrição do produto quando ele quiser.

Informações sobre o produto, em websites, podem ser feita em camadas. Caso o espaço seja muito justo, inclua um resumo ou uma breve descrição no alto da página, com um link visível levando aos detalhes adicionais. Esteja certo que a informação do resumo deve ser clara e descritiva. Os usuários vão procurar por detalhes, mas eles não devem caçá-los, não se deve transformar a busca da informação em uma busca ao tesouro.

A 4-line product description on EsteeLauder.com

2ª Tendência a fugir: Adicionando produtos ao carrinho

Usuários não devem adivinhar se um produto foi adicionado ao carrinho. Muits sites falham em dar feedback adequado em relação à essa ação crucial. Os consumidores não querem procurar a página inteira para descobrir se um produto foi realmente adicionado ao seu carrinho, e você certamente não quer que ele suspenda o processo de compra para tal. A ação precisa ser imediatamente e claramente confirmada.

Feedback pode ser alcançado de uma variedade de modos, desde levando o usuário para o carrinho sobreposto ou modal. Entretanto o que não funciona é adicionar uma linha de texto à página, ou atualizar a quantidade de itens ao lado do ícone do carrinho. Os consumidores deixam passar essas pequenas alterações.

Mudanças sutis de design que são feitas com a intenção de manter os consumidores engajados com a experiência de compra, pode agir como uma distração. Se os usuários não sabem se algo foi adicionado, eles podem largar o processo de compra para checar o carrinho, outros podem simplesmente adicionar novamente o mesmo produto. Se os consumidores não percebem que fizeram tal, eles erão um carrinho lotado e culparão o site pelo fato de ter múltiplos itens repetidos, ao invés de um que ele pretendia comprar.

The result of adding an item to the cart on Costco.com

3ª Tendência a fugir: Falta de atenção com o atendimento ao consumidor

Muitos designs de e-commerce se tornaram mais abertos e arejados ao longo do tempo – até você chegar a área de atendimento ao consumidor do site. Então você verá o quão apertado, desarrumado essa área é. Se um cliente está indo à essa área do seu site, ele provavelmente já encontrou um problema, ou está com alguma pergunta em mente.

Qual a sensação que se passa ao ver a área do seu site que representa a voz da empresa sendo limpa, leve e amigável e a área que é fria, poluída e confusa? Assim que os designs mudam e se atualizam ao longo do tempo, não esqueça a área de atendimento ao cliente do site. 

Designs desatualizados podem ser problemáticos para os usuários caso sejam inconsistentes com o resto do site. Os usuários podem se perguntar se as políticas da empresa se mantém ou duvidam da informação apresentada. Alem disso tipografia minúscula e murais de texto com conteúdo complexo são mais difíceis de se ler e compreender.

Fonte: nextecommerce by Victor Ferrante

Os números de 2014

Os duendes de estatísticas do WordPress.com prepararam um relatório para o ano de 2014 deste blog.

Aqui está um resumo:

A sala de concertos em Sydney, Opera House tem lugar para 2.700 pessoas. Este blog foi visto por cerca de 9.600 vezes em Se fosse um show na Opera House, levaria cerca de 4 shows lotados para que muitas pessoas pudessem vê-lo.

Clique aqui para ver o relatório completo

Photoshop no Chrome

Photoshop no Chrome

A Adobe já iniciou os primeiros testes do prometido Photoshop Streaming . O aplicativo funciona da mesma maneira que o editor de imagens comuns, com a diferença de que o software não é instalado diretamente no computador dos usuários, mas roda nas nuvens a partir de um servidor externo. Quando o sistema estiver completo, será possível utilizá-lo a partir do Chrome OS e também do navegador Chrome.

Um dos executivos de engenharia da Google disse à imprensa internacional que o serviço será testado por diversos usuários selecionados pelo período de seis meses. Ele já está 90% pronto, mas ainda precisa de alguns ajustes para que uma série de limitações atuais seja retirada — o que inclui a obrigatoriedade da utilização de arquivos que estejam armazenados nos servidores do Google Drive.

Também é preciso dizer que apesar de a interface de utilização do Photoshop estar presente de maneira integral, não é possível trabalhar com nada que envolva projetos tridimensionais no momento. Isso acontece porque os servidores da Adobe ainda não utilizam processadores gráficos que permitam tal ação. Por fim, o processo de impressão também não é pode ser feito diretamente pela web.

Como funciona o Photoshop Streaming?

O Photoshop Streaming funciona de forma simples. Quem tem acesso só precisa baixar um aplicativo na Chrome Web Store e executá-lo. Em seguida, a pessoa é conectada a um servidor que roda a versão tradicional do Photoshop 2014 e todo o processo é feito por streaming. A interface é exibida como se fosse um vídeo para o usuário, com a diferença que o javascript recebe seus comandos e o envia de volta para o servidor, onde eles são processados e transformados em ações.

Google Material design

Google Material Design

A notícia que o Google pretente priorizar sites mobile nos resultados de busca me fez lembrar de um material muito interessante para nós designers. O Google Material Design, que resumidamente, fala da importância que um site precisa oferecer a mesma experiência ao usuário, independentemente do device escolhido.

Uma pesquisa recente da comScore que diz que a maioria dos consumidores são multitela. Isso não significa que o mobile sozinho está vencendo, e sim que vários dispositivos estão sendo utilizados pelo mesmo visitante nos mesmos sites. Essa é a principal razão para valorizar experiências consistentes em múltiplos devices.

Google Material design

Google Material design

O Google já vem trabalhando nesta necessidade há anos e acredito eu ainda falta muito, pelo menos no Brasil, a gente estar adequado a essas exigências. O trabalho será duro e a caminhada será longa… mas estamos mais atentos a isso.

Google Material Design

Vejam alguns tópicos do Google Material Design compartilhado pela empresa.

METAS – Criar uma linguagem visual que sintetiza os princípios clássicos de um bom design com a inovação e a possibilidade de tecnologia e ciência. Desenvolver um sistema único subjacente que permite uma experiência unificada entre plataformas e tamanhos de dispositivos. Preceitos móveis são fundamentais, mas toque, voz, mouse e teclado são todos os métodos de entrada de classe primeiros.

Google Material Design - METAS

Google Material Design – METAS

COR – Criar uma linguagem visual que sintetiza os princípios clássicos de um bom design com a inovação e a possibilidade de tecnologia e ciência. Desenvolver um sistema único subjacente que permite uma experiência unificada entre plataformas e tamanhos de dispositivos. Preceitos móveis são fundamentais, mas toque, voz, mouse e teclado são todos os métodos de entrada de classe primeiros.

Google Material Design - COR

Google Material Design – COR

PALETA DE CORES – Esta paleta de cores inclui cores primárias e segundárias que podem ser utilizados para ilustração ou desenvolver as suas cores de marca. Elas foram projetados para trabalhar em harmonia umas com as outras. Clique aqui e baixe a paleta de cores sugerida pelo Google.

Google Material Design - PALETA DE CORES

Google Material Design – PALETA DE CORES

IMAGEM – As imagens não servem apenas de decoração. Ela realiza o papel importante de se comunicar e diferenciar o seu produto. Imagens impactantes, gráficas, e intencionais ajuda a envolver o usuário. Se o clima é suave e silenciado ou brilhante e colorido, os seguintes princípios e melhores práticas podem ajudá-lo a incorporar com sucesso as imagens e levar seus aplicativos para a vida, não importa o que a marca visual.

Google Material Design - IMAGEM

Google Material Design – IMAGEM

 

Veja o material completo aqui e e observe pontos bem interessantes sobre tipografia, usabilidade, acessibilidade e padrões.

Fonte:
Google
ProXXIma – Meio e Mensagem


 

Obrigado e até a próxima pessoal…

Curta a página Welton Matos no Facebook

Curta a página Welton Matos no Facebook