Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Theory
Webdesign

La falacia de la ampliación en diseño web

by
Length:MediumLanguages:
This post is part of a series called Web Design Theory.
The Gestalt Principle: Design Theory for Web Designers
Errors: Bad Decisions or Bad Design?

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

En pocas palabras, la falacia de la ampliación, es el fenómeno donde las personas erróneamente asumen que algo que funciona en un tamaño también funcionará en otro tamaño. En este artículo, discutiremos de qué manera la falacia juega un papel en el mundo físico real, y luego explicaremos cómo aplicar la lección a tus propios diseños web.

La Falacia de la Ampliación

¡Cómo fue que un escorpión tan grande se pudo mover, por no hablar de la batalla con el semis-dios!

Hace unos pocos días estaba volviendo a ver la película Clash of Titans, cuando este principio de diseño me vino a la mente. En una escena culminante del principio, escorpiones gigantes proceden atacar al héroe de la película en una batalla épica hasta la muerte. Los escorpiones, ampliados a proporciones gigantescas, por supuesto, eran agiles y mortíferos como se podría esperar cuando se trata de un enemigo tan temible…

El poder de los efectos digitales especiales hoy en día hace parecer completamente posible que una monstruosa ampliación pueda ocurrir. Dándole la alineación correcta de Zeus y el Rayo de Crecimiento de Honey, I Blew Up the Kids —¡Cariño, agrande a los chicos!— (otro ejemplo asombroso de porque la ciencia y Hollywood nunca debería hacer bebes). No obstante, la realidad de un monstruo gigantescamente ampliado… es físicamente imposible.

Si bien se habla mucho acerca de los insectos diminutos siendo capaces de levantar pesos grandes comparados relativamente con el tamaño de su cuerpo, la realidad pura de que esa misma fuerza ha sido transferida a su súper versión de tamaño del mismo insecto no significa que funcione en el mundo físico, afortunadamente.

Una diminuta hormiga es capaz de levantar hasta 50 veces su peso, pero eso no quiere decir que si pesaran unas 1000lb entonces serian capaces de levantar 50,000lb. El efecto de la gravedad en los diminutos insectos, virtualmente, no existe. Pero la gravedad se convierte en un verdadero poder una vez que el tamaño es ampliado. Por ejemplo, una hormiga de unas 1000lb, verdaderamente pasaría un mal rato solamente por tener que darse la vuelta en la cama por la mañana.

La falacia de la ampliación, sin embargo, no funciona simplemente ampliando cosas pequeños a tamaños grandes. Por ejemplo, una gran montaña puede permanecer en pie, por así decirlo, a través de miles de lluvias y tormentas de nieve… pero una pequeña colina de tierra será arrastrada por una leve brisa.

¡Lo entiendes!…Lo que funciona en un tamaño no siempre funcionará en otro tamaño, sobre todo cuando es ampliado más allá de las intenciones del diseño original. El diseño, la funcionalidad y la facilidad de uso de casi cualquier cosa en el mundo entero están vinculados entre sí por el tamaño. Entonces… ¿Cuándo ocurre la falacia? Ocurre cuando un diseñador asume que la facilidad de uso aún se mantiene cuando un diseño es ampliado o reducido.

Aplicando la Ampliación a nuestro Diseño Web

La Falacia de la Ampliación entra en juego en el diseño web en dos áreas claves: suposiciones de interactividad y suposiciones de carga. Discutiremos ambas en su momento, pero por ahora, quiero que tomes en cuenta lo fáciles que son para resolver estos problemas de ampliación.

“Cómo solía decir un anciano la retrospectiva es 20/20… ¿qué significa? Es ser capaz de predecir correctamente el futuro que es tan complicado”

En la mayoría de los casos, resolver estos problemas de diseño es bastante simple (añadiendo un sistema de paginación, protegiendo un diseño de imágenes de gran tamaño usando el flujo de trabajo CSS, que consiste en; ocultar propiedades, instruir a los clientes a que nunca se pierdan con el sistema de navegación, etc.). Pero todas estas tareas son fáciles de hacer… esta en la identificación de estos temas antes de que aparezca, y eso que requiere una cuidadosa preparación.

Muy bien, vamos a profundizar en las cosas díficiles:

Suposiciones de interacción

¿Cuándo ocurre? Cuando creas un diseño basado en la suposición de que el comportamiento de los usuarios será el mismo en diferentes niveles de ampliación.

El ejemplo clásico es de un plan de escape: Un plan de escape para éste problema, generalmente para una pequeña casa es muy simple: salir del edificio lo más rápido posible, llamar a la policía. La misma estrategia de salida cuando se aplica a un edificio de oficinas rascacielos lleno de personas resultaría en una catástrofe. El problema, se puede decir que no es el diseño, es el hecho de que el diseño no había contado con el nuevo nivel de ampliación.

Veamos un ejemplo de un Diseño Web

En diseño web, las suposiciones de interactividad, similarmente, puede ocurrir cuando asumes que el cliente va a llenar su diseño web con contenido cómo esperabas al principio.

Por ejemplo, la ubicación, estilo y tamaño de la barra de navegación pueden, tener sentido perfectamente cuando un blog tiene únicamente 4 o 5 categorías, pero la misma barra de navegación se vuelve casi inservible cuando son añadidos 20 o, incluso, más enlaces:

Un diseño de una barra de navegación, que esta destinado a ser usado.
La misma barra de navegación, pero esta vez con 20 o más enlaces, la hacen difícil de leer o usar.

En este caso, la solución es bastante simple; instruye al cliente que esta usando el sitio web a conservar principalmente en su navegación únicamente un puñado de enlaces limitados (o que use un menú desplegable para enlaces adicionales).

Identificando las suposiciones de la interacción

Identificar las suposiciones de interacción no es ciencia espacial, pero requiere una especie de pensamiento flexible que considera las diferentes posibilidades. En términos de diseño web, si diseñas un elemento bajo la suposición de que será usado únicamente en una forma (ya sea por un usuario la persona que introducirá el contenido un año después de que hayas dejado ese proyecto), hay una buena oportunidad de que los elementos funcionen mal cuando se usa de una manera fuera de la que se estima.

Aquí hay apenas unos pocos ejemplos donde fueron hechas sencillas suposiciones de interacción… aunque eso no significa que estas son todas las suposiciones que se hacen, pero te dará una muy buena idea de como funciona:

  • Las imágenes: las imágenes que has diseñado para un sitio que usa todas las imágenes en un tamaño predeterminado de 200px x 200px. El cliente, más adelante añade imágenes de 400px x 400px, —lo cual rompe con el esquema—.
  • Menús de navegación: diseñas un sitio con un sistema de menú “acoplado” que requiere qué un usuario pase sobre cierta área para ver el menú, —pero descuidaste decirle a los usuarios cómo hacer esto—.
  • Barras horizontales: diseñas una barra lateral cuyo ancho es exactamente 300px, pero el cliente añade imágenes de 500px de ancho, —definitivamente, rompe con el estilo—.
  • Presentaciones: diseñas un sitio que depende en gran medida de una presentación de multicolumnas, pero, más tarde el cliente simplemente quiere usar una presentación del ancho completo del área de diseño (sin la barra horizontal).

La mayoría de estos problemas deberían ser fáciles de resolver… con tan solo unas líneas adicionales de código o una sencilla reunión educacional con el cliente puede evitar cualquiera de estos problemas aún antes de que ocurran. Pero, lo que quiero de lo que tomes ventaja de esto es que: Siempre deberás anticipar escenarios en dónde tus diseños son usados en formas que tu originalmente no planeaste que fueran usadas.

Suposiciones de Carga

Las suposiciones de carga son un poquito diferentes. ¿Cuándo ocurren? Cuando un diseñador asume que las tensiones en un sistema dado serán el mismo en cada escala. Las Cargas de Suposiciones suceden mucho por el lado del desarrollo de un proyecto de diseño web, haciendo suposiciones de que una imagen pesada de un diseño web funcionará de la misma forma cuándo 1,000 personas visiten el sitio al mes, entonces puede echarse al agua, pero cuando millones de personas visiten en UN DIA ese mismo sitio y pongan una tensión adicional sobre el servidor. De hecho, ese mismo principio también puede aplicarse al diseño visual actual de un sitio.

Por ejemplo, diseñas una presentación de una galería de imágenes que es increíblemente fácil de navegar cuando únicamente hay 10 imágenes… pero al no proporcionar un sistema de paginación correcta, la presentación completa se vuelve difícil de navegar cuando más de 25 imágenes son añadidas.

Un sistema de paginación es quizá uno de los ejemplos más sencillos de ajustar el diseño para tener en cuenta el tamaño.

La solución en este caso es muy simple: mediante la adición de un sistema de paginación, el mismo diseño puede ser hecho “ajustable en tamaño” con algunos pequeños ajustes. Un sistema de paginación numerada es añadido y whallah! Tu diseño es fácil de usar nuevamente… a cualquier escala razonable. Probablemente encontraras nuevamente el problema de la escala si tu biblioteca de imágenes excede los límites razonables del sistema de paginación… pero ya en este momento tendrías que considerar un sistema de búsqueda de imágenes aún más refinado.

Identificando las Cargas de Suposición

Identificar las suposiciones de carga también es muy simple: imagina que una parte específica de tu diseño ha sido estirado hasta su límite en términos de contenido… a continuación planea lo acordado. La solución podrá ser un diseño nuevo o ajustar una interfaz de usuario (como el ejemplo de la paginación), pero también podrá ser tan sencillo como instruir a los usuarios a conocer cuales son los límites. Si tu diseño únicamente permite 100 imágenes y no hay nada que puedas hacer al respecto, solamente diles a los usuarios que te llevan la delantera, ves qué simple fue eso.

Suposiciones de tamaños de pantallas

El último tipo de suposición que me gustaría describir es uno con el que más este familiarizado: suposición de tamaño de pantalla. Este tema, únicamente por su titulo, es digno de hacerle una publicación en su propio blog (más en la semana que viene), así que voy a tratar de ser breve:

“Si estas diseñando un sitio web y no paras ni por un momento para poner a prueba como se verá en una resolución diferente, ¡entonces detente ahora mismo y hazlo!”

Atrás quedó los días dónde el 75% de los navegantes en internet estaban navegando en monitores de 1024 x 768. Hoy en día, las personas están navegando a través de la red en pantallas de todas las formas y tamaños… desde diminutas pantallas de iPhones hasta inmensos televisores HD.

Diseñar un sitio web bajo la suposición de que todos ahí afuera tienen cierto tamaño de pantalla, no solamente es ser corto de vista, esta socavando la capacidad principal de su sitio. Aunque no podría tener sentido crear un sitio diferente para los diferentes tipos de dispositivos que hay ahí afuera, ciertamente valdrá el esfuerzo tomarnos una o dos horas, al menos, considerar cómo le ira a tu sitio en diferentes tipos de pantallas y resoluciones.

Encuentra unos pocos ajustes que puedes hacer durante la fase de diseño de un sitio te ahorrará muchos dolores de cabeza a largo plazo. Aquí hay algunos consejos rápidos para evitar las suposiciones de tamaños de pantalla:

  • No se confié en sistemas de menús complejos que requieran un uso exacto del mouse. Indicar: con una fuente de 8pts, no significa que se deba usar el dedo..
  • Considere agregar un tema de reserva un tema fácil de usar para un sitio como WordPress.
  • Evite diseñar sitios “a pantalla completa” (son los sitios dónde el contenido mismo ocupa más de 960px de ancho) a menos, por supuesto, que el sitio pueda redimensionarse cuando se vea en monitores pequeños.
  • No utilice Flash para el núcleo de la navegación, a menos que tengas una buena razón para hacerlo (mejor usa un método HTML).
  • Para evitar las dudas, haz todos los cuerpos de texto 2 puntos más grandes… no le harán ningún daño a la legibilidad en monitores normales y los usuarios con dispositivos móviles actualmente son capaces de leer tu texto.

Evitando la Falacia de la Ampliación

“No existe un plan de batalla en el que siempre se sobreviva cuando se entra en contacto con el enemigo”

La única verdadera forma para evitar caer en la falacia de la ampliación es estar constantemente en la búsqueda de ella. A lo largo del proceso de diseño, deberás tener en cuenta tu propia tendencia para hacer este tipo de suposiciones.

DNo diseñes simplemente bajo la suposición de que todo lo que creaste en Photoshop o Fireworks quedará igual cuando hagas el lanzamiento del sitio web. A menos que estés en un proyecto en dónde serás la única entidad que diseña y añade contenido al sitio, las posibilidades son muy altas de que alguien en algún momento añade contenido que rompa tus expectativas de como fue pensado que se usara el diseño en principio.

Asimismo, evita diseñar cosas que funcionen en una escala muy limitada. Como todos sabemos, hacer personalizaciones y revisiones puede ser un proceso doloroso, arduo y costoso… Así que diseña bajo la falacia de la ampliación solamente hace que estos problemas se multiplicar debido a que se requiere volver a ver diseños viejos tan a menudo como el comportamiento cae fuera de sus propias suposiciones.

Conclusión

¡Eso es todo por ahora! Espero que todos encuentren esta publicación útil… La Falacia de la Ampliación es uno de estos principios enigmáticos que son fáciles de explicar en lo abstracto, pero difíciles de concretar en los diseños… Por lo que toma mucha práctica y constante vigilancia evitar cometer errores que vienen de las suposiciones que ya hemos mencionado.

Si te gustó la publicación o tienes algún comentario que puedas añadir, publícalo abajo en la sección de comentarios. ¡Saludos!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.