SlideShare una empresa de Scribd logo
1 de 10
Diseño Interfaz de Usuario

    BAYARDO MEDINA DIAZ
    ERIC CASTRO NAVARRO
     LUIS GABRIEL TORRES
INTERFAZ GRAFICA DE USUARIO

La interfaz gráfica de usuario, conocida también como GUI (del inglés

graphical user interface) es un programa informático que actúa de interfaz

de usuario, utilizando un conjunto de imágenes y objetos gráficos para

representar la información y acciones disponibles en la interfaz.
Características de las Interfaces gráficas de
               usuario (GUIs)
• Ventanas:
  – Ventanas múltiples permiten que se despliegue
    simultáneamente información diversa en la pantalla del
    usuario.
• Iconos:
  – Representan diferentes tipos de información, por ejemplo
    archivos, procesos ,etc.
• Menús:
  – Los comandos se seleccionan de un menú en lugar de
    teclearse en un lenguaje de ordenes.
• Apuntador:
  – Para seleccionar opciones de un menú o para
    indicar elementos de interés en una ventana , se
    utiliza un dispositivo apuntador , como el ratón.
• Gráficos:
  – Los elementos gráficos se pueden mezclar con
    texto en el mismo despliegue.
Ventajas de las GUIs

• Fáciles de aprender y utilizar.
• Para interactuar con el sistema , los
  usuarios cuentan con pantallas múltiples. Se
  puede pasar de una tarea a otra sin perder
  de vista la información de la anterior.
• Interacción rápida y acceso inmediato a
  cualquier punto de la pantalla.
Proceso de Diseño de la GUI

  Analizar y      Producir un
comprender las    prototipo de   Evaluar el diseño con los
actividades del    diseño en     usuarios finales
    usuario          papel




                  Diseñar el            Producir el
                  prototipo            prototipo del         Evaluar el diseño con los
                                     diseño dinámico             usuarios finales




                                      Prototipo              Implementar la interfaz del
                                      ejecutable             usuario final
Principios de diseño de Interfaces de
                  usuario
• Familiaridad del usuario:
  – Utilizar términos y conceptos que se toman de la
    experiencia de las personas que más utilizan el
    sistema.
• Consistencia:
  – Siempre que sea posible , la interfaz debe ser
    consistente en el sentido de que las operaciones
    comparables se activan de la misma forma.
• Mínima sorpresa:
  – El comportamiento del sistema no debe provocar
    sorpresa a los usuarios.
• Recuperabilidad:
  – La interfaz debe incluir mecanismos para permitir
    a los usuarios recuperarse de los errores. Esto
    puede ser de dos formas:
     • Confirmación de acciones destructivas
     • Proveer de un recurso para deshacer
• Guía al usuario:
  – Cuando los errores ocurren , la interfaz debe
    proveer retroalimentación significativa y
    características de ayuda sensible al contexto.
• Diversidad de usuarios:
  – La interfaz debe proveer características de
    interacción apropiada para los diferentes tipos de
    usuarios.
Interacción del usuario
• Una interfaz coherente debe integrar la interacción
  del usuario y la presentación de la información.
• Clasificación de la interacción en 5 estilos primarios:
   – Manipulación directa:
      •   Interacción directa con los objetos de la pantalla.
      •   Rápida e intuitiva
      •   Fácil de aprender
      •   Ejemplo: para borrar un archivo , el usuario lo arrastra al bote de
          basura. Videos de juegos

Más contenido relacionado

La actualidad más candente

Diseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoDiseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoadrianazamora
 
Desarrollo de Interfaces de Usuario Basadas en Modelos
Desarrollo de Interfaces de Usuario Basadas en ModelosDesarrollo de Interfaces de Usuario Basadas en Modelos
Desarrollo de Interfaces de Usuario Basadas en ModelosJuan Manuel Gonzalez Calleros
 
Diseño de Interfaces
Diseño de InterfacesDiseño de Interfaces
Diseño de InterfacesWilly Aguirre
 
Principios de interface de usuario (Diplomado Creacion Apps Cont. Dig. U Ibague)
Principios de interface de usuario (Diplomado Creacion Apps Cont. Dig. U Ibague)Principios de interface de usuario (Diplomado Creacion Apps Cont. Dig. U Ibague)
Principios de interface de usuario (Diplomado Creacion Apps Cont. Dig. U Ibague)Eivar Rojas Castro
 
Estándares para el diseño de interfaz
Estándares para el diseño de interfazEstándares para el diseño de interfaz
Estándares para el diseño de interfazJose Luis Dorao
 
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-trackingEvaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-trackingPercy Negrete
 
Interfaz con usuario
Interfaz con usuarioInterfaz con usuario
Interfaz con usuarioNorerod
 
El Proceso de Diseño de Interfaz del Usuario por Ian Sommerville
El Proceso de Diseño de Interfaz del Usuario por Ian SommervilleEl Proceso de Diseño de Interfaz del Usuario por Ian Sommerville
El Proceso de Diseño de Interfaz del Usuario por Ian SommervilleJuan Pablo Bustos Thames
 
Diseño de información, navegación e interfaces
Diseño de información, navegación e interfacesDiseño de información, navegación e interfaces
Diseño de información, navegación e interfacesLuis Carlos Aceves
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuarioaaaj1908
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuarioJoel lorenzo
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioLucasDanielB
 

La actualidad más candente (20)

Diseño de la interfaz de usuario
Diseño de la interfaz de usuarioDiseño de la interfaz de usuario
Diseño de la interfaz de usuario
 
Diseño de interfaz importancia y proceso
Diseño de interfaz importancia y procesoDiseño de interfaz importancia y proceso
Diseño de interfaz importancia y proceso
 
Diseño de interfaces
Diseño de interfacesDiseño de interfaces
Diseño de interfaces
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
 
Desarrollo de Interfaces de Usuario Basadas en Modelos
Desarrollo de Interfaces de Usuario Basadas en ModelosDesarrollo de Interfaces de Usuario Basadas en Modelos
Desarrollo de Interfaces de Usuario Basadas en Modelos
 
Interfaz gráfica del usuario
Interfaz gráfica del usuarioInterfaz gráfica del usuario
Interfaz gráfica del usuario
 
Diseño de Interfaces
Diseño de InterfacesDiseño de Interfaces
Diseño de Interfaces
 
Principios de interface de usuario (Diplomado Creacion Apps Cont. Dig. U Ibague)
Principios de interface de usuario (Diplomado Creacion Apps Cont. Dig. U Ibague)Principios de interface de usuario (Diplomado Creacion Apps Cont. Dig. U Ibague)
Principios de interface de usuario (Diplomado Creacion Apps Cont. Dig. U Ibague)
 
Estándares para el diseño de interfaz
Estándares para el diseño de interfazEstándares para el diseño de interfaz
Estándares para el diseño de interfaz
 
Diseño de Interfaces
Diseño de InterfacesDiseño de Interfaces
Diseño de Interfaces
 
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-trackingEvaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
Evaluación a interfaces - Test de usuarios,evaluación heurística y eye-tracking
 
Interfaz con usuario
Interfaz con usuarioInterfaz con usuario
Interfaz con usuario
 
El Proceso de Diseño de Interfaz del Usuario por Ian Sommerville
El Proceso de Diseño de Interfaz del Usuario por Ian SommervilleEl Proceso de Diseño de Interfaz del Usuario por Ian Sommerville
El Proceso de Diseño de Interfaz del Usuario por Ian Sommerville
 
Diseño de información, navegación e interfaces
Diseño de información, navegación e interfacesDiseño de información, navegación e interfaces
Diseño de información, navegación e interfaces
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
 
11.interfaz de usuario
11.interfaz de usuario11.interfaz de usuario
11.interfaz de usuario
 
Intrefaz
 Intrefaz Intrefaz
Intrefaz
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Interfaz Gráfica de Usuario
Interfaz Gráfica de UsuarioInterfaz Gráfica de Usuario
Interfaz Gráfica de Usuario
 

Destacado

El Proceso de Diseño de interfaces de usuario. Roger Pressman
El Proceso de Diseño de interfaces de usuario. Roger PressmanEl Proceso de Diseño de interfaces de usuario. Roger Pressman
El Proceso de Diseño de interfaces de usuario. Roger PressmanJuan Pablo Bustos Thames
 
Topicos especiales
Topicos especialesTopicos especiales
Topicos especialesBelén
 
Ensayo: Importancia de la Evaluación del Software Educativo
Ensayo: Importancia de la Evaluación del Software EducativoEnsayo: Importancia de la Evaluación del Software Educativo
Ensayo: Importancia de la Evaluación del Software Educativowww.unefm.edu.ve
 
Interfaces graficas de usuario
Interfaces graficas de usuarioInterfaces graficas de usuario
Interfaces graficas de usuarioosni2
 
Diseño de entrada eficaz (grupo 1)
Diseño de entrada eficaz (grupo 1)Diseño de entrada eficaz (grupo 1)
Diseño de entrada eficaz (grupo 1)ULEAM
 
Arquitectura de la informacion3
Arquitectura de la informacion3Arquitectura de la informacion3
Arquitectura de la informacion3Miguel Tortello
 
Computador
ComputadorComputador
Computadorncrnico
 
Ayuda para subir Power Points
Ayuda para subir Power PointsAyuda para subir Power Points
Ayuda para subir Power PointsEloyTrombone
 
Diseño de una entrada Eficaz (Analisis y diseño)
Diseño de una entrada Eficaz (Analisis y diseño)Diseño de una entrada Eficaz (Analisis y diseño)
Diseño de una entrada Eficaz (Analisis y diseño)ĦecŦor Rxmiirez
 
Eje tematico3. entradas de sistemas de informacion
Eje tematico3. entradas de sistemas de informacionEje tematico3. entradas de sistemas de informacion
Eje tematico3. entradas de sistemas de informacionJulian Uasapud
 
Patrones de arquitectura Software(Capa de Datos)
Patrones de arquitectura Software(Capa de Datos)Patrones de arquitectura Software(Capa de Datos)
Patrones de arquitectura Software(Capa de Datos)josecuartas
 
Insertar música o video en slideshare
Insertar música o video en slideshareInsertar música o video en slideshare
Insertar música o video en slideshareLaura Soulié
 
Software en tiempo real
Software en tiempo realSoftware en tiempo real
Software en tiempo realAeivans
 

Destacado (16)

El Proceso de Diseño de interfaces de usuario. Roger Pressman
El Proceso de Diseño de interfaces de usuario. Roger PressmanEl Proceso de Diseño de interfaces de usuario. Roger Pressman
El Proceso de Diseño de interfaces de usuario. Roger Pressman
 
Topicos especiales
Topicos especialesTopicos especiales
Topicos especiales
 
Ensayo: Importancia de la Evaluación del Software Educativo
Ensayo: Importancia de la Evaluación del Software EducativoEnsayo: Importancia de la Evaluación del Software Educativo
Ensayo: Importancia de la Evaluación del Software Educativo
 
Interfaces graficas de usuario
Interfaces graficas de usuarioInterfaces graficas de usuario
Interfaces graficas de usuario
 
Diseño de entrada eficaz (grupo 1)
Diseño de entrada eficaz (grupo 1)Diseño de entrada eficaz (grupo 1)
Diseño de entrada eficaz (grupo 1)
 
Arquitectura de la informacion3
Arquitectura de la informacion3Arquitectura de la informacion3
Arquitectura de la informacion3
 
Computador
ComputadorComputador
Computador
 
Ayuda para subir Power Points
Ayuda para subir Power PointsAyuda para subir Power Points
Ayuda para subir Power Points
 
Frame relay
Frame relayFrame relay
Frame relay
 
Diseño de una entrada Eficaz (Analisis y diseño)
Diseño de una entrada Eficaz (Analisis y diseño)Diseño de una entrada Eficaz (Analisis y diseño)
Diseño de una entrada Eficaz (Analisis y diseño)
 
Eje tematico3. entradas de sistemas de informacion
Eje tematico3. entradas de sistemas de informacionEje tematico3. entradas de sistemas de informacion
Eje tematico3. entradas de sistemas de informacion
 
Cómo subir un powerpoint
Cómo subir un powerpoint Cómo subir un powerpoint
Cómo subir un powerpoint
 
Reglas de Oro
Reglas de OroReglas de Oro
Reglas de Oro
 
Patrones de arquitectura Software(Capa de Datos)
Patrones de arquitectura Software(Capa de Datos)Patrones de arquitectura Software(Capa de Datos)
Patrones de arquitectura Software(Capa de Datos)
 
Insertar música o video en slideshare
Insertar música o video en slideshareInsertar música o video en slideshare
Insertar música o video en slideshare
 
Software en tiempo real
Software en tiempo realSoftware en tiempo real
Software en tiempo real
 

Similar a Diseño interfaz de usuario

Interfaz Usuario
Interfaz UsuarioInterfaz Usuario
Interfaz Usuariotaninof
 
Informatica taller 3 franklin licuy
Informatica taller 3 franklin licuyInformatica taller 3 franklin licuy
Informatica taller 3 franklin licuyFranklinlicuy
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañottEleny30
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo bañoEleny30
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuarioManuel Mujica
 
Usabilidad - Conceptos Básicos
Usabilidad - Conceptos BásicosUsabilidad - Conceptos Básicos
Usabilidad - Conceptos BásicosKarla Arosemena
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01hucarre
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01hucarre
 
TrAbAjO dE iNvEtIsGaCiOn
TrAbAjO dE iNvEtIsGaCiOnTrAbAjO dE iNvEtIsGaCiOn
TrAbAjO dE iNvEtIsGaCiOnpableus232323
 
Interfaces Gráficas de Usuario.pptx
Interfaces Gráficas de Usuario.pptxInterfaces Gráficas de Usuario.pptx
Interfaces Gráficas de Usuario.pptxJoseBarazarte4
 
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
 

Similar a Diseño interfaz de usuario (20)

Interfaz Usuario
Interfaz UsuarioInterfaz Usuario
Interfaz Usuario
 
HCI
HCIHCI
HCI
 
Informatica taller 3 franklin licuy
Informatica taller 3 franklin licuyInformatica taller 3 franklin licuy
Informatica taller 3 franklin licuy
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañott
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo baño
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
Intrefaz gráfica de usuario
Intrefaz gráfica de usuarioIntrefaz gráfica de usuario
Intrefaz gráfica de usuario
 
Intrefaz gráfica de usuario
Intrefaz gráfica de usuarioIntrefaz gráfica de usuario
Intrefaz gráfica de usuario
 
Interfaces de usuario inteligente
Interfaces de usuario inteligenteInterfaces de usuario inteligente
Interfaces de usuario inteligente
 
Usabilidad - Conceptos Básicos
Usabilidad - Conceptos BásicosUsabilidad - Conceptos Básicos
Usabilidad - Conceptos Básicos
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01
 
Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01Universidadautnomadeaguascalientes 101201081351-phpapp01
Universidadautnomadeaguascalientes 101201081351-phpapp01
 
Clase 04 diseno_ui
Clase 04 diseno_uiClase 04 diseno_ui
Clase 04 diseno_ui
 
Pressman y sommerville, GUI
Pressman y sommerville, GUIPressman y sommerville, GUI
Pressman y sommerville, GUI
 
TrAbAjO dE iNvEtIsGaCiOn
TrAbAjO dE iNvEtIsGaCiOnTrAbAjO dE iNvEtIsGaCiOn
TrAbAjO dE iNvEtIsGaCiOn
 
Interfaces Gráficas de Usuario.pptx
Interfaces Gráficas de Usuario.pptxInterfaces Gráficas de Usuario.pptx
Interfaces Gráficas de Usuario.pptx
 
Hci
HciHci
Hci
 
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
 
TISG
TISGTISG
TISG
 

Diseño interfaz de usuario

  • 1. Diseño Interfaz de Usuario BAYARDO MEDINA DIAZ ERIC CASTRO NAVARRO LUIS GABRIEL TORRES
  • 2. INTERFAZ GRAFICA DE USUARIO La interfaz gráfica de usuario, conocida también como GUI (del inglés graphical user interface) es un programa informático que actúa de interfaz de usuario, utilizando un conjunto de imágenes y objetos gráficos para representar la información y acciones disponibles en la interfaz.
  • 3. Características de las Interfaces gráficas de usuario (GUIs) • Ventanas: – Ventanas múltiples permiten que se despliegue simultáneamente información diversa en la pantalla del usuario. • Iconos: – Representan diferentes tipos de información, por ejemplo archivos, procesos ,etc. • Menús: – Los comandos se seleccionan de un menú en lugar de teclearse en un lenguaje de ordenes.
  • 4. • Apuntador: – Para seleccionar opciones de un menú o para indicar elementos de interés en una ventana , se utiliza un dispositivo apuntador , como el ratón. • Gráficos: – Los elementos gráficos se pueden mezclar con texto en el mismo despliegue.
  • 5. Ventajas de las GUIs • Fáciles de aprender y utilizar. • Para interactuar con el sistema , los usuarios cuentan con pantallas múltiples. Se puede pasar de una tarea a otra sin perder de vista la información de la anterior. • Interacción rápida y acceso inmediato a cualquier punto de la pantalla.
  • 6. Proceso de Diseño de la GUI Analizar y Producir un comprender las prototipo de Evaluar el diseño con los actividades del diseño en usuarios finales usuario papel Diseñar el Producir el prototipo prototipo del Evaluar el diseño con los diseño dinámico usuarios finales Prototipo Implementar la interfaz del ejecutable usuario final
  • 7. Principios de diseño de Interfaces de usuario • Familiaridad del usuario: – Utilizar términos y conceptos que se toman de la experiencia de las personas que más utilizan el sistema. • Consistencia: – Siempre que sea posible , la interfaz debe ser consistente en el sentido de que las operaciones comparables se activan de la misma forma.
  • 8. • Mínima sorpresa: – El comportamiento del sistema no debe provocar sorpresa a los usuarios. • Recuperabilidad: – La interfaz debe incluir mecanismos para permitir a los usuarios recuperarse de los errores. Esto puede ser de dos formas: • Confirmación de acciones destructivas • Proveer de un recurso para deshacer
  • 9. • Guía al usuario: – Cuando los errores ocurren , la interfaz debe proveer retroalimentación significativa y características de ayuda sensible al contexto. • Diversidad de usuarios: – La interfaz debe proveer características de interacción apropiada para los diferentes tipos de usuarios.
  • 10. Interacción del usuario • Una interfaz coherente debe integrar la interacción del usuario y la presentación de la información. • Clasificación de la interacción en 5 estilos primarios: – Manipulación directa: • Interacción directa con los objetos de la pantalla. • Rápida e intuitiva • Fácil de aprender • Ejemplo: para borrar un archivo , el usuario lo arrastra al bote de basura. Videos de juegos