La regla 80/20 aplicada al diseño web

Habiendo comenzado recientemente a leer un poco más sobre principios de diseño, me encontré con un principio interesante llamado Regla 80/20, también conocido como el Principio de Pareto, Principio de Juran, la Regla de pocos vitales y muchos triviales, y el Principio de escasez de factores.

Este principio, al que me referiré en este artículo simplemente como la regla 80/20, cuando se considera en el contexto del diseño de sitios web y aplicaciones web, puede tener un efecto profundo en la experiencia del usuario y, en última instancia, en la eficacia del contenido o funcionalidad de su sitio web o aplicación web.

En esta publicación, primero proporcionaré una definición básica, luego consideraré algunos ejemplos específicos de cómo la regla 80/20 resulta beneficiosa, y luego resumiré algunas lecciones que se pueden extraer al tener conocimiento de esta regla.

¿Qué es la regla?

La regla 80/20 fue observada originalmente por el economista italiano Vilfredo Pareto, y el principio real se denominó el Principio de Pareto por Joseph M. Juran.

A continuación se encuentran definiciones de dos fuentes diferentes. Primero del libro Principios universales de diseño:

Y después, de Wikipedia:

Así que inmediatamente notarás que este no es siempre un principio sobre el que nosotros, como diseñadores, tenemos control directo, sino que es un principio que observamos que ocurre casi naturalmente.

Con el conocimiento de la existencia de este principio, o patrón de ocurrencia, estamos equipados con información valiosa para tomar decisiones que ayudarán a mejorar la usabilidad y efectividad de nuestros diseños.

No importa la naturaleza hipotética de la regla …

Sí, hay críticos y quienes sienten que la regla 80/20 no es más que una hipótesis o una teoría demasiado general que no siempre se aplica.

Pero dejando eso de lado, el concepto en sí es ciertamente beneficioso para quienes trabajan en interfaces de usuario y funcionalidad que requiere examen y optimización, incluso si la regla es más como 70/30 o 90/10.

¿Cómo podemos aplicarlo a la experiencia del usuario?

En cualquier sitio web, aplicación web o entorno de software, la regla 80/20 nos dice que el 20% de la funcionalidad y características en cualquier entorno será responsable del 80% de los resultados o acciones tomadas dentro de ese entorno.

En algunos casos, es fácil averiguar qué constituye el 20% que tiene un impacto tan grande. Las estadísticas de análisis web, los envíos de formularios y las cookies de sesión se pueden usar para rastrear el comportamiento del usuario. El análisis de esos elementos nos ayudará a determinar con qué áreas de la interfaz de usuario interactúan más.

Por otro lado, las tareas más pequeñas que no se rastrean con esos métodos pueden ser más difíciles de analizar. En este caso, se pueden realizar estudios de usabilidad donde se observa a los usuarios mientras interactúan con la interfaz de usuario de su sitio web.

Algunos ejemplos que reconocen la regla 80/20

Ya sea intencional o no, existe mucha evidencia de que los diseñadores de UI y UX están considerando el valor de este principio.

Tomemos, por ejemplo, un elemento de interfaz de usuario simple como una lista desplegable de países presentada en un formulario de registro. La mayoría de los desarrolladores de sitios o creadores de contenido reconocen que el 80% de las veces, se seleccionarán ciertos países.

Entonces, aunque aparentemente sería una mala práctica que una lista tan larga rompa la ordenación alfabética de la lista, la regla 80/20 permite que se rompa esa convención al colocar los países más seleccionados en la parte superior, como se muestra en la captura de pantalla a continuación. de Fenn Wright Manson página de pago:

En otros casos, como cuando agrega una nueva dirección a su libreta de direcciones en Amazon.com, la opción predeterminada es el país más seleccionado; en este caso, Estados Unidos:

Aquí hay otro ejemplo, esta vez de una empresa con sede en el Reino Unido llamada Galería North Rock, que tiene la opción de Reino Unido seleccionada de forma predeterminada:

Estos simples ejemplos anteriores muestran la importancia de optimizar las funciones y opciones que se utilizan o seleccionan con mayor frecuencia.

¿Dónde mira el usuario?

La Patrón F Los hábitos de lectura y escaneo de los usuarios de la web ya están bastante establecidos. Por supuesto, el F-Pattern no siempre es un indicador en todos los mercados, pero es un buen punto de partida para considerar dónde buscarán sus usuarios cuando interactúen con sus diseños.

Eche un vistazo a los mapas de calor que se muestran a continuación del conocido artículo de Alertbox vinculado anteriormente:

Suponiendo que este es un buen indicador de dónde se enfoca el ojo de un usuario, esto respalda el concepto de la regla 80/20. Las áreas más intensas en el mapa podrían representar el 20% de la página con la que los ojos del usuario interactúan el 80% del tiempo.

A partir de ese conocimiento, como diseñadores, podemos tomar decisiones que ayudarán a potenciar y optimizar las áreas a las que el usuario se va a sentir habitualmente atraído.

Por supuesto, el diseño a menudo será el factor determinante de dónde mira el usuario, por lo que esta sugerencia debería ser solo una guía básica y no necesariamente una forma dogmática de decidir qué cae por debajo del 20%.

Tendencias de diseño móvil y la regla 80/20

Recientemente, con la explosión de los dispositivos móviles en todo el mundo, algunos diseñadores y desarrolladores, sobre todo Luke Wroblewski, han sido alentadores diseño web móvil primero. Es decir, a la hora de diseñar y desarrollar un sitio web, la versión móvil debe hacerse primero, y no al revés, para obtener ciertos beneficios.

En un sitio web o aplicación web tradicional, ciertas áreas de su sitio caerán naturalmente por debajo del 20% que se utilizan y con las que se interactúa con mayor frecuencia. Cuando se diseña un sitio móvil, la atención se centra en ese 20% (más o menos).

Entonces, si bien la versión móvil de un sitio web puede tener sus propias opciones más utilizadas en un 20%, en relación con el contenido completo disponible en un sitio web tradicional, la versión móvil normalmente solo tendrá las funciones más importantes.

Aquí hay un ejemplo simple a continuación usando el PETCO.com sitio web:

Arriba se muestra la versión completa del sitio, en todo su esplendor desordenado. Si bien hay algunas áreas de llamado a la acción, y ciertamente no es el peor diseño del mundo, en general no está muy enfocado y hay demasiadas opciones.

Compare eso con la versión móvil, a continuación:

Por el contrario, la interfaz móvil que se muestra arriba es simple y ayuda al usuario a llegar primero a las áreas más importantes, sin abrumarlos. Las opciones y áreas de contenido que se utilicen más en la versión completa son las únicas opciones disponibles en la versión móvil.

Por lo tanto, las buenas aplicaciones web móviles enfocadas son excelentes ejemplos de diseñadores que canalizan sus energías en los aspectos más importantes de sus proyectos, manteniéndose enfocados en la funcionalidad y el contenido (el 20%) que se usa la mayor parte del tiempo (el 80%).

Lecciones resumidas

Al comprender cómo funciona la regla 80/20, los diseñadores están equipados para actuar de varias maneras, que se resumen a continuación:

• Siempre que sea posible, analice cuidadosamente los datos analíticos y de usabilidad para determinar el 20% de las funciones más utilizadas de su sitio web.
• Priorizar; es decir, céntrese en los aspectos más importantes de su sitio web o aplicación web y mejore esos
• No dedique demasiado tiempo a optimizar las cosas que se encuentran en el 80% que no se usan con frecuencia.
• Simplifique sus diseños y diseños en función de los datos que determinan qué se incluye en el 20% de las funciones más utilizadas.
• Elimina la funcionalidad o el contenido no crítico que no se usa con frecuencia
• No invierta demasiado tiempo y dinero optimizando la funcionalidad menos utilizada, ya que el retorno de su inversión probablemente será bajo
• Encontrar formas de mejorar la funcionalidad y el diseño de elementos más críticos menos utilizados que podrían tener un mayor impacto en las conversiones si esos elementos del diseño se usaran con más frecuencia.

Si bien la regla 80/20 es un principio discutible con algunas fallas inherentes, no carece de valor. Por lo tanto, considere esta regla durante el proceso de rediseño, realineación o incluso para nuevos proyectos.

Esto debería ayudar a sus usuarios a mantenerse enfocados en la funcionalidad y el contenido más importantes y, en última instancia, ayudará a mejorar las tasas de conversión.

Esta publicación fue escrita exclusivamente para Webdesigner Depot por Louis Lazaris, un escritor independiente y desarrollador web. Louis corre Impresionantes webs donde publica artículos y tutoriales sobre diseño web. Usted puede sigue a Louis en Twitter o ponte en contacto con él a través de su sitio web.

¿Ha considerado la regla 80/20 en sus decisiones de diseño? ¿Qué efecto ha tenido en el éxito de su sitio web o aplicación web? Comparta sus comentarios a continuación.