SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

SO Unidad 1: Introducción a los Sistemas Operativos
SO Unidad 1: Introducción a los Sistemas OperativosSO Unidad 1: Introducción a los Sistemas Operativos
SO Unidad 1: Introducción a los Sistemas OperativosFranklin Parrales Bravo
 
El régimen jurídico de la información en méxico
El régimen jurídico de la información en méxicoEl régimen jurídico de la información en méxico
El régimen jurídico de la información en méxicoJuan Anaya
 
Fundamentos de la arquitectura de software
Fundamentos de la arquitectura de softwareFundamentos de la arquitectura de software
Fundamentos de la arquitectura de softwareRoger Villegas
 
Ingeniería del Software de Gestión. Tema 4
Ingeniería del Software de Gestión. Tema 4Ingeniería del Software de Gestión. Tema 4
Ingeniería del Software de Gestión. Tema 4Enrique Barreiro
 
Interacción humano computador
Interacción humano computadorInteracción humano computador
Interacción humano computadorDessireWpe
 
Técnicas para la Obtención de Requerimientos
Técnicas para la Obtención de RequerimientosTécnicas para la Obtención de Requerimientos
Técnicas para la Obtención de RequerimientosJuan Carlos Olivares Rojas
 
Temario sistemas programables
Temario   sistemas programablesTemario   sistemas programables
Temario sistemas programablesYuseff Bladeshark
 
Instalacion de redes locales (2)
Instalacion de redes locales (2)Instalacion de redes locales (2)
Instalacion de redes locales (2)Aime Rodriguez
 
1.2 arquitectura en 2 capas
1.2 arquitectura en 2 capas1.2 arquitectura en 2 capas
1.2 arquitectura en 2 capasEsbeyiz
 
Historia de las redes informaticas
Historia de las redes informaticasHistoria de las redes informaticas
Historia de las redes informaticasJohanna Castro Plaza
 

Tendances (20)

Ejemplo rup
Ejemplo rupEjemplo rup
Ejemplo rup
 
SO Unidad 1: Introducción a los Sistemas Operativos
SO Unidad 1: Introducción a los Sistemas OperativosSO Unidad 1: Introducción a los Sistemas Operativos
SO Unidad 1: Introducción a los Sistemas Operativos
 
Metodología RUP
Metodología RUPMetodología RUP
Metodología RUP
 
El régimen jurídico de la información en méxico
El régimen jurídico de la información en méxicoEl régimen jurídico de la información en méxico
El régimen jurídico de la información en méxico
 
Fundamentos de la arquitectura de software
Fundamentos de la arquitectura de softwareFundamentos de la arquitectura de software
Fundamentos de la arquitectura de software
 
Unidad 2 sistemas programables
Unidad 2 sistemas programables Unidad 2 sistemas programables
Unidad 2 sistemas programables
 
Ingenieria de software
Ingenieria de softwareIngenieria de software
Ingenieria de software
 
Principios del RUP
Principios del RUPPrincipios del RUP
Principios del RUP
 
Cliente servidor
Cliente servidorCliente servidor
Cliente servidor
 
Ingeniería del Software de Gestión. Tema 4
Ingeniería del Software de Gestión. Tema 4Ingeniería del Software de Gestión. Tema 4
Ingeniería del Software de Gestión. Tema 4
 
Herramientas case
Herramientas caseHerramientas case
Herramientas case
 
Interacción humano computador
Interacción humano computadorInteracción humano computador
Interacción humano computador
 
Técnicas para la Obtención de Requerimientos
Técnicas para la Obtención de RequerimientosTécnicas para la Obtención de Requerimientos
Técnicas para la Obtención de Requerimientos
 
Temario sistemas programables
Temario   sistemas programablesTemario   sistemas programables
Temario sistemas programables
 
Instalacion de redes locales (2)
Instalacion de redes locales (2)Instalacion de redes locales (2)
Instalacion de redes locales (2)
 
Arquitectura de Redes
Arquitectura de RedesArquitectura de Redes
Arquitectura de Redes
 
1.2 arquitectura en 2 capas
1.2 arquitectura en 2 capas1.2 arquitectura en 2 capas
1.2 arquitectura en 2 capas
 
Proyecto final de software
Proyecto final de softwareProyecto final de software
Proyecto final de software
 
Historia de las redes informaticas
Historia de las redes informaticasHistoria de las redes informaticas
Historia de las redes informaticas
 
Modelo osi
Modelo   osiModelo   osi
Modelo osi
 

En vedette

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
 

En vedette (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
 

Similaire à Interfaz gráfica del usuario

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
 
Taller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uMLTaller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uMLAderMogollonLuna
 
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
 

Similaire à Interfaz gráfica del usuario (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
 
Taller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uMLTaller construcción de Prototipos Uno uML
Taller construcción de Prototipos Uno uML
 
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
 

Interfaz gráfica del usuario

  • 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