Patrones perceptivos

Clase 6 de 16 • Curso de Patrones y Componentes en Sistemas de Diseño

Angie Oviedo

student•

Apuntes de la clase: Los patrones perceptivos junto a los funcionales crean la base de nuestro sistema de diseño. Para entender que son imaginemos que dos personas tienen un coche de 5 plazas, 5 puertas y un motor de gasolina ¿Sería el mismo coche? Probablemente la respuesta a esta pregunta sería que no.

En este caso esas características serían funcionales mientras que las características perceptivas serían su color, tapicería, forma etc

Los patrones perceptivos

Cuentan con cualidades físicas y visuales que diferencian los productos.
Se podrían definir como los estilos de marca o de identidad visual del producto: tipografías, colores, iconografía...

Características:

Siempre están presentes: incluso aunque no haya diseñador y el programador crea un componente puramente funcional tiene unas características visuales.
No son puramente superficiales: Deben representar la esencia y los principios de tu sistema de diseño, para que se diferencien del resto.

Para que sirven:

Generan relaciones entre ellos
- ¿Cómo se combinan los colores?¿Que relación hay entre la tipografía?¿El tono del texto corresponde con las imágenes?

Conclusión Si los patrones funcionales son lo que los usuarios y usuarias hacen (comportamientos) los patrones perceptuales son lo que sienten (emociones) y lo que hacen de forma intuitiva (impulsos). Esta combinación de patrones es lo que proporciona a nuestro sistema un valor único.

Rubén Vega

student•

Gracias

Alejandro Perafán

student•

Conclusión corta y clara:

Patrones funcionales: Son tangibles y se relacionan con ++acciones++ reales del usuario. ++(Comportamientos)++.

Patrones perceptuales: Son las ++tipografías, colores, sombreados, espaciados, etc.++ Características que evocan emociones en la experiencia del usuario. ++(Sensaciones).++

Mi Chu

student•

Gracias

Crismar Silva

student•

Los patrones perceptivos, son todas aquellas características que describen al objeto y lo diferencian de los demás, esto es lo que llamamos en la metodología ooux como los metadatos (que serán los datos que describen al objeto), si ven el curso de Diseño de prototipos móviles, allí les explica el profesor Misael sobre esta metodología, que en conjunto con este curso de patrones y componentes en Sistema de Diseño les será de mucha ayuda para organizar toda la información y tener fundamentadas todas las bases de su sistema de diseño, adquiriendo así buenas practicas para llevarlas a cabo en el campo laboral.

Santi Orduno

student•

¿Qué son los patrones perceptivos?

Es meramente enfocado en lo que es perceptible, en el caso de la clase donde se hablan de coches pueden que tengan la misma funcionalidad sin embargo son diferentes colores, olores, sensaciones, etc. Dicho de una forma más tecnica son cualidades físicas y visuales que diferenciasn los dos productos. Estilos de marca o identidad visual.

A pesar de todo esto no debemos ver a estos patrones como algo meramente superficial. Deben representar la escencia y los principios de tu sistema de diseño.

Octavio Cuellar Vargas

student•

Muy interesante este concepto de los patrones. Me gustó mucho la conclusión de esta clase.

Pedro Isaac Aguilar

student•

Si los patrones funcionales son lo que los usuarios hacen (comportamientos), los patrones perceptuales son lo que sienten (emociones) y lo que hacen de forma intuitiva (impulsos).

Julio Manuel Gomez Coello

student•

Me encanta el trabajo que hace el banco Pichincha, ellos llevan su branding a la APP y eso transmite impulsos de proximidad y familiaridad. Les recomendaría leer este articulo Sobre Branding, nos ayuda a entender que no solo es responsabilidad del design system. https://rockcontent.com/es/blog/branding/

Felipe Bernardo González Barranco

student•

Los patrones perceptivos le otorgan la identidad a la marca-

Los patrones funcionales son los que los usuarios hacen, y los patrones perceptuales son lo que sienten y lo que hacen de forma intuitiva

Emanuel Panarello

student•

Patrones funcionales > Comportamientos Patrones perceptuales > Emociones e impulsos

Marilia Prado

student•

A modo constructivo, honestamente deberían preparar mejor a algunos profesores he visto varios cursos incluyendo este donde se nota como la persona lee y la poca confianza en lo que esta explicando. Es difícil mantener la atención

MARIA TERESA PANIAGUA RIVERA

student•

Gracias

Federico Villanueva

student•

Los patrones perceptivos hacen que los usuarios identifiquen y comprendan rápidamente una interfaz a través de elementos visuales como el color, la tipografía y la disposición de los componentes. Estos patrones no solo refuerzan la identidad de la marca, sino que también mejoran la usabilidad al hacer que las interacciones sean más intuitivas.

Héctor Alonso Padilla Ramírez

student•

Los patrones perceptivos son principios y soluciones de diseño que se basan en cómo los usuarios perciben y procesan visualmente la información en una interfaz. Estos patrones están centrados en la percepción humana y ayudan a organizar y presentar los elementos de una forma que sea intuitiva y fácil de entender para los usuarios. Aprovechan las capacidades naturales del cerebro para interpretar formas, colores, tamaños y relaciones espaciales, optimizando la experiencia visual y mejorando la usabilidad de un producto digital.

Características de los patrones perceptivos

1. Basados en la psicología de la percepción: Los patrones perceptivos aprovechan principios psicológicos sobre cómo las personas perciben el entorno, como la agrupación, el contraste y la proximidad.

2. Optimización visual: Estos patrones están diseñados para facilitar el procesamiento visual y la comprensión rápida de la información, lo que reduce la carga cognitiva del usuario.

3. Facilitan la navegación: Ayudan a los usuarios a interpretar y navegar por una interfaz de forma más eficiente, entendiendo la jerarquía visual, la organización espacial y los elementos interactivos.

4. Aplicables en cualquier interfaz: Pueden aplicarse tanto en sitios web como en aplicaciones móviles y otros productos digitales para mejorar la experiencia de usuario.

Ejemplos de patrones perceptivos

1. Proximidad: Elementos que están cerca entre sí tienden a ser percibidos como relacionados o agrupados. Este patrón perceptivo ayuda a los usuarios a organizar visualmente la información y a entender rápidamente las relaciones entre los elementos en una interfaz.

• Ejemplo: Agrupar botones de acción relacionados en la misma área de la pantalla para indicar que forman parte de la misma función o proceso.

2. Similitud: Los objetos que tienen características similares (como forma, color, tamaño) tienden a ser percibidos como parte de un mismo grupo. Esto ayuda a crear coherencia visual en los diseños.

• Ejemplo: Usar el mismo estilo visual para todos los botones de una página (color y forma) para que el usuario entienda que cumplen la misma función.

3. Contraste: El contraste entre elementos (como color, tamaño o forma) ayuda a resaltar la importancia de ciertos objetos o a hacerlos más fáciles de identificar.

• Ejemplo: Un botón de llamada a la acción (CTA) puede tener un color más brillante que el resto de los elementos de la página para captar la atención del usuario.

4. Jerarquía visual: Este patrón se refiere a organizar la información de manera que los usuarios puedan entender rápidamente qué elementos son más importantes. El uso de diferentes tamaños, grosores de fuente y colores ayuda a establecer esta jerarquía.

• Ejemplo: Utilizar títulos más grandes y negritas para encabezados, mientras que los subtítulos y el cuerpo del texto son más pequeños y menos destacados.

5. Continuidad: Los elementos dispuestos en una línea o curva tienden a percibirse como conectados y son más fáciles de seguir visualmente. Este patrón guía los ojos del usuario a través de la interfaz.

• Ejemplo: Un menú de navegación que se dispone en una línea horizontal o un flujo de pasos conectados por flechas para guiar al usuario a través de un proceso.

6. Cierre: La mente humana tiende a completar figuras incompletas, lo que permite a los usuarios percibir un diseño coherente aunque algunos elementos no estén explícitamente delineados.

• Ejemplo: Un icono de carga que se representa mediante un círculo incompleto, que el cerebro del usuario interpreta como un proceso que está en marcha.

7. Figura y fondo: Este patrón se refiere a la capacidad de distinguir un elemento (figura) del fondo que lo rodea. Se puede utilizar para hacer que los elementos importantes destaquen.

• Ejemplo: Un botón que sobresale claramente de un fondo neutro, lo que hace que sea fácil de identificar como un elemento interactivo.

8. Espacio en blanco (white space): También llamado espacio negativo, se refiere a los espacios vacíos entre elementos de una interfaz. El uso de espacio en blanco ayuda a crear un diseño más equilibrado y menos abrumador, mejorando la legibilidad y la comprensión.

• Ejemplo: Separar los párrafos de texto con suficiente espacio en blanco para hacer la lectura más agradable y menos densa visualmente.

Beneficios de los patrones perceptivos

• Facilitan la comprensión visual: Aprovechar estos patrones permite que los usuarios interpreten rápidamente la información y naveguen de manera más eficiente.

• Mejoran la usabilidad: Diseñar interfaces basadas en la percepción humana reduce la fricción en la experiencia del usuario, haciendo que las tareas sean más intuitivas.

• Reducción de la carga cognitiva: Los patrones perceptivos hacen que los usuarios necesiten menos esfuerzo mental para entender una interfaz, lo que resulta en una experiencia más fluida.

• Jerarquía y enfoque claro: Los patrones como el contraste, la jerarquía visual y el uso de espacio en blanco ayudan a que los elementos más importantes resalten, lo que facilita la toma de decisiones por parte del usuario.

Relación entre patrones perceptivos y principios de diseño

Los patrones perceptivos están directamente relacionados con los principios de diseño, ya que estos últimos también se basan en cómo las personas perciben y procesan la información. Por ejemplo:

• El principio de contraste es clave para destacar elementos importantes, y se implementa mediante el patrón perceptivo de contraste de color, forma o tamaño.

• El principio de proximidad se implementa utilizando el patrón perceptivo de proximidad, agrupando visualmente elementos relacionados para que los usuarios los identifiquen como tal.

Ejemplo práctico

En un formulario de contacto, los patrones perceptivos ayudarían a:

• Usar espacio en blanco para separar claramente cada campo del formulario, haciendo más fácil el enfoque en cada paso.

• Aplicar contraste para que el botón de enviar sea claramente visible y destacable frente a los campos de texto.

• Utilizar proximidad para agrupar campos relacionados, como nombre y apellido, lo que le indica al usuario que estos campos forman parte de la misma categoría.

Pedro nel Cifuentes

student•

Patrones perceptivos que podemos definir de nuestro producto:

Espaciado y layout. Ilustraciones y tono. Tipografía, paleta de color e íconos.

Luis Ángel Morales Hernández

student•

En un sistema de diseño, un "patrón perceptivo" se refiere a ciertos elementos o combinaciones de elementos visuales que se utilizan de manera consistente para crear una experiencia de diseño coherente y reconocible.

Piensa en ello como un conjunto de reglas visuales que se repiten para ayudar a los usuarios a identificar y entender la información de manera más fácil. Estos patrones perceptivos pueden incluir cosas como colores específicos, tipografías, iconos o disposiciones de diseño que se utilizan de manera coherente en diferentes partes de un producto o plataforma.

Por ejemplo, si un botón siempre tiene un color particular y aparece de la misma manera en todas las páginas de una aplicación, eso sería un patrón perceptivo. Esta consistencia ayuda a los usuarios a entender intuitivamente cómo interactuar con el sistema y qué esperar visualmente.

carlos pineda

student•

Esta clase está interesante por el contenido pero empieza a ser un poco pesada, la profe se la pasa leyendo solo sus notas (como en la secundaria :p )

Juan Ortega

student•

El mayor principio estético del diseño industrial es: La forma sigue a la función y para mi es una buena forma de entender estos dos patrones solo que a nivel de SDD podríamos decir que los patrones perceptivos refuerzan de manera cognitiva los patrones funcionales.

Roberto Patrón

student•

Me da la impresión de que los patrones perceptivos, son como el "look and feel" de la marca, cuando hablamos de branding o diseño de marca.

David Antonio Garcia Saaib

student•

Mediante Patrones de lenguaje de interfaz hacemos de manera gráfica la manera general en la que se ven los procesos de nuestro sistema.

Mediante los Patrones funcionales, damos valor a cada uno de los comportamientos del usuario en nuestro sistema.

Mediante los Patrones Perceptivos, damos identidad a nuestro sistema, reflejamos la marca y facilitamos la percepción entre funcionalidades.

Patrones perceptivos

Introducción

Patrones y Componentes en Sistemas de Diseño

Patrones en los SSDD

Diseño Atómico: Creación de Patrones y Componentes Eficientes

Principios de Diseño para Sistemas Digitales

Patrones de Lenguaje en Diseño de Interfaces

Patrones Funcionales en Productos Digitales: Definición e Importancia

Patrones perceptivos

Definición de patrones en tu sistema

Documentación de los patrones

Componentes en los SSDD

¿Para qué utilizar los componentes?

Tipos de componentes

Requisitos mínimos

UI Kit y SSDD

Consejos para el UI Kit

Documentación del UI Kit

Design Tokens

Resumen y despedida

Autoevaluación del Curso de Patrones y Componentes en Sistemas de Diseño