SlideShare ist ein Scribd-Unternehmen logo
1 von 15
Downloaden Sie, um offline zu lesen
Diseño de interfaz de usuario
    INGENIERIA DE SOFWARE 1




     Autor: Stalin Tuza
Diseño de interfaz de usuario
• El diseño de interfaz de usuario o ingeniería
  de la interfaz es el diseño de computadoras,
  aplicaciones, máquinas, dispositivos de
  comunicación móvil, aplicaciones de software,
  y sitios web enfocado en la experiencia de
  usuario y la interacción.
Diseño de interfaz de usuario
• Normalmente es una actividad multidisciplinar
  que involucra a varias ramas del diseño y el
  conocimiento como el diseño gráfico,
  industrial, web, de software y la ergonomía; y
  está implicado en un amplio rango de
  proyectos, desde sistemas para
  computadoras, vehículos hasta aviones
  comerciales.
Diseño de interfaz de usuario
• Su objetivo es que las aplicaciones o los objetos
  sean más atractivos y además, hacer que la
  interacción con el usuario sea lo más intuitiva
  posible, conocido como el diseño centrado en el
  usuario. En este sentido las disciplinas del diseño
  industrial y gráfico se encargan de que la
  actividad a desarrollar se comunique y aprenda lo
  más rápidamente, a través de recursos como la
  gráfica, los pictogramas, los estereotipos y la
  simbología, todo sin afectar el funcionamiento
  técnico eficiente
Modelo del usuario
• El usuario tiene su visión personal del sistema, y espera
  que éste se comporte de una cierta forma. Se puede
  conocer el modelo del usuario estudiándolo, ya sea
  realizando tests de usabilidad, entrevistas, o a través
  de una realimentación. Una interfaz debe facilitar el
  proceso de crear un modelo mental efectivo.

• Para ello son de gran utilidad las metáforas, que
  asocian un dominio nuevo a uno ya conocido por el
  usuario. Un ejemplo típico es la metáfora del escritorio,
  común a la mayoría de las interfaces gráficas actuales.
Modelo del diseñador
• El diseñador mezcla las necesidades, ideas,
  deseos del usuario y los materiales de que
  dispone el programador para diseñar un
  producto de software. Es un intermediario entre
  ambos.

• El modelo del diseñador describe los objetos que
  utiliza el usuario, su presentación al mismo y las
  técnicas de interacción para su manipulación.
  Consta de tres partes: presentación, interacción y
  relaciones entre los objetos
Modelo del diseñador
• La presentación es lo que primero capta la atención del usuario,
  pero más tarde pasa a un segundo plano, y adquiere más
  importancia la interacción con el producto para poder satisfacer sus
  expectativas. La presentación no es lo más relevante y un abuso en
  la misma (por ejemplo, en el color) puede ser contraproducente,
  distrayendo al usuario.

• La segunda parte del modelo define las técnicas de interacción del
  usuario, a través de diversos dispositivos.

• La tercera es la más importante, y es donde el diseñador determina
  la metáfora adecuada que encaja con el modelo mental del usuario.
  El modelo debe comenzar por esta parte e ir hacia arriba. Una vez
  definida la metáfora y los objetos del interfaz, los aspectos visuales
  saldrán de una manera lógica y fácil.
Modelo del diseñador
Modelo del programador
• Es el más fácil de visualizar, al poderse
  especificar formalmente. Está constituido por
  los objetos que manipula el programador,
  distintos de los que trata el usuario (ejemplo:
  el programador llama base de datos a lo que
  el usuario podría llamar agenda). Estos
  objetos deben esconderse del usuario.
Modelo del programador
• Los conocimientos del programador incluyen
  la plataforma de desarrollo, el sistema
  operativo, las herramientas de desarrollo y
  especificaciones. Sin embargo, esto no
  significa necesariamente que tenga la
  habilidad de proporcionar al usuario los
  modelos y metáforas más adecuadas. Muchos
  no consideran el modelo del usuario del
  programa, y sí sus propias expectativas acerca
  de cómo trabajar con la computadora.
Principios para el Diseño de Interfaces
              de Usuario
• Anticipación
Las aplicaciones deberían intentar anticiparse a
las necesidades del usuario y no esperar a que el
usuario      tenga      que        buscar      la
información, recopilarla o invocar las
herramientas que va a utilizar.
Principios para el Diseño de Interfaces
              de Usuario
• Autonomía
La computadora, la IU y el entorno de trabajo
deben estar a disposición del usuario. Se debe
dar al usuario el ambiente flexible para que
pueda aprender rápidamente a usar la
aplicación. Sin embargo, está comprobado que
el entorno de trabajo debe tener ciertas cotas,
es decir, ser explorable pero no azaroso.
Principios para el Diseño de Interfaces
              de Usuario
• Percepción del Color
Aunque se utilicen convenciones de color en la
IU, se deberían usar otros mecanismos
secundarios para proveer la información a
aquellos usuarios con problemas en la
visualización de colores
Principios para el Diseño de Interfaces
              de Usuario
• Valores por Defecto
No se debe utilizar la palabra "Defecto" en una
aplicación o servicio. Puede ser reemplazada por
"Estándar" o "Definida por el Usuario",
"Restaurar Valores Iniciales" o algún otro
término especifico que describa lo que está
sucediendo. Los valores por defecto deberían
ser opciones inteligentes y sensatas. Además,
los mismos tienen que ser fáciles de modificar.
Bibliografía

• Guía de Estudio del Módulo III "Metodología de Construcción de
  Sistemas de Software" de la Maestría en Ingeniería del Software,
  Escuela de Posgrado, Instituto Tecnológico de Buenos Aires.
• Molich, R., y Nielsen, J.,"Improving a human computer dialogue",
  Communications of the ACM 33, 3 (March), pp 338-348, 1990.
• Molich, R., y Nielsen, J., "Heuristic evaluation of user interfaces",
  Proceedings of the ACM CHI´90 Conference, pp. 249-256, 1990.
• Molich, R., y Nielsen, J., "Enhancing the explanatory power of
  usability heuristics", Proceedings of the ACM CHI´94 Conference,
  pp. 152-158, 1994.
• Durrett, H.J., "General Approach to Rapid Prototyping",
• http://swt.edu/~hd01/4326/PROTOTYP.htm, 1997.

Weitere ähnliche Inhalte

Was ist angesagt?

Validación de Requerimientos
Validación de RequerimientosValidación de Requerimientos
Validación de RequerimientosUTPL UTPL
 
Indagación de los requerimientos
Indagación de los requerimientosIndagación de los requerimientos
Indagación de los requerimientosUCATEBA
 
Modelado Orientado a Objetos
Modelado Orientado a ObjetosModelado Orientado a Objetos
Modelado Orientado a ObjetosRafael Miranda
 
Introducción al Diseño de Interacción Humano-Computadora
Introducción al Diseño de Interacción Humano-ComputadoraIntroducción al Diseño de Interacción Humano-Computadora
Introducción al Diseño de Interacción Humano-ComputadoraOmar Sosa-Tzec
 
Modelado del sistema
Modelado del sistemaModelado del sistema
Modelado del sistemaIsrael Rey
 
Ingeniería de requisitos
Ingeniería de requisitosIngeniería de requisitos
Ingeniería de requisitosZuleima
 
Ingenieria de software interaccion humano computador
Ingenieria de software interaccion humano computadorIngenieria de software interaccion humano computador
Ingenieria de software interaccion humano computadorCrhis
 
 Diagramas uml de sistema de cajero automático
 Diagramas uml de sistema de cajero automático Diagramas uml de sistema de cajero automático
 Diagramas uml de sistema de cajero automáticoItzel656131
 
Comprensión de los Requerimientos
Comprensión de los Requerimientos Comprensión de los Requerimientos
Comprensión de los Requerimientos Mauricio Blandon
 
PROGRAMACION CONCURRENTE
PROGRAMACION CONCURRENTEPROGRAMACION CONCURRENTE
PROGRAMACION CONCURRENTEgladysmamani
 

Was ist angesagt? (20)

Validación de Requerimientos
Validación de RequerimientosValidación de Requerimientos
Validación de Requerimientos
 
Estilos y Paradigmas de Interacción
Estilos y Paradigmas de InteracciónEstilos y Paradigmas de Interacción
Estilos y Paradigmas de Interacción
 
Diseño a Nivel de Componentes
Diseño a Nivel de ComponentesDiseño a Nivel de Componentes
Diseño a Nivel de Componentes
 
Indagación de los requerimientos
Indagación de los requerimientosIndagación de los requerimientos
Indagación de los requerimientos
 
Modelado Orientado a Objetos
Modelado Orientado a ObjetosModelado Orientado a Objetos
Modelado Orientado a Objetos
 
Sistemas distribuidos
Sistemas distribuidosSistemas distribuidos
Sistemas distribuidos
 
Modelo GOMS
Modelo GOMSModelo GOMS
Modelo GOMS
 
Metodologia oohdm
Metodologia oohdmMetodologia oohdm
Metodologia oohdm
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
Introducción al Diseño de Interacción Humano-Computadora
Introducción al Diseño de Interacción Humano-ComputadoraIntroducción al Diseño de Interacción Humano-Computadora
Introducción al Diseño de Interacción Humano-Computadora
 
Ingenieria de software
Ingenieria de softwareIngenieria de software
Ingenieria de software
 
Modelado del sistema
Modelado del sistemaModelado del sistema
Modelado del sistema
 
Ingeniería de requisitos
Ingeniería de requisitosIngeniería de requisitos
Ingeniería de requisitos
 
Ingenieria de software interaccion humano computador
Ingenieria de software interaccion humano computadorIngenieria de software interaccion humano computador
Ingenieria de software interaccion humano computador
 
 Diagramas uml de sistema de cajero automático
 Diagramas uml de sistema de cajero automático Diagramas uml de sistema de cajero automático
 Diagramas uml de sistema de cajero automático
 
Comprensión de los Requerimientos
Comprensión de los Requerimientos Comprensión de los Requerimientos
Comprensión de los Requerimientos
 
Diagramas De Caso De Uso
Diagramas De Caso De UsoDiagramas De Caso De Uso
Diagramas De Caso De Uso
 
Ingeniería de software modelo incremental
Ingeniería de software  modelo incrementalIngeniería de software  modelo incremental
Ingeniería de software modelo incremental
 
PROGRAMACION CONCURRENTE
PROGRAMACION CONCURRENTEPROGRAMACION CONCURRENTE
PROGRAMACION CONCURRENTE
 
UML
UMLUML
UML
 

Ähnlich wie Diseño de interfaz de usuario

Ähnlich wie Diseño de interfaz de usuario (20)

Diseño interfaze de usuario (carlos chulli quinto sistemas)
Diseño interfaze de usuario (carlos chulli  quinto sistemas)Diseño interfaze de usuario (carlos chulli  quinto sistemas)
Diseño interfaze de usuario (carlos chulli quinto sistemas)
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario03 7n2is trabajo-interfaz usuario
03 7n2is trabajo-interfaz usuario
 
Diseño de Interfaz web
Diseño de Interfaz webDiseño de Interfaz web
Diseño de Interfaz web
 
Diseño de interfaz de usuario
Diseño de interfaz de usuarioDiseño de interfaz de usuario
Diseño de interfaz de usuario
 
Diseño de interfaces de usuario
Diseño de interfaces de usuarioDiseño de interfaces de usuario
Diseño de interfaces de usuario
 
Hci
HciHci
Hci
 
Tp metodología interfaz de usuario - UTN FRA
Tp metodología interfaz de usuario - UTN FRATp metodología interfaz de usuario - UTN FRA
Tp metodología interfaz de usuario - UTN FRA
 
Diseño de sistemas
Diseño de sistemasDiseño de sistemas
Diseño de sistemas
 
conceptos de redes
conceptos de redesconceptos de redes
conceptos de redes
 
Ingeniería de usabilidad
Ingeniería de usabilidadIngeniería de usabilidad
Ingeniería de usabilidad
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
E. semana 2 módulo 1
E. semana 2 módulo 1E. semana 2 módulo 1
E. semana 2 módulo 1
 
Trabajo bañott
Trabajo bañottTrabajo bañott
Trabajo bañott
 
Trabajo baño
Trabajo bañoTrabajo baño
Trabajo baño
 
Interfaz de usuario
Interfaz de usuarioInterfaz de usuario
Interfaz de usuario
 
3490012.ppt
3490012.ppt3490012.ppt
3490012.ppt
 
Diseno de interfaces zyndi.pptx
Diseno de interfaces zyndi.pptxDiseno de interfaces zyndi.pptx
Diseno de interfaces zyndi.pptx
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 
Usabilidad
UsabilidadUsabilidad
Usabilidad
 

Mehr von Stalin Eduardo Tusa Vitar

Cambio de Paradigmas de Seguridad en Smarphones
Cambio de Paradigmas de Seguridad en SmarphonesCambio de Paradigmas de Seguridad en Smarphones
Cambio de Paradigmas de Seguridad en SmarphonesStalin Eduardo Tusa Vitar
 
Primera_Aplicación_Python_Django_Postgresql_Fedora_19
Primera_Aplicación_Python_Django_Postgresql_Fedora_19Primera_Aplicación_Python_Django_Postgresql_Fedora_19
Primera_Aplicación_Python_Django_Postgresql_Fedora_19Stalin Eduardo Tusa Vitar
 
Software Libre para SIG (Sistemas de Informacion Geográfica)
Software Libre para SIG (Sistemas de Informacion Geográfica)Software Libre para SIG (Sistemas de Informacion Geográfica)
Software Libre para SIG (Sistemas de Informacion Geográfica)Stalin Eduardo Tusa Vitar
 
Data Center y Virtualización - Infraestructura
Data Center y Virtualización - InfraestructuraData Center y Virtualización - Infraestructura
Data Center y Virtualización - InfraestructuraStalin Eduardo Tusa Vitar
 
Manual Jboss Server,Creación de Proyecto en Eclipse
Manual Jboss Server,Creación de Proyecto en EclipseManual Jboss Server,Creación de Proyecto en Eclipse
Manual Jboss Server,Creación de Proyecto en EclipseStalin Eduardo Tusa Vitar
 
RMI_Concepto_Elementos_Funciones_Ventajas_Desventajas
RMI_Concepto_Elementos_Funciones_Ventajas_DesventajasRMI_Concepto_Elementos_Funciones_Ventajas_Desventajas
RMI_Concepto_Elementos_Funciones_Ventajas_DesventajasStalin Eduardo Tusa Vitar
 

Mehr von Stalin Eduardo Tusa Vitar (20)

Sistemas Quipux, Axis Cloud, Webmail
Sistemas Quipux, Axis Cloud, WebmailSistemas Quipux, Axis Cloud, Webmail
Sistemas Quipux, Axis Cloud, Webmail
 
Cambio de Paradigmas de Seguridad en Smarphones
Cambio de Paradigmas de Seguridad en SmarphonesCambio de Paradigmas de Seguridad en Smarphones
Cambio de Paradigmas de Seguridad en Smarphones
 
Primera_Aplicación_Python_Django_Postgresql_Fedora_19
Primera_Aplicación_Python_Django_Postgresql_Fedora_19Primera_Aplicación_Python_Django_Postgresql_Fedora_19
Primera_Aplicación_Python_Django_Postgresql_Fedora_19
 
Software Libre para SIG (Sistemas de Informacion Geográfica)
Software Libre para SIG (Sistemas de Informacion Geográfica)Software Libre para SIG (Sistemas de Informacion Geográfica)
Software Libre para SIG (Sistemas de Informacion Geográfica)
 
Esx, vcenter, vclient, vmotion, freenas
Esx, vcenter, vclient, vmotion, freenas Esx, vcenter, vclient, vmotion, freenas
Esx, vcenter, vclient, vmotion, freenas
 
Data Center y Virtualización - Infraestructura
Data Center y Virtualización - InfraestructuraData Center y Virtualización - Infraestructura
Data Center y Virtualización - Infraestructura
 
Manual Jboss Server,Creación de Proyecto en Eclipse
Manual Jboss Server,Creación de Proyecto en EclipseManual Jboss Server,Creación de Proyecto en Eclipse
Manual Jboss Server,Creación de Proyecto en Eclipse
 
Toma de decisiones
Toma de decisionesToma de decisiones
Toma de decisiones
 
Sistemas de Almacenamiento Compartido
Sistemas de Almacenamiento CompartidoSistemas de Almacenamiento Compartido
Sistemas de Almacenamiento Compartido
 
RMI_Concepto_Elementos_Funciones_Ventajas_Desventajas
RMI_Concepto_Elementos_Funciones_Ventajas_DesventajasRMI_Concepto_Elementos_Funciones_Ventajas_Desventajas
RMI_Concepto_Elementos_Funciones_Ventajas_Desventajas
 
Ventas al mayoreo y distribución física
Ventas al mayoreo y distribución físicaVentas al mayoreo y distribución física
Ventas al mayoreo y distribución física
 
Terrorismo informático
Terrorismo informáticoTerrorismo informático
Terrorismo informático
 
Seguridad en el trabajo
Seguridad en el trabajoSeguridad en el trabajo
Seguridad en el trabajo
 
Manejo de prtg network monitor
Manejo de prtg network monitorManejo de prtg network monitor
Manejo de prtg network monitor
 
Prtg network monitor
Prtg network monitorPrtg network monitor
Prtg network monitor
 
Reorganizacion de una base de datos
Reorganizacion de una base de datosReorganizacion de una base de datos
Reorganizacion de una base de datos
 
Replicacion en SQLserver2008r2
Replicacion en  SQLserver2008r2Replicacion en  SQLserver2008r2
Replicacion en SQLserver2008r2
 
Ingenieria de Software (Openup)
Ingenieria de Software (Openup)Ingenieria de Software (Openup)
Ingenieria de Software (Openup)
 
Caracteristicas de dbms_SQL SERVER 2008
Caracteristicas de dbms_SQL SERVER 2008Caracteristicas de dbms_SQL SERVER 2008
Caracteristicas de dbms_SQL SERVER 2008
 
Funciones del DBA, SA Y DA
Funciones del DBA, SA Y DAFunciones del DBA, SA Y DA
Funciones del DBA, SA Y DA
 

Diseño de interfaz de usuario

  • 1. Diseño de interfaz de usuario INGENIERIA DE SOFWARE 1 Autor: Stalin Tuza
  • 2. Diseño de interfaz de usuario • El diseño de interfaz de usuario o ingeniería de la interfaz es el diseño de computadoras, aplicaciones, máquinas, dispositivos de comunicación móvil, aplicaciones de software, y sitios web enfocado en la experiencia de usuario y la interacción.
  • 3. Diseño de interfaz de usuario • Normalmente es una actividad multidisciplinar que involucra a varias ramas del diseño y el conocimiento como el diseño gráfico, industrial, web, de software y la ergonomía; y está implicado en un amplio rango de proyectos, desde sistemas para computadoras, vehículos hasta aviones comerciales.
  • 4. Diseño de interfaz de usuario • Su objetivo es que las aplicaciones o los objetos sean más atractivos y además, hacer que la interacción con el usuario sea lo más intuitiva posible, conocido como el diseño centrado en el usuario. En este sentido las disciplinas del diseño industrial y gráfico se encargan de que la actividad a desarrollar se comunique y aprenda lo más rápidamente, a través de recursos como la gráfica, los pictogramas, los estereotipos y la simbología, todo sin afectar el funcionamiento técnico eficiente
  • 5. Modelo del usuario • El usuario tiene su visión personal del sistema, y espera que éste se comporte de una cierta forma. Se puede conocer el modelo del usuario estudiándolo, ya sea realizando tests de usabilidad, entrevistas, o a través de una realimentación. Una interfaz debe facilitar el proceso de crear un modelo mental efectivo. • Para ello son de gran utilidad las metáforas, que asocian un dominio nuevo a uno ya conocido por el usuario. Un ejemplo típico es la metáfora del escritorio, común a la mayoría de las interfaces gráficas actuales.
  • 6. Modelo del diseñador • El diseñador mezcla las necesidades, ideas, deseos del usuario y los materiales de que dispone el programador para diseñar un producto de software. Es un intermediario entre ambos. • El modelo del diseñador describe los objetos que utiliza el usuario, su presentación al mismo y las técnicas de interacción para su manipulación. Consta de tres partes: presentación, interacción y relaciones entre los objetos
  • 7. Modelo del diseñador • La presentación es lo que primero capta la atención del usuario, pero más tarde pasa a un segundo plano, y adquiere más importancia la interacción con el producto para poder satisfacer sus expectativas. La presentación no es lo más relevante y un abuso en la misma (por ejemplo, en el color) puede ser contraproducente, distrayendo al usuario. • La segunda parte del modelo define las técnicas de interacción del usuario, a través de diversos dispositivos. • La tercera es la más importante, y es donde el diseñador determina la metáfora adecuada que encaja con el modelo mental del usuario. El modelo debe comenzar por esta parte e ir hacia arriba. Una vez definida la metáfora y los objetos del interfaz, los aspectos visuales saldrán de una manera lógica y fácil.
  • 9. Modelo del programador • Es el más fácil de visualizar, al poderse especificar formalmente. Está constituido por los objetos que manipula el programador, distintos de los que trata el usuario (ejemplo: el programador llama base de datos a lo que el usuario podría llamar agenda). Estos objetos deben esconderse del usuario.
  • 10. Modelo del programador • Los conocimientos del programador incluyen la plataforma de desarrollo, el sistema operativo, las herramientas de desarrollo y especificaciones. Sin embargo, esto no significa necesariamente que tenga la habilidad de proporcionar al usuario los modelos y metáforas más adecuadas. Muchos no consideran el modelo del usuario del programa, y sí sus propias expectativas acerca de cómo trabajar con la computadora.
  • 11. Principios para el Diseño de Interfaces de Usuario • Anticipación Las aplicaciones deberían intentar anticiparse a las necesidades del usuario y no esperar a que el usuario tenga que buscar la información, recopilarla o invocar las herramientas que va a utilizar.
  • 12. Principios para el Diseño de Interfaces de Usuario • Autonomía La computadora, la IU y el entorno de trabajo deben estar a disposición del usuario. Se debe dar al usuario el ambiente flexible para que pueda aprender rápidamente a usar la aplicación. Sin embargo, está comprobado que el entorno de trabajo debe tener ciertas cotas, es decir, ser explorable pero no azaroso.
  • 13. Principios para el Diseño de Interfaces de Usuario • Percepción del Color Aunque se utilicen convenciones de color en la IU, se deberían usar otros mecanismos secundarios para proveer la información a aquellos usuarios con problemas en la visualización de colores
  • 14. Principios para el Diseño de Interfaces de Usuario • Valores por Defecto No se debe utilizar la palabra "Defecto" en una aplicación o servicio. Puede ser reemplazada por "Estándar" o "Definida por el Usuario", "Restaurar Valores Iniciales" o algún otro término especifico que describa lo que está sucediendo. Los valores por defecto deberían ser opciones inteligentes y sensatas. Además, los mismos tienen que ser fáciles de modificar.
  • 15. Bibliografía • Guía de Estudio del Módulo III "Metodología de Construcción de Sistemas de Software" de la Maestría en Ingeniería del Software, Escuela de Posgrado, Instituto Tecnológico de Buenos Aires. • Molich, R., y Nielsen, J.,"Improving a human computer dialogue", Communications of the ACM 33, 3 (March), pp 338-348, 1990. • Molich, R., y Nielsen, J., "Heuristic evaluation of user interfaces", Proceedings of the ACM CHI´90 Conference, pp. 249-256, 1990. • Molich, R., y Nielsen, J., "Enhancing the explanatory power of usability heuristics", Proceedings of the ACM CHI´94 Conference, pp. 152-158, 1994. • Durrett, H.J., "General Approach to Rapid Prototyping", • http://swt.edu/~hd01/4326/PROTOTYP.htm, 1997.