SlideShare una empresa de Scribd logo
1 de 13
Descargar para leer sin conexión
GUÍA PARA REALIZAR UNA
CORRECTA INTERFAZ GRÁFICA DE
USUARIO
REALIZADO POR: LUCIANO SERVETTINI
MATERIA: SISTEMAS II
CURSO: 3°2°
FECHA DE PRESENTACIÓN: 13/06/2016
INTRODUCCIÓN
Ante el crecimiento de las tecnologías de información y el uso de las aplicaciones
elaboradas a medida para un usuario específico. Podría decirse que para casi toda
actividad que alguien quiera realizar hay una aplicación con ese propósito en
internet.
Sin embargo hay un problema con muchas de estas aplicaciones, que son difíciles de
usar. Mucho más de lo que deberían ser. Este problema, si bien se ve más comúnmente
en aplicaciones gratuitas, hay algunas comerciales que también lo sufren.
Por lo tanto, esto hace notar que tener expertos en interfaces tampoco garantiza el
éxito de las mismas.
A continuación se explican diferentes aspectos para poder realizar una correcta
Interfaz Gráfica de Usuario.
ASPECTOS A TENER EN CUENTA
Una de las cuestiones más importantes radica en la Presentación de
la Información, para esto es necesario:
• Organización de elementos en pantalla
• Tipografía
• Color
• Uso de gráficos e ilustraciones
• Animaciones
• Sistema de navegación
Organización y Distribución:
La composición es la forma de ordenar y organizar los elementos de la imagen en el
espacio estructural que nos ofrece el formato.
Los objetivos principales son: Lograr equilibrio en componentes que participan. Y
determinar el centro de interés (Un elemento se constituirá como el dominante de la
escena.
o Herencia Visual:
Para componer el espacio en pantalla se debe distribuir la información de acuerdo
a estereotipos: El sentido de la lectura-escritura condiciona el modo de mirar los
objetos y los puntos innatos de atención. La tipografía occidental (de izquierda a
derecha y de arriaba abajo) debe respetarse a la hora de asignar el espacio de
la información. En el extremo superior izquierdo debe ir la información más
importante. En el extremo superior derecho la de menor jerarquía.
o Agrupar la información relacionada:
Los recursos visuales para esto son variados. Los más útiles son por cercanía y por
similitud.
Por el contrario, agrupar la información con el uso del color no es un aspecto
positivo, ya que puede traer confusión, cansancio visual, entre otras cosas.
o Diseño Substractivo:
Eliminar todo lo que no ayude a la comunicación visual. Es recomendable
seleccionar sólo información importante y no desperdiciar espacio en otra
irrelevante. También es importante evitar la sobrecarga de información.
A la hora de incorporar botones, hay que tener en cuenta: No poner uno para
cada tarea posible del operador, debe haber botones sólo para las funciones con
resultado obvio, y no poner botones para acciones potencialmente destructivas, ya
que se pueda activar por error.
Características del color:
Un error común es el de abusar de los colores. Esto provoca confusión en el operario
que debe adaptar su vista al continuo cambio.
A continuación se detallan recomendaciones para mejorar los criterios de selección de
color en una interfaz.
o Uso funcional del color:
Su principal utilidad es la de resaltar la información más importante, y así identificar
fácilmente los datos más relevantes. De esta manera se puede asociar elementos
aunque estén separados espacialmente. Y también, separar los que deben
diferenciarse.
o Utilizar color de acuerdo a connotaciones culturales y estereotipos:
Evitar connotaciones culturales negativas, como así también considerar propiedades
psicológicas que actúan sobre el subconsciente. En el siguiente listado se ven algunos de los
significados asociados a colores:
o Su función se debe reforzar con otros elementos comunicativos, nunca solo.
Texto en Interfaces Gráficas:
Existen diversos recursos para jerarquizar información escrita. Como formas exitosas
podemos mencionar: Uso de diferentes tamaños de letra y de colores.
En cambio si limitamos los cambios en las letras sólo a activar el formato de Negrita o
Cursiva los cambios no son buenos, sobre todo en letras chicas o textos largos.
Iconos en Interfaces Gráficas:
o Verificar la necesidad de un sistema de íconos:
Sólo es aconsejable utilizar iconos cuando la explicación con palabras es muy larga o no
pude entenderse con facilidad.
o Seleccionar una metáfora y representarla adecuadamente. (Se debe determinar
el uso de forma intuitiva).
o Utilizar la redundancia verbal adecuadamente.
o Utilizar íconos ya difundidos anteriormente.
Principios Generales de la Usabilidad:
o El operador debe tener una sensación de control sobre la aplicación.
• Proporcionar acciones inmediatas, reversibles, y realimentación.
• Ser redundante
• Permitir al usuario personalizar la interfaz.
o Se debe reducir la carga de memoria de los usuarios:
• Simplificar las tareas.
• Proporcionar opciones por defecto.
• Evitar que el desarrollo de la tarea dependa de la memoria del operador.
• Delegar la carga de trabajo.
• Proporcionar atajos.
• Soportar teclas de acceso.
o La aplicación debe ser consistente:
A continuación se mencionan principios para lograrlo
• Preservar el texto de trabajo de los usuarios.
• Mantener la consistencia dentro de la aplicación y con el sistema operativo.
• Conservar los resultados para las mismas interacciones.
o Ofrecer prevención de errores y una gestión de errores sencilla:
• Intentar prevenir los errores antes que ocurran.
• Utilizar redundancia de canales comunicativos.
o Facilitar el aprendizaje de la aplicación:
• Proporcionar al operador diferentes tipos de ayuda, automática o a petición del mismo.
o Método para verificar si la aplicación incorpora principios de accesibilidad en el diseño:
• Utilizar únicamente el teclado para manejar la interfaz.
• Comprobar el funcionamiento de las herramientas de ampliación
BIBLIOGRAFÍA Y OTRAS FUENTES
 Rodríguez Roberto (Página consultada 10/06/2016) “Interfaces gráficas de usuarios.
Estudio de una guía para su evaluación ergonómica.” [On-line]. Dirección URL:
http://bdigital.uncu.edu.ar/objetos_digitales/1505/rodriguezinterfaces.pdf
Parte II
 Roe Benjamin (Página consultada 10/06/2016) “Diseño de Interfaces de Usuario Usables:
Una Guía Rápida para Desarrolladores de Software Libre y de Código Abierto”
[On-line]. Dirección URL: http://mundogeek.net/traducciones/interfaces-usuario-usables/gui.html

Más contenido relacionado

La actualidad más candente

Modelo vista controlador vas Programacion por n capas
Modelo vista controlador vas Programacion por n capasModelo vista controlador vas Programacion por n capas
Modelo vista controlador vas Programacion por n capas
Alex Uhu Colli
 
Ingeniería de requisitos
Ingeniería de requisitosIngeniería de requisitos
Ingeniería de requisitos
Zuleima
 

La actualidad más candente (20)

Diagrama de Componentes
Diagrama de ComponentesDiagrama de Componentes
Diagrama de Componentes
 
Arquitecturas de software - Parte 1
Arquitecturas de software - Parte 1Arquitecturas de software - Parte 1
Arquitecturas de software - Parte 1
 
Especificacion de requerimientos
Especificacion de requerimientosEspecificacion de requerimientos
Especificacion de requerimientos
 
Modelo 4+1
Modelo 4+1Modelo 4+1
Modelo 4+1
 
Diagrama de despliegue
Diagrama de despliegueDiagrama de despliegue
Diagrama de despliegue
 
Modelo Del Negocio con RUP y UML Parte 2
Modelo Del Negocio con RUP y UML Parte 2Modelo Del Negocio con RUP y UML Parte 2
Modelo Del Negocio con RUP y UML Parte 2
 
Formatos Psp
Formatos PspFormatos Psp
Formatos Psp
 
Ejemplo iconix
Ejemplo iconixEjemplo iconix
Ejemplo iconix
 
Modelo GOMS
Modelo GOMSModelo GOMS
Modelo GOMS
 
Modelo vista controlador vas Programacion por n capas
Modelo vista controlador vas Programacion por n capasModelo vista controlador vas Programacion por n capas
Modelo vista controlador vas Programacion por n capas
 
Modelo 4+1
Modelo 4+1Modelo 4+1
Modelo 4+1
 
Ingeniería de requisitos
Ingeniería de requisitosIngeniería de requisitos
Ingeniería de requisitos
 
Diagramas de clase.pptx
Diagramas de clase.pptxDiagramas de clase.pptx
Diagramas de clase.pptx
 
UML: CASOS DE USO
UML: CASOS DE USOUML: CASOS DE USO
UML: CASOS DE USO
 
Fundamentos de Ingenieria de Software - Unidad 1 modelo de negocios
Fundamentos de Ingenieria de Software - Unidad 1 modelo de negociosFundamentos de Ingenieria de Software - Unidad 1 modelo de negocios
Fundamentos de Ingenieria de Software - Unidad 1 modelo de negocios
 
Diseño de Software
Diseño de SoftwareDiseño de Software
Diseño de Software
 
Calidad en el desarrollo del software
Calidad en el desarrollo del softwareCalidad en el desarrollo del software
Calidad en el desarrollo del software
 
Tsp (Team Software Process )
Tsp (Team Software Process )Tsp (Team Software Process )
Tsp (Team Software Process )
 
Software caja negra y caja blanca
Software caja negra y caja blancaSoftware caja negra y caja blanca
Software caja negra y caja blanca
 
UML
UMLUML
UML
 

Similar a Guia para realizar una correcta interfaz gráfica de usuario

Diseño de interfaces de usuario usables
Diseño de interfaces de usuario usablesDiseño de interfaces de usuario usables
Diseño de interfaces de usuario usables
Yemina04
 
Actividad Diseño de Interfaces Gráficas de Usuario - Metodologia de Sistemas I
Actividad Diseño de Interfaces Gráficas de Usuario - Metodologia de Sistemas IActividad Diseño de Interfaces Gráficas de Usuario - Metodologia de Sistemas I
Actividad Diseño de Interfaces Gráficas de Usuario - Metodologia de Sistemas I
damian_87_3
 

Similar a Guia para realizar una correcta interfaz gráfica de usuario (20)

Fagundez Diseño de interfaces gráficas de usuario
Fagundez   Diseño de interfaces gráficas de usuarioFagundez   Diseño de interfaces gráficas de usuario
Fagundez Diseño de interfaces gráficas de usuario
 
Diseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuarioDiseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuario
 
Gui buenas practicas
Gui buenas practicasGui buenas practicas
Gui buenas practicas
 
Gui
GuiGui
Gui
 
Gui
GuiGui
Gui
 
Gui
GuiGui
Gui
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Diseño de interfaces de usuario usables
Diseño de interfaces de usuario usablesDiseño de interfaces de usuario usables
Diseño de interfaces de usuario usables
 
Dia de la usabillidad 2013 - Clínica de UX para apps
Dia de la usabillidad 2013 - Clínica de UX para appsDia de la usabillidad 2013 - Clínica de UX para apps
Dia de la usabillidad 2013 - Clínica de UX para apps
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz grafica
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz grafica
 
Diseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuarioDiseño de interfaces gráficas de usuario
Diseño de interfaces gráficas de usuario
 
Interfaces de usuario1 uv(1)
Interfaces de usuario1 uv(1)Interfaces de usuario1 uv(1)
Interfaces de usuario1 uv(1)
 
Modelo de Implantación del Usuario | interfaz Gráfica de usuario
Modelo de Implantación del Usuario |  interfaz Gráfica de usuarioModelo de Implantación del Usuario |  interfaz Gráfica de usuario
Modelo de Implantación del Usuario | interfaz Gráfica de usuario
 
Clínica de experiencia de usuario para aplicaciones móviles
Clínica de experiencia de usuario para aplicaciones móvilesClínica de experiencia de usuario para aplicaciones móviles
Clínica de experiencia de usuario para aplicaciones móviles
 
Actividad Diseño de Interfaces Gráficas de Usuario - Metodologia de Sistemas I
Actividad Diseño de Interfaces Gráficas de Usuario - Metodologia de Sistemas IActividad Diseño de Interfaces Gráficas de Usuario - Metodologia de Sistemas I
Actividad Diseño de Interfaces Gráficas de Usuario - Metodologia de Sistemas I
 
Interfaz con usuario
Interfaz con usuarioInterfaz con usuario
Interfaz con usuario
 
Sesión checklist usabilidad
Sesión checklist usabilidadSesión checklist usabilidad
Sesión checklist usabilidad
 
Sesión checklist usabilidad
Sesión checklist usabilidadSesión checklist usabilidad
Sesión checklist usabilidad
 
Capitulo 2.1
Capitulo 2.1Capitulo 2.1
Capitulo 2.1
 

Guia para realizar una correcta interfaz gráfica de usuario

  • 1. GUÍA PARA REALIZAR UNA CORRECTA INTERFAZ GRÁFICA DE USUARIO REALIZADO POR: LUCIANO SERVETTINI MATERIA: SISTEMAS II CURSO: 3°2° FECHA DE PRESENTACIÓN: 13/06/2016
  • 2. INTRODUCCIÓN Ante el crecimiento de las tecnologías de información y el uso de las aplicaciones elaboradas a medida para un usuario específico. Podría decirse que para casi toda actividad que alguien quiera realizar hay una aplicación con ese propósito en internet. Sin embargo hay un problema con muchas de estas aplicaciones, que son difíciles de usar. Mucho más de lo que deberían ser. Este problema, si bien se ve más comúnmente en aplicaciones gratuitas, hay algunas comerciales que también lo sufren. Por lo tanto, esto hace notar que tener expertos en interfaces tampoco garantiza el éxito de las mismas. A continuación se explican diferentes aspectos para poder realizar una correcta Interfaz Gráfica de Usuario.
  • 3. ASPECTOS A TENER EN CUENTA Una de las cuestiones más importantes radica en la Presentación de la Información, para esto es necesario: • Organización de elementos en pantalla • Tipografía • Color • Uso de gráficos e ilustraciones • Animaciones • Sistema de navegación
  • 4. Organización y Distribución: La composición es la forma de ordenar y organizar los elementos de la imagen en el espacio estructural que nos ofrece el formato. Los objetivos principales son: Lograr equilibrio en componentes que participan. Y determinar el centro de interés (Un elemento se constituirá como el dominante de la escena. o Herencia Visual: Para componer el espacio en pantalla se debe distribuir la información de acuerdo a estereotipos: El sentido de la lectura-escritura condiciona el modo de mirar los objetos y los puntos innatos de atención. La tipografía occidental (de izquierda a derecha y de arriaba abajo) debe respetarse a la hora de asignar el espacio de la información. En el extremo superior izquierdo debe ir la información más importante. En el extremo superior derecho la de menor jerarquía.
  • 5. o Agrupar la información relacionada: Los recursos visuales para esto son variados. Los más útiles son por cercanía y por similitud. Por el contrario, agrupar la información con el uso del color no es un aspecto positivo, ya que puede traer confusión, cansancio visual, entre otras cosas. o Diseño Substractivo: Eliminar todo lo que no ayude a la comunicación visual. Es recomendable seleccionar sólo información importante y no desperdiciar espacio en otra irrelevante. También es importante evitar la sobrecarga de información. A la hora de incorporar botones, hay que tener en cuenta: No poner uno para cada tarea posible del operador, debe haber botones sólo para las funciones con resultado obvio, y no poner botones para acciones potencialmente destructivas, ya que se pueda activar por error.
  • 6. Características del color: Un error común es el de abusar de los colores. Esto provoca confusión en el operario que debe adaptar su vista al continuo cambio. A continuación se detallan recomendaciones para mejorar los criterios de selección de color en una interfaz. o Uso funcional del color: Su principal utilidad es la de resaltar la información más importante, y así identificar fácilmente los datos más relevantes. De esta manera se puede asociar elementos aunque estén separados espacialmente. Y también, separar los que deben diferenciarse.
  • 7. o Utilizar color de acuerdo a connotaciones culturales y estereotipos: Evitar connotaciones culturales negativas, como así también considerar propiedades psicológicas que actúan sobre el subconsciente. En el siguiente listado se ven algunos de los significados asociados a colores: o Su función se debe reforzar con otros elementos comunicativos, nunca solo.
  • 8. Texto en Interfaces Gráficas: Existen diversos recursos para jerarquizar información escrita. Como formas exitosas podemos mencionar: Uso de diferentes tamaños de letra y de colores. En cambio si limitamos los cambios en las letras sólo a activar el formato de Negrita o Cursiva los cambios no son buenos, sobre todo en letras chicas o textos largos. Iconos en Interfaces Gráficas: o Verificar la necesidad de un sistema de íconos: Sólo es aconsejable utilizar iconos cuando la explicación con palabras es muy larga o no pude entenderse con facilidad. o Seleccionar una metáfora y representarla adecuadamente. (Se debe determinar el uso de forma intuitiva).
  • 9. o Utilizar la redundancia verbal adecuadamente. o Utilizar íconos ya difundidos anteriormente. Principios Generales de la Usabilidad: o El operador debe tener una sensación de control sobre la aplicación. • Proporcionar acciones inmediatas, reversibles, y realimentación. • Ser redundante • Permitir al usuario personalizar la interfaz.
  • 10. o Se debe reducir la carga de memoria de los usuarios: • Simplificar las tareas. • Proporcionar opciones por defecto. • Evitar que el desarrollo de la tarea dependa de la memoria del operador. • Delegar la carga de trabajo. • Proporcionar atajos. • Soportar teclas de acceso.
  • 11. o La aplicación debe ser consistente: A continuación se mencionan principios para lograrlo • Preservar el texto de trabajo de los usuarios. • Mantener la consistencia dentro de la aplicación y con el sistema operativo. • Conservar los resultados para las mismas interacciones.
  • 12. o Ofrecer prevención de errores y una gestión de errores sencilla: • Intentar prevenir los errores antes que ocurran. • Utilizar redundancia de canales comunicativos. o Facilitar el aprendizaje de la aplicación: • Proporcionar al operador diferentes tipos de ayuda, automática o a petición del mismo. o Método para verificar si la aplicación incorpora principios de accesibilidad en el diseño: • Utilizar únicamente el teclado para manejar la interfaz. • Comprobar el funcionamiento de las herramientas de ampliación
  • 13. BIBLIOGRAFÍA Y OTRAS FUENTES  Rodríguez Roberto (Página consultada 10/06/2016) “Interfaces gráficas de usuarios. Estudio de una guía para su evaluación ergonómica.” [On-line]. Dirección URL: http://bdigital.uncu.edu.ar/objetos_digitales/1505/rodriguezinterfaces.pdf Parte II  Roe Benjamin (Página consultada 10/06/2016) “Diseño de Interfaces de Usuario Usables: Una Guía Rápida para Desarrolladores de Software Libre y de Código Abierto” [On-line]. Dirección URL: http://mundogeek.net/traducciones/interfaces-usuario-usables/gui.html