1. Diseo de InterfacesGrficas de Usuario Metodologa I

2. ndice Introduccin y Objetivos Principios Bsicos Recomendaciones Bibliografa 3. Introduccin y Objetivo Este documento tiene como objetivo principal, ser utilizado como referencia de consulta al momento de disear una interfaz de usuario.Nota: Como ejemplo de aplicacin, en esta presentacin se utilizar el Paquete Microsoft Office en sus versiones 97 y 2010 4. Principios bsicos La presentacin del diseo dentro de una aplicacin, determina la mejor manera de dar al usuario el acceso a la informacin del programa y las capacidades de la lgica del negocio. Antes de realizar el diseo de una interfaz de usuario, se debe considerar lo siguiente: La estructura de la interfaz. Los objetos que voy a manipular. A que tipo de usuario est dirigido. La mejor manera de presentar los objetos en la aplicacin. 5. Recomendaciones Las siguientes recomendaciones que procederemos a detallar permiten comprender fcilmente que aspectos debemos tener en cuenta, para garantizar niveles aceptables de usabilidad e intuitividad, en los diseos de interfaces grficas de usuario: Presentacin de la informacin Uso Amigable Caractersticas del Color Presentacin de la informacin Control De Usuario Consistencia Retroalimentacin Reduccin de latencia Uso de Metforas Prevencin de Errores Valores por defecto Legibilidad Accesos Rpidos Teclas de Acceso 6. Recomendaciones Presentacin de la informacin Organizacin y distribucin: Tener en cuenta la forma de ordenar y organizar los elementos de la imagen en el espacio que nos ofrece el formato. Establecer un orden determinado donde todos los componentes participen en el diseo equilibradamente. Debe delimitarse claramente el centro de intersAgrupacin de la informacin Relacionada: Se pueden relacionar a travs de: Funcionalidad Cercana espacial Similitud 7. Recomendaciones Presentacin de la informacin (Cont.) Diseo substractivo Eliminar cualquier elemento que no ayude a la comunicacin visual, para ello se debe: Seleccionar solo la informacin importante No desperdiciar espacio Nmero de zonas sensible no mayor a 8Utilizacin de botones No se debe tener un botn por cada tarea Solo botones para aquella informacin cuyo resultado es visualmente obvio No se deben utilizar botones para acciones potencialmente destructivas, ya que pueden activarse accidentalmente. 8. Recomendaciones Uso Amigable Se debe minimizar el numero de pasos a seguir para completar una determinada tarea. (Limitar los pasos para solucionar problemas a 3 o menos. ) El usuario debe distinguir con claridad todos los objetos que le brinda la aplicacinFunciones utilizadas recientemente Proporcionar al operador diferentes tipos de ayuda, automtica o a peticin del mismo. Asociar la ayuda segn los estndares. Ej.: Tecla F1 9. Recomendaciones Caractersticas del color No abusar de la utilizacin del color El color debe usarse funcionalmente Permite resaltar la informacin mas importante Bien utilizado, permite agrupar diferentes elementos de la pantalla en conjuntosUtilizar el color de acuerdo a las connotaciones culturales y estereotiposEl siguiente cuadro representa las Asociaciones mentales de los colores.El contraste de la figura-fondo permite una mayor legibilidad y evita el cansancio visualLa siguiente matriz representa una sugerencia de combinaciones entre colores primarios, secundarios y neutros para aplicar a nuestras interfaces grficasEl uso del color debe ser consistente dentro de la misma aplicacin como, con otras aplicaciones del mismo paquete si existiese (Ver Consistencia) 10. Recomendaciones Consistencia Dado que la mayora de usuarios han utilizado otras aplicaciones, se sugiere aplicar: Conocimientos adquiridos. Estndares de uso. Preservar el contexto de trabajo de los usuarios. Mantener la consistencia interna, con la plataforma y con otras aplicaciones. Conservar los resultados para las mismas interacciones. MS ExcelMS Word 11. Recomendaciones Retroalimentacin Reduccin de Latencia Se debe reducir la percepcin de latencia lo mas posible: Comunicar el clic de los botones mediante una retroalimentacin visual en los primeros 50 milisegundos. Mostrar un reloj de arena para cualquier accin que dure entre 1/2 y 2 segundos. Que est animado, para que el usuario sepa que el sistema sigue trabajando. Mostar un mensaje comunicando la duracin estimada para cualquier proceso que pueda durar ms de 2 segundos. Comunicar el tamao y el progreso con un barra de estado. Mostrar mensajes de textos agradables y procura mantener entretenido al usuario mientras espera a que el proceso termine. Indicar con pitidos e indicaciones visuales muy claras cuando el usuario puede volver al trabajo con el sistema. Identificar los mltiples clics en un mismo objeto. 12. Recomendaciones Uso de Metforas Debe demostrarle al usuario el resultado de una determinada accin de una manera visual. El ejemplo mas claro lo podemos identificar al momento de utilizar imgenes representativas como botones dentro del men. BuscarPrevencin de Errores Los sistemas deben ser capaces de brindarle informacin al usuario, alertndolos de lo que suceder en el caso de continuar con determinada accin. Prevenir los errores antes de que ocurran. Ej.: Solicitar confirmacin antes de cerrar la aplicacin o confirmar la operacin de guardar, en el caso de estar sobrescribiendo otro archivo. Utilizar redundancia de canales comunicativos: utilizar alarmas sonoras, destello de la barra de men, Icono de alerta. 13. Recomendaciones Valores por defecto Los valores por defecto deberan ser poder descartados con facilidad y rapidez. Los campos de texto con valores por defecto deben aparecer seleccionados, para que el usuario slo tenga que teclear y no seleccionar todo, borrar y escribir. Los valores por defecto deben tener sentido. No usar la palabra "por defecto" en una aplicacin o servicio. Utiliza "estndar", "Usar valores habituales", "Restablecer valores iniciales" o trminos ms especficos que describan lo que suceder.Legibilidad Utilizar texto con alto contraste. Procurar utilizar negro sobre blanco o amarillo plido. Evita fondos grises cuando haya texto. Utilizar tamaos de letra que se lean bien en los monitores ms comunes. Da mayor importancia a los datos e informacin que quieres presentar, ms que a instrucciones y etiquetas. Tener en cuenta a los mayores, cuya visin suele ser peor que la de los jvenes. 14. Recomendaciones Accesos Rpidos y Teclas de Acceso Accesos Rpidos Proporcionar combinaciones de teclas que permitan al usuario realizar con mayor velocidad las operaciones, de esta manera se gana eficiencia y flexibilidad en el caso de resultar una tarea repetitiva. Se recomienda respetar los atajos o combinaciones del sistema operativo, para una mayor facilidad en el aprendizaje Deben evitarse combinaciones complejas No debe diferenciarse entre maysculas y minsculasTeclas de Acceso Se encuentran indicadas visualmente y no requieren ser aprendidas Deben ser fciles de visualizar Deben ser de base ancha. Ej: M, W, S Preferentemente deben estar en el inicio de la palabra 15. Bibliografa First Principles Of Interaction Design Principios de diseo de interaccin de Bruce Tognazzini http://galinus.com/es/articulos/principios-diseno-de-interaccion.htmlInterfaces grficas de usuarios. Estudio de una gua para su evaluacin ergonmica Parte II - Gua de recomendaciones para el diseo ergonmico de GUI http://bdigital.uncu.edu.ar/objetos_digitales/1505/rodriguezinterfaces.pdf Youtube Los 8 principios de diseo de interfaces grficas segn MSF (PARTE 1) http://www.youtube.com/watch?v=Tq1T6QHCUkg Diseo de interfaces de usuario (Parte 1) http://www.youtube.com/watch?v=HyBY1bU1hh8 Microsoft Excel 97 - 2010 Aplicacin distribuida por Microsoft Office para hojas de clculo http://office.microsoft.com/es-ar/excel/