Post on 18-Nov-2014
description
Diseño de la interfaz de usuario
Yesith Valencia, MsC (e)
yesithvalencia@gmail.com
Yesith Valencia MsC(e), Docente UDI 2 http://www.nuevosvecinos.com/descargas/ims-46-47/Plano%20casa.jpg
Yesith Valencia MsC(e), Docente UDI 3 http://www.casaskela.cl/planos/general/Plano-Casa-El-Yeco_2.jpg
Yesith Valencia MsC(e), Docente UDI 4 http://3.bp.blogspot.com/-o5OjyMmTVu0/Tz7ne2nlqFI/AAAAAAAAAbc/AGgZos0IViA/s1600/fachada+principal-casas-modernas.jpg
Diseño de interfaz de usuario
• Entre componentes de software
• Entre el software y entidades externas
• Entre el ser humano y la computadora
Yesith Valencia MsC(e), Docente UDI 5
En qué consiste ?
• En crear una comunicación efectiva entre el ser humano y la computadora siguiendo un conjunto de principios
Yesith Valencia MsC(e), Docente UDI 6
Quién lo hace ?
• El ing. De software
Por qué es importante ?
• Porque crea la percepción que crea el usuario del software
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
Yesith Valencia MsC(e), Docente UDI 7
Cómo se sabe que está correcto ?
• El usuario debe hacer una prueba de manejo
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 ?
Yesith Valencia MsC(e), Docente UDI 8
Reglas de oro
1. Dar control al usuario
2. Reducir la carga de memoria
3. Lograr que la interfaz sea consistente
Yesith Valencia MsC(e), Docente UDI 9
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
Yesith Valencia MsC(e), Docente UDI 10
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
Yesith Valencia MsC(e), Docente UDI 11
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
Yesith Valencia MsC(e), Docente UDI 12
El proceso
Yesith Valencia MsC(e), Docente UDI 13
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 ?
Yesith Valencia MsC(e), Docente UDI 14
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 ?
Yesith Valencia MsC(e), Docente UDI 15
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) ?
Yesith Valencia MsC(e), Docente UDI 16
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
Yesith Valencia MsC(e), Docente UDI 17
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
Yesith Valencia MsC(e), Docente UDI 18
El proceso: Diseño de interfaz
Yesith Valencia MsC(e), Docente UDI 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.
El proceso: Diseño de interfaz
Yesith Valencia MsC(e), Docente UDI 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
El proceso: Diseño de interfaz
Yesith Valencia MsC(e), Docente UDI 21
El proceso: Implementación de la interfaz
Se crea un prototipo que permita evaluar los escenarios
Yesith Valencia MsC(e), Docente UDI 22
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
Yesith Valencia MsC(e), Docente UDI 23
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.
Yesith Valencia MsC(e), Docente UDI 24
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
Yesith Valencia MsC(e), Docente UDI 25
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
Yesith Valencia MsC(e), Docente UDI 26
Bibliografía
• Ingeniería del software, Un enfoque práctico: Pressman 6th edición
• Ingeniería del software, Ian Sommervil, 7th edición
Yesith Valencia MsC(e), Docente UDI 27