Nombre:

Matricula:

Grupo:

Materia: INGENIERÍA DE REQUERIMIENTOS DE USABILIDAD

Docente:

Actividad 3. La interfaz gráfica de usuario y el usuario Web

Ciudad de México, CDMX a 18 de agosto.

Objetivo:
Aplicar un proceso formal de diseño de pantallas a través del análisis de las
consideraciones tecnológicas y de diseño, para que la navegación y flujo entre pantallas
sea atractivo y sencillo para los usuarios.

Instrucciones:
Continuando con el tema de las actividades pasadas, elabora una propuesta que muestre
las diferentes pantallas que se utilizarán en el control de pacientes. La propuesta deberá
estar integrada por:

a) El propósito de la pantalla: describe la finalidad del diseño y hacia quién va dirigido.

b) Desarrollo de la propuesta:
- Describe mediante un bosquejo de pantalla el flujo de la información y de las
tareas de trabajo, así como las características tecnológicas de la pantalla.
- A través de un esquema de organización, presenta la organización de la
información y el contenido de cada pantalla.
- Organiza la trayectoria de las pantallas para marcar el flujo de navegación entre
estas.
- Especifica las características físicas de cada una de las pantallas e interfaces de
control utilizadas.
c) Sugerencias de aplicación: de acuerdo a las características de cada pantalla y la
trayectoria entre estas, describe algunas propuestas de aplicación para que el diseño sea
utilizado de manera eficaz.
d) Conclusiones: menciona las limitaciones a las que te enfrentaste, además relaciona tu
propuesta referenciando o relacionándola con los temas de la unidad. Nota: Las pantallas
puedes realizarlas con cualquier software que tengas disponible.

Guarda y envía tu archivo de la siguiente manera: apellidopaterno-nombre-act3.docx,

ejemplo: roldan-jose-act3.docx
 Finalidad del diseño y destinatario
Usabilidad y accesibilidad

La usabilidad es un anglicismo que significa "facilidad de uso", parece tener su origen en

la expresión "user friendly", que es reemplazada por sus connotaciones vagas y
subjetivas.

Tomaremos para este trabajo la definición más extendida, que es la ofrecida por la ISO,
que define usabilidad como el "grado de eficacia, eficiencia y satisfacción con la que
usuarios específicos pueden lograr objetivos específicos, en contextos de uso específicos”

La accesibilidad se refiere a la posibilidad de acceso. En concreto a que el diseño, como

prerrequisito imprescindible para ser usable, posibilite el acceso a todos sus potenciales
usuarios, sin excluir a aquellos con limitaciones individuales, discapacidades, dominio del
idioma, o limitaciones derivadas del contexto de acceso del software y hardware
empleado para acceder, ancho de banda de la conexión empleada, etc.

Mientras que un diseño usable requiere delimitar a su audiencia potencial con el fin de
diseñar para lo concreto, un diseño accesible implica la necesidad de diseñar para la
diversidad y heterogeneidad de necesidades de acceso presentadas por esta audiencia
específica. Cuando la audiencia para la que se diseña es muy amplia y presenta
necesidades de acceso muy diferentes, normalmente se hace necesaria la puesta a
disposición de varias versiones del diseño o un diseño adaptable, como son las conocidas
"versiones solo texto" o versiones en varios idiomas.

Los factores o atributos de calidad de una aplicación o sitio web que influirán en dicha
satisfacción podemos clasificarlos en aquellos relacionados con: la calidad y utilidad de
los contenidos; la calidad del servicio y asistencia del proveedor; y la calidad del diseño de
la aplicación, atributo de calidad sobre el que versa el presente trabajo.

La importancia del diseño de la aplicación se basa en que éste será el que modele la
interacción entre usuario y aplicación, y por tanto posibilitará o no la consecución de los
objetivos perseguidos por el usuario (encontrar información, comprar, comunicarse,
aprender...)

Descripción de usabilidad del Sistema

En el concepto tradicional de calidad de un sistema software, la usabilidad se presenta
como un atributo del software al que se presta especial atención en determinados
proyectos software, de forma similar a como se trata la seguridad, por ejemplo. Este
enfoque provoca que un gran número de sistemas software construidos tengan un nivel
de usabilidad deficiente, cuando un mayor cuidado por este tema hubiera producido un
sistema de mayor calidad percibida por el cliente sin un aumento excesivo en el coste de
desarrollo

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” [ISO98b], y en el estándar
ISO 14598-1 [ISO98a] se define calidad de uso de forma análoga. Como se puede
comprobar, en esta definición se liga la usabilidad de un sistema a usuarios, necesidades
y condiciones específicas.

En la actualidad, gracias a los avances de la Informática, el software se encuentra en

diferentes y diversos campos de la actividad humana, por lo que resulta sumamente
necesario que reúna ciertos criterios de calidad para satisfacer en gran medida las
necesidades de los usuarios

Al definir calidad del software se debe diferenciar entre la calidad del producto de software
y la calidad del proceso de desarrollo. No obstante, las metas que se establezcan para la
calidad del producto van a determinar las metas a establecer para la calidad del proceso
de desarrollo

Atributos de Usabilidad
Facilidad de Aprendizaje: Indica qué tan fácil es aprender la funcionalidad básica del
sistema, como para ser capaz de realizar correctamente las tareas que desea llevar a
cabo cualquier tipo de usuario

Eficiencia: La eficiencia se determina por el número de transacciones por unidad de

tiempo que el usuario puede realizar usando el sistema.

Manejo de Errores: Este atributo se refiere a la manera en que el sistema puede manejar
los errores cometidos por el usuario mientras está realizando una tarea.

Presentación visual apropiada: El concepto de sistema se materializa al realizar el diseño

de la parte visual de la interacción, es decir, la “interfaz gráfica de usuario”. Hay una serie
de normas provenientes del campo del diseño gráfico sobre cómo escoger los colores,
tipos de letra, la disposición de los elementos en una ventana, etc. Esta tarea suele
realizarla un diseñador gráfico profesional.

Satisfacción: Es el atributo más subjetivo. Muestra la impresión subjetiva que el usuario

obtiene del sistema. Para ello se utilizan cuestionarios, encuestas y entrevistas, diseñados
especialmente para recabar un cierto “grado de satisfacción” en función de aspectos
predefinidos.

El perfil de los usuarios de las aplicaciones informáticas ha cambiado mucho desde la

aparición de Internet; el abanico de posibilidades se amplía enormemente. La inmediatez
y globalización hacen que el perfil genérico del usuario de un sitio web sea diferente:
existe una gran diversidad de conocimientos, necesidades y formas de acceder a los
servicios.

Casos de uso basados en escenarios: Se han convertido en una característica

fundamental de la notación de Lenguaje de Modelado Unificado (UML), que se utiliza para
describir modelos de sistemas orientados a objetos. Los casos de uso permiten describir
la posible secuencia de interacciones entre el sistema y uno o más actores, en respuesta
a un estímulo inicial proveniente de un actor, es una descripción de un conjunto de
escenarios, cada uno de ellos comenzado con un evento inicial desde un actor hacia el
sistema. La mayoría de los requerimientos funcionales, sino todos, se pueden expresar
con casos de uso.

Prototipos: Durante la actividad de extracción de requerimientos, puede ocurrir que

algunos requerimientos no estén demasiado claros o que no se esté muy seguro de haber
entendido correctamente los requisitos obtenidos hasta el momento, todo lo cual puede
llevar a un desarrollo no eficaz del sistema final. Entonces, para validar los requisitos
hallados, se construyen prototipos. Los prototipos son simulaciones del posible producto,
que luego son utilizados por el usuario final, permitiéndonos conseguir una importante
retroalimentación en cuanto a si el sistema diseñado en base a los requerimientos
recolectados le permite al usuario realizar su trabajo de manera eficiente y efectiva.

Beneficios que aporta la usabilidad a un sitio web

Los beneficios que la usabilidad puede aportar a la implementación de sitios web

deben mirarse desde dos ópticas distintas:

Desde el punto de vista del desarrollador, implica una reducción de los costes de
producción, mantenimiento y soporte (desarrollo), disminución de los costes de uso.

Los sistemas fáciles de usar permiten una mayor productividad y una reducción del
esfuerzo, mientras que los sistemas difíciles de usar disminuyen la salud, bienestar y
motivación y pueden incrementar el absentismo.

También produce menores costes de desarrollo al establecerse pautas generalizadas de

diseño, reutilizables en diferentes aplicaciones departamentales (uso interno) e
incremento de ventas, un producto más usable permite un mejor marketing, un producto
de mejor calidad garantiza aplicaciones más competitivas, menor soporte al cliente y
facilidad en sustituciones y rotación de personal (ventas).

Desde el punto de vista del usuario, la confianza que produce la facilidad de uso facilitará
su “fidelización” (el visitante volverá y posiblemente recomendará nuestro sitio a sus
conocidos y amistades).
Propuesta de solución.
Representación de la solución propuesta para los procesos y pantallas en los que
interactúan los tres usuarios o actores identificados en el sistema (Medico, Recepción y
Cliente), con estos vamos a identificar la entrada de información y salida en cada proceso
asi como las historias de usuarios.

Organigrama de la organización
 Login

Alta Cliente

Gestión Cliente

Medico
Alta Cita
Especialista

Gestión Citas

Alta Pruebas

Gestión Informe
Centro Medico o Consultorio

Clínico

Login

Alta Cliente

Recepción Gestión Cliente

Alta Citas

Gestión Citas

Notifiaciónes
Cliente
Alertas

Casos de uso por actores que intervienen en el proceso.

Registro Personal

Identificador Caso de Uso 1

Nombre Registro de personal
Actores Médico Especialista
Administrador o Recepción
Tipo Primario – Esencial
Descripción El Administrador de la aplicación registrará en la
 base de datos a los especialistas del centro.
Pre Condición El especialista debe permanecer al equipo de
trabajo de la empresa. Se necesitará la
información requerida para el registro.
Post Condición El especialista permanece registrado en el
sistema

Registro de Cliente

Identificador Caso de Uso 2

Nombre Registro de cliente
Actores Cliente
Tipo Primario – Esencial
Descripción Un usuario desea registrarse en la aplicación
para optar a las funcionalidades que ofrece el
portal del cliente.
Pre Condición Serán necesarios los datos de registro
establecidos para acceder.
Post Condición El cliente queda registrado en la base de datos
de la aplicación.

Inicio de sesión

Identificador Caso de Uso 3

Nombre Inicio de sesión
Actores Cliente
Médico Especialista
Tipo Primario – Esencial
Descripción Un usuario de la aplicación desea iniciar sesión
en la aplicación acceder portal.
Pre Condición Deberá estar registrado en la base de datos de la
aplicación. Se necesitarán sus credenciales para
el acceso.
Post Condición El usuario accede a la aplicación del centro.

Crear o asignar Citas

Identificador Caso de Uso 4

Nombre Asignación de citas
Actores Cliente
Médico Especialista
Tipo Primario – Esencial
Descripción Tanto el cliente como el especialista podrán
concretar una cita, rellenando la información
 necesaria. El sistema creará una cita con la
información obtenida.
Pre Condición El cliente deberá estar registrado en la
aplicación. El especialista no debe tener
asignado otro compromiso en el horario
asignado en la cita.
Post Condición Cita asignada a los usuarios que lo han
solicitado.

Actualización Citas

Identificador Caso de Uso 5

Nombre Modificación de citas
Actores Cliente
Médico Especialista
Tipo Primario – Esencial
Descripción El usuario puede modificar una cita. Podrá
reasignar la fecha de una cita o anularla.
Pre Condición Tener una cita asignada previamente.
Post Condición Cita modificada o anulada.

Crear Reporte o Informe Clínico

Identificador Caso de Uso 6

Nombre Creación de informes clínicos
Actores Médico Especialista
Tipo Primario – Esencial
Descripción El especialista del centro podrá crear informes
diagnósticos para sus clientes.
Pre Condición El cliente deberá pertenecer a la lista de clientes
del especialista y contar con toda la información
referente a él.
Post Condición Informe creado. El informe aparecerá en el
apartado de informes del cliente.

Asignación Estudios o Pruebas Medicas

Identificador Caso de Uso 7

Nombre Asignación de pruebas
Actores Médico Especialista

Tipo Primario – Esencial

Descripción El especialista podrá asignar una cita para la
 realización de una prueba diagnóstica a uno de
sus clientes.
Pre Condición El cliente deberá pertenecer a la lista de clientes
del especialista y contar con toda la información
referente a él.
Post Condición Prueba diagnóstica asignada. La cita aparecerá
en el apartado tareas pendientes del cliente.

Mensajes

Identificador Caso de Uso 8

Nombre Mensajería
Actores Cliente
Especialista
Tipo Primario – Esencial
Descripción Tanto el cliente como el especialista están
capacitados con un servicio de mensajería para
el intercambio de información. Se podrá escribir
mensajes y adjuntar archivos
Pre Condición El usuario deberá estar registrado en la
aplicación y haber iniciado sesión.
Post Condición Se enviará el mensaje y el receptor lo podrá
visualizar en la lista de mensajes.

Notificaciones de Citas

Identificador Caso de Uso 9

Nombre Notificación de cita.
Actores Cliente
Médico Especialista
Sistema
Tipo Primario – Esencial
Descripción El sistema notificará al usuario cuando se
aproxime la fecha de una cita o una prueba
diagnóstica.
Pre Condición Debe haber una cita asignada al usuario.
Post Condición Usuario notificado.

Gestión de Clientes

Identificador CU-13
Nombre Gestión de clientes.
Actores Especialista
Cliente
Tipo Primario – Esencial
Descripción El Especialista del centro podrá visualizar una
lista de todos sus clientes y podrá acceder y
modificar su información, asignar cita o prueba
 y redactar informes.
Pre Condición El especialista deber tener asignado a un
cliente.
Post Condición Usuario modificado.

Representación de unos casos de uso

Gestión de citas

El siguiente diagrama de secuencia muestra el flujo de la aplicación cuando interaccionan

los actores con el sistema.

Como podemos ver en el diagrama, el usuario debe iniciar sesión, o registrarse en caso
de no haberlo hecho con anterioridad y deberá rellenar los datos necesarios para crear la
cita. Esa cita se le asigna al médico especificado y se crea la cita en el sistema. Una vez
llega la fecha de la cita, el sistema se lo notifica al usuario.

Creación de informes
Como podemos observar, es el especialista del centro el que crea el informe sobre un
cliente. El cliente previamente tiene que rellenar información acerca de los alérgenos o
patologías que sufra para que queden registrados en el perfil para futuros informes. Con
esto se quiere evitar la mala asignación de diagnósticos o recetas.
Interfaces de usuario
Las interfaces gráficas de usuario (GUI’s, Graphical User Interfaces) basadas en
ventanas, menús, iconos y el ratón (WIMP, Windows, Icons, Menus and Pointing device)
así como en el “apunte y oprima” (point and click), han dominado y dominan la interacción
persona ordenador por más de veinte años. A pesar de los beneficios que han traído
consigo estas interfaces WIMP, como por ejemplo servir de estándar “de facto” de las
interfaces de aplicación y conseguir con ello una mejor reutilización de la experiencia del
usuario, existe sin embargo un sentimiento generalizado de que, a pesar de las mejoras
en su aspecto que estas interfaces han incorporado a lo largo de todos estos años, el
estancamiento que sufre el campo de las interfaces de usuario no nos permite afrontar los
retos que nos plantea el futuro.

Una interfaz gráfica de usuario se puede definir como una colección de técnicas y
mecanismos para interactuar con algo. En una interfaz gráfica, el mecanismo de
interacción primaria es un dispositivo de señalización de algún tipo. Este dispositivo es el
equivalente electrónico a la mano humana. Con lo que el usuario interactúa, es una
colección de elementos referenciados como objetos. A estos objetos se les puede ver, oír,
tocar o percibir de alguna otra manera.

Los objetos son siempre visibles al usuario y se utilizan para realizar tareas, los objetos
interactuarán como entidades independientes del resto de los objetos. La gente realiza las
operaciones, llamadas acciones, en los objetos, estas incluyen el acceso y modificación
de objetos al señalar, seleccionar y manipularlos. Todos los objetos tienen
comportamientos estándares.

Un sistema gráfico posee un conjunto de conceptos que lo definen, incluyen

presentaciones visuales sofisticadas, interacción de "pick-and-click", un conjunto
restringido de opciones de interfaz, visualización, la orientación a objetos, un amplio uso
de la memoria de reconocimiento de una persona, y el desempeño simultáneo de
funciones, que permiten la animación y la presentación de fotografías y video en
movimiento.

Interfaz de usuario y prototipos

Se van a tener en cuenta los casos de uso para definir los formatos de la interfaz del
sistema. Primero se va a dividir el formato según el tipo de aplicación es la que nos
encontremos. Como se ha explicado anteriormente la página web cuenta con dos
estructuras principales.

La primera se trata de una página web, principalmente informativa, en la que se podrán

solicitar citas e iniciar sesión y, por otro lado, la herramienta que queremos implantar con
las funcionalidades descritas.

Una vez definido esto mostraremos el prototipo de cómo será la interfaz de la aplicación
según la funcionalidad asociada al tipo de usuario.

Página Principal

El prototipo presentado se refiere a la página principal de la aplicación, tanto para el

usuario recepción como para el especialista del centro. Sin embargo, la columna que
presenta las funcionalidades cambiará según el tipo de usuario

1.Imagen corporativa
2. Acceso Perfil
3. Citas Pendientes
4. Tareas Pendientes
5. Acceso funcionalidad o Gestionar citas
 Informes médicos
 Pruebas diagnosticas
 Correo
6. Buscador
7. Ruta

Gestión Citas y Estudios o pruebas.

Tanto la gestión de las citas como el de las pruebas diagnósticas cuentan con una interfaz
similar, sin embargo, se encuentran en páginas diferentes.

Cuenta con dos secciones. La que está situada a la izquierda presenta un listado con la
información asociada a la cita con el médico o con la prueba correspondiente. Este listado
esta ordenado según la fecha de inicio de la misma de manera descendente. En la parte
derecha de cada una de las citas o las pruebas hay dos botones para modificar o eliminar
la cita o prueba en cuestión.

Informes Clínicos y Resultados de pruebas o estudios.

La aplicación cuenta con dos apartados en los que se encuentran un listado de informes y
otro del resultado de pruebas respectivamente. El listado está formado por una secuencia
de imágenes en miniatura, con el informe o prueba en formato .pdf y una pequeña
información descriptiva de cada uno de ellos. Este listado esta ordenado
cronológicamente de manera descendente.

Perfil

El apartado del perfil contiene la información del usuario que se encuentra en sesión. En
él aparece la información referente de cada usuario.

La funcionalidad que tiene esta interfaz es la de editar perfil y añadir alguna alergia. Esta
funcionalidad se presenta en los botones que se encuentran bajo la información.

Visor de clientes.
Este apartado se encuentra dentro de la funcionalidad de la aplicación del especialista. En
ella se encuentra un listado de todos los clientes asociados al mismo.

Cada sección de la lista contiene la información de cada uno de los clientes.

En la parte izquierda se encuentra un apartado con las carpetas donde se almacenan los
clientes. Estas carpetas se pueden crear y borrar.

Administración
El prototipo de la interfaz de la izquierda es el cuadro de mandos del administrador. En él
se encuentran en un listado toda la información que se encuentra en la base de datos,
con la capacidad de crear, borrar y modificar los datos que se encuentran en ella.

Interfaz Grafica

Se realiza un maquetado en baja fidelidad para definir la funcionalidad de las pantallas

propuestas para el flujo de información del sistema.

Acceso Login

Para el inicio de sesión el usuario debe introducir sus credenciales: email asociado a la
cuenta de la página web y la contraseña. En el caso que se haya olvidado la contraseña,
si pulsa el link, se le enviará un email con la nueva contraseña. Abajo aparece un
apartado para registrarse o acceder de nuevo al inicio.

Alta usuario.

Se deben introducir los datos de registro, una vez compruebe la validez de los
datos introducidas, deberá rellenar el formulario con las credenciales de
acceso. Una vez hecho el registro y ha sido validado por el administrador,
recibirá un email de confirmación y podrá acceder entonces a la aplicación.

En el caso de introducir algunos datos incorrectamente, la aplicación mostrará

un mensaje de error, indicando el tipo de incidencia que ha tenido el usuario a
la hora de introducir los datos.
Panel administrador

Para acceder al panel de administrador se le facilitará al cliente unas credenciales

estipuladas por el programador. Desde este panel se podrá gestionar la base de datos de
la aplicación.

En este apartado aparece la información del usuario y dos opciones: validar y Eliminar.
Los pasos que hay que seguir para validar a un usuario son:

1. Pinchar en el usuario que se quiere validar

2. Aparecerá una ventana con los datos del usuario, que ha subido en el apartado
de registro. Deberá comprobar que los datos coinciden

3. Cerrar ventana y validar o eliminar según la correspondencia de los datos.

Clientes

Este apartado está dividido en dos, según el rol del usuario: Cliente del centro o
Especialista. Sin embargo, la apariencia y funcionalidad que contienen para usuarios.

Aparece una lista con los clientes que están registrados en la aplicación. Sobre la lista se
encuentra un buscador en el que se puede hacer una búsqueda sobre cualquiera de los
campos que componen la fila del usuario.

En el caso de pulsar alguno de los clientes de la lista, aparecerá una interfaz con el perfil
del cliente, que contiene toda la información del mismo. En el aparecen dos opciones:

1.- Dar de baja al usuario

2.- Editar perfil

Para crear un nuevo cliente se debe pulsar el botón de crear usuario y aparecerá un
formulario de registro. Una vez rellenado se pulsa el botón de crear usuario y volverá a la
página anterior, con la lista de clientes actualizada:
Citas

El panel de citas muestra todas las citas que se han registrado en la base de datos.
Aparecen en una lista con los datos de la cita.
Si pulsa una fila de la lista aparecerá una nueva ventana con la información asociada a la
cita correspondiente

Las dos opciones que tiene el usuario son la de eliminar la cita o editar la cita. La
funcionalidad que tiene editar cita es únicamente para editar la fecha de la cita. Una vez
pulsa el botón de editar aparece un calendario con los días libres y cuando pulsas un día
aparece las horas libres

Aparece un calendario como el que se muestra a la izquierda. Una vez se selecciona el

día aparecerá a la derecha una lista con las horas libres. Debe seleccionar una y guardar

Si desea crear una cita deberá pulsar el botón de crear cita y seguir los pasos que se
indicaran.

Para crear la cita el administrador podrá seleccionar el cliente y el especialista asi como la
fecha y motivo de la programación de la cita, donde debe seleccionar de una lista de
usuarios ya creados anteriormente ya sea como cliente o usuario del sistema.
Conclusión
En el proceso del diseño de aplicaciones es muy importante definir la usabilidad
basándonos en la arquitectura de la información para proporcionar a los usuarios la
facilidad de recuperar la información de una forma rápida otra herramienta que
proporciona la arquitectura de la información es la capacidad de organizar, clasificar y
estructurar los contenidos de un sistema.

La usabilidad es un parte necearía para mostrar al usuario flujos y operaciones que

estamos entiendo de los casos de uso para que las historias a desarrollar estén lo más
apegadas a lo que el cliente está esperando y evitar re trabajo con cambios que no
estaban contemplados por un mal entendimiento de la solicitud. Para esto podemos
auxiliarnos de la construcción de prototipos y diseño de interfaces graficas con baja
definición solo para representar los flujos del sistema y el usuario proporciones sus puntos
de vista y aprobaciones que al finar ayudaran a realizar un desarrollo e integración más
fluido.
Referencias
Pressman, Roger S. 2006, “Ingeniería del Software: Un enfoque práctico”, Sexta edición,
México DF, Editorial McGraw Hill.

Sommerville Ian, 2005, “Ingeniería del Software”, Sétima edición, México DF, Editorial
Pearson.

Arias Chaves M. La ingeniería de requerimientos y su importancia en el desarrollo de

proyectos de software [Internet]. Sistema de Información Científica Redalyc. Revista de
las Sedes Regionales. 2005 [citado 4 de diciembre de 2019]

Xavier Ferré Grau 2000, Principios Básicos de Usabilidad para Ingenieros Software,
Universidad Politécnica de Madrid

Mascheroni, M. 2012, Calidad de software e Ingeniería de Usabilidad, Universidad

Nacional del Nordeste

Galitz, W. (2002). The Essential Guide to User Interface Design: An Introduction to

Guide Design Principles and Techniques. E.U.A: Wiley Computer Publishing

Semana 3 INGENIERÍA DE REQUERIMIENTOS DE USABILIDAD, Galileo Global

Education Latam