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.