Evidencia de desempeño: GA5-220501095-AA1-EV03 - Elaboración de interfaz
gráfica y mapa de navegación cumpliendo con reglas de usabilidad y
accesibilidad.
Ugo Andrés Sánchez Baeza – 2779633
Edinson José Espitaleta Arrieta - 2779634
Servicio Nacional de Aprendizaje SENA
Regional Norte de Santander
Centro de la Industria, la Empresa y los Servicios
Tecnología en Análisis y Desarrollo de Software
Instructor: Osmell Caicedo
Garagoa – Boyacá, Colombia
20 de diciembre de 2024
Tabla de contenido
Introducción ..................................................................................................................... 3
Entregable 1. Elaboración de un Mapa de navegación. .............................................. 4
Entregable 2. Elaboración de una Interfaz gráfica....................................................... 6
Conclusiones. .................................................................................................................. 8
Referencias. ..................................................................................................................... 9
INTRODUCCIÓN
En el presente trabajo se aborda el desarrollo de un sistema Punto de Venta (POS)
mediante la elaboración de un mapa de navegación y prototipos wireframe,
siguiendo las mejores prácticas de usabilidad y accesibilidad. El objetivo principal
es diseñar una interfaz gráfica intuitiva y eficiente que facilite la gestión de ventas,
inventario y clientes en un entorno de tienda minorista. Para ello, se utilizarán
herramientas online gratuitas que permiten una creación rápida y colaborativa de
los prototipos. Además, se implementará un proceso de validación y
retroalimentación para asegurar que el diseño final cumpla con las expectativas de
los usuarios y los estándares de calidad establecidos.
Entregable 1. Elaboración de un Mapa de navegación.
Pantalla de
Inicio.
Login/Registro
Acceso rápido a funciones
principales
Gestión de Gestión de Resumen Gestión de Acceso a Gestión de
Notificaciones Configuración
Clientes Ventas de ventas Inventario reportes Productos
Historial Categorías
Nueva Historial Órdenes Estado del Alertas de Lista de Configuración Seguridad
de Devoluciones de
Añadir/ venta de ventas de compra inventario stock bajo productos del sistema y permisos
compras productos Añadir/
Editar/
Editar/
Eliminar
Eliminar
clientes
productos
1. Pantalla de Inicio oÓrdenes de compra
o Login/Registro 5. Gestión de Ventas
2. Acceso rápido a funciones principales o Nueva venta
o Resumen de ventas o Historial de ventas
o Dashboard Principal o Devoluciones
o Acceso a reportes 6. Gestión de Clientes
o Notificaciones o Lista de clientes
3. Gestión de Productos o Añadir/Editar/Eliminar clientes
o Lista de productos o Historial de compras
o Añadir/Editar/Eliminar productos 7. Configuración
o Categorías de productos o Preferencias del usuario
4. Gestión de Inventario o Configuración del sistema
o Estado del inventario o Seguridad y permisos
o Alertas de stock bajo
Lista de Requerimientos (IEEE830)
Perspectiva del Producto
Descripción: El sistema POS es una aplicación diseñada para facilitar la
gestión de ventas, inventario y clientes en un entorno de tienda minorista.
Funciones del Producto
Gestión de ventas: Registro de ventas, generación de recibos.
Gestión de inventario: Monitoreo de stock, alertas de stock bajo.
Gestión de clientes: Registro y seguimiento de clientes.
Características de los Usuarios
Usuarios finales: Cajeros, gerentes de tienda.
Requisitos de accesibilidad: Compatibilidad con lectores de pantalla,
navegación por teclado.
Restricciones
Tecnológicas: Debe funcionar en dispositivos con sistemas operativos
Windows y Android.
Legales: Cumplimiento con normativas de protección de datos.
Requisitos Funcionales
Login seguro: Autenticación de usuarios.
Registro de ventas: Captura de datos de ventas en tiempo real.
Gestión de inventario: Actualización automática del inventario.
Requisitos No Funcionales
Rendimiento: Respuesta rápida en operaciones de venta.
Seguridad: Encriptación de datos sensibles.
Usabilidad: Interfaz intuitiva y fácil de usar.
Proceso de Validación y Retroalimentación de Prototipos
1. Creación del prototipo inicial: Basado en los requerimientos iniciales.
2. Pruebas de usabilidad: Con un grupo de usuarios representativos.
3. Recopilación de feedback: A través de encuestas y entrevistas.
4. Iteración del diseño: Ajustes basados en el feedback recibido.
5. Validación final: Pruebas de usabilidad finales antes del desarrollo
completo.
Entregable 2. Elaboración de una Interfaz gráfica.
Prototipo Wireframe
Pantalla de Inicio
Elementos: Campos de usuario y contraseña, botón de login, enlace para
registro, enlace para recuperar contraseña.
Usabilidad: Diseño limpio y simple, accesible para usuarios con
discapacidades visuales (uso de colores contrastantes y etiquetas claras).
Accesibilidad: Compatible con lectores de pantalla, navegación por teclado.
Acceso rápido a funciones principales
Elementos: Gráficos de ventas, Dashboard, notificaciones, etc.
Usabilidad: Información clave visible de un vistazo, navegación intuitiva.
Accesibilidad: Gráficos con descripciones textuales, botones grandes y
claros.
Página de inicio
Acceso rápido a funciones principales.
Conclusiones.
La elaboración del mapa de navegación y los prototipos wireframe para el sistema
POS ha permitido visualizar de manera clara y estructurada las funcionalidades y la
interacción del usuario con la aplicación. A través del uso de herramientas online
gratuitas, se ha logrado un diseño accesible y fácil de usar, que cumple con los
requisitos funcionales y no funcionales definidos. El proceso de validación y
retroalimentación ha sido crucial para iterar y mejorar el diseño, garantizando así
una experiencia de usuario óptima. Este trabajo no solo proporciona una base sólida
para el desarrollo del sistema POS, sino que también destaca la importancia de la
usabilidad y accesibilidad en el diseño de interfaces gráficas.
REFERENCIAS.
1. AppMaster. (2022). La diferencia entre las aplicaciones móviles nativas y
todas las demás. Recuperado de https://appmaster.io/es/blog/la-diferencia-
entre-las-aplicaciones-moviles-nativas-y-todas-las-demas
2. AWS. (2023). Comparación entre aplicaciones web, aplicaciones nativas y
aplicaciones híbridas. Recuperado
de https://aws.amazon.com/es/compare/the-difference-between-web-apps-
native-apps-and-hybrid-apps/
3. Bambú Mobile. (2023). Apps híbridas vs nativas ¿Cuál es mejor?
Recuperado de https://bambu-mobile.com/apps-hibridas-vs-nativas/
4. Geekflare. (2024). 7 mejores IDE para el desarrollo de aplicaciones móviles.
Recuperado de https://geekflare.com/es/best-ide-for-mobile-app-
development/
5. Hiberus. (2022). App híbrida o nativa: diferencias y ejemplos. Recuperado
de https://www.hiberus.com/crecemos-contigo/app-hibrida-o-nativa/
6. Mobian Studio. (2024). Los 15 mejores lenguajes de programación para el
desarrollo de aplicaciones móviles. Recuperado
de https://mobian.studio/es/programming-languages-for-mobile-app-
development/
7. Normas APA. (2020). ¿Cómo citar un App o Aplicación Móvil?. Recuperado
de https://normas-apa.org/referencias/citar-app-o-aplicacion-movil/
8. Testing IT. (2023). 4 normas ISO que definen estándares de calidad de
software. Recuperado de https://www.testingit.com.mx/blog/estandares-
calidad-software
9. Togrow Agencia. (2023). Aplicaciones web vs. aplicaciones móviles:
Diferencias y usos. Recuperado de https://togrowagencia.com/aplicaciones-
web-aplicaciones-movil-diferencias/
10. Vinser. (2023). Ergonomía cognitiva: rendimiento, bienestar y aplicaciones.
Recuperado de https://vinser.com.ar/ergonomia/ergonomia-cognitiva
11. Wikipedia. (2023). Calidad de software. Recuperado
de https://es.wikipedia.org/wiki/Calidad_de_software
12. Zapater, S. (2022). App híbrida o nativa: diferencias y ejemplos. Blog de
Hiberus. Recuperado de https://www.hiberus.com/crecemos-contigo/app-
hibrida-o-nativa/
