Diseño de interfaces

Ingeniería en Sistemas de Información

Diseño de Sistemas(3K1)

Contenidos de la Unidad 5Diseño de Interfaces

5. Diseño de Interfaces Sommerville. Cap. 16. Introducción.

A. Reglas de oro. Pressman. Sección 15.1B. Asuntos de DiseñoInteracción del UsuarioPresentación de la Información

Sommerville. Sección 16.1.

C. El proceso de diseño de interfaz de usuario.

Pressman. Sección 15.2

a. Análisis y diseño (Prototipado)

Pressman. Sección 15.3.

b. Actividades de diseño de la interfaz


c. Implementación. Pressman. Sección 15.5.d. Evaluación del diseño de interfaz.


D. Diseño a Nivel de Componentes

Pressman. Sección 16.1 y 16.2

Diseño de Interfaces(Ian Sommerville, Cap.

XVI)

El diseño de sistemas abarca varias actividades, que van hasta el diseño de la interfaz de usuario.

Muchos especialistas trabajan en el diseño de hardware y el diseño gráfico de páginas web.

Sin embargo, sólo las organizaciones grandes emplean diseñadores especialistas de interfaces para sus aplicaciones software.

Por tanto, los ingenieros de software a menudo deben tomar la responsabilidad de diseñar la interfaz de usuario, así como del diseño del software que implementa esa interfaz.

Aunque los diseñadores y programadores de software son competentes en la tecnología de implementación de interfaces, las interfaces de usuario que desarrollan suelen ser poco atractivas e inapropiadas para sus usuarios.

Por eso estudiaremos el proceso de diseño de interfaces de usuario en lugar del software que implementa estas interfaces.

Diseño de Interfaces

Un diseño cuidadoso de la interfaz de usuario es parte fundamental del proceso de diseño general del software.

Si un sistema software debe alcanzar su potencial máximo, es fundamental que su interfaz de usuario sea diseñada para ajustarse a las habilidades, experiencia y expectativas de sus usuarios previstos.

Un buen diseño de la interfaz de usuario es crítico para la confiabilidad del sistema.

Muchos de los «errores de usuario» son causados porque las interfaces de usuario no consideran las habilidades de los usuarios reales y su entorno de trabajo.


Una interfaz de usuario mal diseñada significa que los usuarios no podrán acceder a algunas características del sistema, cometerán errores y sentirán que el sistema les dificulta en vez de ayudarlos.

Cuando se toman decisiones en el diseño de las interfaces de usuario, deben tenerse en cuenta las capacidades físicas y mentales de las personas que utilizarán el software.

Algunos factores humanos importantes a considerar son :


1. Las personas tienen una memoria limitada a corto plazo: podemos recordar instantáneamente como 7 elementos de información. Por lo tanto, si a los usuarios se les presenta demasiada información al mismo tiempo, es posible que no puedan asimilarla.2. Todos cometemos errores: especialmente cuando tenemos que manejar demasiada información o estamos estresados. Cuando los sistemas fallan y emiten mensajes de aviso y alarmas, aumentan el estrés de los usuarios, incrementando la posibilidad de que cometan errores.


3. Poseemos un amplio rango de capacidades físicas: Unas personas ven y escuchan mejor que otras, otras son daltónicas, y otras son mejores en manipulaciones físicas. No se debe diseñar para las propias capacidades y suponer que todos los otros usuarios serán capaces de adaptarse.4. Tenemos diferentes preferencias de interacción: A algunos les gusta trabajar con imágenes, a otros con texto. La manipulación directa es natural para algunas personas, pero otras prefieren interactuar con comandos al sistema.


Estos factores humanos son la base para los principios de diseño.

Estos principios generales se aplican a todos los diseños de interfaces de usuario.

El principio de familiaridad del usuario sugiere que los usuarios no deben ser obligados a adaptarse a una interfaz sólo porque sea conveniente implementarla.

La interfaz debe utilizar términos familiares para los usuarios, y los objetos que el sistema manipula deben estar directamente relacionados con el entorno de trabajo del usuario.


Si un sistema se diseña para ser utilizado por controladores del tráfico aéreo, los objetos deben ser aviones, trayectorias de vuelo, etcétera.

Las operaciones asociadas podrían ser aumentar o reducir la velocidad del avión, ajustar la posición del avión y cambiar de altura.

La implementación subyacente de la interfaz (archivos y estructuras de datos) se debe ocultar al usuario final.


El principio de uniformidad de la interfaz de usuario significa que los comandos y menúes del sistema deben tener el mismo formato, los parámetros deben pasarse a todos los comandos de la misma forma, y la puntuación de los comandos debe ser similar.

Las interfaces uniformes reducen el tiempo de aprendizaje del usuario.

Así, el conocimiento aprendido en un comando o aplicación es aplicable en otras partes del sistema o en aplicaciones relacionadas.

La uniformidad de la interfaz a lo largo de las aplicaciones también es importante.


Los comandos con significados similares en aplicaciones diferentes se deben expresar de la misma forma.

A menudo los errores se originan cuando el mismo comando del teclado, como «Control+b», significa cosas diferentes en sistemas distintos.

Normalmente, se pueden evitar este tipo de errores si se siguen los métodos abreviados para las teclas de comandos definidos por el sistema operativo que utiliza.


Principios de Diseño de las Interfaces de Usuario

Sin embargo, la uniformidad total no siempre es posible o deseable.

Puede ser razonable implementar el borrado de un escritorio arrastrando las entidades a un cubo de basura, pero sería incómodo borrar el texto en un procesador de textos de esta forma.

Desgraciadamente, los principios de familiaridad del usuario y uniformidad a veces son contradictorios.

Idealmente, las aplicaciones con características comunes deberían utilizar siempre los mismos comandos para acceder a estas características.


Sin embargo, esto puede chocar con los hábitos del usuario cuando los sistemas se diseñan para apoyar a un tipo de usuario en particular, como los diseñadores gráficos.

Estos usuarios pueden tener que desarrollar sus propios estilos de interacciones, terminología y convenciones de funcionamiento.

Éstas pueden estar en desacuerdo con los «estándares» de interacción apropiados para aplicaciones más generales como los procesadores de textos.


El principio de mínima sorpresa es apropiado porque las personas se irritan demasiado cuando el sistema se comporta de forma inesperada.

Cuando se usa un sistema, los usuarios construyen un modelo mental de la forma en que trabaja dicho sistema.

Si una acción en algún contexto provoca un tipo de cambio particular, es razonable esperar que la misma acción en un contexto diferente cause un cambio comparable.

Si sucede algo completamente diferente, el usuario se sorprende y confunde.


Por lo tanto, los diseñadores de interfaces deben asegurar que las acciones comparables tengan efectos comparables.

Las sorpresas en las interfaces de usuario a menudo se deben al hecho de que en muchas interfaces existen varios modos de trabajo (por ejemplo, el modo vista y el modo edición), y el efecto de un comando es diferente dependiendo del modo.

Es muy importante que, al diseñar una interfaz, se incluya un indicador visual que muestre al usuario el modo actual.


El principio de recuperabilidad es importante porque los usuarios inevitablemente cometen errores cuando utilizan un sistema.

El diseño de la interfaz puede minimizar estos errores (por ejemplo, los errores de teclado se evitan si se utilizan menús).

Pero los errores nunca pueden eliminarse completamente.

Por consiguiente, se deben incluir recursos que permitan a los usuarios recuperarse de sus errores.

Éstos pueden ser de tres tipos:


1. Confirmación de acciones destructivas. Si un usuario lleva a cabo una acción potencialmente destructiva, el sistema debe pedirle que confirme que esto es realmente lo que desea antes de destruir cualquier información.

2. Proporcionar un recurso para deshacer. Restablece el sistema al estado previo antes de que ocurriera la acción. Son útiles varios niveles de este recurso, porque los usuarios no siempre reconocen inmediatamente que han cometido un error.

Recursos que facilitan el Principio de

Recuperabilidad

3. Generar puntos de control. La generación de puntos de control implica grabar el estado de un sistema en intervalos periódicos y permitir que el sistema se restaure desde el último punto de control.

Así, cuando se produce un error, el usuario puede retroceder a un estado previo y empezar de nuevo.

Recursos que facilitan el Principio de

Recuperabilidad

Principio de asistencia al usuario: Las interfaces deben proporcionar asistencia al usuario o ayuda.

Éstas se deben integrar en el sistema y proporcionar diferentes niveles de ayuda y asesoramiento.

Los niveles deben variar desde la información básica para iniciarse con el sistema hasta una descripción completa de las características del sistema.

Los sistemas de ayuda se deben estructurar de forma que cuando el usuario requiera ayuda no se sienta saturado con la información.

Principio de Asistencia al Usuario

Este principio nos enseña que, para muchos sistemas interactivos, pueden existir diferentes tipos de usuarios.

Algunos son usuarios casuales y tienen interacción con el sistema ocasionalmente, mientras que otros son usuarios habituales que utilizan el sistema durante varias horas todos los días.

Los usuarios casuales necesitan interfaces que los guíen, pero los usuarios habituales requieren métodos abreviados, para interactuar con el sistema tan rápido como sea posible.


Además, los usuarios pueden tener impedimentos de varios tipos y, si es posible, las interfaces deben adaptarse a esto.

Por lo tanto, se podría incluir recursos para mostrar diferentes tamaños de texto, reemplazar el sonido con texto, permitir modificar el tamaño de los botones, etcétera.

La idea es no excluir a usuarios con elecciones de diseño irreflexivas.


El principio de reconocimiento de la diversidad de usuarios puede estar en pugna con los otros principios de diseño de las interfaces, ya que algunos usuarios pueden preferir una interacción muy rápida sobre la uniformidad de la interfaz.

También, el nivel de ayuda requerido puede ser radicalmente diferente para distintos usuarios, y puede ser imposible desarrollar ayudas adecuadas para todos.

Por lo tanto, debemos buscar soluciones de compromiso para hacer compatibles las necesidades de estos usuarios.

Principio del Reconocimiento de la

Diversidad de Usuarios

Debemos considerar los siguientes asuntos generales de diseño de interfaces de usuario.

Fundamentalmente, el diseñador de una interfaz de usuario se plantea dos cuestiones clave:

1. ¿Cómo debe interactuar el usuario con el sistema informático?

2. ¿Cómo se debe presentar la información del sistema informático al usuario?

Una interfaz de usuario coherente debe integrar la interacción del usuario y la presentación de la información.

Asuntos de Diseño(Ian Sommerville 16.1)

La interacción del usuario significa emitir comandos y datos asociados al sistema informático.

En las primeras computadoras, la única forma de hacer esto era a través de una línea de comandos, y se utilizaba un lenguaje de propósito específico para comunicarse con la máquina.

Sin embargo, este enfoque se orientó a usuarios expertos. Actualmente se han desarrollado varios enfoques que son

más fáciles de utilizar. Hay 5 estilos principales de interacción:

Interacción del Usuario

1. Manipulación directa. El usuario interactúa directamente con los objetos de la pantalla.

La manipulación directa implica un dispositivo apuntador (un ratón, un lápiz óptico, un trackball o, en una pantalla táctil, un dedo) que indica el objeto a manipular y la acción, la cual especifica lo que se debe hacer con ese objeto.

Por ejemplo, para borrar un archivo, se puede hacer clic en un icono que represente a ese archivo y arrastrarlo a un icono de un cubo de basura.

Estilos de Interacción del Usuario

2. Selección de menús. El usuario selecciona un comando de una lista de posibilidades (un menú).

También puede seleccionar otro objeto de la pantalla por manipulación directa, y el comando actúa sobre él.

En este enfoque, para borrar un archivo, seleccionaría el icono del archivo y después el comando de borrado.


3. Rellenado de formularios. El usuario rellena los campos de un formulario.

Algunos campos pueden llevar menús asociados, y el formulario puede tener «botones» de acción que, cuando se presionan, hacen que se inicie alguna acción.

Normalmente no utilizará este enfoque para implementar la interfaz de operaciones como el borrado de archivos.

Hacer esto implicaría introducir el nombre del archivo en el formulario y después «presionar» un botón de borrar.


4. Lenguaje de comandos. El usuario emite un comando especial y los parámetros asociados para indicar al sistema qué hacer.

Para borrar un archivo, se teclearía un comando de borrado con el del archivo como parámetro.

5. Lenguaje natural. El usuario emite un comando en lenguaje natural.

Normalmente esto es un front-end para un lenguaje de comandos; el lenguaje natural se analiza y traduce a comandos del sistema.

Para borrar un archivo, se teclearía «borrar el archivo xxx».


Ventajas y desventajas de los

estilos de interacción

Cada uno de estos estilos de interacción tiene ventajas y desventajas.

La Figura anterior muestra las principales ventajas y desventajas de estos estilos y sugiere los tipos de aplicación donde podrían utilizarse.

Por supuesto, estos estilos de interacción se pueden mezclar, utilizando varios estilos en la misma aplicación.


Por ejemplo, Microsoft Windows permite la manipulación directa de los iconos que representan a archivos y carpetas, la selección de comandos basados en menúes, y para comandos, como los de configuración, los usuarios deben rellenar un formulario de propósito específico que se les muestra.


Las interfaces de usuario basadas en web se fundan en HTML o XHTML (el lenguaje de descripción de páginas utilizado por las páginas web) junto con lenguajes como Java, que pueden asociar programas con los componentes de una página.

Como normalmente estas interfaces basadas en web son diseñadas por usuarios casuales, muchas usan interfaces basadas en formularios.

Se pueden construir interfaces de manipulación directa en web, pero es una tarea compleja de programación.


Además, por los diferentes niveles de experiencia de los usuarios de la web y como provienen de culturas diferentes, es difícil establecer una interfaz de usuario para interacción directa que sea universalmente aceptada.

En interfaces basadas en formularios, el usuario proporciona toda la información requerida y después inicia la acción pulsando un botón.

Los campos de los formularios pueden ser menúes, campos de entrada libre de texto o botones.


Todos los sistemas interactivos tienen que proporcionar alguna forma de presentar la información a los usuarios.

La presentación de la información puede ser simplemente una representación directa de la información de entrada (por ejemplo, texto en un procesador de textos) o presentar la información gráficamente.

Una buena pauta de diseño es mantener separado el software requerido para la presentación de la información misma.

Presentación de la información

Separar el sistema de presentación de los datos nos permite cambiar la representación en la pantalla del usuario sin tener que cambiar el sistema de cálculo subyacente.


Para encontrar la mejor presentación de la información, debemos conocer a los usuarios de la información y saber cómo utilizarán el sistema.

Cuando se decide cómo presentar la información, deben tenerse presentes las siguientes cuestiones:

1. ¿El usuario está interesado en información precisa o en las relaciones entre los valores de los datos?.

2. ¿Con qué frecuencia cambian los valores de la información? ¿Se indicarán de forma inmediata al usuario los cambios en un valor?.


3. ¿El usuario debe llevar a cabo alguna acción en respuesta a los cambios de la información?.4. ¿El usuario necesita interactuar con la información visualizada con una interfaz de manipulación directa?5. ¿La información que se va a visualizar es textual o numérica?. ¿Son importantes los valores relativos de los elementos de la información?.


No se debe suponer que por utilizar gráficos se hacen las vistas más interesantes.

Los gráficos ocupan un valioso espacio en la pantalla (cuestión importante en los dispositivos móviles) y pueden tardar bastante tiempo en descargarse si el usuario está trabajando con una conexión lenta.

Dependiendo de la aplicación, la información que no cambia durante una sesión se puede presentar tanto gráfica como textualmente.

La presentación textual ocupa menos espacio en la pantalla, pero no se puede leer de un vistazo.


Debe distinguirse la información que no cambia de la información dinámica, utilizando diferentes estilos de presentación.

Por ejemplo, podría presentarse toda la información estática con un tipo de letra o color particular, o podría asociarse con un icono de «información estática».


Debemos utilizar texto para presentar información precisa y que cambie de forma relativamente lenta.

Si los datos cambian rápidamente o si las relaciones entre los datos más que los valores exactos de los datos son importantes, se debe presentar la información gráficamente.

Por ejemplo, considere un sistema que registra y resume las cifras de venta mensuales de una compañía.

La Figura siguiente ilustra cómo presentar la misma información como texto o gráfico.



Normalmente, los gerentes que estudian las cifras de ventas están más interesados en las tendencias o anomalías que en los valores exactos.

La presentación gráfica de esta información, como un histograma, hace que las cifras anómalas en marzo y en mayo destaquen sobre las otras.

La figura también ilustra cómo la presentación textual ocupa menos espacio que la presentación gráfica de la misma información.


En las salas de control o los tableros de mandos de un auto, la información que se muestra representa el estado de algún otro sistema (por ejemplo, la altitud de un avión) y está cambiando continuamente.

Las vistas digitales que cambian constantemente pueden ser confusas y molestas ya que los lectores no pueden leer y asimilar la información antes de que cambie.

Por lo tanto, la información numérica que varía dinámicamente se representa mejor de forma gráfica utilizando una representación analógica.


Si es necesario, las vistas gráficas pueden complementarse con una vista digital precisa.

En la Figura siguiente se muestran diferentes formas de presentar información numérica dinámica.


Esfera con agujas – Gráfico de tortas – Termómetro – Barra Horizontal


Las vistas analógicas continuas dan al usuario una sensación de valor relativo.

En la Figura siguiente, los valores de la temperatura y la presión son aproximadamente los mismos.

Sin embargo, la vista gráfica muestra que la temperatura está cerca de su valor máximo mientras que la presión no alcanza el 25% de su máximo.

Con un valor digital solamente, el usuario necesita conocer los valores máximos y calcular mentalmente el estado relativo de la lectura.


En situaciones de estrés, pensar adicionalmente puede conducir a errores humanos que generan problemas, por lo que las vistas pueden mostrar lecturas anormales.


Cuando se tienen que presentar grandes cantidades de información, se pueden utilizar visualizaciones abstractas que vinculen los elementos de los datos relacionados.

Esto puede revelar relaciones que no son obvias en los datos sin formato.

He aquí algunos ejemplos de visualizaciones de datos:1. La información meteorológica, recogida de varias

fuentes, se muestra como un mapa meteorológico con isobaras, frentes meteorológicos, etcétera.


2. El estado de una red telefónica se muestra gráficamente como un conjunto vinculado de nodos en un centro de administración de la red.3. El estado de una planta química se visualiza mostrando las presiones y temperaturas en un conjunto vinculado de depósitos y tuberías.4. Un modelo de una molécula se muestra y manipula en tres dimensiones utilizando un sistema de realidad virtual.5. Un conjunto de páginas web se muestra como un árbol.


Además del estilo de presentación de la información, se debe pensar en los colores utilizados en la interfaz.

El color puede mejorar las interfaces de usuario, ayudando a comprender y manejar la complejidad.

Sin embargo, es fácil utilizar el color de forma errónea para crear interfaces visualmente poco atractivas y propensas a errores.

Las principales claves para la utilización efectiva del color en las interfaces de usuario son:


Uso de los Colores

1. Limitar el número de colores utilizados y ser conservador en la forma de utilizarlos.No deben utilizarse más de cuatro o cinco colores diferentes en una ventana y no más de siete en una interfaz del sistema. Si se utilizan demasiados, o si son demasiado vivos, la vista puede ser confusa. Algunos usuarios pueden considerar que las grandes cantidades de colores son molestas y visualmente cansadas. También es posible la confusión en el usuario si los colores no se utilizan de manera uniforme.


Uso de los Colores

2. Utilizar un cambio de color para mostrar un cambio en el estado del sistema. Si una vista cambia de color, debe significar que ha ocurrido un evento importante. Así, en un indicador del nivel de combustible, se podría utilizar un cambio de color para indicar una bajada. Resaltar el color es muy importante en las vistas complejas donde se muestran cientos de entidades distintas.


Uso de los Colores

3. Utilizar el código de colores para apoyar la tarea que los usuarios están tratando de llevar a cabo. Si los usuarios tienen que identificar instancias anómalas, se deben resaltar estas instancias; si también tienen que descubrir similitudes, se deben resaltar éstas utilizando un color diferente.


Uso de los Colores

4. Utilizar el código de colores de una forma consciente y uniforme. Si una parte de un sistema muestra los mensajes de error en rojo (por ejemplo), todas las demás partes deben mostrarlos de igual forma. El rojo no se debe utilizar para nada más. Si se hace, es posible que el usuario interprete la vista en rojo como un mensaje de error.


Uso de los Colores

5. Ser cuidadoso al utilizar pares de colores. Debido a la fisiología del ojo, las personas no pueden enfocar el rojo y el azul simultáneamente. La vista cansada es una consecuencia probable de una vista en rojo sobre azul. Otras combinaciones de colores pueden ser también visualmente molestas o difíciles de leer.


Uso de los Colores

En general, se debe utilizar el color para la acción de resaltar, pero no se debe asociar significados con colores particulares.

Aproximadamente el 10% de los hombres son daltónicos y pueden malinterpretar el significado.

Las percepciones humanas del color son diferentes, y existen convenciones distintas en diferentes profesiones acerca del significado de colores particulares.


Uso de los Colores

Los usuarios con conocimientos diferentes inconscientemente pueden interpretar el mismo color de formas distintas.

Por ejemplo, para un conductor, el rojo significa peligro.

Sin embargo, para un químico, el rojo significa caliente.


Uso de los Colores

Además de presentar la información de la aplicación, los sistemas también se comunican con los usuarios a través de mensajes que proporcionan información sobre los errores y el estado del sistema.

La primera experiencia de un usuario de un sistema software puede ser cuando el sistema presenta un mensaje de error.

Los usuarios inexpertos pueden empezar su trabajo, cometer un error inicial y de forma inmediata tienen que comprender el mensaje de error resultante.

En la Figura siguiente se muestran los factores a tener en cuenta al diseñar mensajes del sistema.


Mensajes de Error


Mensajes de Error

Se debe prever la formación y experiencia de los usuarios cuando se diseñan mensajes de error.

Por ejemplo, suponga que un usuario del sistema es una enfermera en una sala de cuidados intensivos de un hospital.

La observación del paciente se lleva a cabo mediante un sistema informático.

Para ver el estado actual del paciente (ritmo cardíaco, temperatura, etcétera), la enfermera selecciona «mostrar» de un menú e introduce el nombre del paciente en un recuadro.


Mensajes de Error

Un recuadro de entrada de texto utilizado por una enfermera.


Mensajes de Error

En este caso, vamos a suponer que la enfermera ha escrito incorrectamente el nombre del paciente y ha tecleado «MacDonald» en lugar de «McDonald».

El sistema genera un mensaje de error. Los mensajes de error siempre deben ser formales, concisos,

uniformes y constructivos. No deben ser ofensivos ni tener sonidos asociados u otro tipo de

ruidos que pueden desconcertar al usuario. En la medida de lo posible, el mensaje debe sugerir cómo se podría

corregir el error. El mensaje de error debe vincularse a un sistema de ayuda en línea

sensible al contexto.


Mensajes de Error


Mensajes de Error

La Figura anterior muestra ejemplos de mensajes de error bien y mal diseñados.

El mensaje de la izquierda está mal diseñado. Es negativo (acusa al usuario de haber cometido un

error), no se adapta a las habilidades y al nivel de experiencia del usuario, y no tiene en cuenta la información del contexto.

No sugiere cómo se podría rectificar la situación. Utiliza términos técnicos del sistema (identificador de

paciente) en vez de un lenguaje orientado al usuario.


Mensajes de Error

El mensaje de la derecha es mejor. Es positivo, lo que da a entender que el

problema es del sistema y no del usuario. Identifica el problema en términos

entendibles para la enfermera y ofrece una forma fácil para corregir el error pulsando un simple botón.

El sistema de ayuda está disponible si se necesita.


Mensajes de Error

Documents

Diseño de interfaces