1.1 Interacción Persona Ordenador

1.1.1 Diagnostico

1.1.2 Conceptos

1.1.3 Factores humanos

1.2 Elementos de Interfaz de Usuario.

1.2.1 Tipos de Elementos de Interfaz de Usuario.

1.2.2 Reglas y Principios de Interfaz de Usuario.

1.2.2.1 Dar el control al usuario

1.2.2.2 Reducir la carga en la memoria del usuario

1.2.2.3 Lograr que la interfaz sea consistente

1.1.Interacción Persona Ordenador.

1.1.1. Diagnostico

La interfaz es una parte muy importante del éxito o fracaso de una aplicación.

Para hacer sistemas usables es preciso:

1.1.2. Conceptos

Usuario: Persona que interacciona con un sistema informático.

Interacción: Todos los intercambios que suceden entre la persona y

el ordenador (Baecker and Buxton, 1987)

Interfaz: superficie de contacto entre dos entidades.

Interacción física (teclado, ratón, pantalla...)

La interfaz constituye entre el 47% y el 60% de las líneas de código (McIntyre, 90)

Un 48% del código de la aplicación está dedicado al desarrollo de la interfaz (Myers, 92)

Actualmente más del 70% del esfuerzo de desarrollo de las aplicaciones interactivas está dedicado a la interfaz (Gartner Group)

Comprender los factores

(psicológicos, ergonómicos, organizativos y sociales) que determinan cómo la gente trabaja y hace uso de los ordenadores.

Desarrollar herramientas y

técnicas

Para ayudar a los diseñadores de sistemas interactivos.

Conseguir una interacción eficiente.

Efectiva y segura.

Interacción cognitiva (lo que se presenta al usuario debe ser comprensible para él).

Diseño: Actividad encaminada a conseguir la producción en serie de objetos útiles y

bellos. Tal como se entiende actualmente, pretende actuar sobre el entorno físico del

hombre con tal de mejorarlo en su conjunto. Esta es una disciplina muy importante

dentro de la IPO, tal como podemos ver en su definición para conseguir programas

usables.

IPO: disciplina relacionada con el diseño, implementación y evaluación de sistemas

informáticos interactivos para uso de seres humanos y con el estudio de los

fenómenos más importantes con los que están relacionados (ACM SIGCHI

curricula, 1992)

Ergonomía o factores humanos: La ergonomía o factores humanos se centra en el

estudio de las características físicas de la interacción, por ejemplo el entorno físico

donde se produce esta y la forma y las peculiaridades físicas de la pantalla.

Objetos: Cada cosa que sea relevante en el trabajo en una cierta situación es un

objeto en el sentido del análisis de tareas. Los objetos pueden ser cosas físicas o

conceptuales, como mensajes, gestos, passwords, firmas, etc.

1.1.3. 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).

Además de éstos existen otros a considerar:

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.

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.

Ilustración 1. Factores humanos que intervienen en la IPO

Es posible establecer una analogía entre el ser humano y un ordenador, con su

unidad de procesamiento, memoria y canales de E/S.

Es importante conocer los aspectos humanos de la interacción para mejorar ésta.

• Es el modelo que las personas tienen de ellos mismos, de los otros, del entorno y de las cosas con las que interaccionan.

• Cada vez que nos apartamos de la manera natural con la que se interactúa en el mundo real, estamos obligando al usuario a construir nuevos modelos mentales.

Modelo mental.

• Memoria sensorial.

• La información que se recibe a través de los canales sensoriales perdura durante un breve espacio de tiempo en estos “buffers” antes de ser transferida a la memoria de trabajo.

• Memoria de trabajo.

• En ella se mantienen los elementos a los que estamos prestando atención.

• Memoria a largo plazo.

• Almacena todo nuestro conocimiento, y se distingue entre memoriaepisódica(que almacena momentos y experiencias) y semántica (que registra los conceptos).

La memoria.

• Percepción visual.

• El sentido de la vista es nuestro canal de entrada de mayor ancho de banda, por el que recibimos la mayor parte de la información.

• Percepción auditiva.

• La distancia entre los dos oídos permite al cerebro localizar el sonido en el espacio, pero también la forma del pabellón auditivo.

• Un persona joven y sana percibe frecuencias que oscilan de los 20Hz (sonidos más graves) a los 20.000 Hz (sonidos más agudos), y es más sensible a la dirección de estos últimos.

• Sentido del tacto.

• Tacto, presión y vibración son tres tipos de sensaciones que nuestro cuerpo recoge como información a través de mecanismos nerviosos.

• El sentido del tacto tiene una gran importancia, pues como dijo Bertrand Russell “...es el tacto lo que nos proporciona el sentido de „realidad‟... toda nuestra concepción de lo que existe fuera estábasado en el sentido del tacto”.

Canales de entrada y salida.

1.2.Elementos de Interfaz de Usuario.

1.2.1. Tipos de Elementos de Interfaz de Usuario.

Barras de navegación, íconos, menús, ventanas: Propios de un sistema de relación

entre usuarios e interfaz.

La importancia del diseño de la interfaz convierte la interacción persona-ordenador (IPO) o, en inglés, human-computer interaction (HCI), en una disciplina de obligado estudio.

En la interacción persona-ordenador, la interfaz es el medio de comunicación a través del cual se establece el diálogo para realizar una tarea.

No todos las interfaces gráficas de usuario tienen los mismos elementos; pero si

todas buscan definir de algún modo la gramática interactiva que subyace en la

relación con el ordenador.

Los elementos de la interfaz suponen dentro de los procesos interactivos, elementos

simbólicos que están inscritos en los lenguajes visuales que operan en los sistemas de

comunicación de los humanos.

Ilustración 2. Ejemplo de barras de navegación, íconos, ventanas

Dispositivos externos: Hardware donde el humano introduce información al

ordenador, designan los primeros elementos interactivos para relacionarse con los

ordenadores o sistemas.

Ilustración 3.Dispositivos externos.

Para facilitar el proceso entre usuarios y sistemas UI (Interfaz grafica de usuario), se

aplica “la metáfora de escritorio”, que consiste en representar recursos, elementos y

funciones del sistema informático como ficheros, datos y archivos, a través de íconos

sobre los cuales es posible el asumir de una forma virtual, la relación de trabajador en el

entorno de la oficina.

Esta comparación establece un recurso potente que posibilita al usuario compenetrarse

de forma intuitiva (al ser relativo a la realidad), a través de signos propios del lenguaje

del sistema que facilitan la relación del humano con su entorno laboral.

Consistencia en el diseño: La clave está en la consistencia en el diseño, el usuario sólo

tiene que aprender una sola vez donde localizar las acciones en los menús, y aunque se

produzca un cambio en la aplicación, sepa localizarlos sin problemas, si se maneja el

mismo concepto.

Ilustración 4. Consistencia en diseño.

Las ventanas, los iconos y los menús, son elementos interactivos, que pertenecen a la

parte simbólico-lingüística de la interfaz

Barra de desplazamiento: La barra de desplazamiento es un elemento de las interfaces

gráficas que constan de una barra horizontal o vertical con dos extremos con flechas

que apuntan en sentidos contrarios y que suelen ubicarse en los extremos de una

ventana o recuadro. Las barras suelen aparecer o activarse cuando el recuadro no es lo

suficientemente grande como para visualizar todo su contenido.

Ilustración 5. Barra de desplazamiento.

La consistencia en el diseño de interfaces, es un elemento muy importante

porque reduce la curva de aprendizaje del sistema por parte del usuario.

Barra de Estado: Elemento que se encuentra en las interfaces gráficas, que permite

mostrar información acerca del estado actual de la ventana. Generalmente las barras de

estado se ubican en la parte inferior de las ventanas.

Ilustración 6. Barra de estado.

Barra de herramientas: Agrupación de íconos con los cuales es posible acceder a

determinadas herramientas o funciones en una aplicación.

Ilustración 7. Barra de herramientas.

Barra de Título: Elemento de las interfaces gráficas que se encuentra en la parte más

superior de una ventana, donde aparece un título que se corresponde con el contenido

de la misma.

Ilustración 8. Barra de título.

Botón: En interfaces gráficas de usuario, los botones son tipos de widget que permiten

al usuario comenzar un evento, como buscar, aceptar una tarea, interactuar con un

cuadro de diálogo, etc.

Ilustración 9. Botón.

Botón de Opción: Elemento en las interfaces gráficas que permite elegir sólo una

opción de un conjunto predefinido de opciones.

Ilustración 10. Botón de opción.

Casillero de Verificación: interfaz gráfico que permite al usuario marcar múltiples

selecciones de un número de opciones.

Ilustración 11. Casillero de Verificación

Cuadro de Dialogo: En interfaces gráficas de usuario, un cuadro de diálogo es una

ventana especial para mostrar información al usuario o para obtener de éste una

respuesta.

Ilustración 12. Cuadro de Dialogo

Cuadro de Texto: Un cuadro de texto es un elemento típico en las interfaces gráficas

en donde es posible insertar texto.

Ilustración 13. Cuadro de Texto

Icono: Los íconos del sistema son aquellos íconos que se utilizan para identificar

archivos, accesos directos, programas y herramientas del sistema operativo.

Ilustración 14. Icono

Lista: Una lista es una relación de datos, ordenados o clasificados según su tipo.

Ilustración 15. Lista

Lista Despegable: Tipo de elemento GUI que permite al usuario escribir sobre un

campo de texto mientras se muestra una lista de opciones.

Ilustración 16. Lista Despegable

Menú: un menú es una herramienta gráfica en la interfaz de páginas web y aplicaciones

que consiste de una lista de opciones que puede desplegarse para mostrar más opciones

o funciones.

Menú Despegable: Elemento GUI que permite a un usuario seleccionar de una lista

desplegable una opción. Se distingue de una simple lista en el hecho de que el usuario

debe presionar sobre el menú para que se muestren las opciones disponibles.

Ilustración 17. Menú Despegable

1.2.2. Reglas y Principios de Interfaz de Usuario.

El diseño de la interfaz de usuario requiere el estudio de las personas y el

conocimiento tecnológico adecuado. ¿Quién es el usuario? ¿Cómo aprende a

interactuar con el nuevo sistema de cómputo? ¿Cómo interpreta la información que

produce el sistema? ¿Qué espera del sistema? Preguntas que deben plantearse y

responderse para el diseño de la interfaz de usuario.

1.2.2.1.Dar el control al usuario

Ilustración 18. Controles de usuario

En muchos casos, el diseñador introduce limitaciones y restricciones para

simplificar la implementación de la interfaz, pero tal vez se

tenga como resultado, una interfaz fácil de construir, pero dificil de usar.

Un usuario espera una interfaz que reaccione a sus necesidades y que lo ayude a

hacer las cosas.

Existen tres reglas de oro para el diseño de la interfaz:

• Dar el control al usuario

• Reducir la carga en la memoria del usuario

• Lograr que la interfaz sea consistente.

PR

INC

IPIO

S Q

UE

PE

RM

ITE

N A

L

US

UA

RIO

MA

NT

EN

ER

EL

CO

NT

RO

L

Definir los modos de interacción de forma que el usuario no realice acciones innecesarias o indeseables.

Debe darse al usuario la opción de entrar y salir de la interfaz sin esfuerzo.

Proporcionar una interacción flexible.

Debido a que diferentes usuarios tienen distintas preferencias de interacción, deben ofrecerse las opciones correspondientes. Pero no todas las acciones son adecuadas para todos los mecanismos de interacción.

Incluir las opciones de interrumpir y deshacer la interacción del usuario.

Aunque se encuentre en medio de una secuencia de acciones, un usuario debe contar con la opción de interrumpir la secuencia para hacer otra cosa, sin perder el trabajo que haya hecho. También debe contar con la opción de deshacer cualquier acción.

Depurar la interacción a medida que aumentan los grados destreza y permitir que se personalice la interacción.

Con frecuencia, los usuarios terminan repitiendo la misma secuencia de interacciones, por tal motivo, vale la pena diseñar un mecanismo que permita a un usuario personalizar la interfaz para facilitar la interacción.

Oculte al usuario ocasional los elementos técnicos internos.

La interfaz debe llevar al usuario al mundo virtual de la aplicación, nunca debe requerir que el usuario interactúe en el nivel "interno" del equipo.

Diseñar interacción directa con los objetos que aparecen en la pantalla.

El usuario siente que tiene el control cuando manipula los objetos necesarios para realizar una tarea de manera parecida a como lo haría con un objeto material.

1.2.2.2.Reducir la carga en la memoria del usuario

Una interfaz de usuario bien diseñada, no dependerá de la memoria de éste. Siempre

que sea posible, el sistema debe "recordar" la información pertinente, ya que,

cuantas más cosas tenga que recordar un usuario, más probabilidades habrá que

cometa errores al interactuar con el sistema.

1.2.2.3.Lograr que la interfaz sea consistente

Una interfaz consistente implica los siguientes pasos:

PR

INC

IPIO

S D

E D

ISE

ÑO

QU

E L

OG

RA

N

QU

E U

NA

IN

TE

RF

AZ

RE

DU

ZC

A L

A C

AR

GA

D

E M

EM

OR

IA D

EL

US

UA

RIO

Reducir la demanda de memoria a corto plazo.

La interfaz se debe diseñar para que reduzca la necesidad del usuario de recordar acciones y resultados anteriores. Esto se logra proporcionando ciertas pistas visuales que le permitan al usuario reconocer esas acciones sin tener que recordarlas.

Definir valores por defecto que tengan significado.

Los valores por defecto iniciales, deben ser en principio, valores estándar, pero a su vez, cada usuario debe poder especificar sus propios valores. Sin embargo, debe disponer de una opción "restablecer" que le permita volver a los valores originales.

Definir accesos directos intuitivos.

Al aplicar una función del sistema, por ejemplo imprimir, ésta debe estar unida a una acción de manera que resulte fácil de recordar.

El formato visual de la interfaz debe basarse en una

metáfora tomada de la realidad.

Esto permite que el usuario dependa de pistas visuales que comprende bien. Por ejemplo, la metáfora chequera en un sistema de pago de facturas.

Desglosar la información de manera progresiva.

La información sobre una tarea, un objeto o algún comportamiento debe presentarse primero en un grado alto de abstracción. Después de que el usuario se interese por seleccionar algo con el ratón, deben presentarse más detalles.

Toda la información visual debe estar organizada de acuerdo con un

estándar de diseño que debe mantenerse en todas las

presentaciones de pantalla.

Los mecanismos de entrada deben restringirse a un conjunto limitado

que se utilice de manera consistente en toda la aplicación.

Los mecanismos para ir de una tarea a otra deben definirse e implementarse de una manera

consistente.

PR

INC

IPIO

S D

E D

ISE

ÑO

QU

E A

YU

DA

N A

C

ON

ST

RU

IR U

NA

IN

TE

RF

AZ

C

ON

SIS

TE

NT

E

Permitir que el usuario incluya la tarea actual en un

contexto que tenga algún significado.

Es importante proporcionar indicadores que permitan al usuario conocer el contexto del trabajo que realiza. Por ejemplo, títulos de ventana, íconos gráficos, códigos de color consistentes.

Mantener la consistencia en toda una familia de

aplicaciones.

Un conjunto de aplicaciones debe implementar las mismas reglas de diseño para mantener la consistencia en todas las interacciones.

Si modelos interactivos anteriores han generado

expectativas en el usuario, no hacer cambios a menos que haya razones inexcusables.

Una vez que una secuencia interactiva se ha convertido en un estándar, como el empleo de alt-G para guardar un archivo, el usuario espera esto en todas las aplicaciones que encuentre. Un cambio crearía confusión.