792016030058CEDILLOSERRANOCESARULISES9154

•

Vicente Riva Palacio

Yafreisy Vazquez

14/5/2024

¡Este material tiene más páginas!

Vista previa del material en texto

UNIVERSIDAD POLITÉCNICA DE SINALOA
PROGRAMA ACADÉMICO DE INGENIERÍA EN
INFORMÁTICA

Tesina
“Implementación de diseño y experiencia de
usuario dentro de aplicaciones móviles”
Para cumplir la acreditación de las estadías profesionales y contar
con los créditos necesarios para obtener el grado de Ingeniero en
Informática
Autor:
Cedillo Serrano Cesar Ulises
Asesor:
Rosa Angélica Rosales Camacho

Mazatlán, Sinaloa. 5 de diciembre de 2019

1
Carta de aceptación de estadías

2
Carta de terminación de estadías

3
Carta de aceptación de tesina

4
Carta de nombre de tesina

5
Agradecimientos

Estoy muy agradecido con mis padres, ya que con su esfuerzo me permitieron
formarme en una persona de bien, que siempre apoyaron en cada paso y decisión
que tomé.

Gracias a mis hermanos por haber corregido cada mal camino tomado y haber
aprendido de cada uno de ellos todos los valores que sé.

Gracias a mi universidad, gracias por haberme permitido formarme y en ella,
gracias a todas las personas que fueron participes de este proceso, ya sea de manera
directa o indirecta.

6
Índice
Tabla de Imágenes..................................................................................................... 9
Índice de tablas ........................................................................................................ 10
Índice de Gráficos .................................................................................................... 10
Resumen .................................................................................................................. 11
Abstract .................................................................................................................... 11
Introducción .............................................................................................................. 11
CAPÍTULO I ............................................................................................................. 12
1.1 Antecedentes ..................................................................................................... 13
1.1.1 Localización ................................................................................................. 14
1.1.2 Objetivos de la institución ............................................................................ 14
1.1.3 Visión y misión ............................................................................................. 15
1.2 Planteamiento del problema ............................................................................... 15
1.2.1 Propuesta de investigación .......................................................................... 16
1.2.2 Objetivos ...................................................................................................... 16
1.2.2.1 Objetivo general ..................................................................................... 16
1.2.2.2 Objetivos particulares ............................................................................ 16
1.2.3 Preguntas de investigación .......................................................................... 17
1.2.4 Hipótesis ...................................................................................................... 17
1.2.5 Limitaciones y supuestos ............................................................................. 17
1.2.6 Relevancia ................................................................................................... 17
CAPÍTULO II ............................................................................................................ 18
2.1 App o aplicación móvil ........................................................................................ 19
2.2 Desarrollo móvil.................................................................................................. 19
2.3 Funcionalidad ..................................................................................................... 19
2.4 Usabilidad .......................................................................................................... 19
2.4.1 Interacción persona ordenador .................................................................... 19

7
2.4.2 Experiencia de usuario................................................................................. 20
2.5 Diseño ................................................................................................................ 21
2.5.1 Wireframes ................................................................................................... 21
2.5.2 Interfaz de usuario ....................................................................................... 22
2.5.3 Diseño Flat ................................................................................................... 22
2.5.4 Diseño Material ............................................................................................ 22
2.6 Programación basada en componentes ............................................................. 23
2.6.1 Componente ................................................................................................ 23
2.6.2 Propiedades ................................................................................................. 23
2.6.3 Métodos ....................................................................................................... 24
2.6.4 Eventos ........................................................................................................ 24
2.7 Superficies ......................................................................................................... 24
2.7.1 Profundidad .................................................................................................. 24
2.7.2 Sombras ....................................................................................................... 25
2.7.3 Contenido ..................................................................................................... 25
2.7.4 Propiedades físicas ...................................................................................... 26
2.8 Layouts ............................................................................................................... 27
2.8.1 Plantillas responsivas................................................................................... 28
2.8.2 Densidad de píxeles..................................................................................... 28
2.8.3 Independencia de la densidad ..................................................................... 29
CAPÍTULO III ........................................................................................................... 30
3.1 Elementos y componentes ................................................................................. 31
3.1.1 Barra de navegación inferior ........................................................................ 31
3.1.2 Barra superior de una app ........................................................................... 32
3.1.3 Botones ........................................................................................................ 34
3.1.4 Botones flotantes de acción ......................................................................... 35
3.1.5 Banners ........................................................................................................ 37

8
3.1.6 Tarjetas ........................................................................................................ 39
CAPÍTULO IV .......................................................................................................... 41
4.1 Implementación .................................................................................................. 42
4.2 Resultados .........................................................................................................46
4.3 Casos de éxito y estadísticas ............................................................................. 49
4.3.1 Casos de éxito ............................................................................................. 49
4.3.2 Estadísticas .................................................................................................. 49
4.4 Conclusión ......................................................................................................... 50
Bibliografías ............................................................................................................. 51

9
Tabla de Imágenes
Imagen 1.1 Ubicación de la institución 10
Imagen 2.1 Interacción entre humano y computadora 16
Imagen 2.2 Wireframes 17
Imagen 2.3 Flat design y material design 19
Imagen 2.4 Dimensiones de interfaz 20
Imagen 2.5 Sombras en componentes 21
Imagen 2.6 Contenido dentro de componentes 21
Imagen 2.7 Efectos dentro de un componente 22
Imagen 2.8 Separación en el mismo punto 22
Imagen 2.9 Formas de componentes 23
Imagen 2.10 Opacidad de los componentes 23
Imagen 2.11 Canales, columnas y márgenes 24
Imagen 2.12 Densidad de pantallas 25
Imagen 2.13 Densidad independiente en pantallas 25
Imagen 3.1 Barra de navegación inferior 27
Imagen 3.2 Barra superior de una app 28
Imagen 3.3 Barra de acción contextual 29
Imagen 3.4 Título con texto largo 30
Imagen 3.5 Botones 30
Imagen 3.6 Botón flotante 32
Imagen 3.7 Tipos de botón flotante 32
Imagen 3.8 Tipos de botón flotante 33
Imagen 3.9 Banner 34
Imagen 3.10 Tarjetas 35
Imagen 4.1 Searvices 38
Imagen 4.2 TripAdvisor 38
Imagen 4.3 Pantalla principal de Searvices 39
Imagen 4.4 Pantalla principal de TripAdvisor 40
Imagen 4.5 Sugerencia de pantalla principal 41

10
Índice de tablas
Tabla 1.1 Resultados de uso de Searvices 42
Tabla 1.2 Resultados de uso de TripAdvisor 43
Tabla 1.3 Resultados de uso de Searvices con implementación de sugerencias. 43
Tabla 1.4 Comparaciones de resultados. 44

Índice de Gráficos
Gráfico 1.1 Resultados de Searvices 42
Gráfico 1.2 Resultados de TripAdvisor 43
Gráfico 1.3 Resultados de implementación en Searvices 44
Gráfico 1.4 Media de tiempo invertido 44

11
Resumen
El presente documento se ha realizado con la finalidad de acreditar la carrera de
Ingeniería en Informática en la Universidad Politécnica de Sinaloa (UPSIN). El
contenido en la siguiente investigación hace mención de la implementación de
diferentes conceptos dentro de aplicaciones móviles, las cuales tienen como finalidad
impactar en los ideales de diseño y experiencia de usuario dentro de aplicaciones
móviles, así como también tratar de crear un estándar dentro de las mismas.

Abstract
This document has been made with the purpose of accrediting the degree in computer
engineering at the Polytechnic University of Sinaloa (UPSIN). The content in the
present investigation mentions the implementation of different concepts within mobile
applications, which are intended to impact the ideals of design and user experience
within mobile applications, as well as try to create a standard within the same.

Introducción
Con el paso de los años, más aplicaciones móviles, ya sean híbridas o nativas, se
crean como proyectos para empresas o algún otro propósito, por lo que se requiere
que la aplicación sea atractiva tanto en cuestión de diseño gráfico, así como en
usabilidad.
Conforme el paso de los años se han creado diferentes guías que ayudan a
organizar los componentes de una aplicación móvil con el fin de mejorar la estructura
visual dentro de las mismas, estas guías también ayudan a usar tonalidades de
colores que puedan ser visibles y reconocibles.

CAPÍTULO I

Antecedentes y planteamiento de problema

13
A continuación, se hará mención de los antecedentes e historia de la institución en la
cual se realizó esta investigación ya que fue de gran ayuda para el desarrollo de la
misma.

1.1 Antecedentes
“La Universidad Politécnica de Sinaloa (UPSIN) surge a partir de una correspondencia
de los dos niveles de gobierno, Federal y Estatal, compartiendo la misma
preocupación de diversificar la oferta educativa en aquellas regiones que carezcan de
opciones viables de operar. Además, surge como parte de la propuesta contenida en
el Programa Nacional de Educación 2000-2006, que pretende impulsar el desarrollo
con equidad de un sistema de educación superior de buena calidad que responda con
oportunidad a las demandas sociales y económicas del país y obtenga mejores
niveles de certidumbre, confianza y satisfacción de sus resultados.

La necesidad de fortalecer la educación superior en el sur de nuestra entidad
federativa motivó al Ejecutivo Estatal a crear una institución de educación superior de
alta calidad que fuera capaz de formar ciudadanos ejemplares, con dominio de la
tecnología de punta y con aptitud para integrarse cabalmente a su entorno.

Después de varios estudios de orden de económico y de oferta y demanda
educativa, se decidió instalar la UPSIN en la ciudad y puerto de Mazatlán, a su vez
que se contaba con las condiciones propicias, tanto en infraestructura educativa como
industrial y de prestación de los servicios. Dichos estudios arrojaron la necesidad de
crear las carreras de ingeniería en Biotecnología, en Mecatrónica y en Informática.
Así, el 30 de agosto de 2004 se crea la UPSIN como un organismo público
descentralizado del Estado de Sinaloa, según aparece en el decreto para su creación,
publicado en el diario oficial de la fecha anteriormente indicada.

El precedente histórico de la UPSIN es la creación del subsistema de
Universidades Politécnicas (UUPP) de la Subsecretaría de Educación Superior (SES)
en el 2001. Con el apoyo de la Coordinación de las Universidades Politécnicas (CUP),
se crea la UPSIN y se implanta el mismo modelo educativo con el que se rigen las

14
UUPP en nuestro país; este modelo educativo plantea la formación profesional
basada en competencias y centrado en el aprendizaje significativo del alumno.

A partir de la fecha de publicación del decreto de creación, en el diario oficial
del estado, se iniciaron los trabajos que se requerían para estar en posibilidades de
convocar a aspirantes a ingresar a la UPSIN; conseguir y habilitar el espacio
provisional para el desarrollo de las actividades propias de la universidad, entre otros.
En febrero de 2005 se lanzó la primera convocatoria para aspirantes a ingresar a la
UPSIN y este proceso concluyó con el registro oficial de 138 alumnos, distribuidos en
las tres carreras, dando inicio a las actividades académicas el día 2 de mayo del
mismo año.”[1]

1.1.1 Localización
La Universidad Politécnica de Sinaloa se encuentra ubicada sobre la carretera
municipal libre de Mazatlán, Higueras, en la colonia Genaro Estrada, Mazatlán,
Sinaloa con el código postal 82199.

Imagen 1.1-Ubicación de la Institución

1.1.2 Objetivos de la institución
Según la institución, menciona que sus objetivos son: “En la Universidad Politécnica
de Sinaloa estamos comprometidos con el cumplimiento de las necesidades,

15
expectativas y requisitos aplicables de nuestras partes de interés mediante procesos
que respaldan la formación de profesionistas de alto nivel competitivo fortalecidos
mediante una formación con valores, con principios de igualdad laboral, no
discriminación y una evaluación eficaz que permita la mejora continua y la gestión del
riesgo en todos sus procesos.” [1]

1.1.3 Visión y misiónLa visión y misión, la misma universidad la describe de la siguiente manera: “En la
Universidad Politécnica de Sinaloa estamos comprometidos con el cumplimiento de
las necesidades, expectativas y requisitos aplicables de nuestras partes de interés
mediante procesos que respaldan la formación de profesionistas de alto nivel
competitivo fortalecidos mediante una formación con valores, con principios de
igualdad laboral, no discriminación y una evaluación eficaz que permita la mejora
continua y la gestión del riesgo en todos sus procesos.” “En la Universidad Politécnica
de Sinaloa estamos comprometidos con el cumplimiento de las necesidades,
expectativas y requisitos aplicables de nuestras partes de interés mediante procesos
que respaldan la formación de profesionistas de alto nivel competitivo fortalecidos
mediante una formación con valores, con principios de igualdad laboral, no
discriminación y una evaluación eficaz que permita la mejora continua y la gestión del
riesgo en todos sus procesos.”[1]

1.2 Planteamiento del problema
Todos los proyectos desarrollados en aplicaciones móviles tienen puntos en común
hablando en el sentido del diseño y la usabilidad, estos puntos son indispensables ya
que sin ellos no se podría visualizar el contenido y mucho menos se podrá interactuar
con la misma. Cualquier aplicación móvil requiere ser utilizada por una persona y sin
los puntos anteriormente mencionados, esto sería imposible.
Se precisa que a estos puntos se les tome la misma importancia que se le da
a la funcionalidad de la aplicación, deberán ser los tres puntos fuertes en una
aplicación ya que cada una va de la mano de la otra (Funcionalidad, diseño y
usabilidad). Lamentablemente, con el creciente número de aplicaciones que se lanzan
cada año, se puede notar que bastantes aplicaciones desarrolladas no toman en
cuenta los puntos mencionados con anterioridad o solo toman la mitad de los puntos,

16
por ejemplo, la aplicación tiene las funcionalidades y un bonito diseño de interfaz, pero
las funcionalidades no se encuentran tan fácilmente, y esto causa que no sean
usables del todo. Si dos aplicaciones cuentan con la misma funcionalidad, el público
preferirá la que le facilite estas funcionalidades.

1.2.1 Propuesta de investigación
En base a la problemática mencionada en el punto anterior, se desarrollará una
aplicación que tenga una funcionalidad en común de una ya lanzada al mercado, pero
con una implementación de diseño y usabilidad basado en recomendaciones de guías
para así descubrir si las personas usarían una aplicación por solo la funcionalidad o
por los tres puntos fuertes mencionados en el segundo párrafo del planteamiento del
problema.

1.2.2 Objetivos
Una vez planteado el problema y la propuesta de investigación se definen los
siguientes objetivos.

1.2.2.1 Objetivo general
Crear una aplicación móvil con implementación de diseño y usabilidad además de la
funcionalidad para hacer ver la importancia que conlleva esta implementación.

1.2.2.2 Objetivos particulares
Los siguientes puntos funcionan como objetivos particulares que sirven para lograr el
objetivo general anteriormente mencionado.
● Crear una aplicación móvil con funcionalidad fija en la tecnología react native
alimentada mediante API´s.
● Implementar a la aplicación un diseño adecuado y una buena interfaz de
usuario para poder visualizar el contenido correctamente.
● Implementar a la aplicación una usabilidad para que las funciones principales
puedan ser utilizadas de manera más fácil.
● Comparar la aplicación con otra lanzada cuya funcionalidad sea similar pero
que no implemente un buen uso del diseño ni la usabilidad para ver las
diferencias.

17
● Analizar la importancia de la implementación de diseño y usabilidad dentro de
aplicaciones móviles.

1.2.3 Preguntas de investigación
Durante el desarrollo de esta investigación se formularon las siguientes preguntas y
se contestaran más adelante.
● ¿Una aplicación móvil puede funcionar solo con la implementación de la
funcionalidad?
● ¿Cómo implementar un buen diseño y usabilidad a un proyecto de aplicación
móvil?
● ¿El diseño y usabilidad dependen de la tecnología que se usa para desarrollar
una aplicación móvil?
● ¿Existe un estándar de diseño y de usabilidad?
● ¿Cuál es la importancia de implementar un buen diseño y usabilidad?

1.2.4 Hipótesis
Una vez mencionada la problemática, la propuesta de investigación y las preguntas,
se establece la siguiente hipótesis.
“El análisis e implementación de diseño y experiencia de usuario en una
aplicación móvil, permitirá realizar las tareas solicitadas al menos 20% más rápido,
permitiendo lograr la funcionalidad requerida en menos tiempo.”

1.2.5 Limitaciones y supuestos
La visión de cada diseño puede variar según la abstracción de la persona para utilizar
la aplicación móvil teniendo conflictos con las recomendaciones de implementación.
Estas recomendaciones se encuentran en constantes actualizaciones ya que
son basadas en tendencias actuales lo que significa que en un futuro podrían ser
diferentes.

1.2.6 Relevancia
La implementación de estos puntos favorece significativamente la imagen y la
usabilidad de cualquier aplicación móvil, lo cual trae un beneficio ya que los usuarios
que harán uso de esta, podrán lograr su objetivo más rápido.

CAPÍTULO II

Marco teórico

19
En este capítulo se expondrán conceptos fundamentales para ayudar la comprensión
de los temas de los cuales se hablarán dentro de esta investigación.

2.1 App o aplicación móvil
Como esta investigación involucra demasiados conceptos sobre aplicaciones
móviles, es importante saber qué es una aplicación móvil o app como también se
estará mencionando. Una app es un software, el cual cumple con una funcionalidad
o tarea en específico. Las apps se encuentran instaladas en dispositivos móviles
inteligentes, tales como: teléfonos, pulseras, relojes, tabletas o incluso anillos
inteligentes. [2]

2.2 Desarrollo móvil
El desarrollo de aplicaciones móviles es, según Margaret Rouse, “El conjunto de
procesos y procedimientos involucrados en la escritura de software para pequeños
dispositivos inalámbricos de cómputo, como teléfonos inteligentes o tabletas.” [3].

2.3 Funcionalidad
Es importante mencionar cada uno de los componentes que conforman las apps, en
este caso, la funcionalidad que es la capacidad de un software para cumplir tareas y
que estas satisfagan las necesidades de los usuarios.[4]

2.4 Usabilidad
Es de suma importancia que las aplicaciones tengan un grado de aceptación por parte
de los usuarios, esta aceptación está basada en características especiales que los
usuarios consideren importantes, entre todas, una de estas es la usabilidad que en
general, es la manera con las que se utiliza algún elemento o dispositivo.
Específicamente en las aplicaciones móviles, es la facilidad que la misma brinda para
llegar y terminar un objetivo en específico, satisfaciendo así sus necesidades de una
manera práctica y sencilla [5].

2.4.1 Interacción persona ordenador
Existen distintos métodos para evaluar o cuantificar la usabilidad de manera objetiva
y subjetiva, con la primera mencionada, pueden llegar a ser medidos por la interacción

20
del usuario con la aplicación, es aquí donde entra el término interacción persona
ordenador (llamado también interacción humano computadora, hombre a máquina,
etc.), que es la interacción humano computadora se refiere al estudio de la interacción
o transferencia de información entre un ser humano, algún dispositivo cualquiera y las
tareas que se realizan, principalmente se enfoca en cómo las personas y
computadoras pueden interactuar para lograr un objetivo por medio de software.[6]
Este término surgió en la épocade la posguerra ya que se requería interactuar
con máquinas y esto era algo complicado que solo algunos podían entender. Fue
entonces que, en la década de los sesenta, avances significativos en la investigación
y el desarrollo de prototipos fueron producidos, así como dispositivos o avances que
hoy en día han sido fundamentales, tales como los sistemas de ventanas y el ratón o
mouse como dispositivo de interacción o de entrada de datos al ordenador.[7]

Imagen 2.1-Interacción entre humano y computadora

2.4.2 Experiencia de usuario
Dentro del desarrollo móvil se encuentra una parte la cual es dedicada a poner al
usuario como máxima prioridad, deseando que este no deje de utilizar lo que se está
desarrollando. Con esto se menciona el diseño de experiencia de usuario o UX (User
Experience en sus siglas en inglés), este es el proceso de diseño que utilizan los
equipos para crear productos que brindan experiencias significativas y relevantes
para los usuarios. Esto implica el diseño de todo el proceso de adquisición e
integración del producto, incluidos los aspectos de marca, diseño, usabilidad y función
[8].

21
Muchas veces “experiencia de usuario” es usado comúnmente de manera igual
a los términos de “diseño de interfaz” o “usabilidad”, pero es muy importante
considerarlo como algo muy diferente ya que se requiere un área especial solo para
la implementación de experiencias de UX. Esta trata de usar conjuntos de habilidades
distintas entre sí, que son las ya mencionadas usabilidad, interacción y accesibilidad
[9].

2.5 Diseño
A continuación, se darán a conocer conceptos relacionados con el diseño y un poco
de todo lo que esto conlleva a la hora de desarrollar aplicaciones móviles, en principio
y de manera general se entiende como diseño al proceso de visualizar y planificar la
creación de objetos, sistemas interactivos, edificios, vehículos, etc [10]. Y en el
desarrollo de una app, este abarca desde cuando se obtiene la idea hasta el análisis
que se realiza después de su publicación en las tiendas de app [11].

2.5.1 Wireframes
Los Wireframes son una representación de una manera sencilla de la estructura o
diseño de una pantalla, para poder tener una mejor idea inicial sobre qué se mostrará
en la misma. Algunos usan como referencia para una mejor compresión, los planos
que realizan los arquitectos para construir una casa [11].

Imagen 2.2-Wireframes

22
2.5.2 Interfaz de usuario
La interfaz de usuario o UI (User Interface en inglés) como se menciona hoy en día,
es el punto de interacción y comunicación humano-computadora en un dispositivo.
Esto puede incluir pantallas de visualización, teclados, un mouse y la apariencia de
un escritorio. También es la forma en que un usuario interactúa con una aplicación
[12].

2.5.3 Diseño Flat
En 2019, dos de los estilos de diseño que más se utilizan en apps móviles son diseño
material y diseño flat, los cuales se basan en diferentes principios, el principio básico
del diseño flat (O diseño plano por su traducción en inglés) significa que la pantalla
del dispositivo representa un entorno digital bidimensional autónomo en el que no hay
lugar para nada que reproduzca objetos tridimensionales del mundo real.
Los elementos de la interfaz de usuario se simplifican: se utilizan formas
gráficas abstractas y los espacios se rellenan con colores llamativos. El texto y la
fuente son especialmente importantes en el diseño plano. En particular, esto conduce
a un amplio uso de variaciones condensadas, ligeras y ultraligeras de tipos de letra.
La densidad de la información de la pantalla es a menudo extraordinariamente baja
[13].

2.5.4 Diseño Material
Por otra parte, existe el diseño material, es un lenguaje visual que sintetiza los
principios clásicos del buen diseño con la innovación de la tecnología y la ciencia, el
cual, está inspirado en el mundo físico y sus texturas, incluida la forma en que reflejan
la luz y proyectan sombras. Las superficies de material vuelven a imaginar los medios
de papel y tinta [14].

23
Imagen 2.3-Flat design y material design respectivamente

2.6 Programación basada en componentes
Es importante conocer la existencia y el significado de la programación orientada a
componentes, ya que es necesaria para poder entender algunos puntos que se
tomarán en los siguientes capítulos. Esta es una rama de la ingeniería en software y
esta se refiere a la separación de funcionalidades para una futura reutilización dentro
de un sistema de software [15].

2.6.1 Componente
Un componente puede ser una parte de un software o módulo el cual engloba
funcionalidades o datos [15]. Hablando en un entorno de desarrollo móvil, puede ser
representado y utilizado de diferentes maneras, los mismos pueden ser comunicados
a través de interfaces [16]. Estos también pueden ser llamados objetos.

2.6.2 Propiedades
Las propiedades de los componentes son atributos o elementos que modifican su
aspecto y controlan su comportamiento [17]. En programación móvil, muchos
componentes comparten propiedades en común. Se pueden crear componentes con
cierto número de propiedades modificables, pero en muchos casos no es obligación
el modificar todas estas, se pueden modificar sólo las indispensables para lograr que
el componente se vea y haga conforme a las necesidades.

24
2.6.3 Métodos
Los métodos son funciones que se le asignan al componente para realizar distintas
acciones. En programación los métodos pertenecen a una clase al igual que las
propiedades [17].

2.6.4 Eventos
Los eventos son acciones que ocurren como resultado del usuario alguna otra fuente
como otro evento, el ejemplo más común es el clic del mouse. Los eventos se pueden
controlar y permitir que un programador escriba código que se ejecutará cuando
ocurra este [18].

2.7 Superficies
Este lenguaje visual está basado en el mundo físico, sus superficies y texturas. Este
refleja luz y proyecta sombra. En este mundo, los objetos se pueden apilar o unir entre
sí, pero no pueden atravesar entre sí, esta unión se diferencia proyectando las
mencionadas luces y sombras.

2.7.1 Profundidad
Las interfaces se muestran en un entorno tridimensional o también llamado 3D. Estos
elementos pueden moverse de manera horizontal (Eje x), vertical (Eje y) y profundidad
(Eje z), esta se representa colocando los mismos en varios puntos a lo largo de la
profundidad que se extiende desde la pantalla hasta el espectador.

Imagen 2.4 - Dimensiones de interfaz

25
2.7.2 Sombras
Las sombras son provocadas gracias a que las superficies se encuentran elevadas,
entre más elevación tengan, más sombra esta proyectará. Un ejemplo de sombra por
elevación sería agregar a la interfaz un componente con elevación 1, tal y como se
muestra en la imagen 3.2

Imagen 2.5 - Sombras en componentes

2.7.3 Contenido
El contenido dentro de un componente se muestra de cualquier forma y color y este
no representa una capa separada del componente. El comportamiento del contenido
puede ser dependiente o independiente del comportamiento de la superficie del
componente.

Imagen 2.6 - Contenido dentro de componentes

26
2.7.4 Propiedades físicas
Como se mencionó, esta estructura está basada en el mundo físico lo que significa
que los componentes se toman como materiales sólidos, las entradas e interacciones
del usuario no pueden atravesar estos materiales, estas entradas sólo pueden afectar
la superficie del material.

Imagen 2.7 - Efectos dentro de un componente

También hay que tomar en cuenta que estos componentes no pueden ocupar el
mismo punto en el espacio de otro simultáneamente.

Imagen 2.8 - Separación en el mismo punto

27
Los componentes pueden cambiar de forma y también pueden cambiar laopacidad
de las mismas.

Imagen 2.9 - Formas de componentes

Imagen 2.10 - Opacidad de los componentes

2.8 Layouts
Los layouts son planos, plantillas o esquemas que se utilizan para acomodar y
distribuir los elementos dentro de un diseño. Esta palabra proviene del inglés, aquí se
estará mencionando por el nombre de “plantilla”. Estas plantillas fomentan la
coherencia entre plataformas, entornos y tamaños de pantalla mediante el uso de
elementos uniformes y espaciado [19].

2.8.1 Plantillas responsivas
Es de suma importancia que un diseño se mantenga firme ante cualquier plataforma,
tamaños y resoluciones de pantallas; por eso, se recomienda hacer uso de columnas,
canales y márgenes dentro de la pantalla. Las columnas se utilizan para colocar
contenido dentro de sus áreas, los canales son los espacios entre las columnas y los
márgenes son la separación o el espacio que se encuentra entre el contenido y las
orillas o bordes derechos e izquierdos [20].

Imagen 2.11 - Canales, columnas y márgenes

2.8.2 Densidad de píxeles
Se considera densidad de pixeles al número de píxeles que caben dentro de una
pulgada. Entre mayor sea la densidad en pantallas, más píxeles tienen por pulgada.
Esto da como resultado que los elementos de la interfaz de usuario de las mismas
dimensiones de píxeles aparecen más grandes en pantallas de baja densidad y más
pequeños en pantallas de alta densidad. Para calcular la densidad de una pantalla se
requiere de esta ecuación: Densidad = Ancho de pantalla (En píxeles) / Alto de
pantalla (En pulgadas) [21].

29
Imagen 2.12 - Densidad de pantallas

2.8.3 Independencia de la densidad
Los píxeles independientes de la densidad, llamados dp (pronunciados como “dips”),
son unidades que se utilizan para obtener dimensiones uniformes en cualquier
pantalla. Estas brindan un acomodo de diseño flexible en todas las plataformas. Un
dp es igual a un píxel físico en una pantalla con una densidad de 160. Para obtener
los dp de una pantalla, la ecuación es: dp = (ancho de pantalla en pixeles * 160) /
Densidad [21].

Imagen 2.13 - Densidad independiente en pantallas

En este capítulo se tomaron conceptos que serán de gran utilidad en el siguiente
capítulo en el cual, se estarán dando a conocer ciertos componentes y cómo utilizarlos
de manera clásica.

CAPÍTULO III

Desarrollo

31
Dentro de este capítulo se dará a conocer una guía para la implementación de ciertos
componentes visuales que ofrecen funcionalidades diferentes y que se pueden utilizar
dentro de aplicaciones móviles, cabe resaltar que estos están basados en diseño
material.

Los objetivos que se desean realizar con la siguiente guía son:
● Crear un lenguaje visual que sintetice los principios clásicos del buen diseño.
● Desarrollar un sistema que unifique la experiencia del usuario y diseño en
distintas plataformas y dispositivos.
● Ampliar el lenguaje visual proporcionar una base flexible para la innovación y
la expresión de su sistema.

Una vez explicados los objetivos, comenzará la guía.

3.1 Elementos y componentes
A continuación, se mostrarán algunos de los elementos o componentes que suelen
ser poco comunes, los cuales puedes implementar dentro del proyecto de app móvil.

3.1.1 Barra de navegación inferior
Este componente permite navegar entre destinos principales de un app. Estas
muestran de tres a cinco destinos en la parte inferior de la pantalla. Cada destino está
representado por un icono característico de la funcionalidad del mismo y
opcionalmente con una etiqueta de texto. Al presionar el icono, el usuario es llevado
al destino seleccionado.
Imagen 3.1 - Barra de navegación inferior

32
Algunas recomendaciones de implementación y buenas prácticas son:
1. Colocar destinos de la app que necesiten ser accesibles.
2. Deben de haber de tres o más destinos.
3. Los destinos deben de tener la misma importancia.
4. Usar etiquetas cortas en los textos.
5. Utilizar colores de alto contraste y un solo color diferente para el destino
seleccionado.
6. No desplazar los destinos de la barra.
7. No colocar destinos que hagan una sola función, un ejemplo sería un destino
solo para ver la hora.

3.1.2 Barra superior de una app
Este componente muestra información y acciones relacionadas con la pantalla en la
que se encuentra. Esta barra está conformada por el contenedor y opcionalmente, un
icono de navegación (extremo izquierdo), un título (a la derecha del icono de
navegación), iconos de acciones (a la derecha del título) y un menú (si se utiliza, en
el extremo derecho).

Imagen 3.2 - Barra superior de una app

33
Hay dos tipos diferentes de implementar este componente, la primera es la
manera tradicional como se mostró en la imagen anterior (Imagen 3.2) y la segunda
es una barra de acción contextual (Imagen 3.3), las cuales brindan acciones para los
elementos seleccionados dentro de una pantalla, esta permanece activa hasta que se
realice la acción o se descarte.

Imagen 3.3 - Barra de acción contextual

Algunas recomendaciones de implementación y buenas prácticas son:
1. Si se colocan imágenes en la barra, asegurarse que el texto sea legible.
2. El icono de navegación también puede ser una flecha hacia atrás para indicar
que puede volver a la pantalla anterior (en caso de que haya una).
3. No ajustar texto demasiado largo dentro de la barra.
4. No reducir el tamaño del texto para que pueda acomodarse a una sola línea.
5. En caso de tener un texto largo en la barra, aumentar de tamaño la barra.
6. Colocar el orden de los iconos de acciones siempre el más utilizado a la
izquierda.

34
Imagen 3.4 -Título con texto largo

3.1.3 Botones
Los botones permiten al usuario realizar acciones y tomar decisiones con un solo
toque sobre ellos. Estos se encuentran en toda la interfaz de usuario, comúnmente
en diálogos, modales, formularios, tarjetas y en barras de contenido, deben ser
identificables de manera fácil (hacerlo diferente al contenido). Los tipos de botones
pueden ser: botones de texto, contorneados, contenidos y botones palanca. El
contenido de este es el contenedor (excepto en botones de solo texto), texto del botón
y un icono opcional.

Imagen 3.5 - Botones

35
Dentro de una interfaz de usuario pueden existir más de un botón en un mismo
componente, por eso es importante crear una jerarquía de énfasis en los botones,
normalmente para un énfasis mayor, se utilizan botones de contenido con colores
destacables, para uno medio, se usan colores un poco más claros y para poco énfasis,
se utilizan ya sea botones contorneados o botones de texto.

Algunas recomendaciones de implementación y buenas prácticas son:
1. Hacer el botón visible y fácil de ser localizado dentro de la interfaz.
2. Mostrar mensajes cortos pero significativos dentro de estos (se puede hacer
uso de iconos para brindar una mejor idea).
3. Evitar usar dos botones de contenido uno al lado de otro si no tienen el mismo
color de relleno.
4. Evitar colocar botones debajo de otros si hay espacio para ser colocados a los
lados.
5. Cuando se implementen botones de texto, evitar que la etiqueta del texto sea
muy extensa, el mensaje debe ser conciso.
6. Cuidar que al usar botones contorneados o de texto dentro de imágenes, no
se pierda la legibilidad de este.
7. El contenedor del botón debe ser más grande que el texto.

3.1.4 Botones flotantes de acción
Los botones flotantes de acción o botones flotantes como se estará mencionando (en
inglés es conocido como FAB que significa floating action button), representan una
acción o una función dentro de una pantalla. Esta aparece delante de todo el
contenido, comúnmente se utilizade forma circular con un icono en el centro
representando alguna función.

36
Imagen 3.6 - Botón flotante

Existen distintos tipos de botones flotantes, están los regulares que son
circulares con un icono en el centro y son de tamaño 56 x 56 dp, también están los
minis, que son similares a los regulares con la excepción de que son de tamaño menor
(40 x 40 dp) y, por último, se encuentran los extendidos, estos contienen un icono y
texto, solo que estos no son circulares, son cuadrados, pero con sus esquinas
completamente redondeadas.

Imagen 3.7 - Tipos de botón flotante

Se pueden tener accesos directos mediante estos botones, desprendiendo una rama
de acciones a menor escala, pero siempre relacionadas entre sí. Un ejemplo sería un
botón para compartir que desprende una rama de opciones en dónde compartir (ver
imagen 3.8).

37
Imagen 3.8 - Accesos rápidos

Algunas recomendaciones y buenas prácticas para implementar este componente
son:
1. Tener relevancia con la temática de la pantalla en la que se posiciona.
2. Se recomienda implementar para acciones como “Agregar”, “Crear”, “Explorar”
o “Compartir”.
3. Usar los colores primarios de la paleta de colores de tu app.
4. Cuando se use un botón regular o uno mini, procurar no agregar textos o iconos
ambiguos (que pueda significar más de una cosa).
5. No saturar la pantalla con esta clase de botones.
6. No utilizar este componente para acciones menores, destructivas o poco
claras.
7. Si se usan accesos directos, procurar agregar al menos 3 y máximo 6 opciones.
8. En accesos directos no agregar opciones que no van de la mano con la acción
principal.
9. Al usar un botón extendido, procurar agregar texto y no solo el icono (si se
piensa usar solo el icono, mejor usar uno regular).

3.1.5 Banners
La función de un banner es destacar un mensaje y acciones opcionales dentro del
contenido de una app. Estos deben ser mostrados en la parte superior de la pantalla
justo después de una barra superior de app (componente visto en el punto anterior),

38
estas son persistentes y permite que el usuario pueda ignorarlas o interactuar en
cualquier momento. Este componente está conformado por una ilustración de apoyo
opcional, el contenedor, el texto del mensaje y botones.

Imagen 3.9 - Banner

Algunas recomendaciones y buenas prácticas para implementar este componente
son:
1. El nivel de interrupción se debe asemejar con la información del contenido en
el que se encuentra el usuario.
2. Comunicar mensajes cortos, objetivos y lo que pasa si los usuarios interactúan
con ellos.
3. Mostrar un solo banner, implementar más de uno, puede saturar el contenido.
4. Tratar de mostrar siempre dos botones.
5. Evitar agregar solo una manera de remover el banner.
6. La ilustración del banner debe estar en armonía con el mensaje o con la
temática del banner.
7. En caso de agregar una ilustración, mostrarla del mismo tamaño y posición en
el que el texto se encuentra.
8. Al desplazar el contenido hacia arriba, el banner deberá estar ajustado a la
parte superior.

39
3.1.6 Tarjetas
Las tarjetas (cards en inglés), se componen de contenido y funciones sobre solo un
tema en específico. Estas deben ser identificadas como una sola unidad contenida.
El contenedor de una tarjeta debe incluir opcionalmente una imagen miniatura, un
encabezado, un subtítulo, algún medio gráfico (pueden ser imágenes, vídeos, iconos,
gráficas, etc), información adicional, botones e iconos.

Imagen 3.10 - Tarjetas

Algunas recomendaciones y buenas prácticas para implementar este componente
son:
1. No fusionar o dividir las tarjetas entre sí.
2. Las tarjetas no se voltean para mostrar información extra.
3. No implementar carruseles de imágenes en las tarjetas.
4. Separar cada tarjeta una de la otra y no encimar o sobreponerlas.
5. No saturar de contenido o de acciones toda la tarjeta.

40
6. En caso de agregar mucha información, hacer que el tamaño de la tarjeta
crezca y poder moverla completamente y no desplazar solo ciertos
componentes dentro de la misma.

En este capítulo se mostró una guía de componentes, los cuales serán de mucha
ayuda, ya que en el siguiente capítulo se hará un análisis comparativo y llegar a un
resultado.

CAPÍTULO IV

Conclusiones y resultados

42
Una vez dada a conocer la guía de componentes base en el capítulo anterior, se
implementarán esas recomendaciones y buenas prácticas en cada componente en
un proyecto real que se encuentre operando (que se encuentre en las tiendas de apps
móviles) y se sugerirá una mejora de implementación de componentes y de
usabilidad. Los resultados serán completamente subjetivos pero la implementación
estará completamente basada en el estándar de calidad de software ISO/IEC 9126-1
el cual hace referencia a que la funcionalidad y usabilidad ofrezca seguridad,
conformidad, madurez, usabilidad, facilidad de recuperación, fiabilidad y tolerancia a
fallos, así también como las facilidades de comprensión, de aprendizaje y operatividad
[22].

4.1 Implementación
La aplicación a analizar es “Searvices”, una app que se encuentra en operación, esta
es una red social en la que los usuarios pueden compartir sus experiencias respecto
a distintos tipos de servicios, como lo son sitios turísticos, restaurantes y eventos
(Imagen 4.1). Esta aplicación será comparada con “TripAdvisor”, una app que lleva
operando desde el año 2000 que cuenta con características similares (Imagen 4.2).

Imagen 4.1 - Searvices

Imagen 4.2 - TripAdvisor

43
Primero, se analizarán una pantalla de Searvices en cuestión de diseño,
usabilidad y tiempo que toma realizar una acción, haciendo una lista puntos a
considerar, después se realizará una comparación de cómo TripAdvisor soluciona los
puntos mencionados y por último, se darán a conocer sugerencias para solucionar
dichos puntos en Searvices. Los tiempos de interacción están basadas en la actividad
de 5 personas tomadas completamente al azar, al final se mostrará una tabla con los
resultados en tiempos de cada persona.

La pantalla principal, en la cual se requiere tener un acceso directo a servicios
y filtrar los mismos mediante regiones.

Imagen 4.3 - Pantalla principal de Searvices

Las observaciones para esta pantalla son:
1. En la barra inferior de navegación, se implementan de tres a cinco destinos, en
este caso cuenta con dos.
2. En la barra superior de navegación, utilizar por igual solo iconos, texto o iconos
y texto en cada una de las opciones de destinos, en este caso se utiliza una
opción con texto y dos con iconos.
3. En la barra superior de navegación, se implementa iconografía ambigua.

44
4. El botón para filtrar servicios por región, no hace mucho contraste con el fondo,
por lo tanto, en primera instancia, no se puede llegar a considerar un botón lo
cual causaría al usuario perder tiempo al querer aplicar un filtro.
5. Advertencia al utilizar botones contorneados dentro de imágenes.

Una vez listados los puntos a considerar, se hará la comparación con la pantalla
principal de TripAdvisor, buscando los mismos requisitos que en la pantalla de
Searvices que se mostró anteriormente.

Imagen 4.4 - Pantalla principal de TripAdvisor

Como se puede notar, TripAdvisor implementa botones que representan una
jerarquía y estos hacen contraste al fondo, con el texto, se intuye que es una opción
para seleccionar alguna región por lo cual de entrada se sabe que ahí se encuentra

45
el filtro, de igual manera, los botones para accesos directos a los servicios cuentan
con textos e iconografía para unamejor orientación.

Las recomendaciones de implementación a la pantalla de Searvices son:
1. Al no tener tantos destinos dentro de la app, remover la barra de navegación
inferior y utilizar un menú lateral.
2. Remover la imagen como fondo o cambiar el color del fondo para que el botón
cambie de región y sea más fácil de identificar.
3. Las opciones de la barra inferior, cambiarla por iconos dentro de la pantalla, o
dentro de una barra superior mediante iconos.

Al aplicar los cambios mencionados, un posible diseño será el siguiente:

Imagen 4.5- Sugerencia de pantalla principal

46
Como se puede apreciar, la pantalla no tiene saturaciones de color, la
navegación se cambió por un icono que da referencia a navegación, el botón para
cambiar de región es notable y el icono incluido en el texto, brinda un sentimiento de
poder expandir para aplicar un filtrado. Las imágenes como accesos directos pueden
ser opcionales.

4.2 Resultados
Una vez aplicada la sugerencia se dieron los siguientes resultados:

Tabla 1.1- Resultados de uso de Searvices
Persona Tiempo en culminar el objetivo
Persona 1 23.8 Segundos
Persona 2 28.4 Segundos
Persona 3 33.2 Segundos
Persona 4 22.9 Segundos
Persona 5 30.9 Segundos

Gráfico 1.1 – Resultados de Searvices

0
5
10
15
20
25
30
35
Persona 1 Persona 2 Persona 3 Persona 4 Persona 5
Tiempo en culminar el objetivo (en segundos)
Tiempo en culminar el objetivo (en segundos)

47
Tabla 1.2- Resultados de uso de Trip advisor
Persona Tiempo en culminar el objetivo
Persona 1 12.7 Segundos
Persona 2 18.6 Segundos
Persona 3 20.3 Segundos
Persona 4 12.6 Segundos
Persona 5 15.2 Segundos

Gráfico 1.2 – Resultados de TripAdvisor

Tabla 1.3- Resultados de uso de Searvices con implementación de
sugerencias
Persona Tiempo en culminar el objetivo
Persona 1 14.9 Segundos
Persona 2 21.4 Segundos
Persona 3 24.6 Segundos
Persona 4 18.3 Segundos
Persona 5 17.2 Segundos

0
5
10
15
20
25
Persona 1 Persona 2 Persona 3 Persona 4 Persona 5
Tiempo en culminar el objetivo (en segundos)
Tiempo en culminar el objetivo (en segundos)

48
Gráfico 1.3 – Resultados de implementación en Searvices

Tabla 1.4- Comparaciones de resultados
App Media de tiempo invertido
Searvices 27.8 Segundos
TripAdvisor 15.8 Segundos
Searvices con implementación
de sugerencias
19.2 Segundos

Gráfico 1.4 – Media de tiempo invertido

0
5
10
15
20
25
30
Persona 1 Persona 2 Persona 3 Persona 4 Persona 5
Tiempo en culminar el objetivo (en segundos)
Tiempo en culminar el objetivo (en segundos)
0
5
10
15
20
25
30
Searvices TripAdvisor Searvices con implementación
Media de tiempo invertido (en segundos)
Media de tiempo invertido (en segundos)

49
Como resultado, el aplicar el acomodo de componentes (diseño) basados en
las interacciones de los usuarios, disminuirá el tiempo en el que estos puedan acceder
a la funcionalidad deseada y por consecuencia, completar su objetivo en menos
tiempo del que tomaría si no se lleva un análisis de acomodo.

4.3 Casos de éxito y estadísticas
Antes de llegar a una conclusión, se darán a conocer unos casos de éxito en
empresas que decidieron implementar una mejora en el diseño y en la experiencia de
usuario dentro de sus plataformas, cabe recalcar que los siguientes casos de éxito y
estadísticas fueron recopilados por el diseñador Jozef Toth [23].

4.3.1 Casos de éxito
Los casos de éxito son:
1. El sitio web de time.com redujo los abandonos a su sitio web un 15% después
de implementar un scroll infinito dentro de su página.
2. Los ingresos de ESPN.com aumentaron un 35% después de que escucharon
a su comunidad e incorporaron sugerencias en el rediseño de su página de
inicio.
3. Elegir un azul específico sobre otros tonos equivalía a $80 millones USD
adicionales en ingresos anuales para Bing.

4.3.2 Estadísticas
Las estadísticas destacadas son:
1. En 10 años una inversión de $10,000 USD en compañías encargadas de
implementar diseño y experiencia de usuario arroja un rendimiento del 228%
mayor que si se invirtiera la misma cantidad de dinero en la bolsa de valores.
2. Los sitios web de carga lenta les cuesta a minoristas $ 2,6 mil millones USD en
ventas perdidas cada año.
3. Los juicios sobre la credibilidad del sitio web se basan en un 75% en la estética
general del sitio web.
4. Las primeras impresiones están 94% relacionadas con el diseño.

50
4.4 Conclusión
Para concluir, el análisis e implementación de acomodo de componentes enfocados
a usabilidad dentro de apps móviles, hará que los usuarios que utilizan la misma,
logren sus cometidos en el menor tiempo posible y por consecuencia, hará que la app
sea utilizable. Es muy importante no dejar de lado este análisis, ya que como se
mencionó en los casos de éxito del punto 4.3.1, han sido pérdidas considerables a
causa de la falta de análisis en la usabilidad, el acomodo e implementación de
componentes. Este análisis se debe priorizar a la hora de lanzar una app, las grandes
apps funcionan como se desea ya que estos aplican una rigurosa investigación de
usabilidad y se encuentran en constantes actualizaciones de interfaces para
adaptarse más a las preferencias de sus usuarios y no hacer que los usuarios se
adapten a la interfaz. Hay que tomar en cuenta que el enfoque de la app que se
desarrolle, puede cambiar por completo el acomodo de componentes ya que no son
los mismos objetivos de la app y por ende no podrán mostrar el mismo tipo de
información.

51
Bibliografías

[1] Universidad politécnica de Sinaloa | Identidad institucional (2014). Recuperado
7 de noviembre del año 2019, de la página
http://www.upsin.edu.mx/identidad_institucional

[2] QODE | ¿Qué es una app? (31 de octubre del 2012). Recuperado 7 de
noviembre del año 2019, de la página https://www.qode.pro/blog/que-es-una-app/

[3] Margaret Rouse y James Denman | Desarrollo de aplicaciones móviles (Julio
del 2017). Recuperado 7 de noviembre del año 2019, de la página
https://searchdatacenter.techtarget.com/es/definicion/Desarrollo-de-aplicaciones-
moviles

[4] Nancy C. Goodwin | Functionality and usability (1 de marzo de 1987).
Recuperado 7 de noviembre del año 2019, de la página
https://go.galegroup.com/ps/anonymous?id=GALE%7CA6365615&sid=googleSchol
ar&v=2.1&it=r&linkaccess=abs&issn=00010782&p=AONE&sw=w

[5] Lic. Enriquez Juan Gabriel y Dra. Casas Sandra Isabel | Usabilidad en
aplicaciones móviles. Recuperado 12 de noviembre del año 2019, de la página
https://dialnet.unirioja.es/descarga/articulo/5123524.pdf

[6] Martínez de la Teja, Guillermo Manuel | Ergonomía e interfases de interacción
humano-computadora (28 de abril de 2007). Recuperado 12 de noviembre del año
2019, de la página http://www.semac.org.mx/archivos/9-6.pdf

[7] Luis A. Castro, Marcela D. Rodríguez | Interacción Humano-Computadora y
Aplicaciones en México. Recuperado 12 de noviembre del año 2019, de la página
http://amexcomp.mx/files/InteraccionHumanoComputadora.pdf

https://www.britannica.com/technology/database
https://www.britannica.com/technology/database
https://www.britannica.com/technology/database
http://www.upsin.edu.mx/identidad_institucional
https://www.britannica.com/technology/database
https://www.qode.pro/blog/que-es-una-app/
https://www.britannica.com/technology/database
https://searchdatacenter.techtarget.com/es/definicion/Desarrollo-de-aplicaciones-moviles
https://searchdatacenter.techtarget.com/es/definicion/Desarrollo-de-aplicaciones-moviles
https://www.britannica.com/technology/database
https://go.galegroup.com/ps/anonymous?id=GALE%7CA6365615&sid=googleScholar&v=2.1&it=r&linkaccess=abs&issn=00010782&p=AONE&sw=w
https://go.galegroup.com/ps/anonymous?id=GALE%7CA6365615&sid=googleScholar&v=2.1&it=r&linkaccess=abs&issn=00010782&p=AONE&sw=whttps://www.britannica.com/technology/database
https://www.britannica.com/technology/database
http://www.semac.org.mx/archivos/9-6.pdf
https://www.britannica.com/technology/database
http://amexcomp.mx/files/InteraccionHumanoComputadora.pdf

52
[8] International Design Foundation | User Experience (UX) Design. Recuperado
12 de noviembre del año 2019, de la página https://www.interaction-
design.org/literature/topics/ux-design

[9] María Costa Osuna | EXPERIENCIA DE USUARIO (UX). Recuperado 12 de
noviembre del año 2019, de la página http://webs.ucm.es/BUCM/revcul//e-learning-
innova/224/art3403.pdf

[10] Strate, school of design | What is design? Recuperado 12 de noviembre del
año 2019, de la página https://www.strate.education/gallery/news/design-definition

[11] Javier Cuello y José Vittone | Diseñando apps para móviles (junio del 2013).
Recuperado 12 de noviembre del año 2019

[12] Margaret Rouse | User interface (UI) (Agosto del 2019). Recuperado 12 de
noviembre del año 2019, de la página
https://searchapparchitecture.techtarget.com/definition/user-interface-UI

[13] Ivan Burmistrov, Tatiana ZlokazovaAnna, IzmalkovaAnna Leonova | Flat
Design vs Traditional Design: Comparative Experimental Study (30 de Agosto del
2015). Recuperado 12 de noviembre del año 2019, de la página
https://link.springer.com/chapter/10.1007/978-3-319-22668-2_10

[14] Material | Introduction. Recuperado 12 de noviembre del año 2019, de la página
https://material.io/design/introduction/#

[15] MARIANO JAVIER RUA MEJIA, M. J. A. V. I. E. R. (2014, 4 junio).
PROGRAMACION ORIENTADA POR COMPONENTES. Recuperado 24 noviembre,
2019, de http://programacioncomponentes.blogspot.com/

[16] Material, M. (s.f.). Surfaces. Recuperado 24 noviembre, 2019, de
https://material.io/design/environment/surfaces.html

https://www.britannica.com/technology/database
https://www.interaction-design.org/literature/topics/ux-design
https://www.interaction-design.org/literature/topics/ux-design
https://www.britannica.com/technology/database
http://webs.ucm.es/BUCM/revcul/e-learning-innova/224/art3403.pdf
http://webs.ucm.es/BUCM/revcul/e-learning-innova/224/art3403.pdf
https://www.britannica.com/technology/database
https://www.strate.education/gallery/news/design-definition
https://www.britannica.com/technology/database
https://searchapparchitecture.techtarget.com/definition/user-interface-UI
https://www.britannica.com/technology/database
https://link.springer.com/chapter/10.1007/978-3-319-22668-2_10
https://www.britannica.com/technology/database
https://material.io/design/introduction/

53
[17] Cortijo Bon, F. Francisco josé, & Berzal Galiano, F. Fernando. (s.f.).
Programación visual de aplicaciones con C++ Builder. Recuperado 24 noviembre,
2019, de http://elvex.ugr.es/decsai/builder/index.html

[18] Computer Hope. (2017, 26 abril). Event. Recuperado 24 noviembre, 2019, de
https://www.computerhope.com/jargon/e/event.htm

[19] Material. (s.f.-a). Understanding layout. Recuperado 27 noviembre, 2019, de
https://material.io/design/layout/understanding-layout.html

[20] Material. (s.f.-b). Responsive layout grid. Recuperado 27 noviembre, 2019, de
https://material.io/design/layout/responsive-layout-grid.html

[21] Material. (s.f.-c). Pixel density. Recuperado 28 noviembre, 2019, de
https://material.io/design/layout/pixel-density.html

[22] Roger S. Pressman, Ph.D. (2005). Ingeniería del software un enfoque práctico.
Connecticut: McGraw Hill.

[23] Toth, J. T. Jozef. (2015, 24 noviembre). 13 impressive statistics on user
experience | Inside Design Blog. Recuperado 11 diciembre, 2019, de
https://www.invisionapp.com/inside-design/statistics-on-user-experience/

http://elvex.ugr.es/decsai/builder/index.html
https://www.computerhope.com/jargon/e/event.htm
https://material.io/design/layout/understanding-layout.html
https://material.io/design/layout/responsive-layout-grid.html
https://material.io/design/layout/pixel-density.html