1.
Diseño GUI
Electivo Diseño de Interfaces Gráficas de Usuario
ESCUELA DE DISEÑO Y MULTIMEDIA

2.
EJERCICIO FINAL
Desarrollar propuestas de Interfaz Gráfica de Usuario para una aplicación móvil, sitio web o
videojuego.
- Definir brevemente las características producto digital a diseñar y los conceptos
comunicacionales, emocionales y estilos visuales a trabajar.
- Definir pequeño UI Kit o Guía de Estilo de Diseño de Interfaz de Usuario
- Generar propuestas de pantallas con distintas secciones del producto digital.
- Definiciones y propuestas en un documento PDF
- Trabajo individual
ENTREGA 24.06.2016

3.
Modelos Y PARADIGMAS

4.
VISUALIZACIÓN de la INFO definición
“Lo visual contiene un potencial cognoscitivo útil para una
comunicación eficiente.
La información puede ser visualizada por medio de
selección, ordenamiento, jerarquización, conexiones y
distinciones para permitir el accionar eficaz.”
Gui Bonsiepe

5.
VISUALIZACIÓN de la INFO
Algunos principios del lenguaje visual aplicadas al diseño de interfaces
gráficas:
Organizar: proveer al usuario de una estructura conceptual clara y
consistente.
Economizar: hacer lo máximo con la menor cantidad de elementos.
Comunicar: ajustar la presentación a las capacidades cognitivas y
perceptuales del usuario.

6.
DISEÑO de la INFO
El diseñador de la información
realiza una labor coautoral en la
estructuración de contenidos...
es más que un simple traductor
al lenguaje visual.
DISEÑOCONTENIDOS
PROGRAMACIÓN

7.
MODELO MENTAL del usuario
El Modelo Mental es un concepto proveniente
de la psicología, como un mecanismo del
pensamiento mediante el cual un ser humano
intenta explicar cómo funciona el mundo real.

8.
MODELO MENTAL del usuario
En el contexto del diseño de interfaces, es la representación mental que
construye una persona para comprender el funcionamiento de un sistema.
modelo de sistema modelo mental
modelo de interfaz

9.
MODELO MENTAL del usuario
Una correcta interpretación del modelo mental, ayuda a los usuarios a
formar una acertada y útil comprensión del sistema.

10.
MODELO MENTAL del usuario
10% PRESENTACIÓN
30% INTERACCIÓN
60% MODELO MENTAL DEL USUARIO
- propiedades
- comportamientos
- metáforas
- requerimiento de usuarios
- formas de interactuar
- gestos
- estética
- look & feel

11.
MODELO MENTAL del usuario
Manipulación Directa
Una manipulación directa de la interfaz presenta al usuario un espacio
donde puede visualizar su información, la cual es modificada a través de
una acción directa.
Los usuarios obtienen una retroalimentación de sus múltiples interacciones
con el sistema, sean buenas o no, es capaz de reconocerlas y corregirlas
casi instantáneamente. Cuando el usuario siente que posee el control, se
siente menos intimidado por el sistema.

12.
PARADIGMAS interfaz de usuario
Alan Cooper
- Paradigma Tecnológico: entender cómo trabajan las cosas.
- Paradigma Metafórico: intuir cómo trabajan las cosas.
- Paradigma Idiomático: aprender cómo se llevan a cabo las cosas.

13.
PARADIGMA TECNOLÓGICO interfaces
- La interfaz expresa los elementos de la
tecnología en que se ha construido, muestra
el esquema interno del software
- El usuario ha de entender cómo funciona para
poder interactuar con él
- Es el usuario el que se adapta al software.

14.
PARADIGMA METAFÓRICO interfaces
La interfaz se expresa a
través de una metáfora
que oculta el
funcionamiento interno
del programa y que se
refiere a términos más o
menos familiares para el
usuario.

15.
PARADIGMA IDEOMÁTICO interfaces
- Está basado en la forma en que aprendemos
nuevos lenguajes, entendiendo los elementos
de la interfaz idiomáticamente, más que
intuirla metafóricamente.
- La interfaz construye su propia gramática y se
depende de la habilidad para aprenderla.
- No se fuerza a entender el cómo y el por qué.

16.
AffordanceCOMPRENSIÓN INTUITIVA

17.
PERCEPCIÓN VISUAL definición
“La percepción visual es la interpretación o discriminación de los estímulos
externos visuales relacionados con el conocimiento previo y el estado
emocional del individuo.”
El estímulo pertenece al mundo exterior y la percepción pertenece al
mundo individual interior, al proceso de interpretación del ser humano y al
conocimiento de las cosas.

18.
PERCEPCIÓN VISUAL teorías
Percepción Indirecta:
La percepción está mediada, por inferencias, conocimiento o mecanismos de
procesamiento de información, construyendo una descripción simbólica de
la escena y a partir de ahí describe las cosas que están presentes en el
mundo y dónde están situada.
Los procesos intermedios son necesarios porque el estímulo de la
percepción subdetermina la respuesta.
exponente: Gestalt, cognitivismo

19.
PERCEPCIÓN VISUAL teorías
Percepción Directa:
La mente del sujeto no construye individualmente la percepción, sino que
hay una captación directa de la información que suministra el medio
ambiente y que es suficiente para explicar la percepción y guiar su conducta.
El enfoque ecológico, por lo tanto, afirma que en el ambiente hay
información suficiente disponible, y que los organismos que perciben son
capaces de detectarla para guiar su conducta.
exponente: James J. Gibson y su enfoque ecológico

20.
AFFORDANCE definición
La affordance es es la cualidad de un objeto o ambiente que permite a un
individuo saber las acciones que puede realizar al interactuar con ellos.
El término surge del verbo afford que significa en inglés “sugerir” o “permitir”
y puede ser traducido como “comprensión intuitiva”, “permisividad”,
“habilitación” o “invitaciones al uso”.

21.
AFFORDANCE definición

22.
AFFORDANCE definición

23.
AFFORDANCE definición

24.
AFFORDANCE definición

25.
AFFORDANCE definición

26.
AFFORDANCE definición

27.
AFFORDANCE definición

28.
AFFORDANCE definición

29.
AFFORDANCE definición

30.
AFFORDANCE definición

31.
AFFORDANCE definición

32.
AFFORDANCE definición
Affordance falsa Affordance perceptible
Rechazo Affordance oculta
posibilidad de interacción
informaciónpercibida
NO SI
NO
SI

33.
REQUISITOS de las affordances
Forma funcional:
La correspondencia entre la forma del objeto y
su función debe ser lo más transparente
posible.
Ej: Para que un objeto presente la affordance de "ser
presionado" puede estar representado de tal forma que
dé la sensación de tener volumen sobre una superficie.

34.
REQUISITOS de las affordances
Visibilidad al usuario:
Los elementos de interacción deben ser visibles y claros respecto a su uso y
función.
Ej: Si algo parece clickable
o pinchable, debiera reaccionar
de forma consistente.

35.
REQUISITOS de las affordances
Acción coherente:
La acción que siga al accionamiento de un
objeto debe ser coherente con su affordance
para facilitar su aprendizaje y uso.
Ej: Un botón para acceder a un menú oculto que se
identifique con una flecha señalando hacia abajo,
deberá presentar el menú desde ese punto y hacia
abajo.

36.
REQUISITOS de las affordances
Familiaridad:
El reconocimiento de elementos
familiares para el usuario en otros
contextos puede ayudar a la
comprensión de los mismos.
Ej: Las metáforas visuales y el
skeuomorfismo de controles interactivos.

37.
PROBLEMAS de las affordances
Relatividad del observador
Las affordances es que no suscitan la misma
función a todo tipo de población.
Ej: Las cajoneras de un mueble puede presentar el
affordance “guardar en él” para un adulto, y
“escalarlo” para un niño.

38.
PROBLEMAS de las affordances
Relatividad del observador
Utilizar referentes con los cuales el usuario no esté familiarizado.
Ej: Los referentes originales o “reales”
como el disquete para guardar, o el
disco del teléfono, no son
comprensibles para una generación
que no los ha utilizado.

39.
AFFORDANCE definición

40.
INTERFACES diseño
Nuestras decisiones de diseño serán un aporte en tanto
incrementen la comprensión intuitiva del entorno en el que
se mueve el usuario (la interfaz), facilitando con esto la
interacción y la interpretación de la información.

41.
EJERCICIO FINAL
Desarrollar propuestas de Interfaz Gráfica de Usuario para una aplicación móvil, sitio web o
videojuego.
- Definir brevemente las características producto digital a diseñar y los conceptos
comunicacionales, emocionales y estilos visuales a trabajar.
- Definir pequeño UI Kit o Guía de Estilo de Diseño de Interfaz de Usuario
- Generar propuestas de pantallas con distintas secciones del producto digital.
- Definiciones y propuestas en un documento PDF
- Trabajo individual
ENTREGA 24.06.2016

42.
AFFORDANCE definición
Directrices Visuales Google
Google Visual Assets Guidelines - Parte 1
Google Visual Assets Guidelines - Parte 2