DIGU 01. interfaces
-
Upload
jorge-cantu-lopez -
Category
Design
-
view
140 -
download
0
Transcript of DIGU 01. interfaces
![Page 1: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/1.jpg)
Diseño GUIElectivo Diseño de Interfaces Gráficas de Usuario ESCUELA DE DISEÑO Y MULTIMEDIA
![Page 2: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/2.jpg)
Interfaces DE USUARIO
![Page 3: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/3.jpg)
INTERFAZ definiciones
(Del ing. interface)Conexión física y funcional entre dos sistemas o dispositivos de cualquier tipo dando una comunicación entre distintos niveles; se puede definir como el espacio donde sucede la interacción o el intercambio.
![Page 4: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/4.jpg)
INTERFAZ conexión
![Page 5: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/5.jpg)
INTERFAZ conexión
![Page 6: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/6.jpg)
el problema del DISEÑO
USUARIO
TAREA HERRAMIENTA
INTERFAZa
DISEÑAR
![Page 7: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/7.jpg)
INTERFAZ de USUARIO conexión
![Page 8: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/8.jpg)
INTERFAZ de USUARIO conexión
![Page 9: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/9.jpg)
INTERFAZ de USUARIO conexión
![Page 10: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/10.jpg)
INTERFAZ de USUARIO conexión
![Page 11: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/11.jpg)
INTERFAZ definiciones
“La interfaz es el sitio donde los bits y las personas se encuentran.”
Nicholas Negroponte
“La interfaz no es un objeto, sino un espacio en el que se articula la información entre el cuerpo humano, la herramienta o artefacto comunicativa y objeto de la acción.”
Gui Bonsiepe
![Page 12: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/12.jpg)
UI interfaz de usuario (user interface)
INTERFAZ de
SOFTWARE
INTERFAZ de HARDWARE
![Page 13: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/13.jpg)
UI contextos
INTERFAZ como instrumentoDesde esta perspectiva la interfaz es una "prótesis" o "extensión" de nuestro cuerpo.
![Page 14: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/14.jpg)
![Page 15: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/15.jpg)
UI contextos
INTERFAZ como superficieTransmite instrucciones o intuiciones que nos informan sobre su uso. Un objeto (real o virtual) nos habla por medio de sus formas, texturas, colores, etc.
![Page 16: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/16.jpg)
UI contextos
INTERFAZ como espacioEs el lugar de la interacción, el espacio donde se desarrollan los intercambios y sus manualidades.
![Page 17: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/17.jpg)
UI definiciones
La interfaz es la membrana de comunicación entre los usuarios y el sistema, por la que los diseñadores y desarrolladores pueden hacer que la tecnología sea inteligible y sensible a las necesidades de los usuarios.
![Page 18: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/18.jpg)
UI definiciones
Las características del diseño de interfaz pueden facilitar o impedir la interacción entre usuario y dispositivo.La interfaz orienta el interés del diseñador.La interfaz vuelve accesible el carácter instrumental de los objetos y el contenido comunicativo de la información.La interfaz transforma los objetos en productos y la simple existencia física en disponibilidad.
![Page 19: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/19.jpg)
UI definiciones
Una interfaz relaciona las capacidades de presentación e interacción del sistema con el modelo cognoscitivo y perceptual del usuario.
SISTEMAUSUARIO
capacidad de presentaciónmodelo perceptual
modelo cognoscitivocapacidad de interacción
![Page 20: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/20.jpg)
UI definiciones
Para una interacción hombre-máquina adecuada, la interfaz debe ofrecer a cada uno de los dos agentes soluciones a sus necesidades, no sólo ser una pantalla divisoria.
SISTEMAUSUARIO
INTERFAZ
SISTEMAUSUARIO
INTERFAZ
![Page 21: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/21.jpg)
UI referentes
En vez de que el usuario intente hablar con la máquina en su idioma, es la máquina quien debe reflejar el mundo humano y comunicarse de forma inteligible.
![Page 22: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/22.jpg)
UI referentes
Todo usuario requiere un tiempo de adaptación a una interfaz, pero una buena interfaz se vuelve invisible al momento de interactuar con ella. La interfaz debe hacer sentir al usuario, seguro y tranquilo, guiarlo de tal forma, que el sienta el control total de la situación.
![Page 23: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/23.jpg)
UI evolución
CLI GUI
NUI
OUI
Interfaz de Línea de Comando
Interfaz Gráfica de Usuario
Interfaz Natural de Usuario
Interfaz Orgánica de Usuario
![Page 24: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/24.jpg)
UI evolución
CLI Interfaz de Línea de Comandos
· codificada· estricta· abstracta· estática
![Page 25: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/25.jpg)
UI evolución
GUI Interfaz Gráfica de Usuario
· reconocimiento· receptivo· exploratoria· indirecta
![Page 26: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/26.jpg)
UI evolución
GUI Interfaz Gráfica de Usuario
MultiTouch
Stylus TouchWIMP
![Page 27: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/27.jpg)
UI evolución
NUI Interfaz Natural de Usuario
· intuitiva· evocativa· contextual· directa
![Page 28: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/28.jpg)
UI evolución
OUI Interfaz Orgánica de Usuario
· síntesis· fluida· anticipativa· extensiva
![Page 29: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/29.jpg)
UI evolución
![Page 30: DIGU 01. interfaces](https://reader035.fdocuments.mx/reader035/viewer/2022062503/5874e0d61a28abd05f8b7c5b/html5/thumbnails/30.jpg)
EJERCICIO 1
- Identificar 5 ejemplos de Interfaces Gráficas de Usuario con problemas de visualización, funcionalidad o interacción que estén presentes en distintos tipos de dispositivo: aplicaciones de escritorio, aplicaciones móviles, videojuegos y otros 2 dispositivos.
Trabajo individual o duplas. Generar un PPT con imágenes de cada ejemplo y descripción de las situaciones que no logran ser bien resueltas.
Enviar a [email protected] con el asunto: diseñoGUI_nombre alumno_entrega1
ENTREGA 20.05.2016