Diseñando para el nuevo Fold o Dobles

() translation by (you can also view the original English article)

Diseñar para el Dobles o “Fold”, ha sido por muchos años una prioridad para muchos diseñadores web, pero con tantos dispositivos capaces de presentar su sitio web, surge una pregunta: ¿Cómo es posible saber dónde está “el Fold”? Además, ¿debería de preocuparnos? Este artículo se escribió con la intención de responder a preguntas tales como: ¿Qué tan importante es actualmente el Dobles o “Fold”? ¿Cuáles son las variables que están en juego? ¿Cambiar los hábitos de navegación? Y sobre todo, ¿qué puedes hacer al respecto? “El fin del Dobles o “Fold”, está ante nosotros, ¡al fin!

El fin del Dobles o “Fold”

Navegar a través de la red ya no es una tarea confinada únicamente a las computadoras de escritorio. Al parecer, la navegación a través de teléfonos móviles se ha incrementado día a día, de hecho, mucho más dispositivos tales como; televisores listos para navegar en internet se han convertido, fácilmente, en una opción disponible. Brandon fue el primero en mencionarlo en su publicación del año, El Estado de las Tendencias de Diseño Web: 2001 Edición Anual… “La muerte del Dobles o “Fold”, fue como él llamó a su publicación, y, por fin está ante nosotros.

Pero eso, ¿qué significa realmente?

Es porque las “pantallas” tradicionales a través de las cuales las personas veían la web han sufrido una explosión de variedades… No podíamos esperar por mucho más tiempo que los navegantes en internet continuaran pegados a monitores de 19” pulgadas con alguna resolución entre 1024x768 ó 1280x700. Las pantallas hoy en día vienen en todas las formas y tamaños, desde iPhones (de hecho, hasta iPhones pequeños) hasta televisores de alta definición de 60” pulgadas o 60” HDTVs. Y no estamos hablando de la resolución, que puede variar rápidamente, sino que el aspecto de radio de una pantalla (incluso en un mismo dispositivo como el iPhone), pueden cambiar vertiginosamente como el movimiento de la muñeca de la mano. Seguramente, los diseñadores web siempre recomendarán mantener los mensajes más importantes del sitio cerca de la parte superior, pero con tantas nuevas formas para que los navegadores vean la web. De hecho, ya no hay una altura definida de dónde debería de estar el contenido.

Sin embargo, antes de continuar, consideremos darle una paliza a éste artículo con un viaje al pasado, digamos a la vieja escuela…

Introducción: El antiguo Dobles o “Fold”.

“El área ideal para colocar introducciones en negrillas, información esencial, imágenes llamativas y, elementos con llamados a la acción es “above the fold” o “arriba del dobles…”

Si alguna vez has tenido cualquier tipo de educación sobre diseño gráfico, lo más probable sería que debas estar familiarizado con el término “above the fold” o “arriba del dobles”. Pero si aún no es así, pues permítenos un momento para respirar y luego explicártelo un poco.

¿Qué significa "above the fold” o “arriba del dobles”? El término fue usado primeramente para referirse a los medios de comunicación tradicionales, para ser mucho más precisos, “el periódico”. El hecho es que los periódicos a menudo son repartidos o presentados doblados hacia arriba y el área de “arriba del dobles” será lo primero que el lector verá y esto es, por consiguiente, una ubicación prominente he importante. Los títulos principales y las imágenes más llamativas, a menudo, son mostrados ahí para atraer la atención de los lectores.

Naturalmente la frase fue transferida al campo del diseño web cuándo éste llego a ser popular a finales de los años 90. Es más o menos el mismo concepto, excepto que el área de “arriba del dobles” o “above the fold” es, en vez de eso, la sección superior de un diseño web que el usuario puede ver inmediatamente sin tener que navegar hacia abajo (no es tan difícil de recordar, ¿cierto?). Esta área es el área ideal para colocar instrucciones en negrilla, información esencial, imágenes llamativas y elementos con llamado a la acción. Además, es el espacio preferido para colocar cualquier anuncio de publicidad.

El área de “arriba del dobles” o “above the fold” es, en vez de eso, la sección superior de un diseño web que el usuario puede ver inmediatamente sin tener que navegar hacia abajo

La importancia del área de “arriba del dobles” parece ser respaldada por la regla de “los cinco segundos” que es comúnmente citada dentro del Diseño Web; los cuales manifiesta que los usuarios pasan a juzgar un sitio dentro de los primeros “cinco segundos de su visita”. El experto en facilidad de uso para la web, Jakob Nielsen, también ha sugerido que los usuarios gastan más del 80% de su tiempo, visualizando información arriba del Dobles o “Fold”.

La importancia del Dobles o “Fold” en las últimas décadas puede que no haya enfatizado tanto en su contexto histórico… Debates impugnados enérgicamente habían sido sostenidos en muchos estudios de diseño y agencias de mercadeo acerca de dónde, precisamente, era el Dobles o “Fold”. Una enorme cantidad de dinero se gastó en información de mercadeo para pronosticar la ubicación óptima de los anuncios, y diseños completos fueron arrojados por la ventana porque simplemente no alcanzaron el máximo uso del espacio de “arriba del dobles” o “above the fold”. En todo caso, el importantísimo dobles o “fold”, en el punto más alto de su importancia se definió como uno basado en tres líneas horizontales a los 570, 590 y 600 pixeles, respectivamente.

Cualquier cosa debajo de los 600 pixeles es irrelevante, es decir; contenido secundario… y no es que no valga el esfuerzo para un digno diseñador web, sino que ya no le concierne más, es una regla.

¡Incredulidad!

Justo ahora, en este punto en particular alguno de ustedes pueden estar pensando; o inclusive inquietándose (que es lo mismo que darse a una cantidad de debates sobre este tema, porque eso es lo que parece causar) por afirmar que el dobles o “fold” ya es irrelevante y cualquier discusión al respecto debería confinarse a los libros de historia. “La sola idea de que un diseñador web esta restringido a una porción pequeña en la parte superior de la pantalla es completamente absurda”. En vez de eso, nos gustaría creer que todos los usuarios en internet naveguen hacia abajo y entonces tendrán la libertad de expresarse consigo mismo y así crear un diseño con todo el espacio como sea posible. Algunos, inclusive, han conseguido ser un poco creativos en demostrarle que las personas son capaces de navegar hacia abajo.

Indudablemente, ha habido muchísimos argumentos entre un diseñador web y su cliente sobre la importancia los dobles o “fold” y quizá esto puede haber contribuido un tanto a la mala reputación que tiene los dobles o “fold”. Un cliente, por ejemplo, sobrestima la importancia del dobles o “fold”, entonces puede solicitar que todo este dentro del dobles y dicho sitio terminará como en el fregadero de la cocina, todo el contenido apretado y metido dentro de ese espacio (570, 590 y 600pixeles), que es relativamente pequeño y los diseñadores web quedarían frustrados ya que no podrían demostrar sus habilidades de ubicación, alineación y sutil uso de espacio en blanco.

La clave de este tema, como sucede con muchos otros aspectos de diseño, es; alcanzar el equilibrio. Obviamente, confinándote a una parte pequeña de la pantalla limitaría tu creatividad y las opciones de diseño. Pero, por otro lado, hacer completamente caso omiso a la idea de los dobles o “fold”, eso sí sería un grave error, y podrías estarte perdiendo una técnica de diseño, potencialmente poderosa, como es el caso del ejemplo que veremos a continuación.

El Dobles o “Fold” en acción

El bellísimo sitio web diseñado casi artesanalmente por la agencia de publicidad de Kaleidoscopeapp, es un excelente ejemplo de diseñar con la regla los dobles o “fold” en mente. El título en grande, un párrafo de introducción, una imagen sumamente llamativa para el ojo y elementos de llamado a la acción están instantáneamente visibles y disponibles para el usuario. Note como la información suplementaria debajo del encabezado principal; “Learn more…” queda debajo del punto de corte de la página o que mejor momento para presentarlo gráficamente, queda justo en el área donde empieza el dobles o “fold”. El dobles o “fold” ha sido considerado claramente en el diseño de este sitio, todavía al navegar hacia abajo revelará una amplia cantidad de información y mucho más elementos de diseño detallados. Aparentemente, los diseñadores de este sitio todavía esperan que los usuarios naveguen hacia abajo, cuando todo esta justo frente a uno.

De hecho, encontraras modelos de diseños similares implementados a lo largo de muchos sitios web. La importancia de esta primera impresión es reconocible, y todavía un área mucho más grande esta completamente utilizada para contar una historia y comunicar la información que ellos necesitan. El área “arriba del dobles” es utilizada muy a menudo para llevar y guiar a los usuarios a ir más lejos debajo de la página y para ir a las áreas que los diseñadores quieren que los usuarios vean. En efecto, es una importante habilidad el tener la capacidad de captar la atención de los usuarios y aun así, mantenerlos lo suficientemente intrigados para quedarse en el sitio y continuar buscando información y contenido nuevo.

“Siempre será, naturalmente, el segundo propósito; incluir los mensajes claves y material con llamado a la acción cerca de la parte superior del diseño de un sitio… pero dogmáticamente cuándo se trata de apretar el contenido arriba del dobles, entonces deja de ser una estrategia que debería llevar hacia abajo a tu diseño”.

Si visitas el sitio web Kaleidoscopeapp, por tu propia cuenta, sin embargo, verás que la información presentada es un tanto diferente a la que se encuentra “arriba del dobles”. Puedes ser hábil para ver más o menos un sitio web (y aquí aparece el problema que enfrentan todos los diseñadores web). ¿Cómo puedes diseñar para “el dobles o Fold” si no sabes, en dónde es éste para el visitante? Hay muchos factores diferentes que se combinan para determinar el tamaño físico del área “arriba del dobles”.

El Problema del “Nuevo Fold”

Los diseñadores web son buenos cuándo están diseñando con navegadores en constante actualización. Pero muchos caprichos e inconsistencias nos han frustrado por años he inclusive ellos juegan un papel importante en este relajo. Cada navegador, individualmente, tomará una porción diferente de la pantalla dependiendo del tamaño de la plataforma del navegador y de cualquier barra de tareas adicionales. Por otro lado, la tendencia con los navegadores modernos parece ser un poco más positiva, sin embargo, parece que ellos ocupan menos espacio del que ocupaban anteriormente. Los desarrolladores de Google Chrome, Safari, Internet Explorer 9, han empezado a darse cuenta que hay una mejor experiencia de navegación cuándo hay poquita distracción de los usuarios al sitio mismo.

Hoy en día, hay una amplia variedad de monitores de diferentes tamaños y combinaciones de resolución de pantallas que demuestra que es casi imposible encontrar “un tamaño que se ajuste a todas las demandas” del diseño web. Hace algunos años, había sido establecido que 1024 x 768 fuera la resolución de pantalla más común, y éste parece ser la medida para el cual diseñan todavía los diseñadores. Sin embargo, las estadísticas de resolución de webdesigntuts sólo demuestran el tamaño del problema hecho por los diseñadores.

Echemos un vistazo rápido a las estadísticas de resolución de los navegadores hecha por el sitio WebDesignTuts, únicamente para un rápido caso de estudio:

“Sin embargo, no puedes, en lo absoluto, garantizar que ellos (los usuarios) estén usando una pantalla de monitor tradicional.”

El gráfico muestra que hay una amplia variedad de resoluciones siendo utilizadas actualmente, con una mayoría de uso distribuida entre seis diferentes tamaños. Y como puedes ver la resolución de pantalla de 1024x768, ahora solamente cuenta para un porcentaje de usuarios muy pequeño, aunque este dato pudo haber incrementado recientemente mi amigo, parece ser que iPad decidió usar esta resolución.

Por si no fuera suficiente qué, ni siquiera tienes la menor idea de cuál tamaño de monitor tiene un usuario de la web, no puedes, en lo absoluto, garantizar que ellos estén usando una pantalla de monitor tradicional. La era de la navegación por medio de teléfonos móviles es buena y sobre todo sinceramente nos alcanzó y actualmente hay muchos dispositivos diferentes siendo usados para ese mismo propósito; navegar en la web. Revisemos una vez más las estadísticas analizadas por WebDesignTuts:

Cómo puedes apreciar hay muchos sistemas operativos diferentes siendo usados actualmente, además de plataformas tales como Android que pueden ser incorporadas en varios dispositivos. Las paletas basadas en la navegación, las cuales explotaron con la aparición del iPad, únicamente se han vuelto muy populares con la aparición de muchas computadoras basadas en el tamaño de las paletas. Por otro lado, los dispositivos móviles de todo tipo, también traen una pose única, y por esa razón, depende de los diseñadores web cambiarlos según como pueden ser usados ya sea en modo horizontal o vertical —y esa es una decisión que cambiaría considerablemente la posición de la línea de dobles o “fold”—. Hoy en día, muchos sitios web están haciendo un enorme esfuerzo por “optimizarse” para los dispositivos tales como los iPads.

Estrategias para Diseñar para el Nuevo Dobles o Fold

Con todas estas variables; ¿Cómo es posible saber dónde esta el dobles o Fold?

La verdad es; ¡qué no puedes! Y es que con tantas variables en juego, es casi imposible saber exactamente dónde estará la línea de dobles. Solamente es cuestión de tiempo, para que en uno o dos años, más o menos, ya estemos viendo, probablemente, más cambios al medio de las pantallas. Y pensar que todo esto significa qué los consejos anteriores para diseñar dentro de los primeros 600 pixeles ya no pueden ser seguros, al menos, ya no lo serán más. Después de todo, parece ser que nuestros esfuerzos por alcanzar la perfección en los estándares de pixel, solamente nos dejarán frustrados.

“Un enfoque más sensible sería diseñar en un aspecto general, radios basados en “dobles” que tomarían ambas orientaciones de navegación en consideración, ya sea; horizontal o vertical…”

Sería encantador diseñar; no solamente para “el dobles tradicional”, sino también para el segundo dobles que va debajo de la página. Aunque un dobles así, no se diferenciaría en nada de un diseño convencional, pero definitivamente tomaría una ventaja para aquellos quienes usan dispositivos móviles, paletas como el iPad y computadoras en forma de paletas. ¿Será posible hacer algo así? Tal vez, usando un radio aproximado, será mucho mejor que confiar en que se ajustarán las medidas en pixeles, aunque esto puede ser menos exacto, pero todavía estás deducciones son relativamente, más seguro.

Sin embargo, creemos que la verdadera clave aquí; no es enfocarse demasiado en “el mismo dobles o fold”, sino en intentar mantener su mensaje principal dentro de “una zona segura” mientras conserva la calidad de diseño general. Lo ideal sería que hicieras pruebas de diseño en dispositivos móviles, pero si no es posible debido a que no tienes para cubrir todos los dispositivos móviles, siempre hay muchos simuladores disponibles.

La mejor estrategia de diseño posible que se adapta a una amplia variedad de monitores será esa que tiene establecido un sentido de jerarquía a través de todo el diseño. Esto significa que el mensaje principal de un sitio debería en apariencia, adaptarse a cualquier tamaño de ese sitio, —y la información más detallada y el contenido deberían de leerse en orden de importancia en la página.

Otros principios de diseño como; Tipografía, Teoría del Color, Diseño del contenido, Gestalt, etc., todos ellos juegan bien un enorme rol en este tema del diseño web, sin embargo los diseñadores web lo harán bien para ellos mismos para sacarle brillo a las practicas establecidas. En efecto, quizá una de las oportunidades más grandes que ofrece a los diseñadores “la muerte del dobles tradicional” es un regreso a los principales principios de diseño. ¡Así es! Dejando atrás las rígidas y dogmáticas nociones de diseño sin sentido a favor de las teorías de diseño de la era pasada.

La Imagen más Grande

“…en los estudios encontraron que 76% de los usuarios que visitaron el sitio, navegaron hacia abajo para ver un poco más de contenido y, además, que una buena porción bajo completamente hasta el fondo. Y esto a pesar de la altura de la pantalla.”

Las estadísticas presentadas por el sitio web: webdesigntuts solamente son útiles para examinarlas (principalmente porque tenemos información muy bien detallada en ellas), pero ciertamente no representan por completo el internet, en eso estamos de acuerdo, ¿no es así? Incluso cuando examinamos las estadísticas de navegadores oficiales presentados desde el sitio web oficial; escuela W3, vemos que una tendencia similar empieza a emerger.

Ciertamente, la información desde estos dos sitios no representa completamente la audiencia que navega a través de internet… pero viendo las imágenes justo en frente de la pantalla, es muy fácil determinar que esto no es tan solo un margen de frecuencia; es un nuevo patrón que esta emergiendo. Ahora, combine esto con las ventas de los nuevos dispositivos y el crecimiento de la industria de los monitores y tendrá un solido argumento para todos aquellos que buscan disipar el mito del dobles tradicional.

Además, muchos estudios de investigación han concluido que es una perdida de tiempo la importancia del dobles o “fold”, incluso si retrocedemos en el tiempo cuando apareció. Las conclusiones son las siguientes: inclusive cuando estés pensando en un tamaño de monitor ajustado (procura trabajar desde el diseño de 1024x768), además, ¡las personas que navegan en la web no echaran solamente un vistazo “debajo del dobles fold”… a menudo ellos gastarán más de su tiempo ahí!”

Conclusión

Hemos discutido bastante en este artículo así que dejemos claro algunos puntos claves.

El concepto tradicional de diseño para “el dobles o Fold” apareció en una época sin registros específicos y continúo así, aun cuando apareció el moderno diseño web. También hemos visto que una combinación de variables y un cambio en los métodos de navegación de muchas personas significarán que una posición ajustada de la “línea del dobles o fold” seguramente no puede ser establecida. Los usuarios web también están muy preparados para ir hacia abajo en busca de más contenido, especialmente cuando lo hacen a través de dispositivos con pantallas táctiles tales como iPads, que hacen la tarea muy intuitiva.

Sin embargo, y con todas las variables tomadas en cuenta, eso no significa que “el dobles o fold” debería desaparecer completamente. De hecho, “el dobles o fold” todavía puede ser un elemento efectivo en cualquier diseño. No hay duda de que la primera impresión de verdad cuenta en el diseño web y éste espacio puede ser usado no solamente para capturar a su audiencia sino también “para atraerlos para ir debajo de la página”. Reserve esa área para su información más esencial en tanto que tranquiliza a sus clientes de que los visitantes todavía ven ese párrafo de su historia que va hacia abajo.

No existen señales de que la navegación a través de dispositivos móviles es lenta, y éste dato podría ser un buen argumento para hacer un diseño para una “segunda línea de dobles o fold”, ideal para aquellos que navegan usando un dispositivo orientado verticalmente. De todas formas, no debería ser perjudicial para su diseño en ninguna forma y solamente dará a los que usan estos dispositivos una ventaja sobre los que no los usan.

¿Qué opinan amigos? ¿Todavía intentan diseñar para el “fold”? ¿Es de hecho, que los diseñadores ya están conscientes de esos cambios y de que tenemos que educar a los clientes acerca del “fold”?

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