18 sitios de comercio electrónico con un diseño UX perfecto (y 3 grandes nombres que apestan)

Si se unió a nosotros para nuestro artículo de UX a principios de este mes, sabrá que discutimos los 25 elementos esenciales de diseño de UX para su sitio web.


La idea básica es esta: el diseño de UX tiene que ver con meterse en la cabeza de su visitante. Se trata de crear una experiencia simple, fluida y agradable para sus usuarios. La idea es entregar información rápidamente e incluso hacerlos sonreír.

Un buen diseño UX provoca dopamina y felicidad en sus visitantes. Y eso los hace más propensos a confiar en ti. Crucialmente, hace que sean más propensos a comprarle.

Después de repasar los 25 conceptos básicos en nuestro último artículo de diseño de UX, echemos un vistazo a cómo funciona en acción. Específicamente, estamos viendo el diseño UX de sitios web de comercio electrónico.

¿Cómo utilizan estos sitios web ingeniosos trucos de diseño de UX para alentar a sus visitantes a comprar??

1. Asos

Utilizo mucho el ejemplo de Asos, pero hay una buena razón para ello. Su diseño UX es brillante..

Todo comienza con una propuesta de valor knock-out. Excelente imagen, explicador simple, la garantía de “entrega gratuita” y los obvios llamados a la acción que lo dirigen a la sección de hombres o mujeres..

asos2

Una de sus características destacadas de UX es la pasarela de video, por lo que los visitantes pueden ver cómo se ve un atuendo. Ofrece a los clientes la mejor vista posible de los artículos y les da confianza para comprar.

También tienen una excelente característica nueva llamada “vista rápida”. En su página de productos, presionas “vista rápida” y aparece una pequeña ventana emergente con imágenes adicionales y toda la información que necesitas. Ahorra que el cliente haga clic de un lado a otro en diferentes páginas. Diseño simple e intuitivo..

asos

2. Zara

El sitio web de Zara es una clase magistral en simplicidad. Limpio, intuitivo y limitado. Es una oda a la ley de Hick: un principio de diseño que limita las opciones de navegación y brinda al usuario opciones claras pero restringidas..

La idea es que demasiadas opciones abrumarán a su visitante. Al ofrecer menos opciones, se sienten más seguros. Veremos una navegación más excelente a lo largo de esta publicación, pero Zara es una de las mejores.

zara

3. Abof

Abof (All About Fashion) utiliza un truco de experiencia de usuario ingeniosamente inteligente en su sitio web. Vaya a la página de inicio y no se parece a un sitio tradicional de comercio electrónico. En cambio, se parece más a un blog. Está lleno de contenido jugoso que inspira a su audiencia.

abof

Dentro de sus historias y artículos, luego destacan la ropa en una sección prominente llamada “Compre la historia”. En nuestro artículo anterior sobre UX, hablamos sobre la importancia de crear una relación con su audiencia. Abof hace esto perfectamente con historias y contenido relacionables.

abof 2

Solo una vez que el cliente está inspirado, intentan vender algo.

En la página de su producto, tienen notas útiles de “consejos de estilo”, que son ejemplos perfectos de “micro interacciones”, pequeñas pepitas que alcanzan y atraen a su audiencia.

abof 3

Tenga en cuenta que también tienen una “guía de tallas” para ayudar a los clientes a obtener sus medidas exactas (el miedo a que la ropa no le quede bien es una de las principales razones por las que abandonamos los carritos de compras). También usan una sección de “entrega estimada” para brindar a los clientes aún más información.

4. Berghaus

Berghaus es una marca de ropa para exteriores, pero lo sabrás dentro del primer segundo de aterrizar en su sitio.

Berghaus

Esta es una marca que entiende íntimamente a su público objetivo y se asegura de conectarse con ellos lo más rápido posible. El primer disparo de héroe es una invitación inspiradora. Se conecta con la comunidad y te atrae.

El único inconveniente? Un llamado a la acción más fuerte realmente sellaría el trato aquí.

5. Apple

Es de esperar que una compañía que pone el diseño y la innovación en su corazón para sobresalir en el diseño UX, y lo hacen. Echa un vistazo a sus páginas de productos para comenzar.

Utilizan el desplazamiento de paralaje para dinamizar las imágenes, atraer al usuario y eliminar los puntos de salida. Estás inmerso en el mundo de Apple.

Captura de pantalla 28/07/2016 a las 8.43.00 AM

Las animaciones inteligentes le muestran exactamente cómo funcionan los productos, como el nuevo toque 3D. Las galerías de desplazamiento lo invitan a interactuar y explorar, y una copia inteligente le dice exactamente cómo el nuevo iPhone mejorará su vida (en lugar de una larga lista de características).

Su navegación es simple y limpia, y me encanta su uso de imágenes para diferenciar aún más las opciones (escaneamos la web, por lo que las palabras tienen la costumbre de mezclarse entre sí)

manzana 2

Durante el proceso de pago, le dan la opción de chatear con un especialista mientras compra. Es un truco simple pero útil. Brinda ayuda a los novatos sobre la línea, pero no impide que los compradores confiados saquen su tarjeta de crédito.

6. Bellroy

Como vendedor de comercio electrónico relativamente nuevo, su primera tarea es mostrar a los clientes en qué se diferencia de todos los demás. Bellroy hace esto perfectamente con su gama de billeteras delgadas y compactas..

bellroy 3

Mejor aún, en sus páginas de productos, cada billetera tiene su propio video, que muestra a los clientes todas las características únicas.

bellroy 4

7. Alquile la pista

Rent The Runway tiene un concepto bastante único: toma prestado un vestido o atuendo por unos días, en lugar de comprarlo. Esto es ideal para bodas o eventos en los que no desea pagar un atuendo que quizás nunca vuelva a usar.

El sitio web presenta el concepto de manera simple, y luego invita a la interacción del usuario, instándolos a elegir la ocasión..

alquiler de pista

Marcas adicionales para su calendario de entrega también, lo que les permite a los clientes saber exactamente cuándo llegará el atuendo y cuándo debe devolverse.

alquiler de pista 2

Tan simple, pero tan tranquilizador.

8. Amazon

Amazon es el sitio web de comercio electrónico más grande del mundo y, francamente, uno de los mejores. Puede elegir cualquiera de sus características como ejemplo de diseño UX.

Desde sus paquetes inteligentes hasta las recomendaciones de sus clientes, anticipan las necesidades y entregas de sus usuarios. Sin embargo, es su sistema de pedidos con un solo clic lo que destacamos hoy.

Amazonas

Sigue siendo el mejor ejemplo de eficiencia de pago en la web. En el núcleo del comercio electrónico, el diseño de UX es el proceso de compra y salida. Cuanto más suave, mejor. Y no es más sencillo que hacer un pedido con un clic!

9. pastar

Una imagen que te dice todo lo que necesitas saber. Redacción y diseño con personalidad. Un descuento inmediato para nuevos usuarios y un gran y audaz llamado a la acción..

pacer

Esta es una clase magistral simple en diseño UX.

10. TopShop

Las tiendas que venden muchos productos tienen un trabajo mucho más difícil cuando se trata de diseño UX. ¿Cómo organizas cada par de jeans diferentes y los presentas??

Afortunadamente, TopShop tiene un gran plan. Con un dial de filtro grande y grueso que flota con la página, puede modificar y cambiar constantemente el estilo, el color, el ajuste y el precio de sus productos.

Topshop 2

Aún más genial, cada producto cambia a una imagen del modelo que los usa cuando pasa el mouse por encima. Fomenta la interacción y ofrece a los clientes una mejor visión de los artículos..

11. Protesta

La protesta podría tener la navegación más grande y gorda de la web.

PAGS

Es claro, sucinto y ordenado. También reduce la posibilidad de que el cliente se vaya. El color azul mantiene la atención del cliente justo donde lo quiere..

Protest también utiliza un montón de pequeñas animaciones en su sitio. Cada uno se dispara cuando te desplazas sobre él. Conserva la atención del cliente, fomenta la interacción y hace que todo el sitio se sienta dinámico.

12. Nueva imagen

New Look obtiene un lugar en la lista por su cesta innovadora. Se encuentra en su barra de navegación en todo momento con un indicador en negrita para recordarle que está allí.

New Look 2

Cuando haces clic en él, no te arrastra a una página diferente. En cambio, obtienes un panel deslizante que se mueve desde un lado para mostrarte lo que hay en tu bolso. Significa que los clientes nunca se pierden, y pueden pagar fácilmente cuando lo deseen..

Nuevo estilo

13. Lápiz, por 53

Si va a vender un lápiz óptico a casi $ 60, ¡realmente tiene que venderlo! Afortunadamente, ‘Pencil’, a los 53 años hace un excelente trabajo, utilizando una serie de trucos de diseño UX.

Utilizan una página de desplazamiento de paralaje larga para explicar todas las características y mostrarle exactamente lo que puede hacer con ella..

lápiz 2

También aprovechan las excelentes críticas para explicar por qué son mucho mejores que las otras opciones disponibles. Usar una cita de “Wired” es un truco brillante para darle credibilidad al producto y describir su beneficio.

Lápiz

14. Farmdrop

En nuestro último artículo sobre diseño de experiencia de usuario, explicamos lo importante que es empatizar con su público objetivo y conectarse con ellos. Farmdrop hace esto poniendo su declaración de misión al frente y al centro.

granja

Están “hartos y cansados ​​de ver comida procedente de kilómetros de distancia”. Eso es algo con lo que la mayoría de los clientes pueden participar. Antes de que intenten venderte algo, se conectan contigo y te dan una razón para comprar.

15. Sid Mashburn

Solo otro gran menú desplegable, completo con pequeños iconos. Es un truco simple que nos ayuda a darle sentido a un menú extenso. Además, le da al sitio un poco más de personalidad..

íconos

16. Relojes lentos

Este es un reloj con solo una mano. Es un concepto bastante único, por lo que requiere algo de explicación. Slow Watches hace esto realmente bien con un video explicativo en pantalla completa.

relojes lentos

Además de explicar el concepto, también hablan sobre su filosofía detrás de la creación (ideal para conectarse con el cliente), y usan bellas imágenes que resaltan y apuntan a su audiencia ideal.

17. Firebox

Cuando sus artículos no encajen en las categorías normales, ¡sea creativo! Firebox se especializa en regalos inusuales y artículos irreverentes. Su lista de los 50 mejores es la manera perfecta de explorar sus productos más populares..

imágenes

El diseño de la caja es ideal para navegar rápidamente por los productos, y muchas de las imágenes son dinámicas, se mueven e interactúan con el cliente..

Como se especializan en regalos, también tienen un “buscador de regalos” en su barra de navegación, una forma fantástica de reducir las opciones.

18. Lazy Oaf

Las compras en línea a menudo se sienten bastante similares, y muchos perderán el viejo proceso de hojear una revista o catálogo.

Lazy Oaf trae esto de vuelta con su genial sección de “lookbooks”. En lugar de colocar la ropa de una en una, muestran las prendas en varias combinaciones a la vez. Después de todo, así es como solían verse en un catálogo.

holgazán perezoso

Haga clic en las imágenes y obtendrá un cuadro de “compra rápida” para elegir cada uno de los tres elementos que se muestran. Es una forma más tradicional e inmersiva de comprar.

Qué no hacer!

No nos gusta romper otros sitios web en pedazos, pero hay algunos grandes nombres que lo hacen todo mal … Aquí hay uno o dos de los peores delincuentes.

1. Casa de Fraser

Son uno de los grandes almacenes más grandes del mundo, pero cometen un gran error tan pronto como carga su sitio web..

Inmediatamente, aparece una ventana emergente de página completa que le pide que se suscriba a su boletín..

Hourse de Fraser

A pesar de que son una gran tienda de renombre, es una táctica muy agresiva que desanimará a la mayoría de los compradores. Recuerde, esta es la primera impresión. Es mucho mejor crear un viaje de usuario que eduque e inspire a su visitante antes de solicitar una dirección de correo electrónico.

No solo eso, sino que no existe un incentivo real para suscribirse a su boletín. Un descuento del código de cupón sería una gran opción aquí, y podría ayudar a los clientes a perdonar la ventana emergente invasiva.

2. Wal Mart

Wal Mart tiene un desafío difícil. Venden casi todo, así que, ¿cómo se clasifica y simplifica? Bueno, no estoy seguro … pero no así …

Wall Mart

Desafortunadamente, esto es solo un desorden de categorías que es casi imposible encontrar lo que estás buscando.

Simplemente hay demasiada información pasando aquí. Cuando presenta a sus usuarios demasiadas opciones, a menudo simplemente entran en pánico y se van.

3. Ray-Ban

Esta es una opción ligeramente mala, porque la mayoría del sitio web de Ray-Ban es muy fácil de usar. De hecho, tiene un montón de características geniales.

Sin embargo, hacen algo que hacen muchos sitios de comercio electrónico que realmente molesta a los clientes. Esta:

Ray Ban

Probablemente hayas visto una página como esta cientos de veces. No parece tan malo, pero en realidad crea una barrera más para la venta..

Si es un cliente que regresa, ahora está ocupado preguntándose qué contraseña creó. Si no puede recordarlo, tendrá que pasar por todo el proceso de “contraseña olvidada”. Podrías perder a ese cliente en cualquier momento …

Si es un cliente nuevo, hay un pago de invitado, claro, pero todo lo que ha hecho es darles otro botón para hacer clic. Otra oportunidad de hacer clic.

En este punto, su cliente está completamente desconectado de su carrito y del proceso de compra. No lo alargues, solo cierra la venta!

El gran diseño UX tiene que ver con los pequeños ajustes que facilitan las cosas para sus clientes. Estos 18 sitios web lo hacen perfectamente.

¿Qué características utilizará en su propio sitio web??

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