Interfaz Hombre-Máquina

Tema del día:Tema del día:
InterfazInterfaz
Hombre-MáquinaHombre-Máquina

ObjetivosObjetivos
En esta clase trataremos de:En esta clase trataremos de:
– Comprender las problemáticas asociadas a laComprender las problemáticas asociadas a la
interacción humano-computador.interacción humano-computador.
– Analizar algunas de las buenas prácticas deAnalizar algunas de las buenas prácticas de
diseño de interfaces humano-computador.diseño de interfaces humano-computador.
– Poder caracterizar los distintos tipos de interfacesPoder caracterizar los distintos tipos de interfaces
de usuario y evaluar sus fortalezas y debilidades.de usuario y evaluar sus fortalezas y debilidades.

Modelos MentalesModelos Mentales

Un modelo de qué?Un modelo de qué?
– Cómo trabaja el sistema.Cómo trabaja el sistema.
– Cuáles son sus componentes y cómo seCuáles son sus componentes y cómo se
interrelacionan.interrelacionan.
– Cuáles son sus procesos internos y cómoCuáles son sus procesos internos y cómo
afectan a los componentes.afectan a los componentes.
Qué permite al usuario?Qué permite al usuario?
– Construir acciones para tareas nuevas.Construir acciones para tareas nuevas.
– Explicar porqué una acción determinada produceExplicar porqué una acción determinada produce
un resultado determinado.un resultado determinado.

Tipos de ModelosTipos de Modelos
– Substituto: imita la salida del sistema, pero no suSubstituto: imita la salida del sistema, pero no su
operatoria interna.operatoria interna.
– Metafórico: se entiende el sistema comparándoloMetafórico: se entiende el sistema comparándolo
con otro ya conocido.con otro ya conocido.
– Caja de cristal: está compuesto de diferentesCaja de cristal: está compuesto de diferentes
metáforas que, en conjunto, describen elmetáforas que, en conjunto, describen el
sistema.sistema.
– Red: se entiende el sistema como una serie deRed: se entiende el sistema como una serie de
estados transitorios.estados transitorios.

Interfaz de UsuarioInterfaz de Usuario
Qué es una interfaz de usuario?Qué es una interfaz de usuario?
Es el conjunto de elementos a través de los cualesEs el conjunto de elementos a través de los cuales
un usuario interactúa con un objeto que realiza unaun usuario interactúa con un objeto que realiza una
determinada tarea.determinada tarea.
El ser humano interactúa con los objetos que leEl ser humano interactúa con los objetos que le
rodean, y tiene unas expectativas de cómo debenrodean, y tiene unas expectativas de cómo deben
comportarse, basado en experiencias anteriorescomportarse, basado en experiencias anteriores
con ellos (mapas mentales).con ellos (mapas mentales).

A la hora de diseñar un objeto...A la hora de diseñar un objeto...
• Quiénes son los destinatarios?Quiénes son los destinatarios?
• Cuáles son sus expectativas?Cuáles son sus expectativas?
• El objeto...El objeto...
– Es conocido.Es conocido.
– Es nuevo.Es nuevo.

Interfaz de usuario de un programaInterfaz de usuario de un programa
Conjunto de elementos hardware y software de unConjunto de elementos hardware y software de un
ordenador que presentan información al usuario yordenador que presentan información al usuario y
le permiten interactuar con la información y con elle permiten interactuar con la información y con el
ordenador.ordenador.
También incluye el hardware del sistema: Teclado,También incluye el hardware del sistema: Teclado,
Dispositivo apuntador, Monitor, CPU.Dispositivo apuntador, Monitor, CPU.

Componentes SoftwareComponentes Software
Elementos que el usuario ve, oye, a los que apuntaElementos que el usuario ve, oye, a los que apunta
o toca en la pantalla para interactuar con elo toca en la pantalla para interactuar con el
ordenador, así como la información con la queordenador, así como la información con la que
trabaja.trabaja.
También es parte del interfaz la documentación:También es parte del interfaz la documentación:
Manuales, Ayuda, Referencia, Tutoriales.Manuales, Ayuda, Referencia, Tutoriales.

Hasta hoy las interfaces son en generalHasta hoy las interfaces son en general
cuestión de marketing...cuestión de marketing...
Pobre InterfazPobre Interfaz >>>> Mala ImagenMala Imagen
Buena Interfaz >> Realza un producto mediocre.Buena Interfaz >> Realza un producto mediocre.
Lo único importante es VENDER!Lo único importante es VENDER!

Todos los usuarios son iguales?Todos los usuarios son iguales?

No existe una interfaz válida para todosNo existe una interfaz válida para todos
los usuarios y todas las tareas.los usuarios y todas las tareas.
La mayoría de los programas y S.O ofrecenLa mayoría de los programas y S.O ofrecen
varias formas de interacción al usuariovarias formas de interacción al usuario

Modelos de interfaz de usuarioModelos de interfaz de usuario
– Usuario.Usuario.
– Programador.Programador.
– Diseñador.Diseñador.
Cada uno tiene su propio esquema mental de laCada uno tiene su propio esquema mental de la
interfaz, que obtiene a través de su experiencia.interfaz, que obtiene a través de su experiencia.

Modelo del usuarioModelo del usuario
El usuario tiene su propia forma de ver las cosas, yEl usuario tiene su propia forma de ver las cosas, y
espera de ellas un comportamiento predecible.espera de ellas un comportamiento predecible.
Estudiar al usuario nos permite saber que esperaEstudiar al usuario nos permite saber que espera
éste de la interfaz.éste de la interfaz.
Son de gran importancia las metáforas.Son de gran importancia las metáforas.

MetáforasMetáforas
Una metáfora asocia un dominio nuevo aUna metáfora asocia un dominio nuevo a
uno ya conocido por el usuariouno ya conocido por el usuario

Videos sobre Metáforas de Usuario.Videos sobre Metáforas de Usuario.

Modelo del ProgramadorModelo del Programador
Es el más fácil de visualizar, al poderse especificarEs el más fácil de visualizar, al poderse especificar
formalmente.formalmente.
Los objetos que maneja son distintos de los delLos objetos que maneja son distintos de los del
usuario y deben de ser ocultados al mismo.usuario y deben de ser ocultados al mismo.
Normalmente no tienen en cuenta la forma deNormalmente no tienen en cuenta la forma de
pensar del usuario y si su perspectiva delpensar del usuario y si su perspectiva del
ordenador.ordenador.

Modelo del DiseñadorModelo del Diseñador

Dar control al usuario.Dar control al usuario.
– Permitir a los usuarios utilizar teclado o ratón.Permitir a los usuarios utilizar teclado o ratón.
– Permitir al usuario interrumpir su tarea yPermitir al usuario interrumpir su tarea y
continuarla más tarde.continuarla más tarde.
– Utilizar mensajes y textos descriptivos.Utilizar mensajes y textos descriptivos.
– Permitir deshacer.Permitir deshacer.
– Permitir una cómoda navegación dentro delPermitir una cómoda navegación dentro del
producto y una fácil salida del mismo.producto y una fácil salida del mismo.
– Permitir distintos niveles de uso del productoPermitir distintos niveles de uso del producto
para usuarios con distintos niveles depara usuarios con distintos niveles de
experiencia.experiencia.

Dar control al usuario.Dar control al usuario.
– Hacer transparente la interfaz del usuario (esteHacer transparente la interfaz del usuario (este
debe creer que trabaja directamente con losdebe creer que trabaja directamente con los
objetos).objetos).
– Permitir al usuario personalizar la interfaz.Permitir al usuario personalizar la interfaz.
– Permitir al usuario manipular directamente losPermitir al usuario manipular directamente los
objetos de la interfaz.objetos de la interfaz.
El usuario debe sentir que tieneEl usuario debe sentir que tiene
el control del sistemael control del sistema

Reducir la carga de memoria del usuario.Reducir la carga de memoria del usuario.
– Aliviar carga memoria corto plazo (deshacer,Aliviar carga memoria corto plazo (deshacer,
copiar y pegar, mantener los últimos datoscopiar y pegar, mantener los últimos datos
introducidos).introducidos).
– Reconocimiento antes que recuerdo (elegir deReconocimiento antes que recuerdo (elegir de
listas mejor que teclear).listas mejor que teclear).
– Asociar acciones a los objetos (menú contextual).Asociar acciones a los objetos (menú contextual).
– Utilizar metáforas del mundo real (sistemaUtilizar metáforas del mundo real (sistema
telefónico, agenda).telefónico, agenda).
– Presentar al usuario solo la información quePresentar al usuario solo la información que
necesita.necesita.

Consistencia.Consistencia.
– Permite al usuario utilizar conocimiento adquiridoPermite al usuario utilizar conocimiento adquirido
en otros programas.en otros programas.
– Consistencia en la realización de tareas:Consistencia en la realización de tareas:
proporcionar al usuario indicaciones sobre elproporcionar al usuario indicaciones sobre el
proceso que esta siguiendo.proceso que esta siguiendo.
– Consistencia Consistencia dentro de un productoConsistencia Consistencia dentro de un producto
y de un producto a otro: Presentación,y de un producto a otro: Presentación,
Comportamiento, Interacción.Comportamiento, Interacción.

Consistencia.Consistencia.
– Consistencia en los resultados de las acciones:Consistencia en los resultados de las acciones:
misma respuesta ante misma acción.misma respuesta ante misma acción.
– Consistencia en la apariencia estética (iconos,Consistencia en la apariencia estética (iconos,
fuentes, colores, distribución de pantallas, ...)fuentes, colores, distribución de pantallas, ...)
– Fomentar la libre exploración de la interfaz, sinFomentar la libre exploración de la interfaz, sin
miedo a consecuencias negativas.miedo a consecuencias negativas.

Evolución de las interfaces de usuario.Evolución de las interfaces de usuario.
– Paralela a la evolución de los sistemasParalela a la evolución de los sistemas
operativos.operativos.
– Interfaces de línea de mandatos (Command_lineInterfaces de línea de mandatos (Command_line
user interface, CLIs)user interface, CLIs)
– Interfaces de menúsInterfaces de menús
– Interfaces gráficas (graphical user interfaces,Interfaces gráficas (graphical user interfaces,
GUIs)GUIs)
– Interfaces orientadas a objetos (object orientedInterfaces orientadas a objetos (object oriented
user interfaces, OOUIs)user interfaces, OOUIs)

Interfaz de línea de comandos.Interfaz de línea de comandos.
– Característico de Unix.Característico de Unix.
– Estilo más antiguo de interacción hombre-Estilo más antiguo de interacción hombre-
máquinamáquina
– Lenguaje formal con vocabulario y sintaxis propiaLenguaje formal con vocabulario y sintaxis propia
– Hardware de interacción = tecladoHardware de interacción = teclado
– Orden > acciónOrden > acción

Interfaz de línea de comandos.Interfaz de línea de comandos.
– El usuario no recibe mucha información por parteEl usuario no recibe mucha información por parte
del sistema.del sistema.
– Debe conocer como funciona el ordenador.Debe conocer como funciona el ordenador.
– El modelo de la interfaz es el del programador noEl modelo de la interfaz es el del programador no
del usuariodel usuario
– Adecuado para usuarios expertos, no noveles.Adecuado para usuarios expertos, no noveles.

Inconvenientes de la CLI:Inconvenientes de la CLI:
– Carga de memoria del usuarioCarga de memoria del usuario
– Nombres no siempre adecuados en losNombres no siempre adecuados en los
mandatos (del, rm, erase)mandatos (del, rm, erase)
– Inflexible en la sintaxisInflexible en la sintaxis

Ventajas de la CLI.Ventajas de la CLI.
– Potente, flexible y controlado por el usuario.Potente, flexible y controlado por el usuario.
– Mejor para usuarios experimentados.Mejor para usuarios experimentados.
– Para los usuarios expertos es más rápido.Para los usuarios expertos es más rápido.
En muchos casos se incluye una CLI comoEn muchos casos se incluye una CLI como
parte de un interfaz, que se utiliza cuando elparte de un interfaz, que se utiliza cuando el
usuario tiene más experiencia. Ej. Línea deusuario tiene más experiencia. Ej. Línea de
comandos de Windows.comandos de Windows.

Interfaz de menúes.Interfaz de menúes.
Menú : lista de opciones que se muestranMenú : lista de opciones que se muestran
en pantalla o en una ventana de la pantallaen pantalla o en una ventana de la pantalla
para que los usuarios elijan la opción quepara que los usuarios elijan la opción que
deseen.deseen.
Permiten:Permiten:
– Navegar dentro de un sistema.Navegar dentro de un sistema.
– Seleccionar elementos de una lista, queSeleccionar elementos de una lista, que
representan propiedades o acciones que losrepresentan propiedades o acciones que los
usuarios desean realizar.usuarios desean realizar.

Tipos de menúes:Tipos de menúes:
– Menúes de pantalla completa.Menúes de pantalla completa.
– Menúes de barras.Menúes de barras.
– Menúes desplegables.Menúes desplegables.
– Menúes en cascada.Menúes en cascada.
– Paletas o barras de herramientas.Paletas o barras de herramientas.
– Menúes contextuales o pop-up.Menúes contextuales o pop-up.

– Bien estructurados, son buenos para usuariosBien estructurados, son buenos para usuarios
noveles o esporádicos.noveles o esporádicos.
– Son fáciles de aprender y recordar.Son fáciles de aprender y recordar.
– Pueden ser de dificultad distinta, para adaptarsePueden ser de dificultad distinta, para adaptarse
al nivel del usuario.al nivel del usuario.

Normas de uso:Normas de uso:
– No ocupar demasiado espacio de la pantallaNo ocupar demasiado espacio de la pantalla
– No colocar demasiados elementos en el menúNo colocar demasiados elementos en el menú
– Agrupar elementos de manera lógicaAgrupar elementos de manera lógica
– Permitir personalización por parte del usuarioPermitir personalización por parte del usuario
– Usar una terminología adecuada y consistente enUsar una terminología adecuada y consistente en
el programa y con otrosel programa y con otros

Interfaces gráficas (GUIs).Interfaces gráficas (GUIs).
GUI : representación gráfica en pantallaGUI : representación gráfica en pantalla
de los programas, datos y objetos.de los programas, datos y objetos.
Características de un GUI:Características de un GUI:
– Emplea monitor gráficoEmplea monitor gráfico
– Emplea dispositivos apuntadoresEmplea dispositivos apuntadores
– Promueve la consistencia de la interfaz entrePromueve la consistencia de la interfaz entre
programasprogramas

– El usuario puede ver en pantalla los gráficos yEl usuario puede ver en pantalla los gráficos y
textos tal y como se verán impresostextos tal y como se verán impresos
– Sigue el paradigma de interacción objeto-acciónSigue el paradigma de interacción objeto-acción
– Permite transferencia de información entrePermite transferencia de información entre
programasprogramas
– Permite manipular en pantalla directamentePermite manipular en pantalla directamente
objetos e informaciónobjetos e información
– Posee muestra visual de información y objetosPosee muestra visual de información y objetos
(iconos y ventanas)(iconos y ventanas)
– Proporciona respuesta visual a las acciones delProporciona respuesta visual a las acciones del
usuariousuario

– Existe información visual de las acciones yExiste información visual de las acciones y
modos del usuario/sistema (menús, paletas)modos del usuario/sistema (menús, paletas)
– Existen controles gráficos (widgets) para laExisten controles gráficos (widgets) para la
selección e introducción de la informaciónselección e introducción de la información
– Permite a los usuarios personalizar la interfaz yPermite a los usuarios personalizar la interfaz y
las interaccioneslas interacciones
– Proporciona flexibilidad en el uso de dispositivosProporciona flexibilidad en el uso de dispositivos
de entrada (teclado/ratón)de entrada (teclado/ratón)
– Permite manipular la información en pantalla, noPermite manipular la información en pantalla, no
solo presentarlasolo presentarla

– El usuario debe conocer o aprender conceptosEl usuario debe conocer o aprender conceptos
del sistema y del GUI para poder manejarlodel sistema y del GUI para poder manejarlo
– Utilizan estilo objeto-acción, en contraposición alUtilizan estilo objeto-acción, en contraposición al
acción/objeto de los CLI e interfaces de menúacción/objeto de los CLI e interfaces de menú
Inconveniente: Orientados a la aplicación.Inconveniente: Orientados a la aplicación.
Ventaja: Usa metáforas de la vida real que seVentaja: Usa metáforas de la vida real que se
adaptan al modelo mental del usuario.adaptan al modelo mental del usuario.

BibliografíaBibliografía
Este tema puede ser profundizado leyendo:Este tema puede ser profundizado leyendo:
– Carretero, Capítulo 2 – Sección 12.Carretero, Capítulo 2 – Sección 12.

GraciasGracias!!
Ing. Gabriel E. ArellanoIng. Gabriel E. Arellano
gabrielarellano@gmail.comgabrielarellano@gmail.com
http://www.gabriel-arellano.com.ar/so/http://www.gabriel-arellano.com.ar/so/
(2010) Gabriel E. Arellano
Permission is granted to copy, distribute and/or modify this document under the
terms of the GNU Free Documentation License, Version 1.2 or any later version
published by the Free Software Foundation; with no Invariant Sections, no Front-
Cover Texts, and no Back-Cover Texts. The GNU Free Documentation License as
applicable to this document can be found at: http://www.gnu.org/copyleft/fdl.html

Interfaz Hombre-Máquina

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Interfaz Hombre-Máquina

Similar a Interfaz Hombre-Máquina (20)

Más de Gabriel Arellano

Más de Gabriel Arellano (10)

Último

Último (20)

Interfaz Hombre-Máquina