Interfaces y Usabilidad Interacción Hombre Máquina Agenda • Interfaces • Características de la interface • Roles de la IU • Evolución • Usabilidad Aprendizaje esencial: • Identificar las interfaces, tipos y rol y la importancia de la usabilidad. Ing. Patricia Vigo Pereyra 2 Interfaz de Usuario • Recordando….El componente interactivo (hardware y/o software) de un producto de software que le permite a la gente realizar las tareas para las cuales está concebido, en su trabajo o en su vida cotidiana Ing. Patricia Vigo Pereyra 3 Características de la Interfaz de Usuario • Múltiples ventanas desplegadas simultáneamente en la pantalla. • Representación de información mediante iconos. • Selección de acciones vía menú • Sistema de ayuda en línea (on-line) • Soporte de interacciones mediante diálogos y botones • Uso de dispositivos apuntadores para manipulación directa de los objetos Ing. Patricia Vigo Pereyra 4 Roles de la Interfaz de Usuario La IU de un producto de software: • Media entre el producto y el usuario...o entre distintos usuarios • Integra la representación de la parte accesible del producto y las técnicas de interacción • Determina la usabilidad del producto • Además... involucra a diferentes especialistas en su diseño Ing. Patricia Vigo Pereyra 5 Evolución de las Interfaces de Usuario CUI Interface de Línea de Comandos Ing. Patricia Vigo Pereyra GUI Interface Gráfica de Usuarios 6 NUI Interface Natural de Usuario Evolución de las Interfaces de Usuario Interface de Línea de Comando • Primer tipo de interfaz de usuario • El usuario escribe órdenes a través del teclado • Se indica al usuario donde escribir la orden a través del “prompt”. • Además se puede utilizar “script”. • Es utilizada por muchos programadores y administradores de sistemas como herramienta primaria de trabajo. • Ejemplos: shell de UNIX, Linux y sistemas operativos MS-DOS. Ing. Patricia Vigo Pereyra 7 Evolución de las Interfaces de Usuario Interface Gráfica de Usuario • Se dan órdenes a través de imágenes. • Puede utilizarla por todo tipo de usuario. • En la GUI, el usuario utiliza como dispsitivo de entrada: el ratón, trackball, lápiz óptico, teclado, joystick, etc. • Su objetivo es proporcionar un entorno visual para una interacción más amigable e intuitiva. • Ejemplos: Windows, X-Window de GNU/Linux y Mac OS X. Ing. Patricia Vigo Pereyra 8 Evolución de las Interfaces de Usuario Interface Natural de Usuario • El usuario interactúa con el equipo sin utilizar dispositivos de entrada, solo utiliza sus manos, voz o movimientos gestuales de su cuerpo. • Busca proporcionar un entorno visual más natural e intuitivo que el ofrecido por la GUI. • Ejemplos: sistemas operativos móviles iOS, Android, el sistema Siri y el sistema utilizado por el Xbox Kinect. Ing. Patricia Vigo Pereyra 9 Usabilidad Una Tetera para masoquistas Jacques Carelman Ing. Patricia Vigo Pereyra 10 Usabilidad ¿Cuál de los lapiceros es más usable? Ing. Patricia Vigo Pereyra 11 Usabilidad • “Atributo de calidad que mide lo fáciles que son de usar las interfaces”. Jakob Nielsen. • “Usabilidad es la eficacia, eficiencia y satisfacción con la que un producto permite alcanzar objetivos específicos a usuarios específicos en un contexto de uso específico”. ISO/IEC 9241. • “La capacidad de un software de ser comprendido, aprendido, usado y ser atractivo para el usuario en condiciones específicas de uso”. ISO/IEC 9126. Ing. Patricia Vigo Pereyra 12 Principios de Usabilidad 1. Visibilidad del estado del sistema 2. 3. 4. 5. 6. 7. 8. 9. Relación entre el sistema y el mundo real Libertad y control por parte del usuario Consistencia y estándares Prevención de errores Reconocer antes que recordar Flexibilidad y eficiencia en el uso Diseño estético y minimalista Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de errores Ing. Patricia Vigo Pereyra 13 1. Visibilidad del estado del sistema El sitio web o aplicación debe mantener siempre informado al usuario de lo que está ocurriendo y brindarle una respuesta en el menor tiempo posible. Ing. Patricia Vigo Pereyra 14 2.Relación entre el sistema y el mundo real • El sitio web o aplicación debe utilizar el lenguaje del usuario, con expresiones y palabras que le resulten familiares. La información debe aparecer en un orden lógico y natural. Ing. Patricia Vigo Pereyra 15 3.Libertad y control por parte del usuario • En caso de elegir alguna opción del sitio web o aplicación por error, el usuario debe disponer de una “salida de emergencia” para abandonar el estado no deseado en que se halla. Debe poder deshacer o repetir una acción realizada. Ing. Patricia Vigo Pereyra 16 4.Consistencia y estándares. • Los usuarios no tienen por qué saber que diferentes palabras, situaciones o acciones significan lo mismo. Es conveniente seguir convenciones. Ing. Patricia Vigo Pereyra 17 5.Prevención de errores • Es importante ayudarle al usuario a que no caiga en un error. La funcionalidad de autocomplete de los buscadores ayuda a que una persona no tenga que escribir toda la palabra y no se equivoque. Ing. Patricia Vigo Pereyra 18 6.Reconocer antes que recordar. • Hacer visibles acciones y opciones para que el usuario no tenga qué recordar información entre distintas secciones o partes del sitio web o aplicación. Es importante mantener a nivel de diseño visual un estándar para que los elementos de interface sean consistentes en diferentes pantallas. Ing. Patricia Vigo Pereyra 19 7.Flexibilidad y eficiencia en el uso. • Los aceleradores o atajos de teclado pueden hacer más rápida la interacción para usuarios expertos, de tal forma que el sitio web o aplicación sea útil tanto para usuarios básicos como avanzados. Ing. Patricia Vigo Pereyra 20 8.Diseño estético y minimalista. • Las interfaces no deben contener información innecesaria. Cada información extra compite con la información relevante y disminuye su visibilidad. Ing. Patricia Vigo Pereyra 21 9.Ayuda a los usuarios a reconocer, diagnosticar y recuperarse de los errores. • Los mensajes de error deben estar redactados con un lenguaje simple, lo peor son errores como “Error 34-x1” que no le dicen nada al usuario de como puede recuperarse de ese error, deben ofrecerse alternativas para que el usuario pueda continuar realizando la tarea o recuperando lo último que hizo (autosave). Ing. Patricia Vigo Pereyra 22 Ejercicio práctico • Seleccionar una app que sea usable o no usable. • Anote las razones de su selección. • Compartir con el grupo. Principio de Usabilidad Cumple Descripción 1. Visibilidad del estado del sistema Si/No Acá describen las razones de su evaluación, pueden capturar pantallas para justificar. 2. … 9. Ing. Patricia Vigo Pereyra 23 Concluyendo la clase… • Conclusiones y resumen de lo aprendido • Dudas y comentarios Ing. Patricia Vigo Pereyra 24