SlideShare ist ein Scribd-Unternehmen logo
1 von 38
Interfaz Grafica

DEL USUARIO
Fernando Ariel Lugones

Metodología de Sistemas 4ºC
13/11/2013

Bibliografía: Bruce Tognassini
•Pautas de Diseño de Interfaces
Gráficas Basadas en el Modelo
de Aprendizaje S.O.I.,
•Linux
•Gregoria Romero, Youtube
Interfaz Gráfica del Usuario
•
•
•
•

Permite ver y manipular los datos de la aplicación
Es parte del nivel de presentación
Se conecta al nivel del negocio
Un buen diseño de interfaz de usuario puede
significar una ventaja competitiva
Importancia de un buen diseño de interfaz
• Las interfaces ha ido evolucionando conforme al
tiempo, no solo por los avances tecnológicos sino
también por las necesidades del usuario.
• En un Mercado competitivo como el actual, en
donde se desarrollan aplicaciones para usuarios, es
muy importante tener un buen diseño. Una interfaz
amigable e intuitiva es mas atractiva para los
usuarios.
Principios de diseño
Para diseñar correctamente una interfaz de usuario
debemos:
•Identificar la navegación para los usuario de la interfaz
•Validar los datos de entrada
•Establecer formas apropiadas para presentar
resultados
Antes de realizar el diseño de una interfaz de usuario se
debe considerar lo siguiente:

• La estructura en la interfaz
• Los objetos que se van a estar manipulando
• La facilidad que tiene el usuario para el manejo de
las funcionalidades de la aplicación
• La mejor manera de presentar todos los objetos
dentro de la aplicación
Principios básicos de diseño para interfaces de usuario

•
•
•
•
•
•
•

Amigable al uso
Control del Usuario
Consistencia
Retroalimentación
Directo
Accesos Rápidos
Estética
Amigable al uso
• Se debe de minimizar el numero de pasos a seguir
para completar una tarea
Control del usuario
• El usuario tiene que tener la confianza en que el
sistema responderá según lo que quiera
Consistencia
• Aplicar los conocimientos adquiridos
• Uso de estándares
Retroalimentación
• Los sistemas deben ser capaz de darle información al
usuario
Directo
• Debe de mostrarle al usuario de una manera visual el
resultado de alguna acción
Accesos Rápidos
• Para completar alguna tarea mucho más rápido
• Una manera mas cómoda
Estética
• Visiblemente amigable
• Correcta posición de los elementos
Identificar la forma de navegar a traves de una
interfaz de usuario
• Los usuarios que utilizan la computadora como su
herramienta de trabajo encuentran muy importante
la forma en que ellos estarán navegando a través de
las ventanas y opciones.
Asistencia para el Usuario
•
•
•
•
•

Menu de ayuda o archivos de ayuda
Tooltips y barras de estado
Asistencia de tareas
Asistencia(el asistente de algún programa)
Que es esto?
Procedimientos de entradas y salidas
Entradas:
1.Validar que pertenezca al alfabeto deseado
2.Que este en el rango esperado
Salidas:
1.Posición
2.Consistencia
3.Simple
Como implementar las interfaces
• Unicode: El lenguaje internacional de la norma
página de códigos puede soportar casi todos los
idiomas conocidos y símbolo en uso hoy en día
• Installs Shieds: Proporciona herramientas de
desarrollo de software diseñado para permitir la
distribución de software para todas las plataformas
Windows
• Microsoft Systems Management Server: Una
solución completa para la gestión de los ordenadores
personales de forma centralizada en una red de
cualquier tamaño
Cuestiones de Interfaces
Hacer uso eficaz de las interfaces de múltiples
documentos(MDI):
•Los documentos(MDI) permite a los usuarios trabajar
con más documentos a la vez
Navegacion en la interfaz de usuario
•
•
•
•
•
•
•

Los menús proveen una forma sencilla de navegar
La simplicidad y consistencia son muy importantes
Se debe pensar en:
La estructura de la interfaz
Los objetos que manipula el usuario
Las vistas para mostrar esos objetos
Los controles
Validación de datos de entrada
• Verificar que todos los datos que proporciona el
usuario sean correctos
• Validación del tipo de dato
• Validación del rango
Características de la Interfaz Gráfica
•
•
•
•
•
•
•
•
•
•
•
•

Anticipación
Autonomía
Consistencia
Valores predeterminados
Eficacia del Usuario
Interfaces explorables
Objetos de la interfaz humana
Aprendizaje
Metáforas
Proteger el trabajo de los usuarios
Legibilidad
Navegación Visible
Anticipación
• Las aplicaciones deben intentar anticipar
necesidades y deseos de los usuarios
Autonomía
• El ordenador, la interfaz y el entorno de tarea
pertenecen al usuario
• Utilizar los mecanismos del estado para mantener los
usuarios consciente e informado
• Mantener información de estado hasta la fecha y
dentro de vista fácil
Consistencia
• Niveles de consistencia
• Imcopatibilidad
• La consistencia más importante es la consistencia
con las expectativas del usuario
Valores predeterminados
• Campos que contienen valores predeterminados
deben subir seleccionados
• Por defecto debería ser inteligente y sensible
Eficacia del Usuario
• Mira en la productividad del usuario, no de la
computadora
• Mantener al usuario ocupado
• Para maximizar la eficiencia de una empresa u otra
organización debe maximizar la eficiencia de todo el
mundo
Interfaces explorables
• Dar señales y caminos bien señalizados a los usuarios
• Ofrecer a los usuarios pautas perceptuales
• Realizar acciones reversibles
Objetos de la interfaz humana
• Objetos de la interfaz humana puede ser vistos,oído,
tocado o percibe lo contrario
• Tiene una forma estandar de interacción
• Tienen comportamiento resultantes estandar
• Deben ser compresibles, uniformes y estables
Aprendizaje
• Limitar las ventajas y desventajas
Metáforas
• Elegir bien las metáforas, que permitirán a los
usuarios a comprender al instante los detalles más
finos del modelo conceptual
Proteger el trabajo de los usuarios
• Asegurarse de que los usuarios nunca pierdan su
trabajo como resultado de error de su parte, o
cualquier otro motivo inevitable
Legibilidad
• Texto que debe leerse debe tener alto contraste
Navegación visible
• Evitar la navegación invisible, la mayoría de los
usuarios no puede y no construirá la elaboración de
mapas conceptuales
Pautas de Diseño de Interfaz Gráfica de Usuario

1. Estructura de la información y las tareas del
usuario en la aplicación
2. Punto focal en la ventana
3. Estructura y consistencia entre ventanas
4. Relación entre elementos
5. Legibilidad y flujo entre elementos
6. Integración
Redacción de texto en la interfaz
• Brevedad: Se sugiere eliminar las palabras
innecesarias y redactar textos breves sin sacrificar la
claridad y facilidad de comprensión
• Lenguaje: Utilizar la gramática correcta y estándar,
un lenguaje claro y coherente en la interfaz mejora la
facilidad de uso de la aplicación
Accesibilidad
• La aplicación debe ser accesible para todos los
usuarios o la mayoría de ellos, dependiendo el
contexto o la usabilidad que se pretender dar.
• Exiten estrategias de diseño, dependiendo de las
necesidades a cubrir.
Formas apropiadas para presentar resultados
Las formas de representar los resultados en una
aplicación tiene gran impacto sobre la usabilidad de
la aplicación. Los aspectos a tomar en cuenta son:
•La posición y el orden
•La consistencia
•Representación graficas conocidas
•Espacio vacíos dentro de la misma
•Simpleza

Weitere ähnliche Inhalte

Was ist angesagt?

Powerpoint dela seguridad y proteccion de los sistemas operativos
Powerpoint dela seguridad y proteccion de los sistemas operativosPowerpoint dela seguridad y proteccion de los sistemas operativos
Powerpoint dela seguridad y proteccion de los sistemas operativosAdriana Rodriguez
 
Desarrollo de aplicaciones web distribuidas.
Desarrollo de aplicaciones web distribuidas.Desarrollo de aplicaciones web distribuidas.
Desarrollo de aplicaciones web distribuidas.Jomicast
 
Las diez principales amenazas para las bases de datos
Las diez principales amenazas para las bases de datosLas diez principales amenazas para las bases de datos
Las diez principales amenazas para las bases de datosImperva
 
Arquitectura de la nube: modelos de servicio y despliegue.
Arquitectura de la nube: modelos de servicio y despliegue.Arquitectura de la nube: modelos de servicio y despliegue.
Arquitectura de la nube: modelos de servicio y despliegue.FranklinGomez38
 
Cuadro comparativo
Cuadro comparativoCuadro comparativo
Cuadro comparativoOskr GL
 
Integridad Y Seguridad En Las Bases De Datos
Integridad Y Seguridad En Las Bases De DatosIntegridad Y Seguridad En Las Bases De Datos
Integridad Y Seguridad En Las Bases De DatosDrakonis11
 
Factibilidad Tecnica, Operativa y Economica
Factibilidad Tecnica, Operativa y EconomicaFactibilidad Tecnica, Operativa y Economica
Factibilidad Tecnica, Operativa y EconomicaSistemas UDC
 
Requerimientos no funcionales
Requerimientos no funcionalesRequerimientos no funcionales
Requerimientos no funcionalesAngel Minga
 
Diseño de Sistemas
Diseño de SistemasDiseño de Sistemas
Diseño de SistemasJUANESTEFA
 
Software caja negra y caja blanca
Software caja negra y caja blancaSoftware caja negra y caja blanca
Software caja negra y caja blancaStudentPc
 
Sesion 5 1 diagrama de secuencia
Sesion 5 1 diagrama de secuenciaSesion 5 1 diagrama de secuencia
Sesion 5 1 diagrama de secuenciaJulio Pari
 
Seguridad en centros de computo
Seguridad en centros de computoSeguridad en centros de computo
Seguridad en centros de computoNereydhaa
 
Especificación de Arquitectura de Software
Especificación de Arquitectura de SoftwareEspecificación de Arquitectura de Software
Especificación de Arquitectura de SoftwareSoftware Guru
 
Conceptos de diseño de software
Conceptos de diseño de softwareConceptos de diseño de software
Conceptos de diseño de softwareJose Diaz Silva
 
Introduccion a la Ingeniería de Software
Introduccion a la Ingeniería de SoftwareIntroduccion a la Ingeniería de Software
Introduccion a la Ingeniería de SoftwareLia IS
 
Tipos de pruebas de software
Tipos de pruebas de softwareTipos de pruebas de software
Tipos de pruebas de softwareGuillermo Lemus
 
Adquisición de software y hardware
Adquisición de software y hardwareAdquisición de software y hardware
Adquisición de software y hardwareCarlos R. Adames B.
 

Was ist angesagt? (20)

Powerpoint dela seguridad y proteccion de los sistemas operativos
Powerpoint dela seguridad y proteccion de los sistemas operativosPowerpoint dela seguridad y proteccion de los sistemas operativos
Powerpoint dela seguridad y proteccion de los sistemas operativos
 
Desarrollo de aplicaciones web distribuidas.
Desarrollo de aplicaciones web distribuidas.Desarrollo de aplicaciones web distribuidas.
Desarrollo de aplicaciones web distribuidas.
 
Las diez principales amenazas para las bases de datos
Las diez principales amenazas para las bases de datosLas diez principales amenazas para las bases de datos
Las diez principales amenazas para las bases de datos
 
Arquitectura de la nube: modelos de servicio y despliegue.
Arquitectura de la nube: modelos de servicio y despliegue.Arquitectura de la nube: modelos de servicio y despliegue.
Arquitectura de la nube: modelos de servicio y despliegue.
 
Cuadro comparativo
Cuadro comparativoCuadro comparativo
Cuadro comparativo
 
Integridad Y Seguridad En Las Bases De Datos
Integridad Y Seguridad En Las Bases De DatosIntegridad Y Seguridad En Las Bases De Datos
Integridad Y Seguridad En Las Bases De Datos
 
Factibilidad Tecnica, Operativa y Economica
Factibilidad Tecnica, Operativa y EconomicaFactibilidad Tecnica, Operativa y Economica
Factibilidad Tecnica, Operativa y Economica
 
Requerimientos no funcionales
Requerimientos no funcionalesRequerimientos no funcionales
Requerimientos no funcionales
 
Diseño de Sistemas
Diseño de SistemasDiseño de Sistemas
Diseño de Sistemas
 
Arquitectura de sistemas distribuidos
Arquitectura de sistemas distribuidosArquitectura de sistemas distribuidos
Arquitectura de sistemas distribuidos
 
Software caja negra y caja blanca
Software caja negra y caja blancaSoftware caja negra y caja blanca
Software caja negra y caja blanca
 
Sesion 5 1 diagrama de secuencia
Sesion 5 1 diagrama de secuenciaSesion 5 1 diagrama de secuencia
Sesion 5 1 diagrama de secuencia
 
Seguridad en centros de computo
Seguridad en centros de computoSeguridad en centros de computo
Seguridad en centros de computo
 
Requerimientos del software
Requerimientos del software Requerimientos del software
Requerimientos del software
 
Especificación de Arquitectura de Software
Especificación de Arquitectura de SoftwareEspecificación de Arquitectura de Software
Especificación de Arquitectura de Software
 
Conceptos de diseño de software
Conceptos de diseño de softwareConceptos de diseño de software
Conceptos de diseño de software
 
Introduccion a la Ingeniería de Software
Introduccion a la Ingeniería de SoftwareIntroduccion a la Ingeniería de Software
Introduccion a la Ingeniería de Software
 
Guia iso 9126
Guia iso 9126Guia iso 9126
Guia iso 9126
 
Tipos de pruebas de software
Tipos de pruebas de softwareTipos de pruebas de software
Tipos de pruebas de software
 
Adquisición de software y hardware
Adquisición de software y hardwareAdquisición de software y hardware
Adquisición de software y hardware
 

Andere mochten auch

Elemento tipicos de las interfaces graficas de usuario
Elemento tipicos de las interfaces graficas de usuario Elemento tipicos de las interfaces graficas de usuario
Elemento tipicos de las interfaces graficas de usuario ivancmontero
 
Elementos de una interfaz Gráfica
Elementos de una interfaz GráficaElementos de una interfaz Gráfica
Elementos de una interfaz Gráficapantonyerivera
 
elementos tipicos de las interfaces graficas de usuario
elementos tipicos de las interfaces graficas de usuarioelementos tipicos de las interfaces graficas de usuario
elementos tipicos de las interfaces graficas de usuarioantosaavedra35
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioAntonio Albanés
 
Interfaz gráfica de usuario
Interfaz gráfica de usuarioInterfaz gráfica de usuario
Interfaz gráfica de usuarioLuisa Arenas
 
Aproximación semio cognitiva a la Interfaz Gráfica de Usuario
Aproximación semio cognitiva a la Interfaz Gráfica de UsuarioAproximación semio cognitiva a la Interfaz Gráfica de Usuario
Aproximación semio cognitiva a la Interfaz Gráfica de UsuarioCarlos Marrero
 
Elementos del diseño de interfaces
Elementos del diseño de interfacesElementos del diseño de interfaces
Elementos del diseño de interfacesPercy Negrete
 
Historia De La Interfaz GráFica
Historia De La Interfaz GráFicaHistoria De La Interfaz GráFica
Historia De La Interfaz GráFicaXimena Tabares
 
Interfaz gráfica de usuario
Interfaz gráfica de usuarioInterfaz gráfica de usuario
Interfaz gráfica de usuarioaleja0940
 
Plantilla para evaluar herramientas virtuales
Plantilla para evaluar herramientas virtualesPlantilla para evaluar herramientas virtuales
Plantilla para evaluar herramientas virtualesGalasan
 
1.3 RETROSPECTIVA DE LAS INTERFACES GRAFICAS
1.3 RETROSPECTIVA DE LAS INTERFACES GRAFICAS1.3 RETROSPECTIVA DE LAS INTERFACES GRAFICAS
1.3 RETROSPECTIVA DE LAS INTERFACES GRAFICASAnastacio Jaimes
 
Interfaces graficas de usuario
Interfaces graficas de usuarioInterfaces graficas de usuario
Interfaces graficas de usuarioosni2
 
Introduccion a la Programacion Orientada a Objetos
Introduccion a la Programacion Orientada a ObjetosIntroduccion a la Programacion Orientada a Objetos
Introduccion a la Programacion Orientada a Objetosliberaunlibroupeg
 

Andere mochten auch (20)

Elemento tipicos de las interfaces graficas de usuario
Elemento tipicos de las interfaces graficas de usuario Elemento tipicos de las interfaces graficas de usuario
Elemento tipicos de las interfaces graficas de usuario
 
Elementos de una interfaz Gráfica
Elementos de una interfaz GráficaElementos de una interfaz Gráfica
Elementos de una interfaz Gráfica
 
elementos tipicos de las interfaces graficas de usuario
elementos tipicos de las interfaces graficas de usuarioelementos tipicos de las interfaces graficas de usuario
elementos tipicos de las interfaces graficas de usuario
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de Usuario
 
Interfaces gráficas de usuario
Interfaces gráficas de usuarioInterfaces gráficas de usuario
Interfaces gráficas de usuario
 
Interfaz grafica
Interfaz graficaInterfaz grafica
Interfaz grafica
 
Interfaz gráfica de usuario
Interfaz gráfica de usuarioInterfaz gráfica de usuario
Interfaz gráfica de usuario
 
Aproximación semio cognitiva a la Interfaz Gráfica de Usuario
Aproximación semio cognitiva a la Interfaz Gráfica de UsuarioAproximación semio cognitiva a la Interfaz Gráfica de Usuario
Aproximación semio cognitiva a la Interfaz Gráfica de Usuario
 
Interfaz gráfica de usuario (GUI)
Interfaz gráfica de usuario (GUI)Interfaz gráfica de usuario (GUI)
Interfaz gráfica de usuario (GUI)
 
Elementos del diseño de interfaces
Elementos del diseño de interfacesElementos del diseño de interfaces
Elementos del diseño de interfaces
 
Historia De La Interfaz GráFica
Historia De La Interfaz GráFicaHistoria De La Interfaz GráFica
Historia De La Interfaz GráFica
 
Interfaz gráfica de usuario
Interfaz gráfica de usuarioInterfaz gráfica de usuario
Interfaz gráfica de usuario
 
Como evaluar una página web
Como evaluar una página webComo evaluar una página web
Como evaluar una página web
 
Plantilla para evaluar herramientas virtuales
Plantilla para evaluar herramientas virtualesPlantilla para evaluar herramientas virtuales
Plantilla para evaluar herramientas virtuales
 
1.3 RETROSPECTIVA DE LAS INTERFACES GRAFICAS
1.3 RETROSPECTIVA DE LAS INTERFACES GRAFICAS1.3 RETROSPECTIVA DE LAS INTERFACES GRAFICAS
1.3 RETROSPECTIVA DE LAS INTERFACES GRAFICAS
 
R squared project
R squared projectR squared project
R squared project
 
interfaz de usuario
interfaz de usuario interfaz de usuario
interfaz de usuario
 
Interfaces graficas de usuario
Interfaces graficas de usuarioInterfaces graficas de usuario
Interfaces graficas de usuario
 
Introduccion a la Programacion Orientada a Objetos
Introduccion a la Programacion Orientada a ObjetosIntroduccion a la Programacion Orientada a Objetos
Introduccion a la Programacion Orientada a Objetos
 
Intrefaz gráfica de usuario
Intrefaz gráfica de usuarioIntrefaz gráfica de usuario
Intrefaz gráfica de usuario
 

Ähnlich wie Interfaz GUI diseño principios

TP GUI - Livio Palmieri, Gomez Enrique
TP GUI - Livio Palmieri, Gomez EnriqueTP GUI - Livio Palmieri, Gomez Enrique
TP GUI - Livio Palmieri, Gomez EnriqueOmar Gomez
 
Prototipando experiencias de usuario
Prototipando experiencias de usuarioPrototipando experiencias de usuario
Prototipando experiencias de usuarioUX Nights
 
Universidad autónoma de aguascalientes
Universidad autónoma de aguascalientesUniversidad autónoma de aguascalientes
Universidad autónoma de aguascalientesDayana1234
 
Universidad autónoma de aguascalientes
Universidad autónoma de aguascalientesUniversidad autónoma de aguascalientes
Universidad autónoma de aguascalientesDayana1234
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuarioBayardo Medina
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuarioBayardo Medina
 
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 usuariocelesteorellana
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01hucarre
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01hucarre
 
Diseño de la interfaz del sitio de comercio electrónico
Diseño de la interfaz del sitio de comercio electrónicoDiseño de la interfaz del sitio de comercio electrónico
Diseño de la interfaz del sitio de comercio electrónicoGaby Bolaños Gomez
 
Arquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadArquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadIvan Aguilar
 
User interface requeriments
User interface requerimentsUser interface requeriments
User interface requerimentsIsrael León
 
Diseño de interfaces móviles (UX y la arquitectura de software)
Diseño de interfaces móviles (UX y la arquitectura de software)Diseño de interfaces móviles (UX y la arquitectura de software)
Diseño de interfaces móviles (UX y la arquitectura de software)jezabelink
 
La revolución UX en Mobile Testing
La revolución UX en Mobile TestingLa revolución UX en Mobile Testing
La revolución UX en Mobile TestingBelatrix Software
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuarioYesith Valencia
 
Prototipado rapido de interfaces
Prototipado rapido de interfacesPrototipado rapido de interfaces
Prototipado rapido de interfacesNOEMI DORIS
 
15-Unidad 4: Introducción a las Arquitecturas Web 4.1 DAO 4.2 MVC
15-Unidad 4: Introducción a las Arquitecturas Web 4.1 DAO 4.2 MVC15-Unidad 4: Introducción a las Arquitecturas Web 4.1 DAO 4.2 MVC
15-Unidad 4: Introducción a las Arquitecturas Web 4.1 DAO 4.2 MVCLuis Fernando Aguas Bucheli
 

Ähnlich wie Interfaz GUI diseño principios (20)

TP GUI - Livio Palmieri, Gomez Enrique
TP GUI - Livio Palmieri, Gomez EnriqueTP GUI - Livio Palmieri, Gomez Enrique
TP GUI - Livio Palmieri, Gomez Enrique
 
Prototipando experiencias de usuario
Prototipando experiencias de usuarioPrototipando experiencias de usuario
Prototipando experiencias de usuario
 
Universidad autónoma de aguascalientes
Universidad autónoma de aguascalientesUniversidad autónoma de aguascalientes
Universidad autónoma de aguascalientes
 
Universidad autónoma de aguascalientes
Universidad autónoma de aguascalientesUniversidad autónoma de aguascalientes
Universidad autónoma de aguascalientes
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuario
 
Diseño interfaz de usuario
Diseño interfaz de  usuarioDiseño interfaz de  usuario
Diseño interfaz de usuario
 
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
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01
 
Diseño de la interfaz del sitio de comercio electrónico
Diseño de la interfaz del sitio de comercio electrónicoDiseño de la interfaz del sitio de comercio electrónico
Diseño de la interfaz del sitio de comercio electrónico
 
Arquitectura de la información y Usabilidad
Arquitectura de la información y UsabilidadArquitectura de la información y Usabilidad
Arquitectura de la información y Usabilidad
 
User interface requeriments
User interface requerimentsUser interface requeriments
User interface requeriments
 
Interfaces de usuario
Interfaces de usuarioInterfaces de usuario
Interfaces de usuario
 
Diseño de interfaces móviles (UX y la arquitectura de software)
Diseño de interfaces móviles (UX y la arquitectura de software)Diseño de interfaces móviles (UX y la arquitectura de software)
Diseño de interfaces móviles (UX y la arquitectura de software)
 
mobile
mobilemobile
mobile
 
La revolución UX en Mobile Testing
La revolución UX en Mobile TestingLa revolución UX en Mobile Testing
La revolución UX en Mobile Testing
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
 
Prototipado rapido de interfaces
Prototipado rapido de interfacesPrototipado rapido de interfaces
Prototipado rapido de interfaces
 
15-Unidad 4: Introducción a las Arquitecturas Web 4.1 DAO 4.2 MVC
15-Unidad 4: Introducción a las Arquitecturas Web 4.1 DAO 4.2 MVC15-Unidad 4: Introducción a las Arquitecturas Web 4.1 DAO 4.2 MVC
15-Unidad 4: Introducción a las Arquitecturas Web 4.1 DAO 4.2 MVC
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
 

Interfaz GUI diseño principios

  • 2. Fernando Ariel Lugones Metodología de Sistemas 4ºC 13/11/2013 Bibliografía: Bruce Tognassini •Pautas de Diseño de Interfaces Gráficas Basadas en el Modelo de Aprendizaje S.O.I., •Linux •Gregoria Romero, Youtube
  • 3. Interfaz Gráfica del Usuario • • • • Permite ver y manipular los datos de la aplicación Es parte del nivel de presentación Se conecta al nivel del negocio Un buen diseño de interfaz de usuario puede significar una ventaja competitiva
  • 4. Importancia de un buen diseño de interfaz • Las interfaces ha ido evolucionando conforme al tiempo, no solo por los avances tecnológicos sino también por las necesidades del usuario. • En un Mercado competitivo como el actual, en donde se desarrollan aplicaciones para usuarios, es muy importante tener un buen diseño. Una interfaz amigable e intuitiva es mas atractiva para los usuarios.
  • 5. Principios de diseño Para diseñar correctamente una interfaz de usuario debemos: •Identificar la navegación para los usuario de la interfaz •Validar los datos de entrada •Establecer formas apropiadas para presentar resultados
  • 6. Antes de realizar el diseño de una interfaz de usuario se debe considerar lo siguiente: • La estructura en la interfaz • Los objetos que se van a estar manipulando • La facilidad que tiene el usuario para el manejo de las funcionalidades de la aplicación • La mejor manera de presentar todos los objetos dentro de la aplicación
  • 7. Principios básicos de diseño para interfaces de usuario • • • • • • • Amigable al uso Control del Usuario Consistencia Retroalimentación Directo Accesos Rápidos Estética
  • 8. Amigable al uso • Se debe de minimizar el numero de pasos a seguir para completar una tarea
  • 9. Control del usuario • El usuario tiene que tener la confianza en que el sistema responderá según lo que quiera
  • 10. Consistencia • Aplicar los conocimientos adquiridos • Uso de estándares
  • 11. Retroalimentación • Los sistemas deben ser capaz de darle información al usuario
  • 12. Directo • Debe de mostrarle al usuario de una manera visual el resultado de alguna acción
  • 13. Accesos Rápidos • Para completar alguna tarea mucho más rápido • Una manera mas cómoda
  • 14. Estética • Visiblemente amigable • Correcta posición de los elementos
  • 15. Identificar la forma de navegar a traves de una interfaz de usuario • Los usuarios que utilizan la computadora como su herramienta de trabajo encuentran muy importante la forma en que ellos estarán navegando a través de las ventanas y opciones.
  • 16. Asistencia para el Usuario • • • • • Menu de ayuda o archivos de ayuda Tooltips y barras de estado Asistencia de tareas Asistencia(el asistente de algún programa) Que es esto?
  • 17. Procedimientos de entradas y salidas Entradas: 1.Validar que pertenezca al alfabeto deseado 2.Que este en el rango esperado Salidas: 1.Posición 2.Consistencia 3.Simple
  • 18. Como implementar las interfaces • Unicode: El lenguaje internacional de la norma página de códigos puede soportar casi todos los idiomas conocidos y símbolo en uso hoy en día • Installs Shieds: Proporciona herramientas de desarrollo de software diseñado para permitir la distribución de software para todas las plataformas Windows • Microsoft Systems Management Server: Una solución completa para la gestión de los ordenadores personales de forma centralizada en una red de cualquier tamaño
  • 19. Cuestiones de Interfaces Hacer uso eficaz de las interfaces de múltiples documentos(MDI): •Los documentos(MDI) permite a los usuarios trabajar con más documentos a la vez
  • 20. Navegacion en la interfaz de usuario • • • • • • • Los menús proveen una forma sencilla de navegar La simplicidad y consistencia son muy importantes Se debe pensar en: La estructura de la interfaz Los objetos que manipula el usuario Las vistas para mostrar esos objetos Los controles
  • 21. Validación de datos de entrada • Verificar que todos los datos que proporciona el usuario sean correctos • Validación del tipo de dato • Validación del rango
  • 22. Características de la Interfaz Gráfica • • • • • • • • • • • • Anticipación Autonomía Consistencia Valores predeterminados Eficacia del Usuario Interfaces explorables Objetos de la interfaz humana Aprendizaje Metáforas Proteger el trabajo de los usuarios Legibilidad Navegación Visible
  • 23. Anticipación • Las aplicaciones deben intentar anticipar necesidades y deseos de los usuarios
  • 24. Autonomía • El ordenador, la interfaz y el entorno de tarea pertenecen al usuario • Utilizar los mecanismos del estado para mantener los usuarios consciente e informado • Mantener información de estado hasta la fecha y dentro de vista fácil
  • 25. Consistencia • Niveles de consistencia • Imcopatibilidad • La consistencia más importante es la consistencia con las expectativas del usuario
  • 26. Valores predeterminados • Campos que contienen valores predeterminados deben subir seleccionados • Por defecto debería ser inteligente y sensible
  • 27. Eficacia del Usuario • Mira en la productividad del usuario, no de la computadora • Mantener al usuario ocupado • Para maximizar la eficiencia de una empresa u otra organización debe maximizar la eficiencia de todo el mundo
  • 28. Interfaces explorables • Dar señales y caminos bien señalizados a los usuarios • Ofrecer a los usuarios pautas perceptuales • Realizar acciones reversibles
  • 29. Objetos de la interfaz humana • Objetos de la interfaz humana puede ser vistos,oído, tocado o percibe lo contrario • Tiene una forma estandar de interacción • Tienen comportamiento resultantes estandar • Deben ser compresibles, uniformes y estables
  • 30. Aprendizaje • Limitar las ventajas y desventajas
  • 31. Metáforas • Elegir bien las metáforas, que permitirán a los usuarios a comprender al instante los detalles más finos del modelo conceptual
  • 32. Proteger el trabajo de los usuarios • Asegurarse de que los usuarios nunca pierdan su trabajo como resultado de error de su parte, o cualquier otro motivo inevitable
  • 33. Legibilidad • Texto que debe leerse debe tener alto contraste
  • 34. Navegación visible • Evitar la navegación invisible, la mayoría de los usuarios no puede y no construirá la elaboración de mapas conceptuales
  • 35. Pautas de Diseño de Interfaz Gráfica de Usuario 1. Estructura de la información y las tareas del usuario en la aplicación 2. Punto focal en la ventana 3. Estructura y consistencia entre ventanas 4. Relación entre elementos 5. Legibilidad y flujo entre elementos 6. Integración
  • 36. Redacción de texto en la interfaz • Brevedad: Se sugiere eliminar las palabras innecesarias y redactar textos breves sin sacrificar la claridad y facilidad de comprensión • Lenguaje: Utilizar la gramática correcta y estándar, un lenguaje claro y coherente en la interfaz mejora la facilidad de uso de la aplicación
  • 37. Accesibilidad • La aplicación debe ser accesible para todos los usuarios o la mayoría de ellos, dependiendo el contexto o la usabilidad que se pretender dar. • Exiten estrategias de diseño, dependiendo de las necesidades a cubrir.
  • 38. Formas apropiadas para presentar resultados Las formas de representar los resultados en una aplicación tiene gran impacto sobre la usabilidad de la aplicación. Los aspectos a tomar en cuenta son: •La posición y el orden •La consistencia •Representación graficas conocidas •Espacio vacíos dentro de la misma •Simpleza