5 errores a evitar en el diseño web UX

5 errores a evitar en el diseño web UX

 

Errores a evitar en el diseño web UX para 2020

Errores a evitar en el diseño web. El Internet de hoy es un lugar altamente competitivo. Con tantos usuarios y empresas gastando tiempo y dinero en marketing digital y SEO – tratando de superar a sus rivales y colocarse en la cima del ranking de Google – es más difícil que nunca conseguir que los usuarios visiten un sitio web determinado en lugar de otro.

Dada la dificultad de conseguir nuevas visitas en tu página web, se podría pensar que todos los webmasters del mundo harían todo lo que estuviera en su mano para proporcionar una experiencia de usuario inmejorable. Y, en última instancia, retener a cada uno de los clientes que se ganaron a duras penas. Pero todos sabemos que hay una serie de malos hábitos desagradables que no paran de aparecer una y otra vez.

Echemos un vistazo a algunos de las infractores más comunes que hacen que los usuarios se vayan frustrados de una página web…..

1. Una página web demasiado lenta

En un mundo en el que casi todo el mundo tiene un smartphone súper potente en el bolsillo, Internet se ha convertido en sinónimo de satisfacción instantánea. Un usuario que se esté preguntando por alguna curiosidad que no recuerde puede recibir la respuesta en pocos segundos a través de Google. Y si quiere contactar con un amigo en otro país, puede hacerlo tan rápido como puede escribir po Facebook o Whatsapp.

speed pagespeed insights

Todos nos hemos visto afectados por la velocidad y la capacidad de respuesta de nuestro mundo hiperconectado. Por lo que cuando hacemos clic en un resultado de búsqueda y nos sentamos en una página de carga en blanco durante tres segundos o más, puede parecer una eternidad. Si el clic original fue motivado por una curiosidad puntual, es muy probable que el usuario lo intente en otra parte.

Google ha declarado que, según su investigación, más de la mitad (53%) de los usuarios de móviles abandonarán un sitio que tarda más de tres segundos en cargarse. Después de seis segundos, es casi una garantía de que investigarán en otra parte. 

Por supuesto, las necesidades de la mayoría de los sitios web no son muy complicadas. La tiendas online o blogs realmente no tienen excusa para tardar más de un par de segundos en cargar.

Si tienes una página web o un blog con WordPress este artículo te ayudará a mejorar la velocidad de carga.

2. Demasiados Popups (errores a evitar en el diseño web)

Todos hemos tenido la experiencia de hacer clic en un enlace en nuestros resultados de búsqueda y ser llevados a una página que parece estar haciendo todo lo que está en su poder para evitar que leamos el contenido.

En dos segundos, aparecerá una enorme ventana emergente que ocupará toda la pantalla. Una ventana emergente de GDPR/cookie, que te permitirá hacer clic en dos cosas a la vez.

Si a esto le sumamos una alerta de navegador que indica que «este sitio web desea enviarte notificaciones», el efecto general es el de ser bombardeado con tonterías irrelevantes. Ni que decir que entierran por completo el contenido real al que intentabas llegar, contenido que ahora se espera que tú mismo desestimes manualmente desechando cada uno de los pop-ups.

El uso de los popups sigue siendo un tema controvertido; algunos diseñadores y anunciantes citan tasas de conversión significativamente mejoradas gracias a su uso. Mientras que otros se ven frustrados por su gran capacidad para irritar a los usuarios.

No importa cómo te sientas, probablemente todos estemos de acuerdo en que los popups suelen estar mal hechos. Pueden tener sus usos, pero poner demasiados a la vez y no respetar el deseo del usuario de ver el contenido que es relevante para sus intereses es más probable que el resultado sea un rebote que no lo sea.

En cuanto a las notificaciones de GDPR y de cookies, aunque son un requisito legal, hay sin duda formas de presentarlos que son más perjudiciales que otras.

3. Dificultades con el móvil

Es sorprendente ver en 2019, pero muchos diseñadores web todavía parecen tratar la versión móvil de un sitio web casi como una idea de último momento. Todavía es común encontrar un sitio móvil donde los artículos están desordenados, superpuestos o en un formato extraño, todo lo cual puede señalar a un visitante que no te tomas el tiempo para repasar los pequeños detalles.

Vale la pena recordar que la atención a los usuarios móviles no es un «nicho», sino la parte más importante del trabajo.

Junto con el cambio de algoritmo de Google en marzo de 2018 para dar prioridad a la indexación de móviles, ahora no hay ninguna razón para descuidar la experiencia móvil de tu página web. Un sitio móvil de baja calidad puede afectar negativamente a tu rendimiento SEO, así como a las experiencias de tus usuarios, por lo que es importante hacerlo bien.

Un consejo: Revisa tus datos en Google Search Console y optimiza tu web para los dispositivos móviles.

4. Demasiada animación

Lo entendemos: la animación tiene muy buena pinta. Al igual que algunas transiciones suaves y agradables, transformaciones y apariencias, y una animación bien desplegada puede dar vida a un diseño que, de otro modo, sería estático y estéril.

Sin embargo, la animación debe usarse con moderación ya que puede distraer si se exagera. Idealmente, debería apoyar y llamar la atención sobre el contenido clave o los botones de llamada a la acción, y no agobiar al usuario con cosas que aparecen y desaparecen hasta el punto de que están demasiado desconcertados para leer el texto real.

Las animaciones de introducción a la home también atraen la atención de los usuarios cuando llegan a tu sitio web, pero no les debes obligar a seguir la misma animación cada vez que quieren volver a la página principal.

En general, la función de los elementos del sitio web no debería estar dictada por la estética de una presentación; requerir que los usuarios esperen a que un elemento aparezca o se vuelva interactivo debido a una animación no es una gran táctica, y esto puede hacer que los usuarios se sientan molestos por interferir en el camino de lo que están tratando de hacer.

Una nota relacionada es que algunas animaciones pueden causar problemas de accesibilidad en tu diseño web; el uso de muchas partes móviles o contenido que aparecen en flashes puede plantear problemas a algunos usuarios (como aquellos que pueden tener un trastorno de déficit de atención), lo que hace que les resulte muy difícil concentrarse en el contenido.

5. Reproducción automática

Ninguna discusión sobre los errores a evitar en el diseño web estaría completa sin mencionar los medios de reproducción automática. Ha sido la pesadilla de los usuarios de la web desde los primeros días de Internet.

Hay maneras de hacerlo con buen gusto, pero es tan a menudo mal utilizado que merece un lugar en esta lista.

Mientras que la música MIDI autoproducida y los sitios Flash con audio fueron el azote de la década de 1990 y principios de la década de 2000, la viruela del mundo actual es el vídeo que se reproduce de forma automática.

Muchos sitios hoy en día colocan un vídeo junto al cuerpo del texto de un artículo o blog, a menudo esto es totalmente irrelevante para el contenido de la página, y si lo paras antes de navegar a otra página, vuelve a reproducirse rápidamente.

Peor aún, muchos sitios presentan estos vídeos con anuncios automatizados, lo que, dado que los vídeos en sí mismos son generalmente anuncios de una forma u otra, equivale a pedir a los visitantes que se sienten a través de un anuncio tras otro anuncio.

Una pequeña ventaja, al menos, es que los navegadores modernos como Chrome se han estado moviendo para permitir sólo la reproducción automática en vídeos que están silenciados, lo que reduce significativamente la frecuencia de la molesta experiencia del usuario de tener audio no solicitado que se reproduce en su ordenador.

Conclusión final de Errores a evitar en el diseño web

En última instancia, todos los problemas discutidos en este artículo son problemas de mal diseño de UX. Cada elemento del sitio debe ser valorado por su impacto en la función de la página: ¿Ayuda u obstaculiza al usuario a encontrar lo que está buscando? ¿Aumenta o disminuye el contenido real de la página? ¿Acorta o alarga el proceso al que debe someterse el usuario para completar una transacción?

Atraer a los usuarios a tu sitio web a menudo no es una tarea fácil, y tiene sentido recompensar a aquellos que llegan anticipando sus necesidades y tratando su tiempo y su atención con el respeto que se merecen. De esta manera, los usuarios bien tratados pueden convertirse en visitantes fieles.

Cuál es el mejor tipo de paginación en ecommerce

Tipos de paginación para ecommerces

 

Tipos de paginación en ecommerce, ¿Cual debes utilizar?

¿Cuál es el mejor en UX , el tipo de paginación en ecommerce para mostrar productos: paginación, un botón «Cargar más» o desplazamiento infinito?

En este último año he llevado a cabo varios estudios de usabilidad a gran escala de más de 50 sitios web de comercio electrónico lideres en su sector. He probado (entre otras cosas) estos tres patrones de diseño para la carga de productos, tanto de escritorio como para móviles. La paginación sigue siendo la forma más popular de cargar nuevos elementos en un sitio web porque se genera por defecto en casi todas las plataformas de eCommerce.

Sin embargo, estas pruebas de usabilidad encontraron que los botones «cargar más» combinados con la carga perezosa (lazy-loading) son una implementación superior, lo que resulta ser una experiencia de usuario más fluida.

Encontramos que el desplazamiento infinito puede ser francamente perjudicial para la usabilidad, en particular, para los resultados de búsqueda y en los móviles. Sin embargo, no es en blanco y negro, porque el rendimiento de cada método varía según el contexto de la página.

Los resultados de la prueba

Decidí pedir a varias personas que navegaran por diferentes eCommerces, estos usuarios generalmente percibían que la paginación era lenta, y la presencia de más de un puñado de enlaces de paginación a menudo los desanimaba a navegar por la lista de productos. Más importante aún, observé que estos usuarios navegaban mucho menos en la lista total de productos que en los sitios web que se basan en los botones «Cargar más» o en el desplazamiento infinito. Por el lado positivo, pasaron relativamente más tiempo en la primera página de resultados.

Con el desplazamiento infinito, a veces referido al desplazamiento sin fin, el usuario experimenta la página como si todos los productos se cargaran a la vez (independientemente de si realmente ven todos los productos), pero sin la penalización de rendimiento de la carga de cientos de productos potenciales.

Por lo tanto, cuando el desplazamiento infinito se implementa bien, puede ser una experiencia increíblemente suave y sin fisuras. El usuario puede simplemente desplazarse por la lista de productos sin ninguna interrupción. No se necesita interacción – los productos simplemente aparecen a medida que el usuario se desplaza por la página. No es de extrañar, por tanto, que los usuarios naveguen con más productos en sitios web con desplazamiento infinito que en sitios web con botones de paginación o de «Cargar más».

Menos exposición con el desplazamiento infinito

Sin embargo, los resultados iniciales recibieron relativamente menos exposición. El desplazamiento infinito es, por lo tanto, ideal para mostrar rápidamente la amplitud de toda una categoría; pero debido a que los usuarios no se detienen naturalmente al desplazarse, tienden a escanear más y a centrarse menos en productos individuales de la lista.

También impide el acceso del usuario al pie de página del sitio web en algunos casos. Este es uno de los mayores desafíos de diseño del desplazamiento infinito: Debido a que los resultados se cargan continuamente a medida que el usuario se acerca a la parte inferior de la lista, el usuario verá el pie de página durante un segundo o dos hasta que el siguiente conjunto de resultados se cargue y se inserte repentinamente, empujando el pie de página fuera de la vista. Si hay muchos elementos en la lista (lo que suele ocurrir con las categorías de búsqueda y de alto nivel), esto impide que el usuario llegue al pie de página. Esto puede ser muy problemático, porque el pie de página a menudo contiene enlaces a páginas de ayuda vitales, navegación cruzada, contenido de categoría e información sobre asistencia al cliente, envíos y devoluciones.

Comparación de los eCommerces

Sólo algunos de los sitios web probados utilizaron el botón «Cargar más», pero fueron bien recibidos por los usuarios. De hecho, al comparar los ecommerce, encontré que sólo el 8% utiliza el enfoque «cargar más». El botón de «Cargar más» es un diseño muy sencillo que no supone una carga para el usuario a la hora de decidir a qué página ir, sino que simplemente le pregunta: «¿Quieres ver más resultados? Esto hace que la interfaz sea muy sencilla y probablemente la carga cognitiva más pequeña posible para la carga bajo demanda de elementos adicionales.

Los usuarios generalmente navegaban por más productos en sitios web con un botón «Cargar más» que en aquellos con enlaces de paginación, pero debido a que la carga de productos adicionales seguía requiriendo una elección activa y un clic, los sujetos tendían a leer los elementos mostrados mucho más de cerca que en los sitios web con desplazamiento infinito.

Ventajas del botón cargar más y desplazamiento infinito

Una de las ventajas de las implementaciones de «cargar más» y desplazamiento infinito es que la lista de productos crece, en lugar de que los resultados sean reemplazados. «Cargar más» permite al usuario comparar más fácilmente los productos de una lista completa. El hecho de contar con una lista consolidada de bienes facilitó considerablemente a los usuarios la evaluación de los productos hacia los que era mejor navegar y, en consecuencia, aumentó la tasa general de descubrimiento de productos.

Entonces, ¿qué método debo utilizar?

Lo ideal es utilizar múltiples variaciones de «cargar más». Las pruebas demostraron que ningún método era perfecto en todos los casos; diferentes contextos justificaban una de las tres implementaciones diferentes del enfoque «cargar más». Cubriremos estas tres variaciones durante el resto de este artículo:

· Para las categorías, utilice una combinación de «cargar más» y carga perezosa (lazy-loading).
· Para la búsqueda, utilice el botón «cargar más», Principalmente con un número dinámico de resultados devueltos basado en las puntuaciones de relevancia.
· En el móvil, utilice el botón «cargar más», pero cargando un menor número de productos por defecto.

Nota: Estos resultados provienen de las pruebas de sitios web de comercio electrónico. El rendimiento puede variar en otros tipos de sitios web.

«Cargar más» para las categorías

Mostrar de 10 a 30 productos en la página inicial de carga, y luego cargar otros 10 a 30 productos, hasta llegar a 50 a 100 productos, y luego mostrar un botón «Cargar más». Una vez que se haga clic en ese botón, cargar otros 10 a 30 productos, y reanudar la carga hasta que se hayan cargado los siguientes 50 a 100 productos, en cuyo momento mostrar el botón «Cargar más» una vez más. El umbral del botón «Cargar más» de 50 a 100 elementos determina cuándo interrumpir al usuario, mientras que el umbral de carga perezosa es simplemente una optimización del rendimiento para reducir el tiempo de carga y la carga del servidor.

Ten en cuenta que el número de productos a cargar es deliberadamente un rango. Las pruebas muestran que el número ideal dependerá del contexto y de la industria de tu sitio web. Para las listas con productos más específicos (la mayoría de los productos electrónicos de consumo, hardware, piezas y suministros), utiliza la gama inferior. Por el contrario, las pruebas demostraron que los usuarios pueden tratar con un mayor número de artículos cuando la lista contiene más productos visuales (prendas de vestir, muebles, decoración, etc.).

«Cargar más» para los resultados de la búsqueda

Debido a la indefinición de la búsqueda, tiende a tener muchos más resultados que la navegación por categorías. Cientos de resultados de búsqueda no eran poco comunes, y en los eCommerce masivos, las consultas de búsqueda a menudo devuelven miles de resultados.

Además, con la búsqueda, los resultados se ordenan por relevancia. Así, el quinto resultado es típicamente mucho más relevante para el usuario que el centésimo resultado. Esto significa que los usuarios no deberían tener que escanear más de cien productos durante la búsqueda, sino que se les debería animar a examinar los primeros elementos cuidadosamente. Los resultados de la búsqueda deben, por lo tanto, cargar sólo de 25 a 75 productos de forma predeterminada, y el desplazamiento infinito nunca debe utilizarse para los resultados de la búsqueda.

Interesantemente, la famosa prueba A/B de Etsy de desplazamiento infinito también documentó un éxito significativo en la experiencia de búsqueda. La paginación o un botón «Cargar más» sería mejor para los resultados de búsqueda, ya que no fomentan el escaneado rápido de un gran número de productos, sino que incitan al usuario a centrarse más en explorar el primer conjunto de resultados. De hecho, debido a la menor cantidad de resultados, la carga perezosa no es un requisito (pero, si se implementa para la navegación por categorías, también puede reutilizarse aquí).

¿Cuantos productos cargar por defecto?

Para llevar las cosas al siguiente nivel, el umbral de cuántos productos se cargan por defecto puede ajustarse dinámicamente en función de las puntuaciones de relevancia de los resultados de búsqueda. La mayoría de los motores de búsqueda clasificarán cada resultado con una puntuación de relevancia y devolverán primero los que tengan la mayor relevancia. Estas puntuaciones se pueden utilizar para determinar un umbral dinámico que aumenta o disminuye el número de productos cargados según si se debe animar al usuario a escanear sólo los primeros resultados o a navegar por una gama más amplia de elementos.

En la práctica, esto se puede hacer detectando caídas repentinas en las puntuaciones de relevancia para los resultados de búsqueda del usuario y, basándose en estas caídas, determinando un número óptimo del resultado que se debe devolver para esa consulta de búsqueda en particular. Por ejemplo, si las puntuaciones de relevancia empiezan a caer bruscamente después de los primeros 28 resultados, entonces el número de productos cargados puede reducirse para aumentar el enfoque en esos elementos. Sin embargo, si todos los primeros 100 resultados tienen puntuaciones de relevancia muy altas, entonces el número de productos cargados puede aumentar para fomentar una exploración más amplia.

Botones de «Cargar más» para móviles

Despues de muchas pruebas, encuentro que los enlaces de paginación pueden ser difíciles de utilizar con precisión y que normalmente darán como resultado una nueva carga de página. Mientras tanto, el desplazamiento infinito demostró ser muy efectivo para que los usuarios exploraran muchos productos (de hecho, los usuarios de se desplazaron a través de más del doble de productos en sitios web con desplazamiento infinito que en aquellos con paginación). Sin embargo, como ya se ha mencionado, puede hacer que el pie de página sea inaccesible. Durante las pruebas móviles, hizo que los enlaces de pie de página móvil vitales – tales como «Sitio de escritorio», «Preguntas frecuentes» y «Envío»,  fueran inaccesibles para los usuarios de la prueba, quienes tenían expectativas claras de que estos enlaces estuvieran disponibles en el pie de página.

La mejor solución, por lo tanto, es tener un solo botón grande de «Cargar más» al final de la lista de productos. Sin embargo, los móviles vienen con algunas limitaciones únicas:

Menos pantalla

Debido a que una pantalla móvil es mucho más pequeña, los elementos de la lista ocuparán una parte relativamente grande de la pantalla, y por lo general sólo se mostrarán dos o tres elementos en el diseño de la vista de lista. Por lo tanto, 50 elementos ocuparían muchas más alturas de vista en un dispositivo móvil que en un ordenador de sobremesa. En otras palabras, el usuario tendrá que interactuar (es decir, desplazarse) mucho más en un dispositivo móvil que en una lista de productos comparable en el escritorio.

Restricciones de desplazamiento

En un dispositivo táctil, el usuario sólo puede desplazarse arrastrando y deslizando con el dedo. Contrasta esto con un escritorio, donde el usuario normalmente tiene numerosas entradas para desplazarse, como la rueda de desplazamiento del ratón (o un deslizamiento del trackpad), una barra de desplazamiento de la interfaz de usuario arrastrable y varias entradas del teclado (las flechas arriba y abajo, las teclas de subida y bajada de la página, la barra espaciadora, etc.).

Desplazamiento lento

Además, en estas pruebas, los sujetos demostraron menos control sobre el desplazamiento continuo de la lista de productos. Por un lado, algunos se desplazarían demasiado despacio al tener que arrastrar continuamente el dedo por la pantalla; en este caso, una lista de hasta 50 productos tardaría mucho tiempo en explorarse. Por otro lado, algunos se desplazarían por la lista demasiado rápido porque involuntariamente invocarían el ímpetu del desplazamiento al pasar el dedo en rápida sucesión; en este caso, se perderían muchos productos

Eventos JavaScript

Por último, la forma en que se disparan los eventos JavaScript en la mayoría de los dispositivos táctiles significa que la técnica de carga dinámica y perezosa a menudo no se puede implementar también. Los eventos JavaScript se disparan sólo una vez que termina el desplazamiento del usuario; por lo tanto, los productos no se pueden obtener mientras el usuario se desplaza, sólo una vez que se detiene el desplazamiento.

Por estas razones, recomiendo cargar sólo de 15 a 30 productos en dispositivos móviles antes de mostrar el botón «Cargar más», y luego simplemente cargarlos todos a la vez (no de forma perezosa).

La API de historial de HTML5

La API de historial de HTML5 nos permite cumplir con las expectativas del usuario. Específicamente, la función history.pushState() nos permite invocar un cambio de URL sin recargar la página, haciendo coincidir el comportamiento del botón de retroceso del navegador con las expectativas del usuario. El navegador recordará la posición de desplazamiento del usuario, pero necesitamos asegurarnos de que cualquier clic de «Cargar más» se cargue por defecto cuando el usuario vuelva.

Ten en cuenta que si no dispones de los recursos técnicos necesarios para soportar un comportamiento correcto de los botones de retroceso, le recomiendo que no experimentes con el botón de «cargar más», sino que te atengas al modelo de paginación inferior.

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)