lOMoARcPSD|27487844

Elaboración De Interfaz Gráfica Y Mapa De

Navegación Cumpliendo Con Reglas De Usabilidad Y Accesibilidad

Evidencia:GA5-220501095-AA1-EV03

Aprendiz: Oyiuso Anderson Neuto González

Instructora. Doris González Martinez

Servicio Nacional De Aprendizaje - SENA

Centro Agro empresarial Huila

Análisis Y Desarrollo De Software

Aguachica –Cesar

02 de octubre de 2023
 lOMoARcPSD|27487844

Contenido

Introducción............................................................................................................................................ 3
Propósito............................................................................................................................................. 4
Ámbito del Sistema ............................................................................................................................ 4
Mapa de Navegación ........................................................................................................................ 4
Perspectiva del Producto ............................................................................................................... 5
Funciones del Producto .............................................................................................................. 5
Requerimientos Funcionales: ...................................................................................................... 5
Características de los Usuarios ..................................................................................................... 6
Restricciones ................................................................................................................................... 6
Suposiciones y Dependencias .................................................................................................... 6
Requisitos Futuros ....................................................................................................................... 6
Requisitos Específicos. Requerimientos funcionales ................................................................... 7
Interfaz ................................................................................................................................................. 7
Creación de la Interfaz ........................................................................................................................ 9
Paletas de Color .................................................................................................................................... 12
Requerimientos Funcionales ........................................................................................................ 12
Requisitos de Rendimiento .......................................................................................................... 13
Requisitos no funcionales. ............................................................................................................. 13
Reglas de Usabilidad y Accesibilidad..................................................................................... 15
Reglas de uso .................................................................................................................................... 15
Reglas de accesibilidad ...................................................................................................................... 16
Conclusiones ......................................................................................................................................... 18
 lOMoARcPSD|27487844

Introducción

Las funcionalidades del sistema y la accesibilidad son lo más importante para un software pues

se le podrá explotar su uso de una forma u otra según el objetivo con el que es creado. La

comprensión de los diferentes niveles de abstracción en el diseño de los datos, la selección de

estructuras y la implementación de algoritmos óptimos constituyen un perfil informático.

La interfaz gráfica del diseño tiene como objetivo mostrar la maquetación del software

en desarrollo. Esto nos permitirá ver y entender el manejo del sistema y los detalles de cada

pestaña.

También puedo 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 beneficiario para nuestros clientes.

 lOMoARcPSD|27487844

Propósito

El desarrollo de este documento tiene como objetivo adquirir conocimientos y

habilidades en el diseño y elaboración de interfaces gráficas y mapas mentales, con

ello, además; cumplir con lo solicitado por el documento de aprendizaje dando

solución a la actividad.

Ámbito del Sistema

El nombre del proyecto es foto mago, se trata de ofrecer prestación de servicios especializado

De fotografías. El objetivo es crear ofertas sobre todo el ámbito fotográfico a nivel nacional,

exponiéndolo en los medios digitales y mediante la plataforma foto mago, en se puede

interactuar de manera fácil y sencilla donde se encontrarán staff, información, productos,

precios, solicitudes de servicio.

Mapa de Navegación

El mapa de navegación es una vista desde una perspectiva más amplia de todo lo

que puede ofrecer mi software a desarrollar.

 lOMoARcPSD|27487844

Perspectiva del Producto

Funciones del Producto

Requerimientos Funcionales:

• Puedes acceder a la información de manera cómoda, por categorías

• Se puede generar orden de servicio por la página

• Recibe y genera información

• Realiza seguimiento del servicio, pagos, garantías y

pólizas

• Pueden elegir el tipo de servicio que requerían y con asesoría en

línea

• Staff de personal profesionales de fotógrafos.

 lOMoARcPSD|27487844

Características de los Usuarios

Restricciones

Como mínimo, se debe hacer uso de los protocolos de intercambio de datos vía

internet. Respecto a la seguridad, se debe considerar el uso de sesiones para limitar

el acceso a usuarios no autorizados.

El cliente no ha especificado ninguna otra limitante, y algunos de las características

las dejó al criterio de los desarrolladores.

Suposiciones y Dependencias

Para un funcionamiento correcto de la página solo se requerirá un navegador

como el de Chrome, para la visualización del recibo por la compra se requerirá de

un lector de PDF y una conexión a internet.

Requisitos Futuros

A futuro para mejora del producto se va a generar un espacio virtual de

manera didáctica en donde el usuario pueda crear su propio diseño y mejorar

condiciones de la prestación del servicio para mejorar continuamente el software,

para una mayor comodidad de él, dándole diferente platilla, y facilitando la

compresión de la página lo máximo posible, similar a un juego de vestir

personajes.
 lOMoARcPSD|27487844

Requisitos Específicos. Requerimientos funcionales

Puedes acceder a la información de manera cómoda, por categorías En este punto se lleva a

cabo lo mencionado acerca de la interfaz en el mensaje de inicio, es decir, que la información

categorizada se verá en un recuadro en la parte izquierda de la pantalla, representando las

áreas ya mencionadas.

Se puede adquirir la prestación de servicio a través de la página Esto hace referencio a área

de gestión de servicios en donde se almacenarán todas las ordenes de compras realizadas para

su posterior verificación y aceptación de orden de servicio. Da los vínculos para recolección de

requisitos. Estos vínculos se encuentran en la información de la empresa ubicada como una

categoría de la página, para que así, si el cliente lo desea, rellene un cuestionario que estará

relacionado a como se sintió con respecto a la página y que cree que se debería mejorar,

adicional a esto, también la opción de apoyar un producto futuro donde podrán crear sus

propios diseños del producto con asesorías del staff de la plataforma

Interfaz

La interfaz gráfica con la que el usuario final interactúa deberá ser intuitiva de manera

que, sin un manual de uso, el usuario identifique rápidamente los componentes y las secciones

del sistema. La interfaz además deberá contar con colores agradables a la vista para que el

usuario pueda trabajar por horas con el mismo sin problemas. De igual forma, la interfaz deberá

ser compatible con los navegadores más comunes

 Mensaje de bienvenida

Este tendrá un inicio de bienvenida con el logo de la empresa de fondo más una frase que brinde

seguridad y tranquilidad al futuro comprador

 lOMoARcPSD|27487844

 Menú

Este se encontrará a mano izquierda con títulos cortos para que el usuario se pueda guiar

fácilmente, con un rectángulo que solo ocupara el lado izquierdo.

Este menú tendrá

Inicio

Lista de deseos del usuario

Diseños del producto más comprados

Todos los diseños

Buscar un diseño especifico

Área de carrito

Información sobre la empresa

Acerca del servicio de entrega

 Búsqueda de diseños especifico

Este contara con un sistema de etiquetas para buscar ya sea #colores, #talla, #diseño, etc.

 Área generación de servicio

Este contara con un ciclo de compra, es decir, un paso a paso, si quiere hacer uso del servicio

de entrega o si prefiere ir a reclamarlo, el valor totalcon un recibo para validar la compra y

horario de atención.

 Información de la empresa.

Se mostrará el logo en un lado, se describirán las labores realizadas para la elaboración del

producto, como puede apoyar a la empresa respondiendo un cuestionario y quienes son los

empleados actuales en la empresa, facilitado así por ser una empresa pequeña.

 Sistema de Inicio de Sesión

El usuario deberá introducir un nombre de usuario y un password previamente registrado y

dado de alta por algún usuario administrativo. El password deberá tener no menos de 8
 lOMoARcPSD|27487844

caracteres y será sensitivo al uso de mayúsculas y minúsculas o El nombre de usuario deberá

ser formado por las iniciales del nombre y el apellido paterno completo y el año de nacimiento

en 2 dígitos-8. Ejemplo Fernando Pérez, el usuario sería: o Al quinto intento fallido de inicio de

sesión, el sistema bloqueará automáticamente ese usuario por un tiempo determinado (15

minutos).

Creación de la Interfaz

Se desea elaborar una pantalla que permita validar un usuario

Diagrama de Flujo
 lOMoARcPSD|27487844

Se elabora una pantalla que permita ingresar nombres, apellidos, cédula, fecha de nacimiento

de un usuario.

Diagrama de flujo
 lOMoARcPSD|27487844

● Se desea dibujar una pantalla en donde se informe de posibles errores a un usuario.

Diagrama de flujo
 lOMoARcPSD|27487844

Paletas de Color

Requerimientos Funcionales

 Puedes acceder a la información de manera cómoda, por categorías

En este punto se lleva a cabo lo mencionado acerca de la interfaz en el mensaje de inicio, es

decir, que la información categorizada se verá en un recuadro en la parte izquierda de la

pantalla, representando las áreas ya mencionadas.

 Se puede comprar el producto a través de la página.

Esto hace referencio a área de carrito en donde se almacenarán todas las compras realizadas

para su posterior verificación y aceptación de compra.

 Da los vínculos para recolección y generación de información.

Estos vínculos se encuentran en la información de la empresa ubicada como una categoría de

la página, para que así, si el cliente lo desea, rellene un cuestionario que estará relacionado a

como se sintió con respecto a la página y que cree que se debería mejorar, adicional a esto,

también la opción de apoyar un producto futuro donde podrán crear sus propios diseños del

producto.
 lOMoARcPSD|27487844

 Puedes elegir si puedes pedir que te hagan un envió o ir a

recogerlo personalmente.

Esto se encuentra en las opciones del área del pedido para darle más libertad al cliente

para que le llegue el producto finalizado de la prestación del servicio o el recogerlo en la sede

 Puedes elegir el tipo de producto que quieres.

Puede escoger la prenda de vestir, talla, color, diseño.

Requisitos de Rendimiento

Requisitos del sistema (servidor)

Hardware: Windows 7, Windows 8, Windows 8.1, Windows 10 o una version posterior. Un

procesador Intel Pentium 4 o superior compatible con SSE3.

Software: acceso a

internet Otros: gran

almacenamiento

Requisitos del Sistema

Hardware: : Windows 7, Windows 8, Windows 8.1, Windows 10 o una version

posterior. Un procesador Intel Pentium 4 o superior compatible con SSE3

Software: acceso a internet y un explorador

de internet Otros: usar Chrome.

Requisitos no funcionales.
 lOMoARcPSD|27487844

Esta optimizado

Debido a que se ignora la capacidad de cómputo de algunos usuarios, se requiere de otro

factor: eficiencia para no malgastar recursos, en el caso de poseer una máquina lenta

Informa al equipo de que hay un pedido o fallo en la plataforma

El cliente también desea sentirse respaldado no solamente por un manual, sino por

alguien que solucione sus dudas, soporte humano que pueda explicar a fondo el

funcionamiento de su producto. Es muy importante y sobre todo después de un tiempo

cuando alguno de los usuarios finales comience a formular preguntas o haga algún

movimiento inesperado.

Tiene su propio sistema de seguridad siendo este, el cuidado de las cuentas de

usuario.

El requisito más importante que el sistema va a poseer es la estabilidad, si el producto

corre el riesgo de cambiar o dañarse ¿qué seguridad tenemos para con el cliente? Una

buena característica entonces será asegurar la integridad del dato.

Usa cuentas de usuario para poder guardar correctamente la información del cliente,

la cual estará disponible en todo momento.

Viene de la mano con el requisito anterior la disponibilidad, es vital que el usuario tenga

acceso a los datos en cualquier momento posible.

 lOMoARcPSD|27487844

Se genera un recibo de acuerdo a la compra el cual es dejado como un pdf.

La documentación también es necesaria para que el usuario sea capaz de resolver dudas

menores que vayan surgiendo sobre la marcha en el uso de su nuevo sistema, debe ser

completa, pero al mismo tiempo no tan extensa para que pueda ser consultada con

facilidad y realmente sea útil.

Se puede abrir únicamente una categoría a la vez.

Esto es para evitar errores y que se sature la página por tantas acciones a realizar por

cada usuario.

Reglas de Usabilidad y Accesibilidad

Reglas de uso

 Facilidad de aprendizaje:

Se puede emplear una unidad de tiempo para determinar lo que demoran los usuarios en

usarla de manera correcta y realizar las operaciones básicas y comunes.

Se puede emplear una unidad de tiempo para determinar lo que demoran los usuarios en usarla

de manera correcta y realizar las operaciones básicas y comunes.

 Facilidad y eficiencia de uso:

Se puede usar una unidad de tiempo para establecer cuando tiempo se demora un usuario en

realizar una operación completa de su quehacer con la herramienta de trabajo.

 Facilidad de recordar el funcionamiento:

 lOMoARcPSD|27487844

Capacidad de recordar las características y forma de uso de un sistema se debe usar para

volver a emplearlo en el futuro.

 Frecuencia y gravedad de errores:

Los mensajes de error a los usuarios para apoyarlos cuando deban enfrentar los errores

cuando se comenten errores determinados en el sistema. Ejemplo de un error

predeterminado. Un sistema de compra que no permita avanzar si no se ha seleccionado

ningún producto.

 Satisfacción subjetiva:

Indica lo satisfechos que quedan los usuarios después haber usado el sistema debido al

diseño presentado y es subjetiva porque depende de la percepción de cada usuario.

Reglas de accesibilidad

 Definir con simplicidad y claridad la estructura de los contenidos.

Generalmente la recomendación es organizarlos de acuerdo con una jerarquía y consistente

temáticamente o según las relaciones y procesos de negocio de la aplicación.

 Establecer un diseño “limpio”:

Correcta tipografía, imágenes y recursos gráficos que hagan fácil al usuario encontrar lo que

busca, separando los contenidos con una clasificación lógica.

 Ceder el control al usuario:

 lOMoARcPSD|27487844

Los usuarios no sienten una experiencia positiva si en algún momento se sienten perdidos

mientras interactúan con el sistema. Se debe Garantizar que el usuario sepa dónde se

encuentra y cómo acceder a otro enlace o funcionalidad.

 Facilitar la interacción:

Permitir que el usuario pueda desarrollar varias acciones de forma fácil e intuitiva aporta a la

satisfacción, sin embargo, si estas opciones no se presentan como un diseño limpio, se puede

lograr un efecto adverso.

 lOMoARcPSD|27487844

Conclusiones

Aprendizaje y ejecución de los mapas de navegación bajo los estándares de accesibilidad y

usabilidad con interfaces gráficas para interacción con el usuario cliente dejándonos claro este

proceso el propósito los objetivos en la graficas establecidas en el software foto mago, es el

compromiso y la viabilidad del proyecto donde se va dando forma y se ve solidificado.