 Principios de diseño de la interfaz de usuario
 Interacción del usuario
 Presentación de la información
 Soporte al u...
 El Diseño de la Interfaz de usuario es la
categoría de diseño que crea un medio
de comunicación entre el hombre y la
maq...
 Relativamente fáciles de aprender y utilizar.
 Para interactuar con el sistema el usuario
cuenta con Ventanas.
 Acceso...
 DISPOSITIVOS DE INTERFAZ HUMANA
 VENTANAS
Tipos
 Ventanas de Aplicación
 Ventanas de Ficheros
 MENUS
 Estado: Activ...
 ICONOS
 CONTROLES
 Botones
Botón en Relieve, Botón en forma de Radio, Botones de
Confirmación
 Elementos de entrada d...
LA INTERFAZ RECURRE A LA METAFORA
PARA PODER TRADUCIR EL LENGUAJE
COMPLETO DEL SISTEMA AL LENGUAJE
CONOCIDO DEL USUARIO PA...
 Anticipación
 Comunicación
 Consistencia
 Autonomía Controlada
 Eficiencia
 Flexibilidad
 Centrada en el Usuario
 Ley de Fitt
 Reducción de Latencia
 Facilidad de Aprendizaje
 Metáforas
 Legibilidad
 Segu...
 No forzar al usuario a leer grandes
cantidades de texto.
 Evitar los llamados iconos “under
construction”.
 La informa...
 El diseñador de la interfaz se enfrenta a
dos preguntas:
 ¿Cómo introducirá el usuario la
información?
 ¿Cómo se prese...
 Schneiderman clasificó, en 1998, en 5 estilos
primarios las formas de Interacción con el usuario.
1. Manipulación direct...
3. Llenado de formularios. En éste el usuario
llena campos.
 Algunos campos tienen menús y/o botones
asociados
4. Lenguaj...
Interfaz Gráfica del
Usuario
Interfaz de Lenguaje
de Comandos
Administrador de la
GUI
Interprete de
Lenguaje de
Comandos
S...
Información a
desplegar
Software de
Presentación
 Los diseñadores deben ser
conservadores en la utilización
del color para despliegues de
usuario.
 No deben ser más de 4 ó 5 colores
diferentes en una ventana y no más de
7 en una interfaz de sistema.
 Utilizar un camb...
 Utilizar el código de colores en una
forma consciente y consistente.
 Ser cuidadoso al utilizar pares de
colores.
› Alg...
 Asociar significados a colores
particulares.
 Utilizar demasiados colores en un
despliegue puede provocar confusión
par...
El Abastecimiento de guías al usuario cubre
tres áreas:
 Los mensajes producidos por el sistema en
respuesta a las accion...
 Los mensajes de error son la primera marca
que reciben los usuarios de un software
 Es por ello que siempre deben ser:
...
 Contexto.
› Debe estar pendiente de lo que hace el usuario y
ajustarse a las circunstancias de salida.
 Experiencia.
› ...
 Estilo.
› Los mensajes deben ser positivos en lugar de
negativos. No deben ser insultantes o
graciosos”.
 Cultura.
› Un...
 Cuando se presenta un mensaje de error y no
comprenden.
› El usuario va inmediatamente al sistema de ayuda
por informaci...
 Ésta no es estrictamente parte del diseño de la
interfaz de usuario pero es recomendable diseñar el
apoyo de ayuda en lí...
 Una descripción funcional que describe, muy
brevemente, los servicios que provee el
sistema.
› A los usuarios les debe s...
 Un manual introductorio.
› Introducción informal de lo que hace el sistema en su
utilización “normal”,
› Cómo recuperars...
 Proceso de valoración formal de la
utilización de una interfaz para verificar que
cumple sus requerimientos.
 La evalua...
 Existen varias técnicas menos caras y sencillas
para evaluar el diseño de la interfaz:
› Cuestionarios. Recolectan infor...
ATRIBUTO DESCRIPCIÓN
Aprendizaje ¿Cuánto tiempo tarda un
usuario nuevo en ser
productivo con el sistema?
Velocidad
de
oper...
ATRIBUTO DESCRIPCIÓN
Robustez ¿Qué tan tolerante es el sistema
a los errores del usuario?
Recuperación ¿Qué tan bien se re...
 El proceso de diseño se centra en el usuario.
 La interacción ocupa estilos varios
 El despliegue gráfico de resultado...
Nuevo Producto
Búsqueda de productos
Modificación de productos
Mensajes de Error
Registro de Ventas
Interfaz graficausu
Interfaz graficausu
Interfaz graficausu
Interfaz graficausu
Interfaz graficausu
Interfaz graficausu
Interfaz graficausu
Interfaz graficausu
Interfaz graficausu
Interfaz graficausu
Upcoming SlideShare
Loading in …5
×

Interfaz graficausu

1,477 views
1,405 views

Published on

Published in: Technology, Travel
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,477
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
93
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Interfaz graficausu

  1. 1.  Principios de diseño de la interfaz de usuario  Interacción del usuario  Presentación de la información  Soporte al usuario  Evaluación de la interfaz
  2. 2.  El Diseño de la Interfaz de usuario es la categoría de diseño que crea un medio de comunicación entre el hombre y la maquina.
  3. 3.  Relativamente fáciles de aprender y utilizar.  Para interactuar con el sistema el usuario cuenta con Ventanas.  Acceso inmediato a cualquier punto de la pantalla.
  4. 4.  DISPOSITIVOS DE INTERFAZ HUMANA  VENTANAS Tipos  Ventanas de Aplicación  Ventanas de Ficheros  MENUS  Estado: Activo, Inactivo, Seleccionado, Activado, Pulsado  Tipos: Menús Contextuales, Menús de Navegación, Menús Jerárquicos, Menú de Inicio
  5. 5.  ICONOS  CONTROLES  Botones Botón en Relieve, Botón en forma de Radio, Botones de Confirmación  Elementos de entrada de texto Campo de texto  Elementos de Información de salida Barra de Progreso, Cuadro de Consejo, Barra de Estados  Elementos compuestos Barra de Tareas, Combo de Texto
  6. 6. LA INTERFAZ RECURRE A LA METAFORA PARA PODER TRADUCIR EL LENGUAJE COMPLETO DEL SISTEMA AL LENGUAJE CONOCIDO DEL USUARIO PARA PERMITIR LA COMUNICACION
  7. 7.  Anticipación  Comunicación  Consistencia  Autonomía Controlada  Eficiencia  Flexibilidad
  8. 8.  Centrada en el Usuario  Ley de Fitt  Reducción de Latencia  Facilidad de Aprendizaje  Metáforas  Legibilidad  Seguimiento del Estado
  9. 9.  No forzar al usuario a leer grandes cantidades de texto.  Evitar los llamados iconos “under construction”.  La información importante debe colocarse dentro de las dimensiones típicas de la ventana del navegador.  La estética nunca debe sustituir a la funcionalidad.  Las opciones de navegación deben ser obvias.
  10. 10.  El diseñador de la interfaz se enfrenta a dos preguntas:  ¿Cómo introducirá el usuario la información?  ¿Cómo se presentará la información?
  11. 11.  Schneiderman clasificó, en 1998, en 5 estilos primarios las formas de Interacción con el usuario. 1. Manipulación directa. El usuario interactúa directamente con los objetos de la pantalla. 2. Selección de menús. En la que el usuario selecciona un comando de una lista de posibilidades .
  12. 12. 3. Llenado de formularios. En éste el usuario llena campos.  Algunos campos tienen menús y/o botones asociados 4. Lenguaje de comandos. El usuario emite comandos especiales y parámetros asociados para indicar al sistema que hacer. 5. Lenguaje natural.
  13. 13. Interfaz Gráfica del Usuario Interfaz de Lenguaje de Comandos Administrador de la GUI Interprete de Lenguaje de Comandos Sistema Operativo
  14. 14. Información a desplegar Software de Presentación
  15. 15.  Los diseñadores deben ser conservadores en la utilización del color para despliegues de usuario.
  16. 16.  No deben ser más de 4 ó 5 colores diferentes en una ventana y no más de 7 en una interfaz de sistema.  Utilizar un cambio de color para mostrar un cambio de estado en el sistema.  Utilizar el código de colores para apoyar la tarea que los usuarios están tratando de llevar a cabo, identificar anómalas o similitudes.
  17. 17.  Utilizar el código de colores en una forma consciente y consistente.  Ser cuidadoso al utilizar pares de colores. › Algunos paresde colores pueden ser perturbadores y difíciles de leer: Por ejemplo el ojo humano no puede enfocar simultáneamente el rojo y azul.
  18. 18.  Asociar significados a colores particulares.  Utilizar demasiados colores en un despliegue puede provocar confusión para entender la información.
  19. 19. El Abastecimiento de guías al usuario cubre tres áreas:  Los mensajes producidos por el sistema en respuesta a las acciones del usuario.  El sistema de ayuda en línea.  La documentación suministrada con el sistema.
  20. 20.  Los mensajes de error son la primera marca que reciben los usuarios de un software  Es por ello que siempre deben ser: › amables, concisos, consistentes y constructivos.  No deben ser insultantes o tener sonidos asociados que molesten al usuario.  En la medida de lo posible, el mensaje sugerirá cómo corregir el error. › El mensaje debe vincularse a un sistema de ayuda en línea sensible al contexto.
  21. 21.  Contexto. › Debe estar pendiente de lo que hace el usuario y ajustarse a las circunstancias de salida.  Experiencia. › Debe proveer mensajes para usuarios principiantes y usuarios ya familiarizados con el sistema.  Nivel de Habilidad. › Los mensajes se deben ajustar a las habilidades del usuario.
  22. 22.  Estilo. › Los mensajes deben ser positivos en lugar de negativos. No deben ser insultantes o graciosos”.  Cultura. › Un mensaje adecuado en una cultura podría no aceptarse en otra.
  23. 23.  Cuando se presenta un mensaje de error y no comprenden. › El usuario va inmediatamente al sistema de ayuda por información.  La ayuda provee varios puntos de entrada.  Ayuda para obtener explicación de un mensaje de error o  Explicación de un comando particular.
  24. 24.  Ésta no es estrictamente parte del diseño de la interfaz de usuario pero es recomendable diseñar el apoyo de ayuda en línea junto con la documentación en papel.  Los manuales del sistema proveen información más detallada de la ayuda en línea y se diseñan de tal forma que puedan serutilizados por diferentes clases de usuarios del sistema.
  25. 25.  Una descripción funcional que describe, muy brevemente, los servicios que provee el sistema. › A los usuarios les debe ser posible leer este documento junto con un manual introductorio y decidir si es el sistema que necesitan.  Un documento de instalación, que provee detalles de instalación como la configuración mínima de hardware requerida.
  26. 26.  Un manual introductorio. › Introducción informal de lo que hace el sistema en su utilización “normal”, › Cómo recuperarse de errores y reestablecimiento.  Un manual de referencia. › Describe los recursos del sistema y su utilización, provee una lista de mensajes de error y las posibles causas, describe recuperación de errores detectados.  Un manual de administrador. Se provee en algunos tipos de sistemas. › Mensaje generados cuando el sistema interactúe con otros sistemas y cómo reaccionar a estos mensajes, como reconocer y reparar problemas relacionados con el hardware.
  27. 27.  Proceso de valoración formal de la utilización de una interfaz para verificar que cumple sus requerimientos.  La evaluación sistemática del diseño de la interfaz puede ser un proceso caro que involucra científicos cognoscitivos y diseñadores gráficos.
  28. 28.  Existen varias técnicas menos caras y sencillas para evaluar el diseño de la interfaz: › Cuestionarios. Recolectan información de lo que opinan los usuarios. › Observar a los usuarios al momento de trabajar con el sistema. › Incluir código en el sistema que recolecte información de los recursos más usados y de los errores más comunes.
  29. 29. ATRIBUTO DESCRIPCIÓN Aprendizaje ¿Cuánto tiempo tarda un usuario nuevo en ser productivo con el sistema? Velocidad de operación ¿Qué tan bien responde el sistema a las operaciones de trabajo del usuario?
  30. 30. ATRIBUTO DESCRIPCIÓN Robustez ¿Qué tan tolerante es el sistema a los errores del usuario? Recuperación ¿Qué tan bien se recupera el sistema a los errores del usuario? Adaptación ¿Qué tan atado está el sistema a un solo modelo de trabajo?
  31. 31.  El proceso de diseño se centra en el usuario.  La interacción ocupa estilos varios  El despliegue gráfico de resultados se utiliza según el uso inmediato.  El color se debe usar en forma moderada  Hay dos tipos de ayuda: emergente y de información  Los mensajes de error no deben hacer sentir al usuario culpable.  La documentación del sistema incluye manuales para diversos niveles y usos  La documentación de desarrollo debe incluir valores cuantitativos, mismos que se deben aplicar en la evaluación.
  32. 32. Nuevo Producto
  33. 33. Búsqueda de productos
  34. 34. Modificación de productos
  35. 35. Mensajes de Error
  36. 36. Registro de Ventas

×