licenciatura en diseño upc lila pagolaespaciodetrabajo.com.ar/upc/ldupcclase1.pdf · modalidad de...

laboratorio digitalLicenciatura en DiseñoUPC

Lila Pagola

http://espaciodetrabajo.com.ar/upc/ https://delicious.com/lila

Modalidad académica

Promocional: 7 o mas en todas las evaluaciones, sin recuperatorio, sin promediar75% asistencia

Regular:4 a 6 en alguna o todas las evaluaciones65% asistencia (50% con certif. de trabajo)

Libre por cursado:3 o menos en alguna evaluación o su recuperatorioNo llegar al % de asistencia

Modalidad de cursadobimodal al 50%

Clases presencialesActividades virtuales obligatorias (50% dedicación a la materia)

3 evaluaciones:●TP1 Actividades del blog (individual)●Parcial (individual)●Trabajo Final (grupal)

Horario de consulta (canal a determinar)Martes de 15 a 16hs

diseño interactivo

definiciones del área

● temporalidad (no lineal)● potencialmente multimedia● producción compleja a ser desglosada● trabajo en equipo

diferencias

● el acento puesto sobre la interactividad, no sobre la tensión narrativa ● ritmo determinado por el control que le de al usuario

Diseño de experiencia de usuario

(UX)

● La función de los profesionales de la experiencia de usuario es hacer la tecnología amigable, satisfactoria, fácil de usar y, por tanto, realmente útil.

Si el marketing tradicional se basaba en promesas, la experiencia de usuario se basa en hechos. Es precisamente la experiencia usando un producto, cómo este es capaz de resolver nuestras necesidades y objetivos de forma eficiente y fluida (…) Y. Hassan Montero.

Interfaces de usuario

Cuando los seres humanos y los ordenadores interactúan lo hacen a través de un medio o interfaz.

Una interfaz es una superficie de contacto [Laurel, 1990] que refleja las propiedades físicas de los que interactúan, las funciones a realizar y el balance de poder y control.

una interfase de usuario de un sistema consiste de aquellos aspectos del sistema con los que el usuario entra en contacto:

● físicamente, ● perceptivamente o ● conceptualmente

La disciplina que se ocupa del estudio de la relación usuario-computadora esla HCI

Human-computer interaction: HCI

La HCI es la disciplina básica para el diseño y análisis de interfaces de usuario

El desarrollo de la HCI está en sintonía con el de las UI (user interface) y podemos hablar de 2 generaciones de UI:

- las UI textuales o de comandos (simbólica)- las GUI (graphical user interface o interface gráfica de usuario) (icónica)

- las NUI (natural user interface) (gestos naturales, pantallas táctiles, movimientos)

- la siguiente generación serían las interfaces 3D (indicial)

Interfaces de comando: DOSConsola LinuxWordstar

etc.

- interacción desde el teclado, con comandos y parámetros- baja tolerancia al error- ayuda críptica- software monotarea

= alta curva de aprendizaje

Mayor rendimiento de los recursos informáticos por menor uso en la prevención del error humano, limitado por la monotarea

Mayor versatilidad y estabilidad en el sistema

Wordstar: un procesador de texto para las UI de comandos

Interfaces gráficas de usuario GUI

- interacción desde el mouse, a partir de ver y señalar- alta tolerancia al error y multiplicidad de modos de llegar al mismoresultado- ayuda contextual y por niveles- software multitarea, aplicaciones como “ventanas”- amplio uso de recursos visuales: iconos, animaciones, TTF, etc.

= baja curva de aprendizaje

Menor rendimiento de los recursos informáticos por mayor uso En retroalimentación de acciones y prevención del error humanoMenor versatilidad y estabilidad en el sistema

Interfaces gráficas de usuario GUI

Directas: los elementos de la GUI se presentan de modo literal, sin significados a deducir o que apelan al conocimiento oexperiencia previa del usuario.

- predominan los controles textuales o iconos convencionales- no suelen proponer interacción exploratoria- los géneros más frecuentes que la usan preferentemente son: informacional, educativos de alta carga cognitiva

Interfaces gráficas de usuario GUI

Metafóricas o de simulación: los elementos de la GUI se presentan integrados bajo una metáfora general que es reconocible para el usuario-meta.

- predominan los controles visuales coherentes a la metáforaen posición, escala, funcionamiento- suelen basarse en calidad de interacción exploratoria- los géneros más frecuentes que la usan son: promocional, ficcional, educativos para niños pequeños (pre-escolar), artístico-experimental

Clasificación de las interfases de simulación o metafóricas:

- objetohttp://www.erikotten.nl/7/ - espaciohttp://www.bigspaceship.com/archive/hbovoyeur/ http://lab.rtve.es/en-el-reino-del-plomo/documental.htmlhttp://www.telabr.com.br/oficinas-virtuais- actividad http://muva.elpais.com.uy/flash/muva.htm?&lang=sp&flr=S1&rom=ROOM&num=7http://archive.hi-res.net/MinorityReport/index/index.html

Metáfora del escritorio para OSMetáfora de la actividad real que reemplaza el software (animación=película; escribir=página, etc.)Metáforas especiales para un sólo uso (viaje, objeto, etc.)

Video Everything is a remix 3Minuto 3

Interfaces gráficas de usuario {GUI}

elementos:

• Manipulación directa de objetos gráficos: ● el principio del WYSIWYG • El ratón (mouse) • Las ventanas (windows)• Programas de dibujo y pintura (desde 1985)• Edición y procesamiento de texto basado en GUI, desde 1974 (Star, de Xerox; LisaWrite y Macwrite)• Hoja de cálculo: Visicalc desarrollada para el Apple II en 1978.• Hipertexto• Reconocimiento de gestos y acciones (asistentes)

Xerox Star- la primera implementación GUI

Sistemas de autoría

GUI dependen de:

- dispositivos de entrada de manipulación directa (mouse, joystick,gestos naturales)

- imágenes digitales: monitores, y software para crear, editar y reproducirimágenes

Según Alan Kay (1989), nuestros procesos de aprendizaje se ven favorecidos en UI que permitan:

Hacer (punteros) saber donde estamos, manipular, explorarCon imágenes (iconos, ventanas) reconocer, comparar, configurar, concretarCrear símbolos (programación orientada a objetos) une largas cadenas de razonamiento,abstrae

Tipos de GUI

●Interfase directa●Interfase metafórica o de simulación

● Metáfora de objeto● Metáfora de lugar● Metáfora de actividad

Ejemplos: https://delicious.com/lila/search/met%C3%A1fora

Clasificación de las interfases de simulación o metafóricas:

- objetohttp://www.tedperez.com/archive/leatherheads/site/http://www.erikotten.nl/7/ - espacio http://lab.rtve.es/en-el-reino-del-plomo/documental.htmlhttp://www.telabr.com.br/oficinas-virtuais http://www.escuelaanimadores.com.ar/ - actividad http://rice5.com/v2/index.html http://muva.elpais.com.uy/flash/muva.htm?&lang=sp&flr=S1&rom=ROOM&num=7

http://archive.hi-res.net/MinorityReport/index/index.html

Metáfora del escritorio para OSMetáfora de la actividad real que reemplaza el software (animación=película; escribir=página, etc.)Metáforas especiales para un sólo uso (viaje, objeto, etc.)

Reglas para diseñar GUI

● Dar control al usuario• Reducir la carga de memoria del usuario• Consistencia

Knowledge navigator 1987

Principios de diseño GUI

● Metáforas●Manipulación directa●Ver y señalar●Consistencia●WYSIWYG●Dar control al usuario●Feedback y diálogo●Perdón●Percepción de estabilidad●Integridad estética

Extraído de Human interface principles. Apple Inc.

Interfaces de tercera generación:

Knowledge navigator http://www.youtube.com/watch?v=8mLqJNDWx-8 Future Shock http://www.youtube.com/watch?v=QcYrPkFe2J0

http://www.ted.com/talks/lang/spa/pattie_maes_demos_the_sixth_sense.htmlVideo de investigación del MIThttp://www.youtube.com/watch?v=oezVbrDc_hI (project natal para la xbox)http://vimeo.com/user524591?pg=embed&sec=1450211 Aurora, un desarrollo de UI para browser

Croquet DemoProyecto Looking Glass de SUNMicrosoft “Glimpse ahead”Surface computinghttp://www.youtube.com/watch?v=-2Kn2HKCWqs&feature=quicklist

Entornos 3D- reconocimiento de movimiento, de voz, de dispositivos- convergencia y compatibilidad entre dispositivos

diagrama ontológico del diseño

diseño es la interface a la acción eficazGui Bonsiepe

especificidad del diseño interactivo

No lineal

concepto clave: hipertextoun conjunto de nodos ligados por enlaces

(Levy)

Calidad de interacción

● Minima (minimas opciones, cuasi-lineal)● Exploratoria (controles no convencionales)● Condicional (controles condicionales)● Contributoria (contenidos y enlaces son modificados por los usuarios)

EstructurasHipertextualesde Berenguer

Otro sistema de estructuras:Clasificación de Orihuela-Santos

1- elemento único2- presentaciones3- idem pero no secuencial4- lineas de tiempo5- puntos de vista6- referencia de gral. a particular7- menú a la vista8- wiki

Realidad aumentada no es Realidad virtual

Realidad aumentada es una capa de información que se agrega a la realidad percibida, de modo directo (gafas) o mediado (celulares) reconociendo elementos en la imagen (marcadores) que disparan laaparición de los datos contextualmente y en tiempo real (descargados de internet o ya presentes en la app)