18 sites de comércio eletrônico com design impecável de UX (e três grandes nomes que sugam)

Se você se juntou a nós no nosso artigo sobre UX no início deste mês, saberá que discutimos os 25 elementos essenciais de design de UX para seu site.


A idéia básica é a seguinte: o design do UX tem tudo a ver com a cabeça do visitante. Trata-se de criar uma experiência simples, perfeita e agradável para seus usuários. A idéia é fornecer informações rapidamente e até fazê-las sorrir.

Um bom design de UX gera dopamina e felicidade em seus visitantes. E isso os torna mais propensos a confiar em você. O mais importante é que eles aumentam a probabilidade de comprar de você.

Depois de analisar os 25 princípios básicos em nosso último artigo sobre design de UX, vamos ver como ele funciona em ação. Especificamente, estamos analisando o design UX de sites de comércio eletrônico.

Como esses sites usam truques inteligentes de design de UX para incentivar seus visitantes a comprar?

1. Asos

Eu uso muito o exemplo do Asos, mas há uma boa razão para isso. Seu design UX é brilhante.

Tudo começa com uma proposta de valor eliminável. Ótima imagem, explicação simples, garantia de “entrega gratuita” e os apelos óbvios à ação direcionando você para a seção de homens ou mulheres.

asos2

Um dos recursos de destaque do UX é a passarela de vídeos, para que os visitantes possam realmente ver como é a roupa. Dá aos clientes a melhor visualização possível dos itens e dá a eles confiança para comprar.

Eles também têm um excelente novo recurso chamado “visualização rápida”. Na página do produto, você clica em “visualização rápida” e um pequeno pop-up aparece com imagens extras e todas as informações necessárias. Ele salva o cliente clicando para frente e para trás em páginas diferentes. Design simples e intuitivo.

asos

2. Zara

O site da Zara é uma masterclass em simplicidade. Limpo, intuitivo e limitado. É uma homenagem à lei de Hick: um princípio de design que limita a opção de navegação e oferece ao usuário opções claras, porém restritas.

A idéia é que muitas opções sobrecarregarão seu visitante. Ao oferecer menos opções, eles se sentem mais confiantes. Veremos uma navegação mais excelente ao longo deste post, mas a Zara é uma das melhores.

zara

3. Abof

Abof (All About Fashion) usa um truque UX diabolicamente inteligente em seu site. Acesse a página inicial e ela não parece um site de comércio eletrônico tradicional. Em vez disso, parece mais um blog. Está cheio de conteúdo interessante que inspira seu público.

abof

Em suas histórias e artigos, eles destacam as roupas em uma seção importante chamada “Comprar a história”. Em nosso artigo anterior sobre UX, falamos sobre a importância de criar um relacionamento com seu público. A Abof faz isso perfeitamente com histórias e conteúdos relacionáveis.

acima de 2

Somente quando o cliente é inspirado, eles tentam vender algo.

Na página do produto, eles têm notas úteis de “dicas de estilo”, que são exemplos perfeitos de “micro-interações” – pequenas pepitas que alcançam e envolvem seu público-alvo.

acima de 3

Observe que eles também têm um “guia de tamanho” para ajudar os clientes a obterem as medidas exatas corretamente (o medo de as roupas não serem ajustadas é uma das maiores razões pelas quais abandonamos os carrinhos de compras). Eles também usam uma seção “entrega estimada” para fornecer aos clientes ainda mais informações.

4. Berghaus

Berghaus é uma marca de roupas para atividades ao ar livre, mas você saberá que no primeiro segundo do desembarque no site.

Berghaus

Esta é uma marca que entende intimamente seu público-alvo e se conecta a eles o mais rápido possível. O primeiro tiro de herói é um convite inspirador. Ele se conecta à comunidade e atrai você a.

A única desvantagem? Uma frase de chamariz mais forte realmente selaria o acordo aqui.

5. Apple

Você esperaria que uma empresa que colocasse design e inovação em seu coração se destacasse no design de UX, e eles o fazem. Confira as páginas dos produtos para começar.

Eles usam rolagem de paralaxe para tornar as imagens dinâmicas, atraindo o usuário e eliminando quaisquer pontos de saída. Você está imerso no mundo da Apple.

Screen Shot 2016-07-28 em 8.43.00 AM

Animações inteligentes mostram exatamente como os produtos funcionam, como o novo toque 3D. As galerias de rolagem convidam você a interagir e explorar, e uma cópia inteligente informa exatamente como o novo iPhone melhorará sua vida (em vez de uma longa lista de recursos).

A navegação deles é simples e limpa, e eu adoro o uso de imagens para diferenciar ainda mais as opções (examinamos a Web, para que as palavras tenham o hábito de se misturar)

maçã 2

Durante o processo de pagamento, eles oferecem a opção de conversar com um especialista durante a compra. É um truque simples, mas útil. Isso ajuda os novatos a ultrapassar os limites, mas não impede que compradores confiantes tirem seu cartão de crédito.

6. Bellroy

Como um vendedor de comércio eletrônico relativamente novo, sua primeira tarefa é mostrar aos clientes como você é diferente de todos os outros. A Bellroy faz isso perfeitamente com sua linha de carteiras finas e compactas.

bellroy 3

Melhor ainda, em suas páginas de produtos, cada carteira possui seu próprio vídeo, mostrando aos clientes todos os recursos exclusivos.

bellroy 4

7. Alugue a pista

O Rent The Runway tem um conceito único: você empresta um vestido ou roupa por alguns dias, em vez de comprá-lo. Isso é ótimo para casamentos ou eventos em que você não deseja usar uma roupa que nunca mais usará.

O site apresenta o conceito de maneira simples e, em seguida, convida a interação do usuário, solicitando que ele escolha a ocasião.

aluguel de pista

Marcas extras para o calendário de entrega também, informando aos clientes exatamente quando a roupa chegará e quando ela precisará ser devolvida.

aluguel de pista 2

Tão simples, mas tão tranquilizador.

8. Amazon

A Amazon é o maior site de comércio eletrônico do mundo e, francamente, um dos melhores. Você pode escolher qualquer um dos recursos como um exemplo de design de UX.

Dos pacotes inteligentes às recomendações dos clientes, eles antecipam as necessidades e entregam seus usuários. No entanto, é o sistema de pedidos com um clique que destacamos hoje.

Amazonas

Ainda é o melhor exemplo de eficiência de check-out na web. No centro do comércio eletrônico, o design do UX é o processo de carrinho e check-out. Quanto mais suave, melhor. E não é mais fácil do que encomendar com um clique!

9. Pastar

Uma imagem que diz tudo o que você precisa saber. Redação e design com personalidade. Um desconto imediato para novos usuários e uma grande frase de chamariz em negrito.

pastar

Esta é uma masterclass simples no design de UX.

10. TopShop

As lojas que vendem muitos produtos têm um trabalho muito mais difícil no que diz respeito ao design de UX. Como você organiza cada par de jeans diferente e os apresenta?

Felizmente, o TopShop tem um ótimo plano. Com um seletor de filtro grande e robusto que flutua na página, você pode ajustar e alterar constantemente o estilo, a cor, o ajuste e o preço de seus produtos..

Topshop 2

Ainda mais legal, todos os produtos mudam para uma foto do modelo que os usa quando você passa o mouse com o mouse. Incentiva a interação e oferece aos clientes uma visão melhor dos itens.

11. Protesto

O protesto pode ter apenas a maior e mais gorda navegação na web.

P

É claro, sucinto e organizado. Também reduz a chance de o cliente se afastar. A cor azul mantém a atenção do cliente exatamente onde eles querem.

O Protest também usa uma tonelada de pequenas animações no site. Cada um é acionado quando você passa o mouse sobre ele. Ele retém a atenção do cliente, incentiva a interação e faz todo o site parecer dinâmico.

12. Novo visual

O New Look ganha um lugar na lista por sua cesta inovadora. Ele fica na barra de navegação deles o tempo todo com um indicador em negrito para lembrá-lo de que está lá.

Novo visual 2

Quando você clica nele, ele não é arrastado para uma página diferente. Em vez disso, você tem um painel deslizante movendo-se pela lateral para mostrar o que está na sua bolsa. Isso significa que os clientes nunca se perdem e podem fazer checkout facilmente quando quiserem.

Novo visual

13. Lápis, por 53

Se você vender uma caneta por quase US $ 60, precisará vendê-la de verdade! Felizmente, o ‘Pencil’, por 53 anos, faz um excelente trabalho, usando vários truques de design de UX.

Eles usam uma longa página de rolagem de paralaxe para explicar todos os recursos e mostrar exatamente o que você pode fazer com ele.

lápis 2

Eles também aproveitam ótimas críticas para explicar por que são muito melhores do que as outras opções disponíveis. Usar uma cotação de ‘Wired’ é um truque brilhante para dar credibilidade ao produto e destacar seus benefícios.

Lápis

14. Farmdrop

Em nosso último artigo sobre design de UX, explicamos como é importante ter empatia com seu público-alvo e conectar-se a ele. O Farmdrop faz isso colocando sua declaração de missão na frente e no centro.

Fazenda

Eles estão doentes e cansados ​​de ver alimentos provenientes de quilômetros de distância. Isso é algo que a maioria dos clientes pode adotar. Antes que eles tentem vender qualquer coisa, eles se conectam a você e fornecem um motivo para comprar.

15. Sid Mashburn

Apenas outro ótimo menu suspenso, completo com pequenos ícones. É um truque simples que nos ajuda a entender um menu extenso. Além disso, dá ao site um pouco mais de personalidade.

ícones

16. Relógios lentos

Este é um relógio com apenas uma mão. É um conceito único, por isso é preciso algumas explicações! A Slow Watches faz isso muito bem com um vídeo explicativo em tela cheia.

relógios lentos

Além de explicar o conceito, eles também falam sobre sua filosofia por trás da criação (ótima para se conectar com o cliente) e usam belas imagens que destacam e direcionam seu público-alvo ideal..

17. Firebox

Quando seus itens não se encaixam em categorias normais, seja criativo! O Firebox é especializado em presentes incomuns e itens irreverentes. O gráfico dos 50 melhores é a maneira perfeita de explorar seus produtos mais populares.

imagens

O layout da caixa é ótimo para navegar rapidamente pelos produtos, e muitas das imagens são dinâmicas, em movimento e interagindo com o cliente.

Como eles se especializam em presentes, eles também têm um ‘localizador de presentes’ na barra de navegação, uma maneira fantástica de restringir as opções.

18. Oaf preguiçoso

As compras on-line costumam parecer bastante parecidas, e muitos sentirão falta do antigo processo de folhear uma revista ou catálogo.

Lazy Oaf traz isso de volta com sua seção legal de ‘lookbooks’. Em vez de colocar as roupas uma de cada vez, elas mostram as roupas em várias combinações ao mesmo tempo. Afinal, é assim que eles costumavam aparecer em um catálogo.

idiota preguiçoso

Clique nas imagens e você recebe uma caixa de “compra rápida” para escolher cada um dos três itens exibidos. É uma maneira mais imersiva e antiga de fazer compras.

O que não fazer!

Não gostamos de desmembrar outros sites, mas existem alguns grandes nomes por aí que entendem tudo errado … Aqui estão um ou dois dos piores criminosos.

1. Casa de Fraser

Eles são uma das maiores lojas de departamento do mundo, mas cometem um grande erro assim que você carrega o site deles..

Imediatamente você é surpreendido com um pop-up de página inteira pedindo para se inscrever na newsletter deles.

Hourse of Fraser

Mesmo sendo uma grande loja de nomes, é uma tática muito agressiva que afligirá a maioria dos compradores. Lembre-se, esta é a primeira impressão. É muito melhor criar uma jornada do usuário que eduque e inspire seu visitante antes de solicitar um endereço de e-mail.

Não apenas isso, mas não há incentivo real para se inscrever no boletim deles. Um desconto no código do cupom seria uma ótima opção aqui e pode ajudar os clientes a perdoar o pop-up invasivo.

2. Wal Mart

O Wal Mart tem um desafio difícil. Eles vendem praticamente tudo, então como você categoriza e simplifica? Bem, não tenho certeza … mas não assim …

parede mart

Infelizmente, isso é apenas uma bagunça de categorias que é quase impossível encontrar o que você está procurando.

Há simplesmente muita informação acontecendo aqui. Quando você apresenta aos usuários muitas opções, eles geralmente entram em pânico e saem.

3. Ray-Ban

Essa é uma escolha um tanto cruel, porque a maioria do site da Ray-Ban é muito amigável. Na verdade, ele tem uma tonelada de recursos interessantes.

No entanto, eles fazem algo que muitos sites de comércio eletrônico realmente irritam os clientes. Este:

ray ban

Você provavelmente já viu uma página como essa centenas de vezes. Não parece tão ruim, mas na verdade cria mais uma barreira à venda.

Se você é um cliente recorrente, agora está ocupado pensando em qual senha você criou. Se você não consegue se lembrar, terá que passar por todo o processo de ‘senha esquecida’. Você pode perder esse cliente a qualquer momento …

Se você é um novo cliente, há um checkout de convidados, com certeza, mas tudo o que você fez foi dar outro botão para clicar. Outra chance de clicar.

Nesse ponto, seu cliente está completamente desconectado do carrinho e do processo de compra. Não arraste, apenas bloqueie a venda!

O excelente design de UX trata dos pequenos ajustes que facilitam as coisas para seus clientes. Esses 18 sites fazem isso perfeitamente.

Quais recursos você usará em seu próprio site?

Kim Martin Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map