Diseño Interfaz para Aplicacion Movil Utilizada Cafeterias

Tecnológico de Costa Rica
Escuela de Ingeniería en Diseño Industrial
DISEÑO DE INTERFAZ PARA APLICACIÓN

MÓVIL UTILIZADA EN CAFETERÍAS
Proyecto de Graduación para optar por el título de Ingeniería

en Diseño Industial, grado académico Bachillerato
Valeria Rodríguez Gutiérrez
Cartago, I Semestre 2018

Tabla de contenidos
1. Introducción_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 4
1.1 Introducción_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 5
1.2 Descripción de la empresa_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 6
2. Antecedentes_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 7
2.1 Problemática_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 8
2.2 Análisis del software actual | meseros_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 10
2.3 Problema | meseros _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 13
2.4 Análisis del software actual | administrador _ _ _ _ _ _ _ _ _ _ _ _ _ _ 17
2.5 Problema | administrador_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 22
3. Objetivos _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 26
3.1 Objetivo general y objetivos específicos _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 27
3.2 Alcances y limitaciones_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 28
4. Marco teórico _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 29
4.1 Usabilidad en aplicaciones móviles_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 30
4.2 Consideraciones en el diseño de interacción _ _ _ _ _ _ _ _ _ _ _ _ _ 31
4.3 Experiencia de usuario UX _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 38
4.4 Principios de diseño_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 39
5. Marco metodológico _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 40
5.1 Marco metodológico _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 41
5.2 Plan de trabajo _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 44
6. Desarrollo del proyecto _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 45
Plataforma meseros
6.1 Investigación previa _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 48
6.2 Análisis de referenciales_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 49
6.3 Tabla de mínimos comunes_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _55
6.4 Análisis de usuarios _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 57
Tabla de contenidos
6.5 Arquitectura Alfa _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 60

6.6 Card sorting _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 61
6.7 Arquitectura alfa 1.2 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 63
6.8 Navigation paths _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 64
6.9 Wireframes _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 65
6.10 Paper prototyping _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 70
6.11 Arquitectura beta _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 73
6.11 Wireframes 1.2 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 74
6.12 Look and fell _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 76
6.13 Prototipo _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 82
Plataforma administración
6.14 Investigación previa _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 92
6.15 Análisis de referenciales _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 93
6.16 Tabla de mínimos comunes_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 108
6.17 Análisis de usuarios _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 109
6.18 Arquitectura alfa _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 112
6.19 Card sorting _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 113
6.20 Arquitectura alfa 1.2 _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 114
6.20 Navigation paths _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 115
6.21 Wireframes _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 117
6.22 Paper prototyping _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 122
6.23 Look and feel _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 124
6.24 Prototipo_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 128
7. Conclusiones y recomendaciones_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 135

7.1 Conclusiones _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 136
7.2 Recomendaciones _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 138
8. Referencias bibliográficas_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 139

01 Introducción
1.1 Introducción
Actualmente en Costa Rica las cafeterías tienen un gran auge debido a la

alta calidad del café nacional, con el paso del tiempo aumenta el número de
personas interesadas en ir a degustar un buen café y pasar un buen rato.
Al mismo tiempo los sistemas electrónicos y tecnológicos se encuentran

en crecimiento dejando de lado los sistemas convencionales utilizados
para la solución de una gran cantidad de problemas. Dentro de las nuevas
alternativas se encuentran las aplicaciones, estas cada vez se vuelven más
útiles en el manejo de datos debido a que agilizan los procesos, guardan
información por mucho tiempo, generan estadísticas importantes sobre el
comportamiento de las empresas, son eco amigables, entre otros beneficios
que facilitan el trabajo humano, por esta razón día a día aumentan los
interesados en manejar sus procesos por medio de este tipo de softwares.
En el mercado existen gran cantidad de ofertas para el desarrollo de estas,

sin embargo, para optimizar su uso se deben de identificar cada una de
las necesidades con que cuentan los clientes y de esta manera generar un
diseño que se adapte y satisfaga de manera efectiva dichas necesidades, de lo
contrario el resultado puede no ser el esperado.
Debido a esto las empresas dedicadas a la venta de café preparado necesitan

un medio que permita agilizar sus procesos, tener un control de las ventas,
insumos, cantidad de personas que visitan el local, entre otros aspectos.
El diseño de una aplicación podría satisfacer estas necesidades para
proporcionar un mejor control de su empresa al cliente.
El presente proyecto es el diseño de una interfaz para aplicación móvil de

cafeterías, este se va a desarrollar en conjunto con la empresa TS Solutions.
5
1.2 Empresa TS Solutions
La empresa TS Solutions ofrece servicios de tecnología de información,

solucionando por medio de herramientas de software, todo tipo de proyectos.
Esta empresa vio la necesidad presente en las cafeterías de optimizar los

procesos productivos por este motivo se encuentra desarrollando un software
que satisfaga dichas necesidades. Actualmente está iniciando un proyecto
implementado dentro de las cafeterías Privilegios que pertenecen a la
cooperativa de Coopedota.
6
02 Antecedentes
2.1 Problemática
Cafeterías Privilegios - Sección de inventarios, por medio el estado financiero de la empresa.

de una plataforma se agregan las
La empresa Coopedota cuenta con compras diarias de insumos para el - Unificó los cuatro departamentos,
una red de cafeterías a nivel nacional local, estos insumos se rebajan de los cuales son meseros, baristas,
las cuales se dedican a la venta de acuerdo a cada venta registrada, cocina y caja, por medio de una
café preparado con los más altos dando un informe exacto del plataforma utilizada en tablets
estándares de calidad, para dar a inventario presente en la cafetería, por los meseros para realizar
conocer tanto en el mercado nacional además de cada uno de los gastos los pedidos, este pedido sale en
como internacional la calidad y por producto. comandas presentes en la cocina y
variedad del café ubicado en la Zona área de baristas para la preparación
de los Santos, más específicamente el -Proveedores, el software cuenta con inmediata del producto y finalmente
cantón de Dota. una sección donde se visualizan los el mismo sale en la sección de cajas
proveedores con los que se cuenta y para que los clientes se dirijan a
Actualmente cuenta con tres cada una de los productos adquiridos pagar cuando lo deseen, agilizando el
cafeterías ubicadas en Santa María con su respectivo monto y fecha de proceso antes descrito.
de Dota, Cartago y San José, las compra, esto con el fin de llevar un
cuales ofrecen a sus clientes toda control de gastos. -Por medio de la facturación genera
una experiencia acompañada de una lista de clientes que han visitado
una taza de café, además cuentan - Ventas, el sistema lleva un control de el local con datos como el teléfono
con repostería productos artesanales todas las ventas realizadas por fecha, celular y correo electrónico, esto con
elaborados en la Zona de Los Santos y dando un detalle de cada uno de los el fin de crear una base de datos.
cocina gourmet. productos vendidos y monto total,
esto facilita tanto el control entre - Genera un estado financiero
Problemática lo que se ha vendido y el inventario mensual, dando
existente, en caso de existir faltantes. datos de entradas netas mensuales.
Actualmente la empresa TS Solutions
implementó un software en las - Informe diario, se proporciona una Sin embargo dentro de este sistema
cafeterías Privilegios, dicho sistema tabla en la cual se visualizan las se detectan dos problemas existentes:
emplea gran cantidad de información compras, ventas, regalías, rebajas y
a la empresa como lo es: servicio de meseros, dando como Uno está presente en la plataforma
resultado final las entradas netas de toma de pedidos utilizada en las
diarias, esto permite ver parcialmente tablets por los meseros, la disposición
8
2.1 Problemática
de la información en la interfaz movilizarse de una cafetería a otra

no es la más adecuada ya se debe durante la semana se dificulta su
buscar cada uno de los productos uso, por lo tanto se decide también
por medio de un buscador, no implementar una aplicación móvil
existe separación por categorías, para ser instalada en el teléfono
además es un sistema web, no una celular y que desde este dispositivo
aplicación, ocasionando retrasos en se puedan visualizar datos de
la toma de pedidos debido a que se importancia de una forma más rápida
vuelve muy lento, además no existe y fácil, con el fin de sacar un mejor
un visualizador de mesas ocupadas provecho del software ya ejecutado.
generando equivocaciones por parte
de los meseros, no hay una pantalla
de confirmación de pedido que evite
equivocaciones antes de enviar a
comandas, lo cual genera pérdidas
de inventario a la empresa, debido
a que la única forma es cancelar la
orden que muchas veces ya se ha
iniciado la preparación y no exige al
mesero indicar la cantidad de clientes
por pedido, dando resultados poco
verídicos sobre cantidad de clientes
que visitan el local.
El otro problema existente es

respecto a la visualización de
datos que genera el sistema para
la administradora, esto ya que
la única plataforma disponible
para visualizarlos es por medio de
la computadora y debido a que
presenta la necesidad de
9
2. 2 Análisis del Software Actual | meseros
2.2.1 Interfaz meseros
Nuevo pedido A presionar elegir producto aparece la pantalla
Mesa
Cantidad
Cant. Clientes
Buscar por código
Buscar por nombre
Elegir producto
Cant. Productos
Detalle del producto
Precio producto
Anotaciones
Agregar producto
Imagen 1 Imagen 2
Interfaz meseros 1 Interfaz meseros 2
(Fuente: TS Solutions) (Fuente: TS Solutions)
10
2.2.2 Cantidad de clicks para realizar un pedido
4
1
Imagen 3 Imagen 4
Interfaz meseros 1 cantidad de clicks Interfaz meseros 2 cantidad de clicks
11
Problemas encontrados
-No existe la opción de dividir mesa. confirmación antes de enviar los

productos seleccionados a las
-Los productos no se dividen por comandas.
categorías.
-Se deben realizar 6 clics para
-Para agregar un producto se debe ingresar un producto a el pedido.
realizar por medio de un buscador, lo
cual no es mediático.
-Es un sistema web, no una aplicación

lo cual provoca que al realizar la
búsqueda en todos los productos
existentes se tarde unos segundos,
retrasando la toma del pedido.
-No existe la opción de agregar

productos a los pedidos existentes.
-No se pueden visualizar las mesas

ocupadas, lo cual genera problemas
en las listas de pago ya que existen
equivocaciones al anotar la mesa por
medio de los saloneros.
-Se presenta gran cantidad de

información en una pantalla, lo cual
puede confundir al usuario.
-No existe un mensaje de
12
2. 3 Problema | meseros
2.3.1 Journey map
Se presentan tres personajes, el

cliente, el mesero y el cajero.
Se explica paso a paso cada una de

las actividades que estos realizan
dentro de la cafetería con el fin de
determinar cuáles son los principales
problemas relacionados con el
software existente y de esta manera Cliente Mesero Cajero
buscar una solución óptima.
Imagen 5 Imagen 6 Imagen 7

Cliente Mesero Cajero
(Fuente: elaboración propia) (Fuente: elaboración propia) (Fuente: elaboración propia)
13
1. Entrada al local 2. Elección de mesa 3. Atención del mesero

Entrada al local Elección mesa Atención mesero
(Fuente: elaboración (Fuente: elaboración (Fuente: elaboración
propia) propia) propia)
Objetivo Objetivo Objetivo
Cliente: dirigirse a un lugar donde pueda comprar Cliente: tomar una mesa disponible dentro de Cliente: elegir que se va a comer.
Mesero: llevar el menú a el cliente.
comida, debido a que tiene hambre. local para ser atendido.
Mesero: disponerse a atender a el nuevo cliente Mesero: iniciar el ingreso de los datos del cliente ¿Qué hace?
que ha ingresado. como la mesa en la cual se hubica.
Cliente: leer el menú.
¿Qué hace? ¿Qué hace? Mesero: llevar el menú y esperar a que el cliente se
decida.
Cliente: entrar a la cafetería a comprar un café y Cliente: sentarse en la mesa 1.
repostería. Mesero: dentro del sistema buscar la mesa uno e ¿Qué funciona?
Mesero: tomar su tablet e ingresar a el sistema. indicar la cantidad de clientes ubicados en esta
Cliente: el menú está bien organizado y con letra legible.
mesa. Mesero: hay gran cantidad de menús por lo que se
¿Qué funciona? puede atender a el cliente rápidamente.
¿Qué funciona?
Cliente: la cafetería presenta la debida rotulación ¿Emociones que experimenta?
invitando a sus clientes a entrar. Cliente: había mesas desocupadas por lo que se
Mesero: el ingreso al sistema se realiza de forma pudo sentar fácilmente y sin esperar. Cliente: -satisfacción a el ver los productos que afrecen.
intuitiva. Mesero: ubica las mesas dentro del sistema con Mesero: -satisfacción debido a que pudo llevar el menú
rápidamente
facilidad.
¿Qué no funciona?
¿Qué no funciona?
Mesero: el sistema tarda unos minutos en entrar.
Mesero: el sistema no indica cuales mesas están
¿Emociones que experimenta? ocupados ocasionando errores en la inscripción.
Cliente: -alegría debido a que por fin va a poder ¿Emociones que experimenta?
comer.
Mesero: - frustración ya que le sistema no ingresa Cliente: -alegría debido a que se sentó
rápido. rápidamente.
Mesero: -confusión ya que no sabe con certeza si
esta mesa está desocupada.
14
4. Pedir comida 5. Comer 6. Pagar

Pedir comida Comer Pagar
(Fuente: elaboración (Fuente: elaboración (Fuente: elaboración
propia) propia) propia)
Cliente: pedir los productos que eligió para comer. Cliente: Comer los alimentos que le llevaron. Cliente: dirigirse a la caja a pagar
Mesero: ingresar al sistema y tomar la orden. Mesero: llevar los alimentos preparados al cliente. Cajero: atender al cliente.
¿Qué hace? ¿Qué hace? ¿Qué hace?
Cliente: llama al mesero y le indica lo que desea Cliente: Comer. Cliente: Hacer fila en la caja.
comer. Mesero: Llevar los alimentos a la mesa Cajero: buscar la orden de acuerdo a la mesa e
Mesero: ingresar al sistema para tomar la orden. indicar monto a cancelar.
¿Qué funciona?
¿Qué funciona? ¿Qué no funciona?
Cliente: la comida es de buena calidad.
Cliente: el mesero llega rápido a atenderlo. Mesero: la comida la preparan rápidamente. Cliente: la fila tarda mucho indisponiendo a los
Mesero: el mesero ya ingresó los datos del cliente clientes ya que pierden mucho tiempo.
al sistema previamente. ¿Emociones que experimenta? Cajero: si hubo una equivocación por parte del
mesero al ingresar la mesa se tarda mucho en
¿Qué no funciona? Cliente: -satisfacción debido a que la comida es de saber que productos corresponden a cada cliente,
la calidad esperada. si el cliente pide dividir la cuenta se tarda debido
Mesero: el sistema tarda mucho en la inscripción a que no existe la opción de dividir cuenta en la
de productos a comandar, ocasionando retrasos y toma de pedidos y esto se debe hacer en la caja.
molestias en el cliente.
¿Emociones que experimenta?
Cliente: -enojo ya que pierde mucho tiempo en
Cliente: -enojo debido a que tarda demasiado cajas.
tomando la orden. Cajero: -fustración debido a que no es culpa del
Mesero: - frustración ya que no puede atender cajero si no del sistema que no pueda realizar
rápidamente al cliente rápidamente su trabajo.
-Preocupación debido a que le cliente va a
presentar una queja y la administradora se va a
molestar.
15
2.3.2 Problema
La dispocisión de la
información en la
plataforma genera retrasos No hay un visalizador de mesas ocupadas, lo cual genera problemas debido a que los saloneros en
y errores en los pedidos ocaciones anotan varias listas en una misma mesa.
No existe la opción de dividir mesa, lo cual ocaciona problemas de pago en caja.
Al ser un sistema web y no una aplicación se pega ocacionando retrasos en la toma de pedidos.
16
2. 4 Análisis del Software Actual | administración
2.2.4 Interfaz de la administradora
Inventario de productos que ofrece la Detalle del producto Detalle de la receta del producto
cafetería compuesto

Interfaz administrador inventario de productos Interfaz administrador detalle del producto (Fuente: TS Solutions) Interfaz administrador detalle receta
En este se puede visualizar todos Se visualiza a mayor detalle la Se incluyen todas las recetas de
los productos que se ofrecen para la información de cada uno de los productos, esto para llevar un
venta y sus características. los productos como costeo, control de inventario, de acuerdo a la
configuración de venta, movimiento receta con cada pedido se reducen
del producto, bodega y más. gradualmente los insumos con que
se cuenta, de igual forma sucede
con productos que se compran ya
preparados como la repostería o
la venta de bolsas de café molido
empacado, según cada compra se
reduce una unidad.
17
Facturación Informe diario de ventas Informe detallado de ventas

Interfaz administrador facturación Interfaz administrador informe de ventas Interfaz administrador informe detallado ventas
(Fuente: TS Solutions) (Fuente: TS Solutions) (Fuente: TS Solutions)
Se visualizan las órdenes sin cancelar Al realizar el cierre de cajas se genera Se puede observar con más detalle
y se procesa el cobro de cada una de un informe diario de ventas. cuales fueron las ventas realizadas
estas, emitiendo posteriormente una durante el día.
factura.
18
Listado de facturas Detalle de facturas Lista de clientes

Interfaz administrador listado de facturas Interfaz administrador detalle de facturas Interfaz administrador lista de clientes
Observar detalladamente todas las Observar con más detalle los datos de Consulta de todos los clientes que
facturas emitidas de acuerdo a las cada una de las facturas. han visitado la cafetería con datos
ventas por fecha. como teléfono y correo electrónico.
19
Órdenes de compra Resumen diario de inventario Lista de proveedores

Interfaz administrador órdenes de compra Interfaz administrador resumen diario de inventario Interfaz administrador lista de proveedores
Se pueden consultar todas las Visualizar todos los gastos diarios de Consultar todos los proveedores
compras de inventario, ver proveedor, inventario de acuerdo a cada pedido. con que se cuenta y su respectivo
producto adquirido y monto pagado. contacto e información detallada.
20
2.2.4 Cantidad de clicks | Visualizar productos vendidos
Se debe de realizar un total de 5 clicks para ingresar a la información, en este

caso se se desea visualizar los productos vendidos, pero se repite el mismo
procedimiento para cada de los demás datos que genera el sistema.
4
1
Imagen 26
Interfaz administrador cantidad de clicks
(Fuente: TS Solutions)
21
2. 5 Problema | administración
2.5.1 Journey map
Se presenta el personaje del

administrador y las actividades que
este realiza a lo largo del día con el
fin de determinar los problemas a
los que se enfrenta con respecto al
software existente.
El administrador debe trabajar en 3

cafeterías, una se ubicada en la Zona
de Los Santos, otra en Cartago y la
última en San José, lo cual lo obliga
a movilizarse constantemente de Administrador
un lugar a otro durante la semana, Imagen 26
generando la necesidad de tener Administrador
(Fuente: elaboración propia)
un sistema de acceso remoto para
obtener información de importancia.
22
1. Visualizar inventario 2. Resumen diario de ventas 3. Visualizar productos vendidos

Visualizar inventario resumen diario de ventas Visualizar productos
(Fuente: elaboración propia) (Fuente: elaboración propia) (Fuente: elaboración propia)
Visualizar el inventario existente. Visualizar el estado financiero (entradas, salidas, Visualizar que productos se vendieron durante el
total) de la empresa. día, que productos se venden más y cuales son de
¿Qué hace? menor venta para crear estrategias de mercadeo.
¿Qué hace?
Entrar al sistema por medio de una computadora. ¿Qué hace?
Entrar al sistema por medio de una computadora.
¿Qué funciona? Entrar al sistema por medio de una computadora.
¿Qué funciona?
El inventario se puede visualizar. ¿Qué funciona?
El sistema provee esta información.
¿Qué no funciona? El sistema provee esta información.
¿Qué no funciona?
El inventario es de difícil acceso, se puede ¿Qué no funciona?
visualizar únicamente por medio de una La información es de difícil acceso y no existen
computadora, no existen notificaciones de resúmenes diarios, semanales y mensuales para La información es de difícil acceso, no se
productos pronto a agotarse. generar un estado financiero parcial. genera información de forma gráfica para
una visualización más rápida y de mejor
¿Emociones que experimenta? No existe una visualización gráfica de entendimiento, no existe una división de
esta información para generar un mayor productos por categorías lo que genera largas
Frustración: debido a que no puede visualizar con entendimiento de los datos. listas de productos vendidos dificultando la
rapidez el inventario del negocio. visualización de datos.
Enojo: debido a que no puede visualizar un estado
financiero rápido, ni visualizar los datos de forma Enojo: debido a que debe sacar gran cantidad de
gráfica. tiempo para obtener esta información.
23
4. Cantidad de clientes 5. Visualizar compras
Imagen 30 Imagen 31
Cantidad de clientes Visualizar compras
(Fuente: elaboración propia) (Fuente: elaboración propia)
Objetivo Objetivo
Visualizar que días hay mayor tránsito de personas Visualizar compras que se realizaron, que
en el local. proveedores suplieron el local.
¿Qué hace? ¿Qué hace?
Entrar al sistema por medio de una computadora. Entrar al sistema por medio de una computadora.
¿Qué funciona? ¿Qué funciona?
El software provee esta información. El software provee esta información.
¿Qué no funciona? ¿Qué no funciona?
No existe una visualización gráfica y de fácil acceso La información es de difícil acceso

de la información.
Enojo: debido a que la información es de difícil
Frustración: debido a que no puede visualizar con acceso y demanda mucho tiempo además de
facilidad que días hay mayor cantidad de clientes. necesitar una computadora para este objetivo.
24
2.5.2 Problema
La única plataforma para visualizar datos es por medio de una computadora lo cual se torna difícil
debido a que la administradora se debe estar movilizando de una cafetería a otra constantemente.
La plataforma actual presenta problemas de

arquitectura de información y condiciona a la Existen datos de gran importancia para la administradora los cuales son de difícil acceso debido a la
administradora a visualizar los datos en una gran cantidad de información que genera el sofware.
computadora.
Actualmente no se generan estadísticas sobre cantidad de clientes que visitan el local.
25
03 Objetivos
3.1 Objetivos
Objetivo general
Diseñar una interfaz para cafeterías que permita un fácil registro de pedidos
para los meseros y acceso remoto a datos sobre ventas e inventario para el
administrador.
Objetivos específicos
-Diseñar una interfaz intuitiva que facilite el uso de la aplicación a los

empleados y disminuya la curva de aprendizaje.
-Organizar los datos de mayor a menor importancia para ser presentados

dentro de la interfaz y así optimizar su uso.
-Disminuir los errores de registro de pedidos empleando una correcta

visualización de datos.
-Diseñar una plataforma para ser utilizada en celulares con el fin de facilitar el
acceso a datos importantes para la administradora.
- Definir datos de importancia para la administradora y presentarlos de forma

sencilla.
27
3.2 Alcances y Limitaciones
Alcances
En el desarrollo del proyecto se van a seguir la metodología planteada a

continuación:
1. investigación previa
2. análisis de referencia o benchmarking
4. arquitectura alfa
5. card sorting:
6. navigation-path
7. wireframes
8. paper prototyping:
9. arquitectura ß
10. look & feel
11. mockup
Limitaciones
Poca disponibilidad por parte de los usuarios (empleados de la cafetería) para

realizar las pruebas de card sorting y paper prototyping.
28
04 Marco Teórico
4.1 Usabilidad en Aplicaciones Móviles
La usabilidad se define como la actitudes positivas, al utilizar la aplicación debe producir la menor
facilidad con que se usa un elemento aplicación para alcanzar objetivos cantidad de errores posibles. Si se
para lograr un objetivos específicos, específicos. La satisfacción es un producen, es importante que se den
esta se puede medir a partir de atributo subjetivo, puede ser medido a conocer al usuario de forma rápida
atributos objetivos como lo son utilizando escalas de calificación de y clara, además de ofrecer algún
efectividad, eficiencia y satisfacción actitud. mecanismo para recuperarse de ese
en un contexto de uso específico, error.
estos están relacionados a el factor También cuenta con atributos
humano, se refieren a la actitud del objetivos los cuales son más fáciles Contenido: Aspectos relacionados
usuario hacia el uso de la aplicación de medir ya que se refieren a la a la distribución del contenido y de
son más difíciles de cuantificar y interacción del usuario con la los formatos utilizados para mostrar
medir. aplicación, no dependen de la información al usuario.
percepción del usuario.
Efectividad: Está relacionada con la Accesibilidad: Consideraciones
precisión y completitud con la que Facilidad de Aprendizaje: La facilidad tenidas en cuenta por posibles
los usuarios utilizan la aplicación con la que los usuarios alcanzan limitaciones físicas, visuales, auditivas
para alcanzar objetivos específicos. objetivos específicos la primera vez o de otra índole de los usuarios.
La calidad de la solución y la tasa que utilizan la aplicación. La primer
de errores son indicadores de experiencia que tiene los usuarios con
efectividad. un nuevo sistema es la de aprender a
usarlo.
Eficiencia: Es la relación entre
efectividad y el esfuerzo o los Memorabilidad: La facilidad para
recursos empleados para lograr esta. memorizar la forma de utilizar
Indicadores de eficiencia incluyen la aplicación y alcanzar objetivos
el tiempo de finalización de tareas específicos, y la facilidad con que
y tiempo de aprendizaje. A menor vuelven a utilizar la aplicación
cantidad de esfuerzo o recursos, después de un tiempo.
mayor eficiencia.
Errores: Los errores que comete el
Satisfacción: Es el grado con que el usuario al utilizar la aplicación y la
usuario se siente satisfecho, con gravedad de los mismos. La
30
4.2 Consideraciones en el Diseño de Interacción
4.2.1 Zonas de acceso confort

A continuación se indican las zonas
de confort en el uso de dispositivos
móviles, esto con el fin de tomar en
cuenta una correcta dispocisión de
botones y elementos interactivos para
de facilitarle a el usuario la interación
con la aplicación.
Difícil
Medio
Fácil
Figura 1
Zonas de acceso confort
31
4.2.2 Controles de navegación 4.2.3 Tipografía tengan una función bien definida que
contribuya a cumplir el objetivo de la
Evitar controles de navegación el la En el uso de tipografías se app y ayude al usuario.
parte superior central de la página recomienda sans-serif para textos
debido a que la mano taparía el debido a que en tamaños pequeños Los móviles no son dispositivos
contenido y poca resolución es mucho más para mostrar mucha información
legible, sin embargo se puede hacer en pantalla. Por esta misma razón,
uso de tipografías con serifa para la simplicidad consiste también en
títulos de mayor tamaño, otro aspecto manejar la economía visual y tener
importante a tomar en cuenta es el un buen criterio para determinar qué
tamaño, los tamaños más comunes incluir y qué no en el diseño.
Mano tapa la pantalla van desde 12pt hasta 22pt.
4.2.5 Consistencia
Texto muy pequeño 12 pt
Una app tiene diferentes pantallas
Figura 2 que la componen y al mismo tiempo,
Evitar controles de navegación en sección superior Texto pequeño 14 pt
(Fuente: elaboración propia) está dentro de un sistema operativo
que propone un determinado
Ubicación de los controles en la parte
inferior del dispositivo para dar una Texto medio 18 pt aspecto visual e interacción. El usuario
de Android, iOS o Windows Phone ya
mayor accesibilidad a el usuario
está habituado a ellos y espera que
Texto grande 22 pt las aplicaciones se comporten de la
misma manera.
4.2.4 Simplicidad
La consistencia, entonces, se trata
La simplicidad visual está de respetar estos conocimientos y
directamente relacionada con la costumbres del usuario, no solo en el
usabilidad. Ser simple implica en interior de la aplicación, sino también
Zona de confort
cierta medida ser mínimo, contar con en relación con el resto del software.
pocos elementos, pero sobre todo, Esto favorece el uso intuitivo de la
Figura 3 que aquellos presentes en la interfaz app, ya que el usuario puede prever
Confort en controles de navegación
su comportamiento.
32
4.2.6 Navegación intuitiva 4.2.7.1 Pestañas Android utiliza las pestañas en la

zona superior de la pantalla. Este
Un aspecto que merece mucha Las pestañas se pueden utilizar sistema tiene dos tipos de pestañas:
atención en una aplicación es la para filtrar contenidos o cambiar fijas, se ven todas al mismo tiempo, o
forma de navegar entre contenidos, entre pantallas que, de acuerdo a la deslizantes, el usuario solo pude ver la
de manera que resulte fácil de arquitectura de información, tienen el pestaña actual y las dos adyacentes.
comprender para el usuario, evitando mismo nivel de jerarquía, indicando En cualquiera de los casos, Google
la sensación de desorientación que siempre dónde se está y hacia dónde sugiere aplicar una regla de oro:
puede ocasionar una navegación más se puede ir. no emplear más de cinco o siete
confusa. pestañas.
Las buenas prácticas indican que
La navegación intuitiva está también es necesario destacar siempre la Por el contrario, en iOS se encuentran
relacionada con la consistencia. Cada pestaña seleccionada, mantener siempre en la parte inferior. En
sistema operativo propone diferentes el orden y la ubicación inicial y no iPhone se puede mostrar un máximo
elementos para navegar por la app usarlas para incluir otras acciones de cinco pestañas y, en caso de
como botones, pestañas y paneles. distintas a la navegación. necesitar más, la última de ellas se
Hacer uso de ellos hará que el usuario convertirá en una pestaña «más»,
los reconozca a primera vista y, solo Cada sistema operativo cuenta con donde se agrupan los apartados
con estos componentes, ya sepa diferentes métodos para disponer la menos relevantes. Según las guías
cómo ir de una sección a otra. información mediante pestañas. oficiales de Apple, las pestañas
deberán estar siempre visibles desde
cualquier sitio y se recomienda su uso
4.2.7 Navegación para organizar los contenidos de las
Una navegación simple y consistente jerarquías más altas.
es un componente esencial y surge
de contestar algunas preguntas Windows Phone rompe con la
básicas: ¿De qué manera el usuario metáfora visual de las pestañas con
recorrerá la aplicación? ¿A través de el denominado Pivot Control, aunque
menús o del contenido en sí mismo? su función sea la misma. Se ubican
¿Y si viene de una notificación? siempre en la zona superior de la
Android iOSW indows Phone
¿Cómo hará para volver atrás cuando Figura 4
pantalla y por su gran tamaño juegan
haya avanzado?
Ubicación de pestañas según sistema operativo el doble papel de título y pestaña al
(Fuente: App Design Book)
33
mismo tiempo. La recomendación En el caso de Windows Phone, el

es usarlos de forma complementaria llamado List View muestra una lista
y subordinados al menú Panorama, de ítems que puede contener tanto
que se ocupa de la navegación de imágenes como textos y añade la
las jerarquías de contenido más altas posibilidad de mostrar datos en
dentro de la aplicación. formato de cuadrícula.
4.2.7.2 Listas 4.2.7.3 Galerías de imágenes

Androidi OS Windows Phone
Según como se mire, todo contenido Figura 5
La disposición de imágenes está
Diseño de listas según sistema operativo
estructurado dispuesto verticalmente (Fuente: App Design Book) regida por la retícula propuesta por
puede conformar una lista. Esta cada sistema operativo. En caso de
forma de mostrar tantos ítems como En Android el uso de listas está muy
extendido. Las guías de estilo de que excedan el área disponible, se
sea necesario permite al usuario realiza un recorte, generalmente
tocar alguno de ellos para obtener Google recomiendan la agrupación
de contenidos relacionados para cuadrado, de las imágenes a mostrar.
información complementaria.
una mejor comprensión, ya que
Las listas pueden mostrar tanto textos como usuarios, somos capaces de
como imágenes, pero es importante memorizar a corto plazo solo unos
siempre jerarquizar su contenido. pocos elementos.
Cuando contiene muchos elementos En iOS las listas también ocupan todo
puede añadirse un sistema de índice el ancho de la pantalla. Si bien hay
que complemente la navegación a algunas que apilan un ítem sobre el
medida que se va desplazando, de otro de principio a fin de la pantalla,
forma vertical, por el contenido de la existen también las listas agrupadas
que permiten dividir los contenidos Android iOSW indows Phone
lista. Figura 6
en bloques, separados por espacios Galería de imágenes según sistema operativo
verticales. Algo muy característico de (Fuente: App Design Book)
las listas en iOS es que suelen incluir Android es un caso particular, ya que
una pequeña flecha a la derecha de al mostrar imágenes en la vista de
cada ítem. cuadrícula, cuando se considere
34
necesario, es posible utilizar un 4.2.7.5 Volver

desplazamiento horizontal. Cuando
esto sucede es recomendable Los usuarios acostumbrados a usar
mostrar un pequeño trozo de las la web encontrarán aquí una forma
imágenes siguientes. conocida de navegar. A medida que
se va avanzando en profundidad de
contenidos es necesario contar con
4.2.7.4 Menú tipo cajón una forma de retroceder o volver a
niveles superiores. En el mundo móvil,
Este patrón, permite cambiar Androidi OS Windows Phone con la navegación pantalla a pantalla,
Figura 7
rápidamente entre pantallas de la Menú según sistema operativo el uso del botón «volver» es muy
aplicación. Pulsando un botón se (Fuente: App Design Book)
frecuente.
despliega de forma lateral una lista Hasta el momento, Android es el
con los contenidos, oculta hasta ese único que ha estandarizado su uso en
momento. Otra forma de llegar a esta las guías oficiales, recomendándolo
lista es deslizando el dedo desde el para los niveles de navegación más
lado izquierdo de la pantalla. altos de la app o cuando las opciones
de menú no tengan relación directa
Las ventajas del uso de este patrón entre sí.
están claras: mejor aprovechamiento
del espacio y, una vez desplegada la En iOS se pueden encontrar muchas
lista, ofrece una forma cómoda de aplicaciones que lo utilizan. Un
navegar los contenidos. Pero no todas ejemplo de buenas prácticas es Path.
son buenas noticias, ya que este tipo Esta red social ha implementado este Androidi OS Windows Phone
de menú obliga a los usuarios a tocar tipo de navegación desde su versión Figura 8
Botón de volver según sistema operativo
el botón y desplegar el panel para 2. (Fuente: App Design Book)
poder saber cuáles son las opciones
Por otra parte, en Windows Phone En iOS, este botón está contenido
disponibles en la lista.
su uso aún no está muy extendido. en la barra de navegación y se ubica
De hecho, la aplicación de Facebook en la esquina superior izquierda con
Generalmente es utilizado para
es una de las pocas que utiliza el una etiqueta que tiene el título de la
ubicar funciones de poco uso para el
menú tipo cajón para navegar por los página anterior. Aquí la navegación
usuario.
contenidos. entre páginas es jerárquica.
35
En el caso de Windows Phone, el el resultado no debería ser superior a se lleva a cabo en una página
botón físico del teléfono se encarga uno o dos segundos. separada, donde se introduce el texto
de gestionar esta forma de navegar y se listan los resultados
entre los contenidos. De hecho, la
interfaz de la aplicación no debería
contemplar el uso de este botón, 4.2.8 Iconografía
dejándolo en manos del sistema
operativo. Uso de iconografía, su uso suele estar
asociado a tres escenarios. El primero,
En Android, el botón «volver» es físico como ayuda visual para reforzar
en algunos teléfonos e incorporado información, por ejemplo, en un
a la barra de navegación virtual en cuadro de diálogo con una alerta. En
otros terminales. Está visible en todo Androidi OS Windows Phone el segundo caso, los íconos interiores
momento y se utiliza para navegar Figura 9
Botón de buscar según sistema operativo
actúan como complemento de
hacia atrás cronológicamente por el (Fuente: App Design Book) elementos interactivos, como cuando
histórico de pantallas por las que ha Android hace que la opción para se encuentran dentro de botones
pasado el usuario. Si se pulsa este buscar sea accesible desde la barra o pestañas. Finalmente, su función
botón estando en el nivel superior de de acciones. Al pulsar «buscar», la puede ser la de mejorar la utilización
la app, el usuario terminará por salir barra superior se modifica para del espacio, en este caso, el ícono
de ella. convertirse en la de búsqueda. resume visualmente algo que en
forma de texto sería muy extenso o
En iPhone es habitual encontrar un complejo de entender.
4.2.7.6 Buscar campo de búsqueda por encima
de las listas, tal como aparece en La interpretación de íconos supone
La búsqueda se puede llevar a cabo
Contactos y otras apps. Junto con el cierta subjetividad que hay que
mediante la introducción de texto
campo de texto pueden aparecer tratar de eliminar haciendo un uso
o bien, por voz. Siempre que sea
filtros para refinar las búsquedas más correcto de ellos. Por ejemplo, en
posible, es preferible ir mostrando los
complejas. cada plataforma algunas acciones
resultados a medida que el usuario
como «buscar», «guardar» o «editar»
escribe para mejorar la experiencia de
tienen íconos asociados. El usuario ya
uso. Idealmente, el tiempo de espera En Windows Phone, la búsqueda
es tratada como una acción más, los conoce y sabe qué significan, por
entre la introducción de los datos y
disponible en la barra de acciones y lo tanto, darles el uso que se
36
espera de ellos ayudará a alcanzar

consistencia y mejorará la usabilidad
de la aplicación.
4.2.9 Gestos estándares para

móviles táctiles
Los usuarios no deben estar

obligados a aprender un nuevo
patrón de funcionamiento cada Tocar Arrastrar
vez que descargan una aplicación, Abrir, seleccionar Desplazamiento,
debido a que esto provocaría una mover un objeto
curva de aprendizaje demasiado
alta, por lo tanto se deben de usar
los gestos para dispositivos táctiles ya
establecidos, estos se ejemplifican a
continuación.
ExtenderP ellizcar Presionar

Ampliar, estirarR educir, estrechar Cambiar de estado,
copiar texto o imágenes
Figura 10
Gestos en diapositivos móviles
37
4.3 Experiencia de Usuario UX
La experiencia de usuario son un Diseño de interacción: en esta se Interfaz de usuario (UI): la interfaz de
conjunto de factores que hacen define el comportamiento interactivo usuario en inglés User Interface, hace
referencia al nivel de satisfacción al del sitio, es decir cómo va a referencia a la interfaz con que las
utilizar el producto, esta perspectiva reaccionar la aplicación con cada una personas interactuan directamente,
puede ser tanto positiva como de las interacciones que el usuario se trata de lo que permite el uso del
negativa. La finalidad del diseño realice. dispositivo, la interfaz de usuario está
UX es mejorar la experiencia de muy relacionada con la usabilidad
las personas al interactuar con los Diseño gráfico: consiste en diseñar del software, pero esta no debe ser
productos, que sean útiles, faciles el aspecto gráfico del sitio, este únicamente útil, sino que además el
de usar e interactuar, asegurar que debe captar la atención del usuario factor estético es de gran importancia
encuentren el valor proporcionado. sin dejar de lado la usabilidad del debido a que influye en la experiencia
producto. El diseño debe apoyar del usuario.
Accesibilidad: Capacidad de la funcionalidad de la aplicación,
acceso a un sitio por todo tipo de esto se logra con un buen uso del
usuarios, independientemente de color, tipografía, iconografía y demás
las limitaciones, de modo que los elementos los cuales debe ayudar al
usuarios sean capaces de percibir, usuario a ubicar con mayor facilidad
entender, navegar e interactuar con la información.
dicho sitio de forma satisfactoria.
Prevención del error: Con el fin de
Arquitectura de información: se evitar equivocaciones por parte
basa en organizar, clasificar, ordenar, del usuario se deben generar
estructurar y describir los contenidos notificaciones de confirmación
de un sitio web, con el fin de que para evitar el envió de información
sus usuarios puedan satisfacer sus errónea.
necesidades informativas con el
menor esfuerzo posible. Entrada del usuario: El esfuerzo por
parte de los usuarios para introducir y
Se recomienda una estructuración seleccionar datos debe ser el mínimo
de la información de lo general a con el fin de facilitar el uso de la
lo específico con el fin de reducir la aplicación.
curva de aprendizaje.
38
4.4 Principios de Diseño
Jerarquía: La jerarquía determina dirigir la atención hacia puntos clave

el elemento que domina sobre la dentro de la interfaz.
composición, que se desea que llame
la atención en el usuario, ayuda a Espacio negativo: este hace
las personas a encontrar que es lo referencia al espacio libre entre
más importante en la información elementos. El uso del espacio
expuesta. negativo es de gran importancia ya
que aporta al usuario un descanso
Proximidad: El principio de y agrupa elementos, además de
proximidad dicta que los elementos contribuir a la elegancia y simplicidad
se deben agrupar con el fin que dentro de la composición.
formen una unidad. Al utilizar este
principio se reduce el desorden Simplicidad: Expresa la necesidad
y aumentar la claridad de la de evitar excesiva información. No se
información expuesta dentro de la debe abusar de muchos colores, tipos
interfaz. de letra o elementos. Cumpliendo
con el principio de armonía, todos
Repetición: La repetición tanto de los elementos deben de relacionarse
elementos visuales como interactivos entre sí para transmitir una misma
ayudan a crear uniformidad y idea, pero sin llegar a sobrecarga.
organización para que la usabilidad
dentro de la aplicación sea más Color: El uso del color dentro de
efectiva, si durante la navegación se la composición ayuda a organizar,
repiten patrones de uso el usuario destacar elementos y crear unidad,
tendrá una curva de aprendizaje más además de incluir un atractivo a la
pequeña. interfaz.
Contraste: el uso de contraste es

esencial para diferenciar elementos
y organizarlos en un orden jerárquico
dentro del diseño. Al contrastar
colores, tamaños, fuentes, se logra
39
05 Marco Metodológico
5.1 Marco Metodológico
Para el desarrollo del proyecto se software. El análisis de supuestos 3.2 Análisis de necesidades: esta
decidió utilizar la metodología de y requerimientos termina con define qué necesidades satisface la
análisis y diseño de usabilidad. un boceto de arquitectura que aplicación y para qué personas.
A continuación se detalla la pretende resumir el modo en que las
metodología y los pasos a seguir: necesidades se verán satisfechas. 3.3 Definición del tráfico: en este se
define las necesidades y personas
1. Investigación previa 2. Análisis de referenciales o del apartado anterior, se estima
benchmarking que frecuencia de forma porcentual
1.1 Inventario de contenidos: el accesa a cada una de las necesidades.
inventario de contenidos se utiliza Se basa en el análisis de proyectos El objetivo de tener un tráfico
cuando se realiza el rediseño de parecidos que satisfagan necesidades consolidado es poder definir el
una herramienta ya existente, es un similares, para aprender tanto de diagrama de pareto, y así determinar
diagrama tipo mapa conceptual lo positivo como de lo negativo, cuáles son las funciones que
que resume todo el contenido de la de cómo lograron satisfacer estas requieren prioridad.
herramienta. necesidades. Este análisis se divide en
dos fases, una donde se describen las 3.3.1 mapa 2 by 2: es un diagrama
1.2 Supuestos y requerimientos: herramientas similares y otra donde en el cual se tienen dos ejes, uno
en el caso de una herramienta que se realiza una tabla de mínimos donde se grafica la frecuencia
aun no existe, el inventarios de comunes de patrones y acciones. de la interacción y en el otro su
contenidos debe realizarse a partir complejidad de uso. Las necesidades
de los supuestos. Se realiza através 3. Análisis de usuarios se representan en un círculo y cada
de entrevistas, la idea es listar las tamaño debe dar una idea de la
necesidades que se supone que 3.1 Análisis de personas: se realiza cantidad de tráfico que utiliza esa
la nueva herramienta satisfará. para identificar los tipos de personas persona en cada necesidad.
Es una buena idea, en el caso de que utilizarán la herramienta, para
herramientas nuevas, entrevistar a esto se agrupan tipos de personas 4. Arquitectura alfa
algunos potenciales usuarios del con características similares. Así se
sistema. los futuros usuarios tendrán definen personas con una imagen, Con estos tres análisis anteriores; el
una idea más edad, actividades personales y análisis de personas, el análisis de
acertada de cuáles son sus posibles escenarios de uso del necesidades y el análisis de tráfico,
necesidades y cómo les podría ayudar sistema. junto con el inventario de contenidos,
una herramienta de se define la primera arquitectura
41
alfa. Se debe tomar en cuenta las 6. Navigation pat 8. Paper prototyping

conclusiones de cada uno de estos
análisis y generar una arquitectura Después de realizar el card sorting El paper prototyping es una prueba
que en lo posible responda estas se realizan ajustes a la arquitectura en la que se construye una maqueta
condiciones. Los usuarios deben con los hallazgos encontrados. Con de papel de la interface y con
encontrar fácilmente lo que usan los navigations pats se muestra en esta se hacen pruebas. El paper
más a menudo (análisis de tráfico y la arquitectura las necesidades más prototyping se hace a partir de los
pareto). importantes para los usuarios, se wireframes por lo que debe quedar
pretende que los usuarios no tengan claro que su principal objetivo es
5. Card Sorting que hacer demasiados clics en el uso probar la navegación, la arquitectura
de la aplicación. alfa, los patrones de diseño y la
Es una técnica donde los testers jerarquía y secuencia de lectura de
agrupan tarjetas que contienen 7. Wireframes los elementos de la interface. Para
conceptos, el objetivo de esta hacer el paper prototyping se definen
prueba es validar nomenclatura y Son diagramaciones sin color primero algunas tareas que
la estructura, es decir si el usuario ni detalle gráfico en donde se los usuarios intentaran realizar, estas
reconoce fácilmente las funciones diseñan los escenarios, la parte se definen según los intereses del
que estamos trabajando y las agrupa más importante de los wireframes diseñador, generalmente se trata de
en los escenarios y partes del menú es el diseño de la jerarquía de probar hipótesis de diseño en las que
que proponemos. los escenarios, de este modo se se tienen dudas, aspectos nuevos
diseñan las diagramaciones de los de la arquitectura o de patrones de
Luego de realizar esta prueba se escenarios teniendo en mente la diseño en los que se ha cambiado los
realiza un dendograma que es un navegación definida en las etapas estándares.
resumen gráfico de las veces que los anteriores. A partir de los wireframes
términos fueron agrupados juntos se prueban los navigation-path en 9. Arquitectura beta
por los diferentes entrevistados, se forma de storyboards, esta parte
hace a través de una herramienta verifica las hipótesis de arquitectura Después del paper prototyping y con
como Xsort. En el dendograma se y diagramación que se han hecho sus correcciones, se define la segunda
debe definir qué grupos se van a hasta ahora. arquitectura, la arquitectura ß. esta
tomar, esto se hace creando una línea debe tener incorporadas todas las
vertical que muestra los grupos a mejoras que se encontraron en estas
utilizar. etapas anteriores.
42
10. Look and feel debe definir según sus 6 variables

de color. La manera más exacta
10.1 Moodboard: es un collage que de hacerlo es a través de la matriz
se desarrolla con imágenes tomadas cromática.
de internet o de cualquier sitio, con
este se demuestra cómo se desea 10.4 Iconografía: en este se definen
que se vea el proyecto desde el punto que tipos de íconos y elementos UI se
de vista gráfico, cómo se cree que desean usar, generalmente se realiza
podrían ser los iconos, la cromática un moodboard para definir el estilo y
y la tipografía. Se pueden realizar posteriormente se diseñan los íconos
varios moodboards ya que muchas que se van a utilizar. Se recomienda
veces no se encuentran todas las usar iconos estándar y hacer solo
características juntas. aquellos únicos para nuestra
aplicación siguiendo, por supuesto, el
10.2 Tipografía: en este se definen estilo de los seleccionados.
las tipografías a utilizar, se debe
tomar en cuenta que se va a utilizar Otra parte importante en esta sección
en un ambiente digital, es más es el diseño del ícono de la aplicación.
recomendable utilizar tipografías
tipo “web safe”, además se debe 11. Mockup
tomar en cuenta el tamaño real en el
que se va a utilizar la tipografía, esto El mockup es la maqueta funcional
debido a que muchas tipografías de la aplicación, se hace para hacer
presentan deficiencias en tamaños pruebas en las que sea posible
pequeños, si se utiliza una tipogrfía probar el look & feel. A partir de esta
muy especial por razones semánticas maqueta se realizan las pruebas
se recomienda utilizarla tipo imagen heurísticas.
para asegurar sus características.
10.3 Cromática: se define por un

moodboard cromático, en todos los
casos una composición cromática se
43
5.2 Plan de Trabajo
Sem 1 Sem 2 Sem 3 Sem 4 Sem 5 Sem 6 Sem 7 Sem 8 Sem 9 Sem 10 Sem 11 Sem 12 Sem 13 Sem 14 Sem 15 Sem 16 Sem 17
9 Feb 16 Feb 23 Feb 2 mar9 mar 16 mar 23 mar6 abr 13 abr 20 abr 27 abr4 may 11 may 18 may 25 may1 jun 4 jun
44
06 Desarrollo del proyecto
6. Desarrollo del Proyecto
Debido a que se van a desarrollar dos plataformas diferentes una para los
meseros la cual va a ser utilizada en tablets y otra para la administradora, la
cual se visualizará en teléfono, a partir de este punto se divide el informe en
dos partes, primero se explica lo que pertenece al mesero y luego se expone
lo que corresponde a la plataforma para la administradora. Esto con el fin de
facilitar la comprensión del documento.
46
Mesero
6.1 Investigación Previa
6.1.1 Inventario de contenidos
Café Dota Fresh 460 gr Queque de Zanahoria

Café Dota-Tarrazú 300 gr Queque Moka
Café Exportación 75 gr Queque Navideño
Café Hermosa 300 gr Queque Navideño entero
Café Infusión Dota-Tarrazú Queque Seco
Mesa Cantidad de clientes Café Infusión Quetzal Quequitos
Café Quetzal 250 gr Rollos de Canela
Café Quetzal 500 gr Tamal de Elote
Café Reserva 75 gr Tamal de Maicena
Café Reserva Especial Torta Chilena
Paquete #6 Volcán de Nutella
Unidades Paquete Navideño 1 Repostería
Paquete Navideño 2 Cakepops
Código Buscar Digite Código Paquete Navideño 3 Cupcake Navideño
Detalle Nuevos pedidos Buscar Paquete Navideño 4 Biscocho
Digitar nombre Paquete papa Bolsa de Pan (2 piezas)
Café Granel consumo nacional Canasta de Cebolla
Café Granel Dota Fresh Cangrejos
Café Granel Dota-Tarrazú Cangrejos Arreglados
Cantidad Café Granel Hermosa Empanada de Pollo
Café Granel Quetzal Exportación Enchilada de Papa
Café Granel Reserva Especial Enchilada de Papa peq
Precio Unitario Chocolate de café Pan Jamón y Cebolla
Producto Chocolate Guayabita Pan Pizza
Detalle adicional Chocolate Milán Pastel de Carne
línea de pedido Chocolate Milán Relleno Pastel de Carne Arreglado
Chocolate de Sabores Pastel de Espinaca
Agregar Choco-Mentas Pastel de Papa con Atún
Tableta Tapita Pati
Tapita Quiche de Palmito
Tri-Tapita Rollos de Queso
Fiesta Tamal de Cerdo
Milkshake Canasta de Pollo
Naturales Empanada de Carne
Cancelar Naturales en leche Café Temporada
Smoothies Chorreadas
Arrollado Brownie Tortilla con Queso
Biscotti Desayuno Completo
Canastas Dulces Desayuno Omelette
Empanadas Dulces Desayuno Tostadas Francesas
Cheesecake Dedos de Pollo
Mil Hojas Ensalada Capresse
Pan de Banano Ensalada de Pollo
Pie de Limón Ensalada Dota
Pie de Manzana Plato del Día
Pie de Mora Privilegios
Pie de Pecanas Café Negro
Quque de Café Cappu Moka
Queque de chocolate Cappu Moka 12 onz
Queque Churchill Cappu Regular
Queque de Fresa Cappu Regular 12 onz
Queque de Oreo Cappu con Canela
48
6.2 Análisis de Referenciales
Se realiza el análisis de una serie 6.2.1 Delux Restaurant

de aplicaciones que cumplen con
características similares, los cuales
pueden servir como una guía para
llegar a la solución más óptima
y satisfacer adecuadamente las Submenú Categorias
necesidades. Además de esto se
analizan patrones de diseño de cada Instrucciones
una de estas. adicionales
Cantidad +/-
Cobro total Pedido
Menú Resumen del pedido
Imagen 32
Referencial 1 Delux Restaurant
(Fuente: play store)
Aspectos positivos Aspectos negativos
- Submenú que divide por categorías los - No cuenta con un visualizador de pedidos
productos. activos.
-Indicador del cobro total y precios por - En la pantalla de menú presenta mucha
producto. información sin jerarquía, provocando
-Cuenta con la posibilidad de agregar confusión al usuario.
instrucciones adicionales al pedido. - La cromática elegida no se relaciona con
- Cuenta con un resumen del pedido donde comida.
se pueden realizar modificaciones antes de -El uso de fotografías genera un foco visual
enviarlo a comandas. muy llamativo.
49
6.2.2 Oficomanda
Cantidad Pedido
+/-
Producto
seleccionado
Categorías
Menú de inicio Mesas disponibles Menú Resumen del pedido
Imagen 33
Referencial 2 Oficomanda

generando confusión, además se indica el
- División de productos por categorías. - El menú de categorías abarca gran cantidad nombre del producto sobre estas lo cual es
- Indicador de mesas disponibles. de la pantalla dejando poco espacio para los de difícil lectura para el usuario.
- Genera un resumen del pedido el cual productos. - La cromática no va acorde a comidas.
se puede modificar antes de enviarlo a - La ubicación de la indicación y cantidad - En la pantalla de menú no existe jerarquía
comandas. del producto seleccionado es difícil de de elementos, es difícil identificar a cual
identificar. categoría pertenecen los productos.
-El uso de fotografías sobrecarga el diseño
50
6.2.3 Café y Reastaurante
Pedido especial
(notas)
Submenú
espacios
Indicador
mesa ocupada
Seleccionar
producto
Menú de inicio Mesas disponibles Menú y pedido
Imagen 34
Referencial 3 Café y restaurante
51
Agregar
Resumen del pedido Opciones de pago Resumen del pago Resumen de ventas
Imagen 35
Referencial 3 Café y restaurante
- Indicador de mesas ocupadas. - En una misma pantalla se indica el pedido -Algunos de los vectores utilizados en la
- Cuenta con un submenú que divide los actual y el menú generando gran cantidad parte superior son dificiles de identificar por
espacios del local. de información en una misma pantalla. medio de la experiencia del usuario y no
- Opción de agregar indicaciones a los - El ícono de enviar pedido cuesta van acompañados de texto, lo cual dificulta
pedidos. identificarlo debido a que no presenta texto y identificar su función.
- Opción para agregar productos a pedidos es difícil de reconocer.
activos. -La cromática elegida no va acorde a
- Da el total del pedido. comidas.
-No existe pertenencia entre las pantallas, en
unas se utiliza letras color morado y en otras
color gris sin una justificación.
52
6.2.4 Waitero
Menú constante Categorias
Mesa
ocupada
Editar pedido
Mesas disponibles Cantidad de clientes por mesa Pedido
Imagen 36
Referencial 4 Waitero
53
Descuento
Editar pedido
Pago
Agregar
pedido
Resumen de pedido Resumen de pedido Pago
Imagen 38
Referencial 4 Waitero
- Indicador de mesas ocupadas y cantidad de - No se puede seleccionar la mesa en el

clientes. gráfico superior, únicamente por medio de
- Cuenta con un submenú que divide por los botones con números.
categorías los productos a la venta. - Se debe deslizar el menú para ver todas las
-Presenta la opción de editar pedido y opciones.
agregar notas. -La secuencia de uso no es clara dentro de la
-Opción de agregar productos a pedidos aplicación, la arquitectura de la información
activos. confunde a el usuario.
- Da el cobro total.
-Presenta resumen de los pedidos activos.
54
6.3 Tabla de Mínimos Comunes
Delux Café
Restaurant Restaurante Waitero
Tabla 1
Mínimos comunes
55
6.3 Conclusión
De acuerdo a la tabla de mínimos comunes se concluye que opciones como
un menú divido por categorías, incluir instrucciones adicionales al pedido,
opción de modificar pedido, contar con un resumen del pedido y visualizar el
cobro total, son muy utilizadas dentro de los referenciales analizados.
Se determina que es de gran importancia incluir estas opciones debido a

que la plataforma actual no cuenta con ellas y son de gran importancia para
facilitar la toma de pedidos a los meseros por medio de la aplicación.
Con respecto a patrones de diseño, el uso de un menú con swipe es muy

utilizado por los referenciales analizados, lo cual beneficia en una navegación
más rápida para el usuario, además se determina que la aplicación debe ir
indicando los pasos a seguir de forma intuitiva por medio de una correcta
arquitectura de la información para que sea fácil de usar y no genere
confusiones.
Se debe determinar una cromática coherente con cafeterías para que genere
pertenencia a este sector y no provocar disonancias visuales.
El uso de fotografías sobrecarga el diseño, por lo cual se evitará su uso dentro

de la propuesta.
Jerarquizar la información para no generar confusión al usuario exponiendo

demasiada información en una misma pantalla.
Si se utiliza iconografía poco conocida por los usuarios se debe incluir texto
para aclarar su función.
56
6.4 Análisis de Usuarios
6.4.1 Creación de personas -Introducir anotaciones a el pedido

-Resumen del pedido
De acuerdo a vistas realizadas a las -Opción de modificar pedido
diferentes cafeterías de Coopedota y -Visualizar costo total del pedido
entrevistas a los empleados se crean
las personas, con el fin de identificar Contexto
las necesidades más importantes que
se deben satisfacer en la interfaz. Actualmente el sistema
implementado en la cafetería le
genera gran cantidad de problemas
Carlos | Mesero
a Carlos, esto debido a que la
metodología en la toma de pedidos
Intereses no es mediática, la misma tarda
varios minutos en realizar el pedido
Carlos en un joven apasionado en mesa y en repetidas ocasiones se
por el café, el cual trabaja en una pega retrasando aún más la toma del
cafetería para pagar sus estudios, a pedido.
él le interesa dar un buen servicio
a los clientes, para que sus jefes le Por otro lado los clientes se molestan
reconozcan el trabajo realizado y en debido a que tardan mucho en
un futuro ascender a un mejor puesto pedir la orden y algunos de ellos
dentro del mismo negocio. llevan prisa, lo cual ocasiona que
realicen malos comentarios sobre
Necesidades Carlos y presenten quejas a la
administración. Esto perjudica el
-Introducir datos de forma rápida trabajo y las metas de Carlos, en
-Visualizar mesas disponibles y mesas gran cantidad de ocasiones los jefes
ocupadas regañan a sus empleados por las
-Introducir cuenta ya sea por mesa o quejas presentadas por los clientes,
por persona pero lo que en realidad ocurre no es
-Menú de fácil acceso culpa del mesero si no del sistema
-Visualizar precios de cada producto implementado en este momento.
57
6.4.2 Consolidado de detalles 6.4.3 Análisis 2 by 2
1. Visualizar mesas disponibles 30% Complejo

y mesas ocupadas
2. Introducir cuenta ya sea por 20%

mesa o por persona
3. Visualizar precios de cada producto 10%
4. Introducir anotaciones a el pedido 10%
5. Resumen del pedido 20%

1 5
5% 7
4
7. Visualizar costo total del pedido 5%
2
6
3
Simple
Gráfico 1
Análisis 2 by 2
58
6.4.4 Gráfico de Pareto
Se determina que lo más importante es la

100 visualización de mesas ocupadas debido
a que es uno de los principales problemas
90 que presenta el software actual ocasionando
enlaces de cuentas a mesas equivocadas, así
80 como dividir cuenta y contar con un resumen
del pedido ya que el sistema existente no
70 cuenta con estos aspectos provocando
problemas en caja y equivocaciones en
60 comanda ya que no existe control de
confirmación de envío de pedidos obligando
50 al mesero a cancelar pedidos que muchas
veces ya van avanzados y generan pérdidas a
40 la empresa.
30
20
10
Gráfico 2
Gráfico de Pareto
59
6.5 Arquitectura Alfa
Café Dota Fresh 460 gr
Café Dota-Tarrazú 300 gr
Café Exportación 75 gr
Café Hermosa 300 gr
Café Infusión Dota-Tarrazú
Café Infusión Quetzal
Café empacado Café Quetzal 250 gr
Café Quetzal 500 gr
Café Reserva 75 gr
Café Reserva Especial
Paquete #6
Paquete Navideño 1
Paquete Navideño 2
Paquete Navideño 3
Paquete Navideño 4
Paquete papa
Café Granel consumo nacional

Café Granel Dota Fresh
Café granel Café Granel Dota-Tarrazú
Café Granel Hermosa
Café Granel Quetzal Exportación
Café Granel Reserva Especial
Chocolate de café
Chocolate Guayabita
Chocolate Milán
Chocolate Milán Relleno
Dulces
Chocolate de Sabores
Choco-Mentas
Tableta Tapita
Tapita
Tri-Tapita
Fiesta Delactomy
Milkshake Delactomy
Batidos Naturales Anotaciones
Naturales en leche Delactomy
Smoothies
Sodas italianas Soda Italiana
Arrollado Brownie
Biscotti
Canastas Dulces
Empanadas Dulces
Cheesecake
Mil Hojas
Pan de Banano
Pie de Limón
Pie de Manzana
Pie de Mora
Pie de Pecanas
Quque de Café
Dulce Queque de chocolate
Queque Churchill
Queque de Fresa
Queque de Oreo
Queque de Zanahoria
Queque Moka
Queque Navideño
Queque Navideño entero
Queque Seco
Quequitos
Rollos de Canela
Tamal de Elote
Repostería Tamal de Maicena
Torta Chilena
Volcán de Nutella
Repostería
Cakepops
Cupcake Navideño
Biscocho
Bolsa de Pan (2 piezas)
Canasta de Cebolla
Cangrejos
Cangrejos Arreglados
Empanada de Pollo
Enchilada de Papa
Enchilada de Papa peq
Pan Jamón y Cebolla
Salada Pan Pizza
Pastel de Carne
Pastel de Carne Arreglado
Pastel de Espinaca
Pastel de Papa con Atún
Pati
Quiche de Palmito
Rollos de Queso
Tamal de Cerdo
Canasta de Pollo
Empanada de Carne
Bolsa de Manzanas
Postres y frutas
Copa de Helado Anotaciones
Café Temporada
Chorreadas
Tortilla con Queso
Desayuno Completo
Desayuno Omelette
Desayuno Tostadas Francesas Anotaciones
Comidas
Dedos de Pollo
Ensalada Capresse
Ensalada de Pollo
Ensalada Dota
Plato del Día
Privilegios
Café Negro
Cappu Moka Delactomy
Cappu Moka 12 onz Delactomy
Cappu Regular Delactomy
Cappu Regular 12 onz Delactomy
Cappu con Canela Delactomy
Cappu Regular con Chocolate Delactomy
Mesa 1 Tradicionales Espresso Bomba
Mesa 2 Espresso Macchiato Delactomy
Anotaciones
Mesa 3 Espreso Sencillo
Mesa 4 Latte Privilegios 12 onz Delactomy
Mesa 5 Latte Privilegios Delactomy
Piso 1 Latte Regular Delactomy
Mesa 6
Mesa 7 Latte Regular 12 onz Delactomy
Mesa 8 Café Americano
Mesa 9 Café amerizano 12 onz
Mesa 10 Pedido por mesa Café con leche Delactomy
Barra 1 Café con leche 12 onz Delactomy
Cantidad de personas
Enviar pedido Mesa 1

Mesa 2 Barraquito
Mesa 3 Dulcito Delactomy
Calientes Irlandés Anotaciones
Mesa 4 Pedido por persona
Piso 2 Mesa 5 Mokaccino Delactomy
Mesa 6 Pasión Los Santos Delactomy
Nombre
Mesa 7
Mesa 8
Café preparado Filtrado Miel
Filtrado Dota Fresh
Mesa 1 Filtrado Dota-Tarrazú
Mesa 2 Filtrados Anotaciones
Filtrado Hermosa
Terraza Mesa 3 Filtrado Quetzal Exportación
Mesa 4 Filtrado Reserva Especial
Mesa 5
Chateau Delactomy
Chocomenta Delactomy
Chococafé Delactomy
Fantasía de Mora
Frapuccino Delactomy
Frapuccino de Sabores Delactomy
Fríos Fusión Mani-Caramelo Anotaciones
Ilusión Delactomy
Irlandés Delactomy
Marshmallow Café
Moka Delactomy
Moka sin licor Delactomy
Perfecto Amor Delactomy
Latte Limón
Chocolate Caliente Delactomy

Leche
Té con Leche Delactomy Anotaciones
Té / Chocolates
Te Negro
Te Chai
Té Frío de la casa
Ecomiel
Usuario
Contraseña
Miel
Miel Santa María 1000 gr
Santa María Miel Santa María 275 gr
Polen Santa María
Caramelo Miel La Reina

Energético La Reina
La Reina Propovitalis
Miel La Reina 1000 gr
La Reina Miel La Reina 210 gr
Miel Propóleo La Reina
Polen La Reina 135 gr
Tinturas La Reina
Conserva de Chiverre 300 gr

Conserve de Chiverre 500 gr
Durazno en Almibar
Higo en Almibar 500 gr
Mermelada Mora La Colina
Mermelada Ciruela
Mermelada Guayaba
Mermelada Higo
Mermelada Manzana
Mermeladas Mermelada Manzana/Mora
Mermelada Mora
Mermelada Papayuela
Mermelada Tomatilo
Mermelada Uchuva
Mermelada Fresa
Mermelada Kilo
Papayuela en Almibar
Salsa Agridulce
Salsa Picante
Salsa Picante 250 gr
Vinagre Manzana
Nombre/Mesa
Lista del pedido
Pedido actual
Costo total
Enviar
Mesa 1 Agregar
Pedidos activos Mesa 2 Lista del pedido
Pedro Cancelar
Costo total
María Actualizar
60
6.6 Card Sorting
6.6.1 Dendograma
Se aplica la prueba a un total de 8 meseros de la Cafetería Privilegios ubicada en Santa María de Dota.
02 46 81 01 21 41 61 82 02 22 42 62 83 03 23 43 63 84 04 24 44 64 85 05 25 45 65 86 06 26 46 66 87 07 27 47 6 78 80 82 84 86 88 90 92
Mermeladas
Miel
Dulces
Sodas italianas
Café preparado
Té/Chocolate
Batidos
Comidas
Postres y frutas
Repostería
Café granel
Café empacado
Usuario
Contraseña
Pedido por mesa
Pedido por persona
Nombre/mesa
Nombre
Piso 1
Terraza
Costo total
Pedido actual
Agregar
Actualizar
61
6.6 Card Sorting
6.6.2 Agrupación más utilizada
Miel Sodas italianas Comidas Café granel Usuario Nombre/Mesa Costo total Piso 1
Mermeladas Café preparado Postres y frutas Café empacado Cantidad de personas Pedido actual Terraza
Dulces Té / Chocolates Repostería Contraseña Pedido por persona Agregar
Batidos Pedido por mesa Actualizar
Nombre
Las agrupaciones realizadas por

los usuarios son muy acertadas
con respecto a la arquitectura
alfa de meseros, sin embargo se
puede notar una-sub clasificación
de los productos lo cual puede
ser de importancia para ubicarlos
más fácilmente, con respecto a la
nomenclatura se determina que
pedido actual y pedido activo genera
confusión a los usuarios por lo que
se decide cambiar pedido actual por
resumen del pedido.
62
6.7 Arquitectura Alfa 1.2
Café Reserva 75 gr
Paquete #6
Paquete Navideño 1
Café Coopedota Paquete Navideño 2
Paquete Navideño 3
Paquete Navideño 4
Paquete papa

Miel Ecomiel

Miel Santa María Miel Santa María 275 gr
Polen Santa María

Miel La Reina Miel La Reina 210 gr
Tinturas La Reina
Dulcería
Chocolate de café
Chocolate Guayabita
Chocolate Milán
Dulces
Choco-Mentas
Tableta Tapita
Tapita
Tri-Tapita

Durazno en Almibar
Mermelada Ciruela
Mermelada Guayaba
Mermelada Higo
Mermelada Manzana
Mermelada Mora
Mermelada Papayuela
Mermelada Tomatilo
Mermelada Uchuva
Mermelada Fresa
Mermelada Kilo
Salsa Agridulce
Salsa Picante
Vinagre Manzana
Café Negro
Cappu Moka
Cappu Moka 12 onz
Capppu Moka 12 onz Delactomy
Cappu Regular
Café Tradicionales Cappu Regular 12 onz
Cappu con Canela
Cappu Regular con Chocolate
Espresso Bomba
Espresso Macchiato
Espresso Macchiato Delactomy
Anotaciones
Espreso Sencillo
Latte Privilegios 12 onz
Latte Privilegios 12 onz Delactomy
Latte Privilegios
Latte Privilegios Delactomy
Latte Regular
Latte Regular Delactomy
Latte Regular 12 onz
Latte Regular 12 onz Delactomy
Mesa 3 Café con leche
Mesa 4 Café con leche Delactomy
Piso 1 Mesa 5 Café con leche 12 onz
Mesa 6 Café con leche 12 onz Delactomy
Mesa 7
Mesa 8
Mesa 9
Mesa 10 Pedido por mesa Barraquito
Barra 1 Bebidas Dulcito
Cantidad de personas Café Calientes Dulcito Delactomy Anotaciones
Mesa 1 Irlandés
Enviar pedido Mokaccino
Mesa 2
Mesa 3 Mokaccino Delactomy
Mesa 4 Pasión Los Santos
Piso 2 Pedido por persona Pasión Los Santos Delactomy
Mesa 5
Mesa 6 Nombre
Mesa 7
Mesa 8 Filtrado Miel
Filtrado Dota Fresh
Café Filtrados Anotaciones
Mesa 2 Filtrado Hermosa
Mesa 4 Filtrado Reserva Especial
Mesa 5
Chateau
Chateau Delactomy
Chocomenta
Chococafé
Café Fríos Fantasía de Mora Anotaciones
Frapuccino
Frapuccino Sabores
Frapuccino Sabores Delactomy
Fusión Mani-Caramelo
Ilusión
Ilusión Delactomy
Irlandés
Irlandés Delactomy
Marshmallow Café
Moka
Moka Delactomy
Moka sin licor
Perfecto Amor
Latte Limón
Chocolate Caliente
Té / Chocolates Leche
Té con Leche
Anotaciones
Té con Leche Delactomy
Te Negro
Te Chai
Fiesta
Usuario Fiesta Delactomy Anotaciones
Contraseña Batidos Milkshake
Milkshake Delactomy
Naturales
Naturales en leche
Smoothies
Arrollado Brownie
Biscotti
Canastas Dulces
Empanadas Dulces
Cheesecake
Mil Hojas
Pan de Banano
Pie de Limón
Pie de Manzana
Pie de Mora
Pie de Pecanas
Quque de Café
Repostería Dulce Queque de chocolate
Queque Churchill
Queque de Fresa
Queque de Oreo
Queque de Zanahoria
Queque Moka
Queque Navideño
Queque Seco
Quequitos
Rollos de Canela
Tamal de Elote
Tamal de Maicena
Torta Chilena
Volcán de Nutella
Repostería
Cakepops
Cupcake Navideño
Biscocho
Canasta de Cebolla
Cangrejos
Comidas Empanada de Pollo
Enchilada de Papa
ReposteríaSalada Pan Pizza
Pastel de Carne
Pastel de Espinaca
Pati
Quiche de Palmito
Rollos de Queso
Tamal de Cerdo
Canasta de Pollo
Empanada de Carne
Bolsa de Manzanas
Postres y frutas
Mesa / Nombre
Lista del pedido
Café Temporada
Pedidos activos Costo total Chorreadas
Agregar Tortilla con Queso
Cancelar Desayuno Completo
Desayuno Omelette
Desayuno Tostadas Francesas
Comidas Anotaciones
Dedos de Pollo
Ensalada Capresse
Ensalada de Pollo
Ensalada Dota
Plato del Día
Privilegios
Nombre/Mesa
Lista del pedido
Resumen del pedido
Costo total
Enviar pedido
63
6.8 Navigation Paths
Café Reserva 75 gr
Paquete #6
Paquete Navideño 1
Paquete Navideño 3
Paquete Navideño 4
Paquete papa

Mesa 1 Miel Ecomiel
Mesa 2
Mesa 3
Mesa 4
Mesa 5
Piso 1
Polen Santa María
3
Mesa 6
Barraquito
1
Bebidas Dulcito
2 4
Miel La Reina
Mesa 7
Café Calientes Dulcito Delactomy Anotaciones
Mesa 8
Tinturas La Reina
Dulcería
Irlandés
Mokaccino
Mesa 9
Chocolate de café
Chocolate Guayabita
Chocolate Milán
Mokaccino Delactomy
Dulces
Mesa 10
Choco-Mentas
Pedido por mesa

Tableta Tapita
Tapita
Tri-Tapita Pasión Los Santos
Barra 1 Conserva de Chiverre 300 gr
Pasión Los Santos Delactomy
Durazno en Almibar
Mermelada Ciruela
Mermelada Guayaba
Mermelada Higo
Mermelada Manzana
Mesa 1
Enviar pedido
Mermelada Mora
Mermelada Papayuela
Mermelada Tomatilo
Mermelada Uchuva
Mesa 2
Mermelada Fresa
Mermelada Kilo
Salsa Agridulce
Salsa Picante
Mesa 3
Vinagre Manzana
Mesa 4
Café Negro
Cappu Moka
Piso 2 Pedido por persona

Cappu Moka 12 onz
Mesa 5
Cappu Regular
Mesa 6
Cappu con Canela
Nombre
Espresso Bomba
Mesa 7
Espresso Macchiato
Anotaciones
Espreso Sencillo
Mesa 8
Latte Privilegios
Latte Regular
Café Americano
Café amerizano 12 onz
Café con leche
Café con leche Delactomy
Café con leche 12 onz
Café con leche 12 onz Delactomy
Mesa 1 Bebidas
Café Calientes
Barraquito
Dulcito
Dulcito Delactomy Anotaciones
Mesa 2
Irlandés
Mokaccino
Mokaccino Delactomy
Pasión Los Santos
Terraza
Pasión Los Santos Delactomy

Filtrado Dota Fresh
Mesa 4
Filtrado Dota-Tarrazú
Filtrado Hermosa
Filtrado Quetzal Exportación
Filtrado Reserva Especial
Mesa 5 Chateau
Chateau Delactomy
Chocomenta
Usuario
Chococafé
Frapuccino
Frapuccino Sabores
Contraseña
Ilusión
Ilusión Delactomy
Irlandés
Irlandés Delactomy
Marshmallow Café
Moka
Moka Delactomy
Moka sin licor
Perfecto Amor
Cafetería
Latte Limón
Chocolate Caliente
Té con Leche
Anotaciones
Te Negro
Te Chai
Fiesta
Fiesta Delactomy Anotaciones
Batidos Milkshake
Milkshake Delactomy
Naturales
Naturales en leche
Smoothies
Arrollado Brownie
Biscotti
Canastas Dulces
Empanadas Dulces
Cheesecake
Mil Hojas
Pan de Banano
Pie de Limón
Pie de Manzana
Pie de Mora
Pie de Pecanas
Quque de Café
Queque Churchill
Queque de Fresa
Queque de Oreo
Queque de Zanahoria
Queque Moka
Queque Navideño
Queque Seco
Quequitos
Rollos de Canela
Nombre/Mesa
Tamal de Elote
Tamal de Maicena
Torta Chilena
Volcán de Nutella
Repostería
Cakepops
1 Mesa / Nombre
Cupcake Navideño
Lista del pedido

Biscocho
Canasta de Cebolla
1 Resumen del pedido

Cangrejos
Lista del pedido

Pedidos activos
Enchilada de Papa
Costo total
Pastel de Carne
Costo total
Pastel de Espinaca
2
Pati
Quiche de Palmito
Rollos de Queso
Tamal de Cerdo
2 Agregar
Canasta de Pollo
Empanada de Carne
Eliminar
Bolsa de Manzanas
Cancelar
Postres y frutas
Café Temporada
Chorreadas
Cerrar orden
Tortilla con Queso
Desayuno Completo
Desayuno Omelette
Comidas Anotaciones
Dedos de Pollo
Ensalada Capresse
Ensalada de Pollo
Ensalada Dota
Plato del Día
Privilegios
Nombre/Mesa
Lista del pedido
Resumen del pedido
Costo total
Eliminar
Enviar pedido
Los clicks se empiezan a contar al realizar el pedido debido a que en un inicio lo que
se realiza es la inscripción de datos de los clientes y esta se realiza únicamente una
vez.
Se pasa de realizar 6 clicks para la toma de pedidos a 3, únicamente se realizan 4

cuando se desea agregar una anotación, pero esto es muy poco frecuente.
64
6.9 Wireframes
Realizar Pedido
Piso 1 Piso 2 Jardín División

por espacios
Barra 1 Mesa 1 Mesa 2 Mesa 3

Mesa ocupada
cambia de color
Mesa 4 Mesa 5 Mesa 6 Mesa 7
Usuario
Contraseña Mesa 8 Mesa 9 Mesa 10 Mesa 11
Realizar Pedido Pedidos Activos
Pantalla para ingresar a la aplicación, Primero se debe seleccionar la mesa

se ingresa por medio de un usuario y en la cual se ubican los clientes, se
contraseña. divide en piso 1, piso 2 y jardín.
65
6.9 Wireframes
Realizar Pedido Realizar Pedido Realizar Pedido
Piso 1 Piso 2 Jardín Piso 1 Piso 2 Jardín Piso 1 Piso 2 Jardín
Cerrar sesión
Barra 1 Mesa 1 Mesa 2 Mesa 3 Mesa 1

Barra 1 Mesa 1 Mesa 2 Mesa 3
Pedido por mesa Pedido por persona

Mesa 4 Mesa 5 Mesa 6 Mesa 7 Mesa 4
Cantidad de personas Nombre Mesa 5 Mesa 6
Pedido
Mesa 7
Mesa 8 Mesa 9 Mesa 10 Mesa 11 Mesa 8 Mesa 9 Mesa 10 Mesa 11 Mesa 8 Mesa 9 Mesa 10 Mesa 11
Realizar Pedido Pedidos Activos Realizar Pedido Pedidos Activos Realizar Pedido Pedidos Activos
El botón de configuración es Al seleccionar la mesa se indica si el pedido es por mesa, se grega la cantidad
únicamemente para cerrar sesión. de personas, y si es por persona se agrren los nombres.
66
6.9 Wireframes
Enviar Pedido Enviar Pedido Enviar

pedido listo
Bebidas Comidas Café CoopedotaD ulcería Categorías Bebidas Comidas Café Coopedota Dulcería
Tradicionales
Café Negro ¢1000
Cappu Moka ¢1000 Seleccionar

Café Café
Tradicionales Calientes producto
Cappu Moka 12 onz ¢1000
Cappu Regular ¢1000
Cappu Regular 12 onz ¢1000
Café Café Fríos Cappu con Canela ¢1000

Filtrados Sub categorías,
de acuerdo a la Cappu Regular con Chocolate ¢1000 Agregar
categoría principal. anotación
Espresso Bomba ¢1000
Espresso Macchiato ¢1000
Batidos Sodas Espreso Sencillo ¢1000

Italianas
Latte Privilegios 12 onz ¢1000
Latte Privilegios
Realizar Pedido Pedidos Activos Realizar Pedido Pedidos Activos
Se muestran los productos segun Se muestra la lista de productos según la sub

categorías (bebidas, comidas, café categoría elegida. Al terminar el pedido se selecciona
Coope Dota y dulcería). enviar pedido para mandar a comandas.
67
6.9 Wireframes
Enviar Pedido
Bebidas Comidas Café Coopedota Dulcería Resumen del pedido
Filtrados Mesa 1
Anotaciones Pablo
Filtrado Miel ¢1000 Chocolate de café 2
Café negro 1
Filtrado Dota Fresh ¢1000
Chorreada 2
Filtrado Dota-Tarrazú ¢1000
Total ¢3 250 Enviar pedido
Filtrado Hermosa ¢1000
a comandas
Filtrado Quetzal Exportación ¢1000
Filtrado Reserva Especial ¢1000
Al presionar el ícono de anotación Al presionar enviar pedido sale

sale esta ventana en la cual se escribe un resumen previo para evitar
la anotación requerida. equivocaciones, al presionar enviar se
envía a comandas.
68
6.9 Wireframes
Pedidos Activos Enviar Pedido
Bebidas Comidas Café CoopedotaD ulcería

Mesa 1 Cerrar orden Finalizar orden
Pablo
Chocolate de café 2
Café negro 1
Chorreada 2
Café Café
Total ¢3 250 Agregar Agregar producto Tradicionales Calientes
Mesa 2 Cerrar orden
Mokaccino
Pantalla
Leche Delactomy 1
categorías
Café negro 1 Café Café Fríos
Filtrados
Chorreada 2
Total ¢3 250 Agregar
Batidos Sodas
Italianas
Si desean pedir algo adicional se selecciona pedidos activos, en esta sale un resumen de los pedidos
de acuerdo a la mesa, se presiona agregar y lo envía a la pantalla de las categorías para seleccionar los
productos. Una vez finalizada la orden se presiona cerrar orden con el fin de liberar la mesa activa.
69
6.10 Paper Prototyping
Se aplica la prueba a un total de 8 meseros de la Cafetería Privilegios ubicada en Santa María de Dota.
Realizar Pedido Realizar Pedido Enviar Pedido
Piso 1 Piso 2 Jardín Piso 1 Piso 2 Jardín Bebidas Comidas Café CoopedotaD ulcería
Fríos

Barra 1 Mesa 2
1 Mesa 3 Chateau ¢1000 Anotaciones
Pedido por persona Chocomenta ¢1000
Chococafé ¢1000
Mesa 4 Mesa 5 Mesa 6 Mesa 7 Mesa 4 Mesa 6
5 Mesa 7
Nombre Pedido
Fantasía de Mora ¢1000
Frapuccino ¢1000
Mesa 8 Mesa 9 Mesa 10 Mesa 11 Mesa 8 Mesa
Mesa10
9 Mesa 11
Frapuccino de Sabores ¢1000
Fusión Mani-Caramelo ¢1000

13 Mesa 15
Ilusión ¢1000
Irlandés ¢1000

17 Mesa 19 Marshmallow Café ¢1000
Moka ¢1000
Moka sin licor

Iniciar un pedido Agregar personas a el pedido Realizar una anotación
Objetivo: comprobar si se entiende el

ícono del lápiz como anotaciones.
70
Enviar Pedido Enviar Pedido Enviar Pedido
Bebidas Comidas Café Coopedota Dulcería Bebidas Comidas Café CoopedotaD ulcería Bebidas Comidas Café CoopedotaD ulcería
Fríos Repostería Dulce
Chateau ¢1000 Arrollado Brownie ¢1000
Chocomenta ¢1000 Biscotti ¢1000
Chococafé ¢1000 Canastas Dulces ¢1000

Repostería Repostería
Fantasía de Mora ¢1000 Dulce Salada Empanadas Dulces ¢1000
Frapuccino ¢1000 Cheesecake ¢1000
Frapuccino de Sabores ¢1000 Mil Hojas ¢1000
Fusión Mani-Caramelo ¢1000 Pan de Banano ¢1000
Ilusión ¢1000
Comidas Postres Pie de Limón ¢1000
Frutas
Irlandés ¢1000 Pie de Manzana ¢1000
Marshmallow Café ¢1000 Pie de Mora ¢1000
Moka ¢1000 Pie de Pecanas ¢1000
Moka sin licor
Realizar Pedido Pedidos Activos Realizar Pedido Pedidos Activos Realizar Pedido Pedidos Activos
Seleccionar un producto Seleccionar comidas Enviar pedido
Objetivo: comprobar si se entiende el Objetivo: Corroborar si ubican el botón

ícono de enviar para agregar producto a de enviar pedido ubicado en la esquina
el pedido. superior derecha.
71
Nota: en la tarea de agregar productos a pedidos activos los usuarios

Pedidos Activos indicaron que el recorrido que utilizarían es seleccionar la mesa y a partir
de ahí agregar más productos al pedido, por lo tanto se decide eliminar
Mesa 1 este botón de pedidos activos y determinar el ingreso a los pedidos activos
Pablo por medio de las mesas ocupadas, además algunos usuarios indicaron que
Chocomenta
Leche Delactomy hacía falta la opción de un buscador, por lo que se determina que se debe
Canastas dulces incorporar.
Mesa 2
Mokaccino
Leche Delactomy
Café negro
Chorreada
Agregar productos a pedidos activos
Objetivo: Corroborar si siguen el método

de accesar a pedidos activos y luego
seleccinar agregar
72
6.11 Arquitectura Beta
Café Reserva 75 gr
Paquete #6
Paquete Navideño 1
Paquete Navideño 3
Paquete Navideño 4
Paquete papa

Miel Ecomiel

Polen Santa María

Miel La Reina Miel La Reina 210 gr
Tinturas La Reina
Dulcería
Chocolate de café
Chocolate Guayabita
Chocolate Milán
Dulces
Choco-Mentas
Tableta Tapita
Tapita
Tri-Tapita

Durazno en Almibar
Mermelada Ciruela
Mermelada Guayaba
Mermelada Higo
Mermelada Manzana
Mermelada Mora
Mermelada Papayuela
Mermelada Tomatilo
Mermelada Uchuva
Mermelada Fresa
Mermelada Kilo
Salsa Agridulce
Salsa Picante
Vinagre Manzana
Café Negro
Cappu Moka
Cappu Moka 12 onz
Cappu Regular
Cappu con Canela
Espresso Bomba
Espresso Macchiato
Anotaciones
Espreso Sencillo
Latte Privilegios
Latte Regular
Mesa 3 Café con leche
Mesa 4 Café con leche Delactomy
Piso 1 Mesa 5 Café con leche 12 onz
Mesa 6 Café con leche 12 onz Delactomy
Mesa 7
Mesa 8
Mesa 9
Mesa 10 Pedido por mesa Barraquito
Barra 1 Bebidas Dulcito
Cantidad de personas Café Calientes Dulcito Delactomy Anotaciones
Mesa 1 Irlandés
Enviar pedido Mokaccino
Mesa 2
Usuario Mesa 3 Mokaccino Delactomy
Contraseña Pasión Los Santos
Mesa 4 Pedido por persona
Piso 2 Mesa 5 Pasión Los Santos Delactomy
Mesa 6 Nombre
Mesa 7
Filtrado Dota Fresh
Mesa 2 Filtrado Hermosa
Mesa 4 Agregar persona Filtrado Reserva Especial
Mesa 5 Mesa / Nombre
Lista del pedido
Mesa con pedido activo Costo total Chateau
Agregar Chateau Delactomy
Chocomenta
Cancelar
Chococafé
Frapuccino
Frapuccino Sabores
Ilusión
Ilusión Delactomy
Irlandés
Irlandés Delactomy
Marshmallow Café
Moka
Moka Delactomy
Moka sin licor
Perfecto Amor
Latte Limón
Chocolate Caliente
Té con Leche
Anotaciones
Te Negro
Te Chai
Fiesta
Fiesta Delactomy Anotaciones
Batidos Milkshake
Milkshake Delactomy
Naturales
Naturales en leche
Smoothies
Arrollado Brownie
Biscotti
Canastas Dulces
Empanadas Dulces
Cheesecake
Mil Hojas
Pan de Banano
Pie de Limón
Pie de Manzana
Pie de Mora
Pie de Pecanas
Quque de Café
Queque Churchill
Queque de Fresa
Queque de Oreo
Queque de Zanahoria
Queque Moka
Queque Navideño
Queque Seco
Quequitos
Rollos de Canela
Tamal de Elote
Tamal de Maicena
Torta Chilena
Volcán de Nutella
Repostería
Cakepops
Cupcake Navideño
Biscocho
Canasta de Cebolla
Cangrejos
Enchilada de Papa
Pastel de Carne
Pastel de Espinaca
Pati
Quiche de Palmito
Rollos de Queso
Tamal de Cerdo
Canasta de Pollo
Empanada de Carne
Bolsa de Manzanas
Postres y frutas
Café Temporada
Chorreadas
Tortilla con Queso
Desayuno Completo
Desayuno Omelette
Comidas Anotaciones
Dedos de Pollo
Ensalada Capresse
Ensalada de Pollo
Ensalada Dota
Plato del Día
Privilegios
Nombre/Mesa
Lista del pedido
Resumen del pedido
Costo total
Enviar pedido
73
6.11 Wireframes 1.2
De acuerdo a lo encontrado en el
paper prototyping se decide realizar Enviar Pedido
algunos cambios en los wireframes
como eliminar el botón de pedidos
Realizar Pedido
activos, agregar un buscador y se Piso 1 Piso 2 Jardín Bebidas Comidas Café CoopedotaD ulcería
realizan cambios en la forma de
visualizar las subcategorías con
el fin de que se identifiquen con Café Tradicionales
más facilidad como subcategorías Barra 1 1 2 3
independientes.
Café Calientes
4 5 6 7
Café Filtrados
8 9 10 11
Café Fríos
12 13 14 15
Té / Chocolate
16 17 18 19
Se decide colocar el número de la Se ubican las subcategorías en

mesa abajo con el fin de ubicar un recuadros para que se reconozcan
vector que identifique las mesas y sea como categorías independientes.
más fácil de identificar por el usuario.
Además se incorpora el buscador

y color en la parte superior para
aumetar importancia.
74
6.11 Wireframes 1.2
Cerrar orden Enviar Pedido
Realizar Pedido
Pedido Mesa 4
Bebidas Comidas Café CoopedotaD ulcería Piso 1 Piso 2 Jardín
Agregar persona Tradicionales

Pablo
Café negro
¢1000
Mesa 1
Chocolate de café 2 Barra 1 1 2 3
Café negro 1 Cappu moka Pedido por mesa

¢1000
Chorreada 2
Cappu moka 12 onz Cantidad de personas
Total ¢3 250 4 57
5 6 7
¢1000
Agregar
Cappu regular
¢1000
Cappu regular 12 onz 8 9

91 10 11
1
¢1000
Cappu con canela

¢1000
Cappu regular con chocolate 12 13 14 15

¢1000
Espresso bomba
¢1000
16 17 18 19
Espresso macchiato
¢1000
Al acceder al pedido activo por medio El resto de las pantallas no tuvieron cambios significativos.
de la mesa se visualiza únicamente
el pedido correspondiente a la mesa
seleccionada, se agrega la opción
de agregar personas al pedido, en
caso que sea una cuenta dividida
por personas, y se traslada el botón
de cerrar orden a la esquina superior
derecha. 75
6.12 Look and Feel
6.12.1Moodboard análisis de elementos de interacción

Se decide utilizar color blanco para el
fondo con acentuaciones de color en
la parte superior, botones y secciones
de importancia, con colores planos
de alta saturación y baja luminosidad,
además del uso de vectores flat.
Imagen 39
Moodboard análisis cromático
76
6.12 Look and Feel
Con base al moodboard de análisis de elementos de interacción se

determinan los siguientes conceptos y axiomas para ser utilizados en el
diseño de la interfaz.
Pocos elementos
Simple Uso de espacio negativo
Fondo blanco
Moderno
Pocos elementos
Amigable Diagramación estructurada
Utilización de íconos
Axiomas
Pocos elementos Espacio negativo Diagramación Un acento Utilización

estructurada de color de íconos
77
6.12 Look and Feel
6.12.2 Moodboard paleta cromática Se utilizan imágenes de diferentes

cafeterías y la planta de café con el fin
de determinar la cromática a utilizar
dentro de la aplicación.
Paleta de color del moodboard
Se selecciona este color

como acento dentro de la
aplicación ya que se utiliza
en los espacios analizados
como acento, es saturado y
representa el café maduro.
Imagen 40
Moodboard paleta crmática
78
6.12 Look and Feel
6.12.3 Iconografía
Se utilizan vectores flat con colores

en alta saturación y baja luminosidad
para las subcategorías.
Para navegación, configuración y

búsqueda se utilizan vectores más
simples debido a que en el análisis
de referenciales se determina que
son los más utilizados y con los
que el usuario está familiarizado,
además son fáciles de reconocer y no
necesitan texto explicativo.
Imagen 41
Iconografía
79
6.12 Look and Feel
6.12.4 Tipografía
Títulos y subtítulos Texto secundario Después de un análisis se determinó

que la tipografía Roboto es la
utilizada por las aplicaciones Android,
Roboto Medium Roboto Light por lo que se decide implementar,
abcdefghijklmnñopqrstuvw abcdefghijklmnñopqrstuvwx además esta tipografía presenta una
x y z 1 2 3 4 5 6 7 8 9 * + - # % & “” ¿? ¡! y z 1 2 3 4 5 6 7 8 9 * + - # % & “” ¿? ¡! alta legibilidad, lo cual es de mucha
importancia debido a que se está
ABCDEFGHIJKLMNÑOPQRST ABCDEFGHIJKLMNÑOPQRST desarrollando un software de trabajo
UVWXYZ UVWXYZ el cual debe ser lo más claro posible.
Texto general
Roboto Regular
abcdefghijklmnñopqrstuvw
x y z 1 2 3 4 5 6 7 8 9 * + - # % & “” ¿? ¡!
ABCDEFGHIJKLMNÑOPQRST
UVWXYZ
80
6.12 Look and Feel
6.12.5 Cromática
Cromática general Cromática vectores
35% 15% 8% 10%
2% 5% 5% 5%
5% 5% 5%
Matriz cromática
Cromática principal
Figura 12
Cromática
81
6.13 Prototipo
6.13.1 Escenario de registro
Se ingresa por medio de un usuario y

contraseña previamente establecido,
la pantalla se desarrolla con poca
información para un rápido ingreso.
Usuario
Contraseña
82
6.13 Prototipo
6.13.2 Registro de cliente El primer paso es registrar la mesa en la cual se ubica el cliente,
cuenta con un visuaizador de mesas ocupadas con el fin de evitar
equivocaciones. Se dividen las mesas por espacios piso 1, piso 2 y
jardín. Se ubican las categorías es la parte superior debido a que
el análisis presente en el marco teórico determino que esta es la
visualización más común de pestañas en Android.
Realizar Pedido
Piso 1 Piso 2 Jardín
Mesa ocupada
cambia de color
Barra 1 13 2
4 57 6
8 91 10 1
12 13 14 15
16 17 18 19
83
6.13 Prototipo
Luego de elegir la mesa se indica si la

cuenta es por mesa o por persona.
Realizar Pedido
BarraMesa
1 1 1 2 3
Pedido por mesa Elegir pedido por

mesa o por persona
4 Cantidad de5 personas 6 7 Si es por mesa
indicar cantidad de
personas
8 9 10 11
12 13 14 15
Listo, ir al paso
siguiente
16 17 18 19
84
6.13 Prototipo
Si se elige la cuenta por persona se

indican los nombres y al presionar
pedido se va a registrar un pedido
ligado al nombre indicado.
Realizar Pedido
BarraMesa
1 1 1 2 3
Pedido por persona
4 Carlos 5 6Pedido 7
Indicar nombre
Nombre Pedido
8 9 10 11
12 13 14 15
Finalizar pedidos
16 17 18 19
85
6.13 Prototipo
6.13.3 Registro del pedido Se selecciona los productos según categorías (bebidas, comidas,
café Coopedota, dulcería), dentro de cada categoría se elige la
subcategoría correspondiente a el producto elegido.
Enviar Pedido
Bebidas Comidas Café Coopedota Dulcería Categorías

Enviar Pedido Enviar Pedido
Bebidas Comidas Café Coopedota Dulcería Bebidas Comidas Café Coopedota Dulcería
Repostería Dulce Café Empacado
Café Tradicionales
Repostería Salada Café Granel
Comidas
Café Calientes Sub categorías Postres y Frutas
Café Filtrados
Enviar Pedido
Bebidas Comidas Café Coopedota Dulcería
Café Fríos Dulces
Mermeladas
Miel Santa María
Té / Chocolate
Miel La Reina
Miel Ecomiel
86
6.13 Prototipo
Al elegir la subcategoría se despliega

una lista con los productos
Enviar Pedido Enviar pedido ya correspondientes, una vez terminado
finalizado
el pedido se presiona “enviar pedido”.
Tradicionales
Repostería Dulce Café Empacado
Arrollado Brownie Café Dota Fresh 460 gr
Café negro
¢1000 ¢1000
¢1000
Elegir producto Biscotti
¢1000
¢1000
Canastas Dulces Café Exportación 75 gr

¢1000 ¢1000
Cappu moka Empanadas Dulces

¢1000
¢1000
¢1000 Cheesecake
¢1000
¢1000
Mil Hojas Café Infusión Quetzal

¢1000 ¢1000
Cappu moka 12 onz

Agregar anotaciones
Pan de Banano Café Quetzal 250 gr
¢1000 ¢1000
¢1000 Pie de Limón Café Quetzal 500 gr

¢1000 ¢1000
Pie de Manzana Café Reserva 75 gr

Cappu regular ¢1000 ¢1000
¢1000
Cappu regular 12 onz

¢1000
Dulces Miel Santa María
Cappu con canela Chocolate de café

¢1000
¢1000
¢1000 Chocolate Guayabita

¢1000
¢1000
Chocolate Milán Miel Santa María 200 gr
Cappu regular con chocolate ¢1000 ¢1000
Chocolate Milán Relleno Miel Santa María 275 gr
¢1000 ¢1000 ¢1000
Chocolate de Sabores Miel Santa María 470 gr

¢1000 ¢1000
Espresso bomba Choco-Mentas

¢1000
¢1000
¢1000 Tableta Tapita Polen Santa María

¢1000 ¢1000
Tapita
¢1000
Espresso macchiato Tri-Tapita

¢1000
¢1000
87
6.13 Prototipo
Si se requiere agregar una anotación al presionar el botón de

“lápiz” se despliega esta ventana para escribir la indicación
Enviar Pedido
correspondiente.
Calientes
Barraquito Cerrar
¢1000 Anotaciones
Dulcito
¢1000
Irlandés
¢1000
Mokaccino
¢1000
Pasión Los Santos

Listo
¢1000
88
6.13 Prototipo
6.13.4 Envío del pedido Una vez presionando el botón de “enviar pedido” aparece esta
pantalla de confirmación con el fin de evitar errores, si todo está
bien se presiona confirmar para enviar a comandas.
Resumen del pedido
Mesa 1
Pablo
Chocolate de café 2 Agregar y eliminar
productos
Café negro 1
Chorreada 2
Total ¢3 250
Enviar
89
6.13 Prototipo
6.13.5 Agregar productos a pedidos activos Si un cliente desea agregar más productos a su cuenta se
ingresa por medio de la mesa, al ingresar aparece la siguiente
pantalla en la cual se puede tanto agregar como eliminar
productos ya existentes (por medio de “más o menos”, al
presionar menos se envía una notificación a comandas para
eliminar la orden), o al presionar “agregar” se direcciona a la
Cerrar orden pantalla de categorías para seleccionar un nuevo producto.
Si es una cuenta dividida y llega una persona nueva, se

Pedido Mesa 4
presiona “agregar persona” para tomar la orden.
Agregar persona Agregar persona

Pablo
Chocolate de café 2 Agregar o eliminar
productos
Café negro 1
Chorreada 2
Total ¢3 250
Agregar Agregar nuevo
producto
90
Administrador
6.14 Investigación Previa
6.14.1 Supuestos y requerimientos
Necesidades Ventas por producto

Venta diaria
Resumen Diario Compras diarias
Para realizar la primer arquitectura
Resumen de ventas diario
se hicieron entrevistas a usuarios Cantidad de clientes
potenciales con el fin de determinar
las necesidades que se deben
Producto
satisfacer. Se determinan las Inventario
Cantidad disponible
siguientes:
-Visualizar ventas. Producto pronto a agotarse

Usuario Cantidad disponible
-Visualizar costos. Contraseña Cafetería
-Tener fácil acceso a el inventario. Ventas

Resumen mensual Costos
-Visualizar entradas por compra. Entradas
-Recibir notificaciones cuando un

producto del inventario está pronto a
Cerrar sesión
agotarse.
-Recibir estadísticas sobre la cantidad

de clientes que visitan el local.
92
Se realiza el análisis de una serie de aplicaciones que generan datos de forma

gráfica, con el fin de definir elementos de diseño utilizados por este tipo de
softwares.
6.15.1 Datally
Total sección superior
Indicador de fecha Opciones a elegir Semanal
Imagen 42
Referencial 1 Datally
(Fuente: Google Play)
93
Menú hamburguesa
Intervalos de fechas Intervalos de fechas
Mensual Mes | año
Imagen 43
Referencial 1 Datally
- Se puede seleccionar el gráfico entre hoy, -El único navegador es por medio de un
esta semana, mensual. menú hamburguesa en la pantalla principal
-Gráfico de barras simple, de fácil
entendimiento.
-Total en sección superior.
-Mucho espacio negativo.
-Jerarquía de datos por tamaño.
94
6.15.2 Fit
Resumen
Resumen de datos
Menú de opciones
Imagen 43
Referencial 2 Fit
95
Opciones
día, semana, mes
Resumen
Indicador
Imagen 44
Referencial 2 Fit
96
Opciones de visualización Diario | horas Semanal | días
Imagen 45
Aspectos positivos Referencial 2 Fit
- Se puede seleccionar el gráfico entre día,
semana, mes.
- Color para diferenciar datos dentro del
gráfico.
- En el inicio se muestran datos generales.
- Gráfico de barras, de fácil entendimiento.
- Información de lo general a lo específico.
- Al hacer scroll en la pantalla principal se
muestra más información.
- Uso de gran cantidad de espacio negativo.
-Uso de vectores.
-Gráficos interactivos.
-Al seleccionar despliega información más
detallada.
97
6.15.3 Podómetro
Sub menú con swipe
Hacer scroll
Menú Menú para visualizar más
Más detalle
División información
Resumen de datos por ventanas
Imagen 46
Referencial 3 Podómetro
98
Seleccionar por fecha
Indicación contenido
Aspectos positivos Imagen 47

Referencial 3 Podómetro
- Scroll para visualizar más datos.
- Menú interesante.
- Resumen de datos.
- Información de lo general a lo específico.
- Opciones para visualizar diferentes datos en
un gráfico
-Elección de fecha a visualizar.
- Gráficos de barras.
- Sub menú con swipe fácil, acceso a datos.
- Jerarquía de datos por tamaño.
-Colores complementarios.
-Gráficos interactivos.
-Se divide la información por ventanas.
detallada.
99
6.15.4 Simple Habit
Sub menú swipe
Más detalle
Opciones a elegir
Menú interactivo
por ventanas
Scroll visualizar más datos
Menú
Imagen 48
Aspectos positivos Aspectos negativos Referencial 4 Simple Habit
- Sub menú con swipe, lo que genera una - 3 menús en una misma pantalla.
navegación más rápida.
- De lo general a lo específico.
- Menú interactivo.
100
6.15.5 Today weather
Información por horas
Scroll para visualizar
Datos generales
Información semanal
Imagen 49
Aspectos positivos Referencial 5 Today weather

- Gráficos con uso de vectores
-Gráficos de barras, fácil entendimiento.
101
6.15.6 Gastos Diarios 3
Elegir tiempo de
visualización de datos
por ventanas
Imagen 50
Referencial 6 Gatos diarios 3
102
Elegir tiempo
de visualización
Información detallada
gastos
Imagen 51
Aspectos positivos Aspectos negativos Referencial 6 Gatos diarios 3
- Scroll para visualizar más datos. - Cromática con poca pertenencia.

-Gráficos de barras y pastel, fácil
entendimiento.
-Se puede seleccionar información entre día,
semana, mes, quincena, año.
-Uso de vectores.
detallada.
103
6.15.7 Wallet
Elección información
a visualizar
Resumen total
Estado general
de cuenta División información
por ventanas
Imagen 52
Referencial 7 Wallet
104
Resumen gastos
Detalle gastos
Imagen 53
Aspectos positivos Referencial 7 Wallet

- Uso de vectores
-Gráficos de pastel, fácil entendimiento.
-Al seleccionar despliega más detalle sobre
tema seleccionado.
-Visualización de tados en gráfico por color.
105
6.15.8 Mobills
Elegir mes
Resumen total a visualizar
por ventanas
Ventana abierta
pantalla plasta gris
Imagen 54
Referencial 8 Mobills
106
Elegir mes
Elegir mes
Mayor detalle
(al seleccionar)
Mayor detalle
(al seleccionar)
Aspectos positivos Imagen 55

Referencial 8 Mobills
-Gráficos de pastel, fácil entendimiento.
-Al seleccionar despliega más detalle sobre
tema seleccionado.
-Visualización de tados en gráfico por color.
-Elección del mes a visualizar (al presionar
más detalle).
-Notificaciones.
107
6.16 Tabla de Mínimos Comunes
Detally Fit Podómetro Simple habit Today weather Gastos Diarios Wallet Mobills
Tabla 2
Mínimos comunes
Conclusión
Se observa una tendencia a la visualización general de datos por medio de
ventas en la pantalla inicial, al seleccionar la información se despliega más de
detalle de la misma, se da una utilización de gráficos de barras y gráficos de
pastel, los cuales son fáciles de interpretar por los usuarios, también se genera
la opción de seleccionar diferentes fechas para visualizar la información de
los gráficos, esto con el fin de tener un mejor control de los datos, también
se analiza una tendencia en las aplicaciones al uso del scroll en la pantalla
de inicio con resúmenes de la información más importante. Cada uno de
estos aspectos se considera de importancia para incluir en el diseño de la
plataforma.
108
6.17.1 Creación de personas
Intereses Contexto
Rosaura es una licenciada en Debido a que ella tiene a cargo tres
administración de empresas, además cafeterías una ubicada en la Zona
de esto ella es oriunda de una zona de los Santos, otra en la provincia
cafetalera por lo cual desde muy de Cartago y otra en San José
pequeña se ha visto involucrada en la más específicamente San Pedro,
producción de este grano, al finalizar se tiene que estar movilizando
el colegio además de llevar la carrera constantemente a lo largo de la
Rosaura | Administradora de administración de empresas semana de una sucursal a otra.
tomó clases de barismo para El software implementado en
involucrarse aún más en los procesos actualmente en las cafeterías brinda
productivos del café ya a que gran cantidad de información
Necesidades llamaba fuertemente su atención. importante para ella, sin embargo
Actualmente ella es la administradora la única manera de visualizar esta
-Fácil acceso a el inventario
de las cafeterías de Coopedota, información es por medio de una
-Visualizar productos que están
este ha sido un gran logro para ella computadora lo cual se vuelve
pronto a agotarse
debido a que logró combinar sus dos complicado debido a la movilidad
-Ventas diarias
pasiones, el café y la administración, que ella presenta en su trabajo,
-Costos diarios
ella desea día con día hacer crecer sería de gran ayuda poder contar
-Entradas diarias
estos negocios y ambiciona en un con un dispositivo portátil donde
-Cantidad de clientes diariamente
futuro poder abrir más sucursales a lo pueda accesar a una plataforma en
-Resumen mensual de ventas, costos,
largo del territorio nacional e incluso la cual visualizar los datos de mayor
entradas y cantidad de clientes
incursionar en el mercado extranjero. importancia diariamente y así estar
informada constantemente y sacar
aún más provecho del software ya
instalado.
109
6.17.2 Consolidado de detalles 6.17.3 Análisis 2 by 2
1. Fácil acceso al inventario 10% Complejo
2. Visualizar productos pronto 10%

agotarse
3. Ventas diarias 20%
4. Costos diarios 20%
5. Entradas diarias 20%

3 5 2
6. Cantidad de clientes 10%
diariamente 1
4
7. Resumen mensual de ventas 10% 6
costos entradas y cantidad de clientes
7
Simple
Gráfico 3
Análisis 2 by 2
110
6.17.3 Gráfico de Pareto

Por medio de entrevistas se determina que
lo más importante para la administración es
visualizar las ventas, costos y entradas diarias,
sin embargo el acceso al inventario existente,
visualizar datos mensuales, cantidad de
clientes y tener un control de productos
100 pronto a agotarse también es de gran
importancia y se debe estar consultando
90 constantemente.
80
70
60
50
40
30
20
10
Ventas diarias Costos diarios Entradas diarias Acceso Inventario Resumen mensual Cantidad clientes Productos
pronto agotarse
Gráfico 4
Gráfico de Pareto
111
6.18 Arquitectura Alfa
Ventas
Costos
Venta diaria Total diario ventas Más detalle Entradas
Informe de ventas
Elegir visualizar diario, semanal, mensual
Total de bebidas
Total de bebidas Total de comidas
Total de comidas Lista de productos
Ventas por producto Más detalle Total de café CoopeDota
Total de café CoopeDota Total de dulcería
Total de dulcería 3 productos de mayor venta
Productos
Usuario Compra diaria Total diario compras Más detalle Proveedores Total de la factura
Contraseña
Total de ventas por día

Resumen diario Total de ventas por día Más detalle Elegir visualizar, semanal, mensual
Mayor venta
Menor venta
Inventario Productos pronto agotarse Más detalle Categoría Cantidad y productos disponibles
Total de clientes
Elegir visualizar, semanal, mensual
Cantidad de clientes Cantidad de clientes por hora Más detalle
Hora/día/ mes, mayor cantidad de clientes
Hora/día/ mes, menor cantidad de clientes
Productos pronto a agotarse
Punto de venta
Cerrar sesión
112
6.19 Card Sorting
6.19.1 Dendograma
Se aplica la prueba a un total de 6 administradores
02 46 81 01 21 41 61 82 02 22 42 62 83 03 23 43 63 84 04 24 44 64 85 05 25 45 65 86 06 26 46 66 87 07 27 47 6 78 80 82 84 86 88 90 92
Producto pronto a agotarse
Resumen Mensual
Costos
Entradas
Ventas
Categoría
Cantidad
Compra diaria
Resumen diario
Cantidad de clientes
Venta diaria
Ventas por producto
Inventario
Cerrar sesión
El hecho que la compra diaria, resumen diario y venta diaria llevaran la

palabra diario, generó pertenencia, por lo que se decide cambiar esta
nomenclatura para evitar confusiones en el usuario, al igual que se separa la
cantidad de clientes debido a que no pertenece a este grupo.
113
6.19 Arquitectura Alfa 1.2
Ventas
Costos
Venta total Total diario ventas Más detalle Entradas
Informe de ventas
Total de bebidas
Productos Vendidos Más detalle Total de café CoopeDota
Productos
Usuario Compras Total diario compras Más detalle Proveedores Total de la factura
Contraseña

Resumen de ventas Total de ventas por día Más detalle Elegir visualizar, semanal, mensual
Mayor venta
Menor venta
Inventario Productos pronto agotarse Más detalle Categoría Cantidad y productos disponibles
Total de clientes
Cantidad de clientes Cantidad de clientes por hora Más detalle
Productos pronto a agotarse
Punto de venta
Cerrar sesión
114
Ventas
Costos
1 Venta total Total diario ventas 2 Más detalle Entradas
3 Informe de ventas
3 Elegir visualizar diario, semanal, mensual
3 Total de bebidas
1 Productos Vendidos 2 Más detalle Total de café CoopeDota
3 Elegir visualizar diario, semanal, mensual
Productos
Usuario 1 Compras Total diario compras 2 Más detalle 3 Proveedores
Total de la factura
Contraseña

1 Resumen de ventas Total de ventas por día 2 Más detalle
Mayor venta
Menor venta
1 Inventario Productos pronto agotarse 2 Más detalle 3 Categoría Cantidad y productos disponibles
Total de clientes
3 Elegir visualizar, semanal, mensual
1 Cantidad de clientes Cantidad de clientes por hora 2 Más detalle
1 Productos pronto a agotarse
2 Punto de venta
1
2 Cerrar sesión
115
Conclusión
Se pasa de realizar un total de 5 clicks en el sistema actual a realizar

un máximo de 3, siendo este último click en la mayoría de casos para
información de mucha profundidad o para elección de la fecha a visualizar,
tomando en cuenta que lo más importante para la administración en
visualizar datos diarios para esta tarea debe realizar un click para ver el
resumen y dos para visualizar información detallada diaria.
116
6.21 Wireframes
Resumen Diario Resumen Diario

16 | 04 |2018 Fecha 16 | 04 |2018
Venta total Venta total
Productos Vendidos Venta Total ¢3 250

Usuario
Compras Productos Vendidos

Contraseña Categorías
Bebidas
Resumen de ventas Comidas
Dulcería
Café
Inventario
Compras
Se ingresa por medio de un En la pantalla inicial se visualiza Al seleccionar la categoría se

usuario y contraseña previamente la fecha actual, debido a que los visualiza un resumen, en la
establecidos. datos mostrados en esta pantalla mayoría de los casos gráfico,
son los del día de hoy. con información referente a lo
También se visualizan totas las seleccionado.
categorías disponibles con el fin
que el usuario pueda visualizar la
información que va a encontrar
en la aplicación.
117
6.21 Wireframes
Resumen Diario
16 | 04 |2018
Venta total
Venta Total ¢3 250

Ventas Productos Vendidos
Productos Vendidos
Bebidas
Comidas Sub total de ventas 13 250 Bebidas Presionar
Comidas
seleccionar
Dulcería
Café
Dulcería
- descuentos 1000
Café categoría
+ impuesto ventas 3 250
Compras
+ impuesto de servicio 3 250
Total de Compras ¢3 250

Venta total 3 250
Hoy
Resumen de ventas 3 250
Costos
Semanal
¢3 250
¢3 250 ¢3 250
Entradas 3 250
¢3 250
¢3 250
¢3 250
Producto de mayor venta
¢3 250
Hoy Botón de 100 Capuccino

D L M K J V S fecha
Inventario 85 Pan de zanahoria
2 Pan blanco | Cartago

Informe de ventas Descargar
4 Pan Zanahoria | San José informe 5 Café dulcito
1 Lechuga | Santa María
3 Pan blanco | San José
2 Pan blanco | Santa María
Al seleccionar más detalle en la En la sección de productos
100 100
100
venta total se da el desglose de vendidos, se visualiza
100
100
ventas costos y entradas diarias, gráficamente las categorías

además se puede descargar el de mayor y menor venta. Al
100
9
91 11
11 1 3
35 5 77 informe de ventas. seleccionar alguna categoría
También muestra la opción de genera la lista de los productos
visualizar un informe anterior vendidos, también da la opción
Así se visualizarían o posterior según sea el caso o de elegir fecha y además muestra
todas las categorías elegir entre diario, semanal o los tres productos de mayor
desplegadas. mensual, según la elección del venta.
usuario en el botón de fecha.
118
6.21 Wireframes
Bebidas Compras Resumen de Ventas
Producto Venta Semanal

Cindy Ganados
¢3 250
50 x Batido Fiesta 50 000 ¢3 250 ¢3 250
¢3 250
50 x Cappu Moka 32 000 Dos Pinos ¢3 250

¢3 250
¢3 250
45 x Batidos 30 000
Coope Dota
30 x Café negro 29 000
D L M K J V S
25 x Sodas italianas 25 000
Cindy Ganados
25 x Batido mora 23 000 Esta semana
22 x Capuccino 20 000
Dos Pinos
20 x Café dulcito 19 500
Menor venta Mayor venta
15 Café irlandés 15 000 38 560 38 560
Coope Dota
14 x Batidos frutas 13 250
12 x Café con leche 13 000

Coope Dota
10 x Café Los Santos 13 000
1500 Dos Pinos
1 chateau 1500
Al seleccionar la categoría se En la sección de compras se Al seleccionar resumen de ventas

muestra una lista con cantidad muestran las compras diarias se muestra un resumen semanal
y venta de cada uno de los según el proveedor, al seleccionar para visualizar los días de mayor y
productos, ya sean bebidas, el proveedor se muestra los menor venta, también se puede
comidas, café CoopeDota o productos y total de la factura. visualizar mensualmente.
dulcería.
119
6.21 Wireframes
Inventario Bebidas Cantidad de clientes

Categoría
Producto Venta
Producto Cantidad 50 x Batido Fiesta 50 000 100 100

100
50 x Cappu Moka 32 000 100

Café Dota 1
45 x Batidos 30 000
100
Leche 500ml 2 100
Leche Delactomy 500ml 2 30 x Café negro 29 000
Azúcar 2kg 9 25 x Sodas italianas 25 000 9 11 1 3 5 7
Sal 10 25 x Batido mora 23 000

Hoy
Jamón 800 gr 22 x Capuccino 20 000
Arroz 15 20 x Café dulcito 19 500

150 Total de Clientes
Lechuga 10 15 Café irlandés 15 000
Tomate 5 kg 50 4pm Mayor cantidad de clientes
14 x Batidos frutas 13 250
Pepino 3 kg
12 x Café con leche 13 000
Pan artesanal 25 5 10 am Menor cantidad de clientes
10 x Café Los Santos 13 000
Pan blanco 20
1500
Queso 15 kg
1 chateau 1500
Mantequilla 20
En la sección de inventario se Al seleccionar la categoría se En la pantalla de cantidad de

elige la categoría y se muestra muestra una lista con cantidad clientes se muestra el total y
los productos existentes y la y venta de cada uno de los cantidad de clientes según la
cantidad, cuando un producto productos, ya sean bebidas, hora con el fin de visualizar las
está pronto a agotarse muestra comidas, café CoopeDota o horas de mayor y menor tránsito
un diferenciador. dulcería. de personas.
120
6.21 Wireframes
Productos Vendidos Resumen Diario

Auren Chacón Resumen Diario
16 | 04 |2018
Bebidas
Comidas Punto de venta
Dulcería
Café
Venta
Pan total x 2-Dota
Integral
ON
Leche 500ml x 2-Cart

Venta Total ¢3 250 Venta Total ¢3 250
Cerrar sesión
Leche 500ml x 2-SJ
Productos Vendidos
Hoy
Hoy Flechas
Venta semanal
Esta Semana adelantar o
retrasar Bebidas
¢3 250
Este mes ¢3 250 ¢3 250
¢3 250 Comidas
Producto de mayor venta ¢3 250
¢3 250
Dulcería
¢3 250
Café
100 Capuccino
DL MK JV S
85 Pan de zanahoria
5 Café dulcito Compras
Al presionar el botón de fecha se Al presionar el botón de Cuando hay notificaciones se

puede elegir entre día, semana configuración se puede elegir muestra un número en el ícono
y mes, además al presionar las el punto de venta a visualizar, de la campana, al seleccionar
fechas se visualiza información activar y desactivar notificaciones este ícono se muestra una
del día, semana o mes anterior o y cerrar sesión. pantalla con los productos pronto
posterior según sea el caso. a agotarse, cantidad existente y
punto de venta.
121
Se realiza la prueba a un total de 6 administradores.
Resumen Diario Resumen Diario Productos Vendidos

16 | 04 |2018 16 | 04 |2018
Bebidas
Comidas
Dulcería
Venta total Venta total Café
Productos Vendidos Venta Total ¢3 250
Compras Productos Vendidos

Hoy
Hoy
Esta Semana
Bebidas
Resumen de ventas Comidas
Este mes
Dulcería Producto de mayor venta

Café
Inventario 100 Capuccino
85 Pan de zanahoria
Compras 5 Café dulcito
Visualizar Venta total Visualizar información más detallada

Objetivo: comprobar si presionan el
ícono de más para ingresar a ver
más detalles.
122
3
Conclusión
Los usuarios completaron con éxito
Resumen Diario todas las tereas, por lo que no se
16 | 04 |2018 generan cambios en los wireframes.
Venta
Pan total x 2-Dota
Integral
Leche 500ml x 2-Cart

Venta Total ¢3 250
Leche 500ml x 2-SJ
Productos Vendidos
Bebidas
Comidas
Dulcería
Café
Compras
123
6.23 Look and Feel
6.23.1Moodboard análisis de elemntos de interacción

Se decide utilizar color blanco para el
fondo con acentuaciones de color en
la parte superior, botones y gráficos,
con colores planos de alta saturación
y baja luminosidad, además del uso
de vectores flat.
Respecto a los axiomas se determina

que este moodboar genera los
mismos axiomas antes expuestos, lo
cual beneficia al estudio ya que se
pretende crear pertenencia entre las
aplicaciones, con uno adicional que
es la disposición de la información de
forma gráfica para esta interfaz.
Imagen 56
Moodboard análisis cromático
(Fuente: elaboración propia
124
6.23 Look and Feel
6.23.2 Iconografía
Se utilizan vectores flat con colores

saturados y de baja luminosidad para
las categorías.
Se desea mantener la pertenencia

entre la interfaz del mesero y el
administrador, por lo tanto se eligen
vectores con el mismo estilo gráfico.
Imagen 57
Iconografía
125
6.23 Look and Feel
6.23.3 Tipografía
Títulos Texto Se utiliza nuevamente la tipografía

Roboto debido a que anteriormente
se determinó que es la más
Roboto Medium Roboto Light adecuada.
abcdefghijklmnñopqrstuvw abcdefghijklmnñopqrstuvwx
x y z 1 2 3 4 5 6 7 8 9 * + - # % & “” ¿? ¡! y z 1 2 3 4 5 6 7 8 9 * + - # % & “” ¿? ¡!
ABCDEFGHIJKLMNÑOPQRST ABCDEFGHIJKLMNÑOPQRST
UVWXYZ UVWXYZ
Sutítulos
Roboto Regular
abcdefghijklmnñopqrstuvw
x y z 1 2 3 4 5 6 7 8 9 * + - # % & “” ¿? ¡!
ABCDEFGHIJKLMNÑOPQRST
UVWXYZ
126
6.23 Look and Feel
6.23.4 Cromática
Cromática general Cromática gráficos
35% 20% 8% 5%
5% 5% 5% 5%
5% 5% 2%
Matriz cromática Se mantiene en su mayoría la

cromática utilizada en la aplicación
de los meseros, esto para generar
pertenencia y unidad.
Cromática principal
Figura 14
Crmática
127
6.24 Prototipo
6.24.1 Escenario de registro
Se ingresa por medio de un usuario y

contraseña previamente establecidos.
Se genera un diseño simple con

pocos elementos, con el fin de no
confundir a el usuario.
Usuario
Contraseña
128
6.24 Prototipo
6.24.2 Pantalla de inicio
En la pantalla de inicio se visualizan

las categorías que contiene la
aplicación, esto con el fin que el
Resumen Diario usuario pueda visualizar el tipo de
información que puede encontrar.
16 | 04 |2018 Fecha
En la sección superior se muestra
la fecha a la cual pertenece la
Venta total información expuesta, esta fecha
cambia diaria mente con el fin de
mostrar información del día a día.
Productos Vendidos
Compras Categorías
Resumen de ventas
Inventario
129
6.24 Prototipo
6.24.3 Información resumida

Resumen Diario
16 | 04 |2018
Al seleccionar una categoría esta Venta total
desprende un resumen de acuerdo Venta Total ¢3 250

Venta Total ¢3 250
a la categoría seleccionada, este
Resumen Diario resumen es diario y pertenece
16 | 04 |2018
Productos Vendidos
a la fecha mostrada en la parte
superior. Bebidas
Comidas
Dulcería
Café
Venta total
Compras
Venta Total ¢3 250 Total de Compras ¢3 250

Venta Total ¢3 250 Resumen
Resumen de ventas
Semanal
¢3 250
¢3 250 ¢3 250
¢3 250
Productos Vendidos
¢3 250
¢3 250
¢3 250
D L M K J V S
Bebidas Inventario
Comidas
Dulcería 2 Pan blanco | Cartago
Resumen
4 Pan Zanahoria | San José
Café 1 Lechuga | Santa María
3 Pan blanco | San José
2 Pan blanco | Santa María
100 100
100
Compras 100
100
100
9 11 1 3 5 7
Regresar a
sección superior Subir
130
6.24 Prototipo
6.24.4 Información detallada
Al seleccionar más información en

cada una de las categorías se muestra
una pantalla con información
más detallada sobre cada tema
y la opción de elegir visualizar
la información diaria, semanal o Ventas Productos vendidos
mensual, además de navegar entre
fechas anteriores y posteriores según
Sub total de ventas 100 000
sea el caso.
- descuentos 2500
+ impuesto ventas 20 000
+ impuesto de servicio 15 000
Venta total 132 500 Bebidas Comidas Dulcería Café
- Costos 75 000
Hoy
Entradas 57 500
Producto de mayor venta

Hoy
100 Capuccino
85 Pan de zanahoria
Informe de ventas
5 Café dulcito
Pantalla de ventas Pantalla productos vendidos

131
6.24 Prototipo
Bebidas Compras Dos Pinos

Producto Venta Cindy Granados 10 x Leche entera 20 000
5 x Batido Fiesta 13 250 10 x Leche descremada 25 000

Dos Pinos
20 x Cappu Moka 32 000
5 x Queso crema 500 gr 10 000
5 x Batido Fiesta 13 250 Coope Dota
15 x Mantequilla Dos Pinos 8 500
5 x Batido Fiesta 13 250
5 x Batido Fiesta 13 250 Huevos La Chunita Total 64 500

Coronado

Fernando Cordero
5 x Batido Fiesta 13 250 María Salazar

5 x Batido Fiesta 13 250 RIMADOTA S.A

Carlos Sandoval
Pantalla detalle lista de productos Pantalla compras Pantalla detalle de compras

vendidos
132
6.24 Prototipo
Resumen de ventas Inventario Cantidad clientes

Categoría
Semanal
¢3 250
Producto Cantidad
¢3 250 ¢3 250 100 100
100
¢3 250
¢3 250
¢3 250 100
¢3 250 Café Dota 1

100
100
Leche 500ml 2
Leche Delactomy 500ml 2

D L M K J V S 9 11 1 3 5 7
Azúcar 2kg 9
Esta semana Sal 10 Hoy
Arroz1 5
Menor venta Mayor venta Lechuga 10 150 Total de Clientes

38 560 38 560
Tomate5 kg
Pepino 3 kg 50 4pm Mayor cantidad de clientes
Pan artesanal 25
5 10 am Menor cantidad de clientes
Pan blanco 20
Queso 15 kg
Pantalla resumen de ventas Pantalla inventario Pantalla cantidad de clientes
133
6.24 Prototipo
6.24.5 Configuración | notificaciones
Al presionar configuración se puede

elegir el punto de venta, activar/ 3
desactivar las notificaciones y cerrar
sesión.
Resumen Diario
En la sección superior izquierda se 16 | 04 |2018
Cantidad clientes
ubican las notificaciones, cuando hay
una nueva notificación aparece un Auren Venta
Chacóntotal
número, al seleccionar se muestran Venta total
los productos pronto a agotarse, la 100
Pan Integral
100
x 2-Dota
cantidad y el punto de venta. Punto de venta 100
Productos
Venta total Vendidos Leche 500ml x 2-Cart 100
ON
100
Leche
100
500ml x 2-SJ
Compras
9 11 1 3 5 7
Compras
Hoy
Resumen de ventas
150 Total de Clientes
Inventario
Inventario 50 4pm Mayor cantidad de clientes
Cantidad de clientes 5 10 am Menor cantidad de clientes

Cerrar sesión
Pantalla configuración Pantalla notificaciones
134
Conclusiones y
07 Recomendaciones
7.1 Conclusiones
Con el rediseño de la interfaz de meseros se logra agilizar el proceso de toma

de pedidos y evitar errores en la introducción de datos debido a:
-Se diseña una interfaz intuitiva por medio de una correcta arquitectura de
información mostrando paso a paso los datos para tomar el pedido, evitando
saturar una misma pantalla con gran cantidad de información que pueda
confundir al mesero. Además se genera una interfaz amigable para el usuario
por medio del diseño de una interfaz estructurada, poca utilización de
elementos y el empleo de íconos.
-Se dividen los productos por categorías para que la búsqueda sea más
rápida, evitando el uso del buscador y el teclado.
-Para evitar errores en la toma de pedidos se utiliza un visualizador gráfico

de mesas ocupadas, lo cual evita un erróneo registro de la mesa en la toma
del pedido, además se crea una pantalla con el resumen del pedido previo
a enviarlo a comandas, debido a que muchas veces las personas cambian
de opinión al instante de pedir la orden y si ya se ha enviado el producto a
comandas genera pérdidas de insumos al cancelar la orden.
-Se agiliza el pago en caja por medio de la opción de dividir la cuenta en la

toma del pedido, lo que genera un pago más rápido ya que las cuentas llegan
a la caja por persona y no por mesa.
136
7.1 Conclusiones
Con respecto a la interfaz de la administración se agiliza la visualización de

datos debido a:
-Al generar una interfaz para teléfono celular la administradora puede

visualizar los datos en cualquier lugar sin necesidad de una computadora y
un espacio para utilizarla.
-Por medio de entrevistas a administradores se determinan los datos de

importancia para ser mostrados en la interfaz los cuales son: ventas, costos
y entradas tanto diarias como mensuales, acceso al inventario y cantidad de
clientes que visitan el local.
-Se da una correcta arquitectura de información en la cual con tan solo tres
clicks puede visualizar los datos de importancia.
-Se presenta la información de manera gráfica para un entendimiento más

eficaz y rápido, además de contar con la opción de hacer comparaciones
respecto a días, semanas y meses anteriores.
-Se diseña una interfaz intuitiva y amigable con el usuario por medio del uso
de pocos elementos, disposición de la información de forma estructurada, el
uso de íconos y gráficos para mostrar la información.
137
7.2 Recomendaciones
-Para facilitar la comercialización de la aplicación de los meseros, como por

ejemplo para subirla a Google Play, se recomienda el diseño de una sección
en la cual el usuario pueda seleccionar y personalizar el menú a mostrar.
-Para el desarrollo de las aplicaciones se recomienda utilizar un diseño

responsivo que permite adaptarse a las diferentes resoluciones y tamaños de
pantallas de los diversos dispositivos.
138
08 Referencias bibliográficas
8.1 Referencias Bibliográficas
Castro, F. H. (s.f.). Usability Cookbook.
Coreldraw. (s.f.). Coreldraw. Obtenido de Coreldraw.
Google. (s.f.). thinkwithgoogle. Obtenido de thinkwithgoogle.
Lic. Enriquez Juan Gabriel, D. C. (2013). dialnet.unirioja. Obtenido de dialnet.

unirioja.
material.io. (s.f.). Obtenido de material.io.
UCR. (2018). Cicap UCR. Obtenido de Cicap UCR.
Vittone, J. “. (2013). App Desing Book.
140

Diseño Interfaz para Aplicacion Movil Utilizada Cafeterias

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Diseño Interfaz para Aplicacion Movil Utilizada Cafeterias

Cargado por

Copyright:

Formatos disponibles

Tecnológico de Costa Rica

Escuela de Ingeniería en Diseño Industrial

DISEÑO DE INTERFAZ PARA APLICACIÓN

Proyecto de Graduación para optar por el título de Ingeniería

Valeria Rodríguez Gutiérrez

Cartago, I Semestre 2018

6. Desarrollo del proyecto _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 45

6.5 Arquitectura Alfa _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 60

7. Conclusiones y recomendaciones_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 135

8. Referencias bibliográficas_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 139

Actualmente en Costa Rica las cafeterías tienen un gran auge debido a la

Al mismo tiempo los sistemas electrónicos y tecnológicos se encuentran

En el mercado existen gran cantidad de ofertas para el desarrollo de estas,

Debido a esto las empresas dedicadas a la venta de café preparado necesitan

El presente proyecto es el diseño de una interfaz para aplicación móvil de

La empresa TS Solutions ofrece servicios de tecnología de información,

Esta empresa vio la necesidad presente en las cafeterías de optimizar los

Cafeterías Privilegios - Sección de inventarios, por medio el estado financiero de la empresa.

de la información en la interfaz movilizarse de una cafetería a otra

El otro problema existente es

2.2.1 Interfaz meseros

Nuevo pedido A presionar elegir producto aparece la pantalla

Buscar por nombre

2.2.2 Cantidad de clicks para realizar un pedido

-No existe la opción de dividir mesa. confirmación antes de enviar los

-Es un sistema web, no una aplicación

-No existe la opción de agregar

-No se pueden visualizar las mesas

-Se presenta gran cantidad de

-No existe un mensaje de

2.3.1 Journey map

Se presentan tres personajes, el

Se explica paso a paso cada una de

Imagen 5 Imagen 6 Imagen 7

1. Entrada al local 2. Elección de mesa 3. Atención del mesero

Imagen 8 Imagen 9 Imagen 10

Objetivo Objetivo Objetivo

4. Pedir comida 5. Comer 6. Pagar

Imagen 11 Imagen 12 Imagen 13

Objetivo Objetivo Objetivo

¿Qué hace? ¿Qué hace? ¿Qué hace?

No existe la opción de dividir mesa, lo cual ocaciona problemas de pago en caja.

2.2.4 Interfaz de la administradora

Imagen 14 Imagen 15 Imagen 16

Facturación Informe diario de ventas Informe detallado de ventas

Imagen 17 Imagen 18 Imagen 19

Listado de facturas Detalle de facturas Lista de clientes

Imagen 20 Imagen 21 Imagen 22

Órdenes de compra Resumen diario de inventario Lista de proveedores

Imagen 23 Imagen 24 Imagen 25

2.2.4 Cantidad de clicks | Visualizar productos vendidos

Se debe de realizar un total de 5 clicks para ingresar a la información, en este

2.5.1 Journey map

Se presenta el personaje del

El administrador debe trabajar en 3

1. Visualizar inventario 2. Resumen diario de ventas 3. Visualizar productos vendidos

Imagen 27 Imagen 28 Imagen 29

Objetivo Objetivo Objetivo

4. Cantidad de clientes 5. Visualizar compras

¿Qué hace? ¿Qué hace?

¿Qué funciona? ¿Qué funciona?

El software provee esta información. El software provee esta información.

¿Qué no funciona? ¿Qué no funciona?