La falacia y el diseño web de Scaling

En pocas palabras, la falacia de escalamiento es el fenómeno en el que las personas asumen erróneamente que algo que funciona en un tamaño también funcionará en otro tamaño. En este artículo, vamos a discutir cómo esta falacia entra en juego en el mundo físico real, y luego explicaremos cómo aplicar las lecciones a sus propios diseños web..

La falacia de escalamiento


Ugh, como si un escorpión gigante de 50 pies de altura pudiera moverse, y mucho menos pelearse con un demi-dios.

Recientemente estuve viendo el remake de la película para Choque de los titanes Cuando este viejo principio de diseño vino a la mente. En una escena climática temprana, los escorpiones gigantes proceden a atacar al héroe de la película en una batalla épica a muerte. Los escorpiones, escalados a proporciones gigantescas, eran ágiles y mortales, como cabría esperar al tratar con un enemigo tan temible ...

El poder de los efectos especiales digitales en la actualidad hace que parezca totalmente posible que se pueda producir una monstruosidad tan grande dada la alineación correcta de Zeus y el Rayo de Crecimiento de Cariño, hice explotar a los niños (Otro ejemplo asombroso de por qué la ciencia y Hollywood nunca deberían tener bebés). Sin embargo, la realidad de un monstruo gigante escalado es físicamente imposible.

Si bien se dice mucho acerca de que los pequeños insectos pueden levantar enormes pesos en comparación con el tamaño de su cuerpo relativo, la mera realidad de esa misma fuerza se transfiere a una versión de gran tamaño de ese mismo insecto, simplemente no funciona en el mundo físico.

Una hormiga pequeña puede levantar 50 veces su peso, pero eso no significa que una hormiga masiva de 1000 libras pueda levantar 50,000 libras. Los efectos de la gravedad en un pequeño insecto son prácticamente inexistentes, pero la gravedad se convierte en un poder muy real una vez que el tamaño se amplía. Una hormiga de 1,000 libras tendría dificultades simplemente para salir de la cama por la mañana.

Sin embargo, la falacia de la escalada no solo funciona en la escalada de cosas pequeñas a grandes. Una montaña masiva puede soportar mil tormentas de lluvia y nieve ... pero una pequeña colina de tierra será arrastrada por la brisa más suave.

Lo consigue ... lo que funciona en un tamaño no siempre funciona cuando se amplía más allá de las intenciones de diseño originales. El diseño, la función y la facilidad de uso de casi todo el mundo están vinculados entre sí por la escala. La falacia ocurre cuando un diseñador asume que la facilidad de uso se mantendrá cuando un diseño se amplíe o reduzca..

Aplicándolo al diseño web.

The Scaling Fallacy entra en juego en el diseño web en dos áreas clave: supuestos de interactividad y supuestos de carga. Discutiremos ambos en un momento, pero mientras lees, quiero que consideres qué fácil es resolver estos problemas de escalado..

Como dice el viejo refrán, "retrospectiva es 20/20"... es poder predecir con precisión el futuro que es tan difícil.

En la mayoría de los casos, resolver estos problemas de diseño es bastante simple (agregar un sistema de paginación, proteger un diseño de imágenes de gran tamaño mediante el uso de CSS). desbordamiento: oculto propiedad, indicando a los clientes que nunca se metan con el sistema de navegación, etc.). Todas estas tareas son fáciles de realizar ... es identificar estos problemas antes de que ocurran lo que requiere una reflexión y preparación cuidadosas.

Muy bien, vamos a sumergirnos en el tema de lo esencial:

Supuestos de interacción

Supuestos de interacción ocurre cuando creas un diseño basado en la suposición de que el comportamiento del usuario será el mismo en diferentes niveles de escala.

El ejemplo clásico es un plan de escape en caso de incendio: un plan general de escape en caso de incendio para una casa pequeña es simple: salga del edificio lo más rápido posible, llame a la policía. La misma estrategia de salida, cuando se aplica a un edificio de oficinas de rascacielos lleno de personas, resultaría en una catástrofe. El problema no es el diseño, sino el hecho de que el diseño no ha tenido en cuenta la nueva escala..

Un ejemplo de diseño web

En el diseño web, pueden darse suposiciones de interactividad similares cuando asume que un cliente va a completar su diseño web con el contenido que espera..

Por ejemplo, la ubicación, el estilo y el tamaño de una barra de navegación pueden ser perfectos cuando un blog solo tiene 4 o 5 categorías, pero la misma barra de navegación se vuelve casi inutilizable cuando se agregan 20 o más enlaces:


Un diseño de barra de navegación, ya que está destinado a ser utilizado..
La misma barra de navegación, esta vez con más o menos 20 enlaces, lo que dificulta su lectura o uso..

En este caso, la solución es bastante simple: instruir al cliente que usa el sitio web para que mantenga sus enlaces de navegación principales limitados a unos pocos (o use un menú desplegable para enlaces adicionales).

Identificación de supuestos de interacción

La identificación de suposiciones de interacción no es ciencia espacial, pero requiere una especie de pensamiento flexible que explique diferentes posibilidades. En términos de diseño web, si diseña un elemento bajo el supuesto de que solo se usará de una sola manera (ya sea por un usuario o por la persona que ingresa el contenido un año después de que abandone el proyecto), existe una gran posibilidad de que el elemento funcionará mal cuando se use de una manera que no sea para lo que fue diseñado.

Aquí hay algunos ejemplos donde se hacen simples supuestos de interacción ... estos no son todos de ninguna manera, pero deberían darle una buena idea de cómo funciona esto:

  • Imágenes - Imagina que has diseñado un sitio web que utiliza todas las imágenes de 200 px por 200 px. El cliente más adelante agrega una imagen de 400px por 100px, que rompe el diseño.
  • Menús de navegación - Usted diseña un sitio con un innovador sistema de menú "acoplado" que requiere que un usuario se desplace sobre un área determinada para ver el menú ... pero se niega a decirle a los usuarios cómo hacerlo..
  • Barras laterales - Usted diseña una barra lateral que tiene exactamente 300px de ancho, pero el cliente agrega imágenes que tienen 500px de ancho, rompiendo el estilo.
  • Diseños - Usted diseña un sitio que se basa en gran medida en el diseño de varias columnas, pero el cliente más adelante desea usar un diseño que use todo el ancho (sin una barra lateral).

La mayoría de estos problemas deben ser fáciles de solucionar ... solo unas pocas líneas de código adicionales o una simple reunión educativa con un cliente pueden evitar que ocurran problemas ... pero lo que quiero que retire de esto es que siempre debe anticipar los escenarios en los que sus diseños se utilizan de una manera que originalmente no planea usarlos.

Suposiciones de carga

Los supuestos de carga son un poco diferentes: ocurren cuando un diseñador asume que las tensiones en un sistema dado serán las mismas en todas las escalas. Los supuestos de carga suceden mucho en el lado de desarrollo de un proyecto de diseño web; Hacer suposiciones de que un diseño web pesado de la imagen que funciona cuando 1,000 personas visitan el sitio al mes puede ser expulsado del agua cuando más de un millón de personas lo visitan en un día y ponen más énfasis en el servidor. El mismo principio puede aplicarse al diseño visual real de un sitio también ...

Por ejemplo, usted diseña un diseño de galería de imágenes que es increíblemente fácil de explorar cuando solo hay 10 imágenes ... pero al no proporcionar un sistema de "paginación" adecuado, se vuelve difícil navegar por todo el diseño cuando se agregan más de 25 imágenes.


Un sistema de paginación es quizás uno de los ejemplos más simples de ajustar un diseño para tener en cuenta la escala.

La solución es bastante simple en este caso: al agregar un sistema de paginación simple, el mismo diseño se puede hacer "escalable" con algunos pequeños ajustes. Se agrega un sistema de paginación numerada, y ¡qué bien !, su diseño se puede usar nuevamente ... a cualquier escala razonable. Solo volvería a encontrar el problema de escalado si su biblioteca de imágenes superara el razonable Límites del sistema de paginación ... en cuyo punto tendría que considerar un sistema de etiquetado y búsqueda más refinado..

Identificando los Supuestos de Carga

Identificar los supuestos de carga también es bastante simple: imagínese que cualquier parte específica de su diseño se estire a sus límites en términos de contenido ... luego planifique en consecuencia. La solución puede ser un diseño o un ajuste de la interfaz de usuario (como el ejemplo de paginación), pero también puede ser tan simple como indicar a los usuarios cuáles son los límites. Si tu diseño solo permite 100 imágenes y no hay nada que puedas hacer al respecto, solo díselo a los usuarios por adelantado. Has visto que simple es?

Suposiciones del tamaño de la pantalla

El último tipo de suposición que me gustaría describir es uno con el que la mayoría de ustedes está familiarizado: las suposiciones del tamaño de la pantalla. Este tema solo es digno de su propia publicación en el blog (más sobre esto la próxima semana), así que trataré de hacer esto breve:

Si está diseñando un sitio web y nunca se detiene por un momento para probar cómo se ve en una resolución diferente, deténgase ahora mismo y hágalo.!

Atrás quedaron los días en que el 75% de los internautas navegaban en un monitor de 1024x768. Hoy en día, las personas navegan por la red en pantallas de todas las formas y tamaños ... desde pantallas diminutas de iPhone hasta televisores HD masivos..

Diseñar un sitio web bajo el supuesto de que todo el mundo tiene un cierto tamaño de pantalla no solo es miope, sino que también socava la capacidad de uso principal de su sitio. Si bien es posible que no tenga sentido crear un sitio web diferente para cada tipo de dispositivo diferente, ciertamente vale la pena tomarse una hora o dos para al menos considerar cómo se desempeñará su sitio en diferentes tipos de pantallas y resoluciones..

Encontrar solo algunos ajustes que puede realizar durante la fase de diseño de un sitio le ahorrará muchos problemas a largo plazo. Aquí hay algunos consejos rápidos para evitar las suposiciones del tamaño de la pantalla:

  • No confíe en los sistemas de menú complejos que requieren un mouse para usar con precisión. Pista: la fuente 8pt no es fácil para los dedos.
  • Considere agregar un tema de respaldo compatible con dispositivos móviles a un sitio de WordPress.
  • Evite diseñar sitios de "pantalla completa" (sitios donde el contenido principal ocupa más de 960px de ancho) a menos que el sitio pueda reducirse a sí mismo para pantallas más pequeñas.
  • No use Flash para la navegación principal, a menos que tenga un motivo justificado (o un método de recuperación HTML)
  • En caso de duda, haga que todo el texto de su cuerpo sea 2 puntos más grande ... no afectará la legibilidad en monitores normales, y los usuarios móviles podrán leer su texto..

Evitando la falacia de escalamiento

Ningún plan de batalla sobrevive al contacto con el enemigo..

La única manera real de evitar la falacia de escalamiento es estar constantemente atento a ella. A lo largo del proceso de diseño, debe tener en cuenta su propia tendencia a realizar este tipo de suposiciones..

No solo diseñe bajo el supuesto de que todo lo que cree en Photoshop o Fireworks seguirá siendo el mismo cuando se inicie el sitio web. A menos que esté en un proyecto en el que vaya a ser la única entidad que diseñe y agregue contenido al sitio, es muy probable que alguien, en algún momento, agregue contenido que rompa sus expectativas de cómo se diseñó ese diseño. ser usado.

Del mismo modo, evite diseñar cosas que solo funcionen en una escala muy limitada. Como todos sabemos, realizar personalizaciones y revisiones a un diseño web puede ser un proceso doloroso, arduo y costoso ... diseñar bajo la falacia de escalamiento solo hace que estos problemas se multipliquen, ya que tendrá que volver a visitar sus diseños antiguos tan a menudo como caiga el comportamiento de las personas. fuera de tus propias suposiciones.

Conclusión

¡Eso es todo por ahora! Espero que todos encuentren útil este post ... La falacia a escala es uno de esos principios enigmáticos que es fácil de explicar en abstracto, pero difícil de concretar en diseños concretos ... por lo que se necesita mucha práctica y vigilancia constante para evitar los principales escollos que surgen. De los supuestos que discutimos..

Si le gustó la publicación o tiene algo que agregar, publíquelo a continuación en los comentarios. Aclamaciones!