Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Gestalt en el diseno de interfaces Principios de percepcin: Relacin fondo y figura Semejanza Proximidad, conectividad y continuidad Destino comn Cierre
Qu es Gestalt?
La psicologa de la Gestalt es una corriente de la psicologa moderna, surgida en Alemania a principios del siglo XX. Las leyes de la Gestalt se apoyan en el principio de que el todo es mayor que la suma de sus partes. La mente configura, a travs de ciertas leyes, los elementos que llegan a travs de los canales sensoriales (percepcin), o de la memoria. Principios de percepcin: Relacin fondo y figura Semejanza Proximidad, conectividad y continuidad Destino comn Cierre
El cerebro no puede interpretar un objeto como figura o fondo al mismo tiempo. Es la de mayor fuerza y trascendencia de las expuestas. Lo principal en contraposicin con lo secundario.
Ejemplo: botones El botn de la derecha invita a ser "clickeado". Las luces y sombras generan la sensacin de figura (texto) y fondo.
Un ejemplo que rompe las reglas. El fondo comienza a ser parte de la figura.
UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2
Semejanza
Nuestra mente agrupa los elementos similares en contraste con los diferentes. Cul es la relacin entre estos elementos?
Semejanza
Nuestra mente agrupa los elementos similares en contraste con los diferentes. Cul es la relacin entre estos elementos?
Semejanza
Ejemplo: Links Todos los links son del mismo color sin importar familia y cuerpo tipogrfico.
Tambin pueden tener diferente color, hay 4 colores diferentes segn la zona y funcin que ocupan.
UNSL | Introduccion al Diseno Grafico| unsldg@gmail.com | http://cor.to/unsldg 2
Semejanza
Los recuadros de borde gris indican que son los artculos.
Todos los elementos son consistentes en su comportamiento cuando el cursor pasa sobre ellos.
Semejanza
Organizacin y estructura Nuestra mente agrupa los elementos similares en una entidad.
La similitud nos ayuda a relacionar un elemento con otro. En este ejemplo no hay divisin estructural, todos los elementos de la grilla estn relacionados de igual manera.
Semejanza
Columnas
Organizacin y estructura Nuestra mente agrupa los elementos similares en una entidad.
Lneas horizontales
Zonas
Proximidad
Relacionamos los elementos que estn prximos entre s y percibimos como ajenos a los ms alejados.
Un grupo
Dos grupos
Proximidad
Un grupo
Dos grupos
Proximidad
http://www.rodrigogalindez.com/themes/modernist/
Conectividad
Aunque mantengamos la consistencia de espaciado y color entre elementos, una simple variacin conecta ciertos elementos y los separa del resto.
Conectividad
Aunque mantengamos la consistencia de espaciado y color entre elementos, una simple variacin conecta ciertos elementos y los separa del resto.
Continuidad
Relacionamos aquellos elementos que estn ordenados por una lnea recta o curva. Entendemos mejor la informacin cuando est ordenada.
Continuidad
Relacionamos aquellos elementos que estn ordenados por una lnea recta o curva. Entendemos mejor la informacin cuando est ordenada.
Ejemplos de elementos de interfaz de usuario:
Continuidad
Relacionamos aquellos elementos que estn ordenados por una lnea recta o curva. Entendemos mejor la informacin cuando est ordenada.
Los elementos organizados en la curva se relacionan entre s y no tienen una directa relacin con los que no estn posicionados en la curva.
Continuidad
Relacionamos aquellos elementos que estn ordenados por una lnea recta o curva. Entendemos mejor la informacin cuando est ordenada.
Destino comn
Ver demostracin
Cierre
A simple vista, tendemos a reconocer un patrn reconocible. Nuestra mente agrega elementos faltantes para completar una figura.
Cierre
A simple vista, tendemos a reconocer un patrn reconocible. Nuestra mente agrega elementos faltantes para completar una figura.
Cierre
A simple vista, tendemos a reconocer un patrn reconocible. Nuestra mente agrega elementos faltantes para completar una figura.
Referencias
http://es.wikipedia.org/wiki/Psicolog%C3%ADa_de_la_Gestalt http://www.andyrutledge.com/gestalt-principles-1-figure-ground-relationship.php