Ingeniería de Software II Segundo Cuatrimestre de 2008

Clase 8 – Diseño de Interfaces de Usuario y Usabilidad

Buenos Aires, 15 de Septiembre de 2008

© Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

¿Qué es una interfaz de usuario?

2 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Usabilidad La Usabilidad es la disciplina que estudia distintos aspectos de la comunicación, con el objetivo de diseñar productos de manera tal que el usuario pueda efectuar determinada tarea, con el mínimo índice de estrés y el máximo de eficiencia

3 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Ejemplo: Dial teléfonico

Promedio por dígito 2 seg.

0.15 seg 4 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Medidas de la Usabilidad

Evaluación heurística 

Métodos basados en la observación y el análisis por parte de un experto en usabilidad de ciertos parámetros o guías generales (Jakob Nielsen)

Test de usabilidad 

Técnica para obtener una medida concreta y objetiva de la usabilidad de una herramienta o sistema tomada a partir de usuarios reales, realizando tareas reales



Tests con prototipos: Foco en la detección temprana de defectos de la interfaz de usuario

Estos métodos no son contrapuestos sino complementarios Los tests de usabilidad suelen ser mejores para mostrar dónde están los problemas mientras que el análisis heurístico es más eficiente para proponer posibles soluciones 5 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

¿Cuál es el costo de una mala interfaz?

¿Cuánto vale un error que enlentece 3 minutos diarios la operatoria de una persona? En un área de 5 personas, es más de una semana/hombre de trabajo al fin del año

¿Cuánto vale un cliente insatisfecho?

Actualmente, hasta el 45% del código de una aplicación está dedicado a la interfaz. En otros países se dedica algo menos del 10% del presupuesto global de un proyecto al desarrollo de la interfaz.

6 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Proceso de diseño centrado en el usuario

1. Conocer al usuario  El

diseñador no es el usuario

 Relevar

características individuales de los usuarios

 Conocer

su experiencia previa y sus expectativas para la nueva aplicación relacionadas con sus tareas

 Identificar

tipos de usuario

7 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Proceso de diseño centrado en el usuario

2. Identificar las tareas  Comprender

del sistema

 Observar

los objetivos y funcionalidades principales

ejemplos de usuarios realizando tareas

8 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Proceso de diseño centrado en el usuario

3. Definir el estilo de interacción  Analizar

lenguaje y convenciones de la plataforma o entorno de la aplicación 

Windows, Web tradicional, Web 2.0, Dispositivos móviles

 Relevar

estándares y modelos de navegación ya definidos para funcionalidades similares

 Respetar  Realizar

las “Reglas de Oro de la Usabilidad”

prototipos

 Documentar  Testear

Guías de Interfaz de Usuario

las interfaces con usuarios reales

9 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Diálogos simples y naturales Hablar el lenguaje del usuario Minimizar la carga de memoria Ser consistente Proveer feedback

Proveer salidas marcadas claramente Proveer atajos Dar buenos mensajes de error

Prevenir y manejar errores Ayuda y documentación

10 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Diálogos simples y naturales  Respetar

los modelos conceptuales de los usuarios

11 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Diálogos simples y naturales (cont.)  Presentar

posible

la información de la forma más simplificada



No proveer información irrelevante



No proveer información de uso muy esporádico que compita con información relevante



Presentar información relacionada agrupada visualmente

12 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Diálogos simples y naturales (cont.)

13 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Hablar el lenguaje del usuario  Usar

palabras y conceptos del mundo del usuario

(No usar términos propios de la ingeniería de software u orientados al sistema)

 Diseñar

el modelo de navegación en base a modelos conceptuales del usuario y de sus tareas; no de la arquitectura del sistema

 Mnemónicos,

abreviaturas e íconos deben tener sentido para el usuario

14 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Hablar el lenguaje del usuario (cont.)

15 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Minimizar la carga de memoria  Reconocer,

antes que recordar

 No

obligar al usuario a recordar cosas de una acción a la siguiente

16 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Minimizar la carga de memoria (cont.)

17 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Minimizar la carga de memoria (cont.) Otros ejemplos: 

Describir formato de la información solicitada o utilizar máscaras Ej: DD/MM/YYYY



Ofrecer valores por defecto



Texto sugerido



Tooltips en íconos



En operaciones que implican muchos pasos, conservar una visualización “Resumen”



Funcionalidades para recordar valores

18 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Ser consistente  Los

usuarios deben poder aprender una secuencia de acciones en una parte del sistema y aplicarla en otras para obtener resultados similares

 Correspondencia  Respetar

entre aspecto y comportamiento

convenciones y estándares de la plataforma

 Diferenciar

naturaleza de elementos

19 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Proveer feedback  Informar

al usuario lo que está haciendo el sistema y cómo esta procesando el input brindado por él

 Distintos

tipos de feedback requieren distintos grados de persistencia en la interfaz

20 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Proveer feedback (cont.)  Considerar

el tiempo de respuesta:



0.1 seg. es percibido como instantáneo



1 seg. es el límite del usuario para continuar su flujo de operación ininterrumpidamente. No es necesario brindar feedback pero el usuario notará el delay



10 seg. es el límite del usuario para mantenerse en un mismo diálogo de interacción



>10 seg. el usuario esperará ser notificado y poder realizar otras tareas mientras espera que finaliza la operación

21 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Proveer salidas marcadas claramente  Los

usuarios deben sentir que tienen el control en todo momento, no deben sentirse atrapados por la aplicación

 Ejemplos: 

“Cancelar” en todos los diálogos



Opción “Deshacer” y “Escape”



“Salir” del programa en cualquier momento



Posibilidad de interrupción de tareas en operaciones mayores a 10 seg.



“Detener” y “Atrás” en el navegador



“Eliminar del carrito” en las aplicaciones de e-commerce

22 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Proveer atajos  Ofrecer

alternativas de navegación para distintos perfiles de usuarios

 Considerar

usuarios novatos, casuales y expertos

 Ejemplos:  Atajos

de teclado, mnenmónicos, teclas estándar

(Tab, Flechas, Delete, Insert, etc)

 Iconos  Menúes

contextuales

 Drag

& Drop

 Copy

/ Cut / Paste

 Navegación

histórica 23 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Proveer atajos (cont.)

24 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Proveer atajos (cont.)

25 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Dar buenos mensajes de error  Los

mensajes de error deben ser comprensibles y guiar al usuario para poder corregirlo

26 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Dar buenos mensajes de error (cont.)  Algunas

recomendaciones:



Preciso: Comunicar lo que ocurre



Conciso: Comunicar con economía de recursos



Claro: 

Usar el lenguaje del usuario y evitar tecnicismos.



Usar estructuras gramaticales sencillas: sujeto + verbo + predicado.



Preferir frases verbales orientadas a la acción (voz activa) Ejemplos: Complete, Seleccione, Ingrese, ...



No utilizar expresiones condicionales ni potenciales.



Evitar los enunciados que contengan negaciones. “No se puede guardar un documento que no tenga título”.

27 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Prevenir y manejar errores  Permitir

las acciones correctas



Inhabilitar las acciones no válidas



Preferir la selección antes que el tipeo libre



Completar en forma automática

28 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Prevenir y manejar errores (cont.)  Impedir

que el usuario continúe en un camino erróneo



Realizar validaciones



Advertir sobre situaciones que impliquen riesgo o inusuales

 Facilitar

la realización de secuencias completas 

Wizards



Macros

29 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Reglas de oro de la Usabilidad (Nielsen)

Ayuda y documentación  La  El

ayuda no cubre los errores de un mal diseño buen diseño no reemplaza a la documentación

 Recomendaciones: 

Búsquedas fáciles



Proveer diferentes niveles y tipos de ayuda 

Conceptos generales de los procesos que maneja el sistema



Instrucciones



Tooltips



Ayuda contextual



Tips and Tricks

30 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008

Costos y Beneficios del Diseño Centrado en el Usuario

Costos Recursos de profesionales de Usabilidad Costo de cada prueba: Usuarios, pruebas, prototipos Costos de capacitación y cambio cultural en la organización

Beneficios Reducción de desarrollos innecesarios (por la detección de errores en forma temprana) Mayor calidad del producto entregado: 

Productos más eficientes



Menos costos de capacitación y atención al cliente

Cohesión del equipo de trabajo con un mismo objetivo

31 © Cátedra de Ingeniería de Software II – FCEN – UBA, 2008