Interfaz de usuario

1. Prólogo
General

3.
Clasificación
4. Características de un
GUI
5. Características humanas del
diseño de interfaz
6. Pasos para el diseño de
interfaz
7. Conclusiones Y
Recomendaciones

Para ver la versión en Power point, haga
click en el menú superior "Bajar Trabajo"

1. Prólogo
General

Los Avances de la Ciencia y
la Tecnología han puesto al hombre en un
plano intermedio entre lo tangible e intangible
computacionalmente hablando, es ahora tan común el
convivir con un computador
diariamente que cada vez se hace más imperativo la mejor
interacción hombre-máquina a través de una
adecuada interfaz (Interfaz de Usuario), que le brinde tanto
comodidad ,como eficiencia.

El presente trabajo es una introducción al mundo de las Interfaz de
Usuarios, en el están los conceptos y nociones
básicas que permitirán en adelante adentrarnos
más en este

2.
Conceptos de interfaz

Lewis y Rieman [1993] definen las interfaces hombre
computadora
como:

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.

La idea fundamental en el concepto de
interfaz es el de mediación, entre hombre y
máquina. La interfaz es lo que "media", lo que facilita la
comunicación, la interacción, entre
dos sistemas de
diferente naturaleza,
típicamente el ser humano y una máquina como el
computador.
Esto implica, además, que se trata de un sistema de
traducción, ya que los dos "hablan" lenguajes diferentes:
verbo-icónico en el caso del hombre y binario en el caso
del procesador
electrónico.

De una manera más técnica se define a
Interfaz de usuario, como conjunto de componentes empleados por
los usuarios para comunicarse con las computadoras.
El usuario dirige el funcionamiento de la máquina mediante
instrucciones, denominadas genéricamente entradas. Las
entradas se introducen mediante diversos dispositivos, por
ejemplo un teclado, y se
convierten en señales electrónicas que pueden ser
procesadas por la computadora.
Estas señales se transmiten a través de circuitos
conocidos como bus, y son coordinadas y
controladas por la unidad de proceso
central y por un soporte lógico conocido como sistema
operativo. Una vez que la UPC ha ejecutado las instrucciones
indicadas por el usuario, puede comunicar los resultados mediante
señales electrónicas, o salidas, que se transmiten
por el bus a uno o más
dispositivos de salida, por ejemplo una impresora o un
monitor.

Resumiendo entonces podemos decir que, una interfaz de
software es la
parte de una aplicación que el usuario ve y con la cual
interactúa. Está relacionada con la subyacente
estructura, la
arquitectura,
y el código
que hace el trabajo del
software, pero no
se confunde con ellos. La interfaz incluye las pantallas,
ventanas, controles, menús, metáforas, la ayuda en
línea, la documentación y el entrenamiento.
Cualquier cosa que el usuario ve y con lo cual interactúa
es parte de la interfaz. Una interfaz inteligente es fácil
de aprender y usar. Permite a los usuarios hacer su trabajo o
desempeñar una tarea en la manera que hace más
sentido para ellos, en vez de tener que ajustarse al software.
Una interfaz inteligente se diseña específicamente
para la gente que la usará.

3. Clasificación

Dentro de las Interfaces de Usuario se distinguir
básicamente dos tipos :

• Una interfaz de hardware, a
  nivel de los dispositivos utilizados para ingresar, procesar y
  entregar los datos: teclado,
  ratón y pantalla visualizadora; y
• Una interfaz de software, destinada a entregar
  información acerca de los procesos y
  herramientas
  de control, a
  través de lo que el usuario observa habitualmente en la
  pantalla.

De esta clasificación general se puede ir
desprendiendo algunas, así por ejemplo según su
evolución tenemos:

La evolución de las interfaces de usuario
corre en paralelo con la de los sistemas
operativos; de hecho, la interfaz constituye actualmente uno
de los principales elementos de un sistema
operativo. A continuación se muestran las distintas
interfaces que históricamente han ido apareciendo,
ejemplificándolas con las sucesivas versiones de los
sistemas
operativos más populares.

Interfaces de línea de mandatos
(command-line user interfaces, CUIs).

Es el característico del DOS, el sistema operativo
de los primeros PC, y es el estilo más antiguo de
interacción hombre-máquina. El usuario escribe
órdenes utilizando un lenguaje
formal con un vocabulario y una sintaxis propia (los mandatos en
el caso del DOS). Se usa un teclado, típicamente, y las
órdenes están encaminadas a realizar una
acción.

El usuario no suele recibir mucha información por parte del sistema (ejemplo:
indicador del DOS), y debe conocer cómo funciona el
ordenador y dónde están los programas (nada
está oculto al usuario). El modelo de la
interfaz es el del programador, no el del usuario. Ejemplo del
DIR-DEL-DIR, por la falta de información de respuesta del
DOS. Otras veces, en cambio, es
excesiva: etiqueta del volumen en el
DIR.

Inconveniente: carga de memoria del
usuario (debe memorizar los mandatos; incluso la ayuda es
difícil de leer); nombres no siempre adecuados a las
funciones,
significado de los mandatos mal comprendido a veces (varios
mandatos con el mismo o parecido significado, como DEL y ERASE);
inflexible en los nombres (DEL y no DELETE).

Ventajas: potente, flexible y controlado por el usuario,
aunque esto es una ventaja para usuarios experimentados. La
sintaxis es estricta, y los errores pueden ser graves

Así:

Problema del mandato COPY

En suma, un CUI es adecuado para usuarios expertos, no
para noveles. Para aquellos resultan más rápidos,
por lo que se puede diseñar un CUI como parte de una
interfaz, para que se pueda utilizar una vez que se tenga
experiencia.

Interfaces de menús.

Un menú es una lista de opciones que se muestran
en la pantalla o en una ventana de la pantalla para que los
usuarios elijan la opción que deseen (véase
ejemplo). Los menús permiten dos cosas: navegar dentro de
un sistema, presentando rutas que llevan de un sitio a otro, y
seleccionar elementos de una lista, que representan propiedades o
acciones que
los usuarios desean realizar sobre algún
objeto.

Las interfaces de menús aparecen cuando el
ordenador se vuelve una herramienta de usuario y no sólo
de programadores. Las actuales interfaces gráficas u orientadas a objetos siguen
utilizando este tipo de interfaces (los distintos estilos de
interfaces no son mutuamente exclusivos).

Existen distintos tipos de menús. Los primeros
fueron los menús de pantalla completa, estructurados
jerárquicamente

Menú de pantalla completa (Norton
Utilities)

Los menús de barra, situados en la parte superior
de la pantalla, son profusamente utilizados en las aplicaciones
actuales. Contienen una lista de acciones
genéricas que dan paso a menús desplegables donde
se concretan.

Menú de barra y menú
desplegable

Estos menús pueden llevar a su vez a otros: son
los menús en cascada. Pueden cambiar dinámicamente,
y deshabilitar opciones que no estén disponibles en un
momento dado (marcándolas habitualmente en
gris).

Menús en cascada de la barra de
inicio de Windows
95

Las paletas o barras de herramientas
son menús gráficos con acciones, herramientas y
opciones que se pueden colocar en la pantalla. Se utilizan mucho
en programas
gráficos.

Paletas de herramientas en Microsoft
Powerpoint

Los menús contextuales o menús pop-up son
los más recientes. Se llaman así porque el
contenido del menú depende del contexto de trabajo del
usuario. Contienen únicamente las opciones que son
aplicables al objeto seleccionado, más algunas de uso
frecuente que también son accesibles desde el menú
de barra.

Menú contextual de un icono en el escritorio de
Windows
95

Las interfaces de menús, bien estructuradas, son
buenas para usuarios noveles o esporádicos. Son
fáciles de aprender y de recordar. Pueden existir
menús simples y avanzados, para adaptarse al tipo de
usuario.
Precauciones: no ocupar demasiado espacio de la pantalla,
recordar la información acumulada de menús
precedentes, no colocar demasiados elementos en el menú,
agruparlos de manera lógica
(no en orden alfabético, por ejemplo; esto ayuda a
recordarlos), permitir la personalización por parte del
usuario, usar una terminología adecuada y consistente
dentro del programa y con
otros programas (Exit, Quit, Escape, Close, Return, Back). Las
interfaces de menús serán utilizadas normalmente en
conjunción con los otros estilos de interfaces.

Interfaces gráficas (graphical user
interfaces, GUIs).

Desarrolladas originalmente por XEROX (sistema Xerox
Star, 1981, sin éxito
comercial), aunque popularizadas por Apple (Steven Jobs se
inspiró en los trabajos de Xerox y creó el Apple
Lisa, 1983, sin éxito, y Apple Macintosh, 1984, con
éxito debido en gran medida a su campaña
publicitaria)

Los tres estilos más comunes de interfaces
gráficas hombre-computadora son: Lo que tú ves es
lo que puedes conseguir (WYSIWYG What you see is what you get),
Manipulación directa e Interfaces de usuario basados en
iconos.

Un GUI es una representación gráfica en la pantalla
del ordenador de los programas, datos y objetos,
así como de la interacción con ellos. Un GUI
proporciona al usuario las herramientas para realizar sus
operaciones,
más que una lista de las posibles operaciones que
el ordenador es capaz de hacer.

4. Características de un GUI

2. Posee un monitor
   gráfico de alta resolución.
2. Posee un dispositivo apuntador
   (típicamente un ratón).
3. Promueve la consistencia de la interfaz
   entre programas.
4. Los usuarios pueden ver en la pantalla
   los gráficos y textos tal como se verán
   impresos.
5. Sigue el paradigma
   de la interacción objeto-acción.
6. Permite la transferencia de
   información entre programas.
7. Se puede manipular en la pantalla
   directamente los objetos y la información.
8. Provee elementos de interfaz
   estándar como menús y
   diálogos.
9. Existe una muestra
   visual de la información y los objetos (iconos y
   ventanas).
10. Proporciona respuesta visual a las
    acciones del usuario.
11. Existe información visual de las
    acciones y modos del usuario/sistema (menús,
    paletas).
12. Existen controles gráficos
    (widgets) para la selección e introducción de la
    información.
13. Permite a los usuarios personalizar la
    interfaz y las interacciones.
14. Proporciona flexibilidad en el uso de
    dispositivos
    de entrada (teclado/ratón).

Una característica importante es que el GUI
permite manipular los objetos e información de la
pantalla, no sólo presentarla.

Para usar un GUI, los usuarios deben conocer (o
aprender) una serie de conceptos: organización del sistema (ficheros,
directorios en Win95), diferentes tipos de iconos y efecto de las
acciones sobre ellos, elementos básicos de una ventana,
uso de los controles del GUI, uso del ratón.

Los GUI usan el estilo objeto-acción, en
contraposición al acción-objeto de los CUI o las
interfaces de menú. El usuario selecciona un objeto, y
después la acción a realizar sobre dicho objeto.
Los objetos son el principal foco de atención del usuario, lo cual resulta
más natural y próximo a su modelo
mental.

Metáfora de la cámara

Interfaces orientadas a objetos (object oriented
user interfaces, OOUIs).

Su aspecto es similar al de las GUIs. La diferencia
estriba en el modelo subyacente: las GUIs son interfaces
orientadas a la aplicación, mientras que las OOUIs
están orientadas al objeto. La tabla siguiente muestra las
principales diferencias entre ambos estilos de
interfaz:

El objetivo de la
OOUI es que el usuario se concentre en sus tareas en lugar de en
el ordenador y cómo utilizar las aplicaciones y ficheros
necesarios para cumplir sus objetivos. Por
ello se esconde la
organización del sistema al usuario (Ejemplo de los
accesos directos en Windows95-OS/2).

El estilo de interacción de los OOUIs es el de
objeto-acción (también se da en los GUIs, aunque
mezclado con el estilo acción-objeto). La ventana es un
objeto ventana, no una ventana de aplicación; desaparecen
pues los menús de barra y ganan terreno los
contextuales.

Los objetos se pueden clasificar en tres
categorías: datos, contenedores y dispositivos. Sobre
ellos se definen distintas vistas (por ejemplo, la ayuda
constituye una vista del objeto). Definir los objetos y las
vistas es lo más complicado del diseño
de la interfaz. El objeto debe ser familiar al usuario (encajar
con su modelo mental, apoyado en su vida diaria), y estar
relacionado con el mundo real: uso de las
metáforas.

Distintas vistas del objeto reloj

Un ejemplo de lo que se pretende con una interfaz OOUI
es el considerar un documento como un objeto sobre el cual
realizar tareas tales como incorporar gráficos y textos,
sin necesidad de usar programas distintos para cada una de ellas.
Estos programas suelen tener funciones que se solapan, con el
consiguiente gasto extra en espacio y dinero.

Actualmente existe una mezcla de productos
orientados a la aplicación y al objeto, aunque se
está produciendo una migración
a estos últimos. Las aplicaciones están dejando
paso a conjuntos de
objetos.

5. Características humanas del
diseño
de interfaz

Factores Humanos

Al diseñar interfaces de usuario deben tenerse en
cuenta las habilidades cognitivas y de percepción
de las personas, y adaptar el programa a
ellas.

Así, una de las cosas más importantes que
una interfaz puede hacer es reducir la dependencia de las
personas de su propia memoria, no
forzándoles a recordar cosas innecesariamente (por
ejemplo, información que apareció en una pantalla
anterior) o a repetir operaciones ya realizadas (por ejemplo,
introducir un mismo dato repetidas veces).

La persona tiene
unas habilidades distintas de la máquina, y ésta
debe utilizar las suyas para soslayar las de aquella (como por
ejemplo la escasa capacidad de la memoria de
corto alcance).

• Velocidad de Aprendizaje.-
  Se pretende que la persona aprenda
  a usar el sistema lo más pronto posible.
• Velocidad de Respuesta.- El tiempo
  necesario para realizar una operación en el
  sistema.
• Tasa de errores.- Porcentaje de errores que comete el
  usuario.
• Retención.- Cuánto recuerda el usuario
  sobre el uso del sistema en un período. de tiempo.
• Satisfacción.- Se refiere a que el usuario
  esté a gusto con el sistema.

Además de éstos existen otros a
considerar:

Adecuación

• Características Físicas.- Cada persona
  tiene diferentes características físicas. Hay
  algunas personas que no les gustan los teclados mientras que a
  otras sí. Es por eso que hay teclados
  ergonómicos. Lo mismo sucede con el mouse.
• Ambiente.- El lugar donde va a ser usado el sistema.
  Cada interfaz tiene que adecuarse al lugar.
• Visibilidad.- Tomar en cuenta la cantidad de iluminación del lugar. ¿ Se
  refleja el brillo en la pantalla?
• Personalidad.- De acuerdo a la edad, nivel
  socio-económico, etc.
• Cultura.- Los japoneses no tienen las mismas
  pantallas, ventanas, etc. Este factor es importante si el
  mercado para
  el sistema es a nivel internacional.

Según la función
tenemos:

Motivación

• Sistemas Vitales.- Son de vida o muerte;
  muchas personas dependen de ellos. Ejemplo: un sistema para
  reactores nucleares. Este sistema trabaja en tiempo real, y es
  de suma importancia la seguridad y
  efectividad del mismo.
• Sistemas Comerciales e Industriales.- Sirven para
  aumentar la productividad y
  vender más.
• Sistemas de Oficina, Hogar
  y Juegos.-
  Factor importante: el mercado a
  quien está dirigido; tienen que ser muy amigables y
  satisfacer al cliente.
• Sistemas de Investigación.- Realizan tareas muy
  específicas y tratan de imitar el medio en el que se
  desenvuelve el usuario.

6. Pasos para el
diseño de interfaz

Pasos Clásicos

En el proceso de
diseño de una interfaz de usuario se pueden distinguir
cuatro fases o pasos fundamentales:

2. Reunir y analizar la información del
   usuario
3. Diseñar la interfaz de usuario
4. Construir la interfaz de usuario
5. Validar la interfaz de usuario

Reunir y analizar la información del
usuario:

Es decir concretar a través de técnicas
de requerimentación, qué tipo de usuarios van a
utilizar el programa, qué tareas van a realizar los
usuarios y cómo las van a realizar, qué exigen los
usuarios del programa, en qué entorno se desenvuelven los
usuarios (físico, social, cultural).

Diseñar la interfaz de usuario.

Es importante dedicar tiempo y recursos a esta
fase, antes de entrar en la codificación. En esta fase se
definen los objetivos de
usabilidad del programa, las tareas del usuario, los objetos y
acciones de la interfaz, los iconos, vistas y representaciones
visuales de los objetos, los menús de los objetos y
ventanas. Todos los elementos visuales se pueden hacer primero a
mano y luego refinar con las herramientas adecuadas.

Construir la interfaz de usuario.

Es interesante realizar un prototipo previo, una primera
versión del programa que se realice rápidamente y
permita visualizar el producto para
poderlo probar antes de codificarlo definitivamente

Validar la interfaz de usuario.

Se deben realizar pruebas de
usabilidad del producto, a ser posible con los propios usuarios
finales del mismo.

Es importante, en suma, realizar un diseño que
parta del usuario, y no del sistema.

Existen 11 pasos en el proceso de diseño
"centrado en las tareas", similar al anterior pero que desglosa
algunas actividades implícitas en otras,
así:

1.- Entender quien usará el sistema para hacer
qué.

2.- Elegir tareas representativas para el
diseño.

3.- Plagiar o copiar.

4.- Bosquejar un diseño.

5.- Pensar acerca del diseño.

6.- Crear un prototipo.

7.- Evaluarla con los usuarios.

8.- Repetir.

9.- Construirla.

10.- Rastrearla.

11.- Cambiarla.

Técnicas y pasos avanzadas para el
diseño de interfaces de usuario

Presentación de información:

No se deben colocar demasiados objetos en la pantalla, y
los que existen deben estar bien distribuidos. Cada elemento
visual influye en el usuario no sólo por sí mismo,
sino también por su combinación con el resto de
elementos presentes en la pantalla.

El número de elementos visuales que perciben son: en el
caso a) 1 (el fondo); en b) 3 (la línea, lo que
está encima y lo que está debajo); en c) son 5 (el
espacio fuera del recuadro, el recuadro, la línea y el
espacio encima y debajo de ésta); finalmente, en d) el
número se eleva a 35, siguiendo el mismo criterio.
Conclusión: cada elemento nuevo que se añade
influye más de lo que se piensa en el usuario.

Elementos de diseño de pantalla y su percepción
visual

Análisis de Color: es
probablemente el elemento de la interfaz que con más
frecuencia es mal utilizado. El color comunica
información, no es sólo decorativo (ejemplo:
reforzar mensajes de error). Deben utilizarse combinaciones
adecuadas (por ejemplo, las paletas proporcionadas por los
sistemas
operativos). El color debe atraer la atención, pero no
cansar después de un rato de trabajo. Es especialmente
importante seguir las líneas de diseño existentes.
Principio básico: diseñar primero en blanco y
negro, y luego añadir el color.

Análisis Audio. Primero es preciso ver
cuándo es más apropiado que la información
visual. Segundo, determinar el sonido adecuado.
Tercero, permitir la personalización (volumen y
desactivación). Como en el caso de los colores existen
guías de uso. En lugares de trabajo abiertos, puede ser
poco efectivo; además, puede ser embarazoso para algunas
personas. El sonido debe
usarse para informar, no cuando no añade nada nuevo (por
ejemplo, un mensaje de aviso de correo o de bienvenida,
respectivamente, al iniciar una sesión de
trabajo).

Análisis Animación. Se define como un
cambio en el
tiempo de la apariencia visual de un elemento gráfico.
Ejemplos de su uso: progreso de acciones (copia de ficheros en
Windows 95,
instalación de programas), estado de
procesos
(iconos de impresora),
acciones posibles (cambios en el cursor al desplazar el
ratón). La animación puede ayudar a subrayar iconos
importantes, mostrar el estado de
un objeto particular o explicar su comportamiento.

Diseño internacional. Debe hacerse un uso
adecuado de la terminología. Hay mucho trabajo en este
campo. Debe tenerse cuidado con las diferencias culturales
(gestos, terminología, dibujos,
formatos de teléfonos o calendarios, etc.).

Análisis y Elección de controles. Muchas
veces existe la duda de qué controles utilizar.

En realidad no existe una única forma correcta.
Un aspecto a considerar es la escalabilidad (menú de
10/1000 elementos; ejemplo: programas del menú inicio de
Windows
95).

Ejemplo de alternativas: usar un menú de barra o
de paleta, permitir arrastrar objetos o no (problema: no existe
indicación visual de que se pueda arrastrar el objeto:
¿qué objetos se pueden arrastrar? ¿a
dónde se pueden arrastrar? ¿qué
ocurrirá cuando lleguen allí? ¿se
podrá deshacer la acción?).

Diferentes controles para los mismos datos

Guías de Expertos

Existen diversas guías de diseño sacadas
de expertos y comités, que complementan a las reglas de
oro estudiadas anteriormente. Por citar algunas de
ellas:

• Demasiada simetría puede hacer las pantallas
  difíciles de leer.
• Si se ponen objetos sin alinear, hacerlo
  drásticamente.
• Asimetría=activo,
  simetría=sereno.
• Elementos de tamaño y color similares se
  perciben como pertenecientes a un grupo.
• Asumir errores en la entrada del usuario.
• Diseñar para el usuario, no para demostrar los
  propios conocimientos tecnológicos.
• Unos gráficos espectaculares no
  salvarán a una mala interfaz.

7. Conclusiones Y
Recomendaciones

• El conocimiento
  de estos puntos clave, nos permitirán enfocarnos mejor
  al estudio de la materia.
• Las Interfaces de usuario, como vínculo de
  inmersión del hombre en el entorno de trabajo
  tecnológico actual, realzan su importancia en el
  desarrollo
  de nuevos productos,
  más eficaces, eficientes e interactivos, que es lo que
  el mercado demanda.
• Puntos, cómo los históricos y
  evolutivos, deben ser abordados de manera más
  investigativa, recordemos que "conocer el pasado nos proyecta
  al futuro".
• Otras puntualizaciones de clasificación
  obligarán a que investiguemos y propongamos, nuevas
  distribuciones clasificatorias, útiles a futuro en una
  carrera de desarrollo
  de software.

Fuente:

• Enciclopedia Encarta 99, Interfaz de
  Usuario
• Enciclopedia del Estudiante, LARPRESS 99,Interfaz
  Hombre-Máquina.
• Instituto Técnico Superior México, curso de interfaz de Usuario:
  http://webdia.cem.itesm.mx/ac/rtrejo/Interfaz/index.html
• http://www.bayesinf.com/spanish/product/forphone/help/4inteelem/contens.htm
• Universidad Autónoma de Guadalajara, Tutorial
  "Diseño de una Interfaz Gráfica": http://www.uag.mx/66/proceso1.htm
• SIGGRAPH de México:
  http://groucho.siggraph.org.mx/boletin/Ene99/index.htm
• LINEBACK, Graphical User Interface
  Timeline:

http://pla-netx.com/linebackn/guis/guitimeline.html

• COMUNICACIÓN HOMBRE MÁQUINA,
  http://www.lsi.us.es/docencia/asignaturas/dihm/tema1/tema1.html

Trabajo recopilado y realizado por:
Carlos Aimacaña Toledo