Cómo usar la psicología cognitiva en el diseño UX

Cómo Usar La Psicología Cognitiva En El Diseño UX

Psicología cognitiva en el diseño UX. Incluso si un sitio web es perfecto desde el punto de vista de la interfaz de usuario, todavía podrías ofrecer una mala experiencia al usuario. Aparte de tus conocimientos técnicos, los desarrolladores UX también necesitan entender cómo funciona la mente humana.

Al aprender cómo piensan y se comportan tus visitantes online, podrán ayudarte a entender e interpretar el producto digital que estás diseñando. Dado esto, no es sorprendente en absoluto que el diseño de UX y la psicología cognitiva sean aspectos inseparables de la provisión de experiencias de usuario sin problemas.

Aquí hay algunas reglas básicas de psicología cognitiva que todo diseñador de UX debería aplicar.

reglas básicas de psicología cognitiva

La Ley de Hick (Psicología cognitiva en el diseño UX)

La ley de Hick-Hyman, o ley de Hick, explica que el tiempo que tardamos en tomar una decisión se ve directamente afectado por el número de opciones que tenemos. Lógicamente, aumentar el número de opciones aumentará el tiempo de decisión de los usuarios.

La ley de Hick es particularmente importante para los diseñadores de UX. No importa si quieren hacer una compra online, leer una entrada de blog, o buscar la información de contacto de una empresa, un visitante quiere encontrar el contenido deseado rápidamente. Precisamente por eso, es necesario atraer a un usuario, proporcionar experiencias de navegación fluidas en el sitio web, y evitar que se vean abrumados. Tu tarea como diseñador UX es sintetizar la información del sitio web y mantener la comunicación de los usuarios con el sitio web de un cliente de forma clara, lógica y consistente.

Eliminar los elementos de diseño innecesarios

Como he mencionado antes, cada usuario que aterriza en un sitio web tiene un objetivo específico. Cuando el sitio web está lleno de mucho contenido y demasiados elementos de diseño, sería difícil de interpretar y navegar a través de él.

Para empezar, reducir el contenido de las landing pages. Poner demasiada información en una sola página puede abrumar al usuario e impedirle leer su contenido. Sobre todo, puede ocultar el principal punto de venta de una página y perjudicar las tasas de conversión. Habla con un cliente sobre sus prioridades y, en base a ellas, reduce la información del sitio web. En lugar de ofrecer grandes bloques de texto, concentrate en dividirlos en bloques más pequeños.

Siempre debes dar a cada página un propósito claro. Por ejemplo, al crear una página de destino para un cliente, asegúrate de que tenga un objetivo claro. Proporcionar varios CTAs en una sola página sólo confundirá al usuario e impedirá que se conviertan.

Finalmente, deja mucho espacio en blanco para mantener a los usuarios enfocados. Evita usar múltiples opciones de tipografía, paletas de color, colores de alto contraste, enlaces, imágenes y tamaños de fuentes. También debes dejar de usar los frustrantes videos de reproducción automática.

Simplificar la navegación (Psicología cognitiva en el diseño UX)

Una barra de navegación es uno de los elementos más significativos del sitio web y definitivamente la primera cosa que un usuario verá al aterrizar en una página web. Es por eso que debes mantenerlo simple. En lugar de proporcionar todas las páginas del sitio web de inmediato, primero debe clasificarlas en categorías de alto nivel y subcategorías específicas. Además, céntrate en la optimización de la navegación de tu sitio web para los usuarios de móviles. Mantenlo claro e intuitivo, independientemente del dispositivo que utilice el buscador.

Ofrece una incorporación visual y progresiva

Nunca asumas que los visitantes de un sitio web saben dónde ir a continuación o qué enlaces pulsar. Aquí es donde necesitas ayudarles. Proporcionar la finalización de tareas guiadas es una de las mejores maneras de convertir a los visitantes. En pocas palabras, ofrece una serie de pasos para incitar a un usuario a interactuar con una página web.

Además de hacer que la incorporación del usuario sea más gradual, también deberías visualizar sus viajes. Empieza por crear iconos únicos para que el sitio sea más fácil de entender y más navegable.

Principios visuales de la Gestalt

Gestalt se origina en la palabra alemana «Gestalt», que significa «forma» o «molde». Es una teoría de psicología cognitiva que explora las percepciones de la gente sobre la enorme cantidad de datos que aprenden cada día. Es decir, cuando percibimos objetos complejos, tendemos a agrupar sus elementos y a observarlos como un todo.

Conociendo las leyes comunes de agrupación de elementos, los diseñadores UX organizarán la información del sitio web de forma más lógica, mejorarán las interacciones del sitio web y minimizarán los malentendidos. Ahora, hay algunos principios de la teoría de la Gestalt que deberías entender:

Figura-terreno

La gente subconscientemente separa los elementos de un sitio web en diferentes planos de enfoque. Tendemos a analizar el objeto para entender qué elementos se ponen de forma prominente en el frente y cuáles en el fondo. Utilizamos las capas, el contraste y la jerarquía de la información para enfatizar los elementos más importantes de la página web.

Cierre (Psicología cognitiva en el diseño UX)

Cuando a las formas, imágenes o letras les faltan partes, nuestra percepción tiende un puente sobre esta brecha visual y observa el objeto como un todo. Esto es particularmente usado en diseños de logos, como IBM o NBC. Los medidores y cargadores de terminación son también un gran ejemplo de esta ley.

Continuidad

Esta ley hace hincapié en que el ojo se ve obligado a moverse a través de un objeto y continuar hacia otro. Los elementos que están dispuestos en una línea se consideran a menudo más relacionados que los que están de pie de forma independiente. Hay muchas maneras de utilizar la ley de continuidad en el diseño UX. Por ejemplo, se podría aplicar para crear una barra de navegación intuitiva o cuando se agrupan productos similares o relacionados entre sí.

Proximidad (Psicología cognitiva en el diseño UX)

Los elementos que están cerca parecen estar más relacionados que los que están lejos. Un ejemplo perfecto de ese principio de la Gestalt son las páginas de productos, en las que la cercanía de la imagen de un producto y su título y descripción indican su relación.

Similitudes

La idea detrás de la ley Gestalt de similitud es simple: los elementos que son similares entre sí se agrupan.

La psicología de la persuasión

Recuerda que las noticias de las redes sociales y los correos electrónicos de los clientes online están llenos de mensajes de marcas similares. Al tomar decisiones de compra, los clientes quieren saber en qué se diferencian de sus competidores. Y, aquí es exactamente donde la psicología de la persuasión puede ayudarte.

Conclusiones sobre psicología cognitiva en el diseño UX

Cuando se trata de implementar leyes de psicología cognitiva en el diseño UX, recuerda que no hay una estrategia única para todos. Estas son sólo algunas de las numerosas reglas que te ayudarán a entender cómo se comportan los usuarios online, cómo piensan y qué esperan de las páginas web. Esta es la única manera de crear un sitio web verdaderamente centrado en el usuario que involucre, convierta y retenga a los clientes.

¿Cómo se utiliza la psicología cognitiva en el diseño de UX? Me gustaría que me des tu opinión!

Cdns vs caching: ¿qué son y en qué se diferencian?

Cdns Vs Caching: ¿Qué Son Y En Qué Se Diferencian?

¿Cuál es la diferencia entre cdns y el caching?

Cdns vs caching. Las CDN son redes distribuidas geográficamente de servidores proxy y su objetivo es servir el contenido a los usuarios más rápidamente. El caché es el proceso de almacenamiento de información durante un período de tiempo determinado en un ordenador. La principal diferencia entre las CDN y el caching es que mientras las CDN realizan el caching, no todo lo que realiza el caching es una CDN.

¿Qué es el caching?

Una de las cosas más impactantes que los desarrolladores web pueden usar para mejorar la velocidad de su sitio web es el caching. Caching significa que el contenido va a ser almacenado en algún lugar para que sea fácilmente accesible y no tenga que hacer una llamada externa al origen. Esto reduce el tiempo para que un visitante acceda a los datos de una página web.

Desde que Google ha hecho hincapié en la velocidad del sitio y su efecto en el SEO en los últimos años, ha habido una explosión de plugins de caché, widgets y servicios que prometen aumentar la velocidad de tu página web. Lo que los editores no se dan cuenta es que a veces estos tipos de plugins de caché tienen el efecto opuesto en su sitio. Conocer las similitudes y diferencias entre los tipos de caché puede ser útil para evitar que su sitio se estanque.

¿Qué es el caching de páginas (site caching)?

El almacenamiento en caché de páginas (también conocido como HTTP o caché de sitios) almacena datos como imágenes, páginas web y otros contenidos temporalmente cuando se cargan por primera vez. Estos datos se almacenan en una porción no utilizada de la memoria RAM y no tienen un impacto significativo en la memoria.

caching de páginas

Cuando un visitante regresa al sitio de nuevo, el contenido se puede cargar rápidamente. De la misma manera que los niños pueden memorizar las tablas de multiplicar (4 x 4), una vez que la función es memorizada, la respuesta puede ser recordada casi instantáneamente.

El caching de páginas está limitado en la forma en que se realiza el caching. Sólo puede comunicar el tiempo de almacenamiento de los datos guardados. Los editores pueden establecer reglas de almacenamiento en memoria intermedia que aseguren que los visitantes vean contenido nuevo. De esta manera, las páginas que no han sido cambiadas seguirán siendo servidas desde el caché. Si las imágenes u otros contenidos han sido actualizados, se actualizarán y luego se almacenarán en la caché para visitas posteriores.

Esto sucede mucho con WordPress. Los editores instalan uno de los mejores plugins de caché disponibles (WP Rocket, W3 total cache, etc) y ahora tienen caché. Si las reglas no se establecen correctamente, puede que te hayas dado un sitio más lento. O, has creado una situación en la que tus visitantes no están viendo la versión más reciente de tu sitio.

¿Cómo funciona el almacenamiento en caché del navegador?

El almacenamiento en caché del navegador hace que la experiencia en la web sea mucho más rápida para los sitios que visitamos regularmente. En lugar de solicitar y enviar los datos necesarios para mostrar la página web en el navegador, se almacena en el ordenador. El almacenamiento en caché del navegador es también un tipo de almacenamiento en caché de páginas.

almacenamiento en caché

De esta manera, si alguien ha visitado tu página web antes en un navegador, y puede ser cookeada. La regla que puedes establecer es, «si el contenido no ha cambiado, muestra al visitante la misma versión del sitio que vio antes«. Esto hace que la página web se cargue instantáneamente y es una versión en caché de la página.

Las cachés de los navegadores almacenan grupos de archivos y contenido o uso posterior. Estos tipos de archivos incluyen:

Páginas HTML/CSS
JavaScript
Imágenes/Multimedia

Los usuarios pueden establecer o cambiar la configuración de la memoria caché dentro de su navegador. Todos los principales navegadores (Chrome, Firefox) utilizan el almacenamiento en caché del navegador. Los sitios web tienen la capacidad de comunicarse con el navegador del usuario. Cuando se actualizan las páginas, el navegador sabe que debe reemplazar el contenido antiguo por el nuevo y guardarlo en su lugar.

¿Qué son las reglas de almacenamiento en memoria caché y cómo las establecen?

Las reglas de almacenamiento en memoria caché permiten a los editores establecer parámetros para la frecuencia con que se almacenan en memoria caché los elementos de su sitio. Si un visitante llegó a tu página principal hoy temprano, no tiene sentido que esa solicitud llame al servidor por el mismo contenido. Si el contenido no ha cambiado, la entrega de una versión en caché de tu sitio permite que se cargue instantáneamente. Quieres buenas reglas de almacenamiento en caché del navegador para tus usuarios.

La mayoría de los editores están familiarizados con las reglas de almacenamiento en caché debido a las recomendaciones de las auditorías de rendimiento de Google Lighthouse.

Las recomendaciones de Lighthouse para servir a los activos estáticos con una política de caché eficiente pueden ayudar a mejorar la velocidad del sitio y las experiencias de los usuarios. Algunos desarrolladores logran esto con plugins de caché. Otros que conocen el HTML pueden codificar a mano la directiva «max-age» para indicar al navegador el tiempo que debe almacenar en caché el recurso (en segundos).

HTML pueden codificar a mano la directiva "max-age"

31557600 es un año para tu navegador. 60 segundos * 60 minutos * 24 horas * 365.25 días = 31557600 segundos.

También puedes usar el Cache-Control: código sin caché si el recurso cambia y la novedad importa, pero aún así quieres algunos de los beneficios del caching. El navegador seguirá almacenando en caché el recurso que está configurado como no-cache, pero primero comprueba con el servidor para asegurarse de que el recurso sigue siendo la misma versión antes de volver a buscarlo.

Por ejemplo: si diriges un foro popular y los usuarios siempre están agregando nuevo contenido, una buena política de caché tendría reglas que actualizarían el caché con frecuencia. Tal vez incluso menos de 30 minutos.

Las hojas de estilo CSS/HTML de tu sitio son buenos ejemplos de elementos que pueden tener una «edad máxima» de hasta un año.

También puedes reducir el tiempo de tus puntuaciones de velocidad conectándote previamente a los orígenes requeridos.

¿Cómo funciona un cdn?

Una CDN es específicamente una red de servidores proxy que suelen estar en múltiples lugares que almacenan en caché el contenido de un sitio web. El objetivo de las CDN es entregar el contenido de manera eficiente, y actúan como una capa entre el usuario y el servidor. Esto evita que todas las solicitudes vayan al mismo servidor. Los servidores proxy de los CDNs distribuyen las solicitudes espacialmente en relación con el usuario final en todo el mundo.

Hay muchos servicios de CDN. Los más populares son Cloudflare, Akamai y MaxCDN (ahora StackPath).

¿Qué es el caché en el límite con cloudflare?

Cloudflare añade una capa adicional de almacenamiento. Tienes el caching en tu sitio que puede ocurrir en los navegadores de los usuarios, pero luego tienes un cache CDN.

Por ejemplo: Un usuario ha estado en tu sitio antes, pero la regla de caché en tu navegador dice, «Esta página ha sido actualizada». Esto significa que la solicitud tendrá que ir al servidor de origen. Si el usuario está en Nueva York, y el servidor de origen está en Singapur, es una llamada larga. Sin embargo, un CDN sabe que debe recuperar el contenido de tu sitio cada vez que se actualiza. El sitio actualizado está ahora almacenado en el servidor CDN más cercano en Atlanta. Esto reduce significativamente el tiempo de carga para las visitas posteriores.

Cloudflare tiene centros de datos dedicados que los ISP les alquilan en más lugares del mundo que los que tiene un CDN típico. Cloudflare te da esta capa extra de caching llamada caching en el límite.

Resumiendo la diferencia Cdns vs caching

Es importante recordar que aunque hay una diferencia entre los CDN y el caching, comparten el propósito de hacer la experiencia del usuario en la web más rápida y fluida.

El almacenamiento en caché ocurre cuando se usa un servicio CDN. Sin embargo, como los CDN son proxies inversos y se asientan como una capa entre el usuario y el servidor de origen, la velocidad de almacenamiento en caché va a ser mayor que la de los plugins de optimización de velocidad.

Los plugins siempre serán un poco más lentos debido a la naturaleza de su construcción. El código que comprende estos plugins es típicamente creado por un tercero. Este código tiene que hacer ocasionalmente llamadas externas a dondequiera que los archivos del plugin estén alojados. Mientras que el caching a nivel CDN (nivel de servidor) se encuentra más cerca del servidor de origen, y tiene que hacer menos peticiones. Esto acelera la experiencia del usuario y mejora las métricas como TTFB.

Adobe XD vs. Sketch vs. Figma – Las mejores herramientas de diseño IU/UX

Adobe XD Vs. Sketch Vs. Figma – Las Mejores Herramientas De Diseño IU/UX

Herramientas de diseño IU/UX. Entre los mayores acontecimientos de interés para los diseñadores web en este año fue la explosión de las herramientas de diseño de interfaz de usuario. Estas herramientas de diseño IU/UX señalan una transición en la forma de crear interfaces de usuario modernas. Podría ser que los días de crear maquetas de PSD en Photoshop estén llegando a su fin.

¿No estás convencido? Tanto Sketch como Figma han conseguido seguidores muy fieles en los últimos años. Pero quizás el mayor desarrollo es que Adobe, el gigante del software de diseño, saltó al juego con su producto XD. Esto demuestra que la forma en que trabajamos está cambiando hacia herramientas de diseño IU/UX más especializadas.

Con esto en mente, echemos un vistazo a cada una de estas «tres grandes» aplicaciones. Cubriremos algunas características principales así como otros factores que pueden influir en cuál es la que mejor se ajusta a sus necesidades.

¿Qué hace que las herramientas de diseño IU/UX sean únicas?

Durante muchos años, los diseñadores web usaron el ya mencionado Adobe Photoshop para crear maquetas de sitios web. Esto era preferible a saltar directamente al código ya que nos permitía construir una interfaz muy detallada y hacer ediciones fácilmente – sin tener que destrozar el HTML, CSS y similares.

Mientras que eso puede ser un flujo de trabajo efectivo, esta nueva clase de aplicaciones tiene características específicas para el diseño web. Los elementos de la interfaz, como los menús en una página web y los botones, son interactivos: puedes ver los efectos dinámicos o hacer clic para ir a otras páginas.

Además, las interfaces construidas con una aplicación de diseño IU/UX son responsive. Esto significa que puedes ver cómo funcionan en diferentes resoluciones de pantalla. Ya no es necesario crear un archivo PSD completamente separado para teléfonos, tabletas y dispositivos de escritorio.

Y hay una tonelada de kits y plantillas de interfaz de usuario prefabricadas disponibles, lo que proporciona una ventaja en el proceso de diseño.

En esencia, ya no estás creando una pantalla estática, sino un prototipo totalmente realista. Ahora, veamos las aplicaciones!

Sketch (herramientas de diseño IU/UX)

Sketch herramientas de diseño IU/UX

La primera de estas nuevas herramientas que llegó al mercado, Sketch, fue lanzada inicialmente en 2010. Esto le dio a la aplicación una ventaja sobre las otras en este resumen. Por lo tanto, también significa que hay una tonelada de recursos disponibles.

Hay una biblioteca de varias extensiones que traen nuevas capacidades y mejoran el flujo de trabajo. La funcionalidad puede ir desde el ajuste de varios elementos de diseño hasta la vinculación con servicios de fotografía de stock para facilitar las importaciones.

Entre sus principales características, encontrarás:

Edición de imágenes vectoriales;
Diseños sensibles a través de Smart Layouts;
Soporte para fuentes variables;
Colaboración con colegas y clientes;
Añade fácilmente datos basados en texto e imágenes a tu demo;
Servicio Sketch Cloud para compartir sus creaciones;
Bibliotecas para compartir recursos (símbolos, imágenes, texto, estilos) en los documentos;
La posibilidad de crear y utilizar plantillas;
Un gran número de plugins disponibles;

Sketch es una aplicación de escritorio que ofrece una prueba gratuita de 30 días, pero que cuesta 99 dólares por una licencia comercial. Las renovaciones anuales están disponibles a un precio de descuento.

Una gran advertencia aquí es que Sketch solo está disponible para MacOS. Si usas Windows o Linux, no podrás unirte a la diversión.

Figma (herramientas de diseño IU/UX)

Figma herramientas de diseño IU/UX

Lanzada por primera vez en 2016, Figma es una aplicación basada en un navegador que promueve un enfoque de colaboración en el diseño. La ventaja es que se puede acceder fácilmente en cualquier momento, independientemente del sistema operativo.

Además, cuando compartes proyectos con otros, lo haces con un enlace en vivo. Esto significa que no tendrás que exportar primero a un PDF u otra imagen. Lo que están viendo es exactamente lo que has creado.

Además, Figma ha sido construida para soportar la colaboración en tiempo real. Los miembros del equipo pueden comunicarse entre sí y gestionar sus propias tareas del proyecto. El historial de versiones incluido te permite retroceder los cambios, si es necesario.

Más allá de eso, encontrarás:

La capacidad de crear estilos consistentes y aplicarlos a través de los proyectos;
Copiar CSS directamente de los archivos de diseño;
Una biblioteca de recursos de búsqueda;
Permisos de usuario;
Crear prototipos animados e interactivos;
Función de autodiseño para diseños sensibles;
Una biblioteca de plugins, y la posibilidad de crear tus propios plugins;

Figma tiene un plan gratuito que permite 3 proyectos, 2 editores y un historial de versiones de 30 días. Los planes comerciales completos empiezan en 12 dólares al mes (facturados anualmente).

Adobe XD (herramientas de diseño IU/UX)

Adobe XD herramientas de diseño IU/UX

Ahora, por el chico nuevo del barrio. Adobe XD, que salió de la versión beta en octubre de 2017, está dirigido a diseñadores que quieren crear sitios web, aplicaciones para móviles o incluso juegos. Cuenta con un sistema incorporado para la colaboración, llamado «Coedición», y la posibilidad de que los clientes y colegas proporcionen comentarios.

Al igual que sus competidores, XD permite reutilizar los componentes de diseño una y otra vez. También puede editar un componente una vez y empujarlo a todas las instancias, permitiendo una mejor consistencia en su diseño.

Tal vez la mayor ventaja aquí es el hecho de que Adobe XD juega bien con otras aplicaciones de Adobe. Puedes, por ejemplo, abrir y editar imágenes en Photoshop directamente desde XD (sólo tienes que hacer clic con el botón derecho del ratón en la imagen para abrirla). Cualquier cambio que hagas en la imagen se reflejará automáticamente en XD también. También importa archivos de Adobe Illustrator, Photoshop e incluso Sketch.

Otras características que vale la pena explorar incluyen:

Los estados permiten editar los componentes del diseño en base a las interacciones del usuario, como el hover o el click;
Replicar fácilmente los elementos de diseño;
Integración de fuentes de Adobe;
Crear interacciones y disparadores para sus prototipos;
Previsualizar aplicaciones para móviles en dispositivos reales a través de una aplicación complementaria;
El historial de documentos te permite volver a las versiones anteriores;
Activos fáciles de desarrollar como CSS, colores, activos descargables;
Extensiones que refuerzan la funcionalidad y se vinculan con servicios de terceros;

Adobe XD es un software de suscripción. Requiere una membresía completa de Creative Cloud o, puedes elegir suscribirte a XD por sí mismo por $9.99 al mes. Si quieres probarlo primero, hay un Plan de Inicio de XD gratuito que te permitirá experimentar con algunas limitaciones. Puedes ejecutar la aplicación en MacOS o Windows.

Tomando la decisión correcta

Cada una de estas herramientas tiene su propio y convincente conjunto de características. De esa manera, es difícil decir que te equivocarás con alguna de ellas.

Pero, para reducir las opciones, piensa en cómo y dónde planeas usar la aplicación. Por ejemplo, si eres usuario de Windows, no podrás usar Sketch. Si prefieres algo basado en un navegador y/o usar Linux, entonces Figma es tu elección. Si eres un usuario de Mac que quiere algo con muchas opciones de plantillas y plugins, Sketch es el ganador. A los clientes fieles de Adobe les encantará la interoperabilidad de XD.

De lo contrario, encontrarás una serie de similitudes. Cada aplicación tiene al menos alguna capacidad de colaboración. Todas crean gráficos vectoriales y ofrecen bibliotecas de activos. Todas son expertas en crear un sistema de diseño. Además, todas son extensibles en un grado u otro.

Independientemente de la dirección que tomes, puedes estar seguro de una cosa. Estarás a la vanguardia del diseño web.

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.

Las 10 mejores herramientas para la experiencia de usuario

Las mejores herramientas para mejorar la experiencia de usuario

Echamos un vistazo a las herramientas para mejorar la experiencia de usuario para mejorar tu página web.

Las pruebas de usuario son una parte esencial del diseño UX, por lo que es clave tener las mejores herramientas para mejorar la experiencia de usuario. Si entiendes cómo interactúan los diferentes tipos de usuarios con tu diseño, puedes asegurarte de que estás ofreciendo la mejor experiencia de usuario posible. Puedes averiguar rápidamente por qué los visitantes no se están convirtiendo en usuarios o clientes habituales, y mejorar su experiencia haciendo ajustes esenciales.

El proceso de pruebas de usuario puede llevar mucho tiempo. Imagínate tener tu propio laboratorio de pruebas, contratar y despedir a tus propios consumidores objetivo y desarrollar el hardware necesario: costoso y de largo recorrido. Afortunadamente, hay un montón de herramientas de pruebas de usuario que te ayudará a evitar todo eso. Ofrecen las herramientas para supervisar el comportamiento de los usuarios y recopilar comentarios importantes para que puedas resolver cualquier problema y crear tu diseño en la mejor versión posible.

Elige la mejor opción en herramientas para mejorar la experiencia de usuario

En este artículo, echaremos un vistazo -sin ningún orden en particular- a algunos de los programas de pruebas de usuario más útiles y populares para que puedas empezar. Cuál de ellas se convierte en tu herramienta de pruebas de usuario dependerá en gran medida de tus necesidades y de la interfaz que más te atraiga. Te sugiero que pruebes las versiones de prueba gratuitas de esta lista, para ver qué tan bien se adapta cada una de ellas a tus necesidades antes de dar el paso.

01. Userlytics

Userlytics

Userlytics es la plataforma de pruebas de usuarios remotos ideal

Desde: $49

Userlytics es la plataforma de pruebas de usuario remota perfecta, diseñada para permitirte registrar las interacciones de los usuarios con un sitio web, una aplicación móvil o un prototipo. Esta herramienta utiliza un software de pruebas remotas picture-in-picture para capturar la expresión facial y los comentarios de audio del usuario mientras prueba tu sitio, con el fin de proporcionar una imagen completa de cómo responde y reacciona en tiempo real.

No se necesita ningún hardware ni configuración complicada para empezar a utilizar Userlytics. Es una excelente manera de descubrir de forma rápida y económica los puntos flojos de tu aplicación móvil, o descubrir por qué los usuarios están haciendo lo que están haciendo en tu sitio web.

02. UsabilityHub

UsabilityHub Herramientas para mejorar la experiencia de usuario

Pon tu diseño delante de los nuevos usuarios y obten comentarios rápidamente

Desde: gratis

¿Debería colocar la barra de navegación a la izquierda o a la derecha? ¿Prefiere la gente el diseño A o el diseño B? Tomar decisiones de diseño puede ser frustrante, especialmente cuando se trata de averiguar qué diseño es la mejor solución. Aquí es donde entra en juego UsabilityHub: Está diseñado para ayudarte a resolver cualquier debate sobre diseño de una vez por todas. UsabilityHub incluye cinco paquetes de pruebas diferentes que te permiten capturar y analizar las preferencias de los usuarios y tomar una decisión segura.

Simplemente carga una imagen de la interfaz de tu página web, la interfaz de usuario de la aplicación móvil o el diseño del software y asigna una tarea para que los usuarios la completen, luego espera los resultados. UsabilityHub proporcionará un informe que incluye mapas térmicos que indican dónde han hecho clic los usuarios. Incluso puede configurar una prueba de cinco segundos para capturar la primera impresión del usuario de tu diseño.

Con este software de pruebas de usuario también puedes cargar múltiples diseños y preguntar a los usuarios qué versión prefieren y por qué, crear pruebas de navegación para determinar los puntos de abandono (ideal para visitas de usuarios complicados), y organizar una encuesta para recopilar los comentarios de los usuarios.

Hay una opción básica gratuita de esta herramienta – sólo tendrás que pagar si quieres que UsabilityHub te proporcione sujetos de prueba.

03. Lookback Herramientas para mejorar la experiencia de usuario

Lookback mejorar la experiencia de usuario

Habla con los usuarios mientras exploran tu página web (no después)

Desde: $49/mes
Gratuito: prueba

Lookback es un software de grabación de experiencia de usuario simplificado. Con él puede grabar el ordenador o dispositivo móvil de un usuario de forma interna o remota, sin necesidad de equipo adicional.

Lo que hace que Lookback sea único es que puede unirse a la sesión de pruebas en vivo y hablar con el usuario mientras éste explora tu diseño, hace preguntas o realiza una entrevista. Muchos otros programas de pruebas de usuario sólo proporcionan un informe o grabación después de que las pruebas han sido completadas, pero con Lookback, puedes programar pruebas y verlas a medida que se llevan a cabo en tiempo real, y hablar con el usuario directamente con preguntas de seguimiento. Es una manera fácil de obtener una respuesta inmediata.

04. TryMyUI

TryMyUI

Haz que tu sitio web sea probado por usuarios reales y vea los resultados

Desde: gratis (pago por resultado)

TryMyUI es un servicio de pruebas de usabilidad destinado a ayudarte a descubrir cómo puedes mejorar tu sitio web o aplicación móvil. Con él, puedes configurar tu propio test personalizado con tareas específicas para que los usuarios las lleven a cabo, y encontrar la base de usuarios adecuada a través de una amplia gama de datos demográficos. También puedes ver la grabación de los usuarios que realizan las pruebas que tu has establecido.

Alternativamente, puede utilizar el servicio TryMyUI Stream. Esto se instala en tu sitio web para recopilar información en tiempo real sobre cómo interactúa el usuario, lo que te permite encontrar errores e identificar los UX defectuosos con el buscador de frustraciones de la IA de Stream. Esto ayuda a identificar los caminos que están tomando los usuarios y cuáles conducen al éxito y al fracaso.

05. Hotjar

Hotjar

Hotjar es una plataforma de análisis y retroalimentación todo en uno

Desde: gratis

Hotjar contiene una gran cantidad de herramientas útiles para ayudarle a analizar y recibir comentarios útiles para tu página web. Crazy Egg (número 8 de nuestra lista) puede ser el software de pruebas de usuario que te viene a la mente cuando piensas en mapas de calor, pero Hotjar también los tiene. Estos te ayudan a ver a qué partes de tu interfaz están atrayendo a tu audiencia, y están obteniendo la mayor cantidad de clics.

Con Hotjar también puedes ver grabaciones de las rutas del ratón de las personas para indicar exactamente cómo están navegando por tu sitio, y la utilidad Conversion Funnels te permite saber en qué momento la gente abandona un proceso de compra o registro. Estas características pueden ser muy perspicaces. El embudo te ayuda a identificar exactamente qué parte de tu sitio necesita ser ajustado para obtener mejores resultados de tu diseño.

Hay algunas otras grandes funcionalidades dentro de esta herramienta, incluyendo el análisis de formularios y las encuestas de retroalimentación. Hotjar definitivamente debería estar en su lista de software de pruebas de usuario.

06. Reflector

Reflector experiencia de usuario

Transmitir por secuencias una pantalla de móvil a tu ordenador

Desde: $14.99 Prueba gratuita

Screen mirroring app Reflector no está diseñado específicamente para pruebas de usabilidad, pero es útil para probar cómo funciona el diseño de tu aplicación en móviles. Esta herramienta envía de forma inalámbrica la pantalla de tu teléfono o tableta a tu PC o Mac para que puedas ver cómo la gente utiliza tu aplicación. Reflector también incluye capacidades de grabación para que pueda revisar tus sesiones de pruebas más tarde o compartirlas y presentarlas a una audiencia.

07. UserTesting

UserTesting

Contratar y registrar fácilmente a un usuario que interactúa con tu sitio web

Desde: $49 por sesión de video (hasta 15 sesiones)

Una de las mejores y más sencillas maneras de registrar a los usuarios que interactúan con tu sitio web, junto con sus respuestas, es a través de video utilizando UserTesting.

Con este software de pruebas de usuario puedes elegir tu público objetivo y asignar a los usuarios una tarea a realizar en tu sitio web o aplicación. Tu prueba puede ser ejecutada en un escritorio, tableta o dispositivo móvil. A cambio, UserTesting registrará las opiniones de personas reales mientras interactúan con tu web/app, para que puedas entender realmente por qué los usuarios hacen lo que hacen. Puedes probar UserTesting gratuitamente.

08. Crazy Egg Herramientas para mejorar la experiencia de usuario

Crazy Egg

Los mapas de calor te ayudan a identificar lo que los usuarios están haciendo en realidad

Desde: $29/mes
Prueba gratuita

Descubre cómo interactúan los visitantes en tu página web con gafas de rayos X utilizando Crazy Egg. Esta herramienta de mapas de calor te ayuda a entender lo que la gente está haciendo en tu sitio web y por qué los visitantes pueden no estar convirtiéndose en usuarios o clientes regulares. Los mapas de calor identifican los objetos de tu web en los que se hace clic y las fuentes de tráfico desde las que se hace referencia a ellos.

Una característica extremadamente útil en Crazy Egg es el mapa de desplazamiento, que identifica hasta qué punto los visitantes se desplazan por una página antes de abandonarla por completo. Otras características útiles incluyen la capacidad de monitorizar el número de clics en cada elemento de una página y de realizar pruebas A/B.

09. Inspectlet

Inspectlet

Registra a los usuarios activos en tu web como si estuvieras mirando por encima de sus hombros.

Desde: gratis

Inspectlet es un software de pruebas de usuario que registra a tus visitantes y monitorea exactamente lo que están haciendo en tu página web, incluyendo los enlaces en los que hacen clic, el movimiento del ratón, el desplazamiento y las pulsaciones de teclas. Puedes observar a cada visitante como si estuvieras mirando por encima de su hombro.

Además de registrar la interacción del usuario en tu web, Inspectlet incluye un mapa de calor, que te permite identificar las secciones a las que los visitantes están prestando atención. El mapa de calor también incluye el seguimiento de los ojos, información sobre qué es lo que más se ha pulsado y hasta qué punto los visitantes se desplazan por las páginas. Y como ventaja adicional, la herramienta de análisis de formularios destaca qué elementos son los más problemáticos para los visitantes y en qué aspectos están fallando más.

10. Optimizely

Optimizely

Optimice el UX de tu web con pruebas A/B

Precio a petición

Las pruebas A/B son una forma extremadamente efectiva de probar los cambios planificados en una página web en comparación con el diseño existente para determinar qué versión produce los resultados más positivos. Google ofrece su propio software de pruebas A/B llamado Google Optimize, que te permite realizar experimentos en tu sitio web.

Sin embargo, un software más robusto para pruebas A/B es Optimizely. Esta herramienta ofrece varias características fáciles de usar para ayudarte a construir tus pruebas, incluyendo pruebas multivariadas – una técnica para probar múltiples variables en una página web. Puedes crear experiencias personalizadas y dirigirte a audiencias específicas al presentar nuevos diseños a los visitantes, incluyendo la selección de diferentes URLs, navegadores y regiones geográficas.

Optimizely es un conjunto de herramientas, pero está dirigido a negocios serios, lo que se refleja en el precio.

Mejora tu página web con esta recomendación

Si te ha gustado este artículo y estás interesado en mejorar tu página web, te invito que leas este artículo sobre las 7 Reglas Del Diseño Web Que Siempre Hay Que Cumplir.

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.

7 reglas del diseño web que siempre hay que cumplir

reglas del diseño web

 

Reglas del diseño web

El diseño web puede ser un mundo complejo. Está lleno de reglas, terminología y técnicas que rigen lo que hace que una página web excelente logre los objetivos para los que fue diseñada, y otra que no. Sin embargo, el diseño web puede ser complicado de dominar si no tienes la capacitación adecuada. A pesar de su complejidad, el diseño web se está convirtiendo en una habilidad cada vez más valiosa en nuestro mundo digital. Aprender sobre los fundamentos del diseño web te ayudará a construir y refinar la marca de tu empresa.

1. Evita los problemas de legibilidad

Si los usuarios no pueden leer correctamente el texto de tu página web, tu mensaje no se está difundiendo bien. Tener texto legible en tu página web es increíblemente importante, pero hay varios errores que los diseñadores novatos cometen para disminuir la legibilidad.

Las malas opciones de color del texto pueden ser fácilmente contraproducentes. Por ejemplo, una página web puede tener un texto blanco sobre un fondo de color claro, lo que puede dificultar su lectura. Del mismo modo, tener texto oscuro sobre un fondo oscuro también dificulta la lectura. El texto colocado sobre una imagen (como un banner) también puede dificultar su interpretación.

Para evitar esto, usa el contraste de color apropiado. Utiliza texto oscuro sobre el fondo blanco o texto claro sobre un fondo oscuro. Si bien ambas son buenas opciones, el texto oscuro sobre un fondo claro tiende a proporcionar el mejor contraste, pero es más tenso para los ojos cuando se lee durante un largo período de tiempo. Si estás colocando texto sobre una imagen, usa una superposición para aumentar el contraste entre el texto y la imagen. Una superposición oscura ayudará a que el texto de color claro sobresalga, mientras que usar una superposición de colores más claros hará que el texto oscuro aparezca.

Además, sería mejor si eligieras fuentes que sean fáciles de leer y no demasiado pequeñas. Una fuente complicada que está escrita en cursiva o con serif puede ser extremadamente difícil de leer, especialmente para usuarios mayores. Si el texto es demasiado pequeño, te encontrarás con el mismo problema. Elige fuentes claras, sans-serif y tamaños de letra grandes para mejorar la legibilidad de tu página web.

2. Aplicar jerarquía visual

Otro concepto fundamental en el diseño web es la idea de jerarquía visual. Este es el orden en que un usuario procesa la información en una página web .

Hay una serie de técnicas que puedes utilizar para facilitar a los usuarios la comprensión de la jerarquía de tu contenido, como el uso de diferentes tamaños de fuente y color. Por ejemplo, el título del artículo que estás leyendo en este momento es mucho más grande que el título de la sección. Además, el encabezado de esta sección es más grande que la fuente del texto. Esto se debe a que queremos que los usuarios lean el título primero y luego se muevan hacia abajo en la página. Los diferentes tamaños de nuestros títulos, encabezados y texto ayudan a guiar a los espectadores a medida que interactúan con nuestro contenido.

El color es útil para establecer la jerarquía visual también. Por ejemplo, los botones en una página de inicio que les dicen a los usuarios que deben «registrarse» o «comprar ahora» pueden ser de un color más brillante que los otros colores de la página. Los enlaces también pueden tener un color diferente al del texto normal.

Piensa en cuál es tu objetivo final para tu sitio web. ¿Quieres que los usuarios compren tus productos? ¿Quieres que se registren a tu newsletter? ¿Programar una consulta gratuita? Cualquiera que sea el caso, puede utilizar la jerarquía visual para guiar a los usuarios hacia los puntos de venta de tu página web.

3. No utilices muchas fuentes diferentes

Mientras estamos en el tema de las fuentes, se debe tener en cuenta que la regla general es utilizar tres fuentes o menos. Muy a menudo, una fuente es suficiente. En pocas palabras, tener demasiadas fuentes hará que tu página se vea desestructurada y poco profesional, por decir algo.

También debes asegurarse de que tus opciones de fuente sean cohesivas. Además, deben ser apropiadas para tu industria y el mensaje que estás tratando de transmitir. Las fuentes Sans serif son particularmente útiles para transmitir una imagen moderna y también son ideales para productos digitales (como eCommerces). Evita las fuentes exageradas, infantiles o no profesionales a toda costa.

4. Tener una CTA visible

Una de las primeras cosas que los usuarios deberían ver cuando visitan tu sitio web es una llamada a la acción (CTA). Por lo general, este es un botón en la página principal de tu pagina que les dice «Compre ahora», «Obtenga más información» o «Programe una consulta». Su CTA es tu punto de venta e impulsará el compromiso del cliente.

Algunos sitios web entierran su CTA en la parte inferior de la página u olvidan incluirla en absoluto. Ya que el CTA genera la respuesta del cliente que está buscando, asegúrate de que sea uno de los primeros elementos que alguien vea.

5. Incluye tu información de contacto

Parece obvio, ¿verdad? Pues te sorprenderías de cuántas empresas se niegan a incluir su información de contacto en sus páginas web. Una de las razones principales por las que los visitantes visitan tu sitio es ponerse en contacto con tu empresa. Si no pueden encontrar la información que están buscando dentro de los primeros segundos de visitar tu página, se irán.

Por este motivo, asegúrate de incluir información de contacto clara y fácil de encontrar en tu sitio web. Asegúrate de incluir cosas tales como:

  • Tu número de teléfono
  • Dirección comercial de tu empresa
  • La dirección postal de tu empresa, si es diferente de la dirección comercial
  • Direcciones de correo electrónico de los contactos clave (o al menos una dirección de correo electrónico genérica)

También puedes configurar un formulario de contacto en tu página web para que los usuarios completen y envíen consultas. Sin embargo, aún debes incluir tus detalles completos de contacto, como tu número de teléfono y direcciones físicas. Recuerda que algunos usuarios preferirán llamarte o visitar tus instalaciones. El porcentaje de usuarios que prefieren usar mecanismos de contacto «tradicionales» variará según el tipo de usuarios a los que se dirige. Cuanto más fácil sea para que las personas se comuniquen contigo, más eficaz será tu web.

6. Evitar las distracciones automáticas

Si bien el video, el audio y otras formas de medios digitales pueden agregar vida y compromiso a una página web, evita la función de reproducción automática. Incluir un video o audio de reproducción automática en tu web puede dificultar que los usuarios naveguen por tu sitio. Además, estas características pueden dificultar la búsqueda de la CTA.

Además, la reproducción automática de audio o video puede ser molesta y frustrante para los espectadores. ¿Alguna vez has abierto un enlace a una página web en tu teléfono, solo para que el audio alto proveniente de un video incorporado comenzase a reproducirse de repente? Esto no solo puede ser discordante, sino que los videos en reproducción automática también pueden ser incómodos y vergonzosos si estás en público.

La solución a esto es bastante sencilla. En lugar de habilitar las funciones de reproducción automática, simplemente permita a los usuarios hacer clic en el botón de reproducción.

7. Corrección, Corrección, Corrección

¿Alguna vez has estado navegando por una página web y has encontrado un error tipográfico deslumbrante? Ese error tipográfico puede sacarte del contenido del sitio web y hacer que pienses más en el error que la compañía dejó de cometer. Si bien los elementos visuales de un sitio son cruciales para su diseño general, el texto es igualmente importante (si no más).

Los accidentes de puntuación, así como los errores gramaticales y ortográficos, pueden disminuir la credibilidad de tu empresa. Mientras que unos pocos errores tipográficos de vez en cuando no necesariamente significan un desastre, muchos errores a lo largo del tiempo pueden dañar la imagen profesional que intentas crear.

Cuando diseñes tu sitio web final, asegúrate de tomarte un tiempo adicional para revisar todas las secciones. Haz que un colega o dos también lo revisen, en caso de que accidentalmente se haya perdido algún error. Tan pronto como veas un error tipográfico, corrígelo! Asegúrate de mantener tu página web limpia y libre de todos los errores para que no distraigan de tu diseño y contenido.

El diseño web es una habilidad compleja de dominar, y tal vez uno podría decir que es mejor dejarlo en manos de los expertos. Sin embargo, si realizas el trabajo tú mismo, la familiaridad con estas reglas te permitirá saber qué funciona y qué no funciona cuando evalúas la calidad y la eficacia de tu página web.

Últimas tendencias en navegación web 2018

Navegación web

 

La navegación web es la clave para una buena experiencia de usuario (UX). Los usuarios confían en la navegación digital intuitiva para localizar información útil, explorar la historia de una marca y tomar decisiones de compra.

La navegación confusa puede ser suficiente para hacer que un usuario se convierta en un rebote. A medida que los expertos en UX aprenden más sobre cómo los consumidores interactúan con el contenido digital, ha aumentado la cantidad de formas en que los diseñadores combinan y combinan los elementos de navegación. Elegir la configuración de navegación correcta para sus sitios móviles y de escritorio puede transformar su UX e impulsar su negocio.

La consistencia es Rey

Si hay algo en lo que todos los expertos en navegación están de acuerdo, es la importancia de la coherencia. La navegación debe ser coherente en todo el sitio y disponible en todas las páginas.

Un menú de navegación inconsistente genera confusión. Los usuarios no deberían tener que buscar menús de navegación ocultos o intentar demasiado para encontrar la página deseada. No importa qué tipo de configuración de navegación elija, debe priorizar la coherencia. Haga esto centrándose en algunos aspectos principales:

1. El menú debe estar presente en cada página. No deje a los usuarios varados en una página sin salida. El menú debe estar disponible en cada página de su sitio web. Si las opciones del menú tienen múltiples niveles, deje migas de pan para que los visitantes puedan ver la jerarquía de su ubicación en el sitio. Las migas de pan son particularmente importantes cuando los usuarios encuentran la página a través de una fuente externa.

2. Haga que cada elemento del menú reaccione de la misma manera. Si la pestaña Acerca de aparece en una lista de opciones diferentes, también lo deberían hacer las otras pestañas. Si uno es un enlace a una página de aterrizaje, haga los otros enlaces también. Cada elemento en el menú de navegación debería reaccionar de la misma manera al toque de un usuario (o hacer clic).

3. Los elementos deben ser intuitivos. Existen ciertos elementos de diseño de sitios web a los que los usuarios han llegado para conectarse con un significado. Por ejemplo, colocar una flecha en un elemento del menú generalmente significa que hay una lista desplegable que va con el artículo. Cree elementos que ayuden a los usuarios a saber qué esperar de la navegación y manténgala igual en todo su sitio.

Etiquetas claras y concisas

El menú de navegación no es el lugar para ser inteligente con su contenido. Los usuarios confían en el menú para recorrer su sitio web. El propósito del menú es proporcionar dirección. No necesita entretener o impresionar a los visitantes del sitio.

Mantenga las etiquetas de menú simples, claras y concisas. La mayoría de los sitios web usan las mismas etiquetas de una palabra por una razón. Los usuarios están familiarizados con opciones como Inicio, Productos, Acerca de, Blog y Contacto. Saben lo que significan las etiquetas y qué esperar cuando eligen una opción.

Alternativas al menú Hamburger

¿Recuerda el gran debate del menú de hamburguesas de 2014 para el diseño de sitios para dispositivos móviles? Está en curso, con los diseñadores de sitios web modernos a ambos lados del problema.

Muchos sitios web móviles todavía usan la hamburguesa de confianza, porque esto es lo que buscan la mayoría de los usuarios de dispositivos móviles. La «hamburguesa» es el ícono del menú que consta de tres líneas horizontales apiladas. Los diseñadores lo usaron inicialmente porque conserva espacio en pantallas móviles más pequeñas. Muchos diseñadores hoy en día están probando alternativas a la hamburguesa, tales como:

Pestañas
Navegación desplazable
Navegación inferior
Opciones «Mostrar más»
Lista en línea con encabezados
Control segmentado

Las alternativas al menú de hamburguesas han tenido un gran éxito en muchos sitios, especialmente aquellos con un número reducido de opciones. El consenso entre muchos diseñadores es que si puedes mostrar la navegación, muéstrala.

El buscador en el menú

Una característica que puede mejorar la usabilidad es el ícono de búsqueda (generalmente una lupa). Si los usuarios buscan la barra de búsqueda, ya están perdidos lo suficiente como para necesitar una función de búsqueda directa. No empeore la situación al ocultar la opción de búsqueda, o al omitirla por completo.

La barra de búsqueda ofrece a los usuarios una salida cuando están perdidos, o una ruta más directa a la información para usuarios con tareas específicas en mente. Quitar la barra de búsqueda puede provocar visitas frustradas que deciden buscar en otro lado en lugar de buscar en su sitio lo que quieren.

Coloque la barra de búsqueda en algún lugar claramente visible desde cada página. La mayoría de los usuarios mira hacia la esquina superior derecha de la opción de búsqueda, o al menos cerca del menú.

El menú del carrusel

Los menús de carrusel son cada vez más populares en los sitios de tipo blog y aquellos que publican actualizaciones periódicas e historias de noticias.

El «carrusel» hace referencia a un menú en la parte superior de la página que muestra los artículos más recientes que el sitio ha publicado. Muchos sitios de noticias y blogs usan imágenes en miniatura en el carrusel para llamar la atención y facilitar la selección de un artículo.

La pestaña del carrusel también tiene el título del artículo y / o una breve descripción de lo que hay adentro. Básicamente sirve como una presentación de diapositivas con enlaces clicables para que los usuarios puedan navegar fácilmente. Los menús de carrusel son excelentes para exhibir el contenido más reciente y para mantener a los usuarios en su sitio con una variedad de otros artículos interesantes que quizás quieran leer en un sitio sencillo.

Mega Menus

Otra tendencia que barre el diseño de navegación es el mega menú. Como su nombre lo indica, este menú tiene un tamaño más grande, ocupando la página vertical y horizontalmente. Estos menús se hicieron populares entre los blogs de estilo de revista , pero más marcas los están utilizando para hacer una declaración con sus menús.

El mega menú es ideal para un sitio con múltiples niveles de navegación. En lugar de confundir a los usuarios con una docena de menús desplegables, expanda el menú en la mitad de la página y configure las opciones con claridad, usando imágenes y miniaturas, si lo desea.

El mega menú también es ideal para sitios que publican artículos frecuentemente porque el diseñador puede usar columnas diferentes para historias recientes y enlaces relacionados.

Los menús de navegación fijos permanecen en su lugar cuando un usuario se desplaza hacia abajo en la página. Este tipo de menú también se denomina navegación adhesiva, y aparece como una barra de navegación superior.

El menú siempre está presente para que el usuario cambie las páginas. Facebook utiliza este formato para permitir a los usuarios ver sus perfiles o revisar las notificaciones mientras se desplazan por sus fuentes de noticias. El desplazamiento infinito con una barra de navegación fija puede ser apropiado si su sitio web tiene una sensación social, o si el sitio trata con una gran cantidad de datos.

No hay duda de que la navegación de un sitio afecta la experiencia del usuario. ¿Los usuarios tendrán una experiencia positiva o negativa? La optimización de su configuración de navegación con las últimas tendencias para el diseño de dispositivos móviles y de escritorio puede conducir a una mejor UX completa y a un mejor éxito comercial. Considere actualizar su sitio web para incluir algunas de las mejores prácticas de navegación del sitio.

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