GA5-220501095-AA1-EV03 Elaboración de interfaz gráfica y mapa de

navegación cumpliendo con reglas de usabilidad y accesibilidad.

JOSEPH STIVEN BUITRAGO TAPIERO

PRESENTADO A:
GABRIEL SUAREZ GONZALES

SENA SERVICIO NACIONAL DE APRENDIZAJE

ANÁLISIS Y DESARROLLO DE SOFTWARE
ANTIOQUIA, MEDELLIN
2023

Contenido

2 0
1. Introducci´on 3
1.1. Proposito ..............................................................................................3
1.2. A´ mbito del Sistema ............................................................................3

2. mapa de navegación
2.1. Perspectiva del Producto....................................................................... 4
2.2. Funciones del Producto................................................................... 4
2.3. Caracteristicas de los Usuarios..............................................................5
2.4. Restricciones...........................................................................................5
2.5. Suposiciones y Dependencias................................................................5
2.6. Requisitos Futuros...........................................................................5

3. Requisitos Espec´ıficos 6
3.1. Interfaz....................................................................................................7
3.2. Creación de interfaz……………………………………………………………………………8
3.3. Requerimientos funcionales.................................................................12
3.4. Requisitos de Rendimiento.................................................................. 12
3.5. Resquisitos no funcionales ..................................................................13

4. reglas de usabilidad y accesibilidad 14

2 0
1. Introducci´on
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.

1.1. Prop´osito
El propósito de este documento es cumplir con lo solicitado por
el documento de aprendizaje dando solución a la actividad.

1.2. Ámbito del sistema

En esta subsección:
El nombre del sistema software es Green Culture 4/20 ( venta de Ropa
Urbana). Del proyecto que se está llevando a cabo.

Este software tendrá como objetivo crear la empresa y lograr ventas a nivel
nacional, sacando el mejor provecho en los medios digitales, este software
también permitirá ver información sobre la empresa y la ubicación del
usuario para hacer envíos del producto únicamente, no se almacenará
información de tarjetas de crédito ni de otros medios de pago para seguridad
del usuario.

Los beneficios que tendrá este software es que simplificara la compra

con diseños del producto, no necesitara estar presente en ninguna de las
instalaciones y las compras serán completamente seguras al no guardar
esa información salvo el recibo de la compra, como meta se espera
obtener la confianza del usuario al tener la obligación de iniciar sesión y
crearse una cuenta para poder usar la página.

2 0
 03

2. 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.

2.1. Perspectiva del Producto

2 0
 2.2. Funciones del Producto

Requerimientos Funcionales:
• Puedes acceder a la información de manera cómoda, por categorías
• Se puede comprar el producto a través de la página
• Da los vínculos para recolección de requisitos (encuesta)
• Puedes elegir si puedes pedir que te hagan un envió o ir a recogerlo
Personalmente

04

• Puedes elegir el tipo de producto que quieres.

• Carrito de compras.

2.3. Características de los usuarios

2.4. Restricciones

 Como mínimo, se debe hacer uso de los protocolos de intercambio de

datos vía internet.

2 0
  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.

2.5. 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.

2.6. 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 del producto 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.

05

3. Requisitos Espec´ıficos

 Requerimientos funcionales

o 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

2 0
 recuadro en la parte izquierda de la pantalla, representando las áreas ya
mencionadas.
o Se puede comprar el producto a través de la pagina
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.
o Da los vínculos para recolección de requisitos (encuesta)
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
pagina 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
o 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 de si quiere facilitarse el viaje haciendo que le traigan el
producto o si prefiere ir él mismo.
o Puedes elegir el tipo de producto que quieres.
Dado que son cortinas estas traen distintos diseños, telas y mucho más.
o Carrito de compras
Esta sería el área del carrito con las opciones de compra y medios de pago
más comunes disponibles

06

3.1. 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.

2 0
 De igual forma, la interfaz deberá ser compatible con los navegadores más
comunes
o 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
o 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.
o 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
o Búsqueda de diseños especifico
Este contara con un sistema de etiquetas para buscar ya sea #colores,
#talla, #diseño, etc.
o Área de carrito
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 total
con un recibo para validar la compra y horario de atención.
o 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.
o Acerca del servicio de entrega.
Aquí se encontrará el valor adicional por él envió, puede variar
dependiendo las compras que haya en la zona, puede elegir una ubicación
de entrega si le parece más seguro así.

07
o Sistema de Inicio de Sesión o 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 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 Stiven Tapiero

2 0
 nació el 27 de Dic de 19990, 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).

3.2. Creación de la interfaz

● Se desea elaborar una pantalla que permita validar la autenticidad de un
usuario.

08

Diagrama de flujo

2 0
● Se desea elaborar una pantalla que permita ingresar nombres, apellidos, cédula, fecha
de nacimiento de un usuario.

09

Diagrama de flujo

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

10

Diagrama de flujo

2 0
● Proponer la paleta de colores de los componentes anteriores utilizando como máximo la
combinación de tres colores.

Paleta de colores:

11

3.3. Requerimientos funcionales

2 0
 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 de requisitos (encuesta)
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
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 o el recogerlo en la tienda
Puedes elegir el tipo de producto que quieres.
Puede escoger la prenda de vestir, talla, color, diseño.
Carrito de compras

Esta sería el área del carrito con las opciones de compra y medios de pago
más comunes disponibles.

3.4. 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 (cliente)
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
12

2 0
 3.5. Requisitos no funcionales

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 de los 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.

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.

2 0
Se lleva a cabo mantenimiento de la página
Un producto de software no se destruye, pero se desgasta, por lo tanto, algunos
apartados deberán requerir mantenimiento al cabo del algún tiempo.

13

2 0
 4. Reglas de usabilidad y accesibilidad

4.1. Reglas de usabilidad

- 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.
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: 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.

4.2. 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.

14

2 0
 - Ceder el control al usuario: 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.

15

2 0