Este documento describe el proceso de diseño de interfaces de usuario. Explica que consiste en crear una comunicación efectiva entre el usuario y la computadora siguiendo principios como dar control al usuario, reducir la carga de memoria y lograr consistencia. También describe los pasos del proceso como analizar al usuario, la tarea y el entorno, diseñar la interfaz, implementarla y validarla para asegurar que cumple con los requisitos.

1. Diseño de la
interfaz de usuario
Yesith Valencia, MsC
yesithvalencia@gmail.com

2. Diseño de interfaz de usuario 2http://www.nuevosvecinos.com/descargas/ims-46-47/Plano%20casa.jpg

3. Diseño de interfaz de usuario 3
http://www.casaskela.cl/planos/general/Plano-Casa-El-Yeco_2.jpg

4. Diseño de interfaz de usuario 4
http://3.bp.blogspot.com/-o5OjyMmTVu0/Tz7ne2nlqFI/AAAAAAAAAbc/AGgZos0IViA/s1600/fachada+principal-casas-modernas.jpg

5. Diseño de interfaz de usuario
• Entre componentes de software
• Entre el software y entidades externas
• Entre el ser humano y la computadora
Diseño de interfaz de usuario 5

6. En qué consiste ?
• En crear una comunicación efectiva entre el ser humano y
la computadora siguiendo un conjunto de principios
Diseño de interfaz de usuario 6
Quién lo hace ?
• El ing. De software / Ing. De sistemas
Por qué es importante ?
• Porque crea la percepción que crea el usuario del software

7. Cuáles son los pasos ?
• Identificar los requisitos, las tareas y el ambiente
• Definir el conjunto de objetos y acciones para la
interfaz
• Crear formatos de pantalla, diseño gráfico y ubicación
de iconos
• Revisar los artefactos
Diseño de interfaz de usuario 7
Cómo se sabe que está correcto ?
• El usuario debe hacer una prueba de manejo

8. Preguntas que se deben plantear
• Quién es el usuario ?
• Cómo aprende a interactuar con un nuevo sistema ?
• Cómo interpreta la información ?
• Qué espera del sistema ?
Diseño de interfaz de usuario 8

9. Reglas de oro
1. Dar control al usuario
2. Reducir la carga de memoria
3. Lograr que la interfaz sea consistente
Diseño de interfaz de usuario 9

10. 1. Dar control al usuario
• Definir las formas de interacción de forma que el
usuario no realice acciones innecesarias o
indeseables: activar y desactivar una opción sin
esfuerzo
• Proporcionar una interacción flexible: interactuar
mediante el mouse, táctil, comandos del teclado.
• Tener las opciones de interrumpir y deshacer
Diseño de interfaz de usuario 10

11. 2. Reducir la carga de memoria
• Reducir la memoria a corto plazo: reconocer
acciones sin tener que recordarlas
• Definir accesos directos intuitivos: Ctrl + P
• Desglosar la información de manera progresiva:
Subrayar palabras
Diseño de interfaz de usuario 11

12. 3. Lograr que la interfaz sea consistente
• Contextualizar al usuario: títulos de la ventana,
íconos, colores, opciones
• Consistencia en la familia de aplicaciones: Office
2010
• Conservar los modelos mentales: Ctrl + G
Diseño de interfaz de usuario 12

13. El proceso
Diseño de interfaz de usuario 13

14. El proceso: Análisis del usuario, la tarea y el entorno
Análisis del Usuario
Registrar el perfil, grado de habilidad, comprensión del
trabajo, disposición ante el nuevo sistema.
Describir las tareas que el usuario realiza para alcanzar
los objetivos del sistema
Análisis del entorno: Dónde se localizará físicamente la
interfaz ? El usuario estará sentado, de pie, realizará
otras tareas ? El Hw tiene restricciones de espacio,
iluminación ?
Diseño de interfaz de usuario 14

15. El proceso: Análisis del usuario, la tarea y el entorno
Análisis del Usuario
Fuentes de información: Entrevistas, Información de
ventas, de mercadotecnia.
Algunas preguntas:
Qué grado de estudio tiene ?
Es capaz de aprender de un tutorial ?
Es experto tecleando ?
Edad, Sexo, sueldo, horario de trabajo ?
Diseño de interfaz de usuario 15

16. El proceso: Análisis del usuario, la tarea y el entorno
Análisis del Usuario
Algunas preguntas:
Trabaja en la casa ?
Idioma materno ?
Expertos en el tema (entiende el sistema) ?
Diseño de interfaz de usuario 16

17. El proceso: Análisis del usuario, la tarea y el entorno
Análisis de tareas
Responder las siguientes preguntas:
Qué trabajo hará el usuario ?
Qué otras tareas se realizan mientras el usuario
trabaja ?
Cuál es la secuencia o jerarquía de las tareas ?
UML, BPMN
Diseño de interfaz de usuario 17

18. El proceso: Diseño de interfaz
• definir los objetos y las acciones de la interfaz
• Definir las acciones del usuario que cambiarán el
estado de la interfaz
• Representar cada estado de la interfaz como lo
verá el usuario final
Diseño de interfaz de usuario 18

19. El proceso: Diseño de interfaz
Diseño de interfaz de usuario 19
• Escenario. El propietario de la casa desea acceder
al sistema HogarSeguro instalado en su casa.
Mediante el sistema operativo de un PC remoto
(por ejemplo, un portátil que el propietario se lleve
al trabajo o de viaje), el propietario determina el
estado del sistema de alarma, arma o desarma el
sistema, reconfigura las zonas de seguridad y
observa las diferentes habitaciones de la casa
mediante la preinstalación de una cámara de
vídeo.

20. El proceso: Diseño de interfaz
Diseño de interfaz de usuario 20
Tareas del propietario:
• acceder al sistema HogarSeguro;
• introducir un ID y una contraseña para permitir un acceso remoto
• comprobar el estado del sistema;
• activar o desactivar el sistema HogarSeguro;
• visualizar el plano de la casa y las localizaciones de los sensores
• Visualizar zonas en el plano de la casa;
• cambiar zonas en el plano de la casa;
• visualizar las localizaciones de las cámaras de vídeo en el plano de la casa
• seleccionar la cámara de vídeo para tener visión;
• observar las imágenes de vídeo (cuatro encuadres por segundo)
• recorrer y ampliar las habitaciones con la cámara de vídeo

21. El proceso: Diseño de interfaz
Diseño de interfaz de usuario 21

22. El proceso: Implementación de la interfaz
Se crea un
prototipo que
permita evaluar
los escenarios
Diseño de interfaz de usuario 22

23. El proceso: Implementación de la interfaz
Temas de diseño
Tiempo de respuesta: desde que el usuario realiza una
acción hasta que el sistema responde
Funciones de ayuda: disponible en línea y para todas las
funciones del sistema y en todo momento
Manejo de errores: No ofrecer información inútil, debe
describir el problema en lenguaje del usuario, dar
concejos sobre la manera de recuperarse, tener una
pista visual, no tener juicios sobre el usuario
Diseño de interfaz de usuario 23

24. El proceso: Implementación de la interfaz
Temas de diseño
Rotular menús y comandos: comandos para los menús
que sean fácil de recordar, submenús consistentes
Accesibilidad de la aplicación: fácil acceso a quienes
tienen necesidades especiales: visual, auditiva,
movilidad, habla o aprendizaje
Internacionalización: para otras localidades e idiomas:
formato de pantalla, alfabetos, horas y fechas.
Diseño de interfaz de usuario 24

25. El proceso: Validación
Es la capacidad para
implementar
correctamente todas las
tareas del usuario, y
cumplir con los
requerimientos del usuario
Se valida la facilidad de
uso y el aprendizaje de la
interfaz
Diseño de interfaz de usuario 25

26. El proceso: Validación
Se pueden usar técnicas formales de evaluación:
Preguntas o cuestionarios: de respuesta simple (sí/no),
respuesta numérica, respuesta con escala de valoración
(subjetiva), respuesta abierta, hojas de evaluación: del
80 al 100 % de los usuarios rechazan el mecanismo
para guardar los datos .
De acuerdo a estas evaluaciones se realiza la siguiente
versión
Diseño de interfaz de usuario 26

27. Bibliografía
• Ingeniería del software, Un enfoque práctico:
Pressman 6th edición
• Ingeniería del software, Ian Sommervil, 7th
edición
Diseño de interfaz de usuario 27