INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces...

39
Tema 3. Parte V Tema 3. Parte V Diseño de Interfaces Hombre Diseño de Interfaces Hombre - - Máquina (HMI) Máquina (HMI) Alfredo Rosado INGENIERÍA AMBIENTAL INGENIERÍA AMBIENTAL Máster Universitario Máster Universitario

Transcript of INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces...

Page 1: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

Tema 3. Parte V Tema 3. Parte V Diseño de Interfaces HombreDiseño de Interfaces Hombre--Máquina (HMI)Máquina (HMI)

Alfredo Rosado

INGENIERÍA AMBIENTALINGENIERÍA AMBIENTAL

Máster UniversitarioMáster Universitario

Page 2: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

�� Tipos de Interfaces gráficasTipos de Interfaces gráficas

�� Teorías y modelos de alto nivelTeorías y modelos de alto nivel

�� Principios y reglas: diálogos y Principios y reglas: diálogos y

prevención de errores.prevención de errores.

�� Principios generales:Principios generales:

� Guías, estándares, métodos de prototipos y pruebas

Objetivos del TemaObjetivos del Tema

Page 3: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Interfaces grInterfaces grááficasficas

�� Los tres estilos más comunes de interfaces Los tres estilos más comunes de interfaces gráficas hombre computadora son: gráficas hombre computadora son: � WYSIWYG What you see is what you get, Lo que tú ves es lo

que puedes conseguir

� Manipulación directa e Interfaces de usuario basados en iconos.

� Se mencionarán brevemente algunos otros estilos de interacción como: menú de selección, lenguaje de comandos, lenguaje natural, diálogo de pregunta-respuesta.

�� Estos estilos de interacción no son esencialmente gráficos peroEstos estilos de interacción no son esencialmente gráficos peropueden ser utilizados en aplicaciones gráficas.pueden ser utilizados en aplicaciones gráficas.

Page 4: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Lo que tLo que túú ves es lo que puedes ves es lo que puedes conseguir (WYSIWYG)conseguir (WYSIWYG)

�� En una interfaz WYSIWYG la En una interfaz WYSIWYG la representación gráfica con la cual los representación gráfica con la cual los usuarios interactúan en la pantalla es usuarios interactúan en la pantalla es esencialmente la misma imagen creada esencialmente la misma imagen creada por la aplicación. Muchas de la por la aplicación. Muchas de la aplicaciones gráficas tienen algún aplicaciones gráficas tienen algún componente WYSIWYG. componente WYSIWYG.

�� Existen muchos editores que tienen Existen muchos editores que tienen interfaces WYSIWYG; principalmente interfaces WYSIWYG; principalmente aquellas aplicaciones gráficas. Lo que aquellas aplicaciones gráficas. Lo que nosotros vemos en la pantalla es el nosotros vemos en la pantalla es el resultado de nuestra aplicación en papel. resultado de nuestra aplicación en papel.

Page 5: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

ManipulaciManipulacióón directan directa

�� La interfaz gráfica de manipulación directa es aquella en la cuaLa interfaz gráfica de manipulación directa es aquella en la cual a l a través de acciones físicas los usuarios manipulan los objetos través de acciones físicas los usuarios manipulan los objetos gráficos (son hechos de acuerdo con entidades y experiencias gráficos (son hechos de acuerdo con entidades y experiencias del mundo real. Por ejemplo: metáforas del mundo real) en la del mundo real. Por ejemplo: metáforas del mundo real) en la pantalla. Estas acciones son ejecutadas comúnmente utilizando elpantalla. Estas acciones son ejecutadas comúnmente utilizando elratón. ratón.

�� ShneidermanShneiderman [1992] propuso en su terminología los siguientes [1992] propuso en su terminología los siguientes principios para describir la manipulación directa:principios para describir la manipulación directa:

� Continua representación de los objetos y acciones de interés.

� Acciones físicas o presión de botones etiquetados en lugar de sintaxis muy compleja.

� Rápidas y reversibles operaciones que afectan a los objetos de interés son inmediatamente visibles.

� Con el uso de manipulación directa se puede evitar el uso de sintaxis compleja, por lo tanto, se reducen los errores cometidos con el uso del mismo, ayudando a los novatos a aprender más rápido la funcionalidad básica del sistema. Por ejemplo, para borrar un archivo dentro de la interfaz de Macintosh se selecciona visualmente el archivo y se arrastra hasta el bote de basura.

Page 6: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

ManipulaciManipulacióón directan directa

�� Comúnmente manipulación directa es utilizado con otros estilos dComúnmente manipulación directa es utilizado con otros estilos de e interfaces como la ejecución de comandos por medio de menús o pointerfaces como la ejecución de comandos por medio de menús o por r el teclado permitiendo una mejor utilización de las opciones.el teclado permitiendo una mejor utilización de las opciones.

�� Manipulación directa es un estilo de interfaz muy fácil de aprenManipulación directa es un estilo de interfaz muy fácil de aprender y der y muy poderosa, muchas veces es presentada como el mejor estilo demuy poderosa, muchas veces es presentada como el mejor estilo deinterfaz, pero sin embargo tiene algunas limitaciones.interfaz, pero sin embargo tiene algunas limitaciones.

�� La exactitud dentro de la manipulación es dejada mucha veces a lLa exactitud dentro de la manipulación es dejada mucha veces a la a habilidad que tenga el usuario con el uso del ratón (eje. ajustahabilidad que tenga el usuario con el uso del ratón (eje. ajustar botón r botón movible en un valor especificado).movible en un valor especificado).

�� Requiere de mucho conocimiento del mundo real (eje. es necesarioRequiere de mucho conocimiento del mundo real (eje. es necesarioque una persona sepa utilizar una calculadora común y corriente que una persona sepa utilizar una calculadora común y corriente para que se le facilite el uso de la que está representada en lapara que se le facilite el uso de la que está representada en lapantalla). pantalla).

�� La velocidad en usuario experimentados es reducida si el usuarioLa velocidad en usuario experimentados es reducida si el usuario es es forzado a utilizar solo manipulación directa cuando otro tipo deforzado a utilizar solo manipulación directa cuando otro tipo deinteracción es más rápida ( p. eje. para borrar todos los archiinteracción es más rápida ( p. eje. para borrar todos los archivos con vos con extensión “txt” extensión “txt” --en una carpetaen una carpeta-- probablemente se requiera probablemente se requiera encontrarlos visualmente dentro de muchos iconos y arrastrarlosencontrarlos visualmente dentro de muchos iconos y arrastrarloshasta el bote de basura siendo más fácil borrarlos como en DOS chasta el bote de basura siendo más fácil borrarlos como en DOS con on un comando “del *.txt”). un comando “del *.txt”).

Page 7: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Interfaces de usuario basados en Interfaces de usuario basados en iconosiconos

�� Este estilo de interfaz se basa en gráficas (iconos) Este estilo de interfaz se basa en gráficas (iconos) para representar un objeto, una acción, una para representar un objeto, una acción, una propiedad o algún otro concepto. No siempre el uso propiedad o algún otro concepto. No siempre el uso de iconos es mejor para representar algún concepto de iconos es mejor para representar algún concepto o acción, muchas veces es mejor utilizar texto para o acción, muchas veces es mejor utilizar texto para representar algo. representar algo.

�� No se puede decir que el icono sea mejor que el No se puede decir que el icono sea mejor que el texto o viceversa, pero sí se puede decir que los texto o viceversa, pero sí se puede decir que los iconos tienen las siguientes ventajas:iconos tienen las siguientes ventajas:

�� iconos bien diseñados pueden reconocerse más iconos bien diseñados pueden reconocerse más rápido que las palabras, toman menos espacio en la rápido que las palabras, toman menos espacio en la pantalla, si se toma mucho cuidado en el diseño de pantalla, si se toma mucho cuidado en el diseño de iconos, puede ser un lenguaje independiente, iconos, puede ser un lenguaje independiente, permitiendo a la interfaz ser usada en diferentes permitiendo a la interfaz ser usada en diferentes países.países.

Page 8: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Otros estilos de interacciOtros estilos de interaccióónn

�� Los tres estilos mostrados Los tres estilos mostrados

anteriormente pueden ser llamados anteriormente pueden ser llamados

“basado en gráficos”. “basado en gráficos”.

�� Existen otras formas de interacción Existen otras formas de interacción

que no son “basados en gráficos”:que no son “basados en gráficos”:

� menú de selección, � lenguaje de comandos, � lenguaje natural, � diálogo de pregunta respuesta

Page 9: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

MenMenúú de seleccide seleccióónn

� Los menús pueden ser usados en aplicaciones gráficas y no gráficas.

� La principal ventaja que tienen es que cuando se está trabajando, con solo ver texto o un icono en un menú se puede reconocer la palabra y significado y así recordar su función ( al ver la palabra “abrir” en el menú archivo, se puede abrir un documento) a diferencia de tener que recordar toda la instrucción con su sintaxis. Este tipo de interacción es muy atractivo para nuevos usuarios ya que no tienen que memorizar muchos comandos ni sintaxis.

Page 10: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

El lenguaje de comandosEl lenguaje de comandos

El lenguaje de comandos es la tradicional manera de interactuar con la computadora. Con esta técnica es fácil de extender (solamente hay que agregar un nuevo comando). Es bastante rápida de usar para usuarios con experiencia. Los errores son más probables con lenguaje de comandos que con menús.

Por ejemplo:

La siguiente sentencia (comando del sistema operativo DOS) borra el archivo datos.dat del disco.

C:\>delete datos.dat

Page 11: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

El lenguaje naturalEl lenguaje natural

El lenguaje natural frecuentemente es propuesto como el último objetivo para los sistemas interactivos.

Si la computadora es capaz de entender nuestros comandos en inglés (hablados o escritos) cualquier persona puede ser capaz de usarlos. Sin embargo, el reconocer la voz implica muchos problemas así como el escribir largas sentencias es muy tedioso. También, como el lenguaje natural no limita el conjunto de comandos que debe manipular este puede ser bastante ambiguo

Page 12: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

DiDiáálogo de preguntalogo de pregunta--respuestarespuesta

En el diálogo de pregunta-respuesta la computadora inicia haciendo una pregunta y el usuario responde a esta por medio del teclado. Si el conjunto de respuestas es pequeño se puede dar la alternativa de seleccionar de un menú la opción en lugar de teclearla. Un problema de este tipo de interacción es la incapacidad para ir algunos pasos atrás para corregir una respuesta, mayor aún, solamente se tienen el contexto de la pregunta para contestarla.Por ejemplo:¿Cual es la dirección del empleado?Aquí no se sabe si hay que incluir, la colonia o no.

Page 13: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

�� Vienen de la psicología y pedagogíaVienen de la psicología y pedagogía

� Buscan describir los factores que influyen el buen o mal resultado de un diseño

�� ¿Cómo reacciona un ser humano ante ¿Cómo reacciona un ser humano ante

una máquina?una máquina?

TeorTeoríías y modelos de alto nivelas y modelos de alto nivel

Page 14: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

TEORTEORÍÍA DE LOS CUATROS NIVELESA DE LOS CUATROS NIVELES

La persona razona en cuatro niveles, es decir, tienen cuatrLa persona razona en cuatro niveles, es decir, tienen cuatro o

niveles de abstracción:niveles de abstracción:

Estos niveles de abstracción son: Estos niveles de abstracción son:

1.Léxico.1.Léxico.-- Es el lenguaje que hablamos. Ejemplo: A, Es el lenguaje que hablamos. Ejemplo: A, B,CB,C, etc. , etc.

Aprendemos que el símbolo A es una "A" Aprendemos que el símbolo A es una "A"

2.Sintáctico.2.Sintáctico.-- Combinar para hacer palabras. Ejemplo:Combinar para hacer palabras. Ejemplo:

casa, Avión, etc. Combinamos letras para hacer palabras. casa, Avión, etc. Combinamos letras para hacer palabras.

3.Semántico.3.Semántico.-- Es el significado de las palabras. Ejemplo:Es el significado de las palabras. Ejemplo:

casa.casa.-- Lugar donde viven las personas. Lugar donde viven las personas.

4.Conceptual.4.Conceptual.-- Es la idea, lo que tengo en mente. Ejemplo: Es la idea, lo que tengo en mente. Ejemplo:

Esa casa es muy bonita. Esa casa es muy bonita.

Page 15: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

TEORTEORÍÍA DE LOS CUATROS NIVELESA DE LOS CUATROS NIVELES

En nivel de interfaces lo podemos ver de la siguiente forma:En nivel de interfaces lo podemos ver de la siguiente forma:

4. Conceptual.4. Conceptual.-- Es la idea del sistema como un todo (Un Es la idea del sistema como un todo (Un editoreditor

de texto, un editor de gráficos, etc.) de texto, un editor de gráficos, etc.)

3. Semántico.3. Semántico.-- Es el significado de: Es el significado de:

Pantallas Pantallas

Instrucciones Instrucciones

2. Sintáctico.2. Sintáctico.-- Es la unidad de: Es la unidad de:

Comandos Comandos

Secuencias Secuencias

1. Léxico.1. Léxico.-- Son las dependencias con la computadora Son las dependencias con la computadora

Este modelo está estrechamente relacionado con laEste modelo está estrechamente relacionado con la

programación TOPprogramación TOP--DOWN.DOWN.

Page 16: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Modelo GOMSModelo GOMS

�� Este modelo, propuesto por Este modelo, propuesto por CardCard, Moran y , Moran y NewellNewell, se basa , se basa

en la clasificación de 4 niveles, de donde toma su nombre: en la clasificación de 4 niveles, de donde toma su nombre:

�� MetasMetas ((GGoalsoals) del usuario ) del usuario

�� OperadoresOperadores ((OOperatorsperators) con los que cuenta la interfaz ) con los que cuenta la interfaz

para dar servicio al usuario para dar servicio al usuario

�� MétodosMétodos ((MMethodsethods), que indican cómo combinar los ), que indican cómo combinar los

operadores para conseguir las metas operadores para conseguir las metas

�� Reglas de selecciónReglas de selección ((SSelectionelection Rules), que indican cómo Rules), que indican cómo

hace el usuario para aplicar los operadores.hace el usuario para aplicar los operadores.

Page 17: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Interfaces gráficas con el usuario

Interfaces grInterfaces grááficas con el ficas con el usuariousuario

�� PrecursoresPrecursores

� PARC XEROX� Lisa/Macintosh

� GEOS

Page 18: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Interfaces gráficas con el usuario

Interfaces grInterfaces grááficas con el ficas con el usuariousuario

�� GUI extendidos en el mercado.GUI extendidos en el mercado.

� Microsoft Windows. (3.11, 95 y NT)

� Macintosh.� X Windows - Motif.

� OS/2.� Open Look.

Page 19: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Principales elementos de control comunes

Principales elementos de Principales elementos de control comunes control comunes

�� Ventanas.Ventanas.

�� Iconos.Iconos.

�� Menús.Menús.

�� Diálogos.Diálogos.

�� Botones de acción.Botones de acción.

� Con icono o sin él.

Page 20: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Principales elementos de control comunes

Principales elementos de Principales elementos de control comunes control comunes

�� Botones de radio.Botones de radio.

�� Cuadros con marcas (Cuadros con marcas (CheckCheck boxesboxes))

�� Campos de edición.Campos de edición.

�� Apuntador del ratón.Apuntador del ratón.

�� Barras de desplazamiento.Barras de desplazamiento.

�� Listas de selección.Listas de selección.

Page 21: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Principales elementos de control no comunes

Principales elementos de Principales elementos de control no comunescontrol no comunes

�� Barras de herramientas.Barras de herramientas.

�� Diálogos en Carpetas (Diálogos en Carpetas (TabbedTabbed dialogsdialogs))

�� Menú contextual.Menú contextual.

�� Ayuda en línea.Ayuda en línea.

�� Campos de selección/edición (Combo Campos de selección/edición (Combo

boxesboxes))

Page 22: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Principales aplicaciones comunes

Principales aplicaciones Principales aplicaciones comunescomunes

�� Panel de control.Panel de control.

�� Administrador de archivos/programas = Administrador de archivos/programas =

""ShellShell""

�� Administrador de impresión = "Administrador de impresión = "SpoolerSpooler""

�� Calculadora.Calculadora.

Page 23: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Guías y estándaresGuGuíías y estas y estáándaresndares

�� Existen de acuerdo al GUI subyacenteExisten de acuerdo al GUI subyacente

�� Ejemplos:Ejemplos:

� Libros de Guías Mac� Guías Windows

Page 24: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Diseño de diálogosDiseDiseñño de dio de diáálogoslogos

8 “reglas de oro”8 “reglas de oro”

� Consistencia

� Atajos para usuarios frecuentes� Retroalimentación

� Diálogos Cerrados

Page 25: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

INTERFAZ CON EL USUARIOINTERFAZ CON EL USUARIO

La tarea de un equipo de desarrollo de La tarea de un equipo de desarrollo de

software es imaginárselas para ocultarle software es imaginárselas para ocultarle

al usuario del sistema lasal usuario del sistema las

complejidades del mismo.complejidades del mismo.

Page 26: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

OBJETIVOS DEL SISTEMAOBJETIVOS DEL SISTEMA

�� FUNCIONALIDAD: Que el software haga el trabajo para elFUNCIONALIDAD: Que el software haga el trabajo para elque fue creado.que fue creado.�� CONFIABILIDAD: Que lo haga bien.CONFIABILIDAD: Que lo haga bien.�� DISPONIBILIDAD: Que todos los que quieran utilizar elDISPONIBILIDAD: Que todos los que quieran utilizar elsistema no tengan problemas.sistema no tengan problemas.�� SEGURIDAD: La persona que no esté autorizada no debeSEGURIDAD: La persona que no esté autorizada no debetener acceso al sistema o a parte de él.tener acceso al sistema o a parte de él.�� INTEGRIDAD: Que la información sea verídicaINTEGRIDAD: Que la información sea verídicae igual en todos lados.e igual en todos lados.�� ESTANDARIZACIÓN: Las características de laESTANDARIZACIÓN: Las características de lainterfaz de usuario deben ser comunes entre múltiplesinterfaz de usuario deben ser comunes entre múltiplesaplicaciones. aplicaciones. �� INTEGRACIÓN: Que todos lo módulos sean de fácil INTEGRACIÓN: Que todos lo módulos sean de fácil acceso.acceso.

Page 27: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

OBJETIVOS DEL SISTEMAOBJETIVOS DEL SISTEMA

�� CONSISTENCIA: Que el apoyo visual sea igual en todas lasCONSISTENCIA: Que el apoyo visual sea igual en todas las

pantallas (pantallas (ej.ej. ventanas similares). También se refiere a laventanas similares). También se refiere a la

terminología y los comandos usados en la interfaz.terminología y los comandos usados en la interfaz.

PORTABILIDAD: Que el paquete sea reconocido por laPORTABILIDAD: Que el paquete sea reconocido por la

mayoría de los sistemas operativos.mayoría de los sistemas operativos.

CALENDARIZACIÓN: Respetar fechas límitesCALENDARIZACIÓN: Respetar fechas límites

para la culminación del proyecto.para la culminación del proyecto.

PRESUPUESTO: No rebasar el presupuesto acordado.(el 70% delPRESUPUESTO: No rebasar el presupuesto acordado.(el 70% delcosto del software se gasta en el mantenimiento).costo del software se gasta en el mantenimiento).

Page 28: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

8 “reglas de oro”8 “reglas de oro”** Consistencia:Consistencia:

Debe ser congruente la terminologDebe ser congruente la terminologíía, y las gua, y las guíías seguidas, para evitar confusias seguidas, para evitar confusióón al usuario. Si n al usuario. Si por ejemplo, en el mismo contexto apareciera en un lugar "archivpor ejemplo, en el mismo contexto apareciera en un lugar "archivo" y en otro "documento", o" y en otro "documento", esto causaresto causaríía duda en el usuario, sobre el significado de los mismos.a duda en el usuario, sobre el significado de los mismos.

** Atajos para usuarios frecuentes:Atajos para usuarios frecuentes:

Los usuarios casuales pueden considerar buena la interfaz, pero Los usuarios casuales pueden considerar buena la interfaz, pero cuando un usuario cuando un usuario frecuentemente hace uso del difrecuentemente hace uso del diáálogo, requerirlogo, requeriráá de herramientas para agilizar su trabajo; tales de herramientas para agilizar su trabajo; tales como el uso de atajos mediante el teclado como el uso de atajos mediante el teclado ((shortcutsshortcuts, , acceleratorsaccelerators oo hothot--keyskeys).). Recordemos que Recordemos que entre entre loslos objetivosobjetivos dede unauna buenabuena interfazinterfaz estestáánn reducir el tiempo de respuesta y aumentar la reducir el tiempo de respuesta y aumentar la productividad.productividad.

** RetroalimentaciRetroalimentacióón:n:

Toda acción del usuario, debe mostrar sus efectos; esto para evitar que el usuario dude de que haya

ocurrido la acción. Esto se logra mediante mensajes, iconos, cambios en la figura que representa

el ratón, cambios en la pantalla, o sonido, entre otros métodos.

Por ejemplo, siempre debe haber un indicador de avance, un relojPor ejemplo, siempre debe haber un indicador de avance, un reloj de arena o algde arena o algúún elemento n elemento similar, cuando se estsimilar, cuando se estáá realizando un proceso largo. De los dos elementos mencionados, realizando un proceso largo. De los dos elementos mencionados, serseráámejor un indicador de avance, pues le da mayor informacimejor un indicador de avance, pues le da mayor informacióón al usuario y da expectativas n al usuario y da expectativas apropiadas.apropiadas.

DiseDiseñño de dio de diáálogoslogos

Page 29: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

** DiDiáálogos Cerrados:logos Cerrados:

Se dice que es cerrado y no abierto un diSe dice que es cerrado y no abierto un diáálogo, cuando le da una sensacilogo, cuando le da una sensacióón de avance al usuario, n de avance al usuario, tal que no siente que falttal que no siente que faltóó algo dentro del dialgo dentro del diáálogo; que el dilogo; que el diáálogo le dio toda la informacilogo le dio toda la informacióón n necesaria al programa.necesaria al programa.

** Manejo simple de errores:Manejo simple de errores:

El usuario requiere la informaciEl usuario requiere la informacióón suficiente para que un error tenga el menor impacto posible; n suficiente para que un error tenga el menor impacto posible; muchas veces, al ocurrir un error por parte del usuario o del simuchas veces, al ocurrir un error por parte del usuario o del sistema, el usuario no tiene los stema, el usuario no tiene los elementos para recuperarse.elementos para recuperarse.

** Acciones reversibles:Acciones reversibles:

Sobre todo los usuarios novatos, suelen tener miedo o ansiedad aSobre todo los usuarios novatos, suelen tener miedo o ansiedad al enfrentarse a la interfaz. Uno l enfrentarse a la interfaz. Uno de los elementos que permiten darle confianza al usuario, es sabde los elementos que permiten darle confianza al usuario, es saber que siempre tiene una forma er que siempre tiene una forma de recuperar el trabajo que puede perder por un error. de recuperar el trabajo que puede perder por un error.

** SensaciSensacióón de control:n de control:

A veces el ordenador debe generar una acciA veces el ordenador debe generar una accióón; sin embargo, en la generalidad de las ocasiones, n; sin embargo, en la generalidad de las ocasiones, no debe ocurrir nada si no es porque el usuario se lo "pide" al no debe ocurrir nada si no es porque el usuario se lo "pide" al ordenador. El usuario debe sentir ordenador. El usuario debe sentir que tiene control sobre el sistema, no sentirse manejado, para pque tiene control sobre el sistema, no sentirse manejado, para poder utilizar al moder utilizar al mááximo al sistema, ximo al sistema, y confiar en y confiar en éél para conseguir sus fines.l para conseguir sus fines.

** Carga a la memoria de corto plazo:Carga a la memoria de corto plazo:

La memoria de corto plazo es muy limitada; en promedio, podemos La memoria de corto plazo es muy limitada; en promedio, podemos manejar smanejar sóólo 7 elementos lo 7 elementos ((itemsitems) a la vez. Si saturamos al usuario de informaci) a la vez. Si saturamos al usuario de informacióón, n, yy lele requerimos que recuerde muchos requerimos que recuerde muchos elementos mientras trabaja, le hacemos melementos mientras trabaja, le hacemos máás complicado el uso del sistema. El enfoque contrario s complicado el uso del sistema. El enfoque contrario es llevarlo paso a paso; si le dejamos manejar muy pocos elementes llevarlo paso a paso; si le dejamos manejar muy pocos elementos, se hace lento. os, se hace lento.

DiseDiseñño de dio de diáálogoslogos

Page 30: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

�� Objetivo:Objetivo:� Mejorar la productividad, reduciendo los costos

debidos a errores.

�� Acciones:Acciones:

-- Mensajes de error claros y entendibles por Mensajes de error claros y entendibles por cualquier usuariocualquier usuario

-- Ayuda en línea, sensitiva a contexto. Ayuda en línea, sensitiva a contexto.

-- Prevenir errores.Prevenir errores.

Manejo de erroresManejo de errores

Page 31: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

�� Automatizar los procesos que causan Automatizar los procesos que causan

fallas comunesfallas comunes

� Ejemplo: cerrado de paréntesis

�� Avisar de un estado inconsistente, Avisar de un estado inconsistente,

cuando no es posible lo anterior. cuando no es posible lo anterior.

� Ejemplo: syntax error

TTéécnicas de prevencicnicas de prevencióón de erroresn de errores

Page 32: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

�� Creación de macros (Creación de macros (metacomandosmetacomandos))

� Ejemplos: si hay 7 pasos que requieren una

secuencia estricta, usar un sólo botón o

comando que englobe a los 7.

�� Corrección automática de comandos.Corrección automática de comandos.

� Ejemplo: autocorrección de palabras en Word.

TTéécnicas de prevencicnicas de prevencióón de erroresn de errores

Page 33: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

�� Simplificación de comandos.Simplificación de comandos.

� Facilita al usuario el desempeño correcto

(reduce la carga de aprendizaje)

�� Teclas con asociaciones fáciles a los Teclas con asociaciones fáciles a los

comandos.comandos.

TTéécnicas de prevencicnicas de prevencióón de erroresn de errores

Page 34: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Objetivos: (Objetivos: (SmithSmith y y PosierPosier) )

** Consistencia. En terminologConsistencia. En terminologíía asa asíí como en como en

formato. formato.

** AsimilaciAsimilacióón eficiente de la informacin eficiente de la informacióón por n por

parte del usuario. parte del usuario.

** Minimizar la carga de la memoria del usuario. Minimizar la carga de la memoria del usuario.

** Compatibilidad entre el despliegue y la entrada. Compatibilidad entre el despliegue y la entrada.

** Flexibilidad para el usuario, en las formas de Flexibilidad para el usuario, en las formas de

despliegue. despliegue.

GuGuíías para el despliegue de as para el despliegue de informaciinformacióónn

Page 35: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

� Cada proyecto o aplicación debe establecer un manual o especificación de estándares, que incluye los formatos y terminología usados.

� Conseguir la atención del usuario.

Notas respecto a las guNotas respecto a las guííasas

Page 36: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

�� La información importante o excepcional debe resaltarse:La información importante o excepcional debe resaltarse:

� Intensidad ((hasta dos niveles)

� Marcado

� Subrayado

� Encuadrado

� Apuntador o carácter especial

� Tamaño (hasta cuatro tamaños)

� Fuente de texto (hasta tres)

� Color (hasta 4 básicos)

� Vídeo inverso y parpadeo

� Sonido

Conseguir la atenciConseguir la atencióónn

Page 37: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Objetivos Objetivos ((SmithSmith y y MosierMosier) )

** Consistencia entre los distintos puntos de entrada de datosConsistencia entre los distintos puntos de entrada de datos

** Minimizar las acciones de entrada por parte del usuario Minimizar las acciones de entrada por parte del usuario

** Minimizar la carga de la memoria del usuario Minimizar la carga de la memoria del usuario

** Compatibilidad entre el despliegue y la entrada Compatibilidad entre el despliegue y la entrada

** Flexibilidad para el usuario, en las formas de entrada.Flexibilidad para el usuario, en las formas de entrada.

GuGuíías para la entrada de datosas para la entrada de datos

Page 38: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Objetivo primordial: Objetivo primordial:

** Que el usuario experimente con la interfaz, aQue el usuario experimente con la interfaz, aúún n

sin funcionalidad sin funcionalidad

** Descubrir la reacciDescubrir la reaccióón del usuario al sistema n del usuario al sistema

CaracterCaracteríísticas sticas

** Deben darse en una etapa temprana del ciclo de Deben darse en una etapa temprana del ciclo de

desarrollo. desarrollo.

PrototiposPrototipos

Page 39: INGENIERÍA AMBIENTAL Tema 3. Parte V Diseño de Interfaces …rosado/courses/CINS/Tema3_Dise_HMI.pdf · 2006. 11. 7. · Botones de radio. Cuadros con marcas ( Check boxes ) Campos

IngenierIngenieríía Ambiental. Control, instrumentacia Ambiental. Control, instrumentacióón e Instalaciones. Tema 3.n e Instalaciones. Tema 3.

UniversitatUniversitat de de ValValèènciancia. M. Mááster Universitario.ster Universitario.

Objetivos: Objetivos:

** Comprobar los resultados de la Comprobar los resultados de la

interfaz interfaz

** Control de calidad Control de calidad

** ValidaciValidacióón de teorn de teoríías y guas y guíías as

Pruebas de aceptaciPruebas de aceptacióón n