• Saltar a la navegación principal
  • Skip to content
  • Saltar a la barra lateral principal

Usabilidad y Experiencia de Usuario

Reflexiones sobre Arquitectura de Información, Usabilidad y Experiencia de Usuario

  • Inicio
  • Mi portfolio
  • Sobre mi

Usabilidad

Usabilidad y Experiencia de Usuario en la paginación web

7 agosto, 2017 By David Gil Ripoll 1 comentario

¿Qué tipo de paginación web es mejor, un scroll infinito o una paginación establecida? Puede que durante los últimos años hayas visto cómo diferentes tipos de páginas están implementando el scroll infinito en sus sitios porque aparentemente puede parecer elegante y con una buena experiencia de usuario. Sin embargo, debes saber que dependerá del tipo de página que tengas que sea más o menos efectiva, o incluso del tipo de comportamiento en el sitio web del usuario, sobretodo si es un ecommerce, provocando mejor o peor ux e incluso problemas de usabilidad. Veamos a continuación los distintos tipos.

 

Tipos de paginación web

Paginación numerada

¿Qué es una paginación numerada? Es la que tradicionalmente se ha utilizado durante muchos años en muchos sitios web, y de múltiples tipologías de página, desde ecommerce hasta buscadores. Básicamente lo que se muestra al final de la página de resultados es el número de páginas que incluyen resultados, de forma que el usuario puede ir clicando en las distintas páginas para navegar entre los resultados mostrados.

Por ejemplo, si nos fijamos en Amazon hoy en día, veremos que están mostrando este tipo de paginación:

Paginación numerada de Amazon en el año 2017

 

También es algo que Google hace cuando muestra sus resultados de búsqueda:

Paginación numerada de Google en sus resultados de búsqueda

 

Scroll infinito

¿Qué significa scroll infinito? El desplazamiento infinito se produce cuando el usuario llega al final de la página de resultados y, sin que tenga que interactuar con ningún elemento de la interfaz, se vuelven a presentar más resultados de búsqueda. Esta técnica lo que hace es actualizar la página con más resultados inferiores.

¿Quién está aplicando esta técnica actualmente? Por ejemplo Twitter:

Scroll infinito de Twitter

 

O Facebook:

Scroll infinito de Facebook

 

También en páginas de ecommerce como la de Nike:

Scroll infinito en la página de Nike

 

Botón “Cargar más”

¿Qué es un botón “Cargar más” en una paginación? Es un botón que se muestra al final de la página para que sea el usuario activamente el que solicite cargar más resultados.

Por ejemplo, este tipo de paginación la está utilizando el ecommerce de Staples.com:

Paginación web mediante el botón Cargar más en la web de Staples.com

 

Ventajas e inconvenientes de los distintos tipos de paginación

Claramente durante los últimos años se ha puesto de moda la inclusión de la paginación mediante scroll infinito. El hecho de que páginas tan conocidas y usadas como Facebook y Twitter lo utilicen probablemente haya tenido mucho que ver en su adopción en multitud de páginas; también por el uso de los smartphones y tablets con el movimiento mediante el dedo de forma natural.

Sin embargo, ¿el uso del scroll infinito es la mejor elección por ejemplo en un ecommerce?. ¿Cuál es el santo grial que todo ecommerce busca? estaremos de acuerdo en que es la conversión, muy por encima de cualquier otra razón. Veamos a continuación lo que dicen los datos y los distintos descubrimientos de los últimos años.

Ventajas de la paginación numerada

  • Si el usuario está buscando algo concreto o particular, y no simplemente explorando o descubriendo, este tipo de paginación hace que se centre en los primeros resultados mostrados. Se ha observado que los usuarios la consideran lenta, lo que les disuade de seguir navegando un poco más por más productos. Esto provoca que pasen más tiempo valorando entre los resultados de la primera página, y es decisión del usuario seguir clicando en más páginas o resultados. ¿Es que acaso es una casualidad que Google, una de las empresas más innovadoras de los últimos años y que está testando todo en tiempo real con millones de usuarios, tenga este tipo de paginación y no la haya cambiado en 18 años?…da que pensar.
  • Si el usuario observa que existe un número determinado de resultados también será más fácil que pueda estimar cuánto le costará encontrar lo que busca.
  • Le da un punto de referencia respecto al resto de resultados. Si el usuario ha navegado entre las distintas páginas de resultados, aunque no sepa exactamente dónde estaba el resultado que le había llamado la atención sí que sabrá aproximadamente dónde se encontraba.
  • Evita la inacción por saturación. Es decir, como los resultados mostrados tienen un tope, el usuario tiene que tomar una decisión, o bien seguir viendo resultados o bien clicar en un resultado concreto. Esta última acción le acercará un poco más a la deseada conversión.

Desventajas de la paginación numerada

  • El usuario tiene que clicar en un elemento de la interfaz si quiere ver más información.
  • La siguiente página de resultados sustituye a la página que se estaba visualizando, con lo que se pierde la visualización de parte de los productos más relevantes.
  • En dispositivos móviles la paginación numerada puede provocar que los elementos de interacción estén demasiado cerca entre ellos, salvo que se resuelve adecuadamente para responsive. Por ejemplo, a continuación vemos una página de ecommerce con los elementos de paginación demasiado juntos (según las directrices de buenas prácticas para dispositivos móviles).

Paginación numerada en smartphone

 

Ventajas de la paginación mediante el uso del scroll infinito

  • Si el objetivo del usuario es el descubrimiento y revisión por encima de la información, el uso del desplazamiento infinito cumple perfectamente este cometido. Con ello aumentaremos el tiempo de permanencia en la página web por parte del usuario. Las páginas que se basan precisamente en este tipo de contenido y comportamiento, como las redes sociales, tienen este tipo de paginación, ya que el usuario no iba a buscar específicamente un contenido (o por lo menos no es el caso la amplia mayoría de las veces) sino que iba a “descubrir” nuevas actualizaciones y navegar entre el universo de contenidos. Ejemplos de páginas con esta paginación son por ejemplo Facebook, Twitter, Instagram, Pinterest, etc.

Paginación mediante scroll infinito en Pinterest

  • En dispositivos móviles el desplazamiento infinito es más intuitivo y práctico que la paginación numerada.

Uso del scroll infinito en smartphones

Desventajas de la paginación mediante el uso del scroll infinito

  • No permite que el usuario se ubique en los resultados mostrados. Cuando el usuario se desplaza hacia abajo para mirar los resultados, se vuelven a cargar más resultados, y si este había visto algún resultado interesante para él perderá su ubicación. Además, si el usuario vuelve atrás y vuelve otra vez a la misma página se volverán a cargar los primeros resultados, pero no los que ya había explorado anteriormente, con lo que si había algún elemento o producto que le hubiera interesado tendrá que volver a encontrarlo porque no estará ubicado en una página concreta o lugar (como hubiera sucedido con la paginación manual).
  • Los tiempos de carga de la página son mucho mayores que con una paginación manual. Este aspecto es vital hoy en día, y más en dispositivos móviles, donde Google valora muy positivamente este punto, y su incumplimiento conlleva una drástica bajada en las posiciones naturales del buscador, lo que provocará una menor conversión, menor imagen de marca (al no aparecer en los primeros resultados para palabras clave concretas), etc.
  • El pie de página se hace inalcanzable, ya que cada vez que el usuario llega al final se vuelve a cargar más contenido, con lo que al usuario no le da tiempo a clicar. Y como ya se ha indicado antes, en el pie puede existir información importante como ayuda, soporte, categorías navegables, contacto, etc. Entonces, ¿cómo demonios resuelve por ejemplo Twitter y Facebook esta situación? Respuesta: Twitter no tiene pie de página. Facebook incluye los enlaces en el lateral del feed de contenido, integrado de forma natural con el tipo de layout que tiene (y que difícilmente es trasladable a otro tipo de páginas por su distinto layout). Así, para páginas que no sean redes sociales o similares, o que no tengan este tipo de contenido de descubrimiento, como por ejemplo un ecommerce, ¿están dispuestas a no tener pie de página? si la respuesta es afirmativa entonces tendrán que pensar cómo resolver la ubicación del resto de elementos que van a tener que incorporar en su página como el aviso legal, la política de privacidad y cookies, el contacto, la ayuda, enlaces a redes sociales, etc.
  • La barra de desplazamiento derecho del navegador se hace completamente irrelevante. La existencia de la barra de navegación en los navegadores es para darle una referencia al usuario acerca de cuánto contenido queda por visualizar verticalmente en la página. Si cada vez que el usuario llega al final de la página se vuelve a cargar más contenido, inevitablemente el scroll de la barra de desplazamiento aumentará, con lo que su función se vuelve irrelevante, y lo que antes era útil ahora es inútil.

Pérdida de referencias con el uso del scroll infinito en la barra de desplazamiento vertical del navegador

 

Ventajas de la paginación mediante el botón Cargar más

  • El usuario está más predispuesto a centrarse en los primeros resultados, en lugar de ver contenido y más contenido como sucedería con el scroll infinito. Esto conllevará que la conversión podrá aumentar en la página.
  • Si informamos al usuario del número de resultados que tiene su búsqueda o selección, será más sencillo para él encontrar lo que busca. Por ejemplo:

El botón Cargar más en la paginación web

  • Damos referencias al usuario acerca de dónde están los resultados, y recoge lo mejor de ambas paginaciones (numerada y scroll infinito), ya que evita la sustitución de elementos de una página (que se da con la paginación numerada) cargando más resultados en la misma página, y evita a la vez el desplazamiento infinito y la desubicación del usuario que se produce con ella.
  • En dispositivos móviles no se genera un problema de interacción en la paginación, ya que el usuario sólo tiene que clicar en un botón.
  • Cuando el usuario llega al final de los resultados le hacemos escoger entre ver más resultados o considerar los que ya ha visto, con lo que conseguimos que por lo menos valore durante un tiempo más los resultados más relevantes y entrar en el detalle de uno, con lo que hacemos más probable la conversión.
  • El usuario puede visualizar el pie y decidir si quiere interactuar con algún elemento que puede ser importante para él (y para nosotros si consigue su objetivo).
  • No provocamos un problema de carga y peso en la página, como si ocurría con el scroll infinito.
  • Evitamos la saturación del usuario y no le abrumamos con demasiados resultados.

Desventajas de la paginación mediante el botón Cargar más

  • Si el usuario quiere ver más elementos tiene que clicar en el botón.

 

Conclusión

Como hemos visto, dependiendo del tipo de página que tengamos existen distintos tipos de paginación más optimizadas a nuestros objetivos y a los de los usuarios.

Si nuestra página está enfocada en ofrecer contenido de descubrimiento, de forma que el usuario no esté buscando nada en concreto, y tiene una tipología similar a una red social o bien muestra muchos resultados de exploración entonces la mejor paginación posible es mediante el uso del scroll infinito.

Si nuestra página está dirigida a que los usuarios encuentren información específica sobre un elemento o producto, como por ejemplo un ecommerce, entonces la mejor paginación es mediante el botón “Cargar más”.

Uno de los ecommerce más conocidos de Estados Unidos, Etsy.com, hizo un experimento en su sitio web implementando el uso del scroll infinito con el objetivo de comprobar si obtenían mayor conversión. Muestro a continuación pantallazos del informe de mejoras de ux de Etsy (muy interesante).

Resultados de la implementación del scroll infinito en la página de Etsy.com para los clicks

(Ver diapositiva)

 

Resultados de la implementación del scroll infinito en la página de Etsy.com para las compras

(Ver diapositiva)

 

Como se puede comprobar, los ratios de clicks y compras fueron peores cuando incluyeron el scroll infinito que cuando mantuvieron su paginación mediante el botón “Cargar más”.

Consejo: Si aún tienes dudas sobre qué tipo de paginación es mejor en tu página haz un test A/B y verifica cuál es la mejor solución. Nada como testear las cosas para comprobar qué es lo que mejor funciona.

Archivado en: Paginación Web, Usabilidad, UX

Usabilidad y UX en formularios web

11 julio, 2017 By David Gil Ripoll 13 comentarios

Cuando un usuario llega a una página web puede tener múltiples objetivos, entre ellos desde querer simplemente consultar información hasta tener un objetivo claro de comprar un producto, por ejemplo en un e-commerce.

Enfocándonos en este último aspecto, el de adquirir un artículo, el objetivo del usuario no es rellenar un formulario web.

Repito. “El objetivo del usuario no es rellenar un formulario web”.

No puede estar más contento rellenando formularios web en la vida.

Éste lo que desea es comprar un producto o un servicio, ni más, ni menos, y cuanto más fácil sea para él hacerlo mejor experiencia se llevará, lo que comúnmente llamamos experiencia de usuario. Su objetivo es ese, y el hecho de que exista un formulario web de por medio es debido a una necesidad interna de la empresa que debe recoger determinada información para hacerlo. ¿Que cumpla su objetivo el usuario es malo para la empresa? no, ¿verdad?, más bien al contrario.

[Leer más…] acerca de Usabilidad y UX en formularios web

Archivado en: Experiencia de usuario, Formulario web, Usabilidad, UX

Nube de tags – Usabilidad en su aplicación web

26 octubre, 2015 By David Gil Ripoll 4 comentarios

Hace ya unos cuantos años, se puso de moda el uso de la nube de tags, como una forma más de presentar información útil a los usuarios acerca del contenido de la página web que estaban consultando.

Era y es un recurso más de navegación, que permitía al usuario que accedía a la página hacerse una idea acerca del contenido del sitio, ya que la nube de tags no deja de ser un conjunto de palabras clave que muestran la popularidad o la frecuencia con la que aparecen en el sitio web. Además, las palabras que aparecen mayor número de veces tienen un tamaño de letra mayor. Es un recurso excelente para:

  • Hacerse una idea del contenido de la web
  • Saber cuáles son los contenidos que mayor número de veces se tratan en la página
  • Generar una necesidad de consulta de elementos que podían haber pasado desapercibidos por desconocerse

Sin embargo, su uso en la web no es correcto en muchos casos. Existen problemas de usabilidad en su aplicación en la interfaz que van a consumir los usuarios. Sorprende encontrarse aún en páginas web una nube de tags circular en movimiento. Se podría decir que es la no usabilidad llevaba a su máxima expresión. Este tipo de nube de tags se puso muy de moda cuando surgieron, pero más allá de la novedad debemos ponernos en el lugar del usuario que accede a nuestra página web para “consumir contenido”, aspecto que creo que se olvida fácilmente.

Nube de tags circular con mala usabilidad

 

¿Va a ser capaz el usuario echando un vistazo, de saber de qué va nuestra página? Desde luego ojeando no, ya que “está obligado” a tener que mover el ratón por la nube de tags para poder descubrir todo el contenido y, seamos sinceros, hay dos aspectos que ya merman la experiencia de uso, uno es la obligatoriedad en el uso del ratón para hacerse una opinión del contenido más presente en la página, y otra el tiempo de más utilizado para poder obtener la información. ¿Estamos absolutamente seguros de que nuestros usuarios van a obviar estos dos aspectos? Si piensas que sí, puedes seguir utilizándolos sin ningún problema.

Por otra parte, ¿se ha analizado la interacción de esta nube de tags en un dispositivo móvil? ¿Parece complicada a priori verdad?

Muy bien, ¿qué alternativa existe a la nube de tags circular y en movimiento? Pensemos un momento en cuáles son las necesidades y objetivos que persigue un nuevo usuario que entra a nuestra página web para consumir nuestro contenido:

  • Resolver la necesidad de información que tenía antes de clicar en el enlace que le ha llevado hasta nuestra página
  • Hacerse una idea acerca de qué va nuestro sitio web
  • Observar cómo hemos estructurado el contenido, mediante secciones, enlaces, etc.

 

Con estos objetivos en mente, debemos pensar en qué herramientas le podemos ofrecer para cubrir sus necesidades, de la forma más rápida, sencilla y útil posible.

Existen multitud de formas de presentar una nube de tags, pero la que yo os recomiendo es la que se presenta de forma horizontal y ordenada alfabéticamente, tal como esta:

Nube de tags horizontal ordenada alfabéticamente

¿Por qué? por varias razones:

  • El usuario ve todo el espectro de palabras clave de la nube de tags, sin tener que investigar ni interactuar con ella para conocer todo el contenido de la nube.
  • Rápidamente se hace una idea de cuál es el contenido del sitio
  • En pocos segundos discrimina acerca de cuál es el contenido sobre el que más se escribe en la página

Otro método de ordenación en lugar de la alfabética sería la semántica, pero los usuarios no son conscientes de esa ordenación y no aporta mayor valor. Si queréis saber más acerca del uso de una u otra, así como del formato de la nube de tags os recomiendo que leáis un excelente estudio de eye tracking de la nube de tags, realizado por Yusef Hassan-Montero y Víctor Herrero-Solana.

 

 

Archivado en: Nube de tags, Usabilidad Etiquetado como: Nube de tags, usabilidad

Uso de la flecha hacia arriba y flecha hacia abajo en la web

16 junio, 2015 By David Gil Ripoll 2 comentarios

Este post viene a aclarar el uso de la flecha hacia arriba y flecha hacia abajo que se muestran en la web. ¿Algo básico a priori verdad? bueno, lo puede parecer, pero la realidad es que en las web se siguen mostrando de forma poco uniforme para indicar interacciones o comportamientos que son idénticos.

Vamos al lío.¿A qué me refiero cuando hablo de flecha hacia arriba y flecha hacia abajo?. A esto:

Flecha hacia abajo Flecha hacia arriba

 

 

¿Dónde nos encontramos estos elementos en una web?

    1. En las zonas inferiores de la primera página de una web: Últimamente se han puesto de moda las páginas donde todo el contenido de la web se muestra en una única página, la principal home. En los menús superiores se muestran las distintas opciones de navegación, pero estas no llevan a páginas interiores del sitio, sino que lo que hacen es enlazar en la misma página a la sección que se ha clicado. Veamos un ejemploFlecha hacia abajo en una página webAquí la flecha hacia abajo está indicando que existe contenido dentro de la propia página, más abajo. Es un recurso de navegación que se incluyó más adelante, cuando se vió que los usuarios no bajaban. Aunque los usuarios están acostumbrados a hacer scroll, máxime después del uso de los smartphones y tablets, siguen existiendo usuarios que no lo hacen. Existen distintos recursos para hacer entender al usuario que hay más contenido debajo, y el uso de la flecha hacia abajo es uno de ellos. Su uso es adecuado a la finalidad que se persigue y pretende mejorar la usabilidad de la página, mediante una mejor navegación de la misma.

    [Leer más…] acerca de Uso de la flecha hacia arriba y flecha hacia abajo en la web

    Archivado en: Usabilidad Etiquetado como: dirección web, flecha hacia abajo, Flecha hacia arriba

    Evernote, una gran herramienta y un mejor rediseño

    14 octubre, 2014 By David Gil Ripoll Deja un comentario

    Y este post es para felicitar a Evernote, una aplicación que recientemente se ha rediseñado y que en mi opinión lo ha hecho de forma excelente. Cuando las cosas no se hacen bien y se pueden mejorar hay que decirlo, pero más importante aún, cuando las cosas se hacen bien también hay que expresarlo.

    Para quien no conozca aún Evernote decir que es una herramienta gratuita que permite crear y gestionar notas personales. La descubrí hace unos años y nada más hacerlo me la instalé en el ordenador, en el iPhone y en el iPad, porque si, consiguen sincronizar todo en tiempo real entre todos los dispositivos y de forma muy sencilla.

    Pues bien, hace unas semanas volvieron a rediseñar la interfaz gráfica. Partían ya de una muy buena y han hecho algo muy difícil, mejorarla aún más cuando casi todo el mundo estaba contenta con ella.

    ¿Por qué hablo de una aplicación en un blog de Usabilidad y Experiencia de Usuario? Pues porque en el rediseño de la aplicación se nota «la mano» de los responsables de Usabilidad y UX, de los diseñadores de interacción y por supuesto de los diseñadores gráficos de la empresa. Espero poder leer en algún sitio el proceso detallado que han seguido, pero claramente el rediseño tiene en el centro del mismo al usuario (es decir, lo han hecho participar durante el proceso de rediseño) y la aplicación respira el gran trabajo de los perfiles que he indicado.

     

    Evernote antes del rediseño

    Interfaz antigua de Evernote

     

    Evernote después del rediseño

    Rediseño Interfaz Evernote. Buena Usabilidad y Experiencia de Usuario

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    [Leer más…] acerca de Evernote, una gran herramienta y un mejor rediseño

    Archivado en: Aplicaciones, Experiencia de usuario, Rediseño, Usabilidad, UX

    Usabilidad en el orden de los botones Cancelar-Aceptar vs Aceptar-Cancelar

    29 septiembre, 2014 By David Gil Ripoll 6 comentarios

    Si, lo sé, este tema es ya antiguo y se ha escrito sobre él, sin embargo, la realidad es que durante los últimos años he estado en muchas situaciones de trabajo en las que ha surgido la discusión con lo que el tema sigue estando candente aunque sea un aspecto mínimo y básico, además de que en las interfaces web de hoy en día no hay un criterio común. Así que quería aportar algún argumento de mi propia cosecha para completar esta discusión y por supuesto decantarme por una de las opciones, la que creo que es mejor en cuanto a usabilidad.

    Veamos las dos opciones del planteamiento:

    Opción 1: Aceptar-Izquierda / Cancelar-Derecha             

    Mala Usabilidad Botones Aceptar Cancelar

    Opción 2: Cancelar-Izquierda / Aceptar-Derecha

    Buena Usabilidad Botones Cancelar Aceptar

     

     

    [Leer más…] acerca de Usabilidad en el orden de los botones Cancelar-Aceptar vs Aceptar-Cancelar

    Archivado en: Usabilidad

    • Página 1
    • Página 2
    • Página siguiente »

    Barra lateral primaria

    Suscripción al Blog






    Los dos campos son obligatorios

    Nombre

    Email

    • Sígueme en Twitter @DavidGilRipoll
    • Relaciónate conmigo en Linkedin
    David Gil Ripoll

    Buscar en la página

    Categorías

    • Aplicaciones (1)
    • Experiencia de usuario (5)
    • Formulario web (1)
    • Gazapos de usabilidad (1)
    • Nube de tags (1)
    • Paginación Web (1)
    • Rediseño (1)
    • Responsive Design (1)
    • Usabilidad (8)
    • UX (6)

    Copyright © 2020 · Usabilidad y Experiencia de Usuario (UX)