Diseño de interfaces gráficas de usuario

Slides:



Advertisements
Presentaciones similares
Dreamweaver Primeros Pasos.
Advertisements

Métodos Abreviados de Teclado
Crear una Presentación en Blanco Para crear una presentación en blanco sigue estos pasos: Presiona el Botón Office. Selecciona la opción Nuevo. En el cuadro.
PANTALLAS DE VISUALIZACION
Webquest Diseño IU: Wix.com permite un control total del diseño de la web, pudiendo elegir en cualquier momento que punto modificar o que.
Arquitectura de la información en sitios web y Usabilidad
Unidad II Interfaces Hombre Máquina
Prof. Adelaide Bianchini. Dpto. de Computación y Tecnología de la Información. Universidad Simón Bolívar. Mayo Diseño centrado en el usuario Prof.
ANALISIS DE LAS TAREAS DEL USUARIO ¿Qué tipo de información te interesaría conocer acerca de la seguridad en la red? Protección (antivirus,
“CONOZCAMOS EL PRESENTADOR DE DIAPOSITIVAS MICROSOFT POWERPOINT”
TÉCNICO EN REGISTROS Y ESTADÍSTICAS DE SALUD
ANDRES COHEN GUERRA Ing. HENRY FARFAN UPC- INFORMARICA
Webquest Diseño IU: Wix.com permite un control total del diseño de la web, pudiendo elegir en cualquier momento que punto modificar o que.
Qué es una ventana En informática, una ventana es un área visual, normalmente de forma rectangular, que contiene algún tipo de interfaz de usuario, mostrando.
DE LAS CUENTAS DE USUARIO Y OPCIONES DE CARPETA
Principios de diseño de Interfaces Prof. Adelaide Bianchini
La interfaz de usuario (I)
Manual Flash. La Barra de Menús tiene como propósito facilitar el acceso a las distintas utilidades del programa. Es similar a la de cualquier otro.
TRADUCTOR DE UN PROGRAMA
Interfaces Humano-Computador. Introducción n Se refiere al medio por el cual un usuario interactúa con el computador n Involucra las instrucciones que.
ELEMENTOS DE LA VENTANA
Dr. Luis Alonso Aparicio
DR. ERNESTO SUAREZ.
Microsoft PowerPoint. Presentaciones Tema 3: PowerPoint Integrantes:
Herramientas del sistema Jhonatan Feriz
1 5. La Búsqueda (I) Los ordenadores almacenan gran cantidad de información…  Hay que clasificarla y ordenarla para encontrarla con facilidad. ¿Y si no.
DISEÑO DE LA INTERFAZ DE USUARIO
INTERFAZ GRAFICA.
Principios heurísticos de Nielsen
LE, EI, Profesor Ramón Castro Liceaga UNIVERSIDAD LATINA (UNILA) III. INTERFACES GRÁFICAS.
EL ESCRITORIO DE WINDOWS, LA VENTANA Y LOS CUADROS DE DIALOGO
UNIDAD I INTERFAX DEL USUARIO  CARACTERISTICAS GENERALES  SISTEMAS HIPERMEDIALES.
MEDIDA DE LA USABILIDAD EN APLICACIONES DE ESCRITORIO
Seminario de Informática Unidad 2: Operaciones Básicas de Sistemas Operativos Windows XP.
Ingeniería de Sistemas Ing. Eddye Arturo Sánchez Castillo
Componentes de las interfaces
SITIOS WEB HERRAMIENTAS TIC.
Identificación de Software
QUÈ ES VISUAL BASIC ES UN LENGUAJE DE PROGRAMACIÒN QUE SE HA DISEÑADO PARA FACILITAR EL DESARROLLO DE APLICACIONES EN EL ENTORNO GRÀFICO (GUI GRAPHICAL.
Hermilia Molina Acevedo
EN ESTA UNIDAD APRENDEMOS
Muchas personas usan una lista de tareas pendientes, ya sea en papel, en una hoja de cálculo o en una combinación de papel y medios electrónicos. En Outlook.
Fundamentos del Sistema Operativo
III. Generación de documentos corporativos
Unidad 7 Escritorio de Windows.
Fundamentos técnicos de la información Andrea Del Salto.
Gonzalez Tellez Guadalupe Marina Reverte Materia :HTP Carrera :Derecho.
Estructuras web De navegación Y Visual. Investigación de requerimientos ¿Qué es lo que quiere el cliente? – ¿Qué desea comunicar?, y ¿Cómo? – ¿Qué información.
Posgrado en Sistemas Computacionales Heurísticas de usabilidad MC Luz María Moreno Aguilar Noviembre 2009.
Hoja de Cálculo EXCEL Introducción a la informática
 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. 
TEMA 2: SISTEMAS OPERATIVOS. ENTORNO MONOUSUARIO.
Profesora: Angela Maiz
Navarro Hernández Nadia Samantha. Preescolar 1º. B.
I CURSO DE INTERNET BÁSICO FUNDAMENTOS DEL TRABAJO CON UN ORDENADOR.
Sistema Operativo S.O..
Universidad Ju á rez del estado de Durango Colegio de ciencias y humanidades Herramientas del Sistema de Windows Profesor: Fernando Mej í a Alumno: Alexis.
S ISTEMA O PERATIVO P ROCESADOR DE T EXTOS. SOFTWARE El primer elemento de un sistema de computación es el hardware (equipamiento). El SOFTWARE es el.
Encuentro No.10 SEMILLERO INFANTIL Y JUVENIL UNIVERSITARIO UNIVERSIDAD DEL QUINDÍO FASE: INGENIO ÁREA: SISTEMAS.
Karen Viviana González Manuel García 8B 2015
Elementos básicos de la ventana
INFORMÁTICA DESDE CERO
Windows 8 Windows 8 es la versión actual del sistema operativo de Microsoft Windows, producido por Microsoft para su uso en computadoras personales, 
Sistemas Operativos Universidad Politécnica Territorial de Mérida
Partes de la ventana Access
INFORMATICA EDUCATIVA WENDY YAMILETH GONZALEZ PEREZ WENDY YAMILETH GONZALEZ PEREZ 02-F 02-F LICDA. JESSICA MARIBEL SERPAS SERPAS.
En el presente trabajo, se explica los diferentes elementos que nos ofrece Microsoft Access, para hacer mas fácil y rápido la realización de bases de.
El diseño de la interfaz de usuario requiere el estudio de las personas y el conocimiento tecnológico adecuado.
:: Prof. Yeniffer Peña Programación I Interface Gráfica de Usuario Presentación.
Realizado por Lucia y Florencia.  Es el conjunto de programas encargado de la gestión interna de la computadora, controla el funcionamiento del hardware.
Transcripción de la presentación:

Diseño de interfaces gráficas de usuario Interacción Persona-Ordenador Diseño de interfaces gráficas de usuario

Principios fundamentales del diseño Son conceptos de alto nivel que deberían ser empleados como referencia o guía de diseño. Uno de los clásicos: reglas de oro de Mandel. Agrupa los principios en función de tres objetivos: Colocar a los usuarios en el control de la interfaz. Reducir la carga de memoria de los usuarios. Hacer una interfaz de usuario consistente.

Reglas de oro de Mandel: colocar a los usuarios en el control de la interfaz □ Las directrices a aplicar para conseguir el objetivo son:   Emplear los modos adecuadamente.   Permitir a los usuarios utilizar el teclado y el ratón.   Permitir a los usuarios cambiar la atención.   Mostrar a los usuarios mensajes y textos descriptivos.   Proporcionar retroalimentación.   Proporcionar acciones inmediatas y reversibles. Proporcionar caminos significativos y salidas.   Acomodar a los usuarios con diferentes niveles de habilidad.   Hacer la interfaz de usuario transparente.   Permitir al usuario personalizar la interfaz.   Permitir al usuario manipular los objetos de la interfaz.

Emplear los modos adecuadamente Ventanas modales y no modales. No emplear ventanas modales de forma innecesaria. Utilizarlas cuando: Se ha producido un error crítico que impide a la aplicación seguir ejecutándose. Ejemplo: no hay espacio en disco. El usuario solicite una acción y sea necesario proporcionar datos para su culminación. No utilizarlas cuando: Se produzca un error no crítico y que el usuario no pueda controlar. Ejemplo: cuadro de diálogo abrir.

Permitir a los usuarios utilizar teclado y ratón Aunque es posible optimizar la interfaz para usuarios de ratón, es importante proporcionar una forma alternativa de interacción. Esto dotará a la interfaz de las siguientes ventajas: Facilidad para los usuarios que provengan de otros entornos. Facilidades a los usuarios con necesidades especiales. Continuidad ante fallos o inexistencia del ratón. Este principio no aparece en diversas guías de estilo.

Permitir a los usuarios cambiar la atención Los usuarios deben poder interrumpir sus acciones actuales y continuarlas más tarde. Una vez lanzada una tarea larga y no crítica el usuario debería poder volver a tomar el control de la interfaz La tarea deberá reclamar la atención una vez termine. Cuando sea una tarea en varios pasos no hay que obligar al usuario a completar todos los pasos. Dar la sensación de que el usuario lleva el control.

Mostrar a los usuarios mensajes y textos descriptivos Mensajes claros, útiles descriptivos y fáciles de entender en diálogos, etiquetas y documentación. Evitar el lenguaje excesivamente técnico.

Proporcionar retroalimentación Es necesario informar de los procesos en curso. Mediante mensajes en cuadros de diálogo. Mediante mensajes en barras de estado. Barras de progreso. Adecuado cuando: Se están realizando operaciones largas. Se va a realizar un proceso irreversible. Se debe proporcionar información clara e identificativa.

Proporcionar retroalimentación (II)

Proporcionar retroalimientación (III) Los mensajes no deben ser intrusivos. • No deben molestar con información intrascendente.

Proporcionar acciones inmediatas y reversibles Es deseable que todas las operaciones realizadas con los datos sean reversibles. Otorga confianza al usuario. Le anima a investigar sin miedo. Opciones de "deshacer" y "rehacer". Principio del esfuerzo proporcionado. Cuando un proceso es difícil de recuperar, también debe ser más difícil de realizar.

Proporcionar caminos significativos y salidas Permitir la navegación fácil a través de la interfaz. Proporcionar un contexto que indique: Dónde están. Dónde han estado. Dónde pueden ir. Cómo abandonar. En páginas web: Mapas del sitio. Indicadores en las cabeceras de páginas. En aplicaciones de escritorio: Barras de tareas, barras de herramientas. Títulos de las ventanas.

Proporcionar caminos significativos y salidas (II)

Proporcionar caminos significativos y salidas (III)

Acomodar a los usuarios con diferentes niveles de habilidad No sacrificar a los usuarios expertos por una interfaz más fácil para usuarios ocasionales. Es necesario proporcionar caminos rápidos para los usuarios expertos. Atajos de teclado. Lo ideal: Interfaces personalizables que permitan a los usuarios elegir las opciones disponibles de la interfaz según su nivel de experiencia en la aplicación.

Hacer una interfaz de usuario transparente Una interfaz transparente permite al usuario sentirse como si estuviera manipulando los objetos reales con los que trabaja habitualmente. Buen ejemplo de transparencia: Papelera de reciclaje. Mal ejemplo de transparencia: CTRL+ALT+SUPR para ejecutar el administrador de tareas.

Permitir al usuario personalizar la interfaz Los usuarios se encuentran más confortables cuando pueden configurar las características del sistema. Configurar la presentación (colores, fuentes, aspectos internacionales). Configurar el comportamiento (acciones por omisión, botones de la barra de herramientas, etc.). Configurar la interacción (teclas de método abreviado, mnemotécnicos, etc.). Es interesante incluir también una opción que permita restablecer los valores por omisión.

Permitir al usuario manipular los objetos de la interfaz Fomentar que el usuario manipule directamente los objetos de la pantalla además de usar métodos indirectos por medio de teclado y ratón. Algunas veces las interfaces de manipulación directa fallan porque las acciones a realizar con los objetos no son visualmente obvias. No queda claro qué cosas se pueden hacer al arrastrar y soltar objetos por la pantalla. Es necesario hacer más obvias las manipulaciones.

Reglas de oro de Mandel: Reducir la carga de Memoria La reducción de la carga de la memoria facilitará el aprendizaje. Permitirá al usuario recordar, más que aprender, el funcionamiento de la interfaz. Algunos principios para lograr este objetivo: Aliviar la memoria a corto plazo. Confiar en el reconocimiento. Proporcionar pistas visuales. Proporcionar opciones por omisión. Proporcionar atajos de teclado. Promover la sintaxis objeto-acción. Emplear metáforas del mundo real. Emplear la revelación progresiva. Promover la claridad visual.

Aliviar la memoria a corto plazo El usuario realizar en el ordenador varias acciones al mismo tiempo y el estado de cada una de ellas se guarda en la memoria a corto plazo. Es necesario incluir en la interfaz mecanismos que permitan no tener que cargar información en dicha área de memoria. Para este objetivo se puede recurrir a: Incluir acciones de "deshacer" y "hacer". Permiten retornar es estados anteriores sin necesidad de recordar cómo se llegó a ellos. Utilizar las opciones de cortar, copiar y pergar. Permiten almacenar en la memoria del ordenador información que se utilizará más tarde.

Confiar en el reconocimiento Permitir recuperar información de la memoria a largo plazo mostrando los elementos que debe reconocer. Es más fácil seleccionar elementos que recordarlos.

Promocionar pistas visuales El usuario debe saber donde está, qué está haciendo y qué es lo que puede hacer.

Proporcionar pistas visuales (II)

Proporcionar tareas por omisión Es conveniente que el usuario pueda restaurar la interfaz a su estado original. Es frustrante llegar a un punto de personalización del que es difícil salir. El restablecimiento de opciones por omisión permite restaurar de modo rápido la configuración original.

Proporcionar atajos de teclado Los atajos de teclado economizan el número de pulsaciones o movimientos de ratón utilizados. Dos formas: Mnemotécnicos. Teclas de método abreviado.

Promover la sintaxis objeto-acción No es necesario diseñar una interfaz totalmente orientada a objetos para seguir este principio. Menús contextuales. Este tipo de sintaxis evitar tener que recordar todas las opciones posibles en cada momento sobre un objeto.

Emplear metáforas del mundo real Una vez elegida una metáfora es necesario mantenerla Es posible ampliarla, pero no cambiarla.

Emplear la revelación progresiva No abrumar al usuario con las funciones de un producto. Mostrar sólo lo que el usuario necesita cuando y dónde lo necesita.

Promover la claridad visual Aplicar principios de diseño visual de la percepción humana. Agrupación. Numeración de elemento. Establecer prioridades en la importancia de los elementos mostrados. No disponer demasiados elementos en la pantalla. Distribuir bien los elementos.

Reglas de oro de Mandel: interfaz de usuario consistente Una interfaz bien diseñada permitirá a los usuarios transferir su conocimiento en el aprendizaje de un nuevo programa. Pero… Debe ser consistente con otros programas que haya utilizado. Dentro de un programa será más fácil su aprendizaje si existe cierto parecido entre las distintas partes de las que esté formado. Algunos principios que fomentan la consistencia: Preservar el contexto de trabajo de los usuarios. Mantener la consistencia dentro y entre productos.

Preservar el contexto de trabajo de los usuarios Los usuarios deben ser capaces de completar trabajos sin necesidad de cambiar de contexto o estilo de entrada. Es incómodo tener que estar cambiando constantemente entre la entrada por teclado y por ratón. El cambio de estilo de entrada debe ser una decisión del usuario.

Mantener la consistencia dentro y entre productos Presentación. Los usuarios deben ver la información y los objetos de la misma forma lógica, visual o física a lo largo del producto. Importancia de las guías de estilo. Dentro de la aplicación aplicar los mismos conceptos de diseño visual a los elementos que realicen acciones parecidas. Comportamiento. Un objeto debería trabajar siempre de la misma forma. El usuario no debe verse sorprendido por el comportamiento de los objetos de la interfaz. Los usuarios tienden a cuestionar su comportamiento, más que el del producto: "comportamiento supersticioso” . Técnicas de interacción. Deben mantenerse a lo largo de aplicación y entre aplicaciones. Los mnemotécnicos y las teclas de método abreviado no deberían cambiar para opciones de menús similares.