\n El comercio electr\u00f3nico ha visto establecer algunas tendencias importantes de dise\u00f1o de UI y UX este a\u00f1o. Estas tendencias se preocupan por crear una experiencia de usuario perfecta y aumentar la participaci\u00f3n, el tr\u00e1fico, las conversiones, las ventas y, como resultado, atraer clientes potenciales de alta calidad.\n<\/p>\n
\n Estas tendencias llegaron para quedarse, y seguirlas es esencial si desea que su negocio de comercio electr\u00f3nico siga siendo competitivo.\n<\/p>\n
\n Echemos un vistazo m\u00e1s de cerca a estas tendencias y analicemos algunos ejemplos de marcas de comercio electr\u00f3nico.\n<\/p>\n
\n 1 Una llamada al minimalismo
\n<\/h5>\n
\n Una tendencia que cobr\u00f3 impulso este a\u00f1o muestra la creciente tendencia a hacer que los sitios web sean m\u00e1s minimalistas.\n<\/p>\n
\n \u00bfPor qu\u00e9 minimalismo?\n<\/p>\n
\n Esta tendencia en el dise\u00f1o de UI y UX es la reacci\u00f3n al dise\u00f1o complejo y ‘relleno'. Y, dado que existe una tendencia creciente a simplificar la interfaz de usuario, el minimalismo ofrece todo para lograrlo.\n<\/p>\n
\n Echemos un vistazo al ejemplo de un sitio web con sede en Dinamarca de Iskos, el fabricante de muebles:\n<\/p>\n
\n A primera vista, ya puedes ver los principales atributos del dise\u00f1o web minimalista, a saber:\n<\/p>\n
- \n
- Espacio negativo: espacio en blanco o fondo de la p\u00e1gina de inicio\n <\/li>\n
- Textura plana: todas las im\u00e1genes y elementos de la interfaz de usuario no utilizan 3D u otras t\u00e9cnicas para destacar porque ya lo hacen gracias al espacio negativo.\n <\/li>\n
- Im\u00e1genes contrastantes (duras): en lugar de los colores brillantes del fondo y los elementos de la interfaz de usuario, el dise\u00f1o minimalista utiliza im\u00e1genes para resaltar los elementos esenciales (en este caso, el fabricante muestra sus productos).\n <\/li>\n
- Tipograf\u00eda minimalista: este sitio web es un gran ejemplo de dise\u00f1o minimalista, ya que utiliza un tama\u00f1o de fuente decente y un color de fuente tranquilo pero contrastante.\n <\/li>\n<\/ul>\n
\n Tambi\u00e9n puede notar un esquema de color limitado en general. Este enfoque crea una excelente interfaz de usuario, ya que atrae la atenci\u00f3n de un usuario directamente al punto.\n<\/p>\n
\n El sitio web est\u00e1 dividido en secciones utilizando solo un t\u00edtulo simple e im\u00e1genes del producto.\n<\/p>\n
\n Un elemento de interfaz de usuario que contrasta en este sitio web es una ventana de men\u00fa emergente en la esquina de la pantalla:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971020218.webp\")
<\/a>![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839713995bc.webp\")
<\/a><\/p>\n\n No es necesario agregar m\u00e1s secciones a este men\u00fa, ya que todas est\u00e1n en la p\u00e1gina de inicio, por lo que este men\u00fa sirve como una fuente adicional de informaci\u00f3n para el usuario, que desea interactuar m\u00e1s con la marca.\n<\/p>\n
\n Dichos dise\u00f1os, con una navegaci\u00f3n simple y el producto como punto focal principal, son perfectos para lograr la excelencia en el dise\u00f1o de UI\/UX.\n<\/p>\n
\n 2 Hacer \u00e9nfasis en la marca
\n<\/h5>\n\n Otra tendencia en el dise\u00f1o de UI y UX se trata de fortalecer la conexi\u00f3n entre la experiencia del usuario y la marca.\n<\/p>\n
\n La experiencia del usuario se define por qu\u00e9 tan cerca el usuario puede acercarse a la marca, y esto se convirti\u00f3 en el punto en el que los dise\u00f1adores de UI y UX deben enfocarse. Adem\u00e1s, un dise\u00f1o centrado en la marca hace que cada paso de la experiencia del usuario se centre en presentarle la marca a este usuario.\n<\/p>\n
\n Un gran ejemplo de hacer \u00e9nfasis en la marca en el dise\u00f1o de UI y UX es Unsubscribe, marca de comercio electr\u00f3nico de productos para el cuidado del cabello.\n<\/p>\n
\n Su sitio web es una obra maestra que combina la experiencia del usuario y la marca en cada paso del camino. Al navegar por este sitio web, un usuario se encontrar\u00e1 con diferentes elementos, lo que ayuda a lograr una interacci\u00f3n completa con una marca:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839716c52bd.webp\")
<\/a>![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971a248cc.webp\")
<\/a><\/p>\n\n Adem\u00e1s de ver la palabra ‘cancelar suscripci\u00f3n' en sus esl\u00f3ganes, que corresponde al nombre de la marca, tambi\u00e9n hacen de su objetivo un punto central del sitio web, que es ayudar a las personas activas a cuidar mejor su cabello:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971d7a536.webp\")
<\/a><\/p>\n\n Y, por supuesto, el sitio web est\u00e1 hecho con las mejores pr\u00e1cticas minimalistas, lo que ayuda a crear una interfaz de usuario simple pero vers\u00e1til y una experiencia de usuario positiva en general.\n<\/p>\n
\n 3 Volvi\u00e9ndose m\u00e1s audaz
\n<\/h5>\n\n Este a\u00f1o, los dise\u00f1adores han observado una tendencia creciente de fuentes m\u00e1s audaces pero m\u00e1s simples. Esta tendencia coincide con la corriente del minimalismo, mencionada anteriormente.\n<\/p>\n
\n En el comercio electr\u00f3nico, las fuentes en negrita se utilizan para centrar la atenci\u00f3n de un usuario en un mensaje que generalmente se coloca en el medio de la p\u00e1gina. Aqu\u00ed hay un ejemplo de Limnia, una marca de comercio electr\u00f3nico que vende joyer\u00eda fina:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839720e3448.webp\")
<\/a><\/p>\n\n Aunque la web utiliza un v\u00eddeo de una modelo mostrando el producto de fondo, no nos llama la atenci\u00f3n este, sino el mensaje colocado en el centro de la p\u00e1gina en negrita.\n<\/p>\n
\n Entre las fuentes m\u00e1s utilizadas, los dise\u00f1adores de UI y UX prefieren Helvetica, Sans y Univers. Sin embargo, no puede elegir aleatoriamente la fuente para el dise\u00f1o de UI\/UX. Esta elecci\u00f3n depende de varios factores diferentes, a saber:\n<\/p>\n
- \n
- Nivel de atrevimiento en contraste con el resto del dise\u00f1o.\n <\/li>\n
- Tama\u00f1o de la fuente y c\u00f3mo se percibe en contraste con el resto del dise\u00f1o.\n <\/li>\n
- Tipo, nivel de negrita, tama\u00f1o y color de la fuente en relaci\u00f3n con la est\u00e9tica de su marca.\n <\/li>\n<\/ul>\n
\n Todos estos factores influyen en c\u00f3mo un usuario percibe e interact\u00faa con su marca, por lo que la elecci\u00f3n de las fuentes debe contribuir a la consistencia del dise\u00f1o de UI y UX.\n<\/p>\n
\n 4 Adaptaci\u00f3n para dispositivos m\u00f3viles
\n<\/h5>\n\n Mencionamos en la introducci\u00f3n de este art\u00edculo que m\u00e1s de la mitad de sus clientes prefieren comprar a trav\u00e9s de dispositivos m\u00f3viles. Y dado que las marcas de comercio electr\u00f3nico operan predominantemente en l\u00ednea (solo algunas de ellas tienen salas de exhibici\u00f3n f\u00edsicas), es obligatorio invertir en dise\u00f1o de UX m\u00f3vil.\n<\/p>\n
\n Seg\u00fan la Interaction Design Foundation, la experiencia del usuario m\u00f3vil tiene como objetivo crear experiencias m\u00f3viles positivas a trav\u00e9s de sitios web, aplicaciones y otros servicios utilizados en dispositivos m\u00f3viles. Los objetivos clave de la UX m\u00f3vil son la eficiencia y la visibilidad.\n<\/p>\n
\n Para una marca de comercio electr\u00f3nico, UX m\u00f3vil significa, ante todo, la accesibilidad completa a todos los elementos del sitio web y la simplicidad de la interfaz.\n<\/p>\n
\n Un gran ejemplo de c\u00f3mo adaptar un sitio web tanto para computadoras de escritorio como para dispositivos m\u00f3viles es Boria, una marca francesa de comercio electr\u00f3nico que vende decoraci\u00f3n para el hogar:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839723c6abc.webp\")
<\/a><\/p>\n\n La versi\u00f3n m\u00f3vil del sitio web de Boria tiene menos elementos de dise\u00f1o. Sin embargo, conserva todas las secciones clave necesarias para que los clientes compren a trav\u00e9s de dispositivos m\u00f3viles:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839726c8a52.webp\")
<\/a><\/p>\n\n Invertir en UX m\u00f3vil no es solo un requisito previo para una excelente experiencia de usuario. Tambi\u00e9n es importante para el ranking SEO de su marca de comercio electr\u00f3nico.\n<\/p>\n
\n Google clasifica muy alto a las marcas con sitios web de alta calidad adaptados a dispositivos m\u00f3viles. Pero hay varias reglas que hacen que un sitio m\u00f3vil sea excelente. Es por eso que, en 2015, Google public\u00f3 consejos de dise\u00f1o de UX m\u00f3vil para desarrolladores, y actualiz\u00f3 regularmente estos consejos a medida que surg\u00edan nuevas tendencias. Entre estos consejos puedes encontrar:\n<\/p>\n
- \n
- \n Investigue antes de crear un prototipo<\/strong>. Dado que los dise\u00f1adores de UX est\u00e1n sesgados, Google aconseja no entrar en la creaci\u00f3n de prototipos de inmediato, sino investigar primero a la audiencia objetivo mediante an\u00e1lisis heur\u00edsticos y pruebas AB.\n <\/li>\n
- \n Trabaja en objetivos t\u00e1ctiles<\/strong>. Incluso si la interfaz de un sitio web m\u00f3vil es f\u00e1cil de usar y el sitio web se carga r\u00e1pidamente en los dispositivos m\u00f3viles, los usuarios abandonar\u00e1n el sitio web si tiene elementos que no responden a su toque. Esto significa que estos elementos tienen objetivos t\u00e1ctiles que son demasiado peque\u00f1os, y Google recomienda hacerlos de al menos 7-10 mm de ancho.\n <\/li>\n
- \n Menos desorden<\/strong>. Sin\u00f3nimo de la tendencia minimalista en el dise\u00f1o de UI y UX, este consejo indica que Google clasifica los sitios web m\u00f3viles abarrotados m\u00e1s abajo, ya que es dif\u00edcil interactuar con ellos.\n <\/li>\n<\/ul>\n
\n En otras palabras, las marcas de comercio electr\u00f3nico deben prestar la misma atenci\u00f3n a la funcionalidad de sus sitios web tanto en computadoras de escritorio como en dispositivos m\u00f3viles para brindar una experiencia de marca completa.\n<\/p>\n
\n 5 Centr\u00e1ndose en la velocidad
\n<\/h5>\n\n Al comienzo del art\u00edculo, tambi\u00e9n mencionamos que los clientes toman la decisi\u00f3n de interactuar con su marca en los primeros 0.05 segundos de visitar su sitio web.\n<\/p>\n
\n Para las marcas de comercio electr\u00f3nico, la baja velocidad de carga de la p\u00e1gina puede ser perjudicial. Dado que es una industria muy competitiva, no hay problema para que un usuario busque otra marca de comercio electr\u00f3nico con un producto similar pero un sitio web de carga r\u00e1pida.\n<\/p>\n
\n El rendimiento tambi\u00e9n es parte de la experiencia del usuario y dice mucho sobre c\u00f3mo valora a sus visitantes como una marca de comercio electr\u00f3nico.\n<\/p>\n
\n Entonces, \u00bfcu\u00e1l es el objetivo de un dise\u00f1ador de UX cuando se trata de una velocidad de carga de p\u00e1gina perfecta?\n<\/p>\n
\n Seg\u00fan Unbounce, una p\u00e1gina de destino tarda en promedio 15,3 segundos en cargarse. Esto, sin embargo, ya es muy largo si su objetivo es crear una experiencia de usuario positiva.\n<\/p>\n
\n Por lo tanto, Unbounce afirma que la mejor velocidad de carga de la p\u00e1gina es de 2,4 a 3,21 segundos, pero los sitios que cargan en cinco segundos tambi\u00e9n obtienen sesiones promedio m\u00e1s largas (70% m\u00e1s seg\u00fan la fuente).\n<\/p>\n
\n Por lo tanto, el objetivo final para una experiencia de usuario positiva es lograr una velocidad de carga de la p\u00e1gina de 3 segundos en promedio.\n<\/p>\n
\n 6 Creando experiencia en el vestidor
\n<\/h5>\n\n Ahora, pasemos de la parte t\u00e9cnica de nuestra discusi\u00f3n a las tendencias en los servicios que las marcas de comercio electr\u00f3nico pueden ofrecer para mejorar la experiencia del usuario y la interacci\u00f3n del usuario con la marca.\n<\/p>\n
\n Una de las tendencias crecientes en el dise\u00f1o de UI y UX este a\u00f1o ha sido la introducci\u00f3n de vestidores virtuales.\n<\/p>\n
\n La experiencia de vestuario en l\u00ednea surgi\u00f3 como respuesta a las crecientes demandas de los consumidores de interactuar m\u00e1s con los productos y probarlos. Todos sabemos que estamos comprando cerdo en un golpe si no podemos tocar f\u00edsicamente el producto. Esto es especialmente cierto cuando se trata de marcas de comercio electr\u00f3nico que venden ropa o accesorios.\n<\/p>\n
\n Una de esas marcas de comercio electr\u00f3nico es Warby Parker, una empresa en l\u00ednea que vende anteojos, respondi\u00f3 a este problema lanzando una aplicaci\u00f3n m\u00f3vil, donde los usuarios pueden probar diferentes formas de anteojos simplemente tomando una foto:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972a0f7bf.webp\")
<\/a><\/p>\n\n Esta aplicaci\u00f3n ha sido muy \u00fatil para los clientes, que quieren comprar anteojos pero dudan sobre qu\u00e9 forma de anteojos se adaptar\u00e1 a su rostro.\n<\/p>\n
\n Esta tendencia es la fusi\u00f3n entre UX y AR (realidad aumentada), ya que los clientes interact\u00faan con objetos de la vida real, que son mejorados por modalidades sensoriales generadas por computadora, para recibir una experiencia de usuario completa con la marca.\n<\/p>\n
\n 7 Contar una historia a trav\u00e9s de im\u00e1genes
\n<\/h5>\n\n Otra tendencia que apunta a mejorar la experiencia del usuario a trav\u00e9s de los contenidos del sitio web es la narraci\u00f3n visual.\n<\/p>\n
\n El papel de la narraci\u00f3n en el marketing es enorme. La investigaci\u00f3n muestra que los mensajes de marketing entregados como historias son hasta 22 veces m\u00e1s atractivos y memorables. La narraci\u00f3n significa m\u00e1s valor, por lo que migr\u00f3 con \u00e9xito al dise\u00f1o de UX y se convirti\u00f3 en narraci\u00f3n visual.\n<\/p>\n
\n Para una marca de comercio electr\u00f3nico, la narraci\u00f3n visual es esencial para la experiencia del usuario, ya que acerca a los clientes a la marca y les ofrece una participaci\u00f3n exclusiva en la definici\u00f3n de esta.\n<\/p>\n
\n Una de las marcas que combina con \u00e9xito la narraci\u00f3n visual y la experiencia positiva del usuario es Always, la marca de higiene personal de P&G:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972d84b88.webp\")
<\/a><\/p>\n\n Mediante la narraci\u00f3n visual, Always cuenta c\u00f3mo la marca participa en una serie de causas sociales, revelando las historias, c\u00f3mo las personas interact\u00faan con la marca y su producto a trav\u00e9s de su punto de vista personal:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839730a17d5.webp\")
<\/a><\/p>\n\n Sin embargo, existe un problema con la ubicaci\u00f3n del contenido cuando se trata de la narraci\u00f3n visual en el dise\u00f1o de UX. Dependiendo del idioma que hable el p\u00fablico objetivo y en qu\u00e9 direcci\u00f3n lean (de izquierda a derecha o de derecha a izquierda), el contenido se ubicar\u00e1 de manera diferente.\n<\/p>\n
\n Por ejemplo, para la audiencia que lee de izquierda a derecha, el contenido debe colocarse en el medio o a la izquierda y con alrededor de 75 caracteres por l\u00ednea:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973383a31.webp\")
<\/a><\/p>\n\n El storytelling visual es una metodolog\u00eda subyacente en el dise\u00f1o de UX, que es esencial para las marcas de comercio electr\u00f3nico, ya que basan toda su experiencia con el cliente en experiencias en l\u00ednea.\n<\/p>\n
\n 8 Hacer el proceso de pago sin esfuerzo
\n<\/h5>\n\n Otra tendencia de los clientes exigentes es facilitar el proceso de pago. El pago sin esfuerzo tambi\u00e9n es uno de los mayores desaf\u00edos en el dise\u00f1o de UX.\n<\/p>\n
\n Seg\u00fan las estad\u00edsticas recientes de InvestCRO, la tasa promedio de abandono del carrito de la compra es del 65,23 %, a lo que contribuyen considerablemente las siguientes razones:\n<\/p>\n
- \n
- 14% – sin opci\u00f3n de pago de invitado\n <\/li>\n
- 11%: proceso de pago complejo\n <\/li>\n
- 7%: no hay suficientes opciones de pago\n <\/li>\n<\/ul>\n
\n Dado que completar los pagos y el pago pertenecen a la experiencia del usuario, el dise\u00f1ador de UX es quien deber\u00eda preocuparse por hacerlo m\u00e1s f\u00e1cil.\n<\/p>\n
\n Si el sitio web tiene problemas con una alta tasa de abandono del carrito de compras, es tarea de un dise\u00f1ador de UX:\n<\/p>\n
- \n
- Descubra por qu\u00e9 sucede esto con la ayuda de las pruebas de usabilidad (a trav\u00e9s de entrevistas con los usuarios y los datos recibidos del servicio de atenci\u00f3n al cliente).\n <\/li>\n
- Mapee el viaje del cliente teniendo en cuenta los datos recopilados de las pruebas de usabilidad.\n <\/li>\n
- Realice pruebas AB para ver c\u00f3mo funciona la soluci\u00f3n.\n <\/li>\n<\/ul>\n
\n Dado que el \u00e9xito de una marca de comercio electr\u00f3nico depende en gran medida de la experiencia del cliente con el pago, hacer que este proceso sea m\u00e1s f\u00e1cil con el dise\u00f1o de UX es una contribuci\u00f3n importante para una experiencia de usuario positiva.\n<\/p>\n
\n 9 Centrarse en ofertas personalizadas
\n<\/h5>\n\n La personalizaci\u00f3n es la tendencia que ha llegado para quedarse. Y UX puede llevarlo a otro nivel dise\u00f1ando ofertas personalizadas.\n<\/p>\n
\n Muchas marcas de comercio electr\u00f3nico ya est\u00e1n haciendo un gran uso de \u00e9l.\n<\/p>\n
\n Por ejemplo, Thinx, una marca de comercio electr\u00f3nico que vende ropa interior y productos de higiene personal, ha dise\u00f1ado una encuesta para ayudar a elegir productos que se adapten a las necesidades de un usuario:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397366f145.webp\")
<\/a><\/p>\n\n Siguiendo los resultados de la encuesta, la marca crea ofertas personalizadas, lo cual es perfecto para clientes primerizos.\n<\/p>\n
\n Otra empresa, Tobi, una marca de comercio electr\u00f3nico que vende ropa, se ha centrado en la inclusi\u00f3n al dise\u00f1ar una ventana emergente para ayudar a las personas con discapacidades a ajustar el sitio web para que la interfaz de usuario les resulte m\u00e1s c\u00f3moda de usar:\n<\/p>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397393475a.webp\")
<\/a><\/p>\n\n Estas contribuciones de dise\u00f1o de UI y UX tienen el objetivo de personalizar la experiencia de cada usuario con la marca, reconociendo las caracter\u00edsticas y comportamientos \u00fanicos de cada usuario.\n<\/p>\n
\n 10 Conversando con el cliente
\n<\/h5>\n\n En el comercio electr\u00f3nico, los chatbots juegan un papel importante al brindar atenci\u00f3n al cliente. Tambi\u00e9n son parte de la experiencia del usuario, sin importar si utilizan un dise\u00f1o de interfaz de usuario gr\u00e1fico o un dise\u00f1o de interfaz de usuario de voz.\n<\/p>\n
\n El dise\u00f1o de la interfaz de usuario ofrece una gran versatilidad a las marcas de comercio electr\u00f3nico cuando se trata de crear chatbots. Por ejemplo, MeUndies, una marca de comercio electr\u00f3nico que vende ropa interior, utiliza el chatbot de su sitio web para responder a las preguntas m\u00e1s buscadas:\n<\/p>\n
- \n Trabaja en objetivos t\u00e1ctiles<\/strong>. Incluso si la interfaz de un sitio web m\u00f3vil es f\u00e1cil de usar y el sitio web se carga r\u00e1pidamente en los dispositivos m\u00f3viles, los usuarios abandonar\u00e1n el sitio web si tiene elementos que no responden a su toque. Esto significa que estos elementos tienen objetivos t\u00e1ctiles que son demasiado peque\u00f1os, y Google recomienda hacerlos de al menos 7-10 mm de ancho.\n <\/li>\n
- \n Investigue antes de crear un prototipo<\/strong>. Dado que los dise\u00f1adores de UX est\u00e1n sesgados, Google aconseja no entrar en la creaci\u00f3n de prototipos de inmediato, sino investigar primero a la audiencia objetivo mediante an\u00e1lisis heur\u00edsticos y pruebas AB.\n <\/li>\n