Interfaces de Usuario

1. Diseño de Interfaces
de usuario
Ingeniero Noretsys Rodríguez

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

3. Principios de diseño de Interfaces
de usuario
 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

4. Principios de diseño de Interfaces
de usuario
 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.

5. Interacción del usuario
 Una interfaz coherente debe integrar la
interacción del usuario y la presentación de
la información.
 Shneiderman(1998) clasifica 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

6. ○ Puede ser difícil de implementar.
○ Sólo es adecuada donde hay una metáfora visual
para las tareas y objetos.
 Selección de menús:
○ El usuario selecciona un comando de una lista de
posibilidades.
○ Evita errores del usuario
○ Se requiere teclear poco
○ Lenta para usuarios experimentados.
○ Puede llegar a ser complejo si existen muchas
opciones en el menú.
○ Ejemplo: muchos de los sistemas de propósito
general
Interacción del usuario

7.  Llenado de formularios:
 Introducción de datos sencilla en los campos de un
formulario.
 Fácil de aprender
 Ocupa mucho espacio en la pantalla.
 Ejemplo: ingreso datos del cliente
 Lenguaje de comandos:
 Los usuarios emiten un comando especial y los
parámetros asociados para indicar al sistema que
hacer.
 Poderoso y flexible
 Difícil de aprender
 Administración de errores pobre.
 Ejemplo: Sistemas operativos
Interacción del usuario

8.  Lenguaje Natural:
 El usuario emite comandos en lenguaje natural .
 Accesible a usuarios casuales
 Fácil de ampliar
 Se requiere teclear más .
 Los sistemas de comprensión de lenguaje natural
no son fiables.
 Ejemplo: Sistemas de horarios, sistemas www de
recuperación de la información.
Interacción del usuario

9. Presentación de la Información
 Puede ser la presentación directa de la
información de entrada (texto en un
procesador de texto) o presentación
gráfica
Información
a desplegar
Software de
presentación
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.

10. Presentación de la Información
 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:
 ¿El usuario está interesado en información
precisa o en las relaciones entre los
diferentes valores de los datos?
 ¿Qué tan rápido cambian los valores de la
información?¿Se indicarán de forma
inmediata al usuario los cambios de un
valor?

11. Presentación de la Información
 ¿El usuario debe llevar a cabo una acción
en respuesta a los cambios de la
información?
 ¿El usuario necesita interactuar con la
información desplegada vía una interfaz de
manipulación directa?
 ¿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?

12. Color en el diseño de la
interfaz
 El color ayuda y mejora la presentación de
la interfaz , permitiendo al usuario
comprender y manejar la complejidad.
 Shneiderman(1998) establece 14
lineamientos claves para la utilización
efectiva del color.
 Los mas relevantes:
 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.

13. Color en el diseño de la
interfaz
 Utilizar un cambio de color para mostrar
un cambio en el estado del sistema.
 Ejemplo semáforos de alerta que reportan
estados normal, precaución y alarma.
 Utilizar el código de colores para apoyar
la tarea que los usuarios están tratando
de llevar a cabo.
 Un color para resaltar una situación
anómala, otro para similitudes.

14. Color en el diseño de la
interfaz
 Utilizar el código de colores en una
forma consciente y consistente.
 Si usamos rojo para mostrar alarma ,
mantener esta lógica durante todo el
sistema
 Ser cuidadoso al utilizar pares de
colores
 Dada la fisiología del ojo , las personas no
pueden enfocar el rojo y el azul
simultáneamente .

15. Color en el diseño de la
interfaz
 En general el color no debe utilizarse para
representar algún significado por dos
razones:
 Cerca del 10 % de los hombres no perciben el
color y pueden malinterpretar el significado.
 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.
 Si se utilizan muchos colores o sin son
muy brillantes , el despliegue puede ser
confuso

16. Soporte al usuario, Sistema de
ayuda en línea
 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

17. Factores de diseño en la redacción
del mensaje de Error
 Contexto:
 El sistema guía del usuario debe estar
pendiente de lo que hace el usuario y ajustar el
mensaje de salida al contexto actual.
 Experiencia:
 Al aumentar la familiaridad con el sistema ,
aumenta la molestia por mensajes largos y “sin
significado”.
 El usuario principiante no comprende los
mensaje concisos.
 El sistema debe proveer de ambos tipos de
mensajes

18.  Nivel de habilidad:
 Conocer al usuario y sus habilidades implica
adecuar los mensajes a la terminología que el
utiliza.
 Estilo:
 Los mensajes deben ser positivos en lugar de
negativos. Activos y no pasivos. No deben ser
insultantes o tratar de ser chistosos.
 Cultura:
 Reconocer la cultura del país en lo posible evita
malas interpretaciones del contexto del mesaje.
Factores de diseño en la redacción
del mensaje de Error

19. Ventajas de las GUI
 Son fáciles de aprender y usar.
 Usuarios sin experiencia pueden aprender el uso
del sistema rápidamente.
 El usuario puede cambiar rápidamente desde
una proceso a otro y puede interactuar con
diferentes aplicaciones a la vez.
 La información aparece visible en su propia
ventana cuando la atención cambia.
 Rápido, interacción de pantalla completa es
posible con acceso inmediato a cualquier
cosa sobre la pantalla.

20. Principios de Diseño.
 El diseño de interfaces de Usuario toma en
cuenta las necesidades, experiencia y
capacidades de los usuarios del sistema.
 Los usuarios deberían involucrarse en el
proceso de diseño y el diseño de interfaces
de usuario deben refinarse hacia rápidos
prototipos.
 Existen factores cognoscitivos, como el
tamaño de pequeños términos de memoria,
que el diseño la interfaz de usuario deben
tomarse en cuenta.

21. Principios de Diseño
 La interfaz debe basarse en los términos
orientados de usuario y conceptos sobre los
conceptos informáticos.
 Por ejemplo, un sistema de oficinas debe utilizar
conceptos como cartas, documentos, folders etc. Así
como directorios, identificadores de archivos, etc.
 El sistema deberá mostrar un nivel apropiado de
consistencia.
 Los comandos y los menús deban mantener el
mismo formato, las puntuaciones de los comandos
deben ser similares,etc.

22. Principios de Diseño
 El sistema no debe tomar por sorpresa al usuario.
 Si un comando opera en una forma conocida, el
usuario debe ser capaz de predecir la operación de
un comando parecido.
 El sistema debe proveer alguna ayuda cada vez
que el usuario cometa un error y dar la posibilidad
a esté corregir el error antes de ejecutarlo.
 Esté debe incluir comandos para de para deshacer
acciones, acciones de confirmación o destrucción, tal
como destrucción de archivos, etc.
 Las guías de usuario deben fungir como
suplementos.
 Sistemas de ayuda, manuales de línea,etc.

23. Sistema
 Dos problemas deben ser direccionados en el
diseño de sistemas interactivos.
 ¿Como es que la información es proporcionada por
el usuario al sistema?
 ¿Cómo debe proporcionar la información el sistema
estando presente el usuario?
 La interacción y presentación de información
debe integrarse a través de un cuadro de
trabajo coherente de tal forma que la interfaz
de usuario se adapte a los fines requeridos.

24. Interfaces de comandos
 El usuario puede acceder comandos con el fin de
proveer instrucciones al sistema. Por ejemplo
UNIX.
 Puede ser implementado usando terminales
menos costosas.
 Fácil de procesar empleando técnicas de
compilación.
 Comandos de complejidad arbitraria pueden ser
creados a través del comando de combinación.
 Interfaces concisas requieren mínima escritura
para ser creadas.

25. Problemas con las interfaces
de comandos
 Los usuarios tiene que aprender y
recordar un lenguaje de comandos. Las
interfaces de comando son además
inaccesibles para usuarios ocasionales.
 Los usuarios cometen errores de
comandos. Una detección y
recuperación del sistema es necesaria.
 La interacción del sistema es por medio
de un teclado habilitado

26. Lenguajes de comando
 Siempre es preferible para usuarios
experimentados debido a que ellos tienen una
interacción más rápida con el sistema.
 Lo anterior no se aplica para usuarios
casuales o inexpertos.
 Tal vez establecido como una alternativa para
un menú de comandos (Secuencias cortas de
teclado). En la mayoría de los casos, una
interfaz de lenguaje de comandos y una
interfaz de menú basado están soportadas al
mismo tiempo.

27. Presentación de la
información
 Información Estática.
 Inicializando al principio de la sesión. Está
realmente no cambia durante la sesión.
 Puede ser numérica o texto.
 Información Dinámica.
 Cambios durante la sesión se actualizan
automáticamente al momento de establecer
comunicación con el sistema de usuario.
 Puede ser numérica o texto.

28. Diseño de mensajes de
errores
 El diseño de mensajes de error es
critica. Los mensajes de error pobre
puede significar que un usuario prefiera
rechazar que aceptar el sistema.
 Los mensajes deberían ser amables.
Concisos., consistentes y constructivos.
 El fondo que el usuario debe
experimentar debería ser un factor
determinante en el diseño de mensajes.

29. Diseño del sistema de
ayuda
 Ayuda? significa ‘ayuda, yo quiero
información”
 Ayuda! significa “ayuda,yo estoy en
problemas”
 Ambos de estos requerimientos tienen
que ser tomados en consideración en el
diseño de la ayuda del sistema.
 Diferentes facilidades dentro del sistema
de ayuda puede ser requerido.

30. Información de ayuda
 Simplemente no se debería estar con un
manual en línea.
 Las pantallas o ventanas no caben en el
papel.
 Las características dinámicas de el
despliegue pueden improvisar la
presentación de la información.
 La gente no es buena leyendo ventanas
como texto.

31. Uso de los sistemas de
ayuda
 Múltiples puntos de entrada deberían
ser provistos dentro del sistema de
ayuda de diferentes lugares.
 Algunas indicaciones donde el usuario
se posesiona en el sistema de ayuda es
valuado.
 Las facilidades estarán proveídas a
todos los usuarios para navegar y
atravesar el sistema de ayuda.

32. Documentación del usuario
 Tan bueno como la información en
línea, la documentación en papel
debería ser sustituida con un sistema.
 La documentación puede estar
diseñada para un rango de usuarios
tanto inexpertos como expertos.
 Tan bueno como un manual. Otras
documentaciones de uso fácil deberían
ser provistas.

33. Tipos de documento
 Descripción funcional
 Breve descripción de lo que puede hacer el
sistema
 Manual referente del sistema
 Describe todo el sistema con detalle
 Manual del sistema para la instalación
 Describe como se instala el sistema
 Manual del sistema administrador
 Describe como se desarrolla el sistema
cuando esta en uso

34. Evaluación de la interface
de usuario
 Algunas evaluaciones para el diseño de
la interface de usuario pueden ser
acarreados fuera del alcance de estos.
 Una evaluación con escala completa es
muy cara e impractica para muchos
sistemas
 Idealmente una interface puede evaluar
una vez mas una especificación
utilizada, sin embargo es raro para cada
especificación ser producida.

35. Técnicas simples de
evaluación
 Preguntas para la retroalimentacion del
usuario.
 La grabación del vídeo del sistema usa
una evaluación subsecuente.
 La instrumentación del código para la
información coleccionada facilita que el
usuario controle los errores.
 La provisión de un botón de celdas para
el usuario en línea es retroalimentado.

36. Resumen
 El diseño de interfaces puede ser
centrada al usuario. Una interface debería
ser lógica y consistente y la ayuda de
usuarios recupera errores.
 El sistema de menú debe de ser tan
bueno como para usuarios de sistemas
ocasionales.
 El despliegue gráfico puede utilizarse para
representar tendencias y valores
aproximados. El despliegue digital es
cuando es requerida la precisión.

37. Resumen
 Pueden los sistemas proveer ayuda en línea. Esto
incluye ayuda cuando se encuentran en
problemas y ayuda cuando se requiere
información.
 Los mensajes de error pueden ser positivos como
negativos.
 Diferentes tipos de rangos, son provistos para el
documento de usuarios.
 Idealmente, una interface de usuario puede
evaluar , una vez hecha la especificación de
usabilidad.

38. Proceso de Diseño de la GUI
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

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

40. Mensaje de error orientado al
Sistema
Error # 27
Entrada inválida de
la identificación del
paciente.
?
Aceptar Cancelar

41. Mensaje orientado al
usuario
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

42. Documentación del usuario
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

43. Evaluación de la interfaz
 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?
 Robustez:
 ¿Qué tan tolerante es el sistema a los
errores del usuario?

44. Evaluación de la interfaz
 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?