Interfaz Gráfica de Usuario

1. 1. Permisos (Affordance) 2. Restricciones 3. Mapeo (mapping) 4. Modelos conceptuales 5. Visibilidad 6. Retroalimentación (feedback) GUI - Características (Aspectos tecnológicos)

2. 1. Permisos (Affordance) De algunos objeto percibimos unas propiedades que determinan cómo debe usarse. Un botón es para pulsarse, el menú de un restaurante nos permite elegir, el dial de la radio lo giramos para sintonizar una emisora. GUI - Características (Aspectos tecnológicos)

3. 2. Restricciones Factores físicos, semánticos, culturales o lógicos nos permiten percibir de un objeto, sólo con verlo cómo no tenemos que utilizarlo. Restricción cultural, o aprendida, sería la utilización de las barras de scroll, el texto sube cuando pulso el botón inferior. GUI - Características (Aspectos tecnológicos)

4. 3. Mapeo (mapping) Correspondencia entre la acción sobre un control y el efecto que produce. Mapa QDQ con flechas para desplazamiento. GUI - Características (Aspectos tecnológicos)

5. 4. Modelos conceptuales Son los modelos mentales que un usuario se hace de un sistema que lo ayudan a comprender su funcionamiento, predecir los efectos de sus acciones y entender los resultados. El solitario es un buen ejemplo de modelo conceptual, Nos ayudsa a crear este modelo otras fuentes de información como los permisos ( affordances ), las restricciones y los mapeos . GUI - Características (Aspectos tecnológicos)

6. 5. Visibilidad La visibilidad o la invisibilidad de las acciones que podemos realizar y los objetos con los que podemos interactuar harán que el usuario se construya un modelo conceptual determinado del sistema con el que está interactuando. El color de los estados del menú indica que acciones podemos realizar y cuales no Hay distintas maneras de mostrar al usuario el texto oculto: La posición del indicador del scroll, la numeración de la páginas o las flechas indican que hay mas pero no cuanto mas. GUI - Características (Aspectos tecnológicos)

7. Retroalimentación (feedback) La retroalimentación es el fenómeno que se produce cuando el usuario percibe el resultado de sus acciones y que influye inmediatamente en las decisiones que está tomando. Indicador de progreso Los diferentes estados en la barra de tareas refuerzan las acciones GUI - Características (Aspectos tecnológicos)

8. 1. Entrada de órdenes 2. Diálogos pregunta-respuesta 3. Sistemas basados en formularios 4. Sistema basado en Menús 5. Lenguaje natural 6. Sistema inductivo 7. Sistemas de manipulación directa Sistemas de interacción GUI - Características (Interacción)

9. 1. Entrada de órdenes Mecanismo de interacción que nos permite introducir instrucciones directamente en el ordenador mediante: teclas de función, uso de abreviaciones, combinaciones de teclas y caracteres. En este tipo de interfaz no podemos elaborar un modelo mental del sistema y, por lo tanto, no podemos prever cómo responderá a nuestras acciones. Si a la dificultad de creación de un modelo mental le añadimos el esfuerzo memorístico que supone recordar las órdenes disponibles y su sintaxis (a menudo arbitraria), nos daremos cuenta de que antes de la utilización del sistema, hay que pasar un periodo de aprendizaje, y en su utilización muchas veces usaremos el ensayo-error. Por otro lado, permite al usuario experto una velocidad de interacción en determinados casos muy superior a los demás estilos de interacción. Pantalla de conexión TelNet Ventana del sistema GUI - Características (Interacción)

10. 2. Diálogos pregunta-respuesta Este tipo de interacción con el ordenador es muy básica, cada interacción consiste en una pregunta (planteada por el ordenador), un conjunto de posibles respuestas (propuestas por el ordenador) y una respuesta (elegida por el usuario). Ejemplo de sistemas interactivos votación electrónica GUI - Características (Interacción)

11. Diálogos pregunta-respuesta Ejemplo sin validez legal de sistema de votación por Internet Referendum 2005 Estos sistemas son apropiados para usuarios que usan el sistema por primera vez, y con un número pequeño de posibles respuestas. Venta automática de entradas, cajeros automáticos y puntos de información. GUI - Características (Interacción)

12. 3. Sistemas basados en formularios Carga de información en una base de datos de un archivo documental Este estilo es apropiado en aplicaciones en las que se tenga que introducir una gran cantidad de datos y no se requiera que los usuarios tengan un gran conocimiento técnico, tan solo un dominio aceptable del teclado. GUI - Características (Interacción)

13. 3. Sistemas basados en formularios Formulario para recoger opiniones en un Web personal Los formularios se corresponden con objetos del mundo real, los formularios de papel, que todos conocemos. GUI - Características (Interacción)

14. 4. Sistema basado en Menús Menús basado en texto del setup de la bios. Todas las posibles acciones que podemos realizar están disponibles agrupadas por un criterio determinado (alfabético, funcional, etc.). El ser humano reconoce mejor de lo que recuerda . Esta estructuración de las opciones posibles descompone una interacción compleja en una serie de pequeños pasos y facilita el proceso de decisión. Al final tendremos que limitarnos a seleccionar en cada momento la opción de menú que nos interesa, hecho que minimiza la entrada de instrucciones por teclado, reduce al mínimo la posibilidad de errores y aumenta la eficiencia. GUI - Características (Interacción)

15. Sistema basado en Menús Menú de persiana Photoshop Persiana ( pull-down ): seleccionando una etiqueta se despliegan los submenús asociados. Emergentes ( pop-up ): seleccionando un objeto (normalmente con el botón derecho del ratón, o con la ayuda de alguna tecla de función) se visualiza el menú asociado. Menú de árbol, el objeto seleccionado se abre o cierra (+ o -), desplegando las opciones que de el depende, y así sucesivamente como las ramas de un árbol. Menú emergente Flash Menú de árbol MSDN GUI - Características (Interacción)

16. 5. Lenguaje natural Uso del lenguaje natural, comunicarte con el ordenador tal y como hablamos, para interactuar, los teléfonos móviles aceptan la marcación por voz y hay software de reconocimiento del habla para contactar con una empresa (servidores vocales), para escribir o transmitir órdenes a un programa. Ventana de ayuda del Word, acepta preguntas empleando el lenguaje natural. Programa Dragon NaturallySpeaking . Escribe al dictado. Maria, asistente de artificial solutions, permite usar el lenguaje natural, para buscar en su Web. GUI - Características (Interacción)

17. 6. Sistema inductivo Reducir el número de cosas que el usuario debe hacer en cada paso, el nombre inductivo significa dirigir o mover por influencia o persuasión. Contesta a la respuesta: ¿Qué debo hacer ahora? (en cada página una tarea sencilla) ¿Dónde iré después y cuántos pasos me quedan para terminar? (Conocer el estado de la tarea y posibilitar enlaces a otras tareas secundarias). Definición de sitio Web con Dreamweaver MX. GUI - Características (Interacción)

18. 7. Sistemas de manipulación directa Los sistemas de manipulación directa tienen iconos que representan objetos, ventanas que representan vistas de objetos, menús que contienen acciones sobre los objetos, y apuntadores para seleccionarlos. Las características comunes a estos sistemas son: Visibilidad de los objetos de interés. Reversibilidad de las acciones. Sustitución de órdenes complejas por manipulación de objetos . Interfaz del SO de LISA (Apple, 1983) GUI - Características (Interacción)

19. Diseño gráfico 1. El principio de agrupamiento La mayor parte de la interacción con un ordenador la haremos de manera visual, las decisiones sobre la tipografía, la distribución de la información en la pantalla o de los colores, no sólo harán que la interfaz sea más o menos atractiva, sino que la harán más o menos usable y determinarán su éxito. 2. El principio de visibilidad 3. El principio de la consistencia 4. El principio de economía del diseño 5. El principio del color como suplemento 6. El principio de reducción del desorden GUI - Características (Diseño gráfico)

20. 1. El principio de agrupamiento Distribución espacial de Lanetro: cabecera, Herramientas, menú, contenido y destacados (consulta 23/2/2005) Organizad el espacio visible en bloques separados con opciones similares y con un título que las distinga. El principio de agrupamiento, por una parte, ayuda al usuario a encontrar la información que necesita, y por otra, lo ayuda a formarse un modelo conceptual del funcionamiento del programa. GUI - Características (Diseño gráfico)

21. 2. El principio de visibilidad Menú comprimido de Word y barra de menús con las acciones más utilizadas en dreamweaver. Los controles usados con frecuencia tendrán que ser visibles y de fácil acceso. Análogamente tendrán que diseñarse sistemas para esconder los menos utilizados. Acceso a programas más usados desde XP GUI - Características (Diseño gráfico)

22. 3. El principio de la consistencia Ventanas en OS X y W XP Diseñar unos modelos de pantalla y adaptarlo a las diferentes partes de la aplicación. El usuario espera encontrar las opciones de navegación en el mismo sitio y en el mismo orden, independientemente de la página donde estemos. GUI - Características (Diseño gráfico)

23. 4. El principio de economía del diseño El popular buscador Google debe gran parte de su éxito a la simplicidad de su diseño, sin ningún elemento superfluo. Omitid cualquier elemento que no aporte ninguna información. La pantalla de un ordenador es un espacio limitado, de la misma manera que lo es la capacidad de interpretación de la información visual del usuario. A menudo los diseñadores tienden a sobrecargar las interfaces con elementos de diseño (color, tipografía, filetes, logotipos, etc.) que creen imprescindibles para comunicar lo que quieren, olvidando que la mejor interfaz es aquella que pasa desapercibida. Evidentemente, en estos casos la interfaz no ayudará al usuario en su tarea, ya que cualquier elemento superfluo, que no lleve información, requerirá la atención del usuario y no le aportará ningún beneficio. GUI - Características (Diseño gráfico)

24. 5. El principio del color como suplemento El programa más utilizado en entornos de diseño para tratar imágenes es Photoshop, de Adobe. A pesar de ser un programa diseñado especialmente para tratar el color, su interfaz es prácticamente en blanco y negro, los menús de la aplicación no deben competir con el trabajo que está realizando el usuario. El color es apropiado para enfatizar información; para realzar mensajes de error o advertencias que requieran la atención del usuario en momentos puntuales. Si abusamos de él en otras partes, nos arriesgamos a que el usuario no distinga los mensajes excepcionales de los del funcionamiento normal del sistema. Mensajes de error en Mac OSX y XP GUI - Características (Diseño gráfico)

25. 6. El principio de reducción del desorden El principio de reducción del desorden se tiene que aplicar de manera recursiva en todos los aspectos del diseño. En interfaces en las que el número de elementos y recursos gráficos es exagerado, el usuario no percibe las diferencias ni los matices; lo único que percibe es el desorden. Ministerio de defensa y http://www.telelogo.tv/ Cuando los controles utilizados más frecuentemente son visibles, están agrupados en grupos con sentido, con un uso correcto del color y sin elementos superfluos, entonces tendremos una interfaz suficientemente atractiva y funcional en la que el desorden y la arbitrariedad se habrán reducido al mínimo. GUI - Características (Diseño gráfico)