0/X
Crear un sitio web ya es todo un reto; mantenerlo fácil de usar es un trabajo continuo. Un solo ajuste puede impactar por completo la experiencia. Con herramientas como Plerdy UX & Usability Testing controlas cada cambio y mejoras el recorrido del usuario. Revisa nuestro Website Usability Checklist para saber si tu sitio es realmente usable. ¡230 puntos de prueba!
Las pruebas de usabilidad demuestran que el logotipo debe informar brevemente al usuario sobre el contenido y los temas del sitio web de comercio electrónico, mejorando así la experiencia del usuario.
Las pruebas de usabilidad demuestran que el logotipo debe informar brevemente al usuario sobre el contenido y los temas del sitio web de comercio electrónico, mejorando así la experiencia del usuario.
Si el sitio web incluye varios idiomas, la selección del idioma debe estar en un lugar visible (en el encabezado)
Las pruebas de usabilidad muestran que la fecha de entrega para el usuario registrado debe guardarse, por lo que no fue necesario volver a ingresarla durante la próxima compra. Esto tiene un efecto positivo en UX.
Según las pruebas de usabilidad, la estructura del sitio web (encabezado, pie de página, menú principal, etc.) debe ser la misma en todas las páginas del sitio web. Una excepción puede ser la página de la cesta y el pago.
l ingresar al sitio web, el usuario comprende la temática de un sitio web en 3 segundos: el eslogan y las imágenes en el encabezado, título de la página, etc.
Se debe poder hacer clic en el logotipo del sitio web y mostrarlo en la página principal, pero no se debe actualizar si ya está en él.
El favicon del sitio web debe coincidir con el logotipo. Un favicon memorable ayuda a encontrar rápidamente su sitio entre las muchas pestañas abiertas del navegador de acuerdo con las pruebas de usabilidad.
Los elementos del menú, los botones y los enlaces no deben utilizar términos o lenguaje poco conocidos.
El sitio web debe tener una página "Acerca de nosotros" con información detallada sobre su empresa, incluido fotos de la oficina por dentro y por fuera, el personal que trabaja con los clientes, el proceso de producción / trabajo.
Los medios (música o video) en el sitio web no deben ejecutarse sin el conocimiento del usuario. Las pruebas de usabilidad muestran que molesta al visitante y lo obliga a abandonar el sitio, lo que es una UX negativa de inmediato. Si utilizas esta técnica por cualquier motivo, asegúrate de que el botón de parada de la reproducción esté en un lugar destacado. Si el diseño de tu sitio web proporciona ventanas emergentes, también deben tener un botón de cierre visible (estaba cerca, pero no para navegar a otra página). Así, el visitante no perderá tiempo en encontrarlo. Él cerrará la pestaña con tu sitio web.
El diseño de un sitio web de comercio electrónico debe presentar un mínimo de dificultades. Se invita al visitante a ejecutar solo los pasos necesarios: a. todo lo que se puede hacer en el software se hace mediante programación (por ejemplo, se completa con la dirección de entrega, según la ubicación del usuario); B. las consultas de acción del visitante y las opciones cambian dinámicamente según los parámetros del producto, los datos del visitante, etc. por ejemplo, si el vestido solo está disponible en un color, el usuario no está obligado a elegir el color.
Cuando pasa el cursor sobre un botón o enlace inactivo, debería aparecer una breve explicación de por qué el botón / enlace está inactivo.
La funcionalidad estándar de cualquier botón es iniciar una acción, no ir a otra página a menos que el botón lo sugiera.
Se puede hacer clic en un botón, no en el texto. También puede hacer clic en un pequeño espacio cercano (pero no si hay otro botón junto a él). 
Los botones que cancelan acciones, o borran datos completados, se encuentran a una distancia suficiente de los botones Enviar o Confirmar y difieren de ellos. Esto es necesario para que el visitante no haga clic en ellos por error.
El diseño de todos los enlaces debe ser familiar: azul, subrayado, el cursor cambia a un clic (icono de mano) al pasar el cursor sobre el enlace. Después de un clic, el enlace cambia de color (el estándar es violeta).
Según las pruebas de usabilidad, todas las páginas de un sitio web de comercio electrónico deben incluir un encabezado que sea totalmente coherente con su contenido para una buena experiencia de usuario. Ese es H1, no el título, porque, con muchas pestañas abiertas en el navegador, el título no es visible. 
Las pruebas de usabilidad muestran que todos los elementos estándar deben estar en los lugares habituales (el principio de "no me hagas pensar"): a. logotipo de la empresa en la parte superior izquierda, b. contactos - arriba a la derecha, c. la barra de búsqueda en la parte superior izquierda o en la parte superior central.
Las pruebas de usabilidad demuestran que el diseño del sitio web debe ser familiar. Por ejemplo, el cuadro de búsqueda debe estar en un lugar visible: la parte superior izquierda o el centro superior de la página. Esto proporciona una buena experiencia de usuario.
De acuerdo con las pruebas de usabilidad para una mejor UX, un sitio web comercial debe proporcionar la capacidad de que los usuarios dejen comentarios (comentarios) sobre el producto, los servicios, los artículos, lo mejor, sin necesidad de registrarse. Además, el texto se guarda si el usuario ingresó incorrectamente el captcha antes de enviarlo o si cierra accidentalmente la página.
Aquellos que no se registren en un formulario separado solo animarán a que se registren en su sitio web. 
Protege los comentarios y entradas de spam automáticos y manuales (captcha, moderador de revisiones previas o posprimarias, ver enlaces de terceros en los comentarios, etc.). De lo contrario, las palabras pueden convertirse en un pozo negro donde al visitante le resultará difícil encontrar información útil.
Esto es relevante cuando se usa un filtro retrasado cuando el visitante activa el filtro solo después de seleccionar todos los parámetros que necesita.
El cliente advierte que todos los datos personales que intervienen en el proceso de pago y están protegidos (iconos de las tecnologías de seguridad aplicadas, explicaciones relevantes a los campos). Al mismo tiempo, el proceso no entra en un examen, para no dañar la experiencia del usuario.
Opcional: el diseño de la página actual proporciona instrucciones detalladas para el pago y la página del sistema de pago se abre en una nueva pestaña. Así, el cliente no se ha quedado solo con un sistema de pago posiblemente desconocido, lo que repercute positivamente en la experiencia del usuario.
Solo se permiten signos de interrogación, signos de exclamación y puntos suspensivos.
Todas las imágenes del sitio web son de alta calidad, claras, libres de defectos y marcas de agua de terceros. Esto contribuye a una buena experiencia de usuario en el sitio web.
Todas las imágenes son informativas, no solo decorativas para no poner demasiados colores el sitio web.
Una descripción detallada y precisa de los términos y condiciones de entrega, que se puede encontrar inmediatamente en el sitio web, ayudará al comprador a comprender que el producto elegido se entregará en un momento específico y por un precio determinado. Esto mejora enormemente la experiencia del usuario, especialmente cuando los productos se envían solo después del pago por adelantado.
El uso de la función de zoom para fotos mejora la percepción del producto y la UX según las pruebas de usabilidad.
La tarjeta de producto proporciona una función de galería.
Según la ley del consumidor, el usuario tiene derecho a devolver los bienes dentro de los 14 días posteriores a la compra. Indícalo en la página del producto. Esto afecta positivamente la experiencia del usuario y aumenta la conversión.
La página de categorías del sitio web de comercio electrónico muestra de forma predeterminada entre 10 y 15 productos.
El diseño de un sitio web de comercio electrónico debe permitir al usuario cambiar el número de elementos mostrados en la página o mostrar todos los elementos en una página. La página de categoría debe sugerir una opción de presentación: avanzada (escaparate, mesa, mosaicos), óptima (lista) y mínima (lista de precios). La opción avanzada funciona para los usuarios que desean ver la mayor cantidad de información posible sobre el producto directamente en la página del catálogo. La opción mínima funciona para los visitantes interesados en el precio y la disponibilidad. Lo óptimo es una opción promedio. Esto contribuye a una buena experiencia de usuario.
Si el visitante puede buscar cualquier producto en diferentes categorías, el diseño del sitio web debe mostrar varias categorías. Por ejemplo, los visitantes a menudo confunden los términos "punto de acceso" y "enrutador wifi", por lo que puede poner el mismo modelo en ambas categorías.
Según los resultados de las pruebas de usabilidad, cada producto en la página del catálogo de un sitio web de comercio electrónico debe contener la siguiente información:
Opcional: la página de categoría también proporciona información sobre las principales características en una ventana emergente cuando el cursor está sobre el producto, expandiéndose haciendo clic en "mostrar más", etc. escaparate). 
Opcional: la página de categoría muestra la cantidad exacta o aproximada del producto en stock
Para una buena experiencia de usuario, el precio es notable, escrito en tamaño grande o marcado de manera diferente.
Si el sitio web acepta múltiples monedas, para una buena experiencia de usuario, el cambio de moneda debe colocarse en un lugar visible (en el encabezado) y en la página de categoría.
Si no se indica el precio, se informa la razón por la que no se establece el precio ("El producto está descontinuado", "Precio desconocido") o una recomendación para aclarar el valor con el Gerente. En este caso, se indican los contactos del Gerente o un enlace a ellos.
Un sitio web de comercio electrónico debe proporcionar varias fotos de productos en las páginas del producto, desde un ángulo diferente, para que el usuario pueda ver todas las características del diseño (si es hardware), sastrería (si es ropa), etc. buena experiencia de usuario.
En algunos casos, tiene sentido publicar una foto del producto en uso, trabajo, interior, etc.
Video detallado; la alta resolución es deseable.
De acuerdo con los resultados de las pruebas de usabilidad, las mismas características en diferentes productos deben llamarse y presentarse de la misma manera: en las mismas unidades de medida, sistema métrico, etc. Esto ayudará al usuario a comparar otros modelos de productos y brindará una buena experiencia de usuario.
Al pasar el cursor sobre el nombre del parámetro o hacer clic en el icono del signo de interrogación junto a él, la ventana emergente muestra toda la información.
El sitio web de comercio electrónico debe contener información detallada sobre la posibilidad de devolver el producto (opcional). 
Las pruebas de usabilidad demuestran que para una buena experiencia de usuario, debe especificar todos los elementos del producto que vienen de serie en el paquete.
Esta característica es opcional.
Según los resultados de las pruebas de usabilidad, la página del producto (ficha del artículo) no debe contener información ni anuncios que distraigan al visitante de explorar el producto.
Para una buena experiencia de usuario, la página del producto debe contener una descripción clara y útil del producto: reseñas, redes sociales (no para todos los temas), calificación del producto. La calificación es posible con un clic. La descripción del producto, las especificaciones, las reseñas y otra información se colocan horizontalmente en la página, en pestañas, para que el visitante no tenga que desplazarse hacia abajo en la página.
Si el producto está descontinuado o no está disponible, el sitio web debe ofrecer enlaces a los análogos. Esto proporciona una buena experiencia de usuario.
La vista previa y las fotos grandes son las mismas para todas las páginas de productos; Los tamaños de la vista previa en el catálogo son los mismos para todos los catálogos / categorías de productos
El usuario puede ver cada una de las fotos del producto en alta resolución (por ejemplo, haciendo clic en la vista previa) para ver todos los detalles. Además, se puede utilizar una lupa en línea. Esto es especialmente cierto para imágenes con detalles delicados: capturas de pantalla, etc.
Esto incluye escalar el vídeo, ajustar o silenciar completamente el sonido y pausar el video.
Supon la elección actual de oficina de tu cliente no solo por ubicación sino por otros criterios: horario de trabajo, rango, trabajo con entidades legales o individuos. En ese caso, un sitio web comercial debe ofrecer la posibilidad de dicho filtrado.
Cuando un usuario es redirigido a una página con resultados filtrados inmediatamente después de seleccionar un filtro, un filtro instantáneo es menos preferible para una buena UX. En cambio, el visitante se ve obligado a esperar a que se cargue la página y volver a establecer el siguiente filtro que necesita en la página.
Para una buena experiencia de usuario, el filtro no está sobrecargado de opciones. En cambio, los cargos están estandarizados o, si hay demasiadas opciones, combinados en rangos.
El diseño del filtro de selección muestra el número de posiciones en el filtro. El mismo mensaje se puede utilizar como botón / enlace para filtrar.
La URL de la página cambia al configurar los filtros, por lo que el visitante puede compartir la página con amigos o mantenerla en marcadores.
Para una buena experiencia de usuario, después de restablecer el filtro, la página del catálogo vuelve al estado inicial. 
El usuario puede ver que se agrega un producto a la comparación. Por ejemplo, la animación del movimiento de mercancías para contrastar puede mostrar al visitante dónde puede ver la comparación final. Se ha demostrado que es bueno para UX.
El texto del enlace cambia después de que el producto se agrega a la comparación para que el visitante vea qué productos ya ha seleccionado para comparar. Además, la capacidad de agregar un producto a la comparación está disponible tanto en las páginas del catálogo como en la página del producto, y puede eliminar el producto de la comparación en el catálogo. Hay un botón rápido (enlace) para eliminar el producto de la lista en la página de comparación de productos.
Para una buena experiencia de usuario, la ubicación del enlace para comparar productos es visible, por ejemplo, cerca de la canasta.
El diseño de la página de comparación de productos está optimizado para el número máximo de productos mostrados, en varios navegadores y en diferentes resoluciones de pantalla. Si se excede esta cantidad, los bienes no se agregan a la comparación y se emite el mensaje correspondiente al visitante.
Los productos en categorías se ordenan de modo que los productos más populares y más vendidos, los productos con calificaciones altas, se coloquen en primer lugar. Esto ayuda al usuario a tomar una decisión cuando no sabe con precisión lo que necesita y prefiere centrarse en la elección de la mayoría. Y los productos descontinuados se encuentran al final de la lista de productos de la categoría. Esto mejora UX.
Si es necesario, el diseño del sitio web debe proporcionar una clasificación basada en las necesidades de la audiencia objetivo y las características del producto. Opciones estándar:
Para una buena experiencia de usuario, el usuario recibe la información de los criterios de clasificación que se aplican actualmente. Por lo tanto, el campo de clasificación contiene el valor correspondiente junto al campo de flecha o triángulo, lo que indica la clasificación de mayor a menor o de menor a mayor.
Al registrarse y realizar un pedido, el número de campos obligatorios debe ser mínimo, nombre y contacto: correo electrónico y / o teléfono. El diseño de cada campo obligatorio adicional explica por qué necesitamos esta información. Si hay muchos campos en el formulario de registro, deben agruparse visualmente y tener títulos.
Se marcan o resaltan de la forma habitual para el usuario (asterisco).
Esto funciona para dispositivos móviles, donde se cometen muchos errores tipográficos, pero también es adecuado para PC.
Los usuarios a menudo no notan los campos de la segunda columna.
El diseño de registro de página (o pago) proporciona que el usuario solo vea el formulario de solicitud. Si coloca formularios para varias opciones en una pantalla, es posible que el usuario no comprenda que son diferentes y complete todos los formularios. La transición entre los campos de registro es posible usando un mouse o la tecla Tab. Cuando se abre el formulario, el cursor aparece en el primer campo; entonces, el campo de relleno es visualmente diferente de otros campos.
Para mejorar la experiencia del usuario, se recomienda proporcionar algunas instrucciones para completar formularios y campos. El uso de Autocompletar también mejorará la UX.
Un sitio web debe proporcionar una plantilla con la fecha de nacimiento correctamente especificada, direcciones de correo electrónico, etc.
El párrafo anterior nos obliga a ayudar al usuario a introducir un número de teléfono.
Se comprueba la corrección de cada campo y la página no se vuelve a cargar. Si el visitante cometió un error al ingresar datos, recibe una notificación sobre en qué campo cometió un error (este campo también está resaltado en color), por qué podría suceder esto, cómo solucionarlo. La notificación se encuentra junto al campo de error, directamente en la página, no en una ventana separada, donde deberá hacer clic en el botón "Aceptar".
Si un campo se rellena incorrectamente, las áreas correctamente rellenadas no se restablecen. En cambio, se recuerdan los datos ingresados por el visitante, por lo que si se interrumpió el registro o la realización de un pedido, no tiene que volver a ingresar la información.
Al registrarse o realizar un pedido, el visitante siempre puede retroceder un paso y corregir los datos.
Le brinda al usuario algunos beneficios, y la información sobre esto debe colocarse junto al botón de registro.
Usamos la dirección de correo electrónico como inicio de sesión de forma predeterminada para generar usuarios y eliminar el campo "inicio de sesión". 
Además del registro estándar, al usuario se le ofrece autorización a través de las redes sociales. Está demostrado que es bueno para UX.
Al registrarse, el visitante tiene la oportunidad de negarse a recibir el boletín informativo; desmarque la casilla correspondiente. O, lo que es más respetuoso con el cliente, puede marcar la casilla y suscribirse a la newsletter.
Informar al usuario sobre la posibilidad de realizar pagos con tarjeta de crédito mejora la experiencia del usuario.
Las pruebas de usabilidad muestran que si la compañía ofrece servicios de ventas en diferentes monedas, es necesario indicarlas en el sitio web.
Al agregar productos a la canasta
La lista es visible en todas las etapas del pedido. Esto contribuye a una buena experiencia de usuario.
Si el usuario está registrado, entonces la dirección, el nombre, el teléfono y otra información completan el formulario de pedido automáticamente para que el cliente no pierda tiempo en eso nuevamente. En este caso, el visitante siempre puede volver a las etapas anteriores de realizar un pedido y luego continuar sin ingresar los datos nuevamente.
Las pruebas de usabilidad demuestran que en los casos en que el pedido se realiza en varias etapas, debería ser obvio para el usuario cuántas etapas quedan.
Una vez completado el pedido, el usuario: ve la página de agradecimiento y explicaciones para acciones adicionales en ambas partes.
Si el usuario está registrado, todos los pedidos, incluidos los completados, se almacenan en su cuenta y puede verlos en cualquier momento. Esto mejora UX.
Si el diseño del sitio web incluye opciones de pago y entrega, las opciones de pago deben variar según el método de entrega elegido. Por ejemplo, si se selecciona la recogida, no es necesario ofrecer una opción de pago contra reembolso. Las acciones irreflexivas afectan negativamente a la experiencia de usuario.
Si el pago se realizó correctamente, el visitante recibe un mensaje y un enlace para volver al sitio web.
Las pruebas de usabilidad muestran que la fecha de entrega para el usuario registrado debe guardarse, por lo que no fue necesario volver a ingresarla durante la próxima compra. Esto tiene un efecto positivo en UX.
Si el sitio web no lo proporciona, conecta el enlace a la calculadora en el sitio web del operador.
Está incluido en el importe total del pedido.
Según las pruebas de usabilidad, el bloque de ventas en un sitio web de comercio electrónico mejora las tasas de conversión y la UX.
Según las pruebas de usabilidad, el bloque de acciones en un sitio web de comercio electrónico mejora la tasa de conversión y la tasa de compras adicionales, mejorando la experiencia del usuario.
Las revisiones posteriores a la compra mejoran el compromiso con los clientes y brindan información adicional sobre el producto de usuarios reales.
Se requiere garantía para mantener la confidencialidad y mejorar la experiencia del usuario.
De acuerdo con los resultados de las pruebas de usabilidad, debería estar disponible en cualquier página del sitio web, para que el usuario pueda encontrar fácilmente los productos vistos anteriormente. 
El diseño del sitio web debe proporcionar un botón de "pedido en 1 clic", solicitud de devolución de llamada, etc. De acuerdo con las pruebas de usabilidad, es adecuado para UX.
Para una buena experiencia de usuario, el catálogo del sitio web de comercio electrónico debe incluir categorías como "Venta", "Promociones", "Nuevo", "Popular", etc.
Las categorías de un sitio web de comercio electrónico deben incluir enlaces a productos populares que no tienen su propia categoría. Por ejemplo, la categoría de enrutadores se refiere a "Enrutadores para el hogar", "Enrutadores Wi-Fi," Enrutadores TP-Link ", etc.
Si el producto tiene un descuento o está incluido en las categorías de "Nuevo", "Ventas principales", la imagen del producto debe tener un icono de etiqueta correspondiente.
Podemos ayudar con eso si las características del producto incluyen información sobre su peso y dimensiones, idealmente sobre el tamaño del paquete.
Las pruebas de usabilidad demuestran que el sitio web debe contener métodos de entrega, costo estimado, términos o referencias a la sección relevante para una buena experiencia de usuario. 
Ésta es una opción..
Si el producto tiene accesorios, boquillas, componentes que se pueden comprar por separado, se muestran en "Productos relacionados" o "Comprados juntos con frecuencia". Los bloques "Productos relacionados" y "Productos similares" deben contener productos relacionados, no seleccionados al azar.
Según las pruebas de usabilidad, un número de teléfono que comienza en 0-800 aumenta las conversiones de llamadas. Además, llamar a ese número es gratuito para el cliente, lo que significa que es más probable que los compradores potenciales lo utilicen en lugar de números de pago.
Ayuda a encontrar respuestas a preguntas populares.
Demasiadas opciones de contacto pueden impedir que un visitante haga esta elección. Esto afecta negativamente a UX.
El diseño del sitio web proporciona el mismo posicionamiento de los contactos principales en todas las páginas. Esto es bueno para UX.
Es posible reemplazarlo con el formulario "Comuníquese con el Director". Eso no afectará a UX.
Si tienes varias oficinas, el diseño del sitio web debes proporcionar información para cada una de ellas (use pestañas, carga de scripts después de seleccionar la oficina de la lista, etc.). Nadie quiere desplazarse por una enorme lista de direcciones en una página (no todos los usuarios son lo suficientemente avanzados para usar Ctrl F).
El mapa de opciones es particularmente conveniente para los clientes en una ciudad extraña y no tiene idea de cómo una u otra calle está cerca de su ubicación actual. Pero para un local, esta característica es útil.
El diseño de la página de contacto tiene la disposición habitual porque el formulario de comentarios para una pregunta, queja, el pedido es fácil de encontrar en el sitio web. Para una buena experiencia de usuario, el formulario de comentarios está disponible sin registro. El visitante solo está obligado a dejar su información de contacto (correo electrónico, teléfono). El texto del mensaje no se pierde si el visitante ingresó incorrectamente el captcha o cerró la página accidentalmente.
El formulario permite al visitante dejar un mensaje detallado. Cuando ingresa un texto grande, el diseño del formulario permite ver todo el texto ingresado rápidamente; por ejemplo, aparece una barra de desplazamiento a la derecha para desplazarse. Está demostrado que es bueno para UX.
Después de enviar un mensaje, el visitante recibe un correo electrónico que indica que su mensaje fue recibido. El correo electrónico debe incluir información sobre el tiempo de respuesta aproximado. Por ejemplo, si el visitante dejó su teléfono de contacto, recibe un mensaje de texto en su móvil.
Está ubicado en el área obvia del sitio web para una mejor UX. Sin embargo, no cubre el contenido ni en el escritorio ni en los dispositivos móviles, no interfiere con la interacción del visitante.
Las pruebas de usabilidad muestran que para una buena experiencia de usuario, el sitio web debe brindar la oportunidad de contactar con su soporte tanto durante el horario laboral como fuera del horario laboral. Por lo tanto, el chat debe proporcionarse para tal fin.Para una buena experiencia de usuario , un consultor en línea (soporte por chat) informa al visitante sobre el tiempo de respuesta aproximado.
Al enviar un mensaje, si el operador está fuera de línea, se sugiere al visitante que deje su contacto (correo electrónico, red social, número del messenger) para que la empresa pueda contactarlo en horario laboral.
En el soporte por chat, el visitante ve una foto real del operador (no la imagen estándar del banco de imágenes o el logotipo de la empresa), su nombre. Además, los scripts (respuestas automáticas) del consultor en línea están bien pensados para evitar respuestas incómodas, experiencias desagradables de comunicarse con el bot, etc.
La canasta brinda la oportunidad de contactar a los gerentes y obtener ayuda si algo no está claro durante la compra.
Según los resultados de las pruebas de usabilidad, se ofrece al cliente asistencia para realizar el pedido en todas las etapas:
Si se produjo un error durante el pago, se indica una posible razón del error y se ofrece un nuevo intento.
Demasiadas opciones de contacto pueden impedir que un visitante haga esta elección. Esto afecta negativamente a UX.
Nuestra mirada se desliza de izquierda a derecha; por lo tanto, el contenido más significativo debe colocarse a la izquierda.
Un nivel más avanzado es la ubicación de los elementos más importantes (USP, barra de búsqueda, contactos, encabezados de artículos) en la página en la letra F. Así se desliza la vista del usuario, según las pruebas de usabilidad. El lugar más destacado en la esquina superior izquierda.
Los colocamos en la primera pantalla para que el visitante vea que también hay algo interesante debajo. En este caso, el visitante se desplazará hacia abajo en la página. Si, por ejemplo, coloca una franja vacía a lo largo del borde de la primera pantalla, el visitante decidirá que no hay nada debajo.
Según las pruebas de usabilidad, pueden percibirse como una barrera y el usuario no se desplazará por la página del sitio web.
Ayudan al visitante a comprender en qué subsección del sitio se encuentra y cómo ir a las secciones superiores con un solo clic.
Para una buena experiencia de usuario, el menú principal de un sitio web de comercio electrónico debe incluir contactos, entrega y pago, catálogo de productos, servicios u otras secciones principales. Para que el visitante pueda encontrar la información básica requerida en 2 segundos.
Las pruebas de usabilidad demuestran que el menú principal de un sitio web de comercio electrónico debe estar en el encabezado o justo debajo y duplicado en el pie de página.
Este elemento siempre debe estar resaltado y deshabilitado (no para volver a cargar la página cuando se hace clic). 
Según las pruebas de usabilidad, el menú principal de un sitio web de comercio electrónico no debe tener más de dos subniveles. Esto proporciona una buena experiencia de usuario.
El diseño de los elementos del menú que tienen subniveles debe diferir de otros elementos.Las características que se pueden presentar en una lista o tabla deben formatearse de esta manera. Por ejemplo, usando el tamaño de fuente: el nivel del título 1 es más grande que ejecutar 2 niveles, el título del último nivel es más grande y / o más grueso que el texto principal.
Los artículos de blog tienen categorías que ayudan al visitante a encontrar contenido sobre este tema. Se ha demostrado que es bueno para UX.
Los artículos del blog tienen etiquetas que ayudan al visitante a encontrar contenido sobre este tema.
Para una buena experiencia de usuario, las páginas de productos y categorías de productos deben tener enlaces a materiales útiles que ayudarán al cliente a elegir los productos.
Caso contrario: si el artículo se refiere a un producto o servicio presentado en el sitio web, debe estar vinculado. En este caso, el cliente no tiene que perder tiempo buscándolo.
Si el artículo cubre otros temas, se debe vincular un artículo que cubra este tema con más detalle.
El sitio web debe tener una página informativa de error 404. Informa al visitante lo sucedido y contiene enlaces a las secciones principales, la barra de búsqueda y contactos: número de teléfono, mensajería instantánea, correo electrónico.
De acuerdo con las pruebas de usabilidad, el diseño del sitio web debe incluir una cantidad mínima de colores brillantes, un texto grande en color, animación. Esto contribuye a la UX.
Los colores de los botones y los campos se utilizan en función de su percepción estándar. Por ejemplo, el usuario percibe inconscientemente el color rojo del campo de pago como el color del error. Es probable que un botón gris se perciba como inactivo. Los elementos y bloques del sitio web se alternan con el espacio vacío. Evite apilar el diseño.
El diseño del sitio web debe incluir botones, enlaces y banners suficientemente largos y grandes para que el usuario no tenga que "apuntar" a un clic. Al mismo tiempo, el tamaño conveniente no se excede sin ningún motivo.
La oportunidad de comprar un producto / pedir un servicio / pedir una devolución de llamada se encuentra en todas las páginas de un sitio web de comercio electrónico
El diseño de la llamada a la acción en las páginas debe ser visible y obvio: los botones son grandes y están firmados, los enlaces están resaltados. 
El llamado a la acción principal en cada página de un sitio web de comercio electrónico (el botón Comprar, el botón para pasar a la siguiente etapa de realizar un pedido, etc.) es siempre más brillante que los demás y fácil de usar. Esto mejora enormemente la experiencia del usuario en el sitio web
El texto del botón indica la acción realizada cuando se hace clic en él. De manera óptima, este es un verbo en infinitivo (comprar, ordenar, descargar, continuar con el registro). Sin embargo, es específico, informativo y no admite diversas interpretaciones. Los botones con estos nombres empeoran la experiencia de usuario:
Para una buena experiencia de usuario, el diseño del botón de llamada a la acción ("Comprar", "Ordenar", "Devolver la llamada") debe contrastar los colores primarios del sitio web, ser grande y se puede hacer clic, ubicado en la primera pantalla. .
Opcional: el botón de llamada a la acción es flotante, permanece a la vista cuando se desplaza por la página. El botón de llamada a la acción cambia su color y forma cuando se desplaza, y cuando se hace clic, el usuario ve que presionó el botón. 
Si está optimizado para SEO, se conserva un equilibrio entre la facilidad de los textos, la coherencia del contenido y la optimización. No hay "agua", presentaciones largas, información innecesaria sobrecargada de ofertas. Esto tiene un efecto positivo en UX. El texto utiliza frases sencillas y familiares y palabras claras para el público objetivo.
Están representados por figuras en lugar de palabras para facilitar la percepción del texto. Los dígitos de los números están separados por espacios (ejemplo: 1 560 000).
Todas las páginas utilizan fuentes uniformes. Misma fuente para elementos (encabezados, etc.) de un nivel. El diseño y el estilo del sitio web requieren una atención especial: el color de la fuente y el color de fondo deben combinarse. La fuente y el fondo combinan para una lectura y una percepción cómodas. Preferiblemente fuente oscura sobre fondo claro. El color de los enlaces no se utiliza para texto sin formato.
El texto principal del sitio web utiliza un tamaño de fuente grande para que se sienta cómodo al leerlo. Hay varias opiniones, pero ahora el estándar para texto sin formato es de 12 a 18 píxeles, la fuente más grande es la tendencia moderna. Tenga en cuenta que los diferentes tipos de fuentes pueden tener un aspecto diferente en varios tamaños.
Al escalar la página en el navegador, la fuente conserva su legibilidad.
Deja claro de qué se trata el bloque de texto. Incluso con una mirada rápida al texto, los subtítulos brindan al visitante información sobre los puntos clave del artículo (descripciones de productos, noticias).
Los estudios muestran que aproximadamente el 75% de los usuarios cierran páginas que se cargan durante más de 4 segundos. Aproximadamente el 50% de los usuarios esperan que una página se cargue en menos de 2 segundos. Además, los motores de búsqueda también tienen en cuenta la configuración de la velocidad de carga de la página.
El 1 de julio de 2018, se lanzó un mecanismo de clasificación de sitios web basado en el principio de diseño móvil primero. Este es un algoritmo de búsqueda completamente nuevo de Google. Además, el diseño de la página se ajusta automáticamente a la resolución del dispositivo del usuario. Esto elimina la necesidad de desarrollar una nueva estrategia de venta de gadgets.
Un diseño conveniente para dispositivos móviles no siempre es bueno para la versión de escritorio. Por ejemplo, un menú principal oculto, que se expande mediante un botón en la esquina superior izquierda: en el escritorio, obliga al usuario a hacer un clic extra.
Con una resolución de 1024 × 768 en todos los navegadores estándar, la barra de desplazamiento horizontal no aparece en el sitio web.
El sitio web debe tener un enlace de paso al mapa del sitio web (la ubicación óptima está en el pie de página).
El diseño de páginas largas que ocupan varias pantallas debe proporcionar un botón Volver al principio flotante, que lleva al usuario a la primera pantalla.
Al pasar el cursor sobre elementos en los que se puede hacer clic, el ícono de flecha cambia al ícono de mano. Al pasar el cursor sobre elementos en los que no se puede hacer clic, el icono no cambia. Esto contribuye a la experiencia del usuario. Los enlaces y botones que actualmente no están disponibles para el usuario deben estar inactivos. Sin embargo, no los ocultas, esto confundirá al visitante y afectará negativamente a la UX. Las pruebas de usabilidad demuestran que todos los contactos en el sitio web, incluido el encabezado, son texto, no imágenes, para que el visitante pueda copiarlos para una buena UX.
Después de agregar artículos a la canasta, el diseño del botón "Comprar" debe cambiar: el color y la inscripción (p. Ej., "Producto ya en la canasta" o "Comprar más"), o información de que el producto se agregó a la canasta. debe aparecer junto a él. El objetivo es que el comprador pueda ver que el producto ya está agregado a la canasta y al mismo tiempo tenga la oportunidad de agregar una o varias unidades. Esto proporciona una buena experiencia de usuario.
Opción 1: después de agregar un producto a la cesta, aparece una ventana con dos botones (enlaces): "Ir a pagar" y "Continuar comprando". Esto ahorra tiempo al usuario y proporciona una buena experiencia de usuario.
De acuerdo con las pruebas de usabilidad y para mejorar la UX, la canasta no debe contener elementos que distraigan:
Según los resultados de las pruebas de usabilidad, la cesta de la compra muestra: Se puede hacer clic en la imagen y el nombre del producto para mejorar la UX y llevar a la página del producto. Cuando agrega un producto a la cesta, el usuario puede seleccionar inmediatamente la cantidad de productos agregados en lugar de hacer clic en el botón "comprar" varias veces. Esto proporciona una buena experiencia de usuario."
"
El diseño del sitio web debe incluir la barra de búsqueda, pero no cambie las tareas de navegación. La barra de búsqueda en un sitio web de comercio electrónico no resuelve los problemas de navegación. Según las pruebas de usabilidad, los usuarios prefieren buscar productos por sí mismos usando secciones y filtros y solo luego usar la barra de búsqueda.
No hagas que los usuarios piensen: "¿Por qué el segundo? ¿Cuál es más importante?" y atascado en este momento. Las pruebas de usabilidad muestran que es incorrecto para UX.
La búsqueda se inicia presionando el botón junto al campo de entrada de la consulta o la tecla Enter. Corrección automática de tipos en el usuario ”, solicitudes, errores ortográficos, distribución incorrecta del teclado (o se ofrecen correcciones). Se seleccionan los resultados de la búsqueda, incluidos los sinónimos. Aunque la longitud visual del campo de búsqueda es de al menos 30 caracteres, la longitud real de la solicitud no está limitada. Se proporciona una edición simple de la solicitud (sin ir a ninguna parte y sin clics adicionales).
Las pruebas de usabilidad muestran que cuando el usuario escribe la consulta en el campo de búsqueda, se debe mostrar una lista relevante de resultados; la lista cambia a medida que el usuario escribe. Si una búsqueda en vivo no encuentra opciones adecuadas al completar una consulta, la lista no se borra y los últimos valores relevantes permanecen.Según las pruebas de usabilidad, para una buena experiencia de usuario, el visitante debería ver:
Si no se encuentra nada, para una buena experiencia de usuario, no mostramos al visitante la página "No se encontraron resultados de acuerdo con su solicitud", en su lugar:
El diseño de un sitio web de comercio electrónico debe proporcionar una búsqueda avanzada seleccionando múltiples configuraciones.
La funcionalidad estándar de un enlace normal es ir a otra página o abrir otra página en una nueva pestaña pero no iniciar ninguna acción. 
Si el enlace implica el despliegue, pero no la transición a otra página / recarga de la existente, debe estar subrayado con puntos. Agrega un ícono de triángulo a su lado. El enlace de descarga debe ser diferente de los enlaces normales. Debe incluir la palabra "descargar", tamaño de archivo y formato.
El texto del enlace debe indicar claramente a dónde conduce (nombre del artículo, producto), para que el usuario sepa exactamente lo que abre. Esto contribuye a una mejor experiencia de usuario en su sitio web.
El texto del enlace debe ser lo suficientemente largo para que el visitante pueda hacer clic en él fácilmente (por ejemplo, un enlace con el ancla "aquí" no es bueno).
El botón "Atrás" del navegador debería funcionar en todas las páginas del sitio web de comercio electrónico. El artículo 38 b nos dice que no debe haber tal botón en el sitio web. Sin embargo, el navegador tiene que interactuar con él correctamente: devolver al usuario a la página vista anteriormente, guardar todas las configuraciones personalizadas, ordenar o filtrar. Esto contribuye a la experiencia del usuario.
El contraste del texto debe ser de ≥4.5:1 (normal) o ≥3:1 (texto grande ≥18pt/14pt en negrita). No confíes solo en el color para transmitir significado: añade subrayado/ícono/texto. Asegura suficiente contraste de los enlaces frente al texto circundante y mantén un estilo de hover/focus visible tanto en temas claros como oscuros.
Todos los controles interactivos deben funcionar con Tab/Shift+Tab/Enter/Space (más flechas/Esc cuando corresponda). Mantén un orden de tabulación lógico, evita trampas y gestiona el foco al abrir o cerrar diálogos y paneles laterales (envía el foco dentro y devuélvelo al elemento disparador).
Proporciona un estilo de foco fuerte y coherente (contorno/desplazamiento). Asegúrate de que no quede oculto bajo cabeceras fijas o pop-ups; usa scroll-margin-top para objetivos anclados y :focus-visible para los anillos visibles solo con teclado.
Haz que los objetivos interactivos sean cómodos de pulsar (≈ 24×24 px CSS como mínimo) o proporciona un espacio equivalente. Evita zonas táctiles saturadas y asegúrate de que iconos, interruptores y controles de formulario tengan área de impacto suficiente.
Usa elementos nativos (<button> para acciones, <a> para navegación). Asocia <label> con los campos e incluye nombres accesibles (aria-label/aria-labelledby) cuando sea necesario. No sobrescribas roles sin motivo.
Las imágenes informativas deben tener un alt descriptivo; las decorativas usan alt="". Añade subtítulos para los vídeos y una transcripción en la página para contenido de audio/vídeo.
Coloca los errores inline junto a los campos y enlázalos de forma programática (aria-describedby). Anuncia cambios mediante aria-live. Marca claramente los campos obligatorios y usa autocomplete para indicar su propósito (nombre, email, dirección).
Respeta prefers-reduced-motion; ofrece controles para pausar/detener/ocultar contenido en movimiento. Evita parallax y medios que se reproduzcan automáticamente por defecto, sobre todo en móviles y cuando el movimiento pueda distraer de la tarea.
Incluye un enlace visible de «Saltar al contenido». Usa landmarks semánticos (<header>, <nav>, <main>, <footer>) y mantiene una jerarquía de encabezados lógica en todas las plantillas.
Define el idioma de la página (<html lang="…">). Ofrece soporte RTL con dir="rtl" y propiedades CSS lógicas; no mezcles LTR/RTL sin aislamiento (p.ej., <bdi> o dir en <span>).
Permite gestores de contraseñas/biometría; evita pruebas cognitivas. No pidas al usuario repetir datos que ya tienes: pre-rellena cuando sea posible y permite copiar/pegar códigos de un solo uso fácilmente.
Ofrece opciones que no requieran arrastrar para operaciones drag-and-drop (botones/menús) y garantiza soporte homogéneo a ratón, táctil y teclado (p.ej., barra espaciadora/enter para recoger, flechas para mover, enter para soltar).
Cumple CWV: LCP < 2.5 s, INP < 200 ms, CLS < 0.1. Supervisa datos de campo (RUM) y de laboratorio por plantilla, dispositivo y región para detectar regresiones temprano.
Usa srcset/sizes, formatos AVIF/WebP y compresión adecuada. Añade loading="lazy"; define width/height o aspect-ratio para evitar CLS. Utiliza placeholders (LQIP/desenfoque/SVG) para mejorar la velocidad percibida.
Subconjunta y precarga las fuentes críticas, usa font-display: swap y preconnect a los hosts de fuentes. Limita variantes y ofrece fallbacks seguros para reducir FOIT/FOUT y cambios de diseño.
Aplica code-splitting y tree-shaking; defer/async los scripts no críticos. Reduce el tamaño del bundle y el coste de hidratación; considera islands/SSR. Elimina polyfills sin usar y librerías obsoletas.
Incluye en línea el CSS crítico para el above-the-fold; carga en diferido el no crítico. Purga estilos sin usar y minimiza recursos que bloqueen el render; evita archivos globales enormes para pequeños widgets.
Configura encabezados de caché robustos; almacena recursos inmutables a largo plazo. Usa un CDN de borde y nombres de archivo versionados para cache busting. Considera un Service Worker para vistas sin conexión o repeticiones instantáneas.
Emplea preconnect/dns-prefetch a dominios críticos; preload los recursos clave (fuentes/medios principales). Activa HTTP/2 o HTTP/3 y compresión Brotli en recursos de texto.
Optimiza servidor/BD y consultas, usa SSR/renderizado en edge y transmite respuestas. Reduce la latencia de cold-start y ajusta keep-alive para mayor rendimiento.
Audita etiquetas con regularidad; cárgalas tras el consentimiento, con async/defer. Define presupuestos de rendimiento y carga diferida para widgets no esenciales. Elimina rastreadores sin uso y píxeles duplicados.
Reserva espacio para anuncios/embeds con cajas fijas o aspect-ratio; evita insertar contenido above-the-fold tras la carga. No cambies fuentes o imágenes a destiempo sin pistas de tamaño.
Evita tareas largas (>50 ms); divide el trabajo en trozos y cede el hilo principal. Desplaza la computación pesada a Web Workers y programa trabajo no crítico con requestIdleCallback.
Configura RUM para CWV, alertas y presupuestos. Ejecuta Lighthouse/WebPageTest en CI; monitoriza el rendimiento por plantilla y región, y bloquea despliegues que superen los presupuestos.La usabilidad web es un proceso complejo que exige compromiso y atención meticulosa al detalle. Crear un Website Usability Checklist exhaustivo permite a los diseñadores garantizar que desarrollan un sitio funcional y fácil de navegar. Con este artículo tienes más de 230 puntos clave para tu checklist. ¿A qué esperas? Empecemos a probar y hagamos la web más accesible para todos.