Este artículo originalmente lo cree con el simple objetivo de tener las 10 reglas literales. Pero vos ahora estas viendo una nueva versión en donde ademas de las 10 leyes de Nielsen, comento como aplicar técnicas de Analytics y SEO para ayudarte a llevarlo a la practica.

Las leyes de Nielsen aplicadas al Ecommerce:

También conocidas como Las leyes de Nielsen o Las Heurísticas. Jakob Nielsen resumió en 10 conceptos todo lo necesario para resolver el diseño de un sistema visual y poder lograr una identidad corporativa coherente como así también el diseño de una aplicación, Sitio Web, Ecommerce o tienda en linea

El sistema visual es la base de la comunicación, esa comunicación que intenta que para el caso de un Ecommerce encuentre rápidamente lo que necesita comprar. Hablando en términos de Analytics el tiempo en el sitio, debería ser el menos posible para lograr una conversión, esto nos confirma que el usuario entendió el sistema de diseño aplicado

Estas reglas son las claves para poder facilitar el uso de cualquier persona, no solo dentro de los sitios web, sino en cualquier sistema de información.

Jakob Nielsen

“el gurú de la usabilidad” es una de las personas más respetadas en el ámbito mundial sobre usabilidad en la web, un referente de Braintive a la hora de diseñar nuestros proyectos.

Jakob estudió 249 problemas de usabilidad y a partir de ellos diseñó lo que denominó las “reglas generales” para identificar los posibles problemas de usabilidad.

La visibilidad del estado del sistema

El sistema siempre debería mantener informados a los usuarios de lo que está ocurriendo, a través de retroalimentación apropiada dentro de un tiempo razonable.

Un «sistema» en el contexto de diseño se refiere a una estructura organizada y coordinada de elementos, componentes o procesos interconectados que trabajan juntos para lograr un objetivo o resolver un problema específico. En diseño, esta idea se utiliza para abordar proyectos o problemas complejos desde una perspectiva más holística y estratégica.

Es necesario, poder medir como son las interacciones de los usuarios con estos mensajes. A menudo nos encontramos en Web y aplicaciones modal o pop up ¿Que es un modal o pop up? se refiere a cualquier ventana que se abre de forma automática, es decir, sin que el usuario interactúe haciendo clic en la interfaz, se muestra por encima del contenido general de la pantalla.

Podemos implementar eventos con Google Analytics por ejemplo, para poder medir el pop up, y confirmar que el usuario recibió el mensaje o completo el formulario dentro del PopUP como un objetivo de conversión o «Lead»

Podemos diseñar los eventos que nos van a a permitir «MEDIR» si el Mensaje fue recibido satisfactoriamente:

1. pop up open
2. pop up close
3. pop up click OK
4. pop up click cancel

por ejemplo los breadcrumbs o «migas de pan», son muy útiles para referencia al usuario «en que pagina esta» El breadcrumbs ademas de pensar en UX, es un excelente recursos SEO para lograr un correcto interlinkeo entre categorías de productos

El sistema debe tener una coincidencia con el mundo real

El sistema debería hablar el lenguaje de los usuarios mediante palabras, frases y conceptos que sean familiares al usuario, más que con términos relacionados con el sistema. Seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.

literalmente hablando de «palabras», en Proyectos SEO nos encontramos con catalogadores «bloqueados por el negocio» usando terminología técnica interna de la empresa o jergas para definir nombres de productos y categorías. O lo que es peor usando la terminología también incorrecta de la competencia justificando que «ellos lo hacen así».

El punto es, necesitamos validar ¿como buscan los usuarios?, entender: ¿cuales son los términos más adecuados? y comunes para el usuario cuando piensan en ese producto o servicio. Además de ayudar al usuario, estaremos mejorando el posicionamiento SEO de nuestro sitio web o Ecommerce, y optimizando el rendimiento de las campañas pagas cuando depende de Palabras claves.

Las fuentes de trafico como Sistema

Cuando hablamos de optimización de campañas publicitarias, es importante consideres que las palabras claves positivas y negativas que activan tu anuncio, también deben estar dentro de la pagina destino o Landing Page. No se trata unicamente considerarlas en Google ads.

Continuando con el Concepto de sistema, Pensemos en SEO y campañas pagas como un sistema de trafico que funcionan de forma dependiente, resolviendo espacios donde el otro no puede

En general, es importante tener en cuenta que el SEO y las campañas de pagas son estrategias complementarias y que pueden trabajar juntas para mejorar el rendimiento del sitio web. Es posible que sea necesario probar diferentes enfoques y ajustar la estrategia a medida que se obtienen resultados para determinar cuál es la mejor opción para cada negocio.

Como pueden concluir en este punto, hay muchas disciplinas convergiendo en el desarrollo y diseño de un Ecommerce. En cuanto mas multidisciplinario sean los actores dentro del proyecto, más eficiente será el negocio

Control y libertad del usuario con respecto al diseño

hay ocasiones en que los usuarios elegirán las funciones del sistema por error y necesitarán una salida de emergencia, claramente marcada para dejar el estado no deseado al que accedieron, sin tener que pasar por una serie de pasos. Se deben apoyar las funciones de deshacer y rehacer.

Esta claro que los botones son claves, el «Agregar al carrito» o «quitar del carrito», «Ver mas», etc. Pero en las tiendas online, el momento mas tedioso para el usuario es el proceso de pago o Checkout. Hay versiones diseñadas en una sola pagina o «one page checkout», por suerte cada vez más utilizadas. Al usuario le queda claro todo el proceso en una pantalla:

El mas común y menos eficientes del proceso de pago o Checkout en múltiples pasos. El punto es que quizás no es de lo mas amigables pero eso No suele ser el problema, creo en mi experiencia trabajando con Ecommerce, el problema principal es que tienen un aviso «paso 1 de 3», pero al avanzar en el proceso de pago hay SUB pasos y sub pasos y «nunca se termina» y el Titulo de página dice «paso 2 de 3», y llenaste 4 formularios… 🤦🏻‍♂️

con Google Analytics podemos medir los pasos del proceso de pago, de esta manera identificar puntos de dolor, considerar cuales son los pasos más conflictivos para el usuario. Planificar un rediseño o simplificación del formulario o del proceso de pago.

Medir el proceso de pago es fundamental para trabajar en reducir la frustración del usuario, y bajar las tasas de salida o abandono del proceso de pago y Aumentar las tasas de conversion de nuestro Ecommerce

• Ser coherentes en mostrar «en que paso estamos» y cuantos faltan
• énfasis en los botones de navegación entre pasos
• diferenciar botones de navegación de botones o elementos de selección dentro del formulario
• mostrarle al Usuario, «donde esta», resaltando (como en la foto anterior) en que campo esta escribiendo
• Cuando hay un Error al enviar. Destacar amigablemente los campos conflictivos
• Cuando sea posible, pre-validar los campos a medida que los completa, para no esperar al único botón «Pagar».

Otros casos que veo muy a menudo como consultor, Son los formularios para solicitar crédito Online o formularios para adquirir un seguro para el auto. Suele ser de muchos pasos. Son procesos de validación complejos, pero todos estos procesos se pueden validar y mejorar utilizando un análisis de embudos de conversion, es decir las herramientas son las mismas. Solo hay que saber como adaptarlas al negocio.

En esencia el Remarketing consiste en definir y agrupar Segmentos de Audiencias que representan objetivos comerciales para nuestro Ecommerce o proyecto Digital. La importancia de Google universal analytics (y Facebook Analytics respectivamente) y va más allá de poder ver la información

Audiencias para Ecommerce con Google Analytics y Google Ad Manager

La principal ventaja de GA, es la de recolectar y enviar el comportamiento del usuario a Google Search Ads 360 o Google Search Ads 360.

Para realizar performance ads, necesitamos Segmentar:

• Usuarios que compran de forma recurrente
• Usuarios interesados en Marcas o categorías
• Usuarios que abandonaron en el Proceso de Pago
• y más!

Leer más

Mantener la consistencia y estándares de la industria

los usuarios no deberían cuestionarse si acciones, situaciones o palabras diferentes significan en realidad la misma cosa; siga las convenciones establecidas.

En términos de diseño de una tienda en linea o Ecommerce, se podría resumir en «no hay que reinventar la rueda». El usuario esta familiarizado con la ubicación de ciertos elementos y funcionalidades comunes en la industria, ya que tu sitio web no es el primero que visita, seguramente será el 2do o tercero. El punto es, notar cuales son las funcionalidades más importantes, para no confundir al usuario.

La iconización es un punto fundamental, y creo todos estaremos de acuerdo en como será el icono para un carrito de compras. Y en milisegundos podemos interpretar cual es una papelera de reciclaje y un carrito

🗑 🛒

El caso de los bancos es un buen Ejemplo. Seguramente notaras que casi todos los bancos de tu país, tienen el acceso para clientes del «mismo lado» y a la misma altura de la Pagina de inicio. Igual para los Ecommerce, Todos suelen tener el resumen del carro de compras en la parte superior derecha y el menú de categorias o filtros a la izquierda.

No hay «un mejor lado de la pagina», pero si hay una costumbre en el usuario, en buscar las cosas donde presupone las va a encontrar, las expectativas del usuario estan ligadas a sus experiencias previas con productos y servicios similares al tuyo

Seguir las convenciones de la industria, no te hace menos original o mas feo. Desarrollar el sistema visual o la identidad de tu marca, es una cosa diferente a Diseñar las funcionalidades de tu ecommerce. Debes mantener una consistencia entre «TU marca» y «las funcionalidades», sin confundir al usuario.

Prevención de errores

Mucho mejor que un buen diseño de mensajes de error es realizar un diseño cuidadoso que prevenga la ocurrencia de problemas.

Los Errores son comunes y normales para cualquier sitio Web. Es importante 1ro no engañar al usuario, porque solo lo vas a confundir. 2do avisale cuando hay algún problema.

múltiples clics, esto sucede cuando el sitio demora en «reaccionar». Realizas click en un elemento, y «el sitio esta cargando», pero solo un experto lo puede notar. Esto genera múltiples clics del lado del usuario, por su ansiedad y no tener retroalimentación del sitio con un mensaje «espera un segundo, estoy cargando el siguiente contenido».

Esto afecta en Analytics dañando las metricas de tasas de clics o CR conversión rate, ya que se miden múltiples clics pero en realidad deberias contabilizar 1, los demás clicks son solo causados por la ansiedad de no entender si «¿esta cargando?»

Reconocer en lugar de recordar

 se deben hacer visibles los objetos, acciones y opciones, El usuario no tendría que recordar la información que se le da en una parte del proceso, para seguir adelante. Las instrucciones para el uso del sistema deben estar a la vista o ser fácilmente recuperables cuando sea necesario.

Los Usuarios (todos nosotros) estamos limitados en memoria y cada vez mas en nuestra atención para recordar cambios entre las pantallas o mensajes en ventanas parecidas.

Promover el reconocimiento gráfico por sobre otros recursos de diseño reduce el esfuerzo cognitivo del usuario en entender nuestro sitio web o Ecommerce, acelerando el tiempo que se demora en «aprender como funciona nuestra web»

El sistema de diseño aplicado al Ecommerce debe desarrollar una experiencia intuitiva en el usuario, asi reducimos el tiempo de navegación y su frustración de no pode avanzar en la compra

Te sugiero consigas el libro «Don’t Make Me Think» (no me hagas pensar) de Steve Krug donde se desarrolla muy bien los problemas mas comunes en diseño de interfaces, y como optimizar la experiencia del usuario.

Flexibilidad y eficiencia de uso

La presencia de aceleradores, que no son vistos por los usuarios novatos, puede ofrecer una interacción más rápida a los usuarios expertos que la que el sistema puede proveer a los usuarios de todo tipo. Se debe permitir que el sistema se adapte para usuarios frecuentes.

Los usuarios con menos experiencia (navegando o utilizando sitios como el tuyo ) deberían conseguir los mismos objetivos que los usuarios expertos.

Desarrollar Herramientas de inclusión, por ejemplo para personas con dificultad visual.

• Un control para aumentar o reducir el tamaño de la tipografía
• Un asistente de Lectura, para convertir el articulo o las descripciones de la ficha del producto en Notas de VOZ.
• La opción de ver un video del producto
• Poder ver el Producto en 3D o en Realidad aumentada para mejorar el entendimiento del tamaño del producto y sus cualidades
• Un botón para Cambiar el color de la tienda, para un mayor contraste.

Personalizar los contenidos en el Ecommerce te asegura aumentar ciertas tasas de conversion, como por ejemplo al sumar carruseles de productos con los productos que ya navego, para recordarle cuales fueron las opciones que ya considero.

guardar en favoritos o tener una lista de deseos, para que el usuario pueda considerar comprarlo mas tarde. Ademas incitamos la creación de cuentas y nuevos Leads.

Para el caso de usuarios nuevos o inexpertos. En base al aprendizaje automático de lo que otros usuarios compraron proponer productos relacionados al producto que esta viendo.

• Sugerir dentro de la ficha de un producto «otros usuarios también vieron estos productos»

• Sugerir desde el carrito de compras, productos complementarios al producto que esta por comprar con un carrusel «Otros usuario también compraron»

Es importante mejorar los tiempos de carga, los tiempos de espera son el principal bloqueador e impacta directamente con la experiencia del usuario. Tu sitio no tiene que cargar super rápido, pero no puedes dejar de considerar que el tiempo de carga de la pagina no puede ser mayor a la media del tiempo de carga de los ecommerce en tu industria

Google Analytics Es Extremadamente útil para el comercio electrónico. Permite a los responsables de la tienda Online monitorear rendimientos de ventas por productos, marcas y categorías. CTR de Banners OnPage, Promociones internas. Cupones de descuento. Análisis de productos por posición y CTR, Análisis de Cross Selling y UpSelling… entre otros

¿Cómo usar Universal Analytics para aumentar las ventas ?

Y entre sus funciones más «ocultas» esta la de Alimentar Google Ads Search, realizar Smart Bidding, y campañas con merchant Center. En definitiva si no tenemos Google Analytics Correctamente implementado y configurado, difícilmente se puedan Ejecutar campañas de Performance Ads. Cualquier intento de realizar Performance sin Vincular Google Analytics + Google Ads es pura casualidad.

Leer más

Estética y diseño minimalista

los diálogos no deben contener información que es irrelevante o poco usada. Cada unidad extra de información en un diálogo, compite con las unidades de información relevante y disminuye su visibilidad relativa.

Reducir el tamaño de los textos y el contenido visual para funcionalidades transaccionales incrementa el entendimiento para los usuario de estas funcionalidades, ademas reducir el peso del sitio mejorando el tiempo de carga y seguramente la compatibilidad entre diferentes navegador y dispositivos

ya comentamos que la velocidad de carga es primordial para cualquier negocio Online, diseño minimalista «menos es mas»

• Diseños sencillos, de alto impacto , utilizar dos o tres colores con contraste, y pocas imágenes llamativas para crear una experiencia visual impactante. 
• Contenido simplificado:  mensajes breves, capaces de atrapar la atención y transmitir los beneficios de tu servicio.
• Objetivo: en un Ecommerce, Cada botón es un micro objetivo, «VerMás», «Agregar al carrito, etc deben tener una llamada a la acción o CallToAction clara, para reducir las dudas en el usuario no tenga que pararse a pensar así, contribuir a que la tasa de conversión de cada paso del proceso de shopping.
• Espacio negativo:no desprestigies las zonas vacías en la página, hacen que la mirada del usuario se dirija automáticamente a donde más te interesa (los botones de conversion).

Ayudar a los usuarios a reconocer

diagnosticar y recuperarse de errores: los mensajes de error se deben entregar en un lenguaje claro y simple, indicando en forma precisa el problema y sugerir una solución constructiva al problema.

Algo común en Ecommerce es dar de baja Productos, por lo cual «se apagan URLs». Esto normalmente devolver un Error 404, contenido no encontrado seguro viste miles, ¿quieres ver mi Error 404? > click aquí

Los Errores en los sitios webs da para TODO un articulo que te comparto aquí

Ayuda y documentación

incluso en los casos en que el sistema pueda ser usado sin documentación, podría ser necesario ofrecer ayuda y documentación. Dicha información debería ser fácil de buscar, estar enfocada en las tareas del usuario, con una lista concreta de pasos a desarrollar y no ser demasiado extensa.

Keynote Jakob Nielsen, 25 años en Diseño

Conferencia UX en Las Vegas.

Charla TEDx Ronald Shakespear, Diseño Shakespear

¿Necesitas más info? o estas con el cerebro en modo esposa y necesitas absorber mas conocimientos del arte del diseño te comparto estos VIDEOS de charlas TED. Si sos un apasionado del diseño, no podes de dejar de ver esta charlas

Ronald Shakespear es director de «Diseño Shakespear«, hace más de cincuenta años fundó su estudio por el que pasaron alrededor de 1600 marcas.Hoy lo dirige junto a su hijo Juan. Fue profesor titular de la Cátedra de Diseño FADU/UBA y Presidente de ADG, Asociación de Diseñadores Gráficos de Buenos Aires. Autor de megaproyectos a escala urbana y pública como el Subte y la planificación visual y señalización de la Ciudad de Buenos Aires, ha brindado conferencias y workshops en treinta y nueve ciudades del mundo y su obra ha sido publicada en libros y revistas de Argentina, China, Italia, y México, entre otros. En agosto 2013 ha sido nombrado Maestro del Diseño en la Universidad de Palermo y Profesor Honorario de la Universidad de Buenos Aires. Las muestras antológicas de Diseño Shakespear han sido expuestas en los principales museos. Obtuvo el Lápiz de Plata al Diseñador del Año, el Premio Konex, el Premio Klaukol-Cayc a la Trayectoria y el Golden Brain. También el Fellow Award de la Sociedad Ambiental de Diseño Gráfico en Estados Unidos, que por primera vez se otorgó a un latinoamericano. Su último libro «Señal de Diseño, Memoria de la Práctica» ha sido re-editado por la editorial Paidós.