¿Cómo realizar una auditoría de usabilidad de la tienda en línea usted mismo?

En este artículo, encontrará una lista de verificación de usabilidad del sitio web detallada con ejemplos, que lo ayudarán a identificar problemas y le darán una idea de lo que debe hacerse para mejorar la experiencia del usuario. Solo tómalo y úsalo.

Para facilitar la consulta de esta lista, recomendamos descargarla e imprimirla.

Elementos clave de una tienda online

El diseño de la página principal debe transmitir la temática del sitio, es decir, el usuario debe comprender de qué se trata el sitio (una tienda en línea de electrónica, joyas, artículos para niños, etc.), y también mostrar una propuesta impecable para comprador potencial.
Tiene de 1 a 3 segundos para interesar e involucrar al usuario en el sitio.
El diseño de la tienda online debe ser único y memorable.
La información más importante se encuentra en la primera pantalla.
El usuario puede probar todas las funciones básicas sin registrarse.

Ejemplo: La página principal de la tienda en línea de joyería enfatiza el contenido y transmite la idea de la marca sobre la disponibilidad y el prestigio de las joyas.

Hay sugerencias y ayuda para nuevos usuarios.
Sin información innecesaria y elementos de distracción, o se pueden cerrar en cualquier momento (chat en línea, ventanas emergentes, etc.)
No es necesario ingresar los mismos datos dos veces.
El contenido del sitio está bien estructurado y no crea “ruido” visual.
Encabezados claros y comprensibles, diseño lacónico.
Todo el contenido del sitio se divide en principal y adicional.
El catálogo de productos está bien estructurado e intuitivo para que el usuario pueda encontrar fácilmente el producto de su interés.
En la parte inferior derecha de las páginas largas hay un botón para volver rápidamente al inicio y un menú fijo para que el usuario no tenga que desplazarse durante mucho tiempo.

Navegación de tienda en línea

El usuario de la tienda online sabe en qué sección se encuentra.
La estructura de las categorías del catálogo está bien pensada.
Los puntos clave de la navegación del sitio (catálogo, carrito de la compra, etc.) están disponibles para el usuario en cualquier momento, en cualquier página de la tienda online.
El diseño más simple y comprensible de los puntos críticos de la ruta del usuario (registro, compra, suscripción, etc.).
El usuario tiene acceso a información importante desde cualquier página de la tienda online.
El sitio no contiene páginas vacías o con errores.
Es decir, un usuario de cualquier página puede seguir un enlace a otra página. Por ejemplo, los artículos de blogs están vinculados entre sí, en las descripciones de servicios y bienes hay un CTA para realizar pedidos, en la página 404 hay enlaces a las secciones principales del sitio o de búsqueda, etc.
El sitio no bloquea el botón de retroceso del navegador.

Menú principal

El menú principal de la tienda online debe estar en el mismo lugar, a excepción del checkout, y el usuario puede acceder a él desde cualquier página del sitio.
Todos los elementos del menú están ordenados por prioridad e importancia, del más importante al secundario (de izquierda a derecha, de arriba a abajo).
El menú principal no debe contener más de dos subcategorías, mientras que los elementos con subcategorías deben ser diferentes de otros elementos del menú.

Estructura de la página del sitio

El encabezado de la tienda en línea debe ser conciso y contener información y enlaces importantes (logotipo, nombre, contactos, menú).

Ejemplo: En la cabecera de la tienda online de artículos infantiles hay una navegación intuitiva con iconos claros que se realizan en el mismo estilo con el tema de la tienda, un logo con el nombre “Cuidamos a mamá y bebé”, una barra de enlaces. El usuario comprende desde los primeros segundos que este es un sitio para madres e hijos.

Cada bloque de la página se puede capturar con un vistazo.
Si se puede hacer clic en un elemento, debe ser visualmente claro y obvio, y cuando se pasa el cursor del ratón sobre él, debe modificarse.
El diseño de iconos y elementos gráficos debe reflejar su significado y propósito y debe ser intuitivo.

Búsqueda y resultados del sitio

La barra de búsqueda, su tamaño y diseño deben ser apropiados para fines comerciales.
La barra de búsqueda se muestra de forma destacada y se puede acceder a ella en cualquier pantalla.
Solo una cadena de búsqueda para toda la página.
Hay autocompletado y sugerencias relevantes.
Las sugerencias en la barra de búsqueda se muestran por prioridades y parámetros de selección (categoría-subcategoría-productos / acumulación de contenido).
La búsqueda maneja errores y consultas falsas, busca sinónimos.
Si la consulta se ingresa desde un diseño diferente, la cadena de búsqueda reemplazará automáticamente la consulta de búsqueda.

Así, por ejemplo, después de optimizar la búsqueda de una tienda online, logramos incrementar la tasa de transacciones en un 74,64%.

Resultados de la búsqueda

El resultado de la búsqueda coincide con la consulta de búsqueda.
Es posible filtrar productos según ciertos criterios.
Si no se encontró nada para la consulta de búsqueda (la búsqueda no arrojó ningún resultado), aparece una pista sobre cómo editar la consulta de búsqueda o se ofrece un producto alternativo.
Muestra el número de productos encontrados por la consulta de búsqueda.
La búsqueda de bienes se produce en todo el sitio en su conjunto, si no hay forma de buscar secciones.

Texto y su diseño en el sitio.

El texto lleva solo información útil para el usuario, sin “agua”. La información más importante viene primero, luego el resto.
El texto está bien estructurado y de manera competente. Se utilizan títulos, subtítulos, párrafos, citas, diferentes tipos de listas.
Los textos son fáciles de entender y leer, con una longitud máxima de 75 caracteres.

Párrafos

Tamaño en puntos para el texto del cuerpo destinado a la lectura: idealmente 16 pixel.
La alineación del texto se realiza a la izquierda.
La longitud de la cadena no debe superar los 80 caracteres. Si la línea es demasiado corta o demasiado larga, afecta negativamente la percepción del texto.

Encabezados

Los títulos dejan claro al usuario “lo que sigue”, y mejor “lo que se dice allí”.
Los títulos tienen un formato más parecido al de su “propio” párrafo.
El tamaño en puntos de los títulos es 1,5 veces mayor que el tamaño del subtítulo, el tamaño del subtítulo, a su vez, es 1,5 veces mayor que el tamaño del texto.

Fuente, tamaño y color del texto

Las mayúsculas se utilizan al mínimo. El uso de mayúsculas debe estar justificado ya que dificulta la lectura y la comprensión del texto.
Las fuentes deben ser las mismas para todas las páginas del sitio web de la tienda online. Deben ser legibles y contrastante.
El color del cuerpo del texto y los enlaces deben ser diferentes entre sí y contrastar.
Debe justificarse el uso de texto de diferentes colores.
Todos los números largos se dividen con un espacio para facilitar su lectura (1 724 837, por ejemplo).

Estilo de enlaces y botones

De acuerdo con el texto del enlace, el usuario debe comprender a dónde lo llevará.
El color y el estilo de los enlaces deben ser visualmente distintos del resto del texto (subrayados o resaltados).
Si el usuario ha seguido el enlace, cambia de color.
Todos los enlaces que no recargan la página están marcados con una línea de puntos.
La longitud del texto del enlace es lo suficientemente larga para que el usuario pueda hacer clic en ellos de forma cómoda y sencilla.
Los enlaces para descargar archivos deben ser visualmente diferentes de los que conducen a otras páginas del sitio.

¿Qué hacer con botones y enlaces?

Los botones se utilizan para realizar determinadas acciones.
Los botones del sitio parecen botones: formulario, respuesta del cursor y desplazamiento.
Solo un botón de llamada a la acción para toda la página del sitio. En este caso, el botón con la acción objetivo se distingue visualmente en relación al resto de botones.

Anti ejemplo:

¿Detectó rápidamente el botón principal de llamada a la acción? La página está sobrecargada de información, muchos botones brillantes que confunden.

Y en una tienda de cosméticos online, también se implementan varios botones de llamada a la acción, pero su diseño está hecho de tal manera que el acento visual se dirige a una sola llamada a la acción principal: comprar.

Solo el botón “Comprar” está resaltado visualmente

Una llamada a la acción o texto en un botón es un verbo en infinitivo. Por ejemplo, busque, compre, suscríbase, etc.
El botón reacciona al cursor, por ejemplo, cambia de color para inducir al usuario a hacer clic.
Si la acción no está disponible, los botones y enlaces no desaparecen de la pantalla, sino que se desactivan y bloquean.

Formularios

Diseño de formularios en general

Los formularios deben ser lo más simples y concisos posible. Si se trata de un formulario de pedido, registro o cualquier formulario de destino, solo contiene los campos obligatorios.
Si este campo es opcional, debe estar motivado y justificado.
Si es un formulario grande con una gran cantidad de campos, entonces debe estar estructurado, los campos se agrupan según su significado y hay subtítulos para cada grupo.
El cursor se mueve automáticamente al primer campo cuando se abre el formulario.
El campo activo se resalta visualmente.
La información sobre herramientas permanece en su lugar mientras mueve el enfoque al campo.
Hay instrucciones paso a paso y una línea de progreso si el formulario consta de varios pasos. Se debe informar al usuario en qué paso se encuentra ahora y cuántos pasos le quedan.
Todos los campos completados se guardan hasta el final del proceso para que el usuario no tenga que volver a ingresar los datos en caso de que accidentalmente abandone la página del formulario.
El usuario puede mover secuencialmente el cursor de un campo a otro usando la tecla de tabulación.

Elementos de formulario: campos y sus valores

El nombre del botón para completar del formulario debe corresponder con el propósito de completar, por ejemplo, “registrarse” o “proceder al pago”, etc.)
Hay sugerencias, ejemplos o aclaraciones para los campos, cuya cumplimentación puede generar dudas en el usuario.
Todos los campos obligatorios están marcados o resaltados y visualmente difieren de los opcionales.
Los nombres de los campos deben ser coherentes con el significado y el propósito de los campos.
Algunos campos se completan de forma predeterminada con los valores más probables. Por ejemplo, para reservar, hay 2 adultos en el campo de búsqueda de forma predeterminada.
Los subtítulos de los campos deben ser coherentes.

Validación, errores y sugerencias

Debería ser posible retroceder un paso para que el usuario pueda editar los datos ya ingresados.
La verificación de la validez de la información debe ocurrir inmediatamente después de cambiar el foco y sin volver a cargar la página del formulario.
Si el usuario cometió un error, el mensaje al respecto debe estar junto al campo donde se cometió el error, y el mensaje debe ser lo más informativo posible, indicando cuál es exactamente el problema.
Si el formulario completado no pasó la validación, los campos aún deben permanecer llenos.

Catálogo y sus funciones

Filtros de búsqueda

El usuario puede anular el valor seleccionado para listas y botones de opción.
La actualización de los campos dependientes debe ser sincrónica.
Es obvio en qué dirección, por qué campo particular y atributo se aplicó la clasificación en este caso.
Intuitivamente cómo puede cambiar la dirección u ordenar el campo.
El botón de aplicación del filtro siempre está visible para el usuario.
Hay “migas de pan” mediante los cuales el usuario puede volver al tema filtrado después de abrir la ficha del producto.
Todos los parámetros del filtro se muestran como una lista y el usuario puede restablecer cualquier parámetro.
Si el filtro contiene parámetros complejos, debe haber una pista que explique este parámetro para que el usuario comprenda cómo y por qué usarlo.

Envío de una lista filtrada

El usuario tiene la capacidad de enviar un enlace del catálogo filtrado a otro usuario.

En este caso, otro usuario, al hacer clic en este enlace, debe acceder a la selección resultante.

Por tanto, es importante cumplir con los siguientes requisitos:

Cuando se aplican parámetros de filtrado, la URL cambia dinámicamente.
La lista filtrada de productos debe abrirse sin redireccionamientos, parpadeos de filtro, transiciones adicionales, incluso al abrir un enlace en modo incógnito.
Se guardan los cambios en cada campo del filtro.
Todos los campos del filtro afectan correctamente a la lista filtrada tanto por separado para cada campo como para la combinación de campos.
Después de restablecer el filtro, se reconstruye la lista de productos y se restablecen tanto los parámetros de filtrado como la URL.

Agregar un producto al carrito desde el catálogo

El usuario puede agregar cualquier producto al carrito.

Ejemplo: en la tienda en línea de una joyería, el usuario puede agregar inmediatamente el producto al carrito desde la página de emisión o enviarlo a la Lista de deseos.

Hay una confirmación visual de agregar un artículo del catálogo al carrito.

Número de unidades de producto:

Cuando un cliente agrega un artículo al carrito desde la página del catálogo, se debe contar el número seleccionado de unidades.
Es deseable mostrar información sobre la cantidad disponible de mercancías en el almacén y esta información se mostró en el campo.
Si el usuario agrega o elimina artículos en la cesta, la cantidad de productos se actualiza automáticamente.

Mini cesta visible:

Al eliminar posiciones, agregar nuevas o cambiar la cantidad de productos ya agregados, el recálculo de la cantidad y la cantidad total de productos en el bloque de la cesta se produce automáticamente sin recargar la página.

Tarjeta de producto

El título contiene el nombre del producto.
Toda la información sobre el producto es relevante y se muestra correctamente.
Hay un enlace para volver al catálogo o “migas de pan”.

Agregar artículo al carrito:

El usuario puede agregar un producto al carrito, en la cantidad deseada.
Hay una confirmación visual de agregar un artículo al carrito.

Salida de bloques adicionales:

Si se proporcionan bloques de venta adicional y venta cruzada, como “También compran con este producto”, “Recomendado”, “Ha visto”, se muestran los productos correctos en ellos.

Por ejemplo, en la tienda de flores en la página principal, la venta cruzada se implementa en forma de venta de paquetes promocionales: un ramo y un regalo. Y en la ficha de producto hay varias opciones para herramientas de venta cruzada y venta adicional, desde dulces y pasteles hasta productos similares y vistos.

Siempre que se proporcione toda la información sobre el producto (características, reseñas, equipamiento, etc.), los enlaces al mismo se muestran en la página actual, pero no desvían al usuario de la compra.
Existen varias fotos del producto de alta calidad, con posibilidad de ampliar para que el usuario pueda ver el producto en detalle antes de comprar.
Si el producto tiene parámetros adicionales, el usuario puede seleccionar uno de ellos directamente en la ficha del producto.

Cesta

En el carrito de compras de una tienda en línea, el montante del pedido debe calcularse automáticamente, tomando en cuenta todos los descuentos, promociones, cupones, costos de envío, comisiones y más.
Si ingresa datos incorrectos, aparecerá una advertencia, un mensaje de error y restablecer los valores.
Si el usuario ingresó un número o cambió el valor en el campo “Cantidad”, tanto el costo de los productos como el monto total del pedido se recalculan inmediatamente. Si se ingresó cero, entonces se borra la posición. En este caso, es conveniente confirmar la acción para excluir la entrada accidental.
Hay un botón o enlace para volver al catálogo.
Cuando hace clic en el botón de destino, pasa al pago o al siguiente paso de pedido.
En caso de que haya una pequeña cesta, todos los datos se sincronizan con la cesta principal.
El botón de pedido debe estar disponible desde la primera pantalla.
En la versión móvil la cesta siempre está disponible en el menú fijo inferior.
Intuitivamente claro dónde y cómo agregar un código de promoción.
Para la versión adaptativa del carrito de la compra existe toda la información y los bloques como para el escritorio.

Revisa

El diseño de la página de pago es lacónico y tiene los siguientes elementos: un logotipo que conduce a la página principal, un encabezado y un pie de página simples. Esto se hace para que el usuario tenga menos puntos de salida de caja.
En la caja, el costo de los bienes, la entrega, etc. se muestra por separado.
El importe de la entrega se vuelve a calcular automáticamente según el método seleccionado, mientras que el importe total del pedido también cambia.
Si las direcciones de entrega se guardan para los usuarios registrados, entonces el usuario debería poder seleccionar la dirección guardada o agregar una nueva. Si el usuario seleccionó una nueva dirección, los campos de dirección se borran automáticamente.
El usuario recibe información actualizada sobre los métodos de entrega y las opciones de pago.
Para los usuarios registrados, todos los datos de pago se guardan automáticamente y se utilizan como autocompletar.
Después de realizar un pedido, se envía automáticamente una carta con información sobre el pedido y un enlace al historial de pedidos a la dirección de correo electrónico especificada.
Hay un registro automático de nuevos usuarios al realizar un pedido.
En caso de que el usuario abandonara la caja sin completar el pedido, la mercancía permanece en el carrito.
Se lleva al usuario a una página con información sobre el pedido e instrucciones con acciones adicionales después del pago del pedido.
Si se produce un error de pago, se le pregunta al usuario cómo volver a intentarlo.
El usuario puede volver a editar el pedido.
La cesta se vacía automáticamente después de completar el pago.

Gracias por la orden

Después de completar el pedido, el usuario es redirigido a una página con información sobre el pedido, instrucciones para acciones posteriores, una indicación de cómo se confirmará y aclarará el pedido, etc.
Hay un enlace para recibir e imprimir un recibo, si está disponible.

Área personal

Al registrarse, todos los datos del usuario se guardan y se utilizan en pedidos posteriores (nombre, métodos de entrega, métodos de pago, etc.)
Los estados de los pedidos se controlan en tiempo real.
Es posible pagar el pedido desde su cuenta personal.
El usuario puede repetir el pedido.
En la cuenta personal, el usuario puede cambiar la contraseña, darse de baja de la lista de correo, crear una “Lista de deseos”, salir de la cuenta, etc.

Una auditoría de usabilidad de la tienda en línea es el primer paso a tomar en caso de problemas de interacción del usuario con el sitio o una tasa de conversión baja. En el artículo, formas efectivas de verificar la usabilidad de un sitio, compartimos herramientas web para identificar fallas en la interfaz.

Versión adaptable (responsiva) de la tienda online.

Hay una lista de requisitos de información sobre la velocidad de la página de Google para la optimización de la tienda en línea.

Siguiendo los requisitos, el sitio debe estar en la zona verde. Por lo tanto, la auditoría de usabilidad ayuda a encontrar y eliminar errores en la interfaz, a optimizar el funcionamiento del sitio web tanto como sea posible, a influir en los KPI clave, es decir, es el primer paso para aumentar sus ingresos.

Página de inicio de la tienda online

Para la versión móvil del sitio, vale la pena desactivar todos los bloques innecesarios para optimizar la velocidad de carga de la página.
Todos los banners de marketing deben estar optimizados para dispositivos móviles y todo el texto debe ser texto legible. Para hacer esto, vale la pena preparar un par de pancartas de diferentes tamaños para 1366-1920 y 320.
Para proyectos dominados por usuarios de dispositivos móviles, necesitas pasar del diseño móvil primero (320-768-1024-10280-1366-1920).

Sitio de navegación

La navegación es un elemento de paso que debe estar siempre en el mismo lugar para que el visitante pueda encontrarlo fácilmente.
La navegación en el directorio debe ser similar a la versión de escritorio.
El usuario debe ser intuitivo sobre cómo acceder a otras páginas y abrir una cuenta personal.
Los niveles de directorio deben mostrarse en páginas de menú separadas, no expandirse como una lista.

Línea de búsqueda

La cadena de búsqueda tiene el tamaño y la prioridad suficientes según los objetivos comerciales.
La búsqueda debe estar disponible en cualquier pantalla si se trata de un hipermercado o una tienda online para la que es una herramienta prioritaria.
Las sugerencias avanzadas funcionan en el campo de búsqueda, mientras que las sugerencias se muestran por prioridad (categoría-subcategoría-productos / acumulación de contenido).
La búsqueda maneja errores, transliteración, búsqueda de sinónimos y más.

Un ejemplo de la implementación de una cadena de búsqueda en una ventana emergente en una tienda online, que está dominada por el tráfico móvil.

Teclado

La altura del panel del teclado se tiene en cuenta para todos los estados de entrada y llenado de campo.
El teclado no debe superponerse al campo de entrada.

Catálogo de productos

El usuario puede obtener toda la información necesaria sobre el producto en la ficha del producto.
Falta el “hover” (al pasar el ratón sobre un elemento de interfaz, el modifica su presencia visual).
El filtro es un elemento de paso y se destaca entre otros elementos, o hay un botón para subir.
El usuario puede seleccionar varios filtros a la vez sin volver a cargar la página.

Tarjeta de producto

Hay una galería de productos y cada foto se puede acercar con gestos.
El usuario tiene acceso rápido a la acción objetivo clave.
Todos los bloques y toda la información son los mismos que en el escritorio.

Utilice esta lista de verificación para auditar la usabilidad de su tienda en línea.

Después de seguir el camino del usuario, identificando y eliminando los errores de las páginas clave del sitio, no solo se pueden optimizar conversiones y ventas, sino también dar un salto cualitativo y alcanzar un nuevo nivel en los negocios.

Auditoría de usabilidad de la tienda en línea: lista de verificación de más de 170 puntos para analizar la interfaz