Sistema de Gestión de Tienda Mixta (SGTM)

“República de israel”

Kevin Franco, Leidy Rivera & Juan Tello.

Mayo 2018.

Universidad del Valle.

Escuela de ingeniería en sistemas y computación.
Diseño de interfaces de usuario
 2

Resumen

El siguiente documento expone la organización de la información en la aplicación móvil

desarrollada para la tiend mixta “República de Israel”, así como el mapa de navegación,

iconografía, tipos de letra y colores utilizados. Adicionalmente, este documento incluye

las pruebas de accesibilidad realizadas a la aplicación y sus resultados, así como la

prueba de usabilidad realizada a la clienta.

 3

Tabla de Contenidos

Mapa de navegación de la aplicación 7

Diseño y organización del contenido 7

Tipos de letra 7
Colores estándar 7
Barra de navegación superior 7
Botones 7
Fondo 7
Interfaces 8
Proveedores 9
Deudores 13
Productos 16
Iconografía 18

Mensajes de ayuda, información, alerta y errores 20

Mensajes de ayuda 20
Mensajes de información 20
Mensajes de error 21

Elementos de validación y verificación de datos 21

Prueba de accesibilidad con Accessibility Scanner 22

Prueba de accesibilidad de las diferentes interfaces 23
Prueba de Usabilidad 26
Resultados 26
 4

Lista de figuras

Figura 1. Interfaz ​principal del sistema 7

Figura 2. Interfaz de módulo de proveedor​es 8

Figura 3. Interfaz de detalle de proveedor​es 8

Figura 4. Interfaz de agregar proveedor 9

Figura 5. Interfaz de detalle de proveedores con mensaje de notificación 10

Figura 6. Interfaz de información de un proveedor 11

Figura 7. Interfaz de edición de información de un proveedor 11

Figura 8. Interfaz de realizar pedido a un proveedor. 12

Figura 9. Interfaz de historial de pedidos. 12

Figura 10. Interfaz de deudores. 13

Figura 11. Interfaz de agregar deudor. 13

Figura 12. Interfaz de información de un deudor. 14

Figura 13. Interfaz de historial de transacciones de un deudor. 14

Figura 13. Interfaz de abonar. 15

Figura 14. Interfaz de deuda. 15

Figura 16. Interfaz de productos 16

Figura 17. Interfaz de agregar un producto 16

Figura 18. Interfaz de información de un producto 17

Figura 19. Icono de deudores. 18

Figura 20. Icono de proveedores. 18

Figura 21. Icono de productos. 18

 5

Figura 23. Icono de editar. 19

Figura 24. Icono de abonar. 19

Figura 25. Icono de deuda. 19

Figura 26. Icono de límite. 19

Figura 27. Icono de saldo. 19

Figura 28. Icono de detalle de proveedores. 19

Figura 29. Icono de historial de pedidos. 20

Figura 30. Mensaje de información de actualización exitosa. 20

Figura 31. Mensaje de información de borrado exitoso de un producto. 20

Figura 32. Mensaje de información de registro exitoso. 20

Figura 33. Mensaje de confirmación de borrado. 21

Figura 34. Mensaje de error de número de teléfono incompleto. 21

Figura 35. Mensaje de error, no se puede abonar una cantidad mayor al saldo. 21

Figura 36. Prueba de accesibilidad interfaz agregar proveedor 23

Figura 37. Prueba de accesibilidad interfaz editar producto 23

Figura 38. Prueba de accesibilidad interfaz productos 24

Figura 39. Prueba de accesibilidad interfaz deudores 24

Figura 41. Captura de pantalla prueba de usabilidad 26

 6

Mapa de navegación de la aplicación

Por cuestiones de tamaño y visibilidad, el mapa de navegación de la aplicación se adjunta

a esta entrega en un archivo formato pdf.

Diseño y organización del contenido

En esta parte del documento se incluyen imágenes del diseño y organización de los
componentes contenidos en la aplicación desarrollada para la tienda mixta “República de
Israel” como son productos, proveedores y deudores. Así como capturas de pantalla de
las interfaces de la aplicación y sus especificaciones.

Tipos de letra

Títulos: Arial 16, negrita, primera letra en mayúscula, color negro.

Formularios: Arial 14, normal, primera letra en mayúscula, color negro.

Botones: Arial 18, negrita, mayúscula, color negro.

Colores estándar

Los colores utilizados en la aplicación fueron exigidos por la clienta. Son los siguientes:

Barra de navegación superior

Botones

Fondo
 7

Interfaces de la aplicación

Figura 1. Interfaz de pantalla principal

En la interfaz principal de la aplicación, podemos ver que se tiene el menú de acceso a los
3 módulos del sistema como es el módulo de proveedores, módulo de deudores y módulo
de productos, ordenados en base a decisión de la clienta. Cada módulo ubicado en el
menú tiene su respectivo ícono asociado, aprobado por la clienta, así como en la parte
inferior se incluye un icono alusivo a la tienda. Dentro de cada módulo se encuentran las
funcionalidades correspondientes a ellos.
 8

Interfaces módulo de proveedores

Figura 2. Interfaz de módulo de proveedores

En la interfaz del módulo de proveedores, se incluyen dos botones que despliegan

funcionalidades como son, el listado de los proveedores y el historial de los pedidos
realizados a los proveedores. Cada botón tiene su ícono correspondiente asignado. En la
barra de navegación superior, se incluye una flecha que redirige a la pantalla principal.

Figura 3. Interfaz de detalle de proveedores

 9

En la interfaz de detalle de proveedores, se tiene el listado de los proveedores registrados,

ordenados en lista dependiendo de la fecha en la que fueron añadidos. En la parte
superior tiene una barra de búsqueda y en la barra de navegación tiene el botón de
Agregar que nos permitirá añadir un nuevo proveedor.

Figura 4. Interfaz de agregar proveedor

En la interfaz de agregar proveedor, se tiene un formulario simple, con los campos

necesarios para registrar un proveedor de la tienda.

Figura 5. Interfaz de detalle de proveedores con mensaje de notificación

 10

Después de completar el formulario con los datos del proveedor, la aplicación volverá a
la pantalla de listado de proveedores, donde podremos ver de primero en la lista de
proveedores, el proveedor que agregamos. En la parte inferior de la aplicación se podrá
visualizar un mensaje de notificación de registro exitoso.

Figura 6. Interfaz de información de un proveedor

Al ingresar a un proveedor en específico, podemos ver toda su información almacenada.

En la barra de navegación superior está el ícono con la opción de editar la información
del proveedor y en la parte inferior, un botón que permite registrar un pedido asociado a
este proveedor.

Figura 7. Interfaz de edición de información de un proveedor

 11

Al seleccionar el ícono de edición, el formulario de información del proveedor se vuelve

editable. El formulario cuenta con restricción de largo del número de contacto del
proveedor. Si no se cumple con el largo de 7 caracteres, se mostrará un mensaje de aviso
y no dejará guardar los cambios.

Figura 8. Interfaz de realizar pedido a un proveedor.

En esta interfaz de pedido, hay un formulario sencillo con el día de entrega del producto,
el producto y la cantidad de ese producto para hacer el pedido. Sólo se mostrarán los días
de entrega y productos asociados a ese proveedor. A un lado se muestra el valor total del
pedido, se agregan los productos a pedir y en la barra superior, está el botón de listo, el
cual realiza el pedido de los productos agregados.

Figura 9. Interfaz de historial de pedidos.

 12

En la interfaz del historial de pedidos, se muestran todos los pedidos que se han realizado
con su respectiva fecha, proveedor y el total a pagar.

Interfaces módulo de deudores

Figura 10. Interfaz de deudores.

En la interfaz de deudores, se despliega el listado de los deudores que están registrados.

En la barra de navegación superior está el botón de agregar un deudor.

Figura 11. Interfaz de agregar deudor.

 13

En la interfaz de agregar deudor, se muestra un formulario sencillo con los campos

necesarios para registrar un deudor y el botón de registrar.

Figura 12. Interfaz de información de un deudor.

En la interfaz de información de un deudor, podemos ver su información registrada. En la

parte inferior el botón de abonar permite que se le abone dinero a la deuda y el botón
deuda permite agregar más saldo de deuda. En la barra de navegación superior está el
botón de editar que habilita los campos del formulario del deudor para edición y el botón
de más opciones, del cual sale el historial de transacciones (abonos, deudas) de un
deudor.

Figura 13. Interfaz de historial de transacciones de un deudor.

En esta interfaz podemos ver los movimientos de abono, deuda de un deudor de la tienda.
 14

Figura 13. Interfaz de abonar.

Figura 14. Interfaz de deuda.

En las dos interfaces presentadas anteriormente, se muestra una ventana para ingresar el
valor de abono o deuda respectivamente.

Interfaces de módulo de productos

 15

Figura 16. Interfaz de productos

En esta interfaz de productos, podemos ver el listado de los productos que se tienen
registrados, así como filtrarlos por proveedor mediante el desplegable que se encuentra
en la parte superior de la lista, o buscarlos haciendo uso de la barra de búsqueda. En la
barra superior de navegación está el botón de agregar un producto.

Figura 17. Interfaz de agregar un producto

En este formulario, se selecciona el proveedor al cual se le va a asociar el producto, se le
coloca un nombre, un valor y se selecciona su categoría.
 16

Figura 18. Interfaz de información de un producto

En la interfaz de información de un producto, se muestra toda la información registrada

de un producto. En la barra de navegación superior se muestra el ícono de editar y el
ícono de borrar. El ícono de editar habilita todos los campos del formulario del producto
para editarlos y el ícono de borrar, muestra una ventana de confirmación de borrado.

Iconografía

En la iconografía que usa la aplicación de la tienda mixta “República de Israel”, se hace

uso de las metáforas que más se ajustan al contexto de la aplicación, además de que
 17

fueron aprobadas por la clienta. Cabe resaltar que la totalidad de íconos son de uso libre
(Open Source).

Figura 19. Icono de deudores.

Para este ícono no se utilizó ninguna metáfora pero la clienta lo seleccionó ya que, una
persona y dinero lo asocia con un deudor.

Figura 20. Icono de proveedores.

Este ícono de proveedor, fue sacado de una página de íconos y tenía como nombre
proveedor. A la clienta le gustó ya que le parece que lo representa bien.

Figura 21. Icono de productos.

Este ícono utiliza la metáfora de una canasta de compras con productos adentro.

Figura 22. Icono de agregar.

Para este ícono, el cual siempre se ubica en la barra de navegación, se utiliza la metáfora
del “más” para agregar.

Figura 23. Icono de editar.

Para este ícono, el cual siempre se ubica en la barra de navegación, se utiliza la metáfora
del lápiz que se asocia con editar.
 18

Figura 24. Icono de abonar.

Este ícono utiliza la metáfora de una mano recibiendo dinero, la cual asociamos con que
el deudor abona dinero a su deuda.

Figura 25. Icono de deuda.

Este ícono utiliza la metáfora de una bolsa con dinero, la cual se asocia a la deuda del
cliente.

Figura 26. Icono de límite.

Este ícono utiliza la metáfora de una mano en “stop” que indica que ahí debe parar su
deuda.

Figura 27. Icono de saldo.

Este ícono utiliza la metáfora de monedas para representar el dinero o saldo.

Figura 28. Icono de detalle de proveedores.

Este ícono no utiliza una metáfora pero la clienta lo eligió para el listado de proveedores.

Figura 29. Icono de historial de pedidos.

 19

Este ícono utiliza la metáfora de un documento con un reloj de arena para representar el
tiempo, lo cual se asocia bien a un historial.

Mensajes de ayuda, información, alerta y errores

A continuación, se mostrarán los diferentes tipos de mensajes que utiliza la aplicación.

Todos serán implementados usando los mensajes por defecto de AndroidStudio.

Mensajes de ayuda

Muestran una breve descripción de lo que el usuario puede realizar en las interfaces del
sistema. Ninguno ha sido implementado hasta el momento.

Mensajes de información

Los mensajes de información le indican a la usuaria cuando una operación en el sistema

se completó satisfactoriamente. Se verán de la siguiente manera:

Figura 30. Mensaje de información de actualización exitosa.

Figura 31. Mensaje de información de borrado exitoso de un producto.

Figura 32. Mensaje de información de registro exitoso.

Mensajes de alerta

Los mensajes de alerta son implementados en procesos de borrado de registros, los cuales
se verán de la siguiente manera:
 20

Figura 33. Mensaje de confirmación de borrado.

Mensajes de error

Los mensajes de error se mostrarán cuando la aplicación tenga alguna situación errónea
que puede ser por entrada de datos o falla de la aplicación. Ninguno se ha implementado
hasta el momento.

Elementos de validación y verificación de datos

Se validará mediante mensajes de aviso a la usuaria que le indicarán el error en el ingreso

del dato. Se verificarán campos de sólo texto, sólo números, cantidad mínima/máxima de
caracteres, etc. Adicional a los mensajes, la aplicación no le permitirá guardar los
registros hasta que los datos cumplan con todas las restricciones. Hasta el momento se
han implementado los siguientes:

Figura 34. Mensaje de error de número de teléfono incompleto.

Figura 35. Mensaje de error, no se puede abonar una cantidad mayor al saldo.
 21

Prueba de accesibilidad con Accessibility Scanner

Accessibility Scanner es una app gratuita para Android que Google lanzó en marzo de
2016

Es el primer validador automático de accesibilidad para apps de Android y permite

escanear cualquier aplicación que tengamos instalada en el móvil.

Su objetivo es ofrecer propuestas de mejora de accesibilidad para las aplicaciones, pero

en ningún caso sustituye a una evaluación manual ni garantiza que una aplicación sea
accesible.

Como veremos, no realiza validaciones de acuerdo a una norma concreta, solo evalúa
automáticamente un número reducido de aspectos relacionados con la accesibilidad de la
aplicación. A pesar de ello puede ser una ayuda muy útil.

Actualmente solo está disponible en inglés y solo para móviles y tablets con Android 6.0
o superior. No requiere ningún permiso especial para su instalación.
 22

Prueba de accesibilidad de las diferentes interfaces

Agregar proveedor

Figura 36. Prueba de accesibilidad interfaz agregar proveedor

Editar producto

Figura 37. Prueba de accesibilidad interfaz editar producto

 23

Productos

Figura 38. Prueba de accesibilidad interfaz productos

Deudores

Figura 39. Prueba de accesibilidad interfaz deudores

 24

Prueba de accesibilidad de las diferentes interfaces después de corregir los errores

Figura 40. Prueba de accesibilidad después de corregir los errores

 25

Prueba de Usabilidad

Se realizó la prueba de usabilidad con el cliente de aplicación, para ello se utilizó el

método del conductor y la herramienta DU Recorder, Adjuntamos el enlace del video y el
guión de tareas en la descripción del video.

Nota​: oprimir donde dice “MOSTRAR MÁS” resaltado en amarillo para ver la
descripción completa y el guión”

Figura 41. Captura de pantalla prueba de usabilidad

Enlace a vídeo: ​https://www.youtube.com/watch?v=GNS9cD_nFkM

Resultados

La clienta se ha notado muy satisfecha con la aplicación, los gesticulación facial muestra
su agrado con el sistema, y el tiempo de respuesta de las tareas de la aplicación ha sido el
esperado. Le ha agradado la sencillez y el buen entendimiento de la interfaz de usuario, y
no ha encontrado dificultad alguna en las tareas asignadas en el guión.