TEMA:
ELABORACIÓN DE INTERFAZ GRÁFICA Y MAPA DE NAVEGACIÓN CUMPLIENDO CON
REGLAS DE USABILIDAD Y ACCESIBILIDAD GA5-220501095-AA1-EV03
INTEGRANTES DEL GRUPO
APRENDICES
MARTHA VIVIANA PABON ROMERO
BRANDO STIVEN CHAVEZ NUÑEZ
JOSE GEOVANNY LOPEZ MALAMBA
INSTRUCTOR: DEIVIS MORALES URIBE
PROGRAMA: ANALISIS Y DESARROLLO DE SOFTWARE
FICHA: 2834903
GRUPO: #6
INTRODUCCIÓN
REQUERIMIENTOS DEL SISTEMA.
DEFINICIÓN MAPA DE NAVEGACIÓN.
PERSPECTIVA DEL PRODUCTO.
FUNCIONES DEL PRODUCTO.
CARACTERÍSTICAS DE LOS USUARIOS.
RESTRICIONES.
REQUISITOS FUNCIONALES.
REQUISITOS NO FUNCIONALES.
INTRODUCCION
En el siguiente documento se evidencia el interfaz gráfico del diseño, con el propósito de mostrar el
mapa del software en desarrollo. Esto nos permitirá ver y entender el manejo del sistema y los
detalles de cada pestaña, el grupo VGB SERVICES GROUP ha venido desarrollando este software
en función al cliente, con el objetivo de cubrir falencias en pequeñas y medianas empresas. Es
fundamental que toda empresa maneje un sistema de software para que lleven un mejor control,
organización y distribución, así lograr un mejor funcionamiento y productividad. El mapa de
navegación de un software nos permite iniciar desde un Login y dirigirnos a diferentes pestañas del
sistema, mostrándonos sus funciones las cuales se adaptan a los requerimientos solicitados por el
cliente
También podemos mencionar que nuestro diseño es capaz de evolucionar a medida que cambien
los requerimientos del usuario y del mercado a su vez estamos ofreciendo un producto de calidad
y beneficiarle para nuestros clientes. desarrollo, donde se evidencia las funciones que deberá tener
para lograr las necesidades.
REQUERIMIENTOS DEL SISTEMA.
HARDWARE SOFTWARE
computador servidor IBM, Disco My SQL SERVER
2TB,
Memoria RAM 16 GB
computador desarrollador software Windows 10 PRO 64 BITS ORACLE
I7- I9, RAM 8GB, SD (Python 3.12 64-bit)
240 GB, Disco 1TB
office 365
Windows Server 2008
R2 Standard con Service Pack 1 y
versiones posteriores de 64 bits.
Windows Server 2012 R2 Standard
64 bits
DEFINICIÓN Y CREACIÓN DEL MAPA DE NAVEGACIÓN
El mapa de navegación es un esquema, que se puede pensar como un árbol jerárquico, que
representa la arquitectura de las páginas de un sitio web. Esta representación puede ser, como un
mapa conceptual, de forma gráfica para visualizar y entender sobre un mapa el recorrido de visitante,
es decir su navegación y cómo este llega a lo que está buscando. También, en este se organiza la
distribución y la jerarquía del contenido.
Estructura lógica: Diseña un mapa de navegación que refleje la estructura lógica de la aplicación, de
manera clara y predecible, para que los usuarios puedan encontrar rápidamente la información que
buscan.
Menús y categorías: Organiza las secciones de la aplicación en menús desplegables o paneles
laterales, agrupando funciones relacionadas, como citas pendientes, citas pasadas e historial
médico.
Migas de pan (breadcrumb): Implementa un sistema de migas de pan que muestre la ubicación del
usuario dentro de la aplicación y facilite la navegación hacia atrás.
PERSPECTIVA DEL PRODUCTO.
Es desarrollar un software de Asignación de citas para una empresa, la cual contará con una base
de datos y un registro de ingreso de información sobre los usuarios que utilizarán la aplicación ya
sea de tipo visitante o de tipo administrador, Es importante desarrollar un software en funcionalidad
de dicha empresa, que sea de fácil su usabilidad y entendible para aquellas personas que no
entiendan casi de sistema. El software será desarrollado a través de requerimientos solicitado por el
cliente, y por ideas suministradas por el equipo “VGB SERVICES GROUP” el cual ayudará a la
empresa para una mejor organización, atención y distribución de sus servicios.
FUNCIONES DEL PRODUCTO
Priorización de funciones: Enumera las funciones esenciales que debe tener la aplicación, como la
programación de citas, gestión de historiales médicos y recordatorios de citas.
Establecimiento de objetivos de usabilidad: Define los aspectos que deben cumplirse para que la
aplicación sea considerada fácil de usar y eficiente para sus usuarios.
Diseño de la interfaz de usuario (UI)
Diseño centrado en el usuario: Crea un diseño intuitivo y amigable que guíe a los usuarios a través
de las diferentes funciones de la aplicación.
Jerarquía visual: Emplea técnicas de diseño visual para resaltar elementos importantes como
botones de acción (por ejemplo, "Programar cita" y "Ver historial médico"), fechas y horas de citas,
y mensajes críticos, como los errores de formulario.
Contraste y legibilidad: Asegúrate de que haya suficiente contraste entre el texto y el fondo para
facilitar la lectura, especialmente para usuarios con problemas de visión.
Tamaño y espaciado: Utiliza tamaños de texto legibles y suficiente espacio en blanco para evitar la
congestión visual y mejorar la legibilidad.
CARACTERISTICAS DE LOS USUARIO:
Identificación de usuarios: Es fundamental determinar quiénes serán los principales usuarios de la
aplicación, como pacientes, médicos y personal administrativo, y comprender sus necesidades
específicas en la gestión de citas médicas.
Requisitos de accesibilidad: Familiarízate con las pautas de accesibilidad web, como las
especificaciones WCAG (Web Content Accessibility Guidelines), para asegurar que la aplicación sea
accesible para todos, incluidas personas con discapacidades visuales, auditivas o motoras.
Pruebas de usabilidad: Realiza pruebas con usuarios reales para identificar posibles puntos de
confusión o dificultades en la navegación y uso de la interfaz.
Compatibilidad multiplataforma: Asegúrate de que la aplicación sea responsive y funcione bien en
diferentes dispositivos, como móviles, tabletas y computadoras.
Cumplimiento con WCAG: Verifica que la aplicación cumpla con las pautas de accesibilidad WCAG,
asegurando que haya alternativas textuales para elementos no textuales y que el contenido sea
navegable mediante teclado, entre otros aspectos.
Feedback y iteración: Recopila comentarios de los usuarios y utiliza esa retroalimentación para
mejorar continuamente la interfaz y la experiencia de navegación.
Actualización y mantenimiento: Realiza actualizaciones periódicas para corregir errores, mejorar la
accesibilidad y añadir nuevas funcionalidades según las necesidades de los usuarios y los avances
tecnológicos.
RESTRICIONES.
- las eliminaciones en BD Solo las hará el personal autorizado.
- La actualización de la base de datos la hará el personal autorizado con el soporte del
documento adjunto.
- Los cambios en el software y actualizaciones de personal autorizado solo lo harán “VGB
SERVICES GROUP”
REQUISITOS FUNCIONALES Y NO FUNCIONALES.
BASE DE DATOS
VERSIÓN 1.O AUTOR
permitir al administrador ver, modificar,
actualizar la información de la base de datos de
OBJETIVO los usuarios.
El software solicita un LOGIN para buscar la
información
-El software proporciona lainformación
registrada del usuario solicitado
-El software permite al administrador realizar
REQUISITOS cualquier cambio
- El software mostrara un mensaje de
confirmación si se realiza alguna
modificación
El software está disponible y se
PRECONDICI encuentra en el estado validar usuario
ÓN
SECUENCIA PASO ACCIÓN
El administrador accede a la App
1 para verificar Base de datos
El administrador verifica la
2 información del
usuario
El administrador realiza
3 cambios en la información
suministrada
Validación: si el administrador no
confirma los cambios no se
POST 4 permitirá actualizar la
CONDICIÓN
información
Saldrá un mensaje de confirmación: Su
COMENTARII modificación ha
OS sido guardada con éxito
BASE DE DATOS
VERSIÓN 1.O AUTOR
permitir al administrador ver, modificar, actualizar la
información de la base de datos
OBJETIVO
de la organización
-El software muestra la información registrada
del usuario a modificar
-El software permite al administrador realizar
cualquier cambio en la base de datos
-El software solicitará confirmación para realizar la
modificación solicitada
REQUISITOS -El software mostrara un mensaje de confirmación
si se
realiza alguna modificación
El software está disponible y se encuentra en el
estado modificación base de datos en el
PRECONDIC registro
IÓN
SECUENCIA PASO ACCIÓN
El administrador accede a la App web por
1 LOGIN para modificar Base de datos
El administrador ubica la información del
usuario que desea modificar
2
3 El administrador realiza cambios en un
rango especifico
Validación: si el administrador no confirma
POST 4 los cambios no se permitirá actualizar, ni
CONDICIÓN guardar la información
Saldrá un mensaje de confirmación: Su modificación
COMENTARIIO ha
S sido guardada con éxito
ELIMINAR REGISTRO BASE DE DATOS
VERSIÓN 1.O AUTOR
permitir al administrador ver, modificar, actualizar la
información de la base de datos
OBJETIVO de los usuarios
-El software muestra la información registrada del
usuario solicitado
-El software permite al administrador eliminar la
información de la base de datos -El software solicita un
LOGIN para poder eliminar la información
-El software mostrara un mensaje de confirmación si
REQUISITOS se elimina la información
PRECONDICIÓN El software está disponible y se encuentra en el estado
eliminación de usuario
SECUENCIA PASO ACCIÓN
El administrador accede a la App para ver la Base
1 de datos
2 El administrador verifica la información del
usuario a eliminar
3 El administrador elimina de la base de datos la
información registrada
Validación: si el administrador no digita el
POST 4 LOGIN , no se permitirá eliminar la información
CONDICIÓN
Saldrá un mensaje de confirmación: Este registro ha sido
eliminado con éxito de la base de datos
COMENTARIIOS
REGISTRO DE USUSARIO EPS
VERSIÓN 1.O AUTOR
permitir a las EPS registrarse para generar una clave
OBJETIVO de acceso y poder solicitar información de un paciente
de la organización
El software proporciona un formulario para que el
usuario se registre.
ü Si queda un campo vacío no se podrá guardar
ü El software guardara la
información suministrada por el usuario
REQUISIT ü El software mostrara un mensaje de
OS confirmación de registro
El software está disponible y se encuentra en el
estado registro de usuario EPS
PRECOND
ICIÓN
SECUENCI PASO ACCIÓN
A El usuario accede a la App web y
1 comienza el proceso de registro
El usuario ingresa los datos personales
2 de acuerdo al formulario de registro
Validación: si el usuario deja un campo
POST 3 vacío no se permitirá guardar la
CONDICIÓ información
N
se enviara un correo electrónico de confirmación para
asignar clave de acceso a la App
COMENTA
RIIOS
MAPA DE NAVEGACIÓN:
Explicación del mapa de navegación:
Inicio: La página principal donde los usuarios pueden iniciar sesión y autenticarse
Citas: Aquí los usuarios pueden cancelar sus citas médicas. pueden programar nuevas citas
escogiendo día-hora-médico especialista, ver las citas pendientes y acceder al historial de
citas pasadas.
Perfil de Usuario: los usuarios pueden ver sus datos personales, actualizar datos básicos,
solicitar actualizar documento anexando el PDF, y ajustar las preferencias de notificaciones
para recordatorios de citas u otros avisos importantes.
Certificados: aquí los usuarios pueden solicitar y escoger si lo quieren en la web o que sea
enviado a sus correos electrónicos
Historia Clínica: aquí pueden obtener las historias clínicas de cualquier fecha y especialidad,
las formulas médicas y escoger si descargarlas o que sea enviada a sus correos electrónicos
Ayuda y Soporte: Sección donde los usuarios pueden encontrar respuestas a preguntas
frecuentes sobre el uso de la aplicación y cómo contactar al equipo de soporte técnico si
tienen problemas o preguntas adicionales.
Cerrar sesión: Opción para cerrar sesión de manera segura cuando los usuarios hayan
terminado de utilizar la aplicación.
