<ul><li>Ventanas: </li></ul><ul><ul><li>Ventanas múltiples permiten que se despliegue simultáneamente información diversa ...
<ul><li>Apuntador: </li></ul><ul><ul><li>Para seleccionar opciones de un menú o para indicar elementos de interés en una v...
<ul><li>Fáciles de aprender y utilizar. </li></ul><ul><li>Para interactuar con el sistema , los usuarios cuentan con panta...
Analizar y comprender las actividades del usuario Producir un prototipo de diseño en papel Evaluar el diseño con los usuar...
<ul><li>Familiaridad del usuario: </li></ul><ul><ul><li>Utilizar términos y conceptos que se toman de la experiencia de la...
<ul><li>Mínima sorpresa: </li></ul><ul><ul><li>El comportamiento del sistema no debe provocar sorpresa a los usuarios. </l...
<ul><li>Guía al usuario: </li></ul><ul><ul><li>Cuando los errores ocurren , la interfaz debe proveer retroalimentación sig...
<ul><li>Una interfaz coherente debe integrar la interacción del usuario y la presentación de la información. </li></ul><ul...
<ul><ul><ul><li>Puede ser difícil de implementar. </li></ul></ul></ul><ul><ul><ul><li>Sólo es adecuada donde hay una metáf...
<ul><li>Llenado de formularios: </li></ul><ul><ul><li>Introducción de datos sencilla en los campos de un formulario. </li>...
<ul><li>Lenguaje Natural: </li></ul><ul><ul><li>El usuario emite comandos en lenguaje natural . </li></ul></ul><ul><ul><li...
<ul><li>Puede ser la presentación directa de la información de entrada (texto en un procesador de texto) o presentación gr...
<ul><li>Para encontrar la mejor presentación de la información es necesario conocer a los usuarios y y la forma en que uti...
<ul><li>¿El usuario debe llevar a cabo una acción en respuesta a los cambios de la información? </li></ul><ul><li>¿El usua...
Ene Feb. Mar Abril Mayo Junio 2842 2851 3164 2789 1273 2835
 
Presión 0  100  200  300  Temperatura 0  25  50  75  100
El nombre del archivo ya existe. Por favor, elija otro nombre . Cap. 15 diseño de la interfaz de usuario ! Aceptar Cancelar
<ul><li>Información climática: mapa climático con isobaras, frentes climáticos ,etc. </li></ul><ul><li>Estado de una red t...
<ul><li>El color ayuda y mejora la presentación de la interfaz , permitiendo al usuario comprender y manejar la complejida...
<ul><li>Utilizar un cambio de color para mostrar un cambio en el estado del sistema. </li></ul><ul><ul><li>Ejemplo semáfor...
<ul><li>Utilizar el código de colores en una forma consciente y consistente. </li></ul><ul><ul><li>Si usamos rojo para mos...
<ul><li>En general el color no debe utilizarse para representar algún significado por dos razones: </li></ul><ul><ul><li>C...
<ul><li>Los mensajes producidos por el sistema en respuesta a las acciones del usuario </li></ul><ul><li>El sistema de ayu...
<ul><li>Contexto: </li></ul><ul><ul><li>El sistema guía del usuario debe estar pendiente de lo que hace el usuario y ajust...
<ul><li>Nivel de habilidad: </li></ul><ul><ul><li>Conocer al usuario y sus habilidades implica adecuar los mensajes a la t...
Por favor, introduzca el nombre del paciente en el cuadro y presione la tecla Aceptar . Nombre del paciente Bates, J Acept...
Error # 27 Entrada inválida de la identificación del paciente. ? Aceptar Cancelar
El paciente J. Bates no está registrado Haga clic en Pacientes para una lista de pacientes registrados. Haga clic en Reint...
Entrada desde la aplicación Entrada desde el sistema de mensajes de error Entrada en el nivel superior
<ul><li>Estructura de red complejas </li></ul><ul><li>Cada marco de información se vincula con otro marco de información. ...
Descripción funcional Documento de instalación Manual de introducción Manual de referencia Guía del administrador Descripc...
<ul><li>Aprendizaje: </li></ul><ul><ul><li>¿Cuánto tiempo tarda un usuario nuevo en ser productivo con el sistema? </li></...
<ul><li>Recuperación: </li></ul><ul><ul><li>¿Qué tan bien se recupera el sistema a los errores del usuario? </li></ul></ul...
Upcoming SlideShare
Loading in …5
×

Diseño interfaz usuario

862 views
781 views

Published on

aaa

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
862
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
42
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Diseño interfaz usuario

  1. 2. <ul><li>Ventanas: </li></ul><ul><ul><li>Ventanas múltiples permiten que se despliegue simultáneamente información diversa en la pantalla del usuario. </li></ul></ul><ul><li>Iconos: </li></ul><ul><ul><li>Representan diferentes tipos de información, por ejemplo archivos, procesos ,etc. </li></ul></ul><ul><li>Menús: </li></ul><ul><ul><li>Los comandos se seleccionan de un menú en lugar de teclearse en un lenguaje de ordenes. </li></ul></ul>
  2. 3. <ul><li>Apuntador: </li></ul><ul><ul><li>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. </li></ul></ul><ul><li>Gráficos: </li></ul><ul><ul><li>Los elementos gráficos se pueden mezclar con texto en el mismo despliegue. </li></ul></ul>
  3. 4. <ul><li>Fáciles de aprender y utilizar. </li></ul><ul><li>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. </li></ul><ul><li>Interacción rápida y acceso inmediato a cualquier punto de la pantalla. </li></ul>
  4. 5. Analizar y comprender las actividades del usuario Producir un prototipo de diseño en papel Evaluar el diseño con los usuarios finales Diseñar el prototipo Producir el prototipo del diseño dinámico Evaluar el diseño con los usuarios finales Prototipo ejecutable Implementar la interfaz del usuario final
  5. 6. <ul><li>Familiaridad del usuario: </li></ul><ul><ul><li>Utilizar términos y conceptos que se toman de la experiencia de las personas que más utilizan el sistema. </li></ul></ul><ul><li>Consistencia: </li></ul><ul><ul><li>Siempre que sea posible , la interfaz debe ser consistente en el sentido de que las operaciones comparables se activan de la misma forma. </li></ul></ul>
  6. 7. <ul><li>Mínima sorpresa: </li></ul><ul><ul><li>El comportamiento del sistema no debe provocar sorpresa a los usuarios. </li></ul></ul><ul><li>Recuperabilidad: </li></ul><ul><ul><li>La interfaz debe incluir mecanismos para permitir a los usuarios recuperarse de los errores. Esto puede ser de dos formas: </li></ul></ul><ul><ul><ul><li>Confirmación de acciones destructivas </li></ul></ul></ul><ul><ul><ul><li>Proveer de un recurso para deshacer </li></ul></ul></ul>
  7. 8. <ul><li>Guía al usuario: </li></ul><ul><ul><li>Cuando los errores ocurren , la interfaz debe proveer retroalimentación significativa y características de ayuda sensible al contexto. </li></ul></ul><ul><li>Diversidad de usuarios: </li></ul><ul><ul><li>La interfaz debe proveer características de interacción apropiada para los diferentes tipos de usuarios. </li></ul></ul>
  8. 9. <ul><li>Una interfaz coherente debe integrar la interacción del usuario y la presentación de la información. </li></ul><ul><li>Shneiderman(1998) clasifica la interacción en 5 estilos primarios: </li></ul><ul><ul><li>Manipulación directa: </li></ul></ul><ul><ul><ul><li>Interacción directa con los objetos de la pantalla. </li></ul></ul></ul><ul><ul><ul><li>Rápida e intuitiva </li></ul></ul></ul><ul><ul><ul><li>Fácil de aprender </li></ul></ul></ul><ul><ul><ul><li>Ejemplo: para borrar un archivo , el usuario lo arrastra al bote de basura. Videos de juegos </li></ul></ul></ul>
  9. 10. <ul><ul><ul><li>Puede ser difícil de implementar. </li></ul></ul></ul><ul><ul><ul><li>Sólo es adecuada donde hay una metáfora visual para las tareas y objetos. </li></ul></ul></ul><ul><ul><li>Selección de menús: </li></ul></ul><ul><ul><ul><li>El usuario selecciona un comando de una lista de posibilidades. </li></ul></ul></ul><ul><ul><ul><li>Evita errores del usuario </li></ul></ul></ul><ul><ul><ul><li>Se requiere teclear poco </li></ul></ul></ul><ul><ul><ul><li>Lenta para usuarios experimentados. </li></ul></ul></ul><ul><ul><ul><li>Puede llegar a ser complejo si existen muchas opciones en el menú. </li></ul></ul></ul><ul><ul><ul><li>Ejemplo: muchos de los sistemas de propósito general </li></ul></ul></ul>
  10. 11. <ul><li>Llenado de formularios: </li></ul><ul><ul><li>Introducción de datos sencilla en los campos de un formulario. </li></ul></ul><ul><ul><li>Fácil de aprender </li></ul></ul><ul><ul><li>Ocupa mucho espacio en la pantalla. </li></ul></ul><ul><ul><li>Ejemplo: ingreso datos del cliente </li></ul></ul><ul><li>Lenguaje de comandos: </li></ul><ul><ul><li>Los usuarios emiten un comando especial y los parámetros asociados para indicar al sistema que hacer. </li></ul></ul><ul><ul><li>Poderoso y flexible </li></ul></ul><ul><ul><li>Difícil de aprender </li></ul></ul><ul><ul><li>Administración de errores pobre. </li></ul></ul><ul><ul><li>Ejemplo: Sistemas operativos </li></ul></ul>
  11. 12. <ul><li>Lenguaje Natural: </li></ul><ul><ul><li>El usuario emite comandos en lenguaje natural . </li></ul></ul><ul><ul><li>Accesible a usuarios casuales </li></ul></ul><ul><ul><li>Fácil de ampliar </li></ul></ul><ul><ul><li>Se requiere teclear más . </li></ul></ul><ul><ul><li>Los sistemas de comprensión de lenguaje natural no son fiables. </li></ul></ul><ul><ul><li>Ejemplo: Sistemas de horarios, sistemas www de recuperación de la información. </li></ul></ul>
  12. 13. <ul><li>Puede ser la presentación directa de la información de entrada (texto en un procesador de texto) o presentación gráfica </li></ul>Información a desplegar Software de presentación ejemplo Despliegue Al separar el sistema de presentación de los datos , se puede cambiar la representación sobre la pantalla sin tener que cambiar el sistema de cómputo subyacente .
  13. 14. <ul><li>Para encontrar la mejor presentación de la información es necesario conocer a los usuarios y y la forma en que utilizarán el sistema. Factores a considerar: </li></ul><ul><ul><li>¿El usuario está interesado en información precisa o en las relaciones entre los diferentes valores de los datos? </li></ul></ul><ul><ul><li>¿Qué tan rápido cambian los valores de la información?¿Se indicarán de forma inmediata al usuario los cambios de un valor? </li></ul></ul>
  14. 15. <ul><li>¿El usuario debe llevar a cabo una acción en respuesta a los cambios de la información? </li></ul><ul><li>¿El usuario necesita interactuar con la información desplegada vía una interfaz de manipulación directa? </li></ul><ul><li>¿La información que se va a desplegar es textual o numérica? ¿Son importantes los valores relativos de los elementos de la información? </li></ul>
  15. 16. Ene Feb. Mar Abril Mayo Junio 2842 2851 3164 2789 1273 2835
  16. 18. Presión 0 100 200 300 Temperatura 0 25 50 75 100
  17. 19. El nombre del archivo ya existe. Por favor, elija otro nombre . Cap. 15 diseño de la interfaz de usuario ! Aceptar Cancelar
  18. 20. <ul><li>Información climática: mapa climático con isobaras, frentes climáticos ,etc. </li></ul><ul><li>Estado de una red telefónica se despliega gráficamente como un conjunto vinculado de nodos en un centro de administración. </li></ul><ul><li>El estado de una planta química se visualiza mostrando las presiones y temperaturas asociados a tanques y tuberías </li></ul><ul><li>Un modelo de una molécula se despliega y manipula en tres dimensiones utilizando un sistema de realidad virtual. </li></ul>
  19. 21. <ul><li>El color ayuda y mejora la presentación de la interfaz , permitiendo al usuario comprender y manejar la complejidad. </li></ul><ul><li>Shneiderman(1998) establece 14 lineamientos claves para la utilización efectiva del color. </li></ul><ul><li>Los mas relevantes: </li></ul><ul><ul><li>Limitar el número de colores utilizados y ser conservador al momento de utilizarlos . No utilizar mas de 4 ó 5 colores diferentes en una ventana y no más de 7 en la interfaz total del sistema. </li></ul></ul>
  20. 22. <ul><li>Utilizar un cambio de color para mostrar un cambio en el estado del sistema. </li></ul><ul><ul><li>Ejemplo semáforos de alerta que reportan estados normal, precaución y alarma. </li></ul></ul><ul><li>Utilizar el código de colores para apoyar la tarea que los usuarios están tratando de llevar a cabo. </li></ul><ul><ul><li>Un color para resaltar una situación anómala, otro para similitudes. </li></ul></ul>
  21. 23. <ul><li>Utilizar el código de colores en una forma consciente y consistente. </li></ul><ul><ul><li>Si usamos rojo para mostrar alarma , mantener esta lógica durante todo el sistema </li></ul></ul><ul><li>Ser cuidadoso al utilizar pares de colores </li></ul><ul><ul><li>Dada la fisiología del ojo , las personas no pueden enfocar el rojo y el azul simultáneamente . </li></ul></ul>
  22. 24. <ul><li>En general el color no debe utilizarse para representar algún significado por dos razones: </li></ul><ul><ul><li>Cerca del 10 % de los hombres no perciben el color y pueden malinterpretar el significado. </li></ul></ul><ul><ul><li>Las percepciones humanas del color son diferentes y existen convenciones diversas para varias profesiones Ej. Rojo para conductor significa peligro, para el químico es caliente. </li></ul></ul><ul><li>Si se utilizan muchos colores o sin son muy brillantes , el despliegue puede ser confuso </li></ul>
  23. 25. <ul><li>Los mensajes producidos por el sistema en respuesta a las acciones del usuario </li></ul><ul><li>El sistema de ayuda en línea. </li></ul><ul><li>La documentación suministrada con el sistema </li></ul>
  24. 26. <ul><li>Contexto: </li></ul><ul><ul><li>El sistema guía del usuario debe estar pendiente de lo que hace el usuario y ajustar el mensaje de salida al contexto actual. </li></ul></ul><ul><li>Experiencia: </li></ul><ul><ul><li>Al aumentar la familiaridad con el sistema , aumenta la molestia por mensajes largos y “sin significado”. </li></ul></ul><ul><ul><li>El usuario principiante no comprende los mensaje concisos. </li></ul></ul><ul><ul><li>El sistema debe proveer de ambos tipos de mensajes </li></ul></ul>
  25. 27. <ul><li>Nivel de habilidad: </li></ul><ul><ul><li>Conocer al usuario y sus habilidades implica adecuar los mensajes a la terminología que el utiliza. </li></ul></ul><ul><li>Estilo: </li></ul><ul><ul><li>Los mensajes deben ser positivos en lugar de negativos. Activos y no pasivos. No deben ser insultantes o tratar de ser chistosos. </li></ul></ul><ul><li>Cultura: </li></ul><ul><ul><li>Reconocer la cultura del país en lo posible evita malas interpretaciones del contexto del mesaje. </li></ul></ul>
  26. 28. Por favor, introduzca el nombre del paciente en el cuadro y presione la tecla Aceptar . Nombre del paciente Bates, J Aceptar Cancelar Una enfermera debe ingresar el nombre del paciente en la pantalla
  27. 29. Error # 27 Entrada inválida de la identificación del paciente. ? Aceptar Cancelar
  28. 30. El paciente J. Bates no está registrado Haga clic en Pacientes para una lista de pacientes registrados. Haga clic en Reintentar para introducir nuevamente un nombre de paciente. Haga clic en Ayuda para más información. Pacientes Ayuda Reintentar Cancelar
  29. 31. Entrada desde la aplicación Entrada desde el sistema de mensajes de error Entrada en el nivel superior
  30. 32. <ul><li>Estructura de red complejas </li></ul><ul><li>Cada marco de información se vincula con otro marco de información. </li></ul><ul><li>Generalmente la estructura es jerarquica con vínculos cruzados. </li></ul><ul><li>En la cima la información es general y en la parte inferior mas detallada. </li></ul><ul><li>Induce a error de navegación cuando se entra luego de un error. </li></ul><ul><li>Se recomienda utilizar ventanas múltiples que guíen al usuario. </li></ul><ul><li>Desventaja es que el espacio en la pantalla es reducido. </li></ul><ul><li>Lo que se escribe en papel no siempre se ve de la misma forma en la pantalla </li></ul>
  31. 33. Descripción funcional Documento de instalación Manual de introducción Manual de referencia Guía del administrador Descripción de servicios Cómo instalar el sistema Iniciando Descripción de recursos Operación y mantenimiento Evaluadores de sistemas Administradores del Sistemas Usuarios Novatos Usuarios experimentados Administradores del sistema
  32. 34. <ul><li>Aprendizaje: </li></ul><ul><ul><li>¿Cuánto tiempo tarda un usuario nuevo en ser productivo con el sistema? </li></ul></ul><ul><li>Velocidad de operación: </li></ul><ul><ul><li>¿Qué tan bien responde el sistema a las operaciones de trabajo del usuario? </li></ul></ul><ul><li>Robustez: </li></ul><ul><ul><li>¿Qué tan tolerante es el sistema a los errores del usuario? </li></ul></ul>
  33. 35. <ul><li>Recuperación: </li></ul><ul><ul><li>¿Qué tan bien se recupera el sistema a los errores del usuario? </li></ul></ul><ul><li>Adaptación: </li></ul><ul><ul><li>¿Qué tan atado está el sistema a un solo modelo de trabajo? </li></ul></ul>

×