diseño de la interfaz de usuario

Diseño de Interfaces de Software

IDS5501

V.1.0

@josebovet

2

Clase anterior

• Introducción a la Arquitectura de Software.

• Géneros Arquitectónicas • Estilos Arquitectónicos. • Diseño Arquitectónico. • Evaluación de los diseños alternativos para la

Arquitectura.

Principios del diseño de Arquitectura

3

Objetivos de las clase

• Reglas doradas • Análisis y diseño de la interfaz de usuario. • Análisis de la Interfaz. • Etapas del diseño. • Diseño de una interfaz para aplicaciones Web. • Evaluación del diseño.

Diseño de la interfaz de Usuario

4

Introducción

¿Qué es?

6

¿Qué es?

El diseño de la interfaz de usuario crea un medio eficaz de comunicación entre los seres humanos y la computadora. Sigue un conjunto de principios de diseño que identifican los objetos y acciones para luego crear plantillas de pantalla que constituyen la base del prototipo de la interfaz de usuario.

Reglas Doradas

8

Reglas de ORO

El plano de una casa (su diseño arquitectónico) no está completo sin la representación de puertas, ventanas y conexiones de servicios para el agua, electricidad, teléfono y t.v. por cable. Las «puertas, ventanas y conexiones de servicios» del software

informático es lo que constituye el diseño de la interfaz de usuario.

9

Reglas de ORO

El diseño de la interfaz se centra en tres áreas de interés:

1) El diseño de la interfaz entre los componentes del software; 2) El diseño de las interfaces entre el software y los otros productores

y consumidores de información no humanos (esto es, otras entidades externas);

3) El diseño de la interfaz entre el hombre (usuario) y la computadora. Aquí nos centramos sólo en la tercera categoría (diseño de interfaz del

usuario).

10

Las 3 Reglas

Hay tres «reglas de oro» para el diseño de la interfaz:

1. Dar el control al usuario. 2. Reducir la carga de memoria del usuario. 3. Construir una interfaz consecuente.

Estas reglas de oro son la base para los principios del diseño de la interfaz de usuario que servirán de guía para esta actividad de diseño.

11

Dar el Control al Usuario

12


“Un usuario una vez dijo, con respecto a las interfaces: «Lo que me gustaría realmente es un sistema que lea mi mente. Que conozca lo que quiero hacer antes de necesitarlo y que me facilite hacerlo. Simplemente eso».

• No hay nada malo en la solicitud del usuario. • Lo que quiere es que el sistema reaccione ante sus necesidades y le

ayude a hacer las cosas. • Quiere controlar a la computadora, y no dejar que la computadora lo

controle a él.

13


La mayor parte de las restricciones y limitaciones impuestas por el diseñador se han pensado para simplificar la interacción.

Pero, ¿para quienes?. En muchos casos, el diseñador introduce limitaciones y

restricciones para simplificar la implementación de la interfaz. Y el resultado puede ser una interfaz fácil de construir, pero

frustrante de utilizar.

14


Hay principios de diseño que permiten dar control al usuario: Definir la interacción de manera que no obligue a que el usuario realice

acciones innecesarias y no deseadas.

Si en un procesador de textos se selecciona el corrector ortográfico, el software pasa a modo corrector ortográfico.

No hay por qué obligar al usuario a permanecer en este modo, si desea continuar editando el texto.

El usuario debe poder entrar y salir de este modo sin esfuerzo.

15


¿Cómo se diseñan las interfaces que dan el control al usuario?. Tener en consideración una interacción flexible. Como diferentes usuarios tienen preferencias de interacción

diferentes, se deberán proporcionar diferentes selecciones.

16


Por ejemplo, un software que permita al usuario interactuar a través de órdenes del teclado, con ratón, lápiz digitalizador, mediante órdenes para el reconocimiento de voz, etc.

Sin embargo, no toda acción responde a todo mecanismo de interacción…

17


“No se puede dibujar una forma compleja mediante órdenes del teclado (o entrada de voz). “

18


Permitir que la interacción del usuario se pueda interrumpir y deshacer.

Cuando un usuario se ve involucrado en una secuencia de acciones, debe poder interrumpir la secuencia, para hacer cualquier otra cosa, (sin perder el trabajo que se hubiera hecho anteriormente).

El usuario deberá también tener la posibilidad de «deshacer» cualquier acción.

19


Aligerar la interacción a medida que avanza el nivel de conocimiento y permitir personalizar la interacción.

El usuario a menudo se encuentra haciendo la misma secuencia de interacciones de manera repetida.

Se podría implementar un mecanismo de «macros» que permita al usuario personalizar la interfaz y facilitar la interacción.

20


Ocultar al usuario ocasional los entretelones técnicos. La interfaz de usuario deberá introducir al usuario en el

mundo virtual de la aplicación. El usuario no tiene que conocer el sistema operativo, las

funciones de gestión de archivos, o cualquier otro secreto de la tecnología informática.

21


La interfaz no debe requerir nunca que el usuario interactúe a un nivel «interno» de la máquina (teclear órdenes del sistema operativo desde el software de aplicación).

Diseñar la interacción directa con los objetos que aparecen en la pantalla.

Permitir al manipular los objetos necesarios para llevar a cabo una tarea de forma similar a lo que ocurriría si el objeto fuera algo físico.

Ejemplo de manipulación directa: interfaz que permita al usuario «alargar» un objeto (cambiar su tamaño).

22

Reducir la carga de memoria del usuario

23

Reducir la carga de memoria

Cuanto más tenga que recordar un usuario, más propensa a errores será su interacción con el sistema.

Por eso, una interfaz de usuario bien diseñada no pondrá a prueba la memoria del usuario.

El sistema deberá «recordar» la información pertinente y ayudar a que el usuario recuerde mediante un escenario de interacción.

24

Principios de Diseño - Reducir la carga de memoria

Reducir la demanda de memoria a corto plazo. Cuando los usuarios se ven involucrados en tareas complejas, exigir una

memoria a corto plazo puede ser significativo. La interfaz se debe diseñar para reducir los requisitos y recordar

acciones y resultados anteriores. Esto se puede llevar a cabo mediante claves visuales que permitan al

usuario reconocer acciones anteriores sin tenerlas que recordar.

25


Establecer valores por defecto útiles. El conjunto inicial de valores por defecto debe ser de utilidad para al

usuario, pero un usuario también debe tener la capacidad de especificar sus propias preferencias.

Sin embargo, debe disponer de una opción de «reinicialización» que le permita volver a definir los valores por defecto.

26


Definir atajos intuitivos o mnemotécnicos. Cuando para diseñar un sistema se utiliza la mnemotécnica (por

ejemplo, alt-P para invocar la función de imprimir), ésta deberá ir unida a una acción que sea fácil de recordar (por ejemplo, la primera letra de la tarea que se invoca).

27


¿Cómo se pueden diseñar interfaces que reduzcan la carga de memoria del usuario?.

El formato visual de la interfaz se deberá basar en una metáfora del mundo real.

Un Sistema de Administración puede utilizar la imagen de la chequera para conducir al proceso de Pago de Facturas.

Esto permite que el usuario comprenda bien y no tenga que memorizar una secuencia secreta de interacciones.

28


Desglosar la información de forma progresiva.

La interfaz debe organizarse de forma jerárquica. Se debe presentar un objeto o comportamiento, primero, en un nivel

alto de abstracción. Y sólo después de que el usuario indique su preferencia,

seleccionando con el ratón, se mostrarán más detalles.

29

Construcción de una interfaz consistente

30

Interfaz Consistente

La interfaz deberá adquirir y presentar la información de forma consecuente.

Esto implica : Que toda la información visual esté organizada de acuerdo con el

diseño estándar, que se mantiene en todas las presentaciones de pantallas;

Que todos los mecanismos de entrada sean limitados; Que los mecanismos para ir de tarea a tarea se hayan implementado

consecuentemente.

31

Principios de diseño para construir una interfaz consecuente

Permitir que el usuario realice una tarea en el contexto adecuado.

Muchas interfaces implementan capas complejas de interacciones con docenas de imágenes de pantallas.

Es importante proporcionar indicadores (títulos de ventanas, iconos gráficos, codificaciones en colores consecuentes) que permitan al usuario conocer el contexto del trabajo que está llevando a cabo.

32

¿Cómo se pueden construir interfaces consecuentes?

Mantener la consistencia en toda la familia de aplicaciones.

Un conjunto de aplicaciones (o productos) debe implementar las mismas reglas de diseño para mantener la consistencia en toda la interacción.

Los modelos interactivos anteriores han esperanzado al usuario, no realicemos cambios a menos que exista alguna razón convincente para hacerlo.

33

¿Cómo se pueden construir interfaces consecuentes?

Una vez que una secuencia interactiva se ha convertido en un estándar impuesto (por ejemplo, la utilización de alt-S para grabar un archivo), el usuario espera utilizar esta combinación en todas las aplicaciones que se encuentre.

Un cambio podría originar confusión (si usamos alt-S para invocar la función cambiar de tamaño).

Análisis del Diseño de la interfaz de

Usuario

35

Modelos del Diseño

Para construir una interfaz de usuario efectiva, «todo diseño debe comenzar por conocer los usuarios destino, así como los perfiles de edad, sexo, habilidades físicas, educación, antecedentes culturales o étnicos, motivación, objetivos y personalidad».

Existen las siguientes categorías de usuarios: 1) principiantes: en general no tienen conocimientos de la utilización

de la aplicación o del sistema;

36

Modelos del Diseño

2) usuarios esporádicos y con conocimientos: poseen un conocimiento razonable, pero una retención baja de la información necesaria para utilizar la interfaz.

3) usuarios frecuentes y con conocimientos: poseen el conocimiento suficiente. Tienen el “síndrome del usuario avanzado”: individuos que buscan interrupciones breves y modos abreviados de interacción.

37

Modelos del Diseño

La Percepción del Sistema (el modelo de usuario) es la imagen del sistema que el usuario final tiene en su mente.

Por ejemplo, si se preguntara a un usuario que describiera su forma de manejar el programa, la respuesta vendría guiada por su percepción del sistema.

La precisión de la descripción dependerá del perfil del usuario (por ejemplo, los principiantes responderían con una respuesta muy elemental) y de su familiaridad con el software.

38

Modelos del Diseño

Un usuario que comprenda bien los sistemas del rubro, aunque haya trabajado solo una vez con ese software específico, puede dar una descripción más completa de su funcionamiento, que el principiante que haya pasado unas cuantas semanas intentando aprender a usarlo.

La Imagen del sistema es una combinación de la apariencia del sistema y la información de soporte: libros, manuales, videos, archivos de ayuda, que describen al sistema.

Cuando la imagen y la percepción del sistema coinciden, los usuarios generalmente se sienten a gusto con el software y su funcionamiento.

39

Modelos del Diseño

El Diseñador de la Interfaz debe cumplimentar el principio más importante del diseño de la interfaz de usuario: «quien conoce al usuario, conoce las tareas».

Cuando la imagen del sistema y la percepción del sistema coinciden, el usuario puede utilizar la aplicación de forma efectiva.

40

El Proceso

El proceso de diseño de las interfaces de usuario es iterativo y se puede representar mediante un modelo espiral similar al abordado en la Unidad I.

En la Figura siguiente se puede observar que el proceso de diseño de interfaz de usuario acompaña cuatro actividades distintas:

1. Análisis y modelado de usuarios, tareas y entornos. 2. Diseño de la interfaz 3. Implementación de la interfaz 4. Validación de la interfaz

41

El Proceso - Modelo

42

El Proceso

La espiral implica que cada una de las tareas anteriores aparecerán más de una vez, en donde a medida que se avanza por la espiral se representará la elaboración adicional de los requisitos y el diseño resultante.

La implementación implica la generación de prototipos (forma práctica para validar lo que se ha diseñado).

La actividad de análisis inicial se concentra en el perfil de los usuarios que van a interactuar con el sistema.

43

El Proceso

Se registran el nivel de conocimiento, la comprensión del negocio y la receptividad general del nuevo sistema, y se definen diferentes categorías de usuarios.

En cada categoría se lleva a cabo la explicitación de los requisitos. El ingeniero del software intenta comprender la percepción del

sistema para cada clase de usuario.

44

El Proceso

Una vez definidos los requisitos generales, se lleva a cabo un análisis más detallado de las tareas.

Se identifican, describen y elaboran las tareas que realiza el usuario para conseguir los objetivos.

El análisis del entorno de usuario se centra en el entorno del trabajo físico.

Se formulan las siguientes preguntas : ¿Dónde se ubicará físicamente la interfaz? ¿Dónde se situará el usuario? ¿Llevará a cabo tareas no relacionadas con la interfaz?

¿Se adapta bien el hardware a las limitaciones de luz, espacio o ruido?

45

El Proceso

Objetivo del Diseño de Interfaz: definir un conjunto de objetos y acciones de interfaz que permitan al usuario llevar a cabo todas las tareas definidas para que cumplir con todos los objetivos de usabilidad definidos por el sistema.

La actividad de implementación comienza con la creación de un prototipo que permita evaluar los escenarios de utilización.

46

El Proceso - Evaluación del diseño

La validación se centra en:

• La habilidad de la interfaz para implementar correctamente todas la tareas del usuario, adecuarse a todas las variaciones de tareas, y cumplir los requisitos generales del usuario;

• El grado de facilidad de utilización de la interfaz y de aprendizaje;

• La aceptación de la interfaz, por parte del usuario, como una herramienta útil en su trabajo.

47

Análisis de la Interfaz del Usuario

Un sistema interactivo, basado en computadora, se usa para reemplazar una actividad manual o semi-manual.

Primero, un ingeniero deberá entender las tareas que realizan los hombres actualmente (cuando existe un enfoque manual) y corresponderlas con un conjunto de tareas similares (no necesariamente idénticas) que se implementan en la interfaz del usuario.

48

Análisis del Usuario

¿Cómo se aprende lo que el usuario quiere de la interfaz?

49

Análisis del Usuario

Para ello, se utiliza información procedente de una variedad amplia de fuentes:

• Entrevistas: Miembros del equipo de software se reúnen con los usuarios para entender mejor sus necesidades, motivaciones, cultura laboral y una multitud de aspectos adicionales.

• Información de Ventas: El personal de ventas habla con los usuarios de manera regular y recaba información que ayuda al equipo de software a clasificarlos y a entender mejor sus requerimientos.

• Información de Mercadotecnia:El análisis del mercado es invaluable para la definición de segmentos del mercado y su comprensión.

• Información de Apoyo:Constituye la fuente de información más probable acerca de lo que funciona y lo que no, lo que les gusta a los usuarios y lo que les desagrada, qué características generan preguntas y cuáles son fáciles de usar.

50

Preguntas de ayuda para el Análisis del Usuario.• ¿Los usuarios son profesionales capacitados, técnicos, oficinistas o trabajadores de manufactura?

• ¿Qué nivel de educación formal tiene el usuario promedio? • ¿Los usuarios son capaces de aprender mediante materiales escritos o han manifestado

el deseo de recibir enseñanzas en un aula?

• ¿Los usuarios son mecanógrafos expertos o tienen fobia a los teclados?

• ¿Cuál es el rango de edades de la comunidad de usuarios?

• ¿Los usuarios estarán representados sobre todo por un género?

• ¿Cómo se compensa a los usuarios por el trabajo que realizan?

• ¿Los usuarios trabajan en un horario normal de oficina o hasta terminar el trabajo que hacen?

• ¿El software va a ser parte integral del trabajo de los usuarios o sólo lo emplearán de manera ocasional?

• ¿Cuál es el idioma principal de los usuarios?

• ¿Cuáles son las consecuencias si el usuario comete un error al emplear el sistema? • ¿Los usuarios son expertos en el tema en el que está centrado el sistema? • ¿Los usuarios quieren saber sobre la tecnología que hay tras la interfaz?

51

Análisis y modelado de la tarea

Al observar el ambiente de trabajo, el ingeniero se da cuenta que el mismo se compone de una serie de actividades importantes.

Todas estas tareas se conforman de varias subtareas.

Hay subtareas que se podrán llevar a cabo automáticamente en el software, con muy poca interacción directa con el usuario.

La interfaz deberá adaptarse a cada tarea, de forma consecuente.

52

Pasos a seguir - Análisis de la tarea

Finalizado el Análisis de Tareas, quedan definidas detalladamente todas (objetos y acciones) que requiere el usuario final y comienza la actividad del Diseño de la Interfaz.

¿Cuáles son los pasos que hay que seguir para llevar a cabo el diseño de la Interfaz?

53

1. Establecer los objetivos e intenciones para cada tarea.

2. Hacer corresponder cada objetivo/intención con una secuencia de acciones

específicas.

3. Especificar la secuencia de acciones: tareas y subtareas (escenario del

usuario), y la manera en que se ejecutarán en la interfaz.

4. Indicar el estado del sistema: aspecto que tiene la interfaz cuando se está

llevando a cabo el escenario del usuario.

5. Definir los mecanismo de control: objetos y acciones disponibles para que

el usuario altere el estado del sistema.

6. Mostrar cómo los mecanismos de control afectan al estado del sistema.

7. Indicar cómo el usuario interpreta el sistema a partir de la información

proporcionada por la interfaz.

Pasos - Análisis de la tarea

54

Análisis del contenido de la pantalla

¿Cómo se determina el formato y la estética del contenido desplegado como parte de la interfaz de usuario?

55


Con posterioridad, se lleva a cabo el análisis de la pantalla. Es un proceso interactivo de diseño gráfico y en él efectuamos: A) colocación de iconos, B) definición de textos descriptivos en pantalla, C) especificación y títulos para ventanas, D) definición de elementos principales y secundarios del menú .

56


¿Cómo se determina el formato y la estética del contenido desplegado como parte de la interfaz de usuario?

Respondiendo a estas preguntas: ¿Se asignan diferentes tipos de datos a sitios consistentes en la geografía de la pantalla (por ejemplo, las fotografías aparecen siempre en la esquina superior derecha)? • ¿El usuario puede personalizar la ubicación del contenido en la pantalla? • ¿Se asigna una identificación apropiada a todo el contenido que hay en la pantalla? • Si se presenta un reporte grande, ¿cómo debe dividirse para facilitar su comprensión? • ¿Se dispondrá de mecanismos para pasar directamente a información resumida de grandes conjuntos de datos? • ¿Las salidas gráficas estarán a escala para que se ajusten a los bordes del dispositivo de pantalla que se utilice? • ¿Cómo se empleará el color para mejorar la comprensión? • ¿De qué manera se presentará al usuario los mensajes de error y las advertencias?

Etapas y aspectos del Diseño

58

Etapas del diseño

1. Definir objetos y acciones de la interfaz (operaciones) con el uso de

la información desarrollada en el análisis de la interfaz.

2. Definir eventos (acciones del usuario) que harán que cambie el

estado de la interfaz de usuario. Hay que modelar este

comportamiento.

3. Ilustrar cada estado de la interfaz como lo vería en la realidad el

usuario final.

4. Indicar cómo interpreta el usuario el estado del sistema a partir de

la información provista a través de la interfaz.

59

Etapas del diseño

En ciertos casos, se comienza con bosquejos de cada estado de la interfaz y después se trabaja hacia atrás para definir objetos, acciones y otra información importante del diseño.

Sin importar la secuencia de las tareas de diseño, debe:

1) Siempre apegarse a las reglas doradas estudiadas en la sección.

2) Modelar la forma en la que se va a implementar la interfaz .

3) Considerar el ambiente (por ejemplo, tecnología de la pantalla, sistema operativo, herramientas de desarrollo, etc.) que se empleará.

60

Aspectos y problemas del diseño

“Un error común que cometen las personas cuando tratan de diseñar algo por completo a prueba de tontos es subestimar la ingenuidad de los tontos completos.”

61

Aspectos y problemas del diseño

A medida que la interfaz de usuario va evolucionando, afloran 6 temas comunes de diseño:

1) el tiempo de respuesta del sistema, 2) los servicios de ayuda al usuario, 3) la manipulación de información de errores 4) leyendas del menú y de los comandos. 5) accesibilidad de la aplicación.. 6) Internacionalización.

Desgraciadamente, muchos diseñadores no abordan estos temas dentro del proceso de diseño hasta que es relativamente tarde (a veces no se advierte un error hasta contar con el prototipo operativo).

62

Tiempo de respuesta del sistema

El resultado suele ser una iteración innecesaria, demoras y frustración del usuario.

Es mejor encarar el tema al iniciar el diseño del software, cuando los cambios son fáciles y los costos, menores.

En muchas aplicaciones interactivas el tiempo de respuesta del sistema es el principal motivo de queja.

El tiempo de respuesta del sistema se mide desde que el usuario realiza la acción de control (pulsar la tecla ENTER o el botón del ratón) hasta que el software responde con la acción deseada.

63


64

El tiempo de respuesta del sistema tiene dos características importantes: la duración y la variabilidad.

Si a duración de la respuesta del sistema es demasiado larga, tendremos como resultado la frustración y el estrés del usuario.

Sin embargo, un tiempo de respuesta rápido puede obligar a que el usuario se precipite y cometa errores.


65

La variabilidad es la desviación del tiempo de respuesta promedio, y puede ser la característica más importante del tiempo de respuesta.

Una variabilidad baja permite al usuario establecer un ritmo de interacción, aunque el tiempo de respuesta sea relativamente largo.

Si una respuesta demora entre 0,1 a 2,5 segundos, el usuario estará desconcertado y se preguntará qué habrá pasado detrás de la escena.

En esos casos, convendría más reiterarle la misma pregunta o petición a estar sujeto a tan amplia variabilidad del tiempo de respuesta.


66

Servicios de ayuda al usuario

Los usuarios de sistemas interactivos siempre requieren ayuda. Hay 2 tipos de funciones de ayuda más comunes: las integradas y las

complementarias (añadibles).

Función de ayuda integrada: se diseña dentro del mismo software desde el principio.

Es sensible al contexto => permite al usuario seleccionar entre los temas relevantes para las acciones que esté llevando a cabo en ese momento.

Reduce el tiempo requerido para obtener ayuda, e incrementa su «familiaridad» con la interfaz.

67


Cuando se va a considerar un servicio de ayuda deberán abordarse los siguientes temas de diseño:

¿Se necesitarán todas las funciones del sistema en cualquier momento durante la interacción del sistema? .

Opciones: ayuda solo para un subconjunto de funciones o ayuda para todas las funciones.

¿Cómo solicitará ayuda el usuario?. Opciones: menú de ayuda; una tecla de función especial; una

orden de AYUDA.

68


¿Cómo se representará la ayuda?. Opciones: una ventana separada, una referencia a un documento

impreso (no recomendable); una sugerencia de una o dos líneas que surge en una localización fija en la pantalla.

¿Cómo regresará el usuario a la interacción normal?. Opciones: botón de retorno visualizado en la pantalla; tecla de

función o una secuencia de control.

69


¿Cómo se estructurará la información sobre la pantalla? Opciones: una estructura «plana»; una jerarquía estratificada de

información que va proporcionando más datos a medida que el usuario va entrando por la estructura; la utilización de hipertexto.

70

Manipulación de información de errores

71


Cuando ha salido algo mal, los mensajes de error y las sugerencias son «malas noticias» para los usuarios.

En muchos casos, estos mensajes brindan información engañosa o insuficiente y sirven sólo para aumentar la frustración del usuario.

Muchos usuarios se han encontrado con un error así: “FALLO GRAVE DEL SISTEMA - - 14A”.

Este mensaje de error no indica qué significa o dónde mirar para obtener más información.

72


Un mensaje de error así no alivia la ansiedad del usuario ni soluciona el problema.

• Los mensajes de error deben tener estas características: • Debe describir el problema en términos que el usuario entienda. • Debe dar consejos constructivos para recuperarse de un error. • Debe indicar las consecuencias negativas del error (“archivos de

datos posiblemente dañados”); para que el usuario lo pueda corregir, en caso de existir.

73


El mensaje debe ir seguido por una clave audible o visual (según Pressman).

Para acompañar la visualización del mensaje se podría generar un pitido, o aparecer momentáneamente una luz destelleante o visualizarse en un color que se pueda reconocer fácilmente como el «color del error».

El mensaje no deberá tener «sentencias» => el mensaje no debe culpar al usuario.

A nadie le gusta tener malas noticias.

74

Leyendas del menú y de los comandos.

Como ya se dijo, en todas las aplicaciones deben establecerse convenciones para el uso de los comandos.

Con frecuencia resultan confusos y se facilita que el usuario cometa errores si tiene que escribir alt-D cuando se ha de duplicar un objeto gráfico en una aplicación y alt-D cuando ha de eliminarse en otra.

Resulta obvio el potencial que hay para el error.

75

Leyendas del menú y de los comandos.

• ¿Toda opción de menú tiene un comando correspondiente? • ¿Qué forma tendrán los comandos? Las opciones incluyen una

secuencia de control (por • ejemplo, alt-P), teclas de función o palabras escritas. • ¿Cuán difícil será aprender y recordar los comandos? ¿Qué puede

hacerse si se olvida un comando? • ¿Los comandos pueden ser personalizados o abreviados por el

usuario? • ¿Las leyendas del menú se explican por sí mismas en el contexto de

la interfaz? • ¿Son consistentes los submenús con la función implicada por un

tema maestro del menú?

76

Accesibilidad de la aplicación.

• Asegurarse de que el diseño de la interfaz incluya mecanismos que permitan el acceso fácil de las personas con necesidades especiales.

• La accesibilidad para los usuarios que tengan discapacidades físicas es un imperativo por razones éticas, legales y comerciales.

77

Internacionalización.

• El desafío para los diseñadores de interfaces es crear un software “globalizado”.

• Las interfaces de usuario deben emplearse para que incluyan un núcleo general de funcionalidad que se distribuya a todos aquellos que utilicen el software.

• Las características de localización permiten que la interfaz se personalice para un mercado específico.

Diseño de una interfaz para

webapps

79

Diseño Interfaz de aplicaciones web

Toda aplicación de software tradicional, producto de consumo o dispositivo industrial— debe tener características de usabilidad.

¿Dónde estoy? La interfaz debe: 1) dar una indicación de la webapp a la que se ha accedido. 2) Informar al usuario de su localización en la jerarquía del contenido. ¿Qué puedo hacer ahora? La interfaz siempre debe ayudar al usuario a entender sus opciones actuales:

cuáles funciones están disponibles, qué vínculos están vivos, qué contenido es relevante, etc.

¿Dónde he estado, hacia dónde voy? La interfaz debe facilitar la navegación. Para ello, debe disponer un “mapa” (implementado en forma tal que sea fácil de entender) que indique dónde ha estado el usuario y las trayectorias que pueden tomarse para moverse a cualquier punto de la aplicación.

80

Principios y lineamientos del diseño de la interfaz

Se definen un conjunto de características fundamentales que todas las interfaces deben tener y con ello establece la filosofía que todo diseñador de interfaces de webapps debe seguir.

81


• Las interfaces eficaces son atractivas visualmente y perdonan los errores, lo que da a sus usuarios la sensación de tener el control.

• Los usuarios perciben rápidamente la totalidad de sus opciones, captan cómo lograr sus metas y cómo hacer su trabajo.

82


• Las interfaces eficaces no preocupan al usuario con el funcionamiento interno del sistema.

• El trabajo se guarda de manera cuidadosa y continua, con opción total para que el usuario deshaga cualquier actividad en cualquier momento.

• Las aplicaciones y servicios eficaces realizan un máximo de trabajo, al tiempo que requieren un mínimo de información de parte de los usuarios.

83

Principios generales del diseño

• Previsión • Comunicación • Consistencia • Autonomía Controlada • Eficiencia • Flexibilidad • Centrarse • Objetos de la interfaz humana. • Redundancia de la latencia.

• Aprendizaje • Metáforas • Mantener integridad. • Legibilidad • Seguimiento de estado • Navegación Visible

84

Previsión

Una aplicación web debe diseñarse de modo que prevea el siguiente movimiento del usuario.

Por ejemplo, considere una webapp de ayuda al cliente desarrollada por un fabricante de impresoras para computadora.

El diseñador de la webapp debe prever que el usuario tal vez pida descargar el controlador y debe brindar facilidades de navegación que lo permitan, sin requerir que el usuario busque esta capacidad.

85

Comunicación.

• La interfaz debe comunicar el estado de cualquier actividad iniciada por el usuario.

• La comunicación puede ser obvia (por ejemplo, un mensaje de texto) o sutil (como la imagen de una hoja de papel que se mueva a través de una impresora para indicar que hay una impresión en curso).

• La interfaz también debe comunicar el estado del usuario (como su identificación) y su ubicación dentro de la jerarquía del contenido de la webapp.

86

Consistencia.

El uso de controles de navegación, menús, iconos y estética (color, forma y distribución) debe ser consistente en la webapp.

Por ejemplo, digamos un rectángulo en amarillo, que se utilice para indicar un mensaje de precaución antes de que el usuario invoque una función o acción particular, no debe usarse para otros propósitos en ningún otro lugar de la webapp.

87

Autonomía Controlada

La interfaz debe facilitar el movimiento del usuario a través de la webapp, pero lo debe hacer de manera que obligue a respetar las convenciones que se hayan establecido para la aplicación.

Por ejemplo, debe controlarse la navegación hacia partes seguras de la webapp por medio de la identificación y clave del usuario, y no debe haber ningún mecanismo de navegación que permita que un usuario evite dichos controles.

88

Eficiencia

El diseño de la webapp y su interfaz deben optimizar la eficiencia del trabajo del usuario, no la del desarrollador que la diseña y construye ni del ambiente cliente-servidor que la ejecuta.

“Esta sencilla verdad explica por qué es tan importante que todos los involucrados en un proyecto de software aprecien la importancia de hacer que la productividad del usuario sea la meta número uno, y de entender la diferencia vital entre construir un sistema eficiente y dar poder a un usuario eficiente.”

89

Flexibilidad

La interfaz debe tener flexibilidad suficiente para permitir que algunos usuarios realicen tareas directamente, y que otros exploren la webapp en forma aleatoria.

En cada caso, debe permitir al usuario entender dónde se encuentra y darle la funcionalidad para deshacer errores y volver a trazar trayectorias de navegación mal elegidas.

90

Centrarse

La interfaz de la webapp (y el contenido que presente) debe mantenerse centrada en las tareas en curso del usuario.

En todos los medio de hipertexto, existe la tendencia a llevar al usuario a contenido poco relacionado.

¿Por qué? Porque es muy fácil hacerlo... El problema es que el usuario puede extraviarse con rapidez en muchas capas de información de apoyo y perder de vista el contenido original que buscaba inicialmente.

91

Objetos de la interfaz humana.

Se ha desarrollado una amplia biblioteca de objetos reutilizables de interfaces humanas para webapps.

Úselas. Cualquier objeto de interfaz que pueda ser “visto, escuchado, tocado o percibido de otro modo” por un usuario final, puede obtenerse de alguna, entre muchas, librerías de objetos.

92

Reducción de Latencia

En vez de hacer que el usuario espere a que termine alguna operación interna (como descargar una imagen gráfica compleja), la webapp debe usar tareas múltiples, de manera que permita que el usuario continúe con su trabajo mientras finaliza la operación.

Además de reducir la latencia, los retrasos deben explicarse de modo que el usuario entienda lo que esté pasando.

Esto incluye: 1) Dar retroalimentación auditiva cuando una selección no dé como resultado una acción

inmediata por parte de la webapp, 2) Desplegar un reloj con animación o una barra de avance que indique que hay un

procesamiento en marcha 3) Dar alguna distracción (presentación o texto animado) cuando tenga lugar un

procesamiento tardado.

93

Aprendizaje

Una interfaz de webapp debe diseñarse para minimizar el tiempo de aprendizaje y, una vez aprendida, minimizar el que se dedique a reaprender cuando se regrese a la webapp.

En general, la interfaz debe hacer énfasis en un diseño sencillo e intuitivo que organice el contenido y funcionalidad en categorías que resulten obvias para el usuario.

94

Metaforas

Una interfaz que use una metáfora de interacción es más fácil de aprender y de usar, en la medida en la que la metáfora sea apropiada para la aplicación y el usuario.

Una metáfora debe recurrir a imágenes y conceptos salidos de la experiencia del usuario, pero no necesita ser una reproducción exacta de una experiencia del mundo real.

Carrito de compras

95

Mantener la integridad de los productos del trabajo.

Un producto del trabajo (por ejemplo, un formulario llenado por un usuario) debe guardarse en forma automática, de modo que no se pierda si ocurriera un error.

Todos hemos experimentado la frustración que surge cuando al terminar de llenar un formulario extenso en una webapp, se pierde su contenido debido a un error.

La interfaz debe apoyar esta función y dar al usuario un mecanismo fácil de recuperación de la información “perdida”.

96

Legibilidad

Toda la información presentada en la interfaz debe ser legible para todo segmento de la población.

El diseñador de la interfaz debe hacer énfasis en estilos legibles para las

letras, en su tamaño y en el color del fondo, que debe contrastar.

97

Seguimiento de Estado

Cuando resulte apropiado, debe darse seguimiento al estado de la interacción del usuario y guardarlo, de modo que éste pueda salir y volver más tarde para recuperarlo de donde lo haya dejado.

En general, las cookies pueden diseñarse para que guarden información del estado. Sin embargo, son una tecnología controvertida y para ciertos usuarios resultan más atractivas otras soluciones de diseño.

98

Navegación Visible

Una interfaz de webapp bien diseñada da “la ilusión de que los usuarios están en el mismo lugar, con el trabajo llevado a ellos”

Cuando se emplea este enfoque, la navegación no es asunto del usuario. En vez de ello, éste recupera objetos del contenido y selecciona funciones que se despliegan y ejecutan a través de la interfaz.

Flujos de Trabajo en el diseño de la

interfaz Web.

100

Flujos de trabajo

• Revisar la información contenida en el modelo de requerimientos y

refinarla según se requiera.

• Desarrollar un esquema aproximado de la distribución de la interfaz

para la webapp.

• Mapear los objetivos del usuario en acciones específicas de la interfaz

• Definir un conjunto de tareas de usuario asociadas con cada acción.

• Elaborar un guión de las imágenes en la pantalla para cada acción de la

interfaz.

• Refinar la distribución de la interfaz y los guiones con entradas del

diseño de la estética.

101

Flujos de trabajo

• Identificar los objetos de la interfaz de usuario requeridos para

implementar la interfaz.

• Desarrollar una representación del procedimiento de la interacción del

usuario con la interfaz

• Desarrollar una representación del comportamiento de la interfaz.

• Describir la distribución de la interfaz para cada estado.

• Refinar y revisar el modelo del diseño de la interfaz.

Evaluación del Diseño

103


Una vez que se crea un prototipo operativo de la interfaz de usuario, debe

evaluarse con objeto de determinar si satisfacen las necesidades de

éste.

La evaluación abarca un espectro de formalidad que va desde una “prueba

de manejo” informal, en la que el usuario da retroalimentación

instantánea a un estudio.

104

Ciclo de evaluación del Diseño

105


El enfoque del prototipo es eficaz, pero ¿es posible evaluar la calidad de una interfaz de usuario

antes de que se construya el prototipo?

Si se identifican y corrigen a tiempo los problemas potenciales, se reducirá el número de

bucles en el ciclo de evaluación y disminuirá el tiempo de desarrollo

106

Evaluación del DiseñoSe pueden aplicar los siguientes criterios de evaluación durante las primeras revisiones.

1. La longitud y complejidad del modelo de requerimientos o especificaciones escritas del sistema y

su interfaz darán una indicación de la cantidad de aprendizaje requerido por los usuarios del

sistema.

2. El número de tareas del usuario especificadas y el número promedio de acciones por tarea

indicarán el tiempo de interacción de la eficiencia general del sistema.

3. El número de acciones, tareas y estados del sistema indicados por el modelo del diseño implicarán

la carga de memoria para los usuarios del sistema.

4. El estilo de la interfaz, las herramientas de ayuda y el protocolo del manejo de errores darán una

indicación general de la complejidad de la interfaz y de su grado de aceptación por parte del

usuario.

107

Próxima clase

PRUEBAS DE SOFTWARE

diseño de la interfaz de usuario

Education