2.  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

3.  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.

4.  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.

6.  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

7.  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

11. LA INTERFAZ RECURRE A LA METAFORA
PARA PODER TRADUCIR EL LENGUAJE
COMPLETO DEL SISTEMA AL LENGUAJE
CONOCIDO DEL USUARIO PARA
PERMITIR LA COMUNICACION

12.  Anticipación
 Comunicación
 Consistencia
 Autonomía Controlada
 Eficiencia
 Flexibilidad

13.  Centrada en el Usuario
 Ley de Fitt
 Reducción de Latencia
 Facilidad de Aprendizaje
 Metáforas
 Legibilidad
 Seguimiento del Estado

14.  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.

16.  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?

17.  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 .

18. 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.

19. Interfaz Gráfica del
Usuario
Interfaz de Lenguaje
de Comandos
Administrador de la
GUI
Interprete de
Lenguaje de
Comandos
Sistema Operativo

20. Información a
desplegar
Software de
Presentación

21.  Los diseñadores deben ser
conservadores en la utilización
del color para despliegues de
usuario.

22.  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.

23.  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.

24.  Asociar significados a colores
particulares.
 Utilizar demasiados colores en un
despliegue puede provocar confusión
para entender la información.

25. 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.

26.  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.

27.  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.

28.  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.

30.  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.

31.  É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.

32.  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.

33.  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.

35.  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.

36.  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.

37. 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?

38. 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?

39.  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.

41. Nuevo Producto

42. Búsqueda de productos

43. Modificación de productos

44. Mensajes de Error

45. Registro de Ventas