INTERFACES MULTIMEDIA 1u

INTERFACES Y MULTIMEDIA
GERMAN ÑACATO CAIZA

Evolución histórica de las interfaces gráficas de usuario
1.1.Antecedentes
• Vannevar Bushdescribió un dispositivo
llamado "Memex", que visualizó como una
mesa con dos pantallas gráficas,
un teclado y un escáner.
• En 1962, Englebart escribe el ensayo

"Augmenting Human Intellect", en el que ve la
computadora no como un dispositivo de
sustitución del intelecto humano, sino como
su extensión.
• En 1968, Englebart consigue realizar

una demostración pública de su proyecto ante
un millar de profesionales. Su equipo se
compone de:
Una pantalla basada en gráficos vectoriales,
que puede mostrar texto (sólo mayúsculas) y
líneas sólidas.
Un teclado estándar.
1.1.Antecedentes
Alto
PARC presenta en 1973 el primer ordenador con
interfaz gráfica: el Alto, con una resolución de
pantalla de 606 × 808 píxeles. Cada píxel puede
iluminarse de manera independiente, lo que
amplía las posibilidades gráficas. No presenta
ventanas.
Incluye un ratón con tres botones, y un cursor en
pantalla con el mismo aspecto que el actual
(puntero de flecha en diagonal), y modal.
1.1.Antecedentes
Smalltalk Para proporcionar coherencia a las aplicaciones, el

PARC desarrolla en 1974 el primer GUI (interfaz gráfica de
usuario): el Smalltalk. Presenta ventanas individuales, cada una
de las cuales puede desplazarse por pantalla desde la barra de
título.
Smalltalk es la primera interfaz que incluye iconos, barras de
desplazamiento (scrolls), botones radiales y ventanas de
diálogo.
1.1.Antecedentes
Algunos de los ingenieros de Xerox desembarcan en otras

empresas, entre ellas la fundada en 1976 por Steve Jobs y Steve
Wozniak, Apple Computer, donde prosiguen las investigaciones
iniciadas con Alto y Smalltalk, que dan lugar al ordenador Lisa en
1983. Lisa incluye:
una interfaz icónica donde cada icono indica un documento o una
aplicación,
una barra de menús desplegables,
señales para indicar el elemento del menú que se encuentra
seleccionado,
atajos de teclado,
una papelera para eliminar ficheros,
un ratón de dos botones que después se simplificaría en uno solo,
la acción de doble-clic para seleccionar/ejecutar una aplicación.
1.1.Antecedentes
Puesto que Lisa resulta muy caro, Apple desarrolla

en 1984 una versión más comercial: el Macintosh,
u ordenador no multitarea con pantalla
monocroma (512 por 384 píxeles), y memoria de
128Kb.
1.1.Antecedentes
En 1983 Bill Gates anuncia el Interface Manager,

simplificado después como Windows 1.0, que
aparece en 1985. Presenta:
Interfaz en color.
Todos los estándares GUI: barras de
desplazamiento (scrollbars), elementos de control
de ventanas, menús, barra de menú general.
Ventanas en mosaico (no superpuestas).
En 1987 aparece Windows 2.0, que

ya soporta ventanas superpuestas.
1.1.Antecedentes
A finales de los ochenta aparecen

nuevas GUI basadas en Unix, sobre
una arquitectura llamada X (del MIT)
que constituye la base del
posterior Linux.
En 1990 aparece Windows 3.0, y

la versión 3.1 en 1992.
1.1.Antecedentes
En Windows95 se introduce por

primera vez el "menú de inicio" y
la barra de tareas.
En 2001 Apple presenta la

interfaz Aqua para su Mac OS X,
desarrollado en colaboración con
NeXT.
Posteriormente, Apple presenta

varias versiones de su Mac OS X.
En enero de 2007, Microsoft presenta su sistema

operativo Windows Vista.
Definición
Lewis y Rieman (1993) definen:
Las interfaces básicas de usuario son aquellas que incluyen cosas como menús, ventanas, teclado, ratón,
los beeps y algunos otros sonidos que la computadora hace, en general, todos aquellos canales por los cuales
se permite la comunicación entre el hombre y la computadora.
Evolución
1937. Desarrollo de computadoras Digitales
Nacimiento de la interfaz gráfica (1973 – 1981). Primera

computadora personal, Xerox Alto.
resolución de 606 x 808 pixeles, no era gráfico pero
utilizaban líneas
En 1974, empieza a tomar forma el primer lenguaje de programación orientado a objetos (object-
oriented) incluido en el ambiente de desarrollo SmallTalk.
Las ventanas, por ejemplo fueron concebidas con un contorno negro que las hacía resaltar del fondo
gris. También apareció el concepto de ícono, los menús de selección, los botones de radio, las cajas
de diálogo y las barras de navegación.
Ya en 1981 se crea y comercializa la computadora Xerox Star 8010, versión mejorada de del Xerox
Alto.
Adesarrollo e implementación del concepto WYSIWYG16 en la interfaz
Desarrollo y eclosión de las interfaces gráficas (1976 – 1990)

En 1976 Steve Jobs y Steve Wozniak, fundan la compañía Apple, lanzando en 1977 la
computadora Apple II, con soporte para gráficos y texto, pero con interacción a partir de líneas de
comando.
El desarrollo de una verdadera GUI se inicia con la computadora Apple LISA

1983
Bill Gates lanza la primera versión de Windows.
1985, Windows se da a conocer a color y con el uso de ventanas
MS-DOS
WINDOWS 1.0
WINDOWS 2.
WINDOWS 3.11
WINDOWS 95
QUÉ ES LA UI?
Una interfaz de
usuario, en inglés user
interface
A interfaz de usuario es
importante para una buena
experiencia de usuario, es
decir, para la experiencia Interfaz con la que las
que un usuario tiene grosso personas interaccionan con
modo con una página web o
un software UI las máquinas
La interfaz de usuario Cuenta con los elementos de

está íntimamente control de una interfaz, que son
relacionada con la visibles para el usuario o a través
facilidad de uso de de los que puede efectuar alguna
un software o de una acción5
página web
TIPOS DE UI
Cada vez se han desarrollado métodos más avanzados de interacción persona-ordenador (IPO), por lo que hoy en día
existen numerosas interfaces de usuario
1 Command Line Interfaces (CLI)

• La línea de comandos y un prompt muestra la posición actual o un mensaje, por ejemplo en el
caso de los primeros ordenadores MS-DOS.
• Se teclean unos comandos específicos, para establecer la comunicación con el ordenador. Tras el
procesamiento de la petición, el ordenador muestra el resultado en formato de texto.
• Se utiliza para cmd.exe en los sistemas operativos Windows, en los que la sintaxis está
ampliamente orientada a los antepasados de DOS. El control mediante una CLI se lleva a cabo a
través del teclado y sin necesidad de usar el ratón
• En el Bourne Shell y sus derivados como bash (utilizados ampliamente en sistemas tipo UNIX) el
prompt, generalmente, contiene el carácter $ para los usuarios sin privilegios y # para el
administrador
TIPOS DE UI
2 Text User Interface (TUI)

• Las Text User Interfaces son algo más cómodas y, en ellas, la interacción con el ordenador también
tiene lugar por medio del teclado.
• Las TUI marcan el paso de las meras interfaces de líneas de comando a interfaces gráficas de
usuario.
• La diferencia con las CLI consiste en que la interfaz utiliza la pantalla como una superficie plana y
no orientada a las líneas.
• Los programadores pueden recurrir normalmente a 256 caracteres y hoy en día, las TUI se utilizan,
por ejemplo, en gestores de arranque o en programas BIOS Setup.
TIPOS DE UI
3 Graphical User Interfaces (GUI)

• Las interfaces gráficas de usuario son, en la actualidad, el estándar más establecido.
• Este software se aplica con elementos gráficos de control e imágenes simbólicas que toman
como referencia de forma creativa a objetos del “mundo real”.
• Los usuarios suelen recurrir al ratón y al teclado como dispositivos de control, se puede utilizar
pantallas táctiles que funcionan mediante toques. A través de lo que se conoce como interfaz
gráfica de usuario
• Los iconos se introducen en el mundo digital, al igual que el escritorio, las ventanas o la papelera.
• Los usuarios con menos experiencia pueden entender las funciones de los iconos con rapidez
TIPOS DE UI
4 Voice User Interface (VUI)

• La Voice User Interface también permite la interacción con los ordenadores por medio del control
por voz.
• Apple ha creado Siri, Amazon introdujo a Alexa, Microsoft incluye a Cortana en las versiones
actuales de Windows y la búsqueda de Google también puede llevarse a cabo mediante voz
siempre y cuando se cuente con el hardware correspondiente.
• Se puede acceder a las aplicaciones por medio de llamadas o lo que se transmite a viva voz
también se escribe de manera automática, los usuarios pueden trabajar de un modo más efectivo.
• El control por voz garantiza una mayor accesibilidad.

TIPOS DE UI
5 Natural User Interface (NUI)

• La comunicación con el ordenador se establece de un modo especialmente intuitivo a través de una Natural
User Interface
• Es una evolución de la interfaz gráfica de usuario y de la Voice User Interface. En este sentido, la interfaz de
usuario interactiva reacciona tanto a los gestos como a los movimientos y al lenguaje.
• Es capaz de reconocer rostros y objetos. Los diferentes sensores, cámaras y micrófonos permiten una
comunicación versátil con el ordenador.
• Los smartphones y tablets actuales apuestan por tecnologías NUI, al igual que ocurre con las consolas Wii de
Nintendo, que utilizan el reconocimiento de gestos, rostros e idiomas de un modo lúdico.
• Microsoft en el año 2011 lanzó el proyecto: bajo el nombre de OmniTouch que se desarrolló una tecnología
que permite proyectar pantallas táctiles en cualquier tipo de interfaz. Omnitouch se basa en Kinect, el
control de movimiento de Microsoft, también entra en juego un proyector láser y una cámara especial. Esta
forma especial de Natural User Interfaces también se ha desarrollado para los dispositivos móviles, en cuyo
caso se debe colocar el hardware sobre el hombro.
TIPOS DE UI
6 Otros
• Las Tangible User Interfaces (TUI) son interfaces de usuario figurativas y personalizables, es decir, la
interacción con el ordenador se lleva a cabo a través de objetos físicos. Así, se manipulan (se tiran, se
presionan, etc.) dados, bolas y otros objetos, por lo que se activan mecanismos o se accede a información
digital. Aquí es donde entran en juego las interfaces tangibles de usuario en museos o ferias.
• Las Perceptual User Interfaces (PUI) todavía están en vía de desarrollo y se ven impulsadas por la ciencia, de
ahí que se trate de interfaces de usuario controladas por percepción, lo que se traduce en una conexión
entre las VUI, las GUI y el reconocimiento electrónico de gestos.
• Las Brain Computer Interfaces (BCI) ya no forman parte de la ciencia ficción, y es que con ayuda de
electrodos se pueden medir las ondas cerebrales y hacer que los algoritmos las traduzcan en comandos de
control. A este respecto, la investigación ya ha celebrado los primeros logros y, por ejemplo, ha permitido
que una paciente parapléjica estadounidense pueda controlar un brazo robótico con sus pensamientos, de
modo que las BCI también han contribuido al manejo accesible de ordenadores y de otras máquinas.
ÁMBITOS DE PRODUCCIÓN DE APLICACIONES INTERACTIVAS
ETAPAS DEL PROCESO DE INTERACCIÓN
3. Percepción de 4. Evaluación de
1. Intención 2. Acción
los resultados los Resultados
Convierte esta intención en La acción produce una El usuario evalúa si

De alcanzar serie de cambios en el estos cambios son
una acción, por ejemplo, al pulsa
un objetivo sistema computacional, favorables para la
una tecla o hace clic sobre una
opción de la interfaz. que el usuario percibe consecución del
e interpreta. objetivo propuesto.
INTERFAZ
La interfaz de usuario se define como "la apariencia y el comportamiento de un sistema de información", o como "la
parte del sistema del computador con la que el usuario está en contacto directo"
La interfaz es el recurso mediante el cual se lleva a cabo la interacción, e incluye todos los dispositivos que ponen en
contacto al hombre con la máquina
Dispositivos de Entrada Dispositivos de Manipulación
Aquellos que permiten al Elementos que existen en un programa determinado, utilizado

usuario introducir datos para alterar el estado de la información y navegar por la
en el ordenador (ratón, aplicación: botones, cursores, menús, etc... También se
teclado...) refieren a ellos como interfaces software o GUI (graphical user
interfaces)..
ESTILOS DE INTERACCIÓN
1. Estilos lingüísticos. En la introducción de datos se realiza mediante el teclado alfanumérico. Se basan en el

lenguaje natural, aunque utilizan unas reglas sintácticas y semánticas muy estrictas. Existen dos tipos de estilos
lingüísticos:
• Lenguaje de comandos. permite múltiples combinaciones de comandos y teclas

• Lenguaje natural
2) Estilos contextuales. Son aquellos que actúan en referencia a la situación o contexto del usuario dentro del
sistema. Dentro de los estilos contextuales se tiene:
• Ventanas de diálogo
• Menús
• Formularios
… 2) Estilos contextuales.
• Ventanas de diálogo
1) Modales.
• Suspenden
2) No modales.
temporalmente todas las 3) Ventanas de alerta.
• Dotan a la interacción de
acciones y obligan al • Informan problemas error:
flexibilidad
usuario a responder a la • del sistema
• El usuario tiene las
cuestión expuesta en la • del usuario
opciones de la ventana a
ventana. • Ventanas de diálogo son una opción en caso de
su disposición sin que el
resto de las tareas diseño de sistemas para usuarios con diferentes
• Desaparecen cuando el grados de experiencia
queden desactivadas.
usuario ha elegido una de • Autoexplicativas
las opciones que • No necesitan del aprendizaje
presentan. • Poco uso de la memoria del usuario
• Menús
1) Comandos
• Activan acciones 2) Atributos 3) Estados
específicas • Permiten aplicar opciones relativas a las • Permiten activar o desactivar opciones
• abrir, cortar características del elemento seleccionado por relativas a la configuración del sistema
• Copiar el usuario • Ver rejilla
• Mover • Tipo de letra • Mostrar reglas
• Pegar • Color de relleno • Cuadrícula
• Menús: TIPOS
2) Contextuales 3) Ventanas de selección

1) Desplegables
• Jerárquicos o en • Aparecen haciendo clic sobre Contienen opciones seleccionables
cascada un elemento de pantalla mediante los siguientes elementos:
• Cajas(check box)
• b) Botones radiales
• FORMULARIOS
• Permiten solicitar al usuario la introducción de datos

• Útiles en caso de que la longitud de caracteres de los datos que hay que introducir sea limitada.
Los elementos de un formulario pueden ser de dos tipos:
1. Cajas de texto. Campos en los que el formulario puede introducir texto

2. Opciones de selección. Pueden ser de varios tipos:
a. Cajas. Contienen opciones que se pueden activar o desactivar, y son independientes unas de otras.
b. Botones radiales. Contienen opciones autoexcluyentes.
c. Menú desplegable. Contiene opciones autoexcluyentes. Se utiliza cuando existen muchas opciones.
3) Manipulación directa. Permiten al usuario ejecutar tareas y procesos complejos sin necesidad de invertir
demasiado tiempo en el proceso de aprendizaje.
• Se utiliza recursos de reconocimiento visual

• Permiten al usuario ocasional recordar fácilmente cómo debe actuar dentro del sistema.
• La reversibilidad de las opciones incide en una baja frecuencia de error.
• Dentro de los estilos de manipulación directa, tienen especial protagonismo los gráficos o GUI (graphical
direct manipulation).
INTERFACES MULTITÁCTILES
 Introducción: clasificación de gestos
 Dispositivos de Entrada táctil
 Tecnologías de construcción
 Entrada multitáctil
 Entrada no perceptiva. Consiste en la
utilización de dispositivos u objetos para
la entrada de gestos que requieren
contacto físico para transmitir
información sobre la situación espacial o
temporal al ordenador.
 Entrada perceptiva. Permite el
reconocimiento de gestos sin ningún
objeto ni contacto físico con dispositivos
intermedios.
 Entrada no perceptiva:
◦ Ratón y lápiz óptico
◦ Paneles y pantallas táctiles
◦ Sensores electrónicos
◦ Audio
 Entrada perceptiva:
◦ Visión por ordenador
◦ Sensores remotos
◦ Audio
 “Point and Click”
 Mecanismo simple y rápido para la
interacción
 El SketchPad de Sutherland (1963)
◦ Primer programa que permitía la
manipulación directa de objetos gráficos
 Panel táctil (touchpad o trackpad)
[George E. Gerpheide, 1988]. Extendido
comercialmente con la serie 500 de los
powerbook de Apple.
 Pantalla táctil (touchscreen [E.A.
Johnson, 1965]). Superpuesta a un
dispositivo de visualización
 De táctil a multitáctil
 Acoplados al cuerpo. Proporcionan la
posición y la orientación espacial a
través de sensores electromagnéticos
(Polhemus)
 Guantes (DataGlove). Proporcionan el
movimiento individual de los dedos y la
posición y orientación de la muñeca.
Suelen incluir mecanismos vibratorios
para el feedback táctil.
 DataGlove
Utiliza un sensor de posición
Tiene sensores para detectar la
flexión de los dedos
(5°de resolución)
 3D Mouse
 Objetos con sensores e interfaces
tangibles. Los objetos són manipulables
por los usuarios y tienen algún tipo de
sensor que permiten convertir su
manipulación en gestos o acciones.
 Dispositivos de infrarrojos. Los rayos
infrarrojos son detectados por
dispostivos de tracking y sus
movimientos convertidos en gestos. Se
necesitan emisores y receptores.
 Audio. Consiste en detectar la posición a
partir del origen del sonido que se
detecta del usuario.
◦ Audio
 La interacción se basa en la obtención
de imágenes del usuario (fijas o
continuas) a partir de una o varias
cámaras y su posterior análisis y
reconocimiento de los gestos.
 Utilizados para la detección de
presencia, movimiento y presión.
 Pueden situarse en las pantallas para
captar el movimiento de los dedos
Técnicas de Reconocimiento
Tecnologías de Entrada
 Mecanismos "tradicionales" para la entrada de
datos (teclado, mouse, lápiz óptico, tabletas
digitalizadoras, trackball, joystick, ...)
 Elograph, AccuTouch
 Paneles táctiles (Glidepoint/touchpad/trackpad)
 Pantallas táctiles (touchscreen)
 Basados en visión
 Controladores de movimiento
 Hoy en día, la entrada gestual se utiliza
fundamentalmente en dispositivos
multitáctiles (móviles, tablets, …) o
basados en controladores y sensores
de movimiento (wii remote, playstation
move, Microsoft Kinect, …)
 Multitáctil (multitouch) es un conjunto de
técnicas de interacción que permiten a uno o
más usuarios controlar aplicaciones gráficas
con varios dedos/manos simultáneamente
 Los dispositivos multitáctiles permiten que la
interacción con el usuario sea natural,
intuitiva y contextual, ya que nos permiten
interactuar como lo hacemos diariamente:
con gestos
 Se necesita
◦ Un hardware adecuado que permita la detección
simultanea de diferentes puntos de contacto
◦ Un software adecuado para detectar y reconocer
los gestos
 Actualmente hay diferentes tecnologías que permiten
la construcción de un sistema multitáctil estable, entre
ellas:
◦ Dispositivos capacitivos
◦ Dispositivos resistivos
◦ Dispositivos de ondas acústicas
◦ Dispositivos basados en laser
◦ Dispositivos basados en técnicas ópticas y visión por
computador
 Tablets y dispositivos móviles:
 La reciente aparición de los tablets y los
smartphones con pantalla multitáctil ha difundido
enormemente la utilización de estas tecnologías
 Surface: Proyecto Milán (2007)
Sin cables, ni teclado, ni mouse, ni trackball…
únicamente la pantalla multitáctil como
herramienta de interacción y bluetooth, Wifi i
RFID para sincronizarse.
Surface(30”): de surfacecomputing, salió a la venta
por 13000 € (52 puntos de contacto)
 Surface 2 (SUR40): implementada por Samsung
2011 , de 40” a un precio de unos 8000 USD (>50
puntos de contacto)
 CCV.nuigroup.com plataforma open source
 Durables y resistentes
 Respuesta rápida
 Claridad óptica
(brillantes)
 Funcionan con los dedos
 De bajo coste
 Se activan con
cualquier objeto
por presión
 Menos claras
(75%)
 Durables
 Claridad óptica
máxima
 Activadas con
los dedos,
guantes u
objetos suaves
 Alto coste
DISEÑO DE APLICACIONES Y PERFILES DE USUARIO
Diseño de interfaces orientadas a niños (hasta 15)
• Los niños utilizan aplicaciones interactivas.

• El crecimiento es especialmente en el entorno:
• Internet, en el que existen muchos sitios web que
ofrecen contenidos educativos o de entretenimiento
orientados al público infantil.
• Dispositivos Móviles
• El diseño de aplicaciones orientadas a usuarios infantiles
debe tener en cuenta unos requisitos especiales, de acuerdo
con las características de su público:
• Debe ser especialmente inclusivo, necesidades de
aprendizaje de todos los niños,
Diseño de interfaces orientadas a niños (hasta 15)
CARACTERISTICAS
Fiabilidad Estables y funcionan correctamente
Facilidad De Aprendizaje
Secuencia progresiva de tareas, evitando

Progresividad
agotamientos prematuros.
Facilitan la adquisición de distintas
Aplicabilidad educativa competencias curriculares en
edades planteadas.
Inducen interés y motivación en
Motivación
el alumnado participante.
Secuencia progresiva de tareas, evitando
Progresividad
agotamientos prematuros.
Diferencias entre usuarios infantiles y adultos

Según Nielsen (2002a), las principales diferencias entre usuarios infantiles y adultos son las
siguientes:
• Los niños aprecian positivamente los efectos de sonido y animaciones: buena impresión
inicial y motivan para continuar interactuando.
• Gustos en diseños ricos en colores, la navegación y el texto sean sencillos.
• Los niños intentan encontrar en la pantalla elementos que les puedan sorprender.
Recorren el mouse hasta encontrar efectos de sonido y animaciones.
• Los niños tienden a clicar en los banners (anuncios publicitarios) de la página, ya que no
suelen percibirlos como elementos distintos al contenido. La tendencia a clicar aumenta
cuando visualizan elementos que contengan personajes populares, o que tengan aspecto de
juego. Generalmente, esto no ocurre en el caso de adultos.
• Resulta positivo el uso de metáforas que permitan recurrir a conocimientos preexistentes,
ya familiares, y reduzcan la carga de lectura. En especial, aprecian las metáforas geográficas
(habitaciones, pueblos, mapas), cuando se utilizan para navegar por los contenidos de la
aplicación.
• En el uso de metáforas, deben evitarse términos exclusivos del mundo de los adultos
("gestión de ficheros", etc.), que no son adecuadamente comprendidos por los niños.
Diferencias entre usuarios infantiles y adultos

Según Nielsen (2002a), las principales diferencias entre usuarios infantiles y adultos son las
siguientes:
• Conseguir la implicación emocional del usuario, mediante recursos como la diversión, que
lo motiven a interactuar y alcanzar sus objetivos.
• Los niños no suelen utilizar el scroll, ni interactúan con elementos que se encuentran
debajo del área visible del navegador.
• Los adultos utilizan las aplicaciones para fines laborales o para tareas orientadas a objetivos,
mientras que el público infantil las utiliza con el objetivo de entretenerse o, a edades
superiores, para realizar tareas escolares o mantener contacto con su comunidad.
• Los niños aprecian especialmente los recursos que resultan divertidos y creativos al mismo
tiempo (por ejemplo, dibujos para colorear que puedan imprimirse, o herramientas para
generar música o ilustraciones).
• A los niños les atraen especialmente las animaciones, que acentúan su sensación de
diversión. No obstante, demasiadas animaciones pueden llegar a desorientarles o impedirles
encontrar la información relevante.
Según Nielsen (2002a) y Bernard (2003), los principales conceptos que deben tenerse en cuenta
para optimizar la usabilidad de las aplicaciones destinadas a un público infantil, son los
siguientes:
Navegación debe ser

orientada a objetivos
sencilla y directa
Descargas Tiene que ser rápidas por ejemplo en imágenes
En la descarga, evitar la necesidad de plugins o

Optimizar archivos
aplicaciones especiales.
USABILIDAD
Contenidos Novedosos, divertidos y actualizados
Dónde están situados Localización adecuada, evitar abandono
Tradicionales, evitar diferentes a cliclar y

Elementos de interacción
arrastrar
Según Nielsen (2002a) y Bernard (2003), los principales conceptos que deben tenerse en cuenta
para optimizar la usabilidad de las aplicaciones destinadas a un público infantil, son los
siguientes:
Nomeclatura Clara, evitar el uso de palabras complejas o infrecuentes.
Niños menores de 5 Tienen capacidad de mantener la atención entre 8 a 15

años minutos; los elementos de interacción e instrucciones deben
ser sencillos y breves.
USABILIDAD
No piensan en términos abstractos, de manera que les

Niños menores de 8 resulta más fácil reconocer imágenes u objetos reales
años que símbolos. Es importante ser muy concreto en las
instrucciones.
El diseño de los contenidos para una aplicación infantil debe ser especialmente escrupuloso (minocioso). En este sentido,
Nielsen (2002a) destaca las siguientes pautas:
evitarse los textos extensos El público infantil está empezando a leer

diferencian entre el material que es adecuado para ellos y
Niños son muy conscientes el material que corresponde a otras edades (niños más
de su edad jóvenes, o niños mayores), aunque sean edades próximas.
No debe ser complejo, pero tampoco un tono más infantil

Lenguaje de lo que le corresponde a la edad objetivo de la
DISEÑO aplicación, ya que los niños son muy sensibles.
Divertido, con profusión de colores y efectos

Contenidos
multimedia.
Menú inicial Sencillo, los elementos de navegación que

conduzcan al contenido de forma simple
Navegación A los niños les gusta explorar y jugar

DISEÑO VISUAL. Para diseñar el aspecto gráfico de la aplicación orientada al público infantil, deben tenerse en cuenta los
siguientes conceptos:
Deben representar elementos familiares para los

OPCIONES niños, que les orienten de manera sencilla y clara
sobre su función.
• tamaño mayor que en el caso del diseño para

adultos, ya que la coordinación motora de los
BOTONES niños es menor.
• Mostrar un retorno visual cuando el usuario
DISEÑO desplaza el cursor por encima de ellos (rollover)
VISUAL
Atractivas para el público infantil, sin olvidar la

FUENTES TIPOGRÁFICAS
importancia de la legibilidad.
LEER Los niños prefieren leer líneas estrechas.

Diseño de interfaces orientadas a público adolescente (15-18 años)

Hay que tener en cuenta que el diseño de las aplicaciones debe ser sencillo pero no infantil, y debe ser rico en
elementos interactivos.
Según Nielsen (2005), en general los adolescentes utilizan Internet para:
• Tareas escolares
• Aficiones personales
• Entretenimiento (incluyendo música y juegos)
Utilizan • Noticias
Internet • Buscar información sobre cuestiones de salud
que no se atreven a comentar con padres o
amigos.
• Buscar información sobre productos y preparar
listas para regalos.
Diseño de interfaces orientadas a usuarios sénior (mayores de 65 años)
Según Nielsen (2002b), los usuarios sénior prefieren utilizar la web para:
• Enviar correo electrónico,

• Buscar información,
• Leer noticias,
• Controlar inversiones,
Utilizan WEB • Informarse sobre medicamentos y cuestiones de salud,
• Informarse sobre aficiones y actividades de tiempo libre, y
en menor medida,
• Comprar o realizar gestiones bancarias.
Diseño de experiencias
" El diseño de experiencias es un paradigma

emergente, una invocación a la inclusión: realiza un
Diseño de llamamiento a la práctica integradora del diseño,
experiencias según Bob que puede beneficiar a todos los diseñadores,
Jacobson: incluyendo a los que trabajan en los nuevos medios
interactivos".
" La experiencia es el medio por el cual cada

individuo conecta emocionalmente con el mundo.
Krishnan & Rajamanickam
Experimentar algo implica un complejo rango de
(2004)
procesos psicológicos –sensación, percepción,
cognición, afecto, conación (elaboración consciente
de los actos)–, así como psicosociales –
expectativas, actitudes, necesidades, deseos, etc.".
• SENSACIÓN. resultado de la activación de los

receptores sensoriales del organismo
• PERCEPCIÓN. proceso psicológico de integración en
unidades significativas de determinados conjuntos de
informaciones sensoriales.
• COGNICIÓN Facultad de un ser vivo para procesar
PROCESOS
información a partir de la percepción, el conocimiento
PSICOLÓGICOS
EXPERIENCIA adquirido
• AFECTO. sentimiento en el que una persona siente
simpatía
• CONACIÓN. Actividad mental que, con las de la
cognición y el afecto, nos impulsa a realizar un acto
intencional, basados en nuestros conocimientos
previos.
ESPECTATIVA. Sentimiento de esperanza, ilusión, que experimenta

un individuo ante la posibilidad de poder lograr un objetivo.
ACTITUD. Procedimiento que conduce a un comportamiento en
particular. Es la realización de una intención o propósito.
PROCESOS
NECESIDAD. Obligación
EXPERIENCIA PSICOSOCIALES
DESEO. Acción y el efecto de desea, conseguir un objetivo
• El objetivo del diseño de experiencias

consiste en definir experiencias
precisas, que produzcan
determinadas percepciones,
conocimientos y sensaciones entre
los usuarios.
• Implica el intercambio de
DISEÑO DE conocimientos entre:
EXPERIENCIA • diseñadores de diferentes tipos
(gráficos, industriales,
arquitectos, acústicos, etc.),
• profesionales de otras
disciplinas (sociólogos,
antropólogos, historiadores,
guionistas, etc.), para conseguir
los mejores resultados.
• Cuando se utiliza los sentidos.

SENTIDOS • Percepción mediante los sentidos: visión,
DIRECTAS oído, tacto, gusto, olfato,
ESTÍMULO • sentidos hápticos: la acústica (el oído) y la
óptica (la vista)
• Más complejas que las directas

TIPOS DE
• Incluyen la percepción de cosas invisibles o
EXPERIENCIAS
experiencias sociales
EXPERIENCIAS • Sensaciones que no pueden asociarse
INDIRECTAS claramente a un estímulo, pero que
COMPLEJAS producen una respuesta común en las
personas
• Ejemplos:
• la radioactividad de un objeto,
• el mirar "a través" de los objetos en
los mundos virtuales, etc.
El objetivo del diseño de experiencias consiste en identificar los parámetros relevantes para
generar una situación, reunirlos y articularlos en una interfaz multisensorial
El usuario debe
participar para usuario en una
adquirir nuevos experiencia
conocimientos o real o virtual
habilidades.
Es una experiencia pasiva

Es una e inmersiva: el usuario se
experiencia sumerge en la
pasiva y experiencia sin causar
absorbente cambios en ella.
DISEÑO ADAPTIVO
Define una interfaz que modifica sus características, dependiendo de la manera en la que el
usuario la utiliza para mejorar la calidad de la interacción. Incluye, entre otros, a los
sistemas que detectan las tareas más frecuentemente utilizadas para hacerlas más
accesibles.
El diseño adaptativo:
• Métodos de recolección y
procesamiento de datos acerca de
las acciones del usuario, a partir
de las cuales se generan
respuestas adaptadas, o sistemas
de ayuda a medida.
• El objetivo es conseguir
personalizar la interfaz para que
responda de la manera más
aproximada posible a las
características de cada usuario.
DISEÑO ADAPTIVO
Uno de los mecanismos de diseño

adaptativo actualmente más extendidos
son los menús divididos (split menus), en
los que las opciones que el usuario utiliza
con mayor frecuencia aparecen en los
primeros lugares del menú.
Un ejemplo:
• El menú Inicio de Windows
• Menús desplegables de Office, en los
que aparecen en primer lugar las
opciones más utilizadas.
DISEÑO ADAPTIVO
Características:
• No está sobrediseñado.
• Presenta un diseño poco definido, preparado para ser adaptados.
• Tiene una arquitectura abierta.
• Presenta un comportamiento reactivo.
• Utiliza patrones básicos de interacción, que se complementan con herramientas a medida.
• Es modular. Permite recombinaciones de elementos modulares, preferentemente en código abierto para ser
adaptados.
• Presta mayor atención a la infraestructura que a los detalles superficiales.
• Implica que la documentación y ayuda sobre el sistema deben estar al alcance de todos los usuarios, y motiva
al intercambio de adaptaciones.
NARRATIVA Y DISEÑO DE INTERFACES

El uso de la narrativa permite optimizar los procesos de aprendizaje, resolución de problemas y realización de
tareas. Además, puede conducir a una experiencia más satisfactoria y, por lo tanto, más duradera.
Interactividad y narrativa
• El hipertexto es un objeto textual que parece mayor de lo que es,

precisamente porque el usuario puede reconstruir o generar sus propias
historias a partir de la información que encuentra segmentada en los
enlaces.
• Una matriz que contiene un número infinito de narrativas; el mecanismo que

permite reconstruir la narrativa es su naturaleza interactiva.
Formas de interactividad, basadas en dos

pares:
1. Interno (el usuario se proyecta a sí mismo
como miembro del mundo virtual)
y externo (el usuario se sitúa a sí mismo
fuera del mundo virtual: actúa como lector,
o como mano que gobierna externamente
el devenir del entorno).
2. Explorativo (el usuario tiene libertad para
moverse por la aplicación, pero no altera el
destino del mundo virtual)
y ontológico (las decisiones del usuario
derivan el desarrollo del mundo virtual
hacia varios caminos alternativos).
Las cuatro formas de interactividad surgen de estos pares son las siguientes:
Externo Interno
Explorativo • El texto de la aplicación no trata al • El usuario se sumerge en el mundo virtual, pero sus
usuario como miembro del mundo acciones no modifican el hilo narrativo.
virtual. • Su personaje es similar al de un viajero, historiador o
• El usuario interpreta el contenido de la detective que intenta resolver un misterio.
aplicación como un lugar en el que • Este tipo de interactividad es adecuada para aplicaciones
busca información o datos. basadas en:
• La navegación del usuario no modifica • Juegos de misterio, en que el usuario debe
la estructura de la aplicación, sino que reconstruir una historia a partir de pistas.
genera una narración personalizada en • Soap opera, en que el usuario debe interactuar con
su mente varios personajes para reconstruir una historia.
• Narrativas basadas en relaciones interpersonales. El
usuario puede ver una misma historia desde varios
puntos de vista, dependiendo del personaje que haya
seleccionado.
• Narrativa espacial, basada en el viaje y la
exploración de un espacio determinado.

Las cuatro formas de interactividad surgen de estos pares son las siguientes:
Externo Interno
Ontológico • El usuario gobierna el sistema desde el • El usuario actúa como un personaje que se encuentra en
exterior, controlando las acciones de los
el mundo virtual.
personajes y el tiempo y espacio del
mundo virtual, así como sus • La interactividad es intensa, para simular entornos
propiedades. reales.
• Puede tomar decisiones sobre los • Las acciones del usuario generan una nueva historia.
personajes, introducir dificultades y
enviarlos a sitios diferentes. • El usuario tiene una experiencia inmersiva, en la que se
• Este tipo de interactividad suele ve absorbido por la consecución de un objetivo.
utilizarse en entornos de simulación. • Este tipo de interactividad suele utilizarse en juegos de
aventura y entornos inmersivos
Pautas para la generación de interfaces narrativas

El objetivo de una buena narración es hacer que lo complicado parezca sencillo: el contenido puede
estructurarse en pequeñas unidades acompañadas de diagramas, listas, esquemas, tests, glosarios,
etc. Siempre que existan datos, es recomendable representarlos gráficamente.
DISEÑO DE EMOCIONES
• Un objeto mal diseñado

• Produce ansiedad,
• Menos capacidad de aprender a utilizarlo.
• Los objetos que deban utilizarse en
situaciones de estrés requieren mayor
atención al detalle.
• Un objeto bien diseñado
• El usuario se sienta relajado y sea más
creativo.
• No será tan crítico con los detalles,
• Estará más motivado para aprender a
utilizarlo.
NARRATIVA E INTERFAZ
Relato.
• Contar historias, damos sentido al mundo.
• Ordenamos los eventos, y les asociamos un significado, asimilándolos a
narraciones más o menos familiares.
Inteligencia narrativa.
• Blair y Meyer denominan "inteligencia narrativa" a la habilidad humana
para ordenar experiencias en forma narrativa, siguiendo una estructura
o lógica determinada.
• Los sistemas pueden hacerse más inteligibles si se comunican de
CONCEPTOS manera asimilable a la narrativa.
Interfaces narrativos.
• Las interfaces narrativas imitan las conductas comunicativas humanas.
• Hablan al usuario, lo escuchan e incluso pueden modificar el contexto
de acuerdo con las respuestas del usuario.
• Las interfaces narrativas se basan en el desarrollo de un relato, y están
orientadas a un objetivo:
• El sistema dirige la conversación con el usuario, siguiendo unos
objetivos determinados.
• Comportamiento proactivo, basado no solamente en las acciones
del usuario, sino también en una estrategia predeterminada.
NARRATIVA E INTERFAZ
Pautas para la generación de interfaces narrativas

Conexión emocional.
• Las historias se basan:
• Datos o eventos
• Se refieren a las personas, a cómo viven y cómo se ven afectadas por los sucesos
que se describen.
El diseñador debe orientarse a conseguir una conexión emocional con los usuarios,
explorando los sentimientos que pueden asociarse a una historia y reforzándolos
visualmente.
Uso de rostros humanos.
PAUTAS • Nada atrae tanto nuestra atención como un rostro humano.
• Intuitivamente, nos atraen especialmente los rostros con cabezas y ojos grandes
• Los elementos que nos dan más información son los ojos, la nariz y la boca.
• La inclusión de rostros humanos puede reforzar la historia que se está desarrollando.
Macro y micro perspectiva.
Para explicar una historia, es importante:
• Trabajar con una microperspectiva
• Pueden explicarse grandes historias a partir de personajes individuales
• Macroperspectiva
• Puede explicarse un evento particular a partir de su contexto geográfico o social.

INTERFACES MULTIMEDIA 1u

Cargado por

Copyright:

Formatos disponibles

INTERFACES MULTIMEDIA 1u

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

INTERFACES MULTIMEDIA 1u

Cargado por

Copyright:

Formatos disponibles

INTERFACES Y MULTIMEDIA

GERMAN ÑACATO CAIZA

• En 1962, Englebart escribe el ensayo

• En 1968, Englebart consigue realizar

Smalltalk Para proporcionar coherencia a las aplicaciones, el

Algunos de los ingenieros de Xerox desembarcan en otras

Puesto que Lisa resulta muy caro, Apple desarrolla

En 1983 Bill Gates anuncia el Interface Manager,

En 1987 aparece Windows 2.0, que

A finales de los ochenta aparecen

En 1990 aparece Windows 3.0, y

En Windows95 se introduce por

En 2001 Apple presenta la

Posteriormente, Apple presenta

En enero de 2007, Microsoft presenta su sistema

Lewis y Rieman (1993) definen:

1937. Desarrollo de computadoras Digitales

Nacimiento de la interfaz gráfica (1973 – 1981). Primera

Adesarrollo e implementación del concepto WYSIWYG16 en la interfaz

Desarrollo y eclosión de las interfaces gráficas (1976 – 1990)

El desarrollo de una verdadera GUI se inicia con la computadora Apple LISA

Bill Gates lanza la primera versión de Windows.

1985, Windows se da a conocer a color y con el uso de ventanas

La interfaz de usuario Cuenta con los elementos de

1 Command Line Interfaces (CLI)

2 Text User Interface (TUI)

3 Graphical User Interfaces (GUI)

4 Voice User Interface (VUI)

• El control por voz garantiza una mayor accesibilidad.

5 Natural User Interface (NUI)

ETAPAS DEL PROCESO DE INTERACCIÓN

Convierte esta intención en La acción produce una El usuario evalúa si

Aquellos que permiten al Elementos que existen en un programa determinado, utilizado

1. Estilos lingüísticos. En la introducción de datos se realiza mediante el teclado alfanumérico. Se basan en el

• Lenguaje de comandos. permite múltiples combinaciones de comandos y teclas

2) Contextuales 3) Ventanas de selección

• Permiten solicitar al usuario la introducción de datos

Los elementos de un formulario pueden ser de dos tipos:

1. Cajas de texto. Campos en los que el formulario puede introducir texto

• Se utiliza recursos de reconocimiento visual

Diseño de interfaces orientadas a niños (hasta 15)

• Los niños utilizan aplicaciones interactivas.

Diseño de interfaces orientadas a niños (hasta 15)

Fiabilidad Estables y funcionan correctamente

Secuencia progresiva de tareas, evitando

Diferencias entre usuarios infantiles y adultos

Diferencias entre usuarios infantiles y adultos

Navegación debe ser

En la descarga, evitar la necesidad de plugins o

Dónde están situados Localización adecuada, evitar abandono

Tradicionales, evitar diferentes a cliclar y

Nomeclatura Clara, evitar el uso de palabras complejas o infrecuentes.

Niños menores de 5 Tienen capacidad de mantener la atención entre 8 a 15

No piensan en términos abstractos, de manera que les

evitarse los textos extensos El público infantil está empezando a leer

No debe ser complejo, pero tampoco un tono más infantil

Divertido, con profusión de colores y efectos

Menú inicial Sencillo, los elementos de navegación que