Modelado_de_requerimientos_de_la_IU_con_storyboard_v1_03

Vista previa del material en texto

Modelado de requerimientos de la interfaz de usuario con storyboard - Diseño de Sistemas 
Autor: E. Porta - L. Ripani Versión : 1.03 [13/07/10]
Cátedra Diseño de Sistemas UTN – F.R.Ro.
 
 
 1/7 13/07/2010 17:07:00 
Modelado de requerimientos de la interfaz de usuario con storyboard 
Diseño de Sistemas 
 
 
 
 
1. Índice 
1. Índice .................................................................................................................................. 1 
2. Introducción ........................................................................................................................ 2 
2.1. Propósito del documento ................................................................................................ 2 
2.2. Alcance del documento................................................................................................... 2 
2.3. Definiciones, abreviaturas y acrónimos .......................................................................... 2 
2.4. Documentos Relacionados ............................................................................................. 2 
2.5. Visión general del documento ........................................................................................ 3 
3. Tarea: Modelado de requerimientos de la interfaz de usuario con storyboard.................. 3 
3.1. Entradas.......................................................................................................................... 3 
3.2. Salidas ............................................................................................................................ 3 
3.3. Descripción de la tarea ................................................................................................... 3 
4. Ejemplo - Inscripción a un examen .................................................................................... 4 
4.1. Caso de uso: Inscripción a Examen ............................................................................... 4 
4.1.1. Bocetos de interfaz de usuario ................................................................................ 5 
4.1.2. Mapa de navegación ............................................................................................... 6 
5. Historia de Versiones del documento................................................................................. 6 
Anexo I - Plantilla Visio Interfaz de Usuario ................................................................................. 7 
 
 
Modelado de requerimientos de la interfaz de usuario con storyboard - Diseño de Sistemas 
Autor: E. Porta - L. Ripani Versión : 1.03 [13/07/10]
Cátedra Diseño de Sistemas UTN – F.R.Ro.
 
 
 2/7 13/07/2010 17:07:00 
2. Introducción 
2.1. Propósito del documento 
El objetivo de este documento es definir los conceptos claves de la tarea modelado de 
los requerimientos de la interfaz de usuario con storyboard partiendo de los casos de uso y 
contemplando la usabilidad. Cabe aclarar que no se pretende diseñar, ni prototipar la interfaz 
de usuario, sino que definir sus requisitos y comprender el flujo y las interacciones globales. 
 
2.2. Alcance del documento 
Las consignas de este documento aplican a todos los alumnos de la asignatura Diseño 
de Sistemas de la carrera de Ingeniería en Sistemas de Información dictada en la Universidad 
Tecnológica Nacional - Facultad Regional Rosario. 
 
2.3. Definiciones, abreviaturas y acrónimos 
 
Usabilidad : Usabilidad se define en el estándar ISO 9241 como “el grado en el que un 
producto puede ser utilizado por usuarios específicos para conseguir objetivos específicos con 
efectividad, eficiencia y satisfacción en un determinado contexto de uso” 
 
Regla de Negocio : Una regla de negocio es una declaración de una política o una 
condición que debe cumplirse. 
 
Caso de uso : Un caso de uso especifica una secuencia de acciones, incluyendo 
variantes, que el sistema puede ejecutar y que produce un resultado observable de valor para 
un actor en particular. 
 
Especificaciones complementarias : Las especificaciones complementarias son 
especificaciones no funcionales que incluyen atributos de calidad, restricciones, glosario y 
diccionario de datos. Complementan a los casos de uso. 
 
Storyboard : Un storyboard es una descripción lógica y conceptual de la funcionalidad 
del sistema. Utilizaremos storyboard estáticos mediante bocetos de interfaz de usuario y mapas 
de navegación. Solo se realizan bocetos de las ventanas mas significativas. 
 
Bocetos de interfaz de usuario (User interface sketches): Un boceto (o bosquejo) de 
interfaz de usuario es una maqueta (o modelo a escala) de la interfaz gráfica de usuario. 
 
Mapa de navegación : El mapa de navegación incluye 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. 
 
 
 
2.4. Documentos Relacionados 
 
Documento Nombre / Ubicación del archivo Fuente 
DR1 – Pautas para 
escribir Casos de 
Uso con 
Usabilidad 
Nombre: Pautas_para_escribir_CU_con_Usabilidad 
 
 
Ubicación: http://es.groups.yahoo.com/group/ds_utn_rosario/files 
 
DR2 – Elección de 
un control 
Nombre: Traduccion_Eleccion_de_un_Control_Tidwell 
 
 
Ubicación: http://es.groups.yahoo.com/group/ds_utn_rosario/files 
 
 
Modelado de requerimientos de la interfaz de usuario con storyboard - Diseño de Sistemas 
Autor: E. Porta - L. Ripani Versión : 1.03 [13/07/10]
Cátedra Diseño de Sistemas UTN – F.R.Ro.
 
 
 3/7 13/07/2010 17:07:00 
Documento Nombre / Ubicación del archivo Fuente 
DR3 – Estándares 
para nombre de 
botones de acción 
Nombre: Estandares_para_nombres_botones_de_accion 
 
 
Ubicación: http://es.groups.yahoo.com/group/ds_utn_rosario/files 
 
DR4 – Guías de 
Interfaz de 
Usuario en RUP 
Nombre: Guias_de_Interfaz_de_Usuario_en_RUP 
 
 
Ubicación: http://es.groups.yahoo.com/group/ds_utn_rosario/files 
 
DR5 – Patrones 
Conceptuales en 
el Diseño de la 
Interacción 
Hombre Maquina 
Nombre: Patrones-Conceptuales_en_DIHM 
 
 
Ubicación: http://es.groups.yahoo.com/group/ds_utn_rosario/files 
 
 
2.5. Visión general del documento 
 
En la sección 3 se especifica la tarea "Modelado de requerimientos de la interfaz de 
usuario con storyboard", la cual ha sido creada por la cátedra para incorporarla al proceso de 
desarrollo de la cátedra. Si bien esta tarea está basada en conceptos relacionados con RUP, 
no pertenece formalmente a dicho proceso. Hemos creado esta tarea, porque consideramos 
que es una evolución necesaria de lo previsto en RUP, como para efectuar una determinación 
de los requisitos de usabilidad de manera más acertada. 
 
En la sección 4, se desarrolla un ejemplo de la ejecución de esta tarea sobre un caso. 
 
 
3. Tarea: Modelado de requerimientos de la interfaz de 
usuario con storyboard 
En esta tarea se explica cómo llevar a cabo el proceso de modelado de la interfaz de 
usuario con storyboard haciendo énfasis en la usabilidad. 
3.1. Entradas 
Casos de uso (con usabilidad contemplada) 
Reglas de negocio 
 Especificaciones complementarias 
3.2. Salidas 
 Storyboard (Bocetos de interfaz de usuario + Mapa de navegación) 
 
3.3. Descripción de la tareaA partir de un caso de uso (con usabilidad contemplada), reglas de negocio y 
especificaciones complementarias, y teniendo en cuenta los documentos relacionados 
mencionados en el punto 2.4, vamos construyendo el storyboard utilizando bocetos de interfaz 
y un diagrama de navegación. 
 
 Para construir los bocetos utilizaremos la plantilla Interfaz de Usuario de “Microsoft 
Office Visio” que se menciona en el anexo I. 
 
 
 
Modelado de requerimientos de la interfaz de usuario con storyboard - Diseño de Sistemas 
Autor: E. Porta - L. Ripani Versión : 1.03 [13/07/10]
Cátedra Diseño de Sistemas UTN – F.R.Ro.
 
 
 4/7 13/07/2010 17:07:00 
 
4. Ejemplo - Inscripción a un examen 
4.1. Caso de uso: Inscripción a Examen 
 
Nivel de la meta: Usuario Alcance del Caso de Uso: Sistema 
Caja: Negra Instanciación: Real Interacción: Dialogal Usabilidad: Contemplada 
ACTORES Primario: Alumno Iniciador: Alumno 
 
PRECONDICIONES: (de sistema): El alumno esta logueado. 
 
DISPARADOR: El alumno eligió en el menú la opción inscripción a examen 
 
POSTCONDICIONES: (de sistema) 
Éxito: La inscripción al examen quedó registrada. 
Fracaso: La inscripción al examen no quedó registrada. 
 
Paso Usuario Sistema Alternativas 
1.a No hay materias en las que el alumno esté en co ndiciones 
de rendir: 
El Sistema muestra mensaje. Termina el caso de uso. 
1 El Alumno selecciona la 
opción inscripción a 
examen 
El sistema muestra la 
denominación de las materias y la 
fecha de examen del próximo 
llamado habilitado, y que de 
acuerdo a las reglas de negocio, el 
alumno esta en condiciones de 
rendir. 
1.b No esta habilitada la inscripción a examen: 
El Sistema muestra mensaje. Termina el caso de uso. 
2 El Alumno selecciona las 
materias, y selecciona la 
opción “Guardar” 
El sistema registra la inscripción y 
emite las constancias de 
inscripción a examen de las 
materias seleccionadas. 
2.a Se desea cancelar la inscripción: 
El Alumno selecciona la opción “Cerrar” 
El Sistema muestra mensaje “Inscripción cancelada”, y termina el 
caso de uso 
 
 
Modelado de requerimientos de la interfaz de usuario con storyboard - Diseño de Sistemas 
Autor: E. Porta - L. Ripani Versión : 1.03 [13/07/10]
Cátedra Diseño de Sistemas UTN – F.R.Ro.
 
 
 5/7 13/07/2010 17:07:00 
4.1.1. Bocetos de interfaz de usuario 
 
 
Ventana “Inscripción a examen” 
 
 
 
Formato de “Constancia de inscripción” 
 
 Constancia de inscripción 
Fecha: ____/____/____ Hora: _____ 
 
DATOS DEL ALUMNO 
 
Nº de Legajo:________ Apellido y Nombre:________________________________ 
Carrera:_________________________________ Plan de estudios: ______ 
 
DATOS DE LAS MATERIAS 
Código Materia Fecha examen 
 
 
 
 
 
 
 
 
 
Nota: Solo dibujamos los bocetos de interfaz de los informes o formularios y de las ventanas 
principales. No se dibujan los bocetos de interfaz de las ventanas de mensajes de error o de 
mensajes de confirmación.
 
Modelado de requerimientos de la interfaz de usuario con storyboard - Diseño de Sistemas 
Autor: E. Porta - L. Ripani Versión : 1.03 [13/07/10]
Cátedra Diseño de Sistemas UTN – F.R.Ro.
 
 
 6/7 13/07/2010 17:07:00 
 
4.1.2. Mapa de navegación 
 
 
Inscripción 
a examen
[Seleccionó opción "Cerrar"]/Cerrar 
ventana y volver al menú
[Seleccionó en menú la opción 
"Inscripción a Examen"]/Mostrar 
ventana Inscripción a examen
[Seleccionó opción 
"Guardar"]/Registra, imprime 
"Constancia de Inscripción" y vuelve 
al menu 
 
 
Nota: En el mapa de navegación solo incluimos las ventanas principales. No se incluyen las 
ventanas de mensajes de error o de mensajes de confirmación. 
 
 
 
 
 
5. Historia de Versiones del documento 
 
Versión Fecha Autor Descripción 
1.01 12/08/09 EP-LR Versión inicial 
1.02 06/06/10 EP Revisión del CU. Revisión de los bocetos y del mapa de navegación. 
1.03 13/07/10 EP Se agregaron notas. Se realizaron varias modificaciones menores. 
 
Modelado de requerimientos de la interfaz de usuario con storyboard - Diseño de Sistemas 
Autor: E. Porta - L. Ripani Versión : 1.03 [13/07/10]
Cátedra Diseño de Sistemas UTN – F.R.Ro.
 
 
 7/7 13/07/2010 17:07:00 
Anexo I - Plantilla Visio Interfaz de Usuario 
La plantilla Interfaz de usuario esta dentro de la categoría Software