Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas
-
Upload
marcelo-santos -
Category
Education
-
view
1.685 -
download
0
description
Transcript of Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas
![Page 1: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/1.jpg)
Diseño de InteracciónDiseño de InteracciónProf. Marcelo Santos Prof. Marcelo Santos
@celoo@celoo
Diseño de InteracciónDiseño de InteracciónProf. Marcelo Santos Prof. Marcelo Santos
@celoo@celoo
Clase 2: Interfaces Digitales x Análogas
1 semestre - 2012
![Page 2: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/2.jpg)
2 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
¿Qué es Interfaz?
“ La interfaz debe permitir la inteligibilidad de la interacción hombre-máquina operando en la traducción de los inputs y outputs:
(1) convirtiendo cualquier clase de algoritmo en acciones pasibles de se realizar a través de la estructura ergonómica de input de señales del hombre hacia la máquina, como el mouse y el teclado – botones que accionan rutinas y comandos, como un simple "Ok" o "Enviar e-mail", "arrastrar y soltar" o "copiar y pegar", comandos interpretables por la máquina; y
(2) Traduciendo las bases de datos en información – output de naturaleza verbal, visual, sonora o híbrida – interpretable por el hombre.
Marcelo Santos
![Page 3: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/3.jpg)
3 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
¿Qué es Interfaz?
“…softwares que dan forma a la interacción entre usuario y computador. La interfaz actúa como una especie de traductor, mediando entre las dos partes, haciendo una sensible para la otra. En otras palabras, la relación gobernada por la interfaz es una relación semántica, caracterizada por significado y expresión, no por fuerza física.
Steven Johnson
![Page 4: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/4.jpg)
4 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
¿Qué es Interfaz?
“ Una frontera a través de la cual dos sistemas independientes se encuentran y se comunican o actúan uno sobre el otro.
Webopedia
![Page 5: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/5.jpg)
5 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Pero…¿Interfaz de qué?
• Pagina web• Software• Net-PC• Ascensor• Pistola• Control Remoto• Instrumento musical• Lavadero
• Celular• GPS• Microondas• Radio de auto• Libro/Revista/Diario• Juego• Smartphone• iPod
![Page 6: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/6.jpg)
6 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Pregunta…
¿Cuáles son las diferencias entre ¿Cuáles son las diferencias entre una interfaz análoga y una digital?una interfaz análoga y una digital?
![Page 7: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/7.jpg)
7 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
¡Caza interfaces!
• Interruptor• Microondas• Ruta Evacuación sin
salida• Baño (urinario)• DSE se cambió• Acceso a
discapacitados• Lavamano no funciona
(prob. técnico)
Nueva área fumadores
Pilar en la puerta
Escalera y bandeja
Techo bajo (ergonomía)
![Page 8: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/8.jpg)
8 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Potencial del Ambiente Digital
• Interactivo = Acción + Reacción
• Bases de Datos = Dinámica, viva
• Online = Simultaneidad
• Virtual = Reproductibilidad infinita
• Non-linear = el usuario es quien decide• Multimodal = Poli-sensorial
(visión, audición, “tacto”, sinestesia)
![Page 9: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/9.jpg)
9 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Atributos de una Interfaz
• Fácil de usar• Original• Atractiva• Rápida• Ergonómica• Inteligible• Diferente• Escandalosa
• Llamativa• Eficiente• Accesible• Sencilla• Conceptual• Misteriosa• Sutil• Elegante
![Page 10: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/10.jpg)
10 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Hipótesis
Los Multimedios son sistemas Los Multimedios son sistemas
abiertosabiertos
![Page 11: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/11.jpg)
11 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Sistemas Cerrados y Abiertos
• Los organismos están “abiertos” al medio ambiente y deben atingir una relación apropiada con este ambiente, caso quieran sobrevivir (concepto-clave: FEEDBACK)
• Sistemas Cerrados son “ideales” y no adaptativos; su fuerza es su debilidad: la estabilidad estática
![Page 12: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/12.jpg)
12 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
equilibrio Estático
![Page 13: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/13.jpg)
13 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
equilibrio Dinámico
![Page 14: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/14.jpg)
14 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
teoría de Sistemas
¿Qué es CNTP?
Condiciones Normales de Temperatura y Presión
![Page 15: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/15.jpg)
15 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Contenido en Sistemas Cerrados
Estructuración delcontenido controlada
Publicacióndel Contenido ONLINE
Produccióndel contenido
OFFLINE
SISTEMA “CERRADO”
![Page 16: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/16.jpg)
16 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Contenido en Sistemas Abiertos
Quien y cómo estructurar este Contenido????
Producción del contenido ONLINE
(Colaboración, Multi-autoral, UGC)
SISTEMA “ABIERTO”
![Page 17: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/17.jpg)
17 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Datos y WWW
“Al conectarse con una URL, HTML aparece al usuario como flujo de datos. Estos datos podrían ser formateados en cualquier de una gran variedad de configuraciones.”
Mathew Fuller
![Page 18: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/18.jpg)
18 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
http://taggalaxy.de
![Page 19: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/19.jpg)
19 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Ten by Ten – http://tenbyten.org/10x10.html
![Page 20: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/20.jpg)
20 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Y la AI con eso?
• You Tube – ¿Menú o Criterios o Filtros? – Más populares (?)– Más vistos– Más comentados– Más respuestas– Más valorados– Videos en ascenso– Superfavoritos
![Page 21: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/21.jpg)
21 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Cognitus = Arte + Ciencia + Filosofía
![Page 22: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/22.jpg)
22 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012 22
Partieron…
• Recolectar desde ahora ejemplos de interfaces buenas y malas
![Page 23: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/23.jpg)
23 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Actividad
• Sentarse en circulo
• Tema inicial
• Cada uno dice lo primero que viene en la cabeza basado en lo que dice el vecino al lado
![Page 24: Diseno Interaccion - Clase 02 Interfaces Digitales Y Analogas](https://reader033.fdocuments.co/reader033/viewer/2022061516/558e23271a28ab68048b4581/html5/thumbnails/24.jpg)
24 Prof. Marcelo Santos (@celoo)UNIACC – 2º sem 2012
Actividad
• ¿Cuáles fueron los tipos de asociaciones?– Metáfora / semejanza– Metonimia / contiguidad
• ¿Qué eso tiene que ver con interfaces?– Botones, íconos– Metáforas, Analogías, Metonimias:
• de ambientes• de procesos
– Diseño es intención– Lógica– Estructuras de Clasificación