Principios heurísticos de forma II

Mis notas:

• Iconos: nos ayuda al reconocimiento y contexto.
• Remarcar: técnica para llamar la atención.
• Ratio de oro: proporción constante de acuerdo a una constante matemática (1,618)
• Profundidad de procesamiento: lo que se analiza profundamente se recuerda más que aquello superficial.
• Sesgo de contorno: visualmente se percibe agradable los bordes redondeados a en vértice.

Principios heurísticos de forma II

• Iconos: El uso de imágenes pictóricas, nos ayuda a mejorar el reconocimiento y recuerdo de las señales.

• Remarcar: Técnica para llamar la atención sobre un área de texto o imagen.

• Ratio de oro / Golden ratio / Proporción áurea: Nos habla de la relación entre el tamaño de los elementos. Se suele decir que la proporción entre los elementos debería dar como resultado una constante matemática (1,618)

• Profundidad de procesamiento: La información que se analiza profundamente se recuerda mejor que la información que se realiza superficialmente.

• Sesgo de contorno: Visualmente, existe una preferencia en preferir objetos con contornos redondeados, en vez de objetos con ángulos agudos.

Principios heuristicos de forma II

• Iconos.
• Remarcar.
• Ratio de oro.
• Profundidad del procesamiento.
• Sesgo de Contorno.

Ejemplo Ratio de oro 

Mis notas: 

1. Iconos: Recuerdo y reconocimiento de señales pictóricas, que mejoran los procedimientos en una acción. 2. Remarcar: Por medio de Textos resaltados o en negrita, imágenes, colores, fondo, forma... Se puede poner en practica el ejercicio de llamar la atención del usuario. 3. Ratio, mas conocido por proporción áurea: es una relación matemática que se da entre dos cantidades cuando la relación entre la mayor y la menor es la misma que la relación entre la suma de ambas y la mayor. Este número es aproximadamente **1.61** Lo defino cómo la relación de un equilibrio dinámico entre las proporciones con el resultado de una expresión estética. 4. Profundidad de Procesamiento: Un análisis profundo con mayores evidencias genera más recuerdos, que lo superficial 5. Sesgo de contorno: Es mejor un contorno redondeado que un contorno con vértices vivos

Principios heurísticos de forma II \*ICONOS Uso de imagines nos ayudan a recordar, darnos contexto, refuerza el reconocimiento \*REMARCAR Llama la atención en un área determinada Remarcar con color o negrita \*RATIO DE ORO Relacional entre el tamaño de los elementos Adecuada = placentero \*se suele decir que el resultado es 1,618 la relación de los elementos. Titulo 20 Texto 16 \*PROFUNDIDAS DE PROCESAMIENTO La información que se analiza profundamente se recuerda mejor: Imagenes gerarrquia titulares \*SESGO DE CONTORNO: REDONDEADOS MEJOR QUE AGUDOS

En resumen los principios Heuristicos de forma II * Iconos. * Remarcar. * Ratio de oro. * Profundidad del procesamiento. * Sesgo de Contorno.

### **Puntos importantes de la clase:** 1. **Iconos**: Mejoran el reconocimiento y la memoria visual en las interfaces, proporcionando contexto más claro que el texto solo. 2. **Remarcar**: Técnica utilizada para destacar elementos clave mediante el uso de negritas o colores. 3. **Proporción áurea**: Relación entre el tamaño de los elementos que genera armonía visual; el valor ideal es cercano a 1.618. 4. **Profundidad de procesamiento**: Cuanto más profundamente procesamos la información visual (texto, imágenes, encabezados), más probable es que la recordemos. 5. **Contornos**: Los contornos redondeados son preferidos visualmente sobre los ángulos agudos, proporcionando una estética más amigable.

**Clase 8 y 9 - Principios heurísticos de forma I y II** * **¿Cuáles son los principios heurísticos de forma?** * La forma sigue la función. * Ley de Prägnanz. * Sesgo de iluminación de arriba hacia abajo. * Proyección tridimensional. * Simetría. * Relación señal ruido. * Regla de los tres tercios. * Legibilidad. * Iconos. * Remarcar. * Ratio de oro. * Profundidad de procesamiento. * Sesgo de control. * **¿De qué trata el principio heurístico “La forma sigue a la función”?** * Esto nos habla de que si queremos que nuestro diseño sea estéticamente agradable, este debe haberse desarrollado a partir del resultado de decisiones racionales. * **¿Por qué es importante el principio heurístico “La forma sigue la función”?** * Porque cuando un diseño es agradable estéticamente genera confianza en el usuario. * **¿Cuánto tiempo puede tomar un usuario en decidir si el diseño de un producto digital tiene una estética agradable?** * Milésimas de segundos. * **¿De qué nos habla la ley de Prägnanz?** * Este nos habla del momento en que el usuario se enfrenta a elementos complejos y lo que hace para entender el elemento lo transforma en en la forma más simple posible de este elemento. * **¿Por qué el usuario transforma en su forma más simple a los elementos complejos?** * Porque esto hace que el esfuerzo cognitivo que debe hacer sea menor. * **¿De qué trata el sesgo de iluminación de arriba hacia abajo?** * Esto nos habla de que el usuario interpreta las sombras de los objetos gracias a una sombra imaginaria que ellos mismos crean. * **¿Qué debemos de tener en cuenta a la hora de trabajar con sombras en el diseño digital?** * Debemos de asegurarnos que todas tengan una dirección y sentido. * **¿De qué trata el principio heurístico de “la proyección tridimensional”?** * Esto nos habla de que el usuario percibe que los elementos pueden estar posicionados en una tercera dimensión o con una diferente perspectiva cuando ciertos patrones de posicionamiento se presentan. * **¿Cuáles son los patrones de posicionamiento que hacen qué el usuario cree la proyección tridimensional de un objeto?** * Interposición (un objeto encima de otro) * Tamaño (un objeto más grande que otro) * Perspectiva (un objeto está más enfocado que otro).  * **¿En qué consiste el principio heurístico de la simetría?** * Esto nos habla de que los elementos en un diseño deben tener una equivalencia visual utilizando su composición o forma. * **¿Qué es la relación señal ruido en los principios heurísticos?** * Esto nos habla de la importancia de mostrar únicamente información relevante al usuario, ya que si no lo hacemos causaremos que el usuario se pierda y confunda. * **¿Qué es la regla de los tres tercios?** * Es una técnica de composición que consiste en dividir un elemento en 3 filas y 3 columnas. * **¿En qué área es muy usada la regla de los tres tercios?** * En la fotografía. * **¿En qué consiste el principio heurístico de la legibilidad?** * Esto nos habla de que la calidad del texto que consume el usuario depende de: * Tamaño. * Tipografía. * Contraste. * Alineación. * Espaciado. * **¿En qué consiste el principio heurístico de iconos?** * Esto nos dice que los usuarios son capaces de recordar mejor una parte del diseño si este cuenta con algún icono que la diferencia en vez de solo usar un texto descriptivo. * **¿En qué consiste el principio heurístico de remarcar?** * Esta es una técnica que usamos para resaltar un área de texto o imagen y para ello podemos hacerlo con un color diferente a los demás elementos, agregando una negrita o cualquier cosa que se nos ocurra para realzar el elemento de los demás. * **¿En qué consiste el principio heurístico del ratio de oro?** * Este principio nos habla sobre el tamaño de los elementos. Lo que quiere decir es que debemos de tener cuidado con la proporción de tamaño de los elementos. * **¿Cuál es la proporción de tamaño que debemos de usar en el ratio de oro?** * 1:1.618 * **¿Cómo obtenemos la proporción de tamaño del ratio de oro?** * Dividiendo el tamaño de los elementos entre sí. * **¿Con cuál otros nombres se le conoce al principio heurístico del ratio de oro?** * Golden ratio * Proporción Áurea. * **¿En qué consiste el principio heurístico de profundidad de procesamiento?** * Este principio nos habla de que la información que se realiza de manera profunda es mucho más fácil que el usuario la recuerde. * **¿Cómo podemos mostrar la información para que el usuario la recuerde según el principio heurístico de profundidad y procesamiento?** * Haciendo uso de varios elementos gráficos. * **¿En qué consiste el principio heurístico de sesgo de control?** * Este principio nos dice que los usuarios recuerdan mejor los elementos con contornos suaves a diferencia de los elementos con ángulos agudos.

El rato de oro, también conocido como la razón divina o la proporción áurea, es una constante matemática aproximadamente igual a 1.618. Se utiliza ampliamente en diversas áreas, incluyendo el diseño web, el diseño de interfaz de usuario (UI) y el diseño de experiencia de usuario (UX), para crear composiciones atractivas y armoniosas. A continuación, se presentan algunos puntos clave sobre el uso del rato de oro en el diseño web: ## ¿Por qué utilizar el rato de oro en el diseño web? 1. **Aestética**: El rato de oro se cree que crea un sentido de equilibrio y armonía en los diseños, lo que los hace más atractivos y agradables para los usuarios. 2. **Experiencia del usuario**: Al aplicar el rato de oro, los diseñadores pueden crear un sentido de familiaridad y equilibrio en sus diseños, lo que puede mejorar la experiencia del usuario y hacerla más disfrutable. ## Herramientas y técnicas 1. **Phi Calculator**: Una herramienta para calcular las dimensiones del rato de oro para cualquier número dado. 2. **UX Triggers**: Una herramienta para probar si un diseño sigue el rato de oro. 3. **Golden Section Finder**: Una lupa portátil para observar el rato de oro en diferentes contextos. 4. **Phimatrix**: Una herramienta para grids y plantillas personalizables que permite analizar y diseñar según el principio del rato de oro. ## Aplicaciones en el diseño web 1. **Diseños de layout**: El rato de oro se puede utilizar para crear diseños de layout equilibrados dividiendo el ancho del diseño en secciones según las proporciones del rato de oro. 2. **Tipografía**: El rato de oro se puede aplicar a la tipografía para crear disposiciones de texto atractivas y armoniosas. 3. **Organización de contenido**: El rato de oro se puede utilizar para organizar el contenido en secciones con proporciones agradables, mejorando la experiencia del usuario. 4. **Jerarquía visual**: El rato de oro puede ayudar a crear una jerarquía visual efectiva al colocar elementos en una composición armoniosa y equilibrada. ## Ejemplos e inspiración 1. **Logotipos**: Muchos logotipos, como los de Google, Pepsi y Apple, incorporan el rato de oro en su diseño. 2. **Naturaleza**: El rato de oro se encuentra en muchas formas naturales, como conchas de mar y flores, que pueden servir de inspiración para los diseñadores. ## Conclusión El rato de oro es una herramienta poderosa en el diseño web, ofreciendo un marco matemático para crear composiciones atractivas y armoniosas. Al aplicar el rato de oro, los diseñadores pueden mejorar la experiencia del usuario, crear un sentido de equilibrio y familiaridad, y producir diseños que sean atractivos y agradables para los usuarios. A continuación, se presentan algunos ejemplos de páginas web que utilizan el Golden Ratio en su diseño: 1. **Google**: El logotipo de Google es un ejemplo clásico de la aplicación del Golden Ratio. La proporción entre los elementos del logotipo se ajusta a la proporción áurea, lo que crea un diseño equilibrado y atractivo. 2. **Apple**: El diseño de la página de inicio de Apple.com utiliza la proporción áurea para organizar los elementos de la página. La barra de navegación y el contenido se distribuyen de manera equilibrada, creando una sensación de armonía visual. 3. **Pepsi**: El sitio web de Pepsi utiliza la proporción áurea para diseñar sus secciones de contenido. Las imágenes y los textos se distribuyen de manera equilibrada, creando una sensación de equilibrio visual. 4. **Domestika**: El sitio web de Domestika utiliza la grilla de la proporción áurea para diseñar sus interfaces de usuario. La grilla ayuda a crear una distribución equilibrada de los elementos en la página, lo que mejora la experiencia del usuario. 5. **Anastasia Beverly Hills**: El sitio web de Anastasia Beverly Hills utiliza la proporción áurea en su diseño de cejas. El método Golden Ratio de Anastasia utiliza la proporción áurea para dar forma a las cejas y lograr armonía visual

Un pequeño blog que habla un poco más sobre el golden ratio

https://blog.prototypr.io/golden-ratio-in-ui-design-8d11e66582c3

Heurísticos de forma I. Forma sigue a la función: Para que sea estéticamente agradable se basa en decisiones razonables. Ley de pragnanz: El usuario percibe imágenes ambiguas de una forma simplificada. Sesgo de iluminación de arriba hacía abajo: Utiliza sombras de arriba hacia abajo o viceversa para darle sentido a la composición. Proyección tridimensional: Interposición, tamaño y perspectiva. Simetría: Alinear los elementos de forma agradable, resaltando el CTA. Relación señal a ruido: Definir la información relevante, en base al uso de la app o producto. En el caso de Maps o Waze, deberían de tener menos información, ya que es irrelevante. Regla de tercios: Utilizada en fotografía, se divide la pantalla en tercios, ubicando a los elementos de interés en cualquier de los 4 puntos. Legibilidad: Texto sencillos, con buen contraste, menos es más.

* Iconos: Uso de imágenes pictóricas o iconos nos ayuda a mejorar nuestra aplicación, pequeños pictogramas que nos ayudan a reforzar el reconocimiento de el lugar. * Remarcar: Lo vamos a usar muchas veces, llamar la atención sobre un texto o objeto. * Radio de Oro (Proporción aurea): SI la proporción es adecuada todo el diseño va a ser más placentero, la relación con los elementos debe ser 1,618 * Titular de 20 pixeles y la caja de texto concordan en proporción. Se tiene también relación entre ancho de contenido y ancho de sidebar. * Profundidad de procesamiento: La información que se annalisa profundamente es mucho mejor que la información que se analiza superficialmente, * Sesgo de contorno: Visualmente tendencia a preferir objetos redondeados en sus bordes, ya que visualmente se percibe mejor.