Principios de la Gestalt

Teorías que analizan las áreas grises de cómo funciona nuestra percepción visual. Explican cómo las personas perciben objetos, y cómo las variaciones en la disposición, perspectiva, tamaño, etc. puede alterar esta percepción.

"El todo es más que la suma de sus partes"

Axioma de Aristoteles

Al observar un diseño el cerebro cataloga las imágenes.

Nuestras experiencias y el contexto definen nuestra percepción

Detección

El estímulo es captado por alguno de los órganos sensoriales

Transmisión

Los órganos sensoriales transforman el estimulo en señales electroquímicas que son transmitidas al cerebro.

Procesamiento

El estimulo llega al cerebro donde es interpretado.

Propiedades básicas

Emergencia
Reificación
Multiestabilidad
Invarianza

Emergencia

Al intentar identificar un objeto, los humanos intentamos primero identificar el contorno del objeto y asociarlo con figuras que ya conocemos. Es solo después de esta identificación de contornos que comenzamos a notar los detalles de un objeto, las partes como separadas del todo.

Reificación

Debido a que los estímulos visuales son inconsistentes, nuestros cerebros tienden a "rellenar los vacios" cuando falta información. Esto nos permite comprender imágenes incluso cuando son vagas o limitadas.

Multiestabilidad

Si un objeto tiene más de una interpretación, la mente alternará entre las diferentes interpretaciones ya que no puede ver ambas simultaneamente. Cuanto más se centre un espectador en una interpretación sobre otra, más dominante se vuelve dicha interpretación.
```
 
```
```
 
```
```
 
```

Invarianza

Al igual que la reificación, la invarianza es otra táctica que nuestros cerebros usan para comprender
visuales a pesar de inconsistencias evidentes. La invarianza muestra que reconocemos contornos y patrones de objetos a pesar de las diferencias
en perspectiva, rotación, escala, o incluso ligeras deformaciones.

Relato gráfico

"El procedimiento de configuración de mensajes bi-media se apoya en los principales elementos de la significación visual: la imagen como modo de representación de las cosas visibles o visualizables y el texto como medio de designación y enunciación escrita. Imagen y texto constituyen la base de lo que llamaremos el sistema gráfico."

Organización

El sistema gráfico es un sistema de signos que se compone de cuatro grandes familias: Imagen, Texto, Grafismos y Color. Estos signos se combinan, de modo extremadamente variable, sobre el soporte de la información que llamaremos el espacio gráfico.

Soporte de inscripción o espacio gráfico

El plasmado de formas, colores, imágenes y textos depende de la disponibilidad de su soporte. El soporte posee limitaciones dimensionales o espaciales, puede ser bidimensional estático o bien secuencial como un libro o folleto.

Debemos considerar el soporte en sus diferentes dimensiones: como superficie en la que distribuir los elementos y como objeto de manipulación.

Selección

Elementos básicos del diseño

Punto
Línea
Dirección
Forma
Tamaño
Textura
Color

Imagen

"La imagen representa cosas (las vuelve a hacer presentes) y se parece a lo que representa".

La función de la imagen es restituir la impresión visual de algo real empírico con mayor o menor grado de fidelidad reproductiva.
A grandes rasgos podemos clasificarlas en imágenes al trazo (voluntad de decir/comprensión) y en tramadas (Ilusionar/simulación), la imagen en blanco y negro y la imagen con valores.

Grafismos

Son variables de la visualización, en general no son elementos de significación sino de estructuración.

Grafismos estructurantes del mensaje: construye un espacio gráfico, distribuye los elementos generando una estructura que no se evidencia directamente sino que es un armazón que sustenta los elementos.
Grafismos informacionales: No tienen finalidad estructurante sino directamente expresivas o informativa. Señaleticos (subrayados, trazos que circunscriben áreas, resaltados, etc.) Emblematicos y de identidad (signos convencionales, ampliamente difundidos y compartidos)

Color

Teniendo en cuenta su expresividad el color puede ser clasificado en dennotativo, connotado o esquemático.

Color Icónico: Nos permite reconocer un objeto. Realista, (atributo natural de las cosas), saturado (llamar la atención), fantasioso (forma permanece y el color se altera).
Color connotativo: Es la acción de factores no descriptivos sino psicológicos , simbólicos o estéticos que generan cierto clima.
Color esquemático: Se encuentra en el mundo de los códigos y de lo arbitrario. Emblemático (Codificado para su uso social), convencional (significado convencional y expresivo), señalético (no busca fidelidad icónica genera un codigo señalético)

Texto y tipografía

Aparte de su obvia función verbal (transmisión de información), la tipografía posee una dimensión semiótica no-verbal, icónica , que incorpora por connotación significados complementarios.

Normalizado: Tipografia, transfert
Espontáneo: Grafiti, rotulación, caligrafia

Interacción

Principios básicos del diseño

Balance/Equilibrio
Proximidad
Alineación
Repetición
Contraste
Espacio blanco

5 principios útiles

Similaridad
Relación entre figura y fondo
Agrupación
Cierre
Continuidad

Similaridad

Objetos que lucen similares son percibidos como similares
- Comunicar información de la manera más rápida y fácil posible.
- Usar la similitud para transmitir significado, ahorrando tiempo en explicaciones y facilitando la experiencia.

Relación figura- fondo

Los elementos se perciben como figuras (elementos de enfoque distintos) o fondos (sobre el que se encuentran las figuras).
Estable, reversible, ambigua

Agrupación

Elementos disímiles pueden ser agrupados juntos para parecer similares.
- Cercado
- Proximidad

Cierre

Basado en los principios de reificación, el cierre menciona cómo los humanos proporcionarán su propio cierre a objetos incompletos rellenando los vacíos por sí mismos.
```
 
```
```
 
```
```
 
```

Continuidad

En relación con el cierre, este principio establece que el ojo de un usuario crea momentos a medida que se mueve de un objeto a otro, dando a las líneas un poder especial en el diseño.
Usuarios perciben elementos en una línea o en una curva como similares.

Multimedia e Hipermedia

MULTI – del latín multum – numeroso, más de uno o muchos, explica la idea de multiplicidad.

MEDIA – del latín medium – que significa medio, agente, vía.

objeto que integra de manera interactiva a través de un soporte digital distintos elementos expresivos como: texto, color, arte gráfico, animaciones, video, sonido, en un mismo entorno, para que el usuario pueda disponer de estos recursos.

Organización

Estructura y vista

“Por estructura se entiende la organización interna de los datos….Por vista se entiende la percepción de los datos que llega al usuario”

Navegar

De vista a pantalla

TODO LO QUE ACONTECE

(IMAGEN, TEXTO, SONIDO, INTERACCIÓN)

Principio de la múltiple entrada
Principio de interactividad
Principio de retroalimentación
Principio de vitalidad
Principio de necesidad
Principio de libertad
Principio de atención
Principio de economía
Principio de uniformidad
Principio de sorpresa

Principio de

múltiple entrada

En el almacenamiento de la información del ser humano intervienen tres parametros: el cognitivo, el afectivo y el factor de la experiencia previa.

La forma en que grabamos la información en nuestra memoria depende de:

La estructura de la información (es decir, decir, de si su complejidad es asumible por nuestras destrezas cognitivas)
El impacto afectivo que esta información tiene en nosotros (los sentimientos con los que ha sido recibida)
De nuestra experiencia previa (o de cómo hemos reaccionado anteriormente ante información similar y en qué constructos cognitivos vamos a integrarla)

https://pablotheflamingo.com/

Principio de interactividad

Siempre que pueda haber interacción debe haberla.

Debe planificarse cuidadosamente cada interacción del usuario con la aplicación (entrada de datos, elección, forma de señalar, etc.).

La interacción tiene como función principal reforzar el mensaje
Entrar en procesos no interactivos, se desperdicia la potencialidad del medio.
La interacción implica participación, no repetición de gestos.
No es aconsejable recordarle al usuario que no puede interactuar. Es mejor ocultar de la escena aquellas opciones inactivas.
La interacción debe también incluir la interacción entre distintas personas y grupos, utilizando así las telecomunicaciones.
La interacción permite obtener un registro de datos descriptivos de la conducta del usuario.

Principio de retroalimentación

La idea de un sistema que genera información y se utiliza para corregir su funcionamiemto, se denomina en diferentes ámbitos retroalimentación (feed-back).

Para adaptarla a las aplicaciones multimedia hay que tener presentes los cuatro puntos siguientes:

¿Qué información se recoge?
¿Cómo se presenta?
¿A quién se dirige?
¿Cómo se procesa?

Principio de vitalidad

Toda pantalla está viva. Es decir, el usuario tiene que percibir la aplicación como algo que funciona autónomamente.

https://paperplanes.world/

Principio de necesidad

Las aplicaciones multimedia deben ser necesarias. Es decir que para su diseño, se debe partir de dos a prioris:

La aplicación sirve para algo (necesidad de la existencia de esta aplicación)
La aplicación debe ser multimedia (necesidad de ser diseñada bajo este enfoque)

Dos fuentes importantes de “multimediatización” son la comodidad y la seguridad.

Comodidad: Actualización de software a versiones más ergonómicas, o de monotarea a multitarea.

Accesibilidad: La seguridad en la gestión de la información se basa en la accesibilidad. Si una información es de difícil acceso es como si se hubiera perdido.

http://warsawrising.eu/

https://lmgtfy.com/

Principio de libertad

El objetivo de un diseñador multimedia es que el usuario piense que navega libremente, mientras que en realidad está inmerso en un esquema de etapas predeterminado.

Lo que no debe suceder es que finalmente el usuario perciba un pasaje secuencial de diapositivas.

http://www.drawastickman.com/

Principio de atención

Podemos entender por atención la apertura selectiva del individuo al entorno, es decir, la postura de selección de información que presentamos y sobre la que el individuo actuará.

El objetivo de las aplicaciones es mantener una atención sostenida, es decir, conseguir que el receptor mantenga una actitud continua de expectación ante la aplicación. Se presentan dos factores que pueden ayudar a conseguir este objetivo:

1. Atención cognitiva: Se basa en el valor de información suministrada. Para conseguirla hace falta que la información sea relevante y que la información esté bien organizada.

2. Atención afectiva: Se basa en el lazo afectivo que se establece entre el usuario y la aplicación. Ayudará a establecer esta atención afectiva el hecho de enfocar la aplicación como una narración.

Interfaz de usuario

Describe las maneras en qué este interactúa con el equipo. Comprende los dispositivos de entrada y salida física de datos, integra las metáforas que se usan para conceptualizar la organización y estructura, además de las maneras de de manipular los datos informáticos.

Ya no nos comunicamos con un ordenador sino con la cultura codificada en forma digital.

Son las maneras en que los ordenadores presentan los datos culturales y nos permiten relacionarnos con ellos.

Estrategias organizativas que ya no vienen incluidas en películas o textos determinados, sino que ahora flotan libremente en nuestra cultura, disponibles para su uso en nuevos contextos.

"El diseño de la interfaz de usuario (UI) es el proceso de hacer interfaces en software o dispositivos computarizados con un enfoque en la apariencia o el estilo. Los diseñadores buscan crear diseños que los usuarios encuentren fáciles de usar y agradables."

Interaction Design Foundation

“If we want users to like our software, we should design it to behave like a likeable person: respectful, generous and helpful.”

— Alan Cooper, software designer and programmer

Principios básicos

Preguntar: ¿Qué está haciendo el usuario?

Pensar: Qué información, comparaciones, orden

Diseñar: La forma sigue a la función

Selección

Discurso

Mensaje

Dramatización

Discurso

Trasladando el concepto cinematográfico de discurso a las aplicaciones multimedia, se corresponde con la información a transmitir. Toda aplicación tiene su discurso, es decir, algo que contar.

Mensaje

Hay autores que defienden la postura de que toda aplicación trasmite un mensaje (una moraleja, una conclusión). Dado que ello es inevitable, como diseñadores de aplicaciones debemos asegurar que el mensaje esté en consonancia con la aplicación y con los objetivos de la misma. El mensaje puede transmitirse en forma explícita u oculta.

Documentación previa (ideación)

motivo primordial para la construcción y se concreta estableciendo los puntos mas destacables, dejando claro la esencia y el contenido de la misma.

donaldtrumpsimulator.com

Species in pieces

Selección de elementos multimedia

es aquí donde se seleccionan los contenidos y su estructura, se define la navegación, se describen los escenarios y los personajes además de las funciones y elementos de la interfaz y su tratamiento como Ilustración, animación, fotografía, vídeo, música, efectos sonoros, locuciones, textos escritos, entre otros.

http://astateofwar.org.au

Descripción de existentes

Escenarios, personajes y elementos gráficos de la interfaz.

Interacción

Dramatización

Que exista el componente dramático en una aplicación multimedia, implica que se toca algún aspecto vital (el conflicto, el sentimiento, etc.). Si no hay dramatización la aplicación suele terminar por perder el interés.

Diseño de la arquitectura de la información

disciplina y arte encargada del estudio, análisis, organización, disposición y estructuración de la información en espacios de información, y de la selección y presentación de los datos en los sistemas de información interactivos y no interactivos.

Lineal, jerárquica, rizomática

Descripción de la acción y la interacción

Axioma fundamental:

"Cada pantalla es un problema"

Diseñar para

el espacio

El uso efectivo del espacio en el diseño de la interfaz de usuario requiere una comprensión de la estética, la funcionalidad y el comportamiento humano. De hecho, el diseño espacial es el vínculo entre las dimensiones más estilísticas del lenguaje y las imágenes, y las más prácticas de responsividad, tiempo y comportamiento del usuario. El espacio existe en algún lugar en el medio, lidiando con problemas en ambos lados del espectro.

El espacio negativo

no es negativo

Todos los buenos artistas visuales entienden la importancia del espacio negativo, el área vacía que llama la atención y acentúa el tema real. El espacio negativo es como el elenco de apoyo cuyo deber es hacer que la estrella de el espectáculo se destaque más que ellos mismos.

En el diseño de interacción, el espacio en blanco cumple tres funciones principales: mejorar la comprensión, aclarar las relaciones y llamar la atención.

Mejorar comprensión

La habilidad de usar el espacio en blanco radica en proveer a los usurios con una cantidad digerible de contenido y retirar los detalles ajenos.
El espacio en blanco se puede dividir en cuatro elementos:
- Espacio blanco visual
- Espacio blanco del diseño
- Espacio blanco del texto
- Espacio blanco del contenido

Más allá de mejorar la comprensión, los espacios en blanco ayudan a crear mapas mentales.

Aclarar relaciones

Ubicar etiquetas cerca a los campos relevantes
Agrupar tópicos relacionados juntos
Atraer la atención

Fragmentar el contenido

La mayoría de los diseñadores se suscriben a la escuela de pensamiento "no hacer que el usuario piense". No es que los usuarios sean vagos, es que ya tienen mucho en mente, y reunir información adicional solo hace que sea más difícil completar sus tareas. La cantidad de tensión que crea un diseño de interfaz se llama "carga cognitiva", y una IU utilizable y agradable lo reducirá tanto como sea posible.
Memoria a corto plazo 5 - 9 elementos.

El espacio, dependiendo cómo se use, puede añadir o quitar valor al contenido

Relaciones visuales

Contraste y similaridad

El contraste y la similaridad son dos aproximaciones para mostrar relaciones entre los elementos de una pagina, ahorrando tiempo y esfuerzo al hacerlo visualmente

Contraste

Puede añadir drama e intriga
Destaca diferencias importantes entre funcionalidades
Apela a instintos humanos primitivos: estamos programados para notar diferencias.

La mayoría de las personas no ven únicamente dos circulos, sino un circulo negro y uno rojo.

Diferenciación es una respuesta humana común y genérica

El contraste comunica de forma rápida fronteras en el diseño.

1. Claro y oscuro

Acentúa la impresión de profundidad
Puede guiar la atención del usuario hacia objetos claros contrastados con oscuros

2. Confrontar colores

Captura y guia el ojo del usuario
Afecta el estado de animo
Brinda un estilo propio y distintivo
Puede ser dividido en dos grupos "conflictivos"

Colores cálidos

Rojos, naranjas, amarillos
Tienden a ser energizantes, vigorizantes y/o agresivos

Colores frios

Verdes, azules, purpuras
Relajación, calma , pasividad, sometimiento

Los colores cálidos tienden a dominar a los colores fríos

Primer plano y fondo

El contraste es crítico para determinan la relación entre figura y fondo y señalar la dominancia visual
Primera impresión impresión de un diseño
Provee el contexto del diseño
Deben contrastar, sino el usuario no podrá separarlos

Punto de enfoque

Estos elementos están diseñados para resaltar de los demás que conforman el entorno
El elementos más notables se considera dominante
Los elementos restantes que tambien sobresalen (en menor medida) son considerados puntos de enfoque.
Si todo trata de capturar la atención del usuarion, entonces, nada lo hará.

Similaridad

Objetos de apariencia similar comunican similaridad entre sus funciones
Explorar diferentes niveles de similaridad y cómo crean relaciones entre objetos
3 similaridades principales: color forma y tamaño.

Jerarquía de similaridades de la más potente a la menos potente: color, forma y tamaño.
Psicología evolutiva: al escanear los alrededores tamaño y forma son difíciles de determinar debido a complejidades visuales, pero el color salta inmediatamente a la vista.

Aplicada a UI

10 segundos: decisión de quedarse o no en el sitio
Transmitir una organización inmediata de la interfaz.

1.Enlaces

Necesitan contrastar con otros textos pero deben ser similares entre sí

https://www.reddit.com/

2.Contenido

Mostrar relaciones entre contenidos, reforzar jerarquías y señalar la estructura.
La consistencia de la presentación visual sugiere consistencia de categoría y contexto