{"id":6961,"date":"2018-06-22T00:00:00","date_gmt":"2018-06-22T00:00:00","guid":{"rendered":"https:\/\/oct8ne.com\/usabilidad-e-commerce-un-imprescindible-apto-para-todos-los-bolsillos\/"},"modified":"2021-08-04T08:58:07","modified_gmt":"2021-08-04T08:58:07","slug":"usabilidad-ecommerce","status":"publish","type":"post","link":"https:\/\/oct8ne.com\/es\/blog\/usabilidad-ecommerce","title":{"rendered":"Usabilidad e-commerce: Un imprescindible apto para todos los bolsillos"},"content":{"rendered":"<p>Un aspecto fundamental para triunfar en el canal online es garantizar<strong> una buena experiencia al usuario<\/strong>: uso de la tienda, atenci\u00f3n pre y postventa, productos, etc. Por eso, hoy hablaremos de uno de los aspectos que, definitivamente, contribuye a garantizar esa experiencia: <strong>la usabilidad.<\/strong> Algo que todav\u00eda se pasa por alto en muchas ocasiones, bien por desconocimiento o bien por el falso mito de que \u201ces algo caro que no me puedo permitir\u201d.<\/p>\n<p><!--more--><\/p>\n<h2><span style=\"color: #333333;\"><strong>\u00bfTodo el mundo se puede permitir trabajar la usabilidad?\u00a0<\/strong><\/span><\/h2>\n<p>Partimos de la base de que para poner en marcha un e-commerce de calidad se deber\u00eda contar con un presupuesto m\u00ednimo; incluso con recursos humanos, internos o externos, que sean capaces de hacer un buen trabajo en las distintas \u00e1reas que van intervenir en el proyecto.<\/p>\n<p>Dicho esto y por experiencia propia \u2014ya que\u00a0hemos trabajado en proyectos muy dispares por presupuesto, tipo de negocio, recursos humanos o necesidades\u2014 podr\u00eda decir que<strong> cualquier negocio puede permitirse trabajar la usabilidad<\/strong>, aunque sea de una forma modesta. Si se sigue un proceso ordenado, hay tareas tan b\u00e1sicas que un eCommerce Manager con conocimientos m\u00ednimos podr\u00eda abordarlas sin demasiada dificultad.<\/p>\n<h2><strong>\u00bfPor qu\u00e9 hay que trabajar la usabilidad?<\/strong><\/h2>\n<p>La usabilidad va mucho m\u00e1s all\u00e1 de crear un prototipo o un wireframe. Antes de llegar al resultado final, se realiza un trabajo previo bastante amplio que te permite obtener informaci\u00f3n muy valiosa. Tanto, que incluso te servir\u00e1 para mejorar \u2014o ahorrar\u2014 en otras \u00e1reas como dise\u00f1o, marketing, comunicaci\u00f3n o tecnolog\u00eda.<\/p>\n<p>Algunas ventajas de trabajar la usabilidad:<\/p>\n<ul>\n<li>Mejora la percepci\u00f3n de la marca o producto<\/li>\n<li>Mejora el uso de la tienda<\/li>\n<li>Favorece la efectividad (mayor conversi\u00f3n, menos tasa de rebote, etc)<\/li>\n<li>Permite mejorar la eficiencia en acciones de marketing (SEO, automation, captaci\u00f3n, etc)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Desde <a href=\"https:\/\/www.ecommbits.com\/es\/?utm_medium=post&amp;utm_source=blog&amp;utm_campaign=oct8ne\" target=\"_blank\" rel=\"noopener noreferrer\">Ecommbits<\/a> aplicamos una l\u00f3gica de trabajo que simplemente consiste en llevar a cabo un <strong>proceso ordenado de definici\u00f3n<\/strong> que puedes ser m\u00e1s o menos ambicioso en funci\u00f3n de los objetivos y del presupuesto de cada uno. \u00a1Comenzamos!<\/p>\n<ol>\n<li>\n<h3><span style=\"color: #ff6600;\"><strong>Brainstorming \/ Briefing<\/strong><\/span><\/h3>\n<\/li>\n<\/ol>\n<p>El inicio de cualquier proyecto. Es importante pensar en <strong>todos los procesos que intervienen en tu negocio<\/strong> y que van a tener un reflejo directo en el e-commerce. Para ello es necesario involucrar a distintos perfiles que se encarguen de gestionar cada \u00e1rea, ya que cada uno de ellos tendr\u00e1 necesidades espec\u00edficas internas o sugerencias para mejorar el contacto con el usuario o cliente.<\/p>\n<p>Las principales \u00e1reas a tener en cuenta depender\u00e1n de tu negocio y es probable que una sola persona tenga varios roles:<\/p>\n<ul>\n<li>Negocio<\/li>\n<li>Producto<\/li>\n<li>Marca<\/li>\n<li>Usabilidad<\/li>\n<li>Dise\u00f1o<\/li>\n<li>Tecnolog\u00eda<\/li>\n<li>Operaciones<\/li>\n<li>Finanzas<\/li>\n<li>Marketing<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<ol start=\"2\">\n<li>\n<h3><span style=\"color: #ff6600;\"><strong>An\u00e1lisis: M\u00e9tricas y usuario<\/strong><\/span><\/h3>\n<\/li>\n<\/ol>\n<p>Para m\u00ed, esta deber\u00eda ser la base de cualquier proyecto de usabilidad, ya que <strong>es la \u00fanica forma de obtener datos objetivos <\/strong>que nos ayuden a tomar decisiones. El resultado de esta fase de trabajo te permitir\u00e1 tener una visi\u00f3n global de puntos fuertes y d\u00e9biles, sobre todo si el e-commerce ya tiene un m\u00ednimo de hist\u00f3rico y lo que se plantea es una mejora al completo o de aspectos concretos.<\/p>\n<h4><strong>An\u00e1lisis de m\u00e9tricas<\/strong><\/h4>\n<p>Seguro que, como m\u00ednimo, usas Google Analytics u otra herramienta de anal\u00edtica similar. El primer paso es comenzar <strong>analizando un periodo de tiempo representativo<\/strong>\u00a0como los \u00faltimos seis meses o el \u00faltimo a\u00f1o y otros datos m\u00e1s concretos que pr\u00e1cticamente cualquier persona con un m\u00ednimo de experiencia puede extraer sin mucha dificultad.<\/p>\n<ul>\n<li>KPI\u00b4s tr\u00e1fico global<\/li>\n<li>KPI\u00b4s relacionadas con conversi\u00f3n<\/li>\n<li>Comportamiento por dispositivo<\/li>\n<li>Comportamiento por tipo de contenido o landing de destino<\/li>\n<li>Evaluaci\u00f3n de procesos transaccionales<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>Se puede profundizar mucho m\u00e1s, pero con estos b\u00e1sicos podemos tener una aproximaci\u00f3n de los puntos fuertes, d\u00e9biles y de c\u00f3mo se relacionan con objetivos de negocio tales como conversi\u00f3n, ticket, recurrencia, venta cruzada, etc. Algo que ser\u00e1 muy \u00fatil para empezar a detectar posibles mejoras.<\/p>\n<h4><strong>Comportamiento de usuario<\/strong><\/h4>\n<p>Los datos anteriores nos dan pistas, pero <strong>para afinar las mejoras de usabilidad es importante conocer al usuario<\/strong> de una forma m\u00e1s real. El tipo de estudios es variad\u00edsimo a nivel metodolog\u00eda, objetivos, resultados y presupuesto necesario para llevarlos a cabo (focus group, eye tracking, encuestas, mapas de calor&#8230;).<\/p>\n<p>Comohablamos de<strong> proyectos de usabilidad asequibles,<\/strong>\u00a0os cuento un par de estudios que llevamos a cabo con <a href=\"https:\/\/www.hotjar.com\/\" target=\"_blank\" rel=\"noopener\">Hotjar<\/a>. Una herramienta f\u00e1cil de implementar, configurar y, sobre todo, de coste bastante reducido: por menos de 100\u20ac puedes explotar gran parte de la funcionalidad y te permite recolectar una muestra lo suficientemente representativa para llevar a cabo este tipo de an\u00e1lisis.<\/p>\n<ul>\n<li><strong>Mapas de calor:<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\">Nos ayudan a comprender c\u00f3mo interact\u00faa el usuario con nuestra tienda en funci\u00f3n del dispositivo por el que navega y, adem\u00e1s, podemos analizarlos desde distintos comportamientos:<strong> movimiento, scroll y clic<\/strong>, aunque normalmente los que m\u00e1s se utilizan son los dos \u00faltimos.<\/p>\n<p style=\"padding-left: 30px;\">Gracias a los mapas de calor podemos ver r\u00e1pidamente cosas como las funcionalidades que m\u00e1s se usan, contenidos que nos interesan a nivel negocio pero que pasan totalmente desapercibidos para el usuario, p\u00e1ginas en las que perdemos al cliente, etc. En resumen, nuevas pistas que nos van a permitir redefinir puntos como la arquitectura de contenido o rutas de interacci\u00f3n que ayudar\u00e1n al usuario cuando navegue en nuestra tienda.<\/p>\n<p><a href=\"https:\/\/oct8ne.com\/wp-content\/uploads\/2018\/06\/1806_02_ECB_Oct8ne_UX_Heatmaps.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5562 size-full\" title=\"mapa calor usabilidad ecommerce \" src=\"https:\/\/oct8ne.com\/wp-content\/uploads\/2018\/06\/1806_02_ECB_Oct8ne_UX_Heatmaps.jpg\" alt=\"\" width=\"933\" height=\"395\"><\/a><\/p>\n<p style=\"text-align: right; font-size: 11px;\"><em>Imagen: Mapas de Calor Scroll vs Clic<\/em><\/p>\n<ul>\n<li><strong>Grabaciones:<\/strong><\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\">A veces los mapas de calor no nos dan toda la informaci\u00f3n que necesitamos para profundizar en posibles problemas de usabilidad (son est\u00e1ticos y los datos son globales), pero gracias a las grabaciones, <strong>podemos ver paso a paso c\u00f3mo navegan los usuarios<\/strong> a lo largo de una sesi\u00f3n completa (d\u00f3nde hacen clic, por d\u00f3nde se mueven, qu\u00e9 p\u00e1ginas visitan, d\u00f3nde abandonan, etc.) pudiendo afinar mucho m\u00e1s en la identificaci\u00f3n de problemas de usabilidad e incluso motivos de abandono.<\/p>\n<p style=\"padding-left: 30px;\">Requiere bastantes horas de an\u00e1lisis ya que en un d\u00eda se pueden generar miles de grabaciones, pero merece la pena porque nos permiten ver casi en directo c\u00f3mo se comportan nuestros usuarios.<\/p>\n<h4><strong>An\u00e1lisis de competencia \/ mercado<\/strong><\/h4>\n<p>Por \u00faltimo y aunque con todo lo anterior ya tenemos mucha informaci\u00f3n para sacar conclusiones, nunca est\u00e1 dem\u00e1s echar un ojo a la competencia. Si empiezas de cero no vas a tener un hist\u00f3rico que analizar, por lo que el analizar lo que ya hacen otros, muchos de ellos pioneros o referentes en eCommerce, puede ser una buena referencia para coger ideas.<\/p>\n<h3 style=\"padding-left: 30px;\"><span style=\"color: #ff6600;\"><strong>3. Documento funcional<\/strong><\/span><\/h3>\n<p>Ahora que ya tenemos toda la informaci\u00f3n sobre la mesa \u2014necesidades de negocio y datos de an\u00e1lisis reales\u2014 toca poner orden, ampliar o reducir lo que compartimos en el brainstorming inicial y proceder cerrar el documento funcional definitivo que va a recoger aspectos como:<\/p>\n<ul>\n<li>Funcionalidades Back con impacto en Front<\/li>\n<li>Funcionalidades Front<\/li>\n<li>Especificaciones Producto (novedades, mensajes, etiquetas, etc)<\/li>\n<li>Especificaciones Marketing (SEO, automation, espacios promo, etc)<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3 style=\"padding-left: 30px;\"><span style=\"color: #ff6600;\"><strong>4.\u00a0<\/strong><strong>Arquitectura de contenido y diagramas de flujo<\/strong><\/span><\/h3>\n<p>Antes de comenzar con la \u00faltima etapa de este proceso ya solo nos queda por conectar todo aquello que va a tener presencia en la tienda.<\/p>\n<ul>\n<li><strong>Arquitectura de contenido. <\/strong>Se trata de la estructura de contenido tanto global como la estructura para cada \u00e1rea de forma espec\u00edfica (cat\u00e1logo, procesos, informaci\u00f3n, \u00e1rea privada, etc)<\/li>\n<li><strong>Flujos de Interacci\u00f3n. <\/strong>Cada parte de la arquitectura va tener uno o varios nexos de uni\u00f3n con otras, por lo que es importante definir c\u00f3mo queremos que interact\u00faen. Esta ser\u00e1 la \u00fanica forma de guiar al usuario o, dicho de otra forma, de \u201cpon\u00e9rselo f\u00e1cil\u201d dependiendo de sus necesidades en cada momento (compra, consulta, revisi\u00f3n de pedidos, contacto, etc)<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oct8ne.com\/wp-content\/uploads\/2018\/06\/1806_04_ECB_Oct8ne_UX_Flow-chart.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5565 size-full\" title=\"usabilidad ecommerce \" src=\"https:\/\/oct8ne.com\/wp-content\/uploads\/2018\/06\/1806_04_ECB_Oct8ne_UX_Flow-chart.jpg\" alt=\"\" width=\"933\" height=\"395\"><\/a><\/p>\n<p style=\"text-align: right;\"><em>Imagen: Ejemplo de flujos de interacci\u00f3n cat\u00e1logo<\/em><\/p>\n<h3 style=\"padding-left: 30px;\"><span style=\"color: #ff6600;\"><strong>5. Prototipado de pantallas (Wireframes)<\/strong><\/span><\/h3>\n<p>Un prototipo o wireframe no deja de ser un boceto que ha de representar la estructura final de cada elemento o p\u00e1gina y las funcionalidades que contiene. Podr\u00eda decir que de todas las tareas que hemos ido viendo a lo largo del art\u00edculo, esta es la que m\u00e1s tiempo y mayor grado de conocimiento requiere.<\/p>\n<p><strong>Destacar tambi\u00e9n que este es el punto donde el proyecto se puede desviar a nivel costes<\/strong>. \u00bfLa raz\u00f3n? El tiempo de dedicaci\u00f3n y el detalle al que se quiera llegar. Como es l\u00f3gico, a m\u00e1s prototipos m\u00e1s tiempo y por lo tanto, mayor presupuesto. Si no vas a poder prototipar todas las p\u00e1ginas en una primera fase, no hay problema, pero haz un peque\u00f1o ejercicio antes.<\/p>\n<ul>\n<li style=\"margin: 10px 0px 0px 0px;\"><strong>Selecci\u00f3n de Pantallas y Elementos Prioridad 1: <\/strong>Deber\u00edan coincidir con p\u00e1ginas o funcionalidades clave en las que has detectado carencias y que normalmente afectan al proceso de compra (buscador, filtros, p\u00e1gina de producto, checkout, etc)<\/li>\n<li style=\"margin: 10px 0px 0px 0px;\"><strong>Selecci\u00f3n de Pantallas y Elementos Prioridad 2: <\/strong>Son secundarias, pero recomendamos tenerlas en cuenta en alg\u00fan momento, ya que forman parte del servicio que ofrecemos y por lo tanto afectan a la experiencia del usuario (\u00e1rea de usuario, CMS de ayuda, programa de fidelizaci\u00f3n, etc.)<\/li>\n<li style=\"margin: 10px 0px 0px 0px;\"><strong>Resoluciones: <\/strong>En muchas ocasiones solo se crean prototipos para desktop y mobile, aunque en nuestra opini\u00f3n es un error. Un eCommerce deber\u00eda ser usable siempre y adaptarse a todos los dispositivos (a no ser que solo tengas APP), por lo que al menos deber\u00edas tener en cuenta las siguientes resoluciones:<\/li>\n<\/ul>\n<ul style=\"margin: 10px 0px 20px 120px;\">\n<li type=\"circle\">Desktop: Resoluci\u00f3n 1920px<\/li>\n<li type=\"circle\">Smartphone: Resoluci\u00f3n 320px<\/li>\n<li type=\"circle\">Tablet: Resoluci\u00f3n 770px. Nuestra recomendaci\u00f3n es prototipar al menos aquellos elementos que puedan sufrir cambios importantes entre las resoluciones de desktop y mobile<\/li>\n<\/ul>\n<p><a href=\"https:\/\/oct8ne.com\/wp-content\/uploads\/2018\/06\/1806_03_ECB_Oct8ne_UX_Wireframing.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-5564 size-full\" title=\"usabilidad ecommerce \" src=\"https:\/\/oct8ne.com\/wp-content\/uploads\/2018\/06\/1806_03_ECB_Oct8ne_UX_Wireframing.jpg\" alt=\"\" width=\"933\" height=\"395\"><\/a><\/p>\n<p style=\"text-align: right; font-size: 11px;\"><em>Imagen: Ejemplo de wireframes clientes ECOMMBITS versi\u00f3n Desktop<\/em><\/p>\n<p>&nbsp;<\/p>\n<p>Y hasta aqu\u00ed todo lo que tiene que ver propiamente con lo que podr\u00edamos considerar como parte de la usabilidad de un proyecto eCommerce, pero \u00bfy ahora qu\u00e9? Pues bien, llega el momento de la verdad, llega el momento de darle vida a tus prototipos, de impactar al usuario con un aspecto visual que consiga engancharle y, sobre todo, llega el momento de hacer que todo funcione como has definido.<\/p>\n<p>Estoy seguro que si has seguido este proceso, te vas a dar cuenta de c\u00f3mo el resto de trabajos que quedan por hacer, van a ser mucho m\u00e1s \u00e1giles y, sobre todo, vas a ahorrar mucho tiempo y dinero en cambios, reuniones o malos entendidos entre departamentos.<\/p>\n<p>Por \u00faltimo, y si has llegado hasta el final del art\u00edculo: \u00bfqu\u00e9 piensas ahora de la usabilidad?, \u00bfcrees que tu tambi\u00e9n podr\u00edas integrarla en tu negocio?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un aspecto fundamental para triunfar en el canal online es garantizar una buena experiencia al usuario: uso de la tienda, atenci\u00f3n pre y postventa, productos, etc. Por eso, hoy hablaremos de uno de los aspectos que, definitivamente, contribuye a garantizar esa experiencia: la usabilidad. Algo que todav\u00eda se pasa por alto en muchas ocasiones, bien [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6962,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1000],"tags":[873,874,875],"class_list":["post-6961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-e-commerce","tag-usabilidad-ecommerce","tag-user-experience","tag-ux"],"_links":{"self":[{"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/posts\/6961","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/comments?post=6961"}],"version-history":[{"count":3,"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/posts\/6961\/revisions"}],"predecessor-version":[{"id":15418,"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/posts\/6961\/revisions\/15418"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/media\/6962"}],"wp:attachment":[{"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/media?parent=6961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/categories?post=6961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oct8ne.com\/es\/wp-json\/wp\/v2\/tags?post=6961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}