iNGENET - La comunidad de la ingeniería mexicana

Cómo Diseñar una Página Web 2.0 con Proporciones Doradas

Abstract

1.618033 … This number was known to the ancient Greeks and was called the Golden Mean. It is usually denoted by the Greek letter φ (phi). They believed that the proportion φ : 1 was the most pleasing, indeed the aesthetically perfect proportion, and all of their artwork, sculpture, and especially architecture made use of this proportion, called “the golden proportion”. A rectangle whose sides had this proportion was called the Golden Rectangle. The Golden Rectangle is a visually pleasing geometric shape with specific proportions, in which the ratio of the longer side to the shorter is the golden ratio. The rationale behind it is the belief that this proportion is organic, universal, harmonic, and aesthetically pleasing; indeed, being evident everywhere in the universe. This golden ratio is probably the best known law of proportion and can dramatically improve the communication of your Web design. In many ways, the layout of a Web page is critical because Web users form first impressions of Web pages in as little as 50 milliseconds. In the blink of an eye, Web surfers make nearly instantaneous judgments of a Web site’s “visual appeal”. Through these first impressions users make subsequent judgments of perceived credibility and usability, which ultimately influence their purchasing decisions. The users have an emotional reaction to home pages that they cannot control. This pre-cognitive “affective reaction” is a physiological response to what they see on the screen – an intuitive response to beauty. Deciding what should go where, how wide or narrow, tall or short everything should be, can be very difficult. Many designers just throw things down on the page, until they have a design that looks “right” to them. Surprisingly, that design is always in proportion to the Golden Mean. We only get one chance to create a good first impression, make it count. A clean, professional, fast-loading aesthetic site can ensure that your first impression will be a good one. Attractive things work better. How we think cannot be separated from how we feel. Whether or not you agree with the Greeks’ aesthetic judgment, it’s a safe bet that Nature herself does.

Introducción

La distribución de las hojas alrededor del tallo, la reproducción de los conejos o la disposición de las semillas en espirales en numerosas flores y frutos se produce siguiendo secuencias numéricas conocidas como series de Fibonacci. Las series numéricas de Fibonacci fueron difundidas por un matemático italiano Leonardo de Pisa (1170 – 1250), también conocido como Fibonacci.

Esta serie consiste en  una sucesión de números naturales que se suman cada uno con el anterior hasta el infinito. El cociente entre dos números consecutivos de esta serie tiene como límite el número áureo, también conocido como  “la razón dorada”, “sección áurea” o “divina proporción”, ya que las distancias entre dos números seguidos de la serie, produce una imagen muy armónica y atractiva estéticamente. Este número, descubierto por los griegos, y muy aceptado por los renacentistas, tiene un valor de (1+ raíz de 5)/2 = 1.61803…, y se lo nombra con la letra griega φ (Phi). La sucesión formada por los cocientes (resultados de la división) de números de Fibonacci consecutivos converge rápidamente hacia el número áureo. Los griegos y renacentistas estaban fascinados con este número, ya que lo consideraban el ideal de la belleza. Un objeto que tuviese una proporción (por ejemplo, entre el alto y el ancho) que se ajustase a la  sección áurea era estéticamente más agradable que uno que no lo hiciese. La sucesión comienza por el número 1, y continua con 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584…, ya que 1 = 0+1; 2=1+1; 3= 1+2; 5=2+3; 8=3+5; 13=5+8=; 21=8+13… etc.

Si se estructuran los bloques de contenido de un sitio Web conforme a la serie de Fibonacci, respetando la “razón dorada”, la estructura global será visualmente mucho más armónica que si lo hacemos sin ninguna  noción artística, siguiendo únicamente  una necesidad o simplemente al azar. Un diseño Web estructurado de este modo puede retener más tiempo a los visitantes en la página Web. Si tenemos en cuenta estas enseñanzas matemáticas a la hora de diseñar nuestros sitios Web haremos más agradable la vida de los internautas y contribuiremos a una mayor usabilidad [1]de nuestro sitio Web.

La satisfacción del usuario final es el primer condicionante del éxito o fracaso de cualquier proyecto Web, y, definitivamente un  factor que contribuye enormemente a esta satisfacción es la estética de la página Web, la cual se percibe durante los primeros 50 milisegundos, de manera pre-cognoscitiva y es meramente emocional. Un usuario satisfecho podría pasar más tiempo en el sitio, volver a visitarlo o recomendárselo a otros.

Un sitio limpio, profesional, dinámico y estético puede asegurar que la primera impresión del visitante sea buena. Las cosas atractivas trabajan mejor ya que lo que pensamos, no se puede separar de lo que sentimos.

Ya sea que estés de acuerdo o no con la estética de los antiguos griegos y renacentistas, la misma naturaleza sí lo está, y definitivamente es una apuesta segura. En este artículo se expondrán los factores del diseño Web que influyen  en la satisfacción de uso y usabilidad , y cómo la razón dorada contribuye a ello.

————————————————————————————————————

Usabilidad y Satisfacción del Usuario  Web

La satisfacción del usuario Web es un concepto complejo y difícil de delimitar, pero entre las variables que la condicionan podemos destacar el diseño del sitio, el cual modelará la experiencia del usuario, posibilitando o impidiendo  la consecución de sus objetivos. A la satisfacción condicionada por el diseño del sitio Web podemos denominarla satisfacción de uso, y a la facilidad de su uso, se le denomina con el anglicismo usabilidad, que parece tener su origen en la expresión “user friendly”, y que es reemplazada por sus connotaciones vagas y subjetivas.[2]

Las definiciones de usabilidad propuestas por distintos autores se basan en la clasificación de los atributos o factores cuantificables que la componen y a través de los cuales puede ser evaluada, por lo que finalmente cada definición depende del contexto y enfoque con los que pretende ser medida. Sin embargo, la ISO (International Standards Organization) (1998) define usabilidad como el grado de eficacia, eficiencia y satisfacción con la que usuarios específicos pueden lograr objetivos específicos, en contextos de uso específicos.

La usabilidad comprende, entonces tres aspectos: eficacia, eficiencia y satisfacción .En este sentido podemos hablar de dos dimensiones de la usabilidad: usabilidad objetiva o inherente, y usabilidad subjetiva o aparente[3]. La primera puede ser medida o evaluada por observación del usuario mientras acomete tareas de interacción (eficacia y eficiencia), mientras que  la usabilidad subjetiva se refiere a la estética.

La estética es la cualidad que se refiere a una apariencia bella, placentera y atractiva. Un diseño estético es aquel que resulta agradable, ya sea para los sentidos, para la imaginación, o para nuestro entendimiento. En numerosos estudios se ha demostrado que existe una correlación entre estética y usabilidad percibida, o en otras palabras, que diseños estéticamente agradables son percibidos al mismo tiempo por el usuario como más fáciles de usar[4]. La estética es un factor de diseño que es claramente  motivador ya que evoca emociones – condicionando el comportamiento afectivo del usuario-, e influye en la intención de uso y produce satisfacción.

De todos los atributos de diseño, la estética es la que con mayor peso es percibida por el usuario; ya que  la apariencia visual de un sitio Web impacta desde el primer momento de su uso.

La Web de Oro

La divina proporción o proporción áurea, es considerada como la proporción perfecta. Se encuentra tanto  en figuras geométricas, partes del cuerpo y naturaleza, como en la relación de proporciones armónicas en la música, por ejemplo la que empleó Johann Sebastian Bach  en su afinación bien temperada[5].

La Gioconda

Existen numerosos textos que sugieren que el número áureo se encuentra como proporción en ciertas estelas Babilonias y Asirias de alrededor de 2000 a. C. Sin embargo no existe documentación histórica que indique que el número áureo fue usado conscientemente por los arquitectos o artistas. Los griegos[6] la utilizaron para diseñar las proporciones de sus templos. Platón consideró a la sección áurea como la relación matemática perfecta, y Euclides fue el primero en hacer un estudio formal sobre el número áureo, al cual le llamó el “corte dorado”.Durante el Renacimiento, el uso de la proporción áurea se extendió entre las artes; en 1509 el matemático y teólogo Luca Pacioli publicó su libro “De Divina Proportione” (La Proporción Divina), en el que plantea cinco razones[7] por las que considera apropiado considerar divino al número áureo , y  uno de los artistas que más uso le dio fue Leonardo Da Vinci. Sus obras se apegaban a una retícula basada en la proporción áurea; en la Gioconda, el rostro encaja perfecto en un rectángulo áureo y las partes de la cara a su vez se componen de rectángulos o proporciones áureas.

Se dice que si a una línea recta le agregamos un punto en un lugar que no sea el centro, la mayoría de las veces lo agregaremos acercándonos a la proporción de 62% y 38%. Esto es algo que hacemos naturalmente pues  siempre buscamos las composiciones más armoniosas. De manera que, si aplicamos esta relación en el diseño de nuestra página Web, es posible dar armonía y estética visual a nuestra pantalla.

Por ejemplo [8], si nuestra pantalla es de 1024 x 768  pixeles, con un ancho de 1010 pixeles visibles (es necesario restar los 14 pixeles, que consumen  las barras de deslizamiento laterales);  la proporción áurea, se obtiene dividiendo 1010 px entre 1.618 , y redondeando al número entero superior,   le correspondería una altura de 624 pixeles , (la cual, como sabemos, depende del contenido que se tenga).De manera que, el área total queda dividida en dos áreas, de la cual , el rectángulo del lado derecho es el rectángulo áureo, que a su vez vamos a seguir dividiendo en otros áureos.

Rectángulo áureo 1

Rectángulo áureo 2

Si seguimos dividiendo infinitamente y luego trazamos un arco por la diagonal de cada cuadrado, se obtiene la espiral logarítmica, que aparece frecuentemente en la naturaleza y su ejemplo más clásico la concha de un nautilus.

"Nautilus"

Ahora bien, con estos rectángulos áureos que hemos conseguido, podemos diseñar la retícula básica para hacer el diseño dorado de nuestro sitio Web.

Retícula básica INGENET

Esta retícula es básica, pero sirve de ejemplo para ilustrar lo que se puede hacer utilizando la proporción áurea para diseñar. Las posibilidades son infinitas, ya que se puede cambiar la orientación de los rectángulos, aumentar o disminuir  columnas, etc. Si además de buscar la proporción áurea, logramos simplicidad, navegación sencilla, uso de colores adecuados[9], superficies con detalle y gráficos multimedia que ayuden a mantener la atención del usuario, podremos asegurar tanto la satisfacción como la usabilidad de nuestro sitio.

Conclusiones

La Red se construye como una ciudad moderna donde lo que predomina es lo efímero, lo transitorio. Según se aproxima a la conciencia del tiempo actual (efímero) se aleja de lo natural ( lo eterno, lo artístico) . Nuestra cultura está saturada por los efectos que las nuevas tecnologías han generado: la velocidad del cambio, la masificación de las informaciones y la sobrevaloración del instante. Frente a una modernidad que avanza inexorablemente asumiendo la temporalidad como su fundamento efímero, se está perdiendo el interés por lo estético, lo “eterno”…y aquí,  quizá valga la pena recordar a Baudelaire quien siempre buscó la belleza  eterna en lo fugaz…..” El modernismo es lo transitorio, lo fugitivo, lo contingente, la mitad del arte, cuya otra mitad es lo eterno y lo inmutable”, escribe Baudelaire.[10]

Ante la  complejidad del nuevo arte de la Web, se requieren  artistas y escritores completos, con capacidad para romper lo unido y reunir lo disperso, para buscar la cualidad  estética, logrando moverse en todas las direcciones y dimensiones  reales y virtuales, ….conectando  lo meramente virtual  con nuestro entorno real,  vital  y natural, es decir, con nuestros sentidos y su eterna búsqueda de la armonía y equilibrio,  que nos conduzcan  finalmente a sentimientos de atracción y bienestar emocional.

[1] La usabilidad (del  inglés usability) es la 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. La usabilidad también puede referirse al estudio de los principios que hay tras la eficacia percibida de un objeto.

[2] Bevan, Kirakowski, y Maissel;   “What is usability?”  Proceedings of the 4th International Conference on HCI, Stuttgart, September 1991.

[3] Hassan Montero, Yusef ,” Factores del Diseño Web orientado a la satisfacción y No Frustración de Uso”, revista española de Documentación Científica. Junio, 2006.

[4] Por ejemplo, si hay algo que cualquiera percibe de Apple es la estética de cualquiera de sus productos, y luego que se les conoce admiramos su funcionalidad, así como los efectos de sus aplicaciones y su estilo.

[5] El “temperamento” se refiere al tipo de afinación de los instrumentos musicales, incluida la voz humana. Las primeras formas de afinación eran las pitagóricas en que la escala se dividía en doce partes desiguales matemáticamente perfectas por la regla de 3:2.Con Bach, se logró una afinación, basada en la serie de Fibonacci que pudiera cubrir diferentes tonalidades que hasta entonces no se podía.

[6] Los griegos de la antigüedad clásica creían que la proporción conducía a la salud y a la belleza. En su libro Los Elementos (300 a. C.), Euclides demostró la proporción que Platón había denominado «la sección», y que más tarde se conocería como «sección áurea». Ésta constituía la base en la que se fundaba el arte y la arquitectura griegos; el diseño del Partenón de Atenas está basado en esta proporción. En la Edad Media, la sección áurea era considerada de origen divino: se creía que encarnaba la perfección de la creación divina. Los artistas del Renacimiento la empleaban como encarnación de la lógica divina. Jan Vermeer (1632-1675) la usó en Holanda; pero, años después, el interés por ella decreció hasta que, en 1920, Piet Mondrian (1872-1944) estructuró sus pinturas abstractas según las reglas de la sección áurea.

[7] Unicidad ,inconmensurabilidad,  autosimilaridad, como está definido por tres secciones, se asocia con la Trinidad y por el dodecaedro que es considerado la quinta esencia que dio Dios al universo.

[8] Ejemplo tomado de Mexside: Diseño Web,  http://www.mexside.com/diseno-web/la-divina-proporcion-y-el-diseno-web

[9] A la hora de elegir los colores, es imprescindible pensar en el tipo de usuario al que va dirigida la página. No se debe abusar de los colores, poner una gran variedad de colores puede resultar estresante, dar sensación de desorden y además sería muy complicado destacar algo.

[10] Charles Baudelaire (1821-1867) fue un  poeta, critico de arte y traductor francés. Frase  citada  en “ Le Peintre de la Vie Moderne” p 797.

Imagen: Flickr

Tags: proporción áurea, sección áurea, Web 2.0