Tarea: Diseñar la interfaz de usuario
En esta tarea se explica cómo llevar a cabo el diseño de la GUI haciendo énfasis en la utilización.
Objetivo
  • Producir un diseño de la interfaz de usuario que dé soporte al razonamiento y la mejora de la utilización.
Relaciones
Descripción principal

Cuando diseñe la interfaz de usuario, tenga en cuenta los Guiones gráficos creados durante la adquisición de requisitos, las directrices de la interfaz de usuario en las directrices específicas del proyecto, así como los Prototipos de interfaz de usuario existentes. Si descubre que es necesario perfeccionar los guiones gráficos como resultado de esta tarea, estas actualizaciones las realiza el Analista de sistemas (consulte Tarea: Obtener solicitudes del interesado).

Pasos
Describir las características de los usuarios relacionados

Describa las características de los usuarios (humanos) que interactuarán con el sistema para ejecutar los requisitos considerados en la iteración actual. Céntrese en la descripción de los principales usuarios, ya que la mayor parte de las interacciones implican a estos usuarios. Esta información es importante para los siguientes pasos.

Colabore con el analista de sistemas para determinar si se necesitan cambios en la descripción del Actor para reflejar las descripciones de las características. Consulte Directriz de producto de trabajo: Actor, Características para obtener más información.

Identificar los principales elementos de la interfaz de usuario

Observando los requisitos considerados en la iteración actual (especialmente los  Casos de uso y/o los Guiones gráficos), identifique las ventanas principales de la interfaz de usuario del sistema. Por "principales" se entienden aquellas ventanas con las que el usuario interactuará más (los elementos de la interfaz de usuario que son centrales para el modelo mental del sistema que tiene el usuario). Las ventanas principales contienen menús y pueden contener subventanas o formularios. Las ventanas principales son las ventanas entre las que navega el usuario. Las ventanas no principales pueden finalizar como parte de una ventana principal.

La ventana principal primaria será la ventana que se abre cuando el usuario ejecuta la aplicación. Normalmente permanece abierta el tiempo que se ejecuta la aplicación y es el lugar donde el usuario invierte una gran parte de su "tiempo de uso". Como siempre está abierta y constituye el primer contacto del usuario con el sistema, es el primer vehículo para reforzar el modelo mental del sistema que tiene el usuario. La ventana principal primaria se conoce normalmente como "página de bienvenida".

Intente agrupar los elementos de la interfaz de usuario en la misma ventana principal si deben aparecer juntos o en una relación espacial con otros elementos de la interfaz de usuario. No obstante, esto no es siempre posible debido a limitaciones en el área de pantalla. Tenga en cuenta que el volumen de objetos medio es una entrada importante en este paso, ya que indica cuántos objetos se deberán mostrar a la vez. Si son demasiados objetos, todos no podrán aparecer en la misma ventana; en su lugar, una ventana principal puede contener una representación compacta de los objetos y, a continuación, se pueden definir ventanas principales independientes para cada uno de los objetos (o un conjunto de objetos).

A continuación, se proporcionan algunas recomendaciones de ventanas principales:

  • las ventanas que son centrales en el modelo mental del sistema que tiene el usuario
  • las ventanas en las que el usuario invertirá la mayor parte de su tiempo de uso
  • las ventanas que proporcionan la iniciación de los casos de uso

Recuerde que el objetivo es minimizar el número de ventanas principales y el número de vías de navegación entre ellas.

Definir el mapa de navegación

A partir del conjunto identificado de ventanas principales y los Guiones gráficos, defina el Mapa de navegación del sistema.

El mapa de navegación debe incluir los principales elementos de la interfaz de usuario y sus vías de navegación. No es necesario que contenga todas las vías posibles entre los elementos de la interfaz de usuario, sólo las principales. El objetivo es que el mapa de navegación sirva como mapa de la interfaz de usuario del sistema.

Un candidato más obvio para el elemento "superior" de la interfaz de usuario en el mapa de navegación es la ventana principal primaria (donde el usuario pasa la mayor parte de su tiempo de uso).

El mapa de navegación debe exponer claramente "cuántas pulsaciones" debe realizar un usuario para llegar a una pantalla específica o a una determinada parte de la funcionalidad. Generalmente, debe tener las áreas más importantes de la aplicación a "una pulsación de distancia" de la ventana principal. Además de añadir un gasto general innecesario de interacciones, las vías de navegación de ventanas que son demasiado largas aumentan la probabilidad de que el usuario "se pierda" en el sistema. Idealmente, todas las ventanas se deberían poder abrir desde una ventana principal primaria, lo que da como resultado una longitud máxima de navegación de ventanas de dos. Intente evitar las longitudes de navegación de ventanas de más de tres.

El mapa de navegación debe cumplir y reflejar la metáfora de uso de la interfaz de usuario del sistema, tal como se documenta en las directrices específicas del proyecto.

Se puede utilizar una gran variedad de representaciones para el mapa de navegación. Algunos ejemplos:

  • un diagrama en "árbol" jerárquico, donde cada nivel del diagrama muestra el número de pulsaciones que hay que efectuar para llegar a un elemento específico de la interfaz de usuario
  • gráficos de formato libre con iconos de clientes
  • diagrama de clase UML donde las clases se utilizan para los elementos de la interfaz de usuario y las asociaciones se utilizan para las vías de navegación

La selección de qué representación desea utilizar se especifica en las directrices concretas del proyecto.

Detallar el diseño de los elementos de la interfaz de usuario

En este punto, el diseño de la interfaz de usuario de alto nivel está completo:

  • Se han identificado las ventanas principales.
  • Se han definido los elementos de la interfaz de usuario y sus vías de navegación (el Mapa de navegación).

Ahora se puede ejecutar el diseño detallado de los elementos de la interfaz de usuario. Estos son los distintos aspectos del diseño de los elementos de la interfaz de usuario. A continuación, se describe cada uno de ellos:

Diseñar la visualización de las ventanas principales

La visualización de las ventanas principales, y de la ventana principal primaria en concreto, tendrá un impacto significativo en la utilización del sistema. Diseñar esta visualización consiste en determinar qué partes (propiedades) de los elementos contenidos de la interfaz de usuario se deben visualizar. Los flujos de sucesos de guión gráfico se pueden utilizar para priorizar qué propiedades se deben mostrar. Si el usuario tiene que ver distintas propiedades de los elementos de la interfaz de usuario, puede implementar varias vistas de una ventana principal, cada una mostrando un conjunto distinto de propiedades. El diseño de esta visualización también significa que tiene que observar cómo se deben visualizar las propiedades de los elementos contenidos de la interfaz de usuario utilizando las tres dimensiones visuales. Para obtener más información, consulte el apartado "Dimensiones visuales" en Directriz: Interfaz de usuario (General).

Siempre que sea posible, intente identificar "denominadores comunes" en los elementos que se van a mostrar en las ventanas principales. Si visualiza denominadores comunes en alguna dimensión, el usuario puede relacionar los elementos entre ellos y empezar a ver patrones. Esto aumenta enormemente el "ancho de banda" de la interfaz de usuario.

Ejemplo:

Supongamos que tiene un sistema de atención al cliente y desea mostrar aspectos como:

  • las reclamaciones y las preguntas de los clientes con el tiempo
  • qué productos ha adquirido el cliente con el tiempo
  • cuánto ha facturado el cliente con el tiempo

Aquí, el denominador común es el "tiempo". De esta forma, si se muestran las reclamaciones/preguntas, las compras y las facturas una al lado de otra en el mismo eje horizontal de tiempo, el usuario podrá ver patrones de cómo están relacionadas, si lo están.

Diseñar las acciones de usuario de las ventanas principales

Aquí es donde se decide cómo "implementar" las acciones de usuario que se pueden invocar para las ventanas principales. Lo normal es que las acciones de usuario de las ventanas principales se proporcionen como elementos de menú en una barra de menús, y que se proporcionen como alternativa y complemento a través de menús emergentes y barras de herramientas.

Para cada ventana principal, defina los menús y las opciones de menú. Por ejemplo, en un editor de documentos, hay un menú Editar que agrupa operaciones de cohesión como Cortar, Copiar etc.

Algunas acciones de usuario pueden requerir una interacción compleja con el usuario, lo que justifica una ventana secundaria propia. Por ejemplo, en un editor de documentos, hay una operación Imprimir en un documento que, debido a su compleja interacción, justifica una ventana de diálogo aparte.

Si se va a visualizar en una ventana un gran número de objetos, será necesario diseñar acciones de usuario que impliquen a dichos objetos. A continuación, se incluyen algunos ejemplos de estas acciones de usuario:

  • buscar entre múltiples objetos
  • ordenar múltiples objetos
  • examinar jerarquías de múltiples objetos
  • seleccionar múltiples objetos

Consulte Directriz: Interfaz de usuario (General) para obtener más información.

Diseñar una miscelánea de características

Añada el comportamiento dinámico necesario a la interfaz de usuario. Las principales dinámicas las proporciona la plataforma de destino como, por ejemplo, el paradigma de seleccionar-utilizar, abrir mediante doble pulsación, los menús emergentes en el botón derecho del ratón, etc. No obstante, deberá tomar algunas decisiones, por ejemplo:

  • cómo dar soporte a la gestión de ventanas
  • qué información de sesión (por ejemplo, la posición del cursor de entrada, la posición de la barra de desplazamiento, las ventanas abiertas, los tamaños de ventana, las posiciones de las ventanas relativas, etc.) se debe almacenar entre sesiones
  • si desea dar soporte a una única interfaz de documentos o a múltiples interfaces de documentos (SDI o MDI) para las ventanas principales

Asimismo, evalúe otras características comunes que pueden mejorar la utilización, por ejemplo:

  • si se debe proporcionar "ayuda en línea", incluidos los "asistentes"
  • la conveniencia de una operación "deshacer", para que la exploración del sistema sea segura
  • si se deben proporcionar "agentes" para supervisar los sucesos de usuario y sugerir acciones de forma activa
  • si se debe proporcionar el "resaltado dinámico" para visualizar las asociaciones
  • si se debe dar soporte a "macros" definidas por el usuario
  • si existen áreas específicas que deben ser configurables por el usuario

Consulte Directriz: Interfaz de usuario (General) para obtener más información.

Propiedades
Varias apariciones
Condicionado por sucesos
Continuo
Opcional
Planeado
Se puede repetir
Más información