• 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

UX

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

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

Perdone, antes de entrar en mi tienda…tiene que registrarse

22 septiembre, 2014 By David Gil Ripoll 2 comentarios

Una de las cosas que más me siguen sorprendiendo cuando navego por Internet, son las webs referentes que ofrecen ofertas de productos o servicios, y esta sorpresa es más bien negativa.

¿La razón? la amplia mayoría obligan a registrarse para poder ver sus productos. A mí este hecho me resulta cuanto menos curioso, ya que me parece un error muy grave de Experiencia de Usuario (UX) por no hablar de la pérdida de negocio significativa.

Imaginemos por un momento que vamos andando por la calle y vemos un escaparate que nos parece atractivo. “Muy bien, voy a entrar que he visto unas zapatillas que me gustan mucho…” pero, de repente, cuando queremos entrar en la tienda la puerta está cerrada y vemos un cartel que dice:

“Antes de entrar…primero dinos quién eres:

  • Si ya eres cliente dínoslo y te abriremos
  • Si no eres cliente, por favor, rellena este simple cuestionario y después te abriremos”

Mala_UX_Experiencia_Usuario_Registro

 

[Leer más…] acerca de Perdone, antes de entrar en mi tienda…tiene que registrarse

Archivado en: Experiencia de usuario, UX

Responsive Web Design, algo más que maquetación web (I)

21 noviembre, 2013 By David Gil Ripoll 2 comentarios

Desde hace un año se ha puesto de moda el término Responsive Web Design y mucha gente se hace eco de él. Para las personas que no conozcan qué significa comentar brevemente que hace referencia al diseño web adaptativo, no al diseño responsable, como ya he escuchado en algún momento. ¿Y qué es el diseño web adaptativo? El diseño web adaptativo o responsive web design es una técnica de diseño y maquetación que permite que la experiencia del usuario (User Experience o UX) no resulte afectada (o lo haga lo menos posible) cuando una persona navega por una interfaz, independientemente del dispositivo desde el que se conecte.

¿Y por qué surge este término ahora y está tan de moda?, ¿por qué no ha surgido antes?…

La respuesta, visualmente, es esta:

  • Antes de 2008:

 

PC_Portatil_Movil_2008

 

Fuente de las imágenes: Brad Frost, Ichibod, Josep Ma. Rosell

 

  • Después de 2008:

Responsive devices

 

Fuente de las imágenes: Brad Frost

[Leer más…] acerca de Responsive Web Design, algo más que maquetación web (I)

Archivado en: Experiencia de usuario, Responsive Design, UX Etiquetado como: Experiencia de Usuario, Responsive Design, UX

Aclarando conceptos: Usabilidad vs Experiencia de Usuario (UX) …Fight!!

30 junio, 2013 By David Gil Ripoll 9 comentarios

Mi primer post lo voy a utilizar para dar mi opinión sobre estos dos conceptos. Se ha escrito mucho sobre usabilidad y experiencia de usuario y sin embargo existen dos situaciones que se siguen produciendo:

  1. Si preguntas a dos profesionales relacionados con estas disciplinas qué significan usabilidad y UX (User Experience = Experiencia de Usuario) tendrán múltiples respuestas con variantes que no terminarán de coincidir en sus significados.
  2. Las personas ajenas al sector se siguen preguntando cuál es la diferencia práctica entre ambas.

Y estas situaciones se dan cuando ya han pasado unos cuantos años (decenas) de la convivencia entre ambas, y debería existir al menos una clara definición y distinción.

En Internet se ha hablado mucho sobre metodologías de trabajo, disciplinas relacionadas con ellas (sobretodo con la UX), profesionales implicados, diagramas de Venn que intentan clarificar las relaciones entre ambas pero que al mezclar a tantas disciplinas provocan un efecto de confusión…

Mi propósito en esta entrada es hablar de forma llana de la diferencia entre ambas mediante ejemplos, sobretodo para esa segunda situación que apuntaba, la de la gente ajena al sector que sigue sin saber qué las distingue, y que debido a la falta de claridad de los propios profesionales que trabajamos en esto, provoca más confusión en ellos aún. Con ello mi intención es intentar aportar un granito de arena de una forma menos académica.

Antes, vamos a ir a la definición de la wikipedia para ambos conceptos:

  • Usabilidad: «…facilidad con que las personas pueden utilizar una herramienta particular o cualquier otro objeto fabricado por humanos con el fin de alcanzar un objetivo concreto«
  • Experiencia de Usuario o User Experience o UX: «…conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva o negativa de dicho servicio, producto o dispositivo.«

Así, según estas definiciones, se podrían dar las siguientes situaciones:

  • Algo es usable pero no genera una gran experiencia de usuario
  • Algo es usable y además genera una gran experiencia de usuario
  • Algo no es usable y genera una gran experiencia de usuario. ¿Se podría dar esta situación?. Pensarlo

Vamos a poner un ejemplo con un objeto que cubra las dos situaciones, una puerta, si, algo tan sencillo como una puerta.

Puerta con manilla simple. Usabilidad, UX
Puerta con manilla simple

[Leer más…] acerca de Aclarando conceptos: Usabilidad vs Experiencia de Usuario (UX) …Fight!!

Archivado en: Experiencia de usuario, Usabilidad, UX

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)