METODO PARA EL DISEÑO DE INTERFAZ GRÁFICA DE USUARIO CON UML PARA WEBAPPS

Vista previa del material en texto

Guía práctica.
18 de Diciembre de 2019
Ing. Especialista.
Víctor H. López Reyes.
METODO PARA EL DISEÑO DE LA INTERFAZ GRÁFICA DE USUARIO CON UML PARA HERRAMIENTAS WEB. 
GUÍA PRÁCTICA.
PRIMERA VERSIÓN.
ELABORADO POR: ING. ESP. VÍCTOR HUGO LÓPEZ REYES.
MARACAY; 18 DE DICIEMBRE DE 2019.
INTRODUCCIÓN.
La presente guía está dirigida a profesores y estudiantes de los semestres superiores de pregrado de la carrera de Ingeniería de Sistemas y de Software, con la finalidad de enseñar como diseñar software o productos tecnológicos de calidad utilizando las técnicas orientadas a objetos y el lenguaje de modelado unificado (UML).
Esta guía describe de manera resumida el diseño de la interfaz gráfica de usuario para herramientas web, parte importante en el diseño de la webapp. Se incluyen los conceptos y los respectivos diagramas con ejemplos de mi experiencia profesional.
Una vez terminado el estudio de la presente guía, el estudiante tendrá las competencias para efectuar el diseño de la interfaz gráfica de usuario para herramientas web.
La información y algunos de los diagramas UML que aparecen en la presente guía han sido extraídos del capítulo once (11) del libro de: Roger S. Pressman. Ingeniería de software. Enfoque práctico. Séptima edición. 
Toda interfaz de usuario para una webapp debe tener la misma característica de usabilidad de cualquiera aplicación de software tradicional.
Una interfaz webapp debe responder tres preguntas principales del usuario final:
¿Dónde estoy? La interfaz debe indicar en que webapp está el usuario y en que parte se encuentra en la jerarquía del contenido.
Ejemplo:
¿Qué puedo hacer ahora? La interfaz debe informar al usuario de cuales funciones o componentes están disponibles para él, que vínculos están vivos, que contenido es relevante, entre otros.
Ejemplos:
EJEMPLO DE VÍNCULOS QUE NO ESTÁN VIVOS EN UNA WEBAPP:
En la presente webapp todavía existen vínculos que ya no están “vivos” porque ya no están disponibles para el usuario pero el objeto de contenido todavía permanece en la página:
 
¿Dónde he estado, hacia dónde voy? La interfaz debe facilitar la navegación. Para ello debe disponer de un “mapa” que exhiba donde ha estado el usuario y las direcciones que pueden tomarse para moverse a cualquier componente de la webapp.
Ejemplo:
Una interfaz de webapp debe dar respuesta a todas estas preguntas cuando el usuario final navegue por sus objetos de contenidos y funciones o componentes. 
1.- Principios y lineamientos del diseño de la interfaz.
La interfaz de usuario es la “primera impresión” que recibe el usuario, por eso la interfaz debe atrapar de inmediato al usuario principal, sin importar el valor de su contenido, ni la sofisticación de sus capacidades y servicios de procesamiento.
1.2.- Principios.
· Previsión.
· Comunicación.
· Consistencia.
· Autonomía controlada.
· Eficiencia.
· Flexibilidad.
· Centrarse.
· Ley de Fitt.
· Objetos de la interfaz humana.
· Reducción de la latencia.
· Aprendizaje.
· Metáforas.
· Mantener la integridad de los productos del trabajo.
· Legibilidad.
· Dar seguimiento al estado.
· Navegación visible.
1.2.1.- Previsión. La aplicación debe diseñarse de tal manera que podamos prever el siguiente paso del usuario.
1.2.2.- Comunicación. La interfaz debe comunicar el estado de cualquier actividad iniciada por el usuario.
Ejemplo:
En la imagen superior se despliega una barra de avance ubicada en el centro de la página que se mueve de izquierda a derecha, que indica que hay un procesamiento en marcha, como respuesta al requerimiento del usuario. 
1.2.3.- Consistencia. Debe ser consistente en la webapp el uso de controles de navegación, menús, iconos, y estética (color, forma, y distribución). Por último, toda característica debe responder de manera consistente con las expectativas del usuario.
Ejemplo:
1.2.4.- Autonomía controlada. Debe facilitar el movimiento del usuario a través de la webapp, respetando las convenciones que se hayan establecido para la aplicación.
1.2.5.- Eficiencia. Debe optimizar la eficiencia del trabajo del usuario. La productividad del usuario es la meta número uno, de entender la diferencia vital entre construir un sistema eficiente y dar poder a un usuario eficiente.
1.2.6.- flexibilidad. Debe tener flexibilidad suficiente para permitir que algunos usuarios realicen tareas directamente, mientras otros exploran la aplicación de manera aleatoria.
1.2.7.- Centrarse. La interfaz debe mantenerse centrada en las tareas en curso del usuario.
1.2.8.- Ley de Fitt. Si una secuencia de selecciones o entradas estandarizadas (con muchas opciones diferentes dentro de la secuencia) es definido por una transacción del usuario, la primera selección debe estar físicamente cerca de la siguiente selección. 
Ejemplo:
En el presente ejemplo podemos observar como el usuario después de elegir el componente tiene acceso inmediato a las TAREAS correspondientes en la webapp. 
1.2.9.- Objetos de la interfaz humana. Se ha desarrollado una basta biblioteca de objetos reutilizables de interfaces humanas para webapps. Úselas. 
EJEMPLO:
En el presente ejemplo podemos observar un objeto de contenido que exhibe objetos propios de personas. 
1.2.10.- Reducción de la 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 finalice la operación.
Ejemplo:
Para reducir la latencia, en la imagen superior se despliega una barra de avance ubicada en el centro de la página que se mueve de izquierda a derecha, que indica que hay un procesamiento en marcha. 
1.2.11.- Aprendizaje. 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.
1.2.12.- Metáforas. Una interfaz de usuario que usa una metáfora de información es más fácil de aprender y de usar, en la medida que la metáfora sea apropiada para la aplicación y el usuario. Una metáfora de información 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. 
1.2.13.- Mantener la integridad de los productos del trabajo. Un producto de trabajo (por ejemplo, un formato llenado por el usuario o una lista especificada por él) debe guardarse en forma automática, de modo que no se pierda si ocurriera un error.
EJEMPLO:
1.2.14.- Legibilidad. Toda la información presentada en la interfaz debe ser legible para jóvenes y adultos mayores.
1.2.15.- Dar seguimiento al estado. No se usa.
1.2.16.- Navegación visible. Una interfaz bien diseñada, su navegación le debe permitir al usuario recuperar objetos de contenido y seleccionar funciones que se despliegan y ejecutan a través de la interfaz.
Lo que no debe hacerse en una interfaz gráfica de usuario. 
· No obligue al usuario a leer grandes cantidades de texto, particularmente, cuando se explique la operación de la webapp o de ayuda para la navegación.
· Evite los avisos “en construcción”. Vinculo innecesario.
· No obligue al usuario a desplazar la pantalla. La información debe ubicarse dentro de las dimensiones de una ventana normal de navegación.
· Los menús de navegación deben ubicarse en todas las páginas a las que tenga acceso el usuario.
Ejemplo:
 
· La estética nunca debe obstaculizar la funcionalidad. Un botón es mejor opción que una imagen.
· El usuario no debe tener que buscar por toda la pantalla para determinar como entrar a otro contenido o servicio. Las opciones de navegación deben ser obvias, aun para el usuario casual.
Evaluación del diseño.
Una vez que se crea el prototipo operativo de la interfaz de usuario, debe evaluarse para determinar si satisface las necesidades del usuario. El ciclo de evaluación de la interfaz de usuario se estima en la figura siguiente:
Apéndice A: Lista de conceptos.
· Actor:no es una persona específica sino el rol que ésta desempeña (o un dispositivo) en un contexto específico. Un actor “llama” al sistema para que entregue uno de sus servicios”.
· Caso de uso: describe en lenguaje claro un escenario específico desde el punto de vista de un actor definido. Un caso de uso se estudia para efectos de intercambio de información. Es el elemento mas fundamental en la descripción de un modelo de requerimientos. Los casos de uso son una parte del modelado del análisis de importancia especial para las interfaces. Un actor en el contexto del diseño de la interfaz siempre es una persona que interactúa con el sistema. Cuando los casos de uso se utilizan como parte del análisis de la tarea, es con el objeto de mostrar la forma en la que un usuario final lleva a cabo alguna tarea específica relacionada con el trabajo. En la mayoría de las veces, el caso de uso se describe de manera informal en primera persona. De esa descripción informal pueden extraerse tareas, objetos, y el flujo general de la interacción.
· Clases: conjunto de objetos que tienen atributos similares y comportamientos comunes.
· Conocimiento sintáctico: se refiere a la mecánica de interacción que se requiere para usar con eficacia la interfaz. 
· Conocimiento semántico: se refiere al sentido subyacente de la aplicación, el entendimiento de las funciones que se realizan, el significado de la entrada y salida, metas y objetivos del sistema.
· Eventos: (disparador o trigger) ocurre siempre que el sistema y el actor intercambian información. Un evento no es la información que se intercambia sino el hecho que se intercambia información.
· Interfaz: es un conjunto de operaciones que describen alguna parte del comportamiento de una clase y dan acceso a ella. Es el equivalente de una clase abstracta que provee una conexión controlada entre clases de diseño.
· Interfaz de usuario: es un subsistema único dentro de la arquitectura general de la aplicación.
· Patrón de diseño: “es una mezcla con nombre propio de puntos de vista que contienen la esencia de una solución demostrada para un problema recurrente dentro de cierto contexto de necesidades en competencia”. Dicho de otra manera, un patrón de diseño describe una estructura de diseño que resuelve un problema particular del diseño en un contexto específico y entre “fuerzas” que afectan la manera en la que se aplica y en la que se utiliza dicho patrón. Es una abstracción que prescribe una solución de diseño para un problema de diseño bien delimitado.
· Usabilidad: medición cualitativa de la facilidad y eficiencia con la que un humano emplea las funciones y características que ofrece el producto de alta tecnología. Se evalúa tomando en cuenta factores humanos, la estética general, la consistencia y la documentación.
· Usuarios principiantes: sin conocimiento sintáctico del sistema y poco conocimiento semántico de la aplicación o uso de la computadora en general.
· Usuarios intermitentes que saben: Con conocimiento semántico razonable de la aplicación, pero relativamente poco recuerdo de la información sintáctica necesaria para usar la interfaz.
· Usuarios frecuentes conocedores: con buen conocimiento semántico y sintáctico, que con frecuencia les despierta el “síndrome del usuario poderoso”; es decir, actores que buscan atajos y modos de interacción abreviados. 
· 
· 
12
Método para el 
diseño
 
de
 
la
 
I
nterfaz 
G
ráfica de 
U
suarios 
 
con UML
 
para herramientas 
WEB
.
 
Guía práctica.
 
 
 
 
 
 
 
18
 
de 
Diciem
bre de 2019
 
Ing. Especialista.
 
Víctor H. López Reyes.