TALLER DE

APLICACIONES MÓVILES
SEMANA 7 CANVAS Y PROTOTIPOS.
 ESCUELA DE CONSTRUCCIÓN E INGENIERÍA

Director: Marcelo Lucero

ELABORACIÓN

Experto disciplinar: Javier Miles

Diseño instruccional: Felipe Molina

VALIDACIÓN

Experto disciplinar: Helmut Aubel

Jefa de Diseño Instruccional: Alejandra San Juan Reyes

EQUIPO DE DESARROLLO

AIEP

AÑO

2021

Taller de Aplicaciones Móviles • Semana 7 – 2

Tabla de contenidos

Introducción ............................................................................................................ 4
1. Definición de innovación para el diseño de una solución tecnológica .... 5
2. Modelo Canvas .............................................................................................. 8
3. Introducción a la usabilidad y el diseño de UI (interfaz de usuario) mobile
12
4. Prototipado, mockup y wireframe en aplicaciones móviles y
herramientas más utilizadas ............................................................................... 13
5. Patrones y anti-patrones de diseño UI Android ...................................... 16
Mapas ................................................................................................................. 17

Elementos de Navegación y Acciones ........................................................... 17

Toolbar ................................................................................................................ 19

El botón de acción flotante ............................................................................. 19

6. Construcción de prototipo no funcional .................................................. 20

Conclusiones ......................................................................................................... 21
Referencias ............................................................................................................ 22

Taller de Aplicaciones Móviles • Semana 7 – 3

Aprendizaje esperado de la semana

Construir prototipo no funcional de aplicación móvil, de acuerdo con

modelo Canvas para desarrollo de idea de negocio, considerando
limitación de afirmaciones.

Introducción
• ¿Qué tan atractivo es mi producto?
• ¿Cuál es el valor agregado que tiene mi producto?
• ¿Cómo mostrar mi producto?

Durante esta semana, nos dedicaremos a crear una propuesta de valor

para un producto, dando respuesta a las interrogantes anteriores,
generando un modelo de negocios, y la generación de un prototipo no
funcional.

Taller de Aplicaciones Móviles • Semana 7 – 4

 1. Definición de innovación para el diseño de una

solución tecnológica

La Innovación Tecnológica es la implementación de ideas nuevas en

una institución. No se trata de “Inventar” nuevas cosas, sino que, más
bien, es el observar la tecnología actual, y “agregar valor” a este nuevo
producto o servicio.

“Innovación Progresiva o de cambio sostenido: La mayoría de los

casos de Innovación Tecnológica tiene que ver con un cambio
progresivo y continuado en el tiempo. Así, productos, servicios, o
procesos internos, van adaptándose a las mejoras tecnológicas que
aparecen en el mercado. Este tipo de innovación no genera nuevos
mercados, pero es menos arriesgado: los consumidores ya conocen
el producto, y se les ofrece uno que mejora la versión que ya
conocían; o se les ofrece mediante canales o procesos diferentes.
Además, los trabajadores deben variar mínimamente sus procesos,
con la promesa de mejorar su eficacia. Dentro de este tipo de
Innovación Tecnológica se incluyen acciones como implementar
una estrategia de Presencia Digital o abrir nuevos canales de venta
online.
Disruptiva: La Innovación Tecnológica disruptiva se refiere a un
cambio exhaustivo en la tecnología, generando nuevos valores,
transformando un mercado por completo o creando uno nuevo.
Consiste así en generar modelos de negocio en los que se ataca a
nuevas posibles fuentes de ingresos. Este concepto fue introducido
en la publicación Harvard Business Review por Joseph L. Bower y

Taller de Aplicaciones Móviles • Semana 7 – 5

 Clayton M. Christensen en 1995. Se trata de una innovación que, en
un principio, atrae a un nicho de clientes o empresas innovadoras, sin
llegar a los segmentos más convencionales. En este caso, el riesgo de
adoptar esta innovación es más alto, ya que al principio el mercado
ya existente es mayor. No obstante, aplicar la innovación disruptiva
también implica que los márgenes de beneficio serán mayores, en
caso que sea aceptada.

Radical: Una Innovación Tecnológica radical genera tanto nuevos

modelos de negocio como tecnologías novedosas, creando a su vez
nuevas soluciones e incluso nuevas necesidades. Un ejemplo de este
tipo de transformación disruptiva es la llegada del ordenador
personal a los mercados. En la actualidad, las aplicaciones de
Inteligencia Artificial o Deep Learning son consideradas las
tecnologías que traerán innovaciones radicales a los mercados,
generando nuevos modelos de negocio, productos y servicios.
Además, este tipo de Innovación Tecnológica se caracteriza por
generar una base desde la cual aparecen otras innovaciones. De
este modo, son plataformas que aceleran el crecimiento económico
global.” (BeeDIGITAL, 2021)

-Definición de IoT y su aplicación en diferentes ámbitos de la industria

“La Cuarta Revolución Industrial, también conocida como industria 4.0,
está cambiando la forma en que los negocios operan y, por lo tanto,
los entornos en los se ven obligados a competir.
La Industria 4.0 implica la promesa de una nueva revolución que
combina técnicas avanzadas de producción y operaciones con

Taller de Aplicaciones Móviles • Semana 7 – 6

tecnologías inteligentes que se integrarán en las organizaciones, las
personas y los activos.

Esta revolución está marcada por la aparición de nuevas tecnologías

como la robótica, la analítica, la inteligencia artificial, las tecnologías
cognitivas, la nanotecnología y el Internet of Things (IoT), entre otros. Las
organizaciones deben identificar las tecnologías que mejor satisfacen
sus necesidades para invertir en ellas. Si las empresas no comprenden
los cambios y oportunidades que trae consigo la Industria 4.0, corren el
riesgo de perder cuota de mercado.

Para los líderes tradicionales, acostumbrados a los datos y las

comunicaciones lineales, el cambio que supone esta nueva revolución
industrial -proporcionando acceso en tiempo real a los datos y la
inteligencia de negocio- transformará la forma en que llevan a cabo
sus negocios. La integración digital de la información desde diferentes
fuentes y localizaciones permite llevar a cabo negocios en un ciclo
continuo. A lo largo de este ciclo, el acceso en tiempo real a la
información está impulsado por el continuo y cíclico flujo de
información y acciones entre los mundos físicos y digitales. Este flujo
tiene lugar a través de una serie de pasos iterativos conocido como PDP
–por sus siglas en inglés physical-to-digital-to-physical:
Del mundo físico al digital. Se captura la información del mundo físico
y se crea un registro digital de la misma.

Taller de Aplicaciones Móviles • Semana 7 – 7

 De digital a digital. En este paso, la información se comparte y se
interpreta utilizando analítica avanzada, análisis de escenarios e
inteligencia artificial para descubrir información relevante.

Del mundo digital al físico. Se aplican algoritmos para traducir las

decisiones del mundo digital a datos efectivos, estimulando acciones y
cambios en el mundo físico.” (¿Qué es la Industria 4.0?, 2018)

2. Modelo Canvas
El modelo Canvas, es una herramienta que permite analizar y crear
modelos de negocio de forma simplificada.

Ilustración 1: (Admin, 2021) Modelo Canvas

1. Segmento de clientes: En este ámbito, se debe detectar las

necesidades del cliente. Nuestro foco siempre es el cliente. Entonces,

Taller de Aplicaciones Móviles • Semana 7 – 8

debemos conocer muy bien el público objetivo y a quién va dirigida la
oferta.

Acá se aplica el concepto de “empatía”, de manera que podamos

identificar sus gustos, preferencias y deseos, de manera que puede
aportar a nuestro producto/servicio.

Dando respuestas a :

• ¿Cuáles son las características de los consumidores/clientes?

Ejemplo: (Edad, género, lugar de residencia)
• Si el mercado es empresarial, ¿cuáles son las características de las
empresas clientes? (sector, tamaño, necesidades)
• ¿Quién compra?
• ¿Quién usa?

2. Propuesta de valor: se debe especificar la propuesta de valor o

ventaja competitiva el cual es donde el cliente decide el comprar
nuestro producto frente a otros. Innovar, significa transformar y mejorar
lo que ya está. Se puede innovar en diferentes aspectos como en el
modelo de ingresos, alianzas empresariales, procesos productivos,
entrega del producto/servicio, etc. En cada uno de estos puntos, se
puede innovar (forma de hacer las cosas de manera novedosa).

Debemos dar respuesta a:

• ¿De qué se trata?

• ¿Cuál fue la inspiración para crearlo?
• ¿Cómo funciona?
• ¿Qué tiene de distinto al resto?

Taller de Aplicaciones Móviles • Semana 7 – 9

3. Canales: Ya habiendo definidos qué vamos a vender y a quién lo
venderemos, es momento de definir cómo llegaremos a estos clientes.
Si no nos conocen, no nos van a comprar. Aquí vamos a definir los
canales de distribución del producto o servicio.

Debemos dar respuesta a:

• ¿Con qué canales podemos llegar a nuestros clientes?

• ¿Qué canales funcionan mejor?
• ¿Cuáles de estos canales son los más rentables?
• ¿Qué medios y formas de contacto utilizaré con el cliente para
que conozca mi producto o servicio?
• ¿Son estos los medios usuales en el sector?
• ¿Cómo se logrará que el mensaje llegue a los destinatarios
deseados?

4. Relación con los clientes: Habiendo sabido lo que vamos a vender, y

cómo vamos a promoverlo, ahora debemos saber cómo vamos a
relacionarnos con nuestro cliente, de manera que no sea una compra
y luego nos desentendemos del cliente.

Debemos dar respuesta a:

• ¿Cómo haremos para que sea nuevamente nuestro cliente, luego

de la primera compra?
• ¿Cuál es la relación que tenemos con cada uno de nuestros
segmentos de clientes?
• ¿Qué tipo de relación esperan?
• ¿Qué coste tiene?

Taller de Aplicaciones Móviles • Semana 7 – 10

5. Flujo de ingresos: Todo negocio, necesita ser rentable, para poder
continuar en el mercado. Entonces, en este apartado se debe
identificar cómo ganar dinero. Por ejemplo, modelos freemium,
premium y free.

Debemos dar respuesta a:

• ¿Cómo ganamos dinero?

• ¿Cómo pagarán los clientes?
• ¿Por qué están dispuestos a pagar nuestros clientes?

6. Recursos clave: Acá especificamos todos los recursos necesarios para

que pueda funcionar nuestro negocio, de manera eficiente.

Debemos dar respuesta a:

• ¿Qué necesitamos para que funcione el negocio?

7. Actividades clave: Es el listado de acciones que realizaremos, para

que el modelo de negocio sea eficaz. Es decir, aquí estampamos lo que
haremos en nuestro día a día en el negocio.

Debemos dar respuesta a:

• ¿Qué actividad básica requiere nuestra propuesta de valor?

• ¿Cuáles son nuestros canales?
• ¿Qué actividades son necesarias para entregar la propuesta de
valor al cliente?
• ¿Qué actividades necesitas dominar para identificar a los
potenciales clientes?

Taller de Aplicaciones Móviles • Semana 7 – 11

8. Aliados clave: debemos identificar quiénes nos ayudarán a llevar a
cabo nuestro negocio, como por ejemplo alguna empresa de
transporte, correo, distribución, etc.

Debemos dar respuesta a:

• ¿Quiénes son nuestros socios clave en el mercado?

• ¿Quiénes son nuestros proveedores?

9. Estructura de costes: Acá definimos cuánto debemos desembolsar, y

para qué debemos desembolsar dinero, gastos del negocio, etc.

Debemos dar respuesta a:

• ¿Cuáles son los costes más importantes dentro de nuestro modelo

de negocio?
• ¿Qué recursos clave son los más costosos?
• ¿Qué actividades clave son las más costosas?

3. Introducción a la usabilidad y el diseño de UI (interfaz

de usuario) mobile
La usabilidad en las aplicaciones móviles es uno de los elementos
fundamentales para el éxito de tu app. Gran parte del éxito que las
aplicaciones móviles han alcanzado depende en parte a la usabilidad
que ofrecen smartphones y tablets, como la utilización de gestos
táctiles que son los realizados a través de elementos como teclados o
ratones.

Es importante tener en cuenta, en términos de usabilidad, que una

aplicación debe ser efectiva y eficiente. La efectividad, tiene relación

Taller de Aplicaciones Móviles • Semana 7 – 12

con el cumplimiento del objetivo. Es decir, el usuario podrá encontrar lo
que necesita, pero no consideramos cuánto tiempo le costará
encontrar lo que busca. Entonces, la aplicación no es eficiente. Una
app, debe satisfacer necesidades en el menor tiempo posible y sin
necesidad que el usuario tenga grandes conocimientos de su uso o
requiera un largo proceso de aprendizaje (Eficiencia).
“Las apps deben llegar a la efectividad y la eficiencia mediante una
buena experiencia de usuario. Sólo de esta manera se generarán en
los consumidores una serie de emociones que le aporten confianza
para repetir. Por tanto, la usabilidad es un mecanismo fundamental
a la hora de fidelizar a los usuarios en el ámbito de las aplicaciones
móviles.” (Yeeply, 2020)

4. Prototipado, mockup y wireframe en aplicaciones

móviles y herramientas más utilizadas
Para poder generar prototipos, se puede realizar por medio del
software Pencil, y para ello, debes acceder a la página
https://pencil.evolus.vn/, y posteriormente, descargar e instalar el
software, de acuerdo a la siguiente tabla.

Taller de Aplicaciones Móviles • Semana 7 – 13

 Ilustración 2: Miles, J. (2021). Instalación de Pencil
Una vez instalado y ejecutado, crea un nuevo documento:

Ilustración 3 Miles, J. (2021). Crear un nuevo documento en pencil

Por medio de este software, puedes generar prototipos no funcionales

de las distintas “pantallas” que tendrá tu aplicación, y que te permitirán
conocer con mayor profundidad cómo funciona el sistema, y no estar
pensando en lo que hará mientras programas.

Taller de Aplicaciones Móviles • Semana 7 – 14

 Ilustración 4 Miles, J. (2021). Prototipo con Pencil

Además, por medio de estos prototipos, podrás asegurar que tu cliente

reciba el producto de software que espera, y en estos momentos
cualquier cambio a los requerimientos, es “económico”, ya que aún no
hemos programado algo de la aplicación. Puedes crear tantas
pantallas como quieras, lo ideal, es que las dibujes todas y cada una
de ellas como parte del proyecto.

Existen otras herramientas para realizar esto, como Balsamiq, o incluso,

lo puedes hacer por medio de powerpoint. Es más, con un papel y lápiz,
es como se realizaba antes. Lo que se presenta acá, son herramientas
que facilitan el trabajo.

En Android, existen herramientas de diseño específicas para aplicar en

ámbitos de diseño, como indica en:

Taller de Aplicaciones Móviles • Semana 7 – 15

https://material.io/blog/jetpack-compose-beta (Revisa el material del
hipervínculo).

Además, existe un completo tutorial relacionado con el diseño, que

debes revisar en:

https://developer.android.com/design. (Revisa aspectos acerca de

estilos, patrones, usabilidad, componentes, animación, y layout).

5. Patrones y anti-patrones de diseño UI Android

Carousel

Ilustración 5: (Trebilcox-Ruiz, 2016) Carousel

Probablemente, la cantidad de elementos que deseemos mostrar,
serán demasiados, como para mostrar un listado completo de
elementos, además, debemos considerar la agrupación de dichos
elementos por categorías. Entonces, el uso de carousel, nos permitirá
mostrar un listado de elementos de manera horizontal, pudiendo
agrupar los elementos que deseemos mostrar al usuario, y para
desplazarse por los elementos, debe arrastrar los elementos

Taller de Aplicaciones Móviles • Semana 7 – 16

horizontalmente, para continuar viendo el listado. Un ejemplo de uso de
este patrón puede ser visto en la aplicación Google Play Store.

Mapas

Ilustración 6: (Trebilcox-Ruiz, 2016) Google Maps

Una de las aplicaciones mayormente valorada por los usuarios, está
relacionada con el uso de mapas, para encontrar ubicaciones,
vehículos, encomiendas, etc.

Elementos de Navegación y Acciones

La experiencia de uso de nuestra aplicación por parte de los usuarios,
es muy importante; Es por ello, que el utilizar correctamente los
elementos de navegación y acciones para que el usuario “no se
pierda” dentro de nuestra aplicación.

Uso de Tabs

Taller de Aplicaciones Móviles • Semana 7 – 17

 Ilustración 7: (Trebilcox-Ruiz, 2016) Uso de Tabs
Los elementos Tabs, se utilizan en su mayoría, por medio de
Master/Detail, visto previamente. Este patrón, es muy útil, cuando no se
tiene muchas categorías que mostrar. Si tenemos demasiadas
categorías para mostrar al usuario, entonces el uso de este elemento
podría ser perjudicial en cuanto a la experiencia de usuario.

Bandeja de navegación

Ilustración 8: (Trebilcox-Ruiz, 2016) Bandeja de NAvegación

Taller de Aplicaciones Móviles • Semana 7 – 18

La bandeja de navegación, soluciona la problemática de los
elementos TABS, y es posible aplicarla, cuando tenemos una serie de
categorías para mostrar al usuario. La utilización de este patrón de
diseño, es común en aplicaciones Android el cual nos permitirá para
que el usuario pueda cambiar de sección dentro de una aplicación.

Toolbar
Android incluye una barra de herramientas en la parte superior de la
pantalla, el cual el contenido mínimo, que debería contener, es el título
de la sección o aplicación. Además, podemos agregar botones que
realicen alguna acción directamente desde la barra de herramientas
o bien, desde un menú “overflow“, el cual permitirá a los usuarios
realizar tareas de una manera más simple, sin tener que realizar nuevas
acciones dentro de la aplicación.

Ilustración 9: (Trebilcox-Ruiz, 2016) Toolbar

El botón de acción flotante

Este botón flotante, permite resaltar alguna acción de la aplicación,

para que el usuario pueda realizar de manera simple dicha acción
desde la aplicación. Por ejemplo, redactar un correo, añadir datos,
eliminar datos, etc.

Taller de Aplicaciones Móviles • Semana 7 – 19

 Ilustración 10: (Trebilcox-Ruiz, 2016) action button
Este patrón, no debería ser utilizado para la realización acciones
menores.

6. Construcción de prototipo no funcional

Existe el concepto de Producto Mínimo Viable (MVP), el cual es un
proceso en donde se presenta un prototipo funcional al mercado para
obtener una retroalimentación temprana por parte de los usuarios, para
posteriormente iterar en la construcción, mediante construir-medir-
aprender.

Un prototipo puede ir desde una versión rústica e imperfecta, pero

funcional de un producto (o servicio), hasta la representación tangible
o gráfica de una o varias de las características del mismo.

Todos los MVP se conforman de un prototipo, pero no todo prototipo

necesariamente se puede considerar parte de un MVP.

Taller de Aplicaciones Móviles • Semana 7 – 20

Conclusiones

El uso de patrones de diseño de UI en una aplicación, puede ser el éxito

o el fracaso de una idea. Facilitar el uso de una aplicación para los
usuarios, expondrá una experiencia satisfactoria por parte del usuario,
el cual continuará utilizando nuestro servicio. Mientras más simple y útil
sea tu aplicación, mejor será la experiencia de uso.

Taller de Aplicaciones Móviles • Semana 7 – 21

Referencias Bibliográficas

Admin, B. (2021, 13 febrero). ¿Cómo hacer branding? Agencia de

Publicidad en Cali. https://bambucreativos.com/modelo-canvas-para-
emprendedores/

BeeDIGITAL, E. (2021, 16 septiembre). ¿Qué es la innovación

tecnológica y qué tipos de innovación hay? BeeDIGITAL.
https://www.beedigital.es/tendencias-digitales/que-es-innovacion-
tecnologica/

Betancourt, J. (2020, 20 septiembre). MVP vs Prototipo — ¿Son lo mismo?

¿Cuál necesito? - Articulos para emprendendedores. Medium.
https://medium.com/articulos-para-emprendendedores/mvp-vs-
prototipo-son-lo-mismo-cu%C3%A1l-necesito-844ea2424bfa

¿Qué es la Industria 4.0? (2018, 25 enero). Deloitte Spain.

https://www2.deloitte.com/es/es/pages/manufacturing/articles/que-
es-la-industria-4.0.html

Trebilcox-Ruiz, P. (2016, 18 abril). Android desde Cero: Patrones de

Diseño UI. Code Envato Tuts+.
https://code.tutsplus.com/es/tutorials/android-from-scratch-common-
ui-design-patterns--cms-26044

Y. (2020, 14 diciembre). Usabilidad en aplicaciones móviles: ¿Qué es y

por qué es necesaria? Yeeply.
https://www.yeeply.com/blog/usabilidad-aplicaciones-moviles/

Taller de Aplicaciones Móviles • Semana 7 – 22

Taller de Aplicaciones Móviles • Semana 7 – 23